react-better-html 1.1.276 → 1.1.278

package/dist/index.js

@@ -72,6 +72,7 @@ __export(index_exports, {
   formatPhoneNumber: () => import_react_better_core30.formatPhoneNumber,
   generateApi: () => import_react_better_core30.generateApi,
   generateEventEmitter: () => import_react_better_core30.generateEventEmitter,
+  generateI18n: () => generateI18n,
   generateLocalStorage: () => generateLocalStorage,
   generateRandomString: () => import_react_better_core30.generateRandomString,
   getBrowser: () => getBrowser,
@@ -113,6 +114,7 @@ var appConfig = {
 };
 var defaultAlertDuration = 2.3 * 1e3;
 var defaultSideMenuWidth = 300;
+var defaultSideBarWidth = 80;
 
 // src/constants/theme.ts
 var theme = {};
@@ -3156,7 +3158,18 @@ 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 { alerts, setAlerts, setSideMenuIsCollapsed, setSideMenuIsOpenMobile, plugins, componentsState, ...rest } = context;
+  const {
+    alerts,
+    setAlerts,
+    setLanguage,
+    languages,
+    setLanguages,
+    setSideMenuIsCollapsed,
+    setSideMenuIsOpenMobile,
+    plugins,
+    componentsState,
+    ...rest
+  } = context;
   return {
     ...coreContext,
     ...rest
@@ -3223,6 +3236,8 @@ function BetterHtmlProviderInternalContent({ children }) {
 function BetterHtmlProviderInternal({ config, plugins, children }) {
   const betterCoreContext = (0, import_react_better_core13.useBetterCoreContext)();
   const [alerts, setAlerts] = (0, import_react14.useState)([]);
+  const [language, setLanguage] = (0, import_react14.useState)(localStorage.getItem("language") ?? "");
+  const [languages, setLanguages] = (0, import_react14.useState)({});
   const [sideMenuIsCollapsed, setSideMenuIsCollapsed] = (0, import_react_better_core13.useBooleanState)();
   const [sideMenuIsOpenMobile, setSideMenuIsOpenMobile] = (0, import_react_better_core13.useBooleanState)();
   const [tabGroups, setTabGroups] = (0, import_react14.useState)([]);
@@ -3235,6 +3250,10 @@ function BetterHtmlProviderInternal({ config, plugins, children }) {
       },
       alerts,
       setAlerts,
+      language,
+      setLanguage,
+      languages,
+      setLanguages,
       sideMenuIsCollapsed,
       setSideMenuIsCollapsed,
       sideMenuIsOpenMobile,
@@ -3252,7 +3271,17 @@ function BetterHtmlProviderInternal({ config, plugins, children }) {
         }
       }
     }),
-    [config, alerts, sideMenuIsCollapsed, sideMenuIsOpenMobile, plugins, tabGroups, tabsWithDots]
+    [
+      config,
+      alerts,
+      language,
+      languages,
+      sideMenuIsCollapsed,
+      sideMenuIsOpenMobile,
+      plugins,
+      tabGroups,
+      tabsWithDots
+    ]
   );
   (0, import_react14.useEffect)(() => {
     if (!plugins) return;
@@ -3480,14 +3509,72 @@ function generateLocalStorage() {
   };
 }
 
-// src/components/PageHolder.tsx
+// src/utils/i18n.tsx
 var import_react15 = require("react");
-var import_react_better_core14 = require("react-better-core");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var PageHolderComponent = (0, import_react15.forwardRef)(function PageHolder({ noMaxContentWidth, children, ...props }, ref) {
+var missingTranslation = "MISSING_TRANSLATION";
+function generateI18n(config) {
+  setTimeout(() => {
+    externalBetterHtmlContextValue?.setLanguages(config.languages);
+    const cachedLanguage = localStorage.getItem("language");
+    const language = !cachedLanguage || !Object.keys(config.languages).includes(cachedLanguage) ? config.defaultLanguage : cachedLanguage;
+    setLanguage(language);
+  }, 1);
+  function setLanguage(language) {
+    externalBetterHtmlContextValue?.setLanguage(language);
+    localStorage.setItem("language", language);
+  }
+  function internalI18n(language) {
+    function translate(getString, template) {
+      const words = config.languages[language]?.words;
+      try {
+        const readyString = words ? getString?.(words) ?? missingTranslation : missingTranslation;
+        if (!template) return readyString;
+        const matches = Array.from(readyString.matchAll(/{([^}]+)}/g));
+        if (matches.length === 0) return readyString;
+        const parts = [];
+        let lastIndex = 0;
+        matches.forEach((match, index) => {
+          const [fullMatch, key] = match;
+          const startIndex = match.index;
+          if (startIndex > lastIndex) parts.push(readyString.substring(lastIndex, startIndex));
+          const readyKey = words.templates[key.trim()] ?? fullMatch;
+          const handler = template[key.trim()];
+          parts.push(handler ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react15.Fragment, { children: handler(readyKey, index) }, fullMatch) : fullMatch);
+          lastIndex = startIndex + fullMatch.length;
+        });
+        if (lastIndex < readyString.length) parts.push(readyString.substring(lastIndex));
+        return parts;
+      } catch (error) {
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: missingTranslation });
+      }
+    }
+    return {
+      t: translate,
+      language,
+      setLanguage
+    };
+  }
+  return {
+    useI18n: () => {
+      const { language } = useBetterHtmlContext();
+      return {
+        ...internalI18n(language ?? config.defaultLanguage)
+      };
+    },
+    ...internalI18n(externalBetterHtmlContextValue?.language ?? config.defaultLanguage),
+    ...config
+  };
+}
+
+// src/components/PageHolder.tsx
+var import_react16 = require("react");
+var import_react_better_core14 = require("react-better-core");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var PageHolderComponent = (0, import_react16.forwardRef)(function PageHolder({ noMaxContentWidth, children, ...props }, ref) {
   const theme2 = (0, import_react_better_core14.useTheme)();
   const { app } = useBetterHtmlContextInternal();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Div_default,
     {
       as: "main",
@@ -3501,7 +3588,7 @@ var PageHolderComponent = (0, import_react15.forwardRef)(function PageHolder({ n
     }
   );
 });
-PageHolderComponent.center = (0, import_react15.forwardRef)(function Center({
+PageHolderComponent.center = (0, import_react16.forwardRef)(function Center({
   height,
   pageBackgroundColor,
   pageBackgroundImage,
@@ -3520,7 +3607,7 @@ PageHolderComponent.center = (0, import_react15.forwardRef)(function Center({
   const breakingPoint = mediaQuery.size1000;
   const withSideComponent = sideComponent && !breakingPoint;
   const ContentTag = contentInsideBox !== false ? Div_default.box : Div_default;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     Div_default.row,
     {
       position: "relative",
@@ -3531,7 +3618,7 @@ PageHolderComponent.center = (0, import_react15.forwardRef)(function Center({
       backgroundColor: pageBackgroundColor,
       backgroundImage: pageBackgroundImage,
       children: [
-        behindComponent && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        behindComponent && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Div_default,
           {
             position: "fixed",
@@ -3544,8 +3631,8 @@ PageHolderComponent.center = (0, import_react15.forwardRef)(function Center({
             children: behindComponent
           }
         ),
-        sideComponentPosition === "left" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Div_default, { width: "50%" }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        sideComponentPosition === "left" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Div_default, { width: "50%" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           ContentTag,
           {
             width: `calc(100% - ${((props.margin ?? props.marginInline) !== void 0 ? parseFloat((props.margin ?? props.marginInline)?.toString() ?? "") : theme2.styles.space) * 2}px)`,
@@ -3558,8 +3645,8 @@ PageHolderComponent.center = (0, import_react15.forwardRef)(function Center({
             children
           }
         ) }),
-        sideComponentPosition === "right" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Div_default, { width: "50%" }),
-        withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        sideComponentPosition === "right" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Div_default, { width: "50%" }),
+        withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Div_default,
           {
             position: "fixed",
@@ -3575,16 +3662,16 @@ PageHolderComponent.center = (0, import_react15.forwardRef)(function Center({
     }
   );
 });
-var PageHolder2 = (0, import_react15.memo)(PageHolderComponent);
+var PageHolder2 = (0, import_react16.memo)(PageHolderComponent);
 PageHolder2.center = PageHolderComponent.center;
 var PageHolder_default = PageHolder2;
 
 // src/components/Chip.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_react_better_core15 = require("react-better-core");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var borderRadiusOffset = 1.3;
-var ChipComponent = (0, import_react16.forwardRef)(function Chip({
+var ChipComponent = (0, import_react17.forwardRef)(function Chip({
   text,
   beforeText,
   afterText,
@@ -3598,14 +3685,14 @@ var ChipComponent = (0, import_react16.forwardRef)(function Chip({
   ...props
 }, ref) {
   const theme2 = (0, import_react_better_core15.useTheme)();
-  const onClickElement = (0, import_react16.useCallback)(
+  const onClickElement = (0, import_react17.useCallback)(
     (event) => {
       onClick?.(event);
       onClickWithValue?.(value);
     },
     [onClick, onClickWithValue, value]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     Div_default,
     {
       width: "fit-content",
@@ -3618,19 +3705,19 @@ var ChipComponent = (0, import_react16.forwardRef)(function Chip({
       cursor: onClick || onClickWithValue ? "pointer" : void 0,
       ...props,
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Div_default.row, { height: "100%", alignItems: "center", gap: theme2.styles.gap, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Div_default.row, { height: "100%", alignItems: "center", gap: theme2.styles.gap, children: [
         beforeText,
-        typeof text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text_default, { color: color ?? theme2.colors.textPrimary, children: text }) : text,
+        typeof text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default, { color: color ?? theme2.colors.textPrimary, children: text }) : text,
         afterText
       ] })
     }
   );
 });
-ChipComponent.colored = (0, import_react16.forwardRef)(function Colored({ color, withWhiteBackground, ...props }, ref) {
+ChipComponent.colored = (0, import_react17.forwardRef)(function Colored({ color, withWhiteBackground, ...props }, ref) {
   const theme2 = (0, import_react_better_core15.useTheme)();
   const { colorTheme } = (0, import_react_better_core15.useBetterCoreContext)();
   const readyColor = color ?? theme2.colors.textSecondary;
-  const chip = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  const chip = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     ChipComponent,
     {
       color: colorTheme === "light" ? (0, import_react_better_core15.darkenColor)(readyColor, 0.7) : (0, import_react_better_core15.lightenColor)(readyColor, 0.7),
@@ -3640,7 +3727,7 @@ ChipComponent.colored = (0, import_react16.forwardRef)(function Colored({ color,
       ...props
     }
   );
-  return withWhiteBackground ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return withWhiteBackground ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     Div_default,
     {
       width: "fit-content",
@@ -3650,19 +3737,19 @@ ChipComponent.colored = (0, import_react16.forwardRef)(function Colored({ color,
     }
   ) : chip;
 });
-var Chip2 = (0, import_react16.memo)(ChipComponent);
+var Chip2 = (0, import_react17.memo)(ChipComponent);
 Chip2.colored = ChipComponent.colored;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_better_core19 = require("react-better-core");
 var import_styled_components11 = __toESM(require("styled-components"));
 
 // src/components/Label.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_better_core16 = require("react-better-core");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Label(labelProps) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const {
@@ -3678,7 +3765,7 @@ function Label(labelProps) {
     htmlFor
   } = useComponentsPropsMerger(betterHtmlContextInternal.components.label?.style?.default, labelProps);
   const theme2 = (0, import_react_better_core16.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     Text_default,
     {
       as: "label",
@@ -3692,7 +3779,7 @@ function Label(labelProps) {
       "aria-required": required,
       children: [
         text,
-        required && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        required && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           Text_default,
           {
             as: "span",
@@ -3711,14 +3798,14 @@ function Label(labelProps) {
     }
   );
 }
-var Label_default = (0, import_react17.memo)(Label);
+var Label_default = (0, import_react18.memo)(Label);
 
 // src/components/Dropdown.tsx
-var import_react18 = require("react");
-var import_react_better_core17 = require("react-better-core");
-var import_jsx_runtime16 = require("react/jsx-runtime");
 var import_react19 = require("react");
-var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdownProps, ref) {
+var import_react_better_core17 = require("react-better-core");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var DropdownComponent = (0, import_react19.forwardRef)(function Dropdown(dropdownProps, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const {
     label,
@@ -3744,6 +3831,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
     debounceDelay = 0.5,
     debounceIsLoading,
     debounceMinimumSymbolsRequired,
+    withoutArrow,
     withoutClearButton,
     withoutRenderingOptionsWhenClosed,
     onChange,
@@ -3752,34 +3840,35 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
     renderOptionDivider,
     withMultiselect,
     id,
+    textAlign,
     ...props
   } = useComponentsPropsMerger(
     betterHtmlContextInternal.components.dropdown?.style?.default,
     dropdownProps
   );
   const theme2 = (0, import_react_better_core17.useTheme)();
-  const inputFieldHolderRef = (0, import_react18.useRef)(null);
-  const buttonsRef = (0, import_react18.useRef)(null);
-  const inputRef = (0, import_react18.useRef)(null);
+  const inputFieldHolderRef = (0, import_react19.useRef)(null);
+  const buttonsRef = (0, import_react19.useRef)(null);
+  const inputRef = (0, import_react19.useRef)(null);
   const [isOpen, setIsOpen] = (0, import_react_better_core17.useBooleanState)();
   const [isOpenLate, setIsOpenLate] = (0, import_react_better_core17.useBooleanState)();
   const [isFocused, setIsFocused] = (0, import_react_better_core17.useBooleanState)();
-  const [searchQuery, setSearchQuery] = (0, import_react18.useState)("");
+  const [searchQuery, setSearchQuery] = (0, import_react19.useState)("");
   const [_, debouncedSearchQuery, setDebouncedSearchQuery, isLoadingDebouncedSearchQuery] = (0, import_react_better_core17.useDebounceState)(
     "",
     debounceDelay
   );
-  const [focusedOptionIndex, setFocusedOptionIndex] = (0, import_react18.useState)();
-  const [internalValue, setInternalValue] = (0, import_react18.useState)(defaultValue);
+  const [focusedOptionIndex, setFocusedOptionIndex] = (0, import_react19.useState)();
+  const [internalValue, setInternalValue] = (0, import_react19.useState)(defaultValue);
   const value = controlledValue ?? internalValue;
-  const filteredOptions = (0, import_react18.useMemo)(() => {
+  const filteredOptions = (0, import_react19.useMemo)(() => {
     if (!searchQuery) return options;
     const query = searchQuery.toLowerCase();
     return options.filter(
       (option) => option.label.toLowerCase().includes(query) || option.searchValues?.some((value2) => value2.toLowerCase().includes(query))
     );
   }, [options, searchQuery]);
-  const onKeyDownInputField = (0, import_react18.useCallback)(
+  const onKeyDownInputField = (0, import_react19.useCallback)(
     (event) => {
       if (event.key === "Enter" || !withSearch && event.key === " ") {
         event.preventDefault();
@@ -3835,7 +3924,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
       withMultiselect
     ]
   );
-  const onClickOption = (0, import_react18.useCallback)(
+  const onClickOption = (0, import_react19.useCallback)(
     (option) => {
       if (!option.disabled) {
         const clickedValue = option.value;
@@ -3852,7 +3941,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
     },
     [onChange, internalValue, controlledValue, withMultiselect]
   );
-  const onClickClearButton = (0, import_react18.useCallback)(
+  const onClickClearButton = (0, import_react19.useCallback)(
     (event) => {
       event.stopPropagation();
       setInternalValue(void 0);
@@ -3864,7 +3953,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
     },
     [onChange]
   );
-  const onChangeValue = (0, import_react18.useCallback)(
+  const onChangeValue = (0, import_react19.useCallback)(
     (newValue) => {
       setSearchQuery(newValue);
       setIsOpen.setTrue();
@@ -3873,19 +3962,19 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
     },
     [withDebounce, onChangeSearch]
   );
-  const selectedOption = (0, import_react18.useMemo)(
+  const selectedOption = (0, import_react19.useMemo)(
     () => withMultiselect ? options.filter((option) => Array.isArray(value) ? value.includes(option.value) : false) : options.find((option) => option.value === value),
     [options, value]
   );
-  const renderedOptions = (0, import_react18.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+  const renderedOptions = (0, import_react19.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
       renderOptionDivider ? renderOptionDivider(void 0, filteredOptions[0], -1, 0) : void 0,
       filteredOptions.map((option, index) => {
         const isSelected = withMultiselect ? Array.isArray(value) ? value.includes(option.value) : false : option.value === value;
         const isDisabled = option.disabled;
         const isFocused2 = index === focusedOptionIndex;
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react18.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react19.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             Div_default,
             {
               color: isDisabled ? theme2.colors.textSecondary + "80" : isSelected ? theme2.colors.base : theme2.colors.textPrimary,
@@ -3900,7 +3989,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
               role: "option",
               "aria-selected": isSelected,
               "aria-disabled": isDisabled,
-              children: renderOption ? renderOption(option, index, isSelected) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: !option.renderType || option.renderType === "default" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { children: option.label }) : option.renderType === "chip" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Chip_default, { text: option.label, ...option.chipProps }) : option.renderType === "chip.colored" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Chip_default.colored, { text: option.label, withWhiteBackground: true, ...option.chipProps }) : void 0 })
+              children: renderOption ? renderOption(option, index, isSelected) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: !option.renderType || option.renderType === "default" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { children: option.label }) : option.renderType === "chip" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Chip_default, { text: option.label, ...option.chipProps }) : option.renderType === "chip.colored" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Chip_default.colored, { text: option.label, withWhiteBackground: true, ...option.chipProps }) : void 0 })
             }
           ),
           renderOptionDivider ? renderOptionDivider(
@@ -3923,10 +4012,10 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
       renderOptionDivider
     ]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setInternalValue(controlledValue);
   }, [controlledValue]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (isOpen) {
       setIsOpenLate.setTrue();
       if (withSearch && inputRef.current) inputRef.current.focus();
@@ -3937,10 +4026,10 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
       };
     }
   }, [isOpen, withSearch]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setFocusedOptionIndex(void 0);
   }, [filteredOptions]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (inputFieldHolderRef.current && buttonsRef.current && !inputFieldHolderRef.current.contains(event.target) && !buttonsRef.current.contains(event.target)) {
         setIsOpen.setFalse();
@@ -3955,14 +4044,14 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!withDebounce) return;
     onChangeSearch?.(debouncedSearchQuery);
   }, [withDebounce, onChangeSearch, debouncedSearchQuery]);
   const displayValue = (withSearch && isFocused ? searchQuery : !Array.isArray(selectedOption) ? selectedOption?.label : void 0) ?? "";
   const withClearButton = isOpen && (Array.isArray(selectedOption) ? selectedOption.length > 0 : selectedOption);
   const readyPlaceholder = placeholder ?? `Select ${!withMultiselect ? "an " : ""}${label?.toLowerCase() ?? (0, import_react_better_core17.getPluralWord)("option", withMultiselect ? 2 : 1)}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     InputField_default,
     {
       label,
@@ -3975,6 +4064,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
       errorText,
       infoText,
       required: withMultiselect ? (Array.isArray(value) ? value.length > 0 : value !== void 0) ? false : required : required,
+      textAlign,
       name,
       disabled,
       readOnly: !withSearch,
@@ -3984,13 +4074,13 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
       placeholder: withSearch ? selectedOption && !Array.isArray(selectedOption) ? selectedOption.label : readyPlaceholder : readyPlaceholder,
       leftIcon,
       autoComplete: "off",
-      className: `react-better-html-dropdown${Array.isArray(selectedOption) && selectedOption.length > 0 ? " react-better-html-dropdown-multiselect" : ""}${isOpen ? " react-better-html-dropdown-open" : ""}${isOpenLate ? " react-better-html-dropdown-open-late" : ""}${inputFieldClassName ? ` ${inputFieldClassName}` : ""}`,
+      className: `react-better-html-dropdown${withoutArrow ? " react-better-html-dropdown-without-arrow" : ""}${Array.isArray(selectedOption) && selectedOption.length > 0 ? " react-better-html-dropdown-multiselect" : ""}${isOpen ? " react-better-html-dropdown-open" : ""}${isOpenLate ? " react-better-html-dropdown-open-late" : ""}${inputFieldClassName ? ` ${inputFieldClassName}` : ""}`,
       onClick: !disabled ? withMultiselect ? setIsOpen.setTrue : setIsOpen.toggle : void 0,
       onFocus: setIsFocused.setTrue,
       onBlur: setIsFocused.setFalse,
       onKeyDown: onKeyDownInputField,
       onChangeValue: withSearch ? onChangeValue : void 0,
-      insideInputFieldBeforeComponent: Array.isArray(selectedOption) && selectedOption.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      insideInputFieldBeforeComponent: Array.isArray(selectedOption) && selectedOption.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         Div_default,
         {
           width: "100%",
@@ -4003,14 +4093,14 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
           paddingBlock: theme2.styles.gap,
           paddingInline: (theme2.styles.space + theme2.styles.gap) / 2,
           transition: theme2.styles.transition,
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Div_default.row, { width: "100%", flexWrap: "wrap", gap: theme2.styles.gap, children: selectedOption.map((option) => {
+          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Div_default.row, { width: "100%", flexWrap: "wrap", gap: theme2.styles.gap, children: selectedOption.map((option) => {
             const ChipComponentTag = !option.renderType || option.renderType === "default" || option.renderType === "chip" ? Chip_default : option.renderType === "chip.colored" ? Chip_default.colored : Chip_default;
             const withXButton = isFocused || isOpen;
-            return /* @__PURE__ */ (0, import_react19.createElement)(
+            return /* @__PURE__ */ (0, import_react20.createElement)(
               ChipComponentTag,
               {
                 text: option.label,
-                afterText: withXButton && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                afterText: withXButton && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   Button_default.icon,
                   {
                     icon: "XMark",
@@ -4032,8 +4122,8 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
           }) })
         }
       ) : void 0,
-      insideInputFieldAfterComponent: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      insideInputFieldAfterComponent: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           Div_default,
           {
             position: "absolute",
@@ -4055,10 +4145,10 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
             transition: theme2.styles.transition,
             role: "listbox",
             "aria-label": label,
-            children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Loader_default.text, {}) }) : filteredOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: (withoutRenderingOptionsWhenClosed ? isOpen || isOpenLate : true) ? renderedOptions : void 0 }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
+            children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Loader_default.text, {}) }) : filteredOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: (withoutRenderingOptionsWhenClosed ? isOpen || isOpenLate : true) ? renderedOptions : void 0 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           Div_default.row,
           {
             position: "absolute",
@@ -4073,7 +4163,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
             zIndex: isOpen || isOpenLate ? 1001 : void 0,
             ref: buttonsRef,
             children: [
-              !withoutClearButton && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              !withoutClearButton && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 Button_default.icon,
                 {
                   icon: "XMark",
@@ -4086,7 +4176,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
                   disabled: !withClearButton
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              !withoutArrow && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 Icon_default,
                 {
                   name: "chevronDown",
@@ -4114,21 +4204,21 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
     }
   ) });
 });
-DropdownComponent.countries = (0, import_react18.forwardRef)(function Countries(dropdownProps, ref) {
+DropdownComponent.countries = (0, import_react19.forwardRef)(function Countries(dropdownProps, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const props = useComponentsPropsMerger(
     betterHtmlContextInternal.components.dropdown?.style?.countries,
     dropdownProps
   );
   const theme2 = (0, import_react_better_core17.useTheme)();
-  const renderOption = (0, import_react18.useCallback)(
-    (option, index, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { children: option.label })
+  const renderOption = (0, import_react19.useCallback)(
+    (option, index, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { children: option.label })
     ] }),
     []
   );
-  const options = (0, import_react18.useMemo)(
+  const options = (0, import_react19.useMemo)(
     () => import_react_better_core17.countries.map(
       (country) => ({
         value: country.code,
@@ -4139,7 +4229,7 @@ DropdownComponent.countries = (0, import_react18.forwardRef)(function Countries(
     ),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     DropdownComponent,
     {
       placeholder: "Select a country",
@@ -4151,15 +4241,63 @@ DropdownComponent.countries = (0, import_react18.forwardRef)(function Countries(
     }
   );
 });
-var Dropdown2 = (0, import_react18.memo)(DropdownComponent);
+DropdownComponent.language = (0, import_react19.forwardRef)(function Countries2({ isSmall, ...dropdownProps }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { inputFieldClassName, ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.dropdown?.style?.language,
+    dropdownProps
+  );
+  const theme2 = (0, import_react_better_core17.useTheme)();
+  const renderOption = (0, import_react19.useCallback)(
+    (option, index, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { alignItems: "center", justifyContent: isSmall ? "center" : void 0, gap: theme2.styles.gap, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Image_default, { src: `https://flagcdn.com/w80/${option.data?.flagCode.toString().toLowerCase()}.webp`, width: 20 }),
+      !isSmall && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { children: option.label })
+    ] }),
+    [isSmall]
+  );
+  const onChange = (0, import_react19.useCallback)((value) => {
+    betterHtmlContextInternal.setLanguage(value);
+    localStorage.setItem("language", value);
+  }, []);
+  const options = (0, import_react19.useMemo)(
+    () => Object.values(betterHtmlContextInternal.languages).map(
+      (data) => ({
+        value: data.code,
+        label: isSmall ? data.code.toUpperCase() : data.name,
+        data,
+        searchValues: [data.code]
+      })
+    ),
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    DropdownComponent,
+    {
+      placeholder: isSmall ? "lang" : "Select a language",
+      withoutClearButton: true,
+      withoutArrow: isSmall,
+      width: isSmall ? 60 : void 0,
+      textAlign: isSmall ? "center" : void 0,
+      inputFieldClassName: `${inputFieldClassName}${isSmall ? " react-better-html-dropdown-no-horizontal-padding" : ""}`,
+      options,
+      renderOption,
+      value: betterHtmlContextInternal.language,
+      onChange,
+      ref,
+      ...props
+    }
+  );
+});
+var Dropdown2 = (0, import_react19.memo)(DropdownComponent);
 Dropdown2.countries = DropdownComponent.countries;
+Dropdown2.language = DropdownComponent.language;
 var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_react_better_core18 = require("react-better-core");
 var import_styled_components10 = __toESM(require("styled-components"));
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var getMonthName = (month, short = false) => {
   return [
     short ? "Jan" : "January",
@@ -4210,24 +4348,24 @@ var SelectComponent = import_styled_components10.default.select.withConfig({
 `;
 function Calendar({ value, minDate, maxDate, onChange }) {
   const theme2 = (0, import_react_better_core18.useTheme)();
-  const internalYearSelectId = (0, import_react20.useId)();
-  const [currentDate, setCurrentDate] = (0, import_react20.useState)(value ? new Date(value) : void 0);
-  const [currentMonth, setCurrentMonth] = (0, import_react20.useState)(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
-  const [currentYear, setCurrentYear] = (0, import_react20.useState)(currentDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
-  const daysInMonth = (0, import_react20.useMemo)(() => new Date(currentYear, currentMonth + 1, 0).getDate(), [currentMonth, currentYear]);
-  const onClickPreviousMonthButton = (0, import_react20.useCallback)(() => {
+  const internalYearSelectId = (0, import_react21.useId)();
+  const [currentDate, setCurrentDate] = (0, import_react21.useState)(value ? new Date(value) : void 0);
+  const [currentMonth, setCurrentMonth] = (0, import_react21.useState)(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
+  const [currentYear, setCurrentYear] = (0, import_react21.useState)(currentDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
+  const daysInMonth = (0, import_react21.useMemo)(() => new Date(currentYear, currentMonth + 1, 0).getDate(), [currentMonth, currentYear]);
+  const onClickPreviousMonthButton = (0, import_react21.useCallback)(() => {
     const newMonth = currentMonth === 0 ? 11 : currentMonth - 1;
     const newYear = currentMonth === 0 ? currentYear - 1 : currentYear;
     setCurrentMonth(newMonth);
     setCurrentYear(newYear);
   }, [currentMonth, currentYear]);
-  const onClickNextMonthButton = (0, import_react20.useCallback)(() => {
+  const onClickNextMonthButton = (0, import_react21.useCallback)(() => {
     const newMonth = currentMonth === 11 ? 0 : currentMonth + 1;
     const newYear = currentMonth === 11 ? currentYear + 1 : currentYear;
     setCurrentMonth(newMonth);
     setCurrentYear(newYear);
   }, [currentMonth, currentYear]);
-  const onClickDay = (0, import_react20.useCallback)(
+  const onClickDay = (0, import_react21.useCallback)(
     (day) => {
       if (!day) return;
       const newDate = new Date(currentYear, currentMonth, day);
@@ -4238,25 +4376,25 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     },
     [currentMonth, currentYear, onChange]
   );
-  const onClickClear = (0, import_react20.useCallback)(() => {
+  const onClickClear = (0, import_react21.useCallback)(() => {
     setCurrentDate(void 0);
     onChange?.(void 0);
   }, []);
-  const onClickToday = (0, import_react20.useCallback)(() => {
+  const onClickToday = (0, import_react21.useCallback)(() => {
     const today = /* @__PURE__ */ new Date();
     setCurrentDate(today);
     onChange?.(
       `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, "0")}-${today.getDate().toString().padStart(2, "0")}`
     );
   }, [onChange]);
-  const onChangeYearSelect = (0, import_react20.useCallback)((event) => {
+  const onChangeYearSelect = (0, import_react21.useCallback)((event) => {
     setCurrentYear(parseInt(event.target.value));
   }, []);
-  const firstDayOfMonth = (0, import_react20.useMemo)(() => {
+  const firstDayOfMonth = (0, import_react21.useMemo)(() => {
     const day = new Date(currentYear, currentMonth, 1).getDay();
     return day === 0 ? 6 : day - 1;
   }, [currentMonth, currentYear]);
-  const days = (0, import_react20.useMemo)(() => {
+  const days = (0, import_react21.useMemo)(() => {
     const result = [];
     for (let index = 0; index < firstDayOfMonth; index++) {
       result.push(void 0);
@@ -4266,44 +4404,44 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     }
     return result;
   }, [daysInMonth, firstDayOfMonth]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!value) return;
     const date = new Date(value);
     setCurrentDate(date);
     setCurrentMonth(date.getMonth());
     setCurrentYear(date.getFullYear());
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { alignItems: "center", gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontWeight: 700, children: getMonthName(currentMonth) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectWrapperComponent, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontWeight: 700, children: currentYear }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon_default, { name: "chevronDown", size: 12 }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { alignItems: "center", gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontWeight: 700, children: getMonthName(currentMonth) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectWrapperComponent, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontWeight: 700, children: currentYear }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { name: "chevronDown", size: 12 }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             SelectComponent,
             {
               theme: theme2,
               value: currentYear,
               onChange: onChangeYearSelect,
               id: internalYearSelectId,
-              children: yearsRange.map((year) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: year, children: year }, year))
+              children: yearsRange.map((year) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: year, children: year }, year))
             }
           )
         ] }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.grid, { width: "100%", gridTemplateColumns: "repeat(7, 1fr)", gap: theme2.styles.gap / 2, children: [
-      weekDaysIndex.map((day) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Div_default.row, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", children: getWeekDayName(day, true) }) }, day)),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.grid, { width: "100%", gridTemplateColumns: "repeat(7, 1fr)", gap: theme2.styles.gap / 2, children: [
+      weekDaysIndex.map((day) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default.row, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", children: getWeekDayName(day, true) }) }, day)),
       days.map((day, index) => {
         const thisDayDate = new Date(currentYear, currentMonth, day);
         const isSelected = day !== void 0 && day === currentDate?.getDate() && currentMonth === currentDate.getMonth() && currentYear === currentDate.getFullYear();
         const isToday = thisDayDate.getDate() === (/* @__PURE__ */ new Date()).getDate() && thisDayDate.getMonth() === (/* @__PURE__ */ new Date()).getMonth() && thisDayDate.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear();
         const isWeekend = thisDayDate.getDay() === 6 || thisDayDate.getDay() === 0;
         const isDisabled = minDate && thisDayDate.getTime() < minDate.getTime() || maxDate && thisDayDate.getTime() > maxDate.getTime();
-        return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           Div_default.row,
           {
             position: "relative",
@@ -4320,7 +4458,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
             value: day,
             onClickWithValue: !isDisabled ? onClickDay : void 0,
             children: [
-              day && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              day && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 Text_default,
                 {
                   fontSize: 14,
@@ -4329,7 +4467,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
                   children: day
                 }
               ),
-              isDisabled && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              isDisabled && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 Div_default,
                 {
                   position: "absolute",
@@ -4348,8 +4486,8 @@ function Calendar({ value, minDate, maxDate, onChange }) {
         );
       })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickClear, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickClear, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Text_default,
         {
           fontSize: 14,
@@ -4359,7 +4497,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
           children: "Clear"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickToday, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickToday, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Text_default,
         {
           fontSize: 14,
@@ -4372,10 +4510,10 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     ] })
   ] });
 }
-var Calendar_default = (0, import_react20.memo)(Calendar);
+var Calendar_default = (0, import_react21.memo)(Calendar);
 
 // src/components/InputField.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var buttonWidth = 50;
 var colorPickerSpacing = 4;
 var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
@@ -4485,6 +4623,15 @@ var InputElement = import_styled_components11.default.input.withConfig({
    &.react-better-html-dropdown {
       padding-right: ${(props) => props.theme.styles.space + 16 + props.theme.styles.space - props.theme.styles.borderWidth}px;
 
+      &.react-better-html-dropdown-without-arrow {
+         padding-right: ${(props) => props.theme.styles.space}px;
+      }
+
+      &.react-better-html-dropdown-no-horizontal-padding {
+         padding-left: 0px;
+         padding-right: 0px;
+      }
+
       &.react-better-html-dropdown-multiselect {
          border-top: none;
          border-top-left-radius: 0px;
@@ -4556,7 +4703,7 @@ var TextareaElement = import_styled_components11.default.textarea.withConfig({
 `;
 var hours = Array.from({ length: 24 }, (_, index) => index);
 var minutes = Array.from({ length: 60 }, (_, index) => index);
-var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inputFieldProps, ref) {
+var InputFieldComponent = (0, import_react22.forwardRef)(function InputField(inputFieldProps, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const {
     label,
@@ -4588,7 +4735,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
     ...props
   } = useComponentsPropsMerger(betterHtmlContextInternal.components.inputField?.style?.default, inputFieldProps);
   const theme2 = (0, import_react_better_core19.useTheme)();
-  const internalId = (0, import_react21.useId)();
+  const internalId = (0, import_react22.useId)();
   const { colorTheme } = (0, import_react_better_core19.useBetterCoreContext)();
   const [_, debouncedValue, setDebouncedValue] = (0, import_react_better_core19.useDebounceState)(
     props.value?.toString() ?? "",
@@ -4597,7 +4744,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
   const { style, hoverStyle, excludeStyle, restProps } = useComponentPropsGrouper(props, true);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
-  const onChangeElement = (0, import_react21.useCallback)(
+  const onChangeElement = (0, import_react22.useCallback)(
     (event) => {
       const newValue = event.target.value;
       if (withDebounce) {
@@ -4610,19 +4757,19 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
     },
     [onChange, onChangeValue, withDebounce]
   );
-  const leftIconZIndex = (0, import_react21.useMemo)(
+  const leftIconZIndex = (0, import_react22.useMemo)(
     () => ["react-better-html-dropdown-open-late", "react-better-html-inputField-dateTime-opened-late"].some(
       (classNameItem) => props.className?.includes(classNameItem)
     ) ? 1002 : 1,
     [props.className]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!withDebounce) return;
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { width: "100%", gap: labelGap ?? theme2.styles.gap / 2, ...excludeStyle, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { width: "100%", gap: labelGap ?? theme2.styles.gap / 2, ...excludeStyle, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Label_default,
       {
         text: label,
@@ -4636,8 +4783,8 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
         htmlFor: readyId
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { alignItems: "stretch", width: "100%", children: [
-      prefix && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { alignItems: "stretch", width: "100%", children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Div_default.row,
         {
           alignItems: "center",
@@ -4651,10 +4798,10 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
           children: prefix
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { position: "relative", width: "100%", height: "fit-content", ref: holderRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default, { position: "relative", width: "100%", height: "fit-content", ref: holderRef, children: [
         insideInputFieldBeforeComponent,
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { position: "relative", width: "100%", height: "fit-content", children: [
-          leftIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default, { position: "relative", width: "100%", height: "fit-content", children: [
+          leftIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             Icon_default,
             {
               name: leftIcon,
@@ -4666,7 +4813,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
               zIndex: leftIconZIndex
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             InputElement,
             {
               theme: theme2,
@@ -4688,7 +4835,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
               ref
             }
           ),
-          rightIcon ? onClickRightIcon ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          rightIcon ? onClickRightIcon ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             Button_default.icon,
             {
               icon: rightIcon,
@@ -4698,7 +4845,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
               transform: "translateY(-50%)",
               onClick: onClickRightIcon
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             Icon_default,
             {
               name: rightIcon,
@@ -4712,7 +4859,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
           insideInputFieldAfterComponent
         ] })
       ] }),
-      suffix && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      suffix && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Div_default.row,
         {
           alignItems: "center",
@@ -4727,7 +4874,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
         }
       )
     ] }),
-    (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Text_default,
       {
         as: "span",
@@ -4739,7 +4886,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
     )
   ] });
 });
-InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multiline(inputFieldProps, ref) {
+InputFieldComponent.multiline = (0, import_react22.forwardRef)(function Multiline(inputFieldProps, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const {
     label,
@@ -4765,12 +4912,12 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
     inputFieldProps
   );
   const theme2 = (0, import_react_better_core19.useTheme)();
-  const internalId = (0, import_react21.useId)();
+  const internalId = (0, import_react22.useId)();
   const { colorTheme } = (0, import_react_better_core19.useBetterCoreContext)();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
-  const onChangeElement = (0, import_react21.useCallback)(
+  const onChangeElement = (0, import_react22.useCallback)(
     (event) => {
       onChange?.(event);
       onChangeValue?.(event.target.value);
@@ -4778,8 +4925,8 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
     [onChange, onChangeValue]
   );
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { gap: labelGap ?? theme2.styles.gap / 2, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { gap: labelGap ?? theme2.styles.gap / 2, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Label_default,
       {
         text: label,
@@ -4793,8 +4940,8 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
         htmlFor: readyId
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { position: "relative", width: "100%", children: [
-      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default, { position: "relative", width: "100%", children: [
+      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Icon_default,
         {
           name: leftIcon,
@@ -4805,7 +4952,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
           pointerEvents: "none"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         TextareaElement,
         {
           theme: theme2,
@@ -4825,7 +4972,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
           ref
         }
       ),
-      rightIcon ? onClickRightIcon ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      rightIcon ? onClickRightIcon ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Button_default.icon,
         {
           icon: rightIcon,
@@ -4835,7 +4982,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
           transform: "translateY(-50%)",
           onClick: onClickRightIcon
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Icon_default,
         {
           name: rightIcon,
@@ -4847,7 +4994,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
         }
       ) : void 0
     ] }),
-    (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Text_default,
       {
         as: "span",
@@ -4860,13 +5007,13 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
     )
   ] });
 });
-InputFieldComponent.email = (0, import_react21.forwardRef)(function Email(inputFieldProps, ref) {
+InputFieldComponent.email = (0, import_react22.forwardRef)(function Email(inputFieldProps, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const props = useComponentsPropsMerger(
     betterHtmlContextInternal.components.inputField?.style?.email,
     inputFieldProps
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     InputFieldComponent,
     {
       type: "email",
@@ -4879,14 +5026,14 @@ InputFieldComponent.email = (0, import_react21.forwardRef)(function Email(inputF
     }
   );
 });
-InputFieldComponent.password = (0, import_react21.forwardRef)(function Password(inputFieldProps, ref) {
+InputFieldComponent.password = (0, import_react22.forwardRef)(function Password(inputFieldProps, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const props = useComponentsPropsMerger(
     betterHtmlContextInternal.components.inputField?.style?.password,
     inputFieldProps
   );
   const [isPassword, setIsPassword] = (0, import_react_better_core19.useBooleanState)(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     InputFieldComponent,
     {
       type: isPassword ? "password" : "text",
@@ -4901,39 +5048,39 @@ InputFieldComponent.password = (0, import_react21.forwardRef)(function Password(
     }
   );
 });
-InputFieldComponent.search = (0, import_react21.forwardRef)(function Search(inputFieldProps, ref) {
+InputFieldComponent.search = (0, import_react22.forwardRef)(function Search(inputFieldProps, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const { value, onChangeValue, onFocus, onBlur, ...props } = useComponentsPropsMerger(
     betterHtmlContextInternal.components.inputField?.style?.search,
     inputFieldProps
   );
-  const [inputFieldValue, setInputFieldValue] = (0, import_react21.useState)(value?.toString() ?? "");
+  const [inputFieldValue, setInputFieldValue] = (0, import_react22.useState)(value?.toString() ?? "");
   const [inputFieldFocused, setInputFieldFocused] = (0, import_react_better_core19.useBooleanState)();
-  const onChangeValueElement = (0, import_react21.useCallback)(
+  const onChangeValueElement = (0, import_react22.useCallback)(
     (value2) => {
       setInputFieldValue(value2);
       onChangeValue?.(value2);
     },
     [onChangeValue]
   );
-  const onFocusElement = (0, import_react21.useCallback)(
+  const onFocusElement = (0, import_react22.useCallback)(
     (event) => {
       setInputFieldFocused.setTrue();
       onFocus?.(event);
     },
     [onFocus]
   );
-  const onBlurElement = (0, import_react21.useCallback)(
+  const onBlurElement = (0, import_react22.useCallback)(
     (event) => {
       setTimeout(() => setInputFieldFocused.setFalse(), 0.1 * 1e3);
       onBlur?.(event);
     },
     [onBlur]
   );
-  const onClickRightIcon = (0, import_react21.useCallback)(() => {
+  const onClickRightIcon = (0, import_react22.useCallback)(() => {
     onChangeValueElement("");
   }, [onChangeValueElement]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     InputFieldComponent,
     {
       leftIcon: "magnifyingGlass",
@@ -4949,7 +5096,7 @@ InputFieldComponent.search = (0, import_react21.forwardRef)(function Search(inpu
     }
   );
 });
-InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneNumber(inputFieldProps, ref) {
+InputFieldComponent.phoneNumber = (0, import_react22.forwardRef)(function PhoneNumber(inputFieldProps, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const {
     label,
@@ -4964,24 +5111,24 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
     ...props
   } = useComponentsPropsMerger(betterHtmlContextInternal.components.inputField?.style?.phoneNumber, inputFieldProps);
   const theme2 = (0, import_react_better_core19.useTheme)();
-  const internalId = (0, import_react21.useId)();
-  const [dropdownValue, setDropdownValue] = (0, import_react21.useState)();
-  const [inputFieldValue, setInputFieldValue] = (0, import_react21.useState)(value?.toString() ?? "");
-  const renderOption = (0, import_react21.useCallback)(
-    (option, index, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { children: option.label })
+  const internalId = (0, import_react22.useId)();
+  const [dropdownValue, setDropdownValue] = (0, import_react22.useState)();
+  const [inputFieldValue, setInputFieldValue] = (0, import_react22.useState)(value?.toString() ?? "");
+  const renderOption = (0, import_react22.useCallback)(
+    (option, index, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { children: option.label })
     ] }),
     []
   );
-  const onChangeDropdown = (0, import_react21.useCallback)(
+  const onChangeDropdown = (0, import_react22.useCallback)(
     (value2) => {
       setDropdownValue(value2);
       onChangeValue?.(value2 ? `+${value2}${inputFieldValue}` : inputFieldValue);
     },
     [onChangeValue, inputFieldValue]
   );
-  const onChangeValueElement = (0, import_react21.useCallback)(
+  const onChangeValueElement = (0, import_react22.useCallback)(
     (value2) => {
       const readyValue = value2.replace(/\D/g, "");
       setInputFieldValue(readyValue);
@@ -4989,7 +5136,7 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
     },
     [onChangeValue, dropdownValue]
   );
-  const options = (0, import_react21.useMemo)(
+  const options = (0, import_react22.useMemo)(
     () => import_react_better_core19.countries.map((country) => ({
       value: country.phoneNumberExtension,
       label: `+${country.phoneNumberExtension}`,
@@ -4997,13 +5144,13 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
     })),
     []
   );
-  const defaultValue = (0, import_react21.useMemo)(() => {
+  const defaultValue = (0, import_react22.useMemo)(() => {
     const thisTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     const initialDefaultValue = options.find((option) => option.data?.timeZone === thisTimeZone)?.value ?? "";
     setDropdownValue(initialDefaultValue);
     return initialDefaultValue;
   }, [options]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (value === void 0 || value === null) return;
     const newValue = value.toString();
     const country = import_react_better_core19.countries.find(
@@ -5021,8 +5168,8 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
   }, [value]);
   const readyId = id ?? internalId;
   const readyLabel = betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.label ?? label;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, children: [
-    readyLabel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, children: [
+    readyLabel && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Label_default,
       {
         text: readyLabel,
@@ -5036,8 +5183,8 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
         htmlFor: readyId
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Dropdown_default,
         {
           options,
@@ -5055,7 +5202,7 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
           withoutRenderingOptionsWhenClosed: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         InputFieldComponent,
         {
           ...betterHtmlContextInternal.components.inputField?.style?.phoneNumber,
@@ -5072,14 +5219,14 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
     ] })
   ] });
 });
-InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDate, maxDate, dropdownPosition = "left", ...inputFieldProps }, ref) {
+InputFieldComponent.date = (0, import_react22.forwardRef)(function Date2({ minDate, maxDate, dropdownPosition = "left", ...inputFieldProps }, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const props = useComponentsPropsMerger(
     betterHtmlContextInternal.components.inputField?.style?.date,
     inputFieldProps
   );
   const theme2 = (0, import_react_better_core19.useTheme)();
-  const holderRef = (0, import_react21.useRef)(null);
+  const holderRef = (0, import_react22.useRef)(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const {
     internalValue,
@@ -5088,19 +5235,19 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
     insideInputFieldComponentProps,
     isFocused
   } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
-  const onChange = (0, import_react21.useCallback)(
+  const onChange = (0, import_react22.useCallback)(
     (date) => {
       restInputFieldProps.onChangeValue?.(date ?? "");
       setInternalValue(date ?? "");
     },
     [restInputFieldProps.onChangeValue]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     InputFieldComponent,
     {
       ...betterHtmlContextInternal.components.inputField?.style?.date,
       type: "date",
-      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         Div_default,
         {
           position: "absolute",
@@ -5115,7 +5262,7 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
           userSelect: "none",
           ...insideInputFieldComponentProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               Div_default,
               {
                 position: "absolute",
@@ -5128,7 +5275,7 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
                 transition: theme2.styles.transition
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
           ]
         }
       ) : void 0,
@@ -5139,7 +5286,7 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
     }
   );
 });
-InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime({
+InputFieldComponent.dateTime = (0, import_react22.forwardRef)(function DateTime({
   hoursToRender,
   minutesToRender,
   minDate,
@@ -5155,9 +5302,9 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
     inputFieldProps
   );
   const theme2 = (0, import_react_better_core19.useTheme)();
-  const holderRef = (0, import_react21.useRef)(null);
-  const selectedHourRef = (0, import_react21.useRef)(null);
-  const selectedMinuteRef = (0, import_react21.useRef)(null);
+  const holderRef = (0, import_react22.useRef)(null);
+  const selectedHourRef = (0, import_react22.useRef)(null);
+  const selectedMinuteRef = (0, import_react22.useRef)(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const {
     internalValue,
@@ -5167,15 +5314,15 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
     isOpen,
     isFocused
   } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
-  const readyHours = (0, import_react21.useMemo)(
+  const readyHours = (0, import_react22.useMemo)(
     () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
     [hoursToRender]
   );
-  const readyMinutes = (0, import_react21.useMemo)(
+  const readyMinutes = (0, import_react22.useMemo)(
     () => minutesToRender?.filter((hour) => hour >= 0 && hour <= 59) ?? minutes,
     [minutesToRender]
   );
-  const onChange = (0, import_react21.useCallback)(
+  const onChange = (0, import_react22.useCallback)(
     (date) => {
       const newValue = date ? `${date}T${internalValue?.toString().split("T")[1] ?? defaultTimeAfterDatePick}` : "";
       restInputFieldProps.onChangeValue?.(newValue);
@@ -5183,7 +5330,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
     },
     [internalValue, defaultTimeAfterDatePick, restInputFieldProps.onChangeValue]
   );
-  const onBlur = (0, import_react21.useCallback)(
+  const onBlur = (0, import_react22.useCallback)(
     (event) => {
       if (hoursToRender || minutesToRender) {
         const value = event.target.value;
@@ -5209,7 +5356,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
       restInputFieldProps.onBlur
     ]
   );
-  const onClickHour = (0, import_react21.useCallback)(
+  const onClickHour = (0, import_react22.useCallback)(
     (hour) => {
       const newTime = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
       const today = defaultDateAfterTimePick ?? `${(/* @__PURE__ */ new Date()).getFullYear()}-${((/* @__PURE__ */ new Date()).getMonth() + 1).toString().padStart(2, "0")}-${(/* @__PURE__ */ new Date()).getDate().toString().padStart(2, "0")}`;
@@ -5219,7 +5366,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
     },
     [defaultDateAfterTimePick, internalValue, restInputFieldProps.onChangeValue]
   );
-  const onClickMinute = (0, import_react21.useCallback)(
+  const onClickMinute = (0, import_react22.useCallback)(
     (minute) => {
       const newTime = `${internalValue?.toString().split("T")?.[1]?.split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
       const today = defaultDateAfterTimePick ?? `${(/* @__PURE__ */ new Date()).getFullYear()}-${((/* @__PURE__ */ new Date()).getMonth() + 1).toString().padStart(2, "0")}-${(/* @__PURE__ */ new Date()).getDate().toString().padStart(2, "0")}`;
@@ -5229,7 +5376,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
     },
     [defaultDateAfterTimePick, internalValue, restInputFieldProps.onChangeValue]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (isOpen && selectedHourRef.current)
       selectedHourRef.current.scrollIntoView({ block: "nearest", behavior: "instant" });
     if (isOpen && selectedMinuteRef.current)
@@ -5238,12 +5385,12 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
   const valueHour = parseInt(internalValue?.toString().split("T")?.[1]?.split(":")?.[0]).toString();
   const valueMinute = parseInt(internalValue?.toString().split("T")?.[1]?.split(":")?.[1]).toString();
   const topSpacing = 32 + theme2.styles.space / 2 + theme2.styles.gap;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     InputFieldComponent,
     {
       ...betterHtmlContextInternal.components.inputField?.style?.dateTime,
       type: "datetime-local",
-      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         Div_default,
         {
           position: "absolute",
@@ -5259,7 +5406,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
           userSelect: "none",
           ...insideInputFieldComponentProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               Div_default,
               {
                 position: "absolute",
@@ -5272,9 +5419,9 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
                 transition: theme2.styles.transition
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { gap: theme2.styles.space, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { gap: theme2.styles.space, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                 Div_default.row,
                 {
                   height: 276,
@@ -5283,9 +5430,9 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
                   paddingBottom: theme2.styles.space / 2,
                   paddingRight: theme2.styles.space / 2,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { height: "100%", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default, { height: "100%", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                         Div_default,
                         {
                           className: "react-better-html-no-scrollbar",
@@ -5295,7 +5442,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
                           tabIndex: -1,
                           children: readyHours.map((hour) => {
                             const isSelected = hour.toString() === valueHour;
-                            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                            return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                               Div_default.row,
                               {
                                 alignItems: "center",
@@ -5309,7 +5456,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
                                 value: hour,
                                 onClickWithValue: onClickHour,
                                 ref: isSelected ? selectedHourRef : void 0,
-                                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
                               },
                               hour
                             );
@@ -5317,9 +5464,9 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { height: "100%", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default, { height: "100%", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                         Div_default,
                         {
                           className: "react-better-html-no-scrollbar",
@@ -5329,7 +5476,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
                           tabIndex: -1,
                           children: readyMinutes.map((minute) => {
                             const isSelected = minute.toString() === valueMinute;
-                            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                            return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                               Div_default.row,
                               {
                                 alignItems: "center",
@@ -5343,7 +5490,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
                                 value: minute,
                                 onClickWithValue: onClickMinute,
                                 ref: isSelected ? selectedMinuteRef : void 0,
-                                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
                               },
                               minute
                             );
@@ -5366,16 +5513,16 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
     }
   );
 });
-InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursToRender, minutesToRender, minTime, maxTime, dropdownPosition = "left", ...inputFieldProps }, ref) {
+InputFieldComponent.time = (0, import_react22.forwardRef)(function Time({ hoursToRender, minutesToRender, minTime, maxTime, dropdownPosition = "left", ...inputFieldProps }, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const props = useComponentsPropsMerger(
     betterHtmlContextInternal.components.inputField?.style?.time,
     inputFieldProps
   );
   const theme2 = (0, import_react_better_core19.useTheme)();
-  const holderRef = (0, import_react21.useRef)(null);
-  const selectedHourRef = (0, import_react21.useRef)(null);
-  const selectedMinuteRef = (0, import_react21.useRef)(null);
+  const holderRef = (0, import_react22.useRef)(null);
+  const selectedHourRef = (0, import_react22.useRef)(null);
+  const selectedMinuteRef = (0, import_react22.useRef)(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const minHours = minTime ? parseInt(minTime.split(":")[0]) : void 0;
   const minMinutes = minTime ? parseInt(minTime.split(":")[1]) : void 0;
@@ -5389,15 +5536,15 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
     isOpen,
     isFocused
   } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
-  const readyHours = (0, import_react21.useMemo)(
+  const readyHours = (0, import_react22.useMemo)(
     () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
     [hoursToRender]
   );
-  const readyMinutes = (0, import_react21.useMemo)(
+  const readyMinutes = (0, import_react22.useMemo)(
     () => minutesToRender?.filter((hour) => hour >= 0 && hour <= 59) ?? minutes,
     [minutesToRender]
   );
-  const onBlur = (0, import_react21.useCallback)(
+  const onBlur = (0, import_react22.useCallback)(
     (event) => {
       if (!!minHours || !!maxHours || !!minMinutes || !!maxMinutes || hoursToRender || minutesToRender) {
         const value = event.target.value;
@@ -5425,7 +5572,7 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
       restInputFieldProps.onBlur
     ]
   );
-  const onClickHour = (0, import_react21.useCallback)(
+  const onClickHour = (0, import_react22.useCallback)(
     (hour) => {
       const value = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
       restInputFieldProps.onChangeValue?.(value);
@@ -5433,7 +5580,7 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
     },
     [internalValue, restInputFieldProps.onChangeValue]
   );
-  const onClickMinute = (0, import_react21.useCallback)(
+  const onClickMinute = (0, import_react22.useCallback)(
     (minute) => {
       const value = `${internalValue?.toString().split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
       restInputFieldProps.onChangeValue?.(value);
@@ -5441,7 +5588,7 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
     },
     [internalValue, restInputFieldProps.onChangeValue]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (isOpen && selectedHourRef.current)
       selectedHourRef.current.scrollIntoView({ block: "nearest", behavior: "instant" });
     if (isOpen && selectedMinuteRef.current)
@@ -5449,12 +5596,12 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
   }, [isOpen]);
   const valueHour = parseInt(internalValue?.toString().split(":")?.[0]).toString();
   const valueMinute = parseInt(internalValue?.toString().split(":")?.[1]).toString();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     InputFieldComponent,
     {
       ...betterHtmlContextInternal.components.inputField?.style?.time,
       type: "time",
-      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         Div_default,
         {
           position: "absolute",
@@ -5471,7 +5618,7 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
           userSelect: "none",
           ...insideInputFieldComponentProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               Div_default,
               {
                 position: "absolute",
@@ -5484,8 +5631,8 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
                 transition: theme2.styles.transition
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { height: "100%", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { height: "100%", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 Div_default,
                 {
                   className: "react-better-html-no-scrollbar",
@@ -5496,7 +5643,7 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
                   children: readyHours.map((hour) => {
                     const isSelected = hour.toString() === valueHour;
                     const isDisabled = minHours && hour < minHours || maxHours && hour > maxHours;
-                    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       Div_default.row,
                       {
                         alignItems: "center",
@@ -5510,14 +5657,14 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
                         value: hour,
                         onClickWithValue: !isDisabled ? onClickHour : void 0,
                         ref: isSelected ? selectedHourRef : void 0,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
                       },
                       hour
                     );
                   })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 Div_default,
                 {
                   className: "react-better-html-no-scrollbar",
@@ -5529,7 +5676,7 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
                     const isSelected = minute.toString() === valueMinute;
                     const currentHour = parseInt(valueHour);
                     const isDisabled = minHours !== void 0 && minMinutes !== void 0 && currentHour === minHours && minute < minMinutes || maxHours !== void 0 && maxMinutes !== void 0 && currentHour === maxHours && minute > maxMinutes;
-                    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       Div_default.row,
                       {
                         alignItems: "center",
@@ -5543,7 +5690,7 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
                         value: minute,
                         onClickWithValue: !isDisabled ? onClickMinute : void 0,
                         ref: isSelected ? selectedMinuteRef : void 0,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
                       },
                       minute
                     );
@@ -5563,30 +5710,30 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
     }
   );
 });
-InputFieldComponent.color = (0, import_react21.forwardRef)(function Color4({ ...inputFieldProps }, ref) {
+InputFieldComponent.color = (0, import_react22.forwardRef)(function Color4({ ...inputFieldProps }, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const { value, onChangeValue, ...props } = useComponentsPropsMerger(
     betterHtmlContextInternal.components.inputField?.style?.time,
     inputFieldProps
   );
-  const [inputFieldValue, setInputFieldValue] = (0, import_react21.useState)(value ?? "#000000");
-  const onChangeValueElement = (0, import_react21.useCallback)(
+  const [inputFieldValue, setInputFieldValue] = (0, import_react22.useState)(value ?? "#000000");
+  const onChangeValueElement = (0, import_react22.useCallback)(
     (value2) => {
       setInputFieldValue(value2);
       onChangeValue?.(value2);
     },
     [onChangeValue]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (value === void 0) return;
     setInputFieldValue(value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     InputFieldComponent,
     {
       ...betterHtmlContextInternal.components.inputField?.style?.color,
       type: "color",
-      insideInputFieldAfterComponent: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      insideInputFieldAfterComponent: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Div_default.row,
         {
           position: "absolute",
@@ -5598,7 +5745,7 @@ InputFieldComponent.color = (0, import_react21.forwardRef)(function Color4({ ...
           pointerEvents: "none",
           userSelect: "none",
           paddingLeft: colorPickerColorWidth,
-          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { children: inputFieldValue })
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { children: inputFieldValue })
         }
       ),
       value: inputFieldValue,
@@ -5608,7 +5755,7 @@ InputFieldComponent.color = (0, import_react21.forwardRef)(function Color4({ ...
     }
   );
 });
-var InputField2 = (0, import_react21.memo)(InputFieldComponent);
+var InputField2 = (0, import_react22.memo)(InputFieldComponent);
 InputField2.multiline = InputFieldComponent.multiline;
 InputField2.email = InputFieldComponent.email;
 InputField2.password = InputFieldComponent.password;
@@ -5621,10 +5768,10 @@ InputField2.color = InputFieldComponent.color;
 var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_react_better_core20 = require("react-better-core");
 var import_styled_components12 = __toESM(require("styled-components"));
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
@@ -5721,7 +5868,7 @@ var SwitchElement = import_styled_components12.default.div.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
+var ToggleInputComponent = (0, import_react23.forwardRef)(function ToggleInput({
   label,
   labelFontFamily,
   labelFontSize,
@@ -5747,13 +5894,13 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
   ...props
 }, ref) {
   const theme2 = (0, import_react_better_core20.useTheme)();
-  const internalId = (0, import_react22.useId)();
+  const internalId = (0, import_react23.useId)();
   const { colorTheme } = (0, import_react_better_core20.useBetterCoreContext)();
   const { style, hoverStyle, excludeStyle, restProps } = useComponentPropsGrouper(props, true);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
-  const [internalChecked, setInternalChecked] = (0, import_react22.useState)(false);
-  const onChangeElement = (0, import_react22.useCallback)(
+  const [internalChecked, setInternalChecked] = (0, import_react23.useState)(false);
+  const onChangeElement = (0, import_react23.useCallback)(
     (event) => {
       const newIsChecked = event.target.checked;
       if (controlledChecked === void 0) setInternalChecked(newIsChecked);
@@ -5762,14 +5909,14 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
     [onChange, controlledChecked, value]
   );
   const checked = controlledChecked ?? internalChecked;
-  const onClickText = (0, import_react22.useCallback)(() => {
+  const onClickText = (0, import_react23.useCallback)(() => {
     const newIsChecked = !checked;
     if (controlledChecked === void 0) setInternalChecked(newIsChecked);
     onChange?.(newIsChecked, value);
   }, [checked, controlledChecked, onChange, value]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { gap: labelGap ?? theme2.styles.gap, ...excludeStyle, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Div_default.column, { gap: labelGap ?? theme2.styles.gap, ...excludeStyle, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Label_default,
       {
         text: label,
@@ -5783,9 +5930,9 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
         htmlFor: readyId
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { position: "relative", alignItems: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Div_default.row, { position: "relative", alignItems: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           InputElement2,
           {
             theme: theme2,
@@ -5803,7 +5950,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
             ...ariaProps
           }
         ),
-        props.type === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        props.type === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           Icon_default,
           {
             name: "check",
@@ -5817,7 +5964,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
             pointerEvents: "none",
             transition: theme2.styles.transition
           }
-        ) : props.type === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        ) : props.type === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           Div_default,
           {
             position: "absolute",
@@ -5833,7 +5980,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
           }
         ) : void 0
       ] }),
-      text ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      text ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         Text_default,
         {
           fontFamily: textFontFamily,
@@ -5846,21 +5993,21 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
           onClick: onClickText,
           children: [
             text,
-            required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, children: [
+            required && !label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, children: [
               " ",
               "*"
             ] })
           ]
         }
-      ) : textAdvanced ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
+      ) : textAdvanced ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Div_default.row, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         textAdvanced,
-        required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, marginLeft: 4, children: [
+        required && !label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, marginLeft: 4, children: [
           " ",
           "*"
         ] })
       ] }) : void 0
     ] }),
-    (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Text_default,
       {
         as: "span",
@@ -5873,23 +6020,23 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
   ] });
 });
 var ToggleInput_default = {
-  checkbox: (0, import_react22.forwardRef)(function Checkbox(checkboxProps, ref) {
+  checkbox: (0, import_react23.forwardRef)(function Checkbox(checkboxProps, ref) {
     const betterHtmlContextInternal = useBetterHtmlContextInternal();
     const props = useComponentsPropsMerger(
       betterHtmlContextInternal.components.toggleInput?.style?.checkbox,
       checkboxProps
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToggleInputComponent, { type: "checkbox", ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToggleInputComponent, { type: "checkbox", ref, ...props });
   }),
-  radiobutton: (0, import_react22.forwardRef)(function RadioButton(radiobuttonProps, ref) {
+  radiobutton: (0, import_react23.forwardRef)(function RadioButton(radiobuttonProps, ref) {
     const betterHtmlContextInternal = useBetterHtmlContextInternal();
     const props = useComponentsPropsMerger(
       betterHtmlContextInternal.components.toggleInput?.style?.radiobutton,
       radiobuttonProps
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToggleInputComponent, { type: "radio", ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ToggleInputComponent, { type: "radio", ref, ...props });
   }),
-  switch: (0, import_react22.forwardRef)(function Switch(switchProps, ref) {
+  switch: (0, import_react23.forwardRef)(function Switch(switchProps, ref) {
     const betterHtmlContextInternal = useBetterHtmlContextInternal();
     const {
       label,
@@ -5912,22 +6059,22 @@ var ToggleInput_default = {
       switchProps
     );
     const theme2 = (0, import_react_better_core20.useTheme)();
-    const internalId = (0, import_react22.useId)();
+    const internalId = (0, import_react23.useId)();
     const { style, hoverStyle, excludeStyle, restProps } = useComponentPropsGrouper(props, true);
     const dataProps = useComponentPropsWithPrefix(restProps, "data");
     const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
     const [internalChecked, setInternalChecked] = (0, import_react_better_core20.useBooleanState)();
     const [isMouseDown, setIsMouseDown] = (0, import_react_better_core20.useBooleanState)();
     const checked = controlledChecked ?? internalChecked;
-    const onClickElement = (0, import_react22.useCallback)(() => {
+    const onClickElement = (0, import_react23.useCallback)(() => {
       if (disabled) return;
       const newIsChecked = !checked;
       if (controlledChecked === void 0) setInternalChecked.setState(newIsChecked);
       onChange?.(newIsChecked, value);
     }, [disabled, checked, onChange, controlledChecked, value]);
     const readyId = id ?? internalId;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...excludeStyle, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...excludeStyle, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         Label_default,
         {
           text: label,
@@ -5941,7 +6088,7 @@ var ToggleInput_default = {
           htmlFor: readyId
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         Div_default.row,
         {
           alignItems: "center",
@@ -5955,7 +6102,7 @@ var ToggleInput_default = {
           onTouchStart: setIsMouseDown.setTrue,
           onTouchEnd: setIsMouseDown.setFalse,
           onTouchCancel: setIsMouseDown.setFalse,
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             SwitchElement,
             {
               theme: theme2,
@@ -5975,7 +6122,7 @@ var ToggleInput_default = {
           )
         }
       ),
-      (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         Text_default,
         {
           as: "span",
@@ -5990,10 +6137,10 @@ var ToggleInput_default = {
 };
 
 // src/components/Form.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_react_better_core21 = require("react-better-core");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var FormComponent = (0, import_react23.forwardRef)(function Form({
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var FormComponent = (0, import_react24.forwardRef)(function Form({
   form,
   name,
   submitButtonText,
@@ -6018,7 +6165,7 @@ var FormComponent = (0, import_react23.forwardRef)(function Form({
   ...props
 }, ref) {
   const theme2 = (0, import_react_better_core21.useTheme)();
-  const submitButtonIsDisabledInternal = (0, import_react23.useMemo)(() => {
+  const submitButtonIsDisabledInternal = (0, import_react24.useMemo)(() => {
     if (!form || !form.requiredFields) return false;
     return Object.entries(form.values).some(
       ([key, value]) => form.requiredFields?.includes(key) && (value === void 0 || value === null || value?.toString().trim() === "")
@@ -6026,17 +6173,17 @@ var FormComponent = (0, import_react23.forwardRef)(function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("form", { name, onSubmit: onSubmit ?? form?.onSubmit, id, ref, children: [
-    gap !== void 0 || withDividers ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? import_react23.Children.toArray(children).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react23.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("form", { name, onSubmit: onSubmit ?? form?.onSubmit, id, ref, children: [
+    gap !== void 0 || withDividers ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? import_react24.Children.toArray(children).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react24.Fragment, { children: [
       child,
-      index < import_react23.Children.toArray(children).length - 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      index < import_react24.Children.toArray(children).length - 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         Divider_default.horizontal,
         {
           width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth
         }
       )
     ] }, index)) : children }) : children,
-    submitButtonText && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    submitButtonText && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       Div_default.row,
       {
         alignItems: "center",
@@ -6045,7 +6192,7 @@ var FormComponent = (0, import_react23.forwardRef)(function Form({
         marginTop: theme2.styles.space,
         children: [
           renderActionButtons,
-          onClickCancel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          onClickCancel && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             Button_default.secondary,
             {
               text: cancelButtonText ?? "Cancel",
@@ -6056,7 +6203,7 @@ var FormComponent = (0, import_react23.forwardRef)(function Form({
               onClick: onClickCancel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             SubmitButtonTag,
             {
               text: submitButtonText,
@@ -6072,24 +6219,24 @@ var FormComponent = (0, import_react23.forwardRef)(function Form({
     )
   ] }) });
 });
-var Form2 = (0, import_react23.memo)(FormComponent);
+var Form2 = (0, import_react24.memo)(FormComponent);
 var Form_default = Form2;
 
 // src/components/FormRow.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_react_better_core22 = require("react-better-core");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var FormRowComponent = (0, import_react24.forwardRef)(function FormRow({ oneItemOnly, noBreakingPoint, asColumn, gap, children, ...props }, ref) {
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var FormRowComponent = (0, import_react25.forwardRef)(function FormRow({ oneItemOnly, noBreakingPoint, asColumn, gap, children, ...props }, ref) {
   const theme2 = (0, import_react_better_core22.useTheme)();
   const mediaQuery = useMediaQuery();
   const breakingPoint = asColumn ?? (!noBreakingPoint ? mediaQuery.size900 : false);
   const readyGap = breakingPoint || noBreakingPoint && mediaQuery.size900 ? theme2.styles.gap : theme2.styles.space * 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
     children,
-    oneItemOnly && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default, { width: "100%" })
+    oneItemOnly && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%" })
   ] });
 });
-FormRowComponent.withTitle = (0, import_react24.forwardRef)(function WithTitle({
+FormRowComponent.withTitle = (0, import_react25.forwardRef)(function WithTitle({
   icon,
   title,
   titleAs = "h3",
@@ -6110,22 +6257,22 @@ FormRowComponent.withTitle = (0, import_react24.forwardRef)(function WithTitle({
   const theme2 = (0, import_react_better_core22.useTheme)();
   const mediaQuery = useMediaQuery();
   const titleGap = theme2.styles.space;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(FormRowComponent, { ...props, ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: titleGap, children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Text_default, { as: titleAs, fontSize: titleFontSize, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(FormRowComponent, { ...props, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: titleGap, children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon_default, { name: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Text_default, { as: titleAs, fontSize: titleFontSize, children: [
           title,
-          required && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, children: [
+          required && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, children: [
             " ",
             "*"
           ] })
         ] }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { fontSize: descriptionFontSize ?? theme2.styles.fontSize, color: theme2.colors.textSecondary, children: description })
+        description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text_default, { fontSize: descriptionFontSize ?? theme2.styles.fontSize, color: theme2.colors.textSecondary, children: description })
       ] }),
-      isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default, { width: 26 - titleGap })
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: 26 - titleGap })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       Div_default.row,
       {
         position: "relative",
@@ -6134,7 +6281,7 @@ FormRowComponent.withTitle = (0, import_react24.forwardRef)(function WithTitle({
         justifyContent: alignChildren,
         gap: theme2.styles.gap,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             Div_default,
             {
               position: "absolute",
@@ -6143,38 +6290,38 @@ FormRowComponent.withTitle = (0, import_react24.forwardRef)(function WithTitle({
               transform: "translateY(-50%)",
               opacity: !isLoading ? 0 : void 0,
               pointerEvents: !isLoading ? "none" : void 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader_default, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader_default, {})
             }
           ),
           children,
-          withActions && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-            onClickReset && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button_default.icon, { icon: "check", loaderName: saveButtonLoaderName, onClick: onClickSave })
+          withActions && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+            onClickReset && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button_default.icon, { icon: "check", loaderName: saveButtonLoaderName, onClick: onClickSave })
           ] })
         ]
       }
     )
   ] });
 });
-var FormRow2 = (0, import_react24.memo)(FormRowComponent);
+var FormRow2 = (0, import_react25.memo)(FormRowComponent);
 FormRow2.withTitle = FormRowComponent.withTitle;
 var FormRow_default = FormRow2;
 
 // src/components/ColorThemeSwitch.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_react_better_core23 = require("react-better-core");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
   withMoon,
   className,
   ...props
 }) {
-  const [value, setValue] = (0, import_react25.useState)(localStorage.getItem("theme") === "dark");
-  const onChangeSwitch = (0, import_react25.useCallback)((checked) => {
+  const [value, setValue] = (0, import_react26.useState)(localStorage.getItem("theme") === "dark");
+  const onChangeSwitch = (0, import_react26.useCallback)((checked) => {
     setValue(checked);
     document.querySelector("html")?.setAttribute("data-theme", checked ? "dark" : "light");
   }, []);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const html = document.querySelector("html");
     if (!html) return;
     const observer = new MutationObserver((mutations) => {
@@ -6192,7 +6339,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     ToggleInput_default.switch,
     {
       className: `react-better-html-color-theme-switch ${withMoon ? ` react-better-html-color-theme-switch-with-moon` : ""}${className ? ` ${className}` : ""}`,
@@ -6204,25 +6351,25 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
 };
 ColorThemeSwitchComponent.withText = function WithText({ withMoon, className, ...props }) {
   const theme2 = (0, import_react_better_core23.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme2.styles.gap, userSelect: "none", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text_default, { children: "Light" }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ColorThemeSwitchComponent, { withMoon, className }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text_default, { children: "Dark" })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme2.styles.gap, userSelect: "none", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { children: "Light" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ColorThemeSwitchComponent, { withMoon, className }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { children: "Dark" })
   ] });
 };
-var ColorThemeSwitch2 = (0, import_react25.memo)(ColorThemeSwitchComponent);
+var ColorThemeSwitch2 = (0, import_react26.memo)(ColorThemeSwitchComponent);
 ColorThemeSwitch2.withText = ColorThemeSwitchComponent.withText;
 var ColorThemeSwitch_default = ColorThemeSwitch2;
 
 // src/components/Table.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_react_better_core25 = require("react-better-core");
 var import_styled_components13 = __toESM(require("styled-components"));
 
 // src/components/Pagination.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_react_better_core24 = require("react-better-core");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var PaginationComponent = function Pagination({
   currentPage = 1,
   itemsLength = 0,
@@ -6235,19 +6382,19 @@ var PaginationComponent = function Pagination({
 }) {
   const theme2 = (0, import_react_better_core24.useTheme)();
   const mediaQuery = useMediaQuery();
-  const [currentPageInternal, setCurrentPage] = (0, import_react26.useState)(currentPage);
+  const [currentPageInternal, setCurrentPage] = (0, import_react27.useState)(currentPage);
   const pageCountInternal = pageCount ?? (itemsPerPage !== void 0 ? Math.ceil(itemsLength / itemsPerPage) : 1);
-  const onClickPreviousPageElement = (0, import_react26.useCallback)(() => {
+  const onClickPreviousPageElement = (0, import_react27.useCallback)(() => {
     const newPage = currentPageInternal <= 1 ? 1 : currentPageInternal - 1;
     setCurrentPage(newPage);
     onClickPreviousPage?.(newPage);
   }, [currentPageInternal, onClickPreviousPage]);
-  const onClickNextPageElement = (0, import_react26.useCallback)(() => {
+  const onClickNextPageElement = (0, import_react27.useCallback)(() => {
     const newPage = currentPageInternal >= pageCountInternal ? pageCountInternal : currentPageInternal + 1;
     setCurrentPage(newPage);
     onClickNextPage?.(newPage);
   }, [currentPageInternal, pageCountInternal, onClickNextPage]);
-  const paginationItems = (0, import_react26.useMemo)(() => {
+  const paginationItems = (0, import_react27.useMemo)(() => {
     const halfRange = Math.floor(maximumVisiblePages2 / 2);
     let startPage = Math.max(1, currentPageInternal - halfRange);
     let endPage = Math.min(pageCountInternal, currentPageInternal + halfRange);
@@ -6262,15 +6409,15 @@ var PaginationComponent = function Pagination({
       (_, index) => startPage + index
     );
   }, [pageCountInternal, currentPageInternal]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     onChangePage?.(currentPageInternal);
   }, [currentPageInternal, onChangePage]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     setCurrentPage(currentPage);
   }, [currentPage]);
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages2 / 1.4;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
-    pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
+    pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Button_default.icon,
       {
         icon: "doubleChevronLeft",
@@ -6279,8 +6426,8 @@ var PaginationComponent = function Pagination({
         onClickWithValue: setCurrentPage
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button_default.icon, { icon: "chevronLeft", disabled: currentPageInternal === 1, onClick: onClickPreviousPageElement }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button_default.icon, { icon: "chevronLeft", disabled: currentPageInternal === 1, onClick: onClickPreviousPageElement }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Div_default.row,
       {
         alignItems: "center",
@@ -6289,14 +6436,14 @@ var PaginationComponent = function Pagination({
         gap: theme2.styles.gap,
         children: paginationItems.map((pageIndex) => {
           const isActive = currentPageInternal === pageIndex;
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             Div_default,
             {
               cursor: "pointer",
               userSelect: "none",
               value: pageIndex,
               onClickWithValue: setCurrentPage,
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 Text_default,
                 {
                   fontWeight: isActive ? 700 : 400,
@@ -6311,7 +6458,7 @@ var PaginationComponent = function Pagination({
         })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Button_default.icon,
       {
         icon: "chevronRight",
@@ -6319,7 +6466,7 @@ var PaginationComponent = function Pagination({
         onClick: onClickNextPageElement
       }
     ),
-    pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Button_default.icon,
       {
         icon: "doubleChevronRight",
@@ -6330,11 +6477,11 @@ var PaginationComponent = function Pagination({
     )
   ] });
 };
-var Pagination2 = (0, import_react26.memo)(PaginationComponent);
+var Pagination2 = (0, import_react27.memo)(PaginationComponent);
 var Pagination_default = Pagination2;
 
 // src/components/Table.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var defaultImageWidth = 160;
 var maximumVisiblePages = 11;
 var TableStyledComponent = import_styled_components13.default.table.withConfig({
@@ -6480,7 +6627,7 @@ var filterPresetsText = {
   nextMonth: "Next month",
   nextYear: "Next year"
 };
-var TableComponent = (0, import_react27.forwardRef)(function Table({
+var TableComponent = (0, import_react28.forwardRef)(function Table({
   name,
   columns,
   data,
@@ -6507,14 +6654,14 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
   const theme2 = (0, import_react_better_core25.useTheme)();
   const mediaQuery = useMediaQuery();
   const { colorTheme } = (0, import_react_better_core25.useBetterCoreContext)();
-  const filterModalRef = (0, import_react27.useRef)(null);
-  const readyColumns = (0, import_react27.useMemo)(() => columns.filter((column) => !column.hidden), [columns]);
-  const columnsRef = (0, import_react27.useRef)(readyColumns);
+  const filterModalRef = (0, import_react28.useRef)(null);
+  const readyColumns = (0, import_react28.useMemo)(() => columns.filter((column) => !column.hidden), [columns]);
+  const columnsRef = (0, import_react28.useRef)(readyColumns);
   columnsRef.current = readyColumns;
-  const [checkedItems, setCheckedItems] = (0, import_react27.useState)([]);
-  const [expandedRows, setExpandedRows] = (0, import_react27.useState)([]);
-  const [currentPage, setCurrentPage] = (0, import_react27.useState)(1);
-  const [filterData, setFilterData] = (0, import_react27.useState)(() => {
+  const [checkedItems, setCheckedItems] = (0, import_react28.useState)([]);
+  const [expandedRows, setExpandedRows] = (0, import_react28.useState)([]);
+  const [currentPage, setCurrentPage] = (0, import_react28.useState)(1);
+  const [filterData, setFilterData] = (0, import_react28.useState)(() => {
     if (!memoizeFilters || !name) return defaultFilterData ?? {};
     const localStorageData = JSON.parse(localStorage.getItem(`react-better-html-table-filters-${name}`) || "{}");
     const timestamp = localStorageData.timestamp;
@@ -6523,8 +6670,8 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
     if (timeDiff > memoizeFiltersLifespan) return defaultFilterData ?? {};
     return data2;
   });
-  const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = (0, import_react27.useState)();
-  const [filterListSelectedItems, setFilterListSelectedItems] = (0, import_react27.useState)();
+  const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = (0, import_react28.useState)();
+  const [filterListSelectedItems, setFilterListSelectedItems] = (0, import_react28.useState)();
   const openedFilterData = openedFilterColumnIndex !== void 0 ? filterData[openedFilterColumnIndex] : void 0;
   const openedFilterColumn = openedFilterColumnIndex !== void 0 ? readyColumns[openedFilterColumnIndex] : void 0;
   const filterForm = useForm({
@@ -6554,26 +6701,26 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
       filterModalRef.current?.close();
     }
   });
-  const expandColumn = (0, import_react27.useMemo)(() => readyColumns.find((column) => column.type === "expand"), [readyColumns]);
-  const renderCellContent = (0, import_react27.useCallback)(
+  const expandColumn = (0, import_react28.useMemo)(() => readyColumns.find((column) => column.type === "expand"), [readyColumns]);
+  const renderCellContent = (0, import_react28.useCallback)(
     (column, item, itemIndex) => {
       switch (column.type) {
         case "text": {
           const value = column.keyName ? item[column.keyName] : void 0;
           const textProps = (typeof column.getTextProps === "function" ? column.getTextProps?.(item, itemIndex) : column.getTextProps) ?? {};
-          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { ...textProps, children: column.format?.(item, itemIndex) ?? String(value ?? "") });
+          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { ...textProps, children: column.format?.(item, itemIndex) ?? String(value ?? "") });
         }
         case "element": {
-          return column.render?.(item, itemIndex) ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {});
+          return column.render?.(item, itemIndex) ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, {});
         }
         case "image": {
           const imageProps = (typeof column.getImageProps === "function" ? column.getImageProps?.(item, itemIndex) : column.getImageProps) ?? {};
-          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Image_default, { width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...imageProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Image_default, { width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...imageProps });
         }
         case "checkbox": {
           const { onChange, ...toggleInputProps } = (typeof column.getToggleInputProps === "function" ? column.getToggleInputProps?.(item, itemIndex) : column.getToggleInputProps) ?? {};
           const checkedValue = checkedItems[itemIndex];
-          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             ToggleInput_default.checkbox,
             {
               checked: checkedValue,
@@ -6594,7 +6741,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
           );
         }
         case "expand": {
-          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default, { isTabAccessed: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Div_default, { isTabAccessed: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             Icon_default,
             {
               name: "chevronDown",
@@ -6604,13 +6751,13 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
           ) });
         }
         default: {
-          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {});
+          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, {});
         }
       }
     },
     [theme2, checkedItems, expandedRows]
   );
-  const onClickRowElement = (0, import_react27.useCallback)(
+  const onClickRowElement = (0, import_react28.useCallback)(
     (item, index) => {
       if (expandColumn) {
         setExpandedRows((oldValue) => {
@@ -6627,14 +6774,14 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
     },
     [onClickRow, expandColumn]
   );
-  const onClickAllCheckboxesElement = (0, import_react27.useCallback)(
+  const onClickAllCheckboxesElement = (0, import_react28.useCallback)(
     (checked) => {
       onClickAllCheckboxes?.(checked);
       setCheckedItems(data.map(() => checked));
     },
     [onClickAllCheckboxes, data]
   );
-  const onClickFilterButton = (0, import_react27.useCallback)(
+  const onClickFilterButton = (0, import_react28.useCallback)(
     (columnIndex) => {
       const thisFilterData = filterData[columnIndex];
       if (thisFilterData?.type === "number" || thisFilterData?.type === "date" || thisFilterData?.type === "date-time") {
@@ -6650,12 +6797,12 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
     },
     [filterData]
   );
-  const onCloseFilterModal = (0, import_react27.useCallback)(() => {
+  const onCloseFilterModal = (0, import_react28.useCallback)(() => {
     setTimeout(() => setOpenedFilterColumnIndex(void 0), 0.2 * 1e3);
     setFilterListSelectedItems(void 0);
     filterForm.reset();
   }, []);
-  const onClickCancelFormFilter = (0, import_react27.useCallback)(() => {
+  const onClickCancelFormFilter = (0, import_react28.useCallback)(() => {
     if (openedFilterColumnIndex === void 0) return;
     setFilterData(
       (oldValue) => Object.entries({
@@ -6668,7 +6815,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
     );
     filterModalRef.current?.close();
   }, [openedFilterColumnIndex]);
-  const onClickFilterListItem = (0, import_react27.useCallback)(
+  const onClickFilterListItem = (0, import_react28.useCallback)(
     (value) => setFilterListSelectedItems((oldValue) => {
       if (!oldValue) return [value];
       if (oldValue.includes(value)) return oldValue.filter((item) => item !== value);
@@ -6676,7 +6823,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
     }),
     []
   );
-  const onClickFilterPreset = (0, import_react27.useCallback)(
+  const onClickFilterPreset = (0, import_react28.useCallback)(
     (preset) => {
       const getValueForDate = (date) => {
         if (openedFilterColumn?.filter === "date") return date.toISOString().split("T")[0];
@@ -6761,7 +6908,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
     },
     [openedFilterColumn]
   );
-  const renderExpandedRow = (0, import_react27.useCallback)(
+  const renderExpandedRow = (0, import_react28.useCallback)(
     (...props2) => {
       const expandColumn2 = readyColumns.find((column) => column.type === "expand");
       if (!expandColumn2) return;
@@ -6769,7 +6916,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
     },
     [readyColumns]
   );
-  const dataAfterFilter = (0, import_react27.useMemo)(
+  const dataAfterFilter = (0, import_react28.useMemo)(
     () => data.filter(
       (item) => Object.entries(filterData).every(([columnIndex, filter]) => {
         if (!filter) return true;
@@ -6798,17 +6945,17 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
     ),
     [data, filterData]
   );
-  const dataAfterPagination = (0, import_react27.useMemo)(() => {
+  const dataAfterPagination = (0, import_react28.useMemo)(() => {
     if (pageSize === void 0) return dataAfterFilter;
     if (pageCount !== void 0) return dataAfterFilter;
     const pageStartItemIndex = (currentPage - 1) * (pageSize ?? 0);
     const pageEndItemIndex = pageStartItemIndex + (pageSize ?? 0);
     return dataAfterFilter.slice(pageStartItemIndex, pageEndItemIndex);
   }, [dataAfterFilter, pageSize, currentPage, pageCount]);
-  const everythingIsChecked = (0, import_react27.useMemo)(() => {
+  const everythingIsChecked = (0, import_react28.useMemo)(() => {
     return data.length > 0 && checkedItems.every((checked) => checked) && checkedItems.length === data.length;
   }, [data, checkedItems]);
-  const possibleFilterListValues = (0, import_react27.useMemo)(() => {
+  const possibleFilterListValues = (0, import_react28.useMemo)(() => {
     if (!openedFilterColumn || openedFilterColumn.filter !== "list") return [];
     return openedFilterColumn.list.filter((item) => item !== void 0).map((item) => ({
       ...item,
@@ -6822,18 +6969,18 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
     );
   }, [data, openedFilterColumn, filterForm.values.search]);
   const pageCountInternal = pageCount ?? (pageSize !== void 0 ? Math.ceil(dataAfterFilter.length / pageSize) : 1);
-  const onClickSelectAllFilterListItems = (0, import_react27.useCallback)(
+  const onClickSelectAllFilterListItems = (0, import_react28.useCallback)(
     () => setFilterListSelectedItems(possibleFilterListValues.map((item) => item.value)),
     [possibleFilterListValues]
   );
-  const onClickDeselectAllFilterListItems = (0, import_react27.useCallback)(() => setFilterListSelectedItems([]), []);
-  (0, import_react27.useEffect)(() => {
+  const onClickDeselectAllFilterListItems = (0, import_react28.useCallback)(() => setFilterListSelectedItems([]), []);
+  (0, import_react28.useEffect)(() => {
     onChangePage?.(currentPage);
   }, [onChangePage, currentPage]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     onChangeFilter?.(filterData);
   }, [onChangeFilter, filterData]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!memoizeFilters) return;
     if (!name) return;
     localStorage.setItem(
@@ -6844,10 +6991,10 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
       })
     );
   }, [memoizeFilters, name, filterData]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     onChangeFilterDataValue?.(dataAfterFilter);
   }, [onChangeFilterDataValue, dataAfterFilter]);
-  (0, import_react27.useImperativeHandle)(ref, () => {
+  (0, import_react28.useImperativeHandle)(ref, () => {
     return {
       currentPage,
       setCurrentPage,
@@ -6857,8 +7004,8 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
   }, [currentPage, setCurrentPage, pageCountInternal, setCheckedItems]);
   const withFooter = pageSize !== void 0 && pageCountInternal > 1;
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages / 1.4;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Div_default,
       {
         border: `${theme2.styles.borderWidth}px solid ${theme2.colors.border}`,
@@ -6866,7 +7013,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
         overflow: !containsOverflowComponents ? "auto" : void 0,
         ...props,
         ref: wrapperComponentRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           TableStyledComponent,
           {
             isStriped,
@@ -6877,14 +7024,14 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
             containsOverflowComponents,
             withFooter,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "isHeader", children: readyColumns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { className: "isHeader", children: readyColumns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 ThStyledComponent,
                 {
                   width: column.width ?? (column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.type === "expand" ? 16 : void 0),
                   minWidth: column.minWidth,
                   maxWidth: column.maxWidth,
                   textAlign: column.align,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                     Div_default.row,
                     {
                       width: "100%",
@@ -6892,15 +7039,15 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
                       justifyContent: column.filter ? "space-between" : column.align === "center" ? "center" : column.align === "right" ? "flex-end" : "flex-start",
                       gap: theme2.styles.gap,
                       children: [
-                        column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                        column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                           ToggleInput_default.checkbox,
                           {
                             checked: everythingIsChecked,
                             disabled: data.length === 0,
                             onChange: onClickAllCheckboxesElement
                           }
-                        ) : column.label ? column.renderLabel ? column.renderLabel(column.label) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { children: column.label }) : void 0,
-                        column.filter && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                        ) : column.label ? column.renderLabel ? column.renderLabel(column.label) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { children: column.label }) : void 0,
+                        column.filter && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                           Button_default.icon,
                           {
                             icon: "filter",
@@ -6915,16 +7062,16 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
                 },
                 column.type + column.label + index
               )) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => {
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => {
                 const realRowIndex = rowIndex + (pageSize ? (currentPage - 1) * pageSize : 0);
-                return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react27.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react28.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     "tr",
                     {
                       className: isInsideTableExpandRow && onClickRow === void 0 && expandColumn === void 0 ? "withoutHover" : void 0,
                       style: getRowStyle?.(item, realRowIndex),
                       onClick: () => onClickRowElement(item, realRowIndex),
-                      children: readyColumns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      children: readyColumns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                         TdStyledComponent,
                         {
                           textAlign: column.align,
@@ -6937,10 +7084,10 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
                       ))
                     }
                   ),
-                  expandedRows[realRowIndex] && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, realRowIndex) }) })
+                  expandedRows[realRowIndex] && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, realRowIndex) }) })
                 ] }, JSON.stringify(item) + realRowIndex);
-              }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
-              withFooter && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "isFooter", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+              }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
+              withFooter && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { className: "isFooter", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                 Div_default.column,
                 {
                   position: "relative",
@@ -6949,7 +7096,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
                   flexReverse: true,
                   gap: theme2.styles.gap / 2,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                       Text_default,
                       {
                         position: mobileFooterBreakingPoint ? "relative" : "absolute",
@@ -6964,7 +7111,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                       Pagination_default,
                       {
                         currentPage,
@@ -6983,26 +7130,26 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Modal_default,
       {
         title: `Filter ${openedFilterColumn?.label ?? ""}`,
         description: openedFilterColumn?.filter === "number" ? "Enter minimum and maximum values to filter" : openedFilterColumn?.filter === "date" || openedFilterColumn?.filter === "date-time" ? "Enter minimum and maximum dates to filter" : openedFilterColumn?.filter === "list" ? "Select values to filter from the list bellow" : "",
         onClose: onCloseFilterModal,
         ref: filterModalRef,
-        children: openedFilterColumn ? openedFilterColumn.filter === "number" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        children: openedFilterColumn ? openedFilterColumn.filter === "number" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Form_default,
           {
             form: filterForm,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(FormRow_default, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default, { type: "number", label: "Min", ...filterForm.getInputFieldProps("min") }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default, { type: "number", label: "Max", ...filterForm.getInputFieldProps("max") })
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(FormRow_default, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InputField_default, { type: "number", label: "Min", ...filterForm.getInputFieldProps("min") }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InputField_default, { type: "number", label: "Max", ...filterForm.getInputFieldProps("max") })
             ] })
           }
-        ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           Form_default,
           {
             form: filterForm,
@@ -7011,16 +7158,16 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
               ] }) }),
-              openedFilterColumn.presets && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label_default, { text: "Presets" }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              openedFilterColumn.presets && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Label_default, { text: "Presets" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                   Button_default.secondary,
                   {
                     text: filterPresetsText[preset],
@@ -7033,14 +7180,14 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
               ] })
             ]
           }
-        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           Form_default,
           {
             gap: theme2.styles.space,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
-            renderActionButtons: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            renderActionButtons: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 Button_default.secondary,
                 {
                   text: "Select All",
@@ -7049,7 +7196,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
                   onClick: onClickSelectAllFilterListItems
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 Button_default.secondary,
                 {
                   text: "Deselect All",
@@ -7062,7 +7209,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
             onSubmit: filterForm.onSubmit,
             children: [
-              openedFilterColumn?.withSearch && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FormRow_default, { oneItemOnly: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              openedFilterColumn?.withSearch && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FormRow_default, { oneItemOnly: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 InputField_default.search,
                 {
                   label: "Search",
@@ -7070,19 +7217,19 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
                   ...filterForm.getInputFieldProps("search")
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label_default, { text: "Possible values" }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Label_default, { text: "Possible values" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
                   const isActive = filterListSelectedItems?.includes(value.value);
-                  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     Div_default.box,
                     {
                       isActive,
                       value: value.value,
                       onClickWithValue: onClickFilterListItem,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { children: value.label || value.value }),
-                        openedFilterColumn.withTotalNumber && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { children: value.label || value.value }),
+                        openedFilterColumn.withTotalNumber && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                           Text_default,
                           {
                             fontSize: 14,
@@ -7098,24 +7245,24 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
                     },
                     value.value.toString()
                   );
-                }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default.unknown, { children: "No values" }) })
+                }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default.unknown, { children: "No values" }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default, {})
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Div_default, {})
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default.unknown, { children: "Unknown filter" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Loader_default.box, {})
+        ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default.unknown, { children: "Unknown filter" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Loader_default.box, {})
       }
     )
   ] });
 });
-var Table2 = (0, import_react27.memo)(TableComponent);
+var Table2 = (0, import_react28.memo)(TableComponent);
 var Table_default = Table2;
 
 // src/components/Tooltip.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_better_core26 = require("react-better-core");
 var import_styled_components14 = __toESM(require("styled-components"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var tooltipContainerStyle = (props) => ({
   top: import_styled_components14.css`
       bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
@@ -7217,10 +7364,10 @@ var arrowStyle = (props, borderWidth) => ({
     transform: !borderWidth && props.align === "center" ? "translateY(-50%);" : void 0
   }
 });
-var Arrow = (0, import_react28.memo)(function Arrow2(props) {
+var Arrow = (0, import_react29.memo)(function Arrow2(props) {
   const theme2 = (0, import_react_better_core26.useTheme)();
   const { position, size } = props;
-  const outerProps = (0, import_react28.useMemo)(
+  const outerProps = (0, import_react29.useMemo)(
     () => ({
       ...props,
       color: theme2.colors.border
@@ -7228,7 +7375,7 @@ var Arrow = (0, import_react28.memo)(function Arrow2(props) {
     [props, theme2]
   );
   const borderWidth = theme2.styles.borderWidth;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Div_default,
     {
       position: "absolute",
@@ -7236,7 +7383,7 @@ var Arrow = (0, import_react28.memo)(function Arrow2(props) {
       height: 0,
       border: `${size}px solid transparent`,
       ...arrowStyle(outerProps)[position],
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Div_default,
         {
           position: "absolute",
@@ -7249,7 +7396,7 @@ var Arrow = (0, import_react28.memo)(function Arrow2(props) {
     }
   );
 });
-var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
+var TooltipComponent = (0, import_react29.forwardRef)(function Tooltip({
   position = "bottom",
   trigger = "hover",
   align = "center",
@@ -7272,17 +7419,17 @@ var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
   children
 }, ref) {
   const theme2 = (0, import_react_better_core26.useTheme)();
-  const triggerHolderRef = (0, import_react28.useRef)(null);
-  const contentRef = (0, import_react28.useRef)(null);
-  const tooltipContainerRef = (0, import_react28.useRef)(null);
-  const closeTimerRef = (0, import_react28.useRef)(void 0);
-  const [isOpen, setIsOpen] = (0, import_react28.useState)(false);
-  const [isOpenLate, setIsOpenLate] = (0, import_react28.useState)(false);
+  const triggerHolderRef = (0, import_react29.useRef)(null);
+  const contentRef = (0, import_react29.useRef)(null);
+  const tooltipContainerRef = (0, import_react29.useRef)(null);
+  const closeTimerRef = (0, import_react29.useRef)(void 0);
+  const [isOpen, setIsOpen] = (0, import_react29.useState)(false);
+  const [isOpenLate, setIsOpenLate] = (0, import_react29.useState)(false);
   const arrowSize = withArrow ? theme2.styles.gap : 0;
   const gap = theme2.styles.gap / 2;
   const outsideScreenGap = theme2.styles.gap / 2;
   const totalGap = arrowSize + gap;
-  const openTooltip = (0, import_react28.useCallback)(() => {
+  const openTooltip = (0, import_react29.useCallback)(() => {
     if (disabled) return;
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
     setIsOpen(true);
@@ -7307,18 +7454,18 @@ var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
     }, 1);
     onOpen?.();
   }, [disabled, onOpen, outsideScreenGap, totalGap]);
-  const closeTooltip = (0, import_react28.useCallback)(() => {
+  const closeTooltip = (0, import_react29.useCallback)(() => {
     setIsOpen(false);
     closeTimerRef.current = setTimeout(() => setIsOpenLate(false), 300);
     onClose?.();
   }, [onClose]);
-  const onMouseEnter = (0, import_react28.useCallback)(() => {
+  const onMouseEnter = (0, import_react29.useCallback)(() => {
     if (trigger === "hover") openTooltip();
   }, [trigger, openTooltip]);
-  const onMouseLeave = (0, import_react28.useCallback)(() => {
+  const onMouseLeave = (0, import_react29.useCallback)(() => {
     if (trigger === "hover") closeTooltip();
   }, [trigger, closeTooltip]);
-  const onClickHolder = (0, import_react28.useCallback)(
+  const onClickHolder = (0, import_react29.useCallback)(
     (event) => {
       if (trigger === "click") {
         if (!isOpen) openTooltip();
@@ -7327,7 +7474,7 @@ var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
     },
     [trigger, openTooltip, isOpen, closeTooltip]
   );
-  const onClickOutside = (0, import_react28.useCallback)(
+  const onClickOutside = (0, import_react29.useCallback)(
     (event) => {
       if (!isOpen) return;
       if (trigger !== "click") return;
@@ -7337,7 +7484,7 @@ var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
     },
     [trigger, isOpen, closeTooltip]
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (trigger === "click") {
       document.addEventListener("mousedown", onClickOutside);
       return () => {
@@ -7345,18 +7492,18 @@ var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
       };
     }
   }, [trigger, onClickOutside]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!disabled) return;
     closeTooltip();
   }, [disabled]);
-  (0, import_react28.useImperativeHandle)(ref, () => {
+  (0, import_react29.useImperativeHandle)(ref, () => {
     return {
       isOpen,
       open: openTooltip,
       close: closeTooltip
     };
   }, [isOpen, openTooltip, closeTooltip]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     Div_default,
     {
       position: "relative",
@@ -7366,7 +7513,7 @@ var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
       onMouseEnter,
       onMouseLeave,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           Div_default,
           {
             width: childrenWrapperWidth,
@@ -7376,7 +7523,7 @@ var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           TooltipContainer,
           {
             theme: theme2,
@@ -7389,8 +7536,8 @@ var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
             isOpen,
             role: "tooltip",
             ref: tooltipContainerRef,
-            children: (isOpen || isOpenLate) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default, { position: "relative", ref: contentRef, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            children: (isOpen || isOpenLate) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default, { position: "relative", ref: contentRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 Div_default.box,
                 {
                   position: "relative",
@@ -7404,7 +7551,7 @@ var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
                   children: content
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 Div_default,
                 {
                   position: "absolute",
@@ -7418,7 +7565,7 @@ var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
                   borderTopRightRadius: 999
                 }
               ),
-              withArrow && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              withArrow && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 Arrow,
                 {
                   position,
@@ -7436,7 +7583,7 @@ var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
     }
   );
 });
-TooltipComponent.item = (0, import_react28.forwardRef)(function Item({
+TooltipComponent.item = (0, import_react29.forwardRef)(function Item({
   icon,
   iconColor,
   text,
@@ -7450,7 +7597,7 @@ TooltipComponent.item = (0, import_react28.forwardRef)(function Item({
   onClickWithValue
 }, ref) {
   const theme2 = (0, import_react_better_core26.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     Div_default.row,
     {
       alignItems: "center",
@@ -7468,18 +7615,18 @@ TooltipComponent.item = (0, import_react28.forwardRef)(function Item({
       onClickWithValue: !disabled ? onClickWithValue : void 0,
       ref,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
         ] })
       ]
     }
   );
 });
-TooltipComponent.divider = (0, import_react28.forwardRef)(function DividerComponent(props, ref) {
+TooltipComponent.divider = (0, import_react29.forwardRef)(function DividerComponent(props, ref) {
   const theme2 = (0, import_react_better_core26.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Divider_default.horizontal,
     {
       width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth,
@@ -7489,9 +7636,9 @@ TooltipComponent.divider = (0, import_react28.forwardRef)(function DividerCompon
     }
   );
 });
-TooltipComponent.sectionTitle = (0, import_react28.forwardRef)(function SectionTitle({ text, ...props }, ref) {
+TooltipComponent.sectionTitle = (0, import_react29.forwardRef)(function SectionTitle({ text, ...props }, ref) {
   const theme2 = (0, import_react_better_core26.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Text_default,
     {
       fontSize: 12,
@@ -7505,25 +7652,26 @@ TooltipComponent.sectionTitle = (0, import_react28.forwardRef)(function SectionT
     }
   );
 });
-var Tooltip2 = (0, import_react28.memo)(TooltipComponent);
+var Tooltip2 = (0, import_react29.memo)(TooltipComponent);
 Tooltip2.item = TooltipComponent.item;
 Tooltip2.divider = TooltipComponent.divider;
 Tooltip2.sectionTitle = TooltipComponent.sectionTitle;
 var Tooltip_default = Tooltip2;
 
 // src/components/Tabs.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_react_better_core27 = require("react-better-core");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
 var defaultTabName = "tab";
-var TabsComponent = (0, import_react29.forwardRef)(function Tabs({
+var TabsComponent = (0, import_react30.forwardRef)(function Tabs({
   tabs,
   name,
   accentColor,
   style = "default",
   gap,
+  borderRadius,
   noBottomLine,
   keepUrlHistory = true,
   onChange,
@@ -7533,11 +7681,11 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   const theme2 = (0, import_react_better_core27.useTheme)();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
-  const { componentsState } = useBetterHtmlContextInternal();
-  const firstRenderPassedRef = (0, import_react29.useRef)(false);
-  const tabsRef = (0, import_react29.useRef)({});
-  const tabsGap = gap ?? (style === "box" ? theme2.styles.gap / 2 : 0);
-  const [selectedTabId, setSelectedTabId] = (0, import_react29.useState)(() => {
+  const { language, componentsState } = useBetterHtmlContextInternal();
+  const firstRenderPassedRef = (0, import_react30.useRef)(false);
+  const tabsRef = (0, import_react30.useRef)({});
+  const tabsGap = gap ?? (style === "box" || style === "bubble" ? theme2.styles.gap / 2 : 0);
+  const [selectedTabId, setSelectedTabId] = (0, import_react30.useState)(() => {
     const selectedTabId2 = tabs[0];
     if (!selectedTabId2) return "";
     if (urlQuery) {
@@ -7548,8 +7696,8 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({
     }
     return selectedTabId2.id;
   });
-  const [rerenderState, setRerenderState] = (0, import_react29.useState)(0);
-  const onClickTab = (0, import_react29.useCallback)(
+  const [rerenderState, setRerenderState] = (0, import_react30.useState)(0);
+  const onClickTab = (0, import_react30.useCallback)(
     (tabId) => {
       setSelectedTabId(tabId);
       onChange?.(tabId);
@@ -7564,19 +7712,19 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({
     },
     [onChange, name, urlQuery, keepUrlHistory]
   );
-  const width = (0, import_react29.useMemo)(
+  const width = (0, import_react30.useMemo)(
     () => tabsRef.current[selectedTabId]?.getBoundingClientRect().width ?? 0,
     [rerenderState, selectedTabId]
   );
-  const leftSpacing = (0, import_react29.useMemo)(() => {
+  const leftSpacing = (0, import_react30.useMemo)(() => {
     const selectedTabIndex = tabs.findIndex((tab) => tab.id === selectedTabId);
     let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
       if (index < selectedTabIndex) spacing += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
     });
     return spacing;
-  }, [selectedTabId, tabs, tabsGap]);
-  (0, import_react29.useEffect)(() => {
+  }, [rerenderState, selectedTabId, tabs, tabsGap]);
+  (0, import_react30.useEffect)(() => {
     const timeout = setTimeout(() => {
       setRerenderState(Math.random());
       firstRenderPassedRef.current = true;
@@ -7584,8 +7732,8 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({
     return () => {
       clearTimeout(timeout);
     };
-  }, []);
-  (0, import_react29.useEffect)(() => {
+  }, [language]);
+  (0, import_react30.useEffect)(() => {
     componentsState.tabs.setTabGroups((oldValue) => {
       const thisTabGroup = oldValue.find((item) => item.name === (name ?? defaultTabName));
       if (thisTabGroup) {
@@ -7606,40 +7754,42 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({
       }
     });
   }, [selectedTabId, name]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     tabsRef.current[selectedTabId]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
   }, [selectedTabId]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     return () => {
       componentsState.tabs.setTabGroups(
         (oldValue) => oldValue.filter((item) => item.name !== (name ?? defaultTabName))
       );
     };
   }, []);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     onChange?.(selectedTabId);
   }, []);
-  (0, import_react29.useImperativeHandle)(ref, () => {
+  (0, import_react30.useImperativeHandle)(ref, () => {
     return {
       selectedTab: selectedTabId,
       selectTab: onClickTab
     };
   }, [selectedTabId, onClickTab]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
+  const readyBorderRadius = borderRadius ?? (style === "bubble" ? theme2.styles.borderRadius : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", zIndex: 2, children: tabs.map((tab) => {
         const selected = tab.id === selectedTabId;
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           Div_default,
           {
             className: `react-better-html-tabs-tab${selected ? " react-better-html-tabs-tab-selected" : ""}`,
             position: "relative",
             width: "fit-content",
-            backgroundColor: style === "box" ? selected ? accentColor ?? theme2.colors.primary : theme2.colors.backgroundContent : theme2.colors.backgroundBase,
-            borderRadius: style === "box" ? theme2.styles.borderRadius : void 0,
+            backgroundColor: style === "bubble" ? theme2.colors.textPrimary + "00" : style === "box" ? selected ? accentColor ?? theme2.colors.primary : theme2.colors.backgroundContent : theme2.colors.backgroundBase,
+            backgroundColorHover: style === "bubble" ? theme2.colors.textPrimary + "20" : void 0,
+            borderRadius: readyBorderRadius ?? (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" ? `${theme2.styles.borderWidth}px solid ${selected ? "transparent" : theme2.colors.border}` : void 0,
@@ -7655,7 +7805,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({
               tabsRef.current[tab.id] = ref2;
             },
             children: [
-              componentsState.tabs.tabsWithDots.includes(tab.id) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              componentsState.tabs.tabsWithDots.includes(tab.id) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 Div_default,
                 {
                   position: "absolute",
@@ -7668,11 +7818,11 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({
                   transition: theme2.styles.transition
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 Text_default,
                 {
                   fontWeight: 700,
-                  color: !selected ? theme2.colors.textSecondary : style === "box" ? theme2.colors.base : void 0,
+                  color: !selected ? theme2.colors.textSecondary : style === "box" || style === "bubble" ? theme2.colors.base : void 0,
                   transition: theme2.styles.transition,
                   whiteSpace: "nowrap",
                   children: tab.label ?? tab.id
@@ -7683,7 +7833,20 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({
           tab.id
         );
       }) }),
-      style !== "box" && !noBottomLine && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      style !== "box" && !noBottomLine && (style === "bubble" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        Div_default,
+        {
+          position: "absolute",
+          width,
+          height: "100%",
+          bottom: 0,
+          left: leftSpacing,
+          backgroundColor: accentColor ?? theme2.colors.primary,
+          borderRadius: readyBorderRadius,
+          transition: firstRenderPassedRef.current ? theme2.styles.transition : "none",
+          zIndex: 1
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         Div_default,
         {
           position: "absolute",
@@ -7692,20 +7855,21 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({
           bottom: 0,
           left: leftSpacing,
           backgroundColor: accentColor ?? theme2.colors.primary,
-          transition: firstRenderPassedRef.current ? theme2.styles.transition : "none"
+          transition: firstRenderPassedRef.current ? theme2.styles.transition : "none",
+          zIndex: 2
         }
-      )
+      ))
     ] }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default, { width: "100%", children })
+    children && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { width: "100%", children })
   ] });
 });
 TabsComponent.content = function Content({ tabId, tabWithDot, tabsGroupName, isInitialTab, children }) {
   const { componentsState } = useBetterHtmlContextInternal();
-  const thisTabGroupData = (0, import_react29.useMemo)(
+  const thisTabGroupData = (0, import_react30.useMemo)(
     () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
     [componentsState.tabs, tabsGroupName]
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (tabWithDot) {
       componentsState.tabs.setTabsWithDots?.(
         (oldValue) => oldValue.includes(tabId) ? oldValue : [...oldValue, tabId]
@@ -7716,21 +7880,22 @@ TabsComponent.content = function Content({ tabId, tabWithDot, tabsGroupName, isI
       );
     }
   }, [tabWithDot]);
-  return (thisTabGroupData ? thisTabGroupData.selectedTab === tabId : isInitialTab) ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default, { width: "100%", children }) : void 0;
+  return (thisTabGroupData ? thisTabGroupData.selectedTab === tabId : isInitialTab) ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { width: "100%", children }) : void 0;
 };
-var Tabs2 = (0, import_react29.memo)(TabsComponent);
+var Tabs2 = (0, import_react30.memo)(TabsComponent);
 Tabs2.content = TabsComponent.content;
 var Tabs_default = Tabs2;
 
 // src/components/Foldable.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_react_better_core28 = require("react-better-core");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
-var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
+var FoldableComponent = (0, import_react31.forwardRef)(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
+  withoutLine,
   icon,
   iconColor,
   iconSize,
@@ -7758,23 +7923,23 @@ var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
   ...props
 }, ref) {
   const theme2 = (0, import_react_better_core28.useTheme)();
-  const bodyRef = (0, import_react30.useRef)(null);
+  const bodyRef = (0, import_react31.useRef)(null);
   const [internalIsOpen, setInternalIsOpen] = (0, import_react_better_core28.useBooleanState)(defaultOpen);
-  const [bodyVirtualHeight, setBodyVirtualHeight] = (0, import_react30.useState)();
+  const [bodyVirtualHeight, setBodyVirtualHeight] = (0, import_react31.useState)();
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
-  const open = (0, import_react30.useCallback)(() => {
+  const open = (0, import_react31.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setTrue();
     onOpenChange?.(true);
   }, [controlledIsOpen, onOpenChange]);
-  const close = (0, import_react30.useCallback)(() => {
+  const close = (0, import_react31.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setFalse();
     onOpenChange?.(false);
   }, [controlledIsOpen, onOpenChange]);
-  const toggleOpen = (0, import_react30.useCallback)(() => {
+  const toggleOpen = (0, import_react31.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.toggle();
     onOpenChange?.(!isOpen);
   }, [controlledIsOpen, isOpen, onOpenChange]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!bodyRef.current) return;
     const body = bodyRef.current;
     setBodyVirtualHeight(body.scrollHeight * 2);
@@ -7785,7 +7950,7 @@ var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
       clearTimeout(timeout);
     };
   }, [isOpen]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!isOpen) return;
     if (!bodyRef.current) return;
     const observer = new ResizeObserver(() => {
@@ -7797,7 +7962,7 @@ var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
       observer.disconnect();
     };
   }, [isOpen]);
-  (0, import_react30.useImperativeHandle)(ref, () => {
+  (0, import_react31.useImperativeHandle)(ref, () => {
     return {
       open,
       close,
@@ -7805,9 +7970,9 @@ var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
       isOpen
     };
   }, [open, close, toggleOpen, isOpen]);
-  const arrow = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: "chevronDown", transform: `rotate(${isOpen ? 180 : 0}deg)`, transition: theme2.styles.transition });
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { width: "100%", ...props, children: [
-    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  const arrow = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: "chevronDown", transform: `rotate(${isOpen ? 180 : 0}deg)`, transition: theme2.styles.transition });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.column, { width: "100%", ...props, children: [
+    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       Div_default.row,
       {
         width: "100%",
@@ -7820,7 +7985,7 @@ var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
         userSelect: "none",
         children: [
           arrowPosition === "left" && arrow,
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             PageHeader_default,
             {
               icon,
@@ -7848,8 +8013,8 @@ var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Divider_default.horizontal, { width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    !withoutLine && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Divider_default.horizontal, { width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       Div_default,
       {
         maxHeight: isOpen ? bodyVirtualHeight : 0,
@@ -7858,14 +8023,14 @@ var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
         overflow: !isOpen ? "hidden" : void 0,
         pointerEvents: !isOpen ? "none" : void 0,
         ref: bodyRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
       }
     )
   ] });
 });
-FoldableComponent.box = (0, import_react30.forwardRef)(function Box3({ ...props }, ref) {
+FoldableComponent.box = (0, import_react31.forwardRef)(function Box3({ ...props }, ref) {
   const theme2 = (0, import_react_better_core28.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     FoldableComponent,
     {
       backgroundColor: theme2.colors.backgroundContent,
@@ -7878,25 +8043,25 @@ FoldableComponent.box = (0, import_react30.forwardRef)(function Box3({ ...props
     }
   );
 });
-var Foldable2 = (0, import_react30.memo)(FoldableComponent);
+var Foldable2 = (0, import_react31.memo)(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
 // src/components/SideMenu.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_react_better_core29 = require("react-better-core");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var tabDotSize2 = 6;
-var sideMenuContext = (0, import_react31.createContext)(void 0);
+var sideMenuContext = (0, import_react32.createContext)(void 0);
 var SideMenuContextProvider = sideMenuContext.Provider;
 var useSideMenuContext = () => {
-  const context = (0, import_react31.useContext)(sideMenuContext);
+  const context = (0, import_react32.useContext)(sideMenuContext);
   if (!context) {
     throw new Error("`useSideMenuContext` must be used within a `<SideMenuContextProvider>` component");
   }
   return context;
 };
-var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
+var MenuItemTypeItem = (0, import_react32.memo)(function MenuItemTypeItem2({
   item,
   backgroundColor,
   activeItemColor,
@@ -7911,7 +8076,7 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
   const { activeItem, setActiveItem } = useSideMenuContext();
   const [isOpened, setIsOpened] = (0, import_react_better_core29.useBooleanState)();
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
-  const onClickElement = (0, import_react31.useCallback)(() => {
+  const onClickElement = (0, import_react32.useCallback)(() => {
     if (item.disabled) return;
     if (!item.children) setActiveItem((oldValue) => oldValue?.href === item.href ? oldValue : void 0);
     if (item.children) {
@@ -7923,7 +8088,7 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
       item.onClick?.(item);
     }
   }, [onClick, item, isCollapsed]);
-  const childrenHaveDot = (0, import_react31.useMemo)(
+  const childrenHaveDot = (0, import_react32.useMemo)(
     () => item.children?.some((child) => child.type === "item" && child.withDot) ?? false,
     [item]
   );
@@ -7937,19 +8102,19 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
   const lineWidth = 2;
   const lineEndRadius = iconSize / 2 + iconGap * 2;
   const backgroundColorContrast = activeItemColor ? (0, import_react_better_core29.calculateColorContrast)(activeItemColor, theme2.colors.primary) : 21;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Tooltip_default,
     {
-      content: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text_default, { whiteSpace: "nowrap", children: item.text }),
-        item.children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: "chevronDown", color: theme2.colors.textSecondary, size: 14 })
+      content: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text_default, { whiteSpace: "nowrap", children: item.text }),
+        item.children && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon_default, { name: "chevronDown", color: theme2.colors.textSecondary, size: 14 })
       ] }),
       contentPointerEvents: "none",
       withArrow: true,
       childrenWrapperWidth: "100%",
       disabled: !isCollapsed,
       position: "right",
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         Div_default.row,
         {
           alignItems: "center",
@@ -7967,7 +8132,7 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
           opacity: item.disabled ? 0.6 : void 0,
           onClick: onClickElement,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               Icon_default,
               {
                 name: item.iconName,
@@ -7976,7 +8141,7 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
                 flexShrink: 0
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               Text_default,
               {
                 flex: 1,
@@ -7987,7 +8152,7 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
                 children: item.text
               }
             ),
-            item.children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            item.children && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               Icon_default,
               {
                 name: "chevronDown",
@@ -7997,7 +8162,7 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
                 transition: theme2.styles.transition
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               Div_default,
               {
                 position: "absolute",
@@ -8016,7 +8181,7 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
       )
     }
   );
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!item.href) return;
     const isActive2 = location.pathname === "/" ? location.pathname === item.href : location.pathname.startsWith(item.href) && item.href !== "/";
     if (!isActive2) return;
@@ -8027,21 +8192,21 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
       } : oldValue
     );
   }, [location.pathname]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!item.children) return;
     const toBeOpened = item.children.some(
       (child) => child.type === "item" ? child.href ? location.pathname === "/" ? location.pathname === child.href : location.pathname.startsWith(child.href) && child.href !== "/" : false : false
     );
     if (!isCollapsed) setIsOpened.setState(toBeOpened);
   }, [item, isCollapsed]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!isCollapsed) return;
     setIsOpened.setFalse();
   }, [isCollapsed]);
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    item.href ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
-    item.children && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    item.href ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
+    item.children && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       Div_default.column,
       {
         position: "relative",
@@ -8052,7 +8217,7 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
         overflow: "hidden",
         transition: `max-height ${theme2.styles.transition}, margin-top ${theme2.styles.transition}`,
         children: [
-          item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             MenuItemComponent,
             {
               item: child,
@@ -8062,7 +8227,7 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
             },
             child.text
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             Div_default,
             {
               position: "absolute",
@@ -8071,7 +8236,7 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
               left: paddingLeft + iconSize / 2,
               zIndex: -1,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   Div_default,
                   {
                     position: "relative",
@@ -8081,7 +8246,7 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
                     zIndex: 1
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   Div_default,
                   {
                     position: "absolute",
@@ -8105,13 +8270,13 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
     )
   ] });
 });
-var MenuItemTypeDivider = (0, import_react31.memo)(function MenuItemTypeDivider2({ item }) {
+var MenuItemTypeDivider = (0, import_react32.memo)(function MenuItemTypeDivider2({ item }) {
   const theme2 = (0, import_react_better_core29.useTheme)();
   const { sideMenuIsCollapsed } = useBetterHtmlContextInternal();
   const { items } = useSideMenuContext();
   const isCollapsed = sideMenuIsCollapsed && !item.shortText;
   const isFirst = items[0]?.type === item.type && items[0]?.text === item.text;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Div_default.row,
     {
       maxHeight: !isCollapsed ? 30 : theme2.styles.gap + 1,
@@ -8119,7 +8284,7 @@ var MenuItemTypeDivider = (0, import_react31.memo)(function MenuItemTypeDivider2
       paddingInline: theme2.styles.gap,
       overflow: "hidden",
       transition: `max-height ${theme2.styles.transition}, padding-top ${theme2.styles.transition}`,
-      children: sideMenuIsCollapsed && item.shortText || !sideMenuIsCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      children: sideMenuIsCollapsed && item.shortText || !sideMenuIsCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         Text_default,
         {
           width: "100%",
@@ -8131,17 +8296,18 @@ var MenuItemTypeDivider = (0, import_react31.memo)(function MenuItemTypeDivider2
           whiteSpace: "nowrap",
           children: sideMenuIsCollapsed ? item.shortText : item.text
         }
-      ) : !isFirst ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Divider_default.horizontal, {}) : void 0
+      ) : !isFirst ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Divider_default.horizontal, {}) : void 0
     }
   );
 });
-var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ item, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { width: "100%", children: item.type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuItemTypeItem, { item, ...props }) : item.type === "divider" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuItemTypeDivider, { item }) : void 0 });
+var MenuItemComponent = (0, import_react32.memo)(function MenuItemComponent2({ item, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Div_default, { width: "100%", children: item.type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenuItemTypeItem, { item, ...props }) : item.type === "divider" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenuItemTypeDivider, { item }) : void 0 });
 });
 var SideMenuComponent = function SideMenu({
   items,
   bottomItems,
   location,
+  position = "left",
   topSpace = 0,
   logoAssetName,
   logoUrl,
@@ -8154,6 +8320,7 @@ var SideMenuComponent = function SideMenu({
   itemsAdditionalComponent,
   betweenItemsAdditionalComponent,
   bottomItemsAdditionalComponent,
+  border,
   isLoading,
   backgroundColor,
   activeItemColor,
@@ -8162,43 +8329,49 @@ var SideMenuComponent = function SideMenu({
   paddingTop,
   paddingBottom,
   mobileFoldToPosition = "left",
+  sideBar,
   renderItemsHolder,
-  renderBottomItemsHolder
+  renderBottomItemsHolder,
+  children
 }) {
   const theme2 = (0, import_react_better_core29.useTheme)();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed, sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
-  const [activeItem, setActiveItem] = (0, import_react31.useState)();
-  const [itemsState, setItemsState] = (0, import_react31.useState)(items);
-  const [bottomItemsState, setBottomItemsState] = (0, import_react31.useState)(bottomItems);
-  const onClickXButton = (0, import_react31.useCallback)(() => {
+  const [activeItem, setActiveItem] = (0, import_react32.useState)();
+  const [itemsState, setItemsState] = (0, import_react32.useState)(items);
+  const [bottomItemsState, setBottomItemsState] = (0, import_react32.useState)(bottomItems);
+  const onClickXButton = (0, import_react32.useCallback)(() => {
     setSideMenuIsOpenMobile.setFalse();
   }, []);
-  const readyItems = (0, import_react31.useMemo)(() => items.filter((item) => !item.hidden), [items]);
-  const readyBottomItems = (0, import_react31.useMemo)(() => bottomItems?.filter((item) => !item.hidden), [bottomItems]);
-  const contextValue = (0, import_react31.useMemo)(
+  const readyItems = (0, import_react32.useMemo)(() => items.filter((item) => !item.hidden), [items]);
+  const readyBottomItems = (0, import_react32.useMemo)(() => bottomItems?.filter((item) => !item.hidden), [bottomItems]);
+  const contextValue = (0, import_react32.useMemo)(
     () => ({
       activeItem,
       setActiveItem,
       items: itemsState,
-      bottomItems: bottomItemsState
+      bottomItems: bottomItemsState,
+      position
     }),
-    [activeItem, itemsState, bottomItemsState]
+    [activeItem, itemsState, bottomItemsState, position]
   );
   const isCollapsable = collapsable && !mediaQuery.size1000;
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
   const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
+  const sideBarWidth = components.sideMenu?.width ?? defaultSideBarWidth;
   const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
   const logoSize = sideMenuCollapsedWidth - theme2.styles.space * 2;
-  (0, import_react31.useEffect)(() => {
+  const readyBorder = border ?? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`;
+  const readyTransition = mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition;
+  (0, import_react32.useEffect)(() => {
     setItemsState(items);
   }, [items]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     setBottomItemsState(bottomItems);
   }, [bottomItems]);
-  const itemsComponent = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const itemsComponent = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Div_default.column,
     {
       width: "100%",
@@ -8206,7 +8379,7 @@ var SideMenuComponent = function SideMenu({
       overflowY: !isCollapsed ? "auto" : void 0,
       paddingInline: !renderItemsHolder ? theme2.styles.space : void 0,
       paddingBottom: !renderItemsHolder ? !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0 : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         MenuItemComponent,
         {
           item,
@@ -8216,11 +8389,11 @@ var SideMenuComponent = function SideMenu({
           location,
           onClick: onClickXButton
         },
-        item.text
+        item.type + item.text
       )) })
     }
   );
-  const bottomItemsComponent = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const bottomItemsComponent = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Div_default.column,
     {
       borderTop: mediaQuery.size1000 ? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
@@ -8229,7 +8402,7 @@ var SideMenuComponent = function SideMenu({
       paddingTop: mediaQuery.size1000 ? theme2.styles.space : void 0,
       paddingInline: !renderItemsHolder ? theme2.styles.space : void 0,
       paddingBottom: !renderItemsHolder ? !isCollapsable ? theme2.styles.space : void 0 : void 0,
-      children: readyBottomItems?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      children: readyBottomItems?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         MenuItemComponent,
         {
           item,
@@ -8239,143 +8412,172 @@ var SideMenuComponent = function SideMenu({
           location,
           onClick: onClickXButton
         },
-        item.text
+        item.type + item.text
       ))
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SideMenuContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-    Div_default.column,
+  const sideBarComponent = sideBar ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    Div_default,
     {
-      as: "aside",
-      position: "fixed",
-      width: mediaQuery.size1000 ? "100%" : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
-      height: `calc(100svh - ${topSpace}px)`,
-      top: topSpace,
-      left: 0,
-      backgroundColor: readyBackgroundColor,
-      borderRight: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
-      transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : `translateX(${mobileFoldToPosition === "left" ? "-" : ""}100%)`,
-      paddingTop: paddingTop ?? (logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space),
-      paddingBottom,
-      transition: mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition,
-      userSelect: "none",
-      zIndex: 10,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: gap ?? theme2.styles.space, children: [
-          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
-            (logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-              Div_default.row,
-              {
-                alignItems: "center",
-                width: sideMenuCollapsedWidth ? logoSize : void 0,
-                height: logoSize,
-                whiteSpace: "nowrap",
-                gap: theme2.styles.gap,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                    Image_default,
-                    {
-                      name: logoAssetName,
-                      src: logoUrl,
-                      width: logoSize,
-                      height: logoSize,
-                      objectFit: "contain"
-                    }
-                  ),
-                  logoText && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                    Text_default,
-                    {
-                      fontFamily: logoFontFamily,
-                      fontSize: 22,
-                      fontWeight: 800,
-                      opacity: !isCollapsed ? 1 : 0,
-                      transition: theme2.styles.transition,
-                      userSelect: "none",
-                      children: logoText
-                    }
-                  )
-                ]
-              }
-            ) }),
-            withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
-          ] }),
-          itemsAdditionalComponent,
-          !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-            renderItemsHolder ? renderItemsHolder(itemsComponent) : itemsComponent,
-            betweenItemsAdditionalComponent,
-            readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: renderBottomItemsHolder ? renderBottomItemsHolder(bottomItemsComponent) : bottomItemsComponent })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Loader_default.box, { text: isCollapsed ? "" : void 0 }) }),
-          bottomItemsAdditionalComponent,
-          isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            Div_default,
+      width: sideBarWidth,
+      height: "100%",
+      flexShrink: 0,
+      borderRight: position === "left" ? readyBorder : void 0,
+      borderLeft: position === "right" ? border ?? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
+      children: sideBar
+    }
+  ) : sideBar;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(SideMenuContextProvider, { value: contextValue, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      Div_default.row,
+      {
+        as: "aside",
+        position: "fixed",
+        width: mediaQuery.size1000 ? "100%" : (isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth) + (sideBar ? sideBarWidth : 0),
+        height: `calc(100svh - ${topSpace}px)`,
+        top: topSpace,
+        left: position === "left" ? 0 : void 0,
+        right: position === "right" ? 0 : void 0,
+        backgroundColor: readyBackgroundColor,
+        transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : `translateX(${mobileFoldToPosition === "left" ? "-" : ""}100%)`,
+        transition: readyTransition,
+        userSelect: "none",
+        zIndex: 10,
+        children: [
+          position === "left" && sideBarComponent,
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+            Div_default.column,
             {
-              borderTop: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
-              marginTop: !readyBottomItems ? "auto" : void 0,
-              paddingInline: theme2.styles.space,
-              paddingBlock: theme2.styles.space,
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                Div_default.row,
-                {
-                  alignItems: "center",
-                  justifyContent: "center",
-                  backgroundColor: readyBackgroundColor,
-                  borderRadius: theme2.styles.borderRadius,
-                  cursor: "pointer",
-                  filterHover: filterHover().z1,
-                  isTabAccessed: true,
-                  paddingBlock: theme2.styles.gap,
-                  onClick: setSideMenuIsCollapsed.toggle,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                    Icon_default,
+              width: mediaQuery.size1000 ? "100%" : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
+              height: "100%",
+              borderRight: position === "left" ? readyBorder : void 0,
+              borderLeft: position === "right" ? border ?? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
+              flexShrink: 0,
+              paddingTop: paddingTop ?? (logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space),
+              paddingBottom,
+              transition: readyTransition,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: gap ?? theme2.styles.space, children: [
+                  (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
+                    (logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                      Div_default.row,
+                      {
+                        alignItems: "center",
+                        width: sideMenuCollapsedWidth ? logoSize : void 0,
+                        height: logoSize,
+                        whiteSpace: "nowrap",
+                        gap: theme2.styles.gap,
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                            Image_default,
+                            {
+                              name: logoAssetName,
+                              src: logoUrl,
+                              width: logoSize,
+                              height: logoSize,
+                              objectFit: "contain"
+                            }
+                          ),
+                          logoText && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                            Text_default,
+                            {
+                              fontFamily: logoFontFamily,
+                              fontSize: 22,
+                              fontWeight: 800,
+                              opacity: !isCollapsed ? 1 : 0,
+                              transition: theme2.styles.transition,
+                              userSelect: "none",
+                              children: logoText
+                            }
+                          )
+                        ]
+                      }
+                    ) }),
+                    withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
+                  ] }),
+                  itemsAdditionalComponent,
+                  !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+                    renderItemsHolder ? renderItemsHolder(itemsComponent) : itemsComponent,
+                    betweenItemsAdditionalComponent,
+                    readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: renderBottomItemsHolder ? renderBottomItemsHolder(bottomItemsComponent) : bottomItemsComponent })
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Div_default, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Loader_default.box, { text: isCollapsed ? "" : void 0 }) }),
+                  bottomItemsAdditionalComponent,
+                  isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    Div_default,
                     {
-                      name: "chevronRight",
-                      size: 20,
-                      color: theme2.colors.textSecondary,
-                      transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
-                      transition: theme2.styles.transition
+                      borderTop: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
+                      marginTop: !readyBottomItems ? "auto" : void 0,
+                      paddingInline: theme2.styles.space,
+                      paddingBlock: theme2.styles.space,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                        Div_default.row,
+                        {
+                          alignItems: "center",
+                          justifyContent: "center",
+                          backgroundColor: readyBackgroundColor,
+                          borderRadius: theme2.styles.borderRadius,
+                          cursor: "pointer",
+                          filterHover: filterHover().z1,
+                          isTabAccessed: true,
+                          paddingBlock: theme2.styles.gap,
+                          onClick: setSideMenuIsCollapsed.toggle,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                            Icon_default,
+                            {
+                              name: position === "left" ? "chevronRight" : "chevronLeft",
+                              size: 20,
+                              color: theme2.colors.textSecondary,
+                              transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
+                              transition: theme2.styles.transition
+                            }
+                          )
+                        }
+                      )
                     }
                   )
-                }
-              )
+                ] }),
+                widthMobileHandle && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  Div_default.row,
+                  {
+                    position: "absolute",
+                    top: theme2.styles.space,
+                    left: "100%",
+                    backgroundColor: readyBackgroundColor,
+                    border: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
+                    borderLeft: "none",
+                    borderTopRightRadius: theme2.styles.borderRadius,
+                    borderBottomRightRadius: theme2.styles.borderRadius,
+                    alignItems: "center",
+                    cursor: "pointer",
+                    opacity: !mediaQuery.size1000 ? 0 : void 0,
+                    pointerEvents: !mediaQuery.size1000 ? "none" : void 0,
+                    padding: theme2.styles.gap,
+                    paddingRight: (theme2.styles.space + theme2.styles.gap) / 2,
+                    transform: !mediaQuery.size1000 ? "translateX(-100%)" : void 0,
+                    transition: theme2.styles.transition,
+                    onClick: setSideMenuIsOpenMobile.toggle,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      Icon_default,
+                      {
+                        name: "chevronRight",
+                        size: 20,
+                        color: theme2.colors.textSecondary,
+                        transform: sideMenuIsOpenMobile ? "rotate(180deg)" : void 0,
+                        transition: theme2.styles.transition
+                      }
+                    )
+                  }
+                ),
+                absoluteComponent && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Div_default, { position: "absolute", top: 0, left: 0, pointerEvents: "none", zIndex: 2, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Div_default, { pointerEvents: "all", children: absoluteComponent }) })
+              ]
             }
-          )
-        ] }),
-        widthMobileHandle && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          Div_default.row,
-          {
-            position: "absolute",
-            top: theme2.styles.space,
-            left: "100%",
-            backgroundColor: readyBackgroundColor,
-            border: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
-            borderLeft: "none",
-            borderTopRightRadius: theme2.styles.borderRadius,
-            borderBottomRightRadius: theme2.styles.borderRadius,
-            alignItems: "center",
-            cursor: "pointer",
-            opacity: !mediaQuery.size1000 ? 0 : void 0,
-            pointerEvents: !mediaQuery.size1000 ? "none" : void 0,
-            padding: theme2.styles.gap,
-            paddingRight: (theme2.styles.space + theme2.styles.gap) / 2,
-            transform: !mediaQuery.size1000 ? "translateX(-100%)" : void 0,
-            transition: theme2.styles.transition,
-            onClick: setSideMenuIsOpenMobile.toggle,
-            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-              Icon_default,
-              {
-                name: "chevronRight",
-                size: 20,
-                color: theme2.colors.textSecondary,
-                transform: sideMenuIsOpenMobile ? "rotate(180deg)" : void 0,
-                transition: theme2.styles.transition
-              }
-            )
-          }
-        ),
-        absoluteComponent && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { position: "absolute", top: 0, left: 0, pointerEvents: "none", zIndex: 2, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { pointerEvents: "all", children: absoluteComponent }) })
-      ]
-    }
-  ) });
+          ),
+          position === "right" && sideBarComponent
+        ]
+      }
+    ),
+    children
+  ] });
 };
 SideMenuComponent.pageHolder = function SideMenuPageHolder({
   additionalTopComponent,
@@ -8385,18 +8587,21 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({
   const theme2 = (0, import_react_better_core29.useTheme)();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
+  const { position } = useSideMenuContext();
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
   const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  const sideSpace = !mediaQuery.size1000 ? !sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     Div_default,
     {
       position: "relative",
       width: "100%",
-      paddingLeft: !mediaQuery.size1000 ? !sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth : void 0,
+      paddingLeft: position === "left" ? sideSpace : void 0,
+      paddingRight: position === "right" ? sideSpace : void 0,
       transition: theme2.styles.transition,
       children: [
         additionalTopComponent,
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PageHolder_default, { ...props }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PageHolder_default, { ...props }),
         additionalBottomComponent
       ]
     }
@@ -8406,12 +8611,12 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
   const theme2 = (0, import_react_better_core29.useTheme)();
   const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [isHovered, setIsHovered] = (0, import_react_better_core29.useBooleanState)();
-  const onClickElement = (0, import_react31.useCallback)(() => {
+  const onClickElement = (0, import_react32.useCallback)(() => {
     setSideMenuIsOpenMobile.toggle();
     onClick?.(!sideMenuIsOpenMobile);
   }, [onClick, sideMenuIsOpenMobile]);
   const width = 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     Div_default,
     {
       position: "relative",
@@ -8423,7 +8628,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
       onMouseOut: setIsHovered.setFalse,
       onClick: onClickElement,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           Div_default,
           {
             position: "absolute",
@@ -8438,7 +8643,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
             transition: theme2.styles.transition
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           Div_default,
           {
             position: "absolute",
@@ -8454,7 +8659,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
             transition: theme2.styles.transition
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           Div_default,
           {
             position: "absolute",
@@ -8473,7 +8678,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
     }
   );
 };
-var SideMenu2 = (0, import_react31.memo)(SideMenuComponent);
+var SideMenu2 = (0, import_react32.memo)(SideMenuComponent);
 SideMenu2.pageHolder = SideMenuComponent.pageHolder;
 SideMenu2.burgerButton = SideMenuComponent.burgerButton;
 var SideMenu_default = SideMenu2;
@@ -8521,6 +8726,7 @@ var SideMenu_default = SideMenu2;
   formatPhoneNumber,
   generateApi,
   generateEventEmitter,
+  generateI18n,
   generateLocalStorage,
   generateRandomString,
   getBrowser,