react-better-html 1.1.276 → 1.1.278

package/dist/index.mjs

@@ -42,6 +42,7 @@ var appConfig = {
 };
 var defaultAlertDuration = 2.3 * 1e3;
 var defaultSideMenuWidth = 300;
+var defaultSideBarWidth = 80;
 
 // src/constants/theme.ts
 var theme = {};
@@ -3093,7 +3094,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
@@ -3160,6 +3172,8 @@ function BetterHtmlProviderInternalContent({ children }) {
 function BetterHtmlProviderInternal({ config, plugins, children }) {
   const betterCoreContext = useBetterCoreContext5();
   const [alerts, setAlerts] = useState4([]);
+  const [language, setLanguage] = useState4(localStorage.getItem("language") ?? "");
+  const [languages, setLanguages] = useState4({});
   const [sideMenuIsCollapsed, setSideMenuIsCollapsed] = useBooleanState3();
   const [sideMenuIsOpenMobile, setSideMenuIsOpenMobile] = useBooleanState3();
   const [tabGroups, setTabGroups] = useState4([]);
@@ -3172,6 +3186,10 @@ function BetterHtmlProviderInternal({ config, plugins, children }) {
       },
       alerts,
       setAlerts,
+      language,
+      setLanguage,
+      languages,
+      setLanguages,
       sideMenuIsCollapsed,
       setSideMenuIsCollapsed,
       sideMenuIsOpenMobile,
@@ -3189,7 +3207,17 @@ function BetterHtmlProviderInternal({ config, plugins, children }) {
         }
       }
     }),
-    [config, alerts, sideMenuIsCollapsed, sideMenuIsOpenMobile, plugins, tabGroups, tabsWithDots]
+    [
+      config,
+      alerts,
+      language,
+      languages,
+      sideMenuIsCollapsed,
+      sideMenuIsOpenMobile,
+      plugins,
+      tabGroups,
+      tabsWithDots
+    ]
   );
   useEffect6(() => {
     if (!plugins) return;
@@ -3417,14 +3445,72 @@ function generateLocalStorage() {
   };
 }
 
+// src/utils/i18n.tsx
+import { Fragment as Fragment3 } from "react";
+import { Fragment as Fragment4, jsx as jsx13 } from "react/jsx-runtime";
+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__ */ jsx13(Fragment3, { 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__ */ jsx13(Fragment4, { 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
 import { forwardRef as forwardRef8, memo as memo13 } from "react";
 import { useTheme as useTheme14 } from "react-better-core";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var PageHolderComponent = forwardRef8(function PageHolder({ noMaxContentWidth, children, ...props }, ref) {
   const theme2 = useTheme14();
   const { app } = useBetterHtmlContextInternal();
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     Div_default,
     {
       as: "main",
@@ -3468,7 +3554,7 @@ PageHolderComponent.center = forwardRef8(function Center({
       backgroundColor: pageBackgroundColor,
       backgroundImage: pageBackgroundImage,
       children: [
-        behindComponent && /* @__PURE__ */ jsx13(
+        behindComponent && /* @__PURE__ */ jsx14(
           Div_default,
           {
             position: "fixed",
@@ -3481,8 +3567,8 @@ PageHolderComponent.center = forwardRef8(function Center({
             children: behindComponent
           }
         ),
-        sideComponentPosition === "left" && withSideComponent && /* @__PURE__ */ jsx13(Div_default, { width: "50%" }),
-        /* @__PURE__ */ jsx13(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ jsx13(
+        sideComponentPosition === "left" && withSideComponent && /* @__PURE__ */ jsx14(Div_default, { width: "50%" }),
+        /* @__PURE__ */ jsx14(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ jsx14(
           ContentTag,
           {
             width: `calc(100% - ${((props.margin ?? props.marginInline) !== void 0 ? parseFloat((props.margin ?? props.marginInline)?.toString() ?? "") : theme2.styles.space) * 2}px)`,
@@ -3495,8 +3581,8 @@ PageHolderComponent.center = forwardRef8(function Center({
             children
           }
         ) }),
-        sideComponentPosition === "right" && withSideComponent && /* @__PURE__ */ jsx13(Div_default, { width: "50%" }),
-        withSideComponent && /* @__PURE__ */ jsx13(
+        sideComponentPosition === "right" && withSideComponent && /* @__PURE__ */ jsx14(Div_default, { width: "50%" }),
+        withSideComponent && /* @__PURE__ */ jsx14(
           Div_default,
           {
             position: "fixed",
@@ -3519,7 +3605,7 @@ var PageHolder_default = PageHolder2;
 // src/components/Chip.tsx
 import { forwardRef as forwardRef9, memo as memo14, useCallback as useCallback7 } from "react";
 import { darkenColor, lightenColor, useBetterCoreContext as useBetterCoreContext6, useTheme as useTheme15 } from "react-better-core";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var borderRadiusOffset = 1.3;
 var ChipComponent = forwardRef9(function Chip({
   text,
@@ -3542,7 +3628,7 @@ var ChipComponent = forwardRef9(function Chip({
     },
     [onClick, onClickWithValue, value]
   );
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     Div_default,
     {
       width: "fit-content",
@@ -3557,7 +3643,7 @@ var ChipComponent = forwardRef9(function Chip({
       ref,
       children: /* @__PURE__ */ jsxs10(Div_default.row, { height: "100%", alignItems: "center", gap: theme2.styles.gap, children: [
         beforeText,
-        typeof text === "string" ? /* @__PURE__ */ jsx14(Text_default, { color: color ?? theme2.colors.textPrimary, children: text }) : text,
+        typeof text === "string" ? /* @__PURE__ */ jsx15(Text_default, { color: color ?? theme2.colors.textPrimary, children: text }) : text,
         afterText
       ] })
     }
@@ -3567,7 +3653,7 @@ ChipComponent.colored = forwardRef9(function Colored({ color, withWhiteBackgroun
   const theme2 = useTheme15();
   const { colorTheme } = useBetterCoreContext6();
   const readyColor = color ?? theme2.colors.textSecondary;
-  const chip = /* @__PURE__ */ jsx14(
+  const chip = /* @__PURE__ */ jsx15(
     ChipComponent,
     {
       color: colorTheme === "light" ? darkenColor(readyColor, 0.7) : lightenColor(readyColor, 0.7),
@@ -3577,7 +3663,7 @@ ChipComponent.colored = forwardRef9(function Colored({ color, withWhiteBackgroun
       ...props
     }
   );
-  return withWhiteBackground ? /* @__PURE__ */ jsx14(
+  return withWhiteBackground ? /* @__PURE__ */ jsx15(
     Div_default,
     {
       width: "fit-content",
@@ -3659,7 +3745,7 @@ function Label(labelProps) {
 var Label_default = memo15(Label);
 
 // src/components/Dropdown.tsx
-import { forwardRef as forwardRef10, Fragment as Fragment3, memo as memo16, useCallback as useCallback8, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
+import { forwardRef as forwardRef10, Fragment as Fragment5, memo as memo16, useCallback as useCallback8, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
 import {
   getPluralWord,
   useBooleanState as useBooleanState4,
@@ -3667,7 +3753,7 @@ import {
   countries,
   useTheme as useTheme17
 } from "react-better-core";
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
@@ -3695,6 +3781,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
     debounceDelay = 0.5,
     debounceIsLoading,
     debounceMinimumSymbolsRequired,
+    withoutArrow,
     withoutClearButton,
     withoutRenderingOptionsWhenClosed,
     onChange,
@@ -3703,6 +3790,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
     renderOptionDivider,
     withMultiselect,
     id,
+    textAlign,
     ...props
   } = useComponentsPropsMerger(
     betterHtmlContextInternal.components.dropdown?.style?.default,
@@ -3829,14 +3917,14 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
     [options, value]
   );
   const renderedOptions = useMemo4(
-    () => /* @__PURE__ */ jsxs12(Fragment4, { children: [
+    () => /* @__PURE__ */ jsxs12(Fragment6, { 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__ */ jsxs12(Fragment3, { children: [
-          /* @__PURE__ */ jsx15(
+        return /* @__PURE__ */ jsxs12(Fragment5, { children: [
+          /* @__PURE__ */ jsx16(
             Div_default,
             {
               color: isDisabled ? theme2.colors.textSecondary + "80" : isSelected ? theme2.colors.base : theme2.colors.textPrimary,
@@ -3851,7 +3939,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
               role: "option",
               "aria-selected": isSelected,
               "aria-disabled": isDisabled,
-              children: renderOption ? renderOption(option, index, isSelected) : /* @__PURE__ */ jsx15(Fragment4, { children: !option.renderType || option.renderType === "default" ? /* @__PURE__ */ jsx15(Text_default, { children: option.label }) : option.renderType === "chip" ? /* @__PURE__ */ jsx15(Chip_default, { text: option.label, ...option.chipProps }) : option.renderType === "chip.colored" ? /* @__PURE__ */ jsx15(Chip_default.colored, { text: option.label, withWhiteBackground: true, ...option.chipProps }) : void 0 })
+              children: renderOption ? renderOption(option, index, isSelected) : /* @__PURE__ */ jsx16(Fragment6, { children: !option.renderType || option.renderType === "default" ? /* @__PURE__ */ jsx16(Text_default, { children: option.label }) : option.renderType === "chip" ? /* @__PURE__ */ jsx16(Chip_default, { text: option.label, ...option.chipProps }) : option.renderType === "chip.colored" ? /* @__PURE__ */ jsx16(Chip_default.colored, { text: option.label, withWhiteBackground: true, ...option.chipProps }) : void 0 })
             }
           ),
           renderOptionDivider ? renderOptionDivider(
@@ -3913,7 +4001,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
   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() ?? getPluralWord("option", withMultiselect ? 2 : 1)}`;
-  return /* @__PURE__ */ jsx15(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ jsx16(
     InputField_default,
     {
       label,
@@ -3926,6 +4014,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
       errorText,
       infoText,
       required: withMultiselect ? (Array.isArray(value) ? value.length > 0 : value !== void 0) ? false : required : required,
+      textAlign,
       name,
       disabled,
       readOnly: !withSearch,
@@ -3935,13 +4024,13 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
       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__ */ jsx15(
+      insideInputFieldBeforeComponent: Array.isArray(selectedOption) && selectedOption.length > 0 ? /* @__PURE__ */ jsx16(
         Div_default,
         {
           width: "100%",
@@ -3954,14 +4043,14 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
           paddingBlock: theme2.styles.gap,
           paddingInline: (theme2.styles.space + theme2.styles.gap) / 2,
           transition: theme2.styles.transition,
-          children: /* @__PURE__ */ jsx15(Div_default.row, { width: "100%", flexWrap: "wrap", gap: theme2.styles.gap, children: selectedOption.map((option) => {
+          children: /* @__PURE__ */ jsx16(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__ */ createElement2(
               ChipComponentTag,
               {
                 text: option.label,
-                afterText: withXButton && /* @__PURE__ */ jsx15(
+                afterText: withXButton && /* @__PURE__ */ jsx16(
                   Button_default.icon,
                   {
                     icon: "XMark",
@@ -3983,8 +4072,8 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
           }) })
         }
       ) : void 0,
-      insideInputFieldAfterComponent: /* @__PURE__ */ jsxs12(Fragment4, { children: [
-        /* @__PURE__ */ jsx15(
+      insideInputFieldAfterComponent: /* @__PURE__ */ jsxs12(Fragment6, { children: [
+        /* @__PURE__ */ jsx16(
           Div_default,
           {
             position: "absolute",
@@ -4006,7 +4095,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
             transition: theme2.styles.transition,
             role: "listbox",
             "aria-label": label,
-            children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ jsx15(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx15(Loader_default.text, {}) }) : filteredOptions.length ? /* @__PURE__ */ jsx15(Fragment4, { children: (withoutRenderingOptionsWhenClosed ? isOpen || isOpenLate : true) ? renderedOptions : void 0 }) : /* @__PURE__ */ jsx15(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx15(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
+            children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ jsx16(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx16(Loader_default.text, {}) }) : filteredOptions.length ? /* @__PURE__ */ jsx16(Fragment6, { children: (withoutRenderingOptionsWhenClosed ? isOpen || isOpenLate : true) ? renderedOptions : void 0 }) : /* @__PURE__ */ jsx16(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx16(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
           }
         ),
         /* @__PURE__ */ jsxs12(
@@ -4024,7 +4113,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
             zIndex: isOpen || isOpenLate ? 1001 : void 0,
             ref: buttonsRef,
             children: [
-              !withoutClearButton && /* @__PURE__ */ jsx15(
+              !withoutClearButton && /* @__PURE__ */ jsx16(
                 Button_default.icon,
                 {
                   icon: "XMark",
@@ -4037,7 +4126,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
                   disabled: !withClearButton
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              !withoutArrow && /* @__PURE__ */ jsx16(
                 Icon_default,
                 {
                   name: "chevronDown",
@@ -4074,8 +4163,8 @@ DropdownComponent.countries = forwardRef10(function Countries(dropdownProps, ref
   const theme2 = useTheme17();
   const renderOption = useCallback8(
     (option, index, isSelected) => /* @__PURE__ */ jsxs12(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-      /* @__PURE__ */ jsx15(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
-      /* @__PURE__ */ jsx15(Text_default, { children: option.label })
+      /* @__PURE__ */ jsx16(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
+      /* @__PURE__ */ jsx16(Text_default, { children: option.label })
     ] }),
     []
   );
@@ -4090,7 +4179,7 @@ DropdownComponent.countries = forwardRef10(function Countries(dropdownProps, ref
     ),
     []
   );
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     DropdownComponent,
     {
       placeholder: "Select a country",
@@ -4102,15 +4191,63 @@ DropdownComponent.countries = forwardRef10(function Countries(dropdownProps, ref
     }
   );
 });
+DropdownComponent.language = forwardRef10(function Countries2({ isSmall, ...dropdownProps }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { inputFieldClassName, ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.dropdown?.style?.language,
+    dropdownProps
+  );
+  const theme2 = useTheme17();
+  const renderOption = useCallback8(
+    (option, index, isSelected) => /* @__PURE__ */ jsxs12(Div_default.row, { alignItems: "center", justifyContent: isSmall ? "center" : void 0, gap: theme2.styles.gap, children: [
+      /* @__PURE__ */ jsx16(Image_default, { src: `https://flagcdn.com/w80/${option.data?.flagCode.toString().toLowerCase()}.webp`, width: 20 }),
+      !isSmall && /* @__PURE__ */ jsx16(Text_default, { children: option.label })
+    ] }),
+    [isSmall]
+  );
+  const onChange = useCallback8((value) => {
+    betterHtmlContextInternal.setLanguage(value);
+    localStorage.setItem("language", value);
+  }, []);
+  const options = useMemo4(
+    () => Object.values(betterHtmlContextInternal.languages).map(
+      (data) => ({
+        value: data.code,
+        label: isSmall ? data.code.toUpperCase() : data.name,
+        data,
+        searchValues: [data.code]
+      })
+    ),
+    []
+  );
+  return /* @__PURE__ */ jsx16(
+    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 = memo16(DropdownComponent);
 Dropdown2.countries = DropdownComponent.countries;
+Dropdown2.language = DropdownComponent.language;
 var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx
 import { useCallback as useCallback9, useMemo as useMemo5, useState as useState6, memo as memo17, useEffect as useEffect8, useId } from "react";
 import { useTheme as useTheme18 } from "react-better-core";
 import styled9 from "styled-components";
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var getMonthName = (month, short = false) => {
   return [
     short ? "Jan" : "January",
@@ -4226,28 +4363,28 @@ function Calendar({ value, minDate, maxDate, onChange }) {
   }, [value]);
   return /* @__PURE__ */ jsxs13(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
     /* @__PURE__ */ jsxs13(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
-      /* @__PURE__ */ jsx16(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
+      /* @__PURE__ */ jsx17(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
       /* @__PURE__ */ jsxs13(Div_default.row, { alignItems: "center", gap: 4, children: [
-        /* @__PURE__ */ jsx16(Text_default, { fontWeight: 700, children: getMonthName(currentMonth) }),
-        /* @__PURE__ */ jsx16(SelectWrapperComponent, { children: /* @__PURE__ */ jsxs13(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
-          /* @__PURE__ */ jsx16(Text_default, { fontWeight: 700, children: currentYear }),
-          /* @__PURE__ */ jsx16(Icon_default, { name: "chevronDown", size: 12 }),
-          /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(Text_default, { fontWeight: 700, children: getMonthName(currentMonth) }),
+        /* @__PURE__ */ jsx17(SelectWrapperComponent, { children: /* @__PURE__ */ jsxs13(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx17(Text_default, { fontWeight: 700, children: currentYear }),
+          /* @__PURE__ */ jsx17(Icon_default, { name: "chevronDown", size: 12 }),
+          /* @__PURE__ */ jsx17(
             SelectComponent,
             {
               theme: theme2,
               value: currentYear,
               onChange: onChangeYearSelect,
               id: internalYearSelectId,
-              children: yearsRange.map((year) => /* @__PURE__ */ jsx16("option", { value: year, children: year }, year))
+              children: yearsRange.map((year) => /* @__PURE__ */ jsx17("option", { value: year, children: year }, year))
             }
           )
         ] }) })
       ] }),
-      /* @__PURE__ */ jsx16(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
+      /* @__PURE__ */ jsx17(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
     ] }),
     /* @__PURE__ */ jsxs13(Div_default.grid, { width: "100%", gridTemplateColumns: "repeat(7, 1fr)", gap: theme2.styles.gap / 2, children: [
-      weekDaysIndex.map((day) => /* @__PURE__ */ jsx16(Div_default.row, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx16(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", children: getWeekDayName(day, true) }) }, day)),
+      weekDaysIndex.map((day) => /* @__PURE__ */ jsx17(Div_default.row, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx17(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();
@@ -4271,7 +4408,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
             value: day,
             onClickWithValue: !isDisabled ? onClickDay : void 0,
             children: [
-              day && /* @__PURE__ */ jsx16(
+              day && /* @__PURE__ */ jsx17(
                 Text_default,
                 {
                   fontSize: 14,
@@ -4280,7 +4417,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
                   children: day
                 }
               ),
-              isDisabled && /* @__PURE__ */ jsx16(
+              isDisabled && /* @__PURE__ */ jsx17(
                 Div_default,
                 {
                   position: "absolute",
@@ -4300,7 +4437,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
       })
     ] }),
     /* @__PURE__ */ jsxs13(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
-      /* @__PURE__ */ jsx16(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickClear, children: /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickClear, children: /* @__PURE__ */ jsx17(
         Text_default,
         {
           fontSize: 14,
@@ -4310,7 +4447,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
           children: "Clear"
         }
       ) }),
-      /* @__PURE__ */ jsx16(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickToday, children: /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickToday, children: /* @__PURE__ */ jsx17(
         Text_default,
         {
           fontSize: 14,
@@ -4326,7 +4463,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
 var Calendar_default = memo17(Calendar);
 
 // src/components/InputField.tsx
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var buttonWidth = 50;
 var colorPickerSpacing = 4;
 var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
@@ -4436,6 +4573,15 @@ var InputElement = styled10.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;
@@ -4573,7 +4719,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
   }, [withDebounce, onChangeValue, debouncedValue]);
   const readyId = id ?? internalId;
   return /* @__PURE__ */ jsxs14(Div_default.column, { width: "100%", gap: labelGap ?? theme2.styles.gap / 2, ...excludeStyle, children: [
-    label && /* @__PURE__ */ jsx17(
+    label && /* @__PURE__ */ jsx18(
       Label_default,
       {
         text: label,
@@ -4588,7 +4734,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
       }
     ),
     /* @__PURE__ */ jsxs14(Div_default.row, { alignItems: "stretch", width: "100%", children: [
-      prefix && /* @__PURE__ */ jsx17(
+      prefix && /* @__PURE__ */ jsx18(
         Div_default.row,
         {
           alignItems: "center",
@@ -4605,7 +4751,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
       /* @__PURE__ */ jsxs14(Div_default, { position: "relative", width: "100%", height: "fit-content", ref: holderRef, children: [
         insideInputFieldBeforeComponent,
         /* @__PURE__ */ jsxs14(Div_default, { position: "relative", width: "100%", height: "fit-content", children: [
-          leftIcon && /* @__PURE__ */ jsx17(
+          leftIcon && /* @__PURE__ */ jsx18(
             Icon_default,
             {
               name: leftIcon,
@@ -4617,7 +4763,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
               zIndex: leftIconZIndex
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             InputElement,
             {
               theme: theme2,
@@ -4639,7 +4785,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
               ref
             }
           ),
-          rightIcon ? onClickRightIcon ? /* @__PURE__ */ jsx17(
+          rightIcon ? onClickRightIcon ? /* @__PURE__ */ jsx18(
             Button_default.icon,
             {
               icon: rightIcon,
@@ -4649,7 +4795,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
               transform: "translateY(-50%)",
               onClick: onClickRightIcon
             }
-          ) : /* @__PURE__ */ jsx17(
+          ) : /* @__PURE__ */ jsx18(
             Icon_default,
             {
               name: rightIcon,
@@ -4663,7 +4809,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
           insideInputFieldAfterComponent
         ] })
       ] }),
-      suffix && /* @__PURE__ */ jsx17(
+      suffix && /* @__PURE__ */ jsx18(
         Div_default.row,
         {
           alignItems: "center",
@@ -4678,7 +4824,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
         }
       )
     ] }),
-    (errorText || infoText) && /* @__PURE__ */ jsx17(
+    (errorText || infoText) && /* @__PURE__ */ jsx18(
       Text_default,
       {
         as: "span",
@@ -4730,7 +4876,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps,
   );
   const readyId = id ?? internalId;
   return /* @__PURE__ */ jsxs14(Div_default.column, { gap: labelGap ?? theme2.styles.gap / 2, children: [
-    label && /* @__PURE__ */ jsx17(
+    label && /* @__PURE__ */ jsx18(
       Label_default,
       {
         text: label,
@@ -4745,7 +4891,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps,
       }
     ),
     /* @__PURE__ */ jsxs14(Div_default, { position: "relative", width: "100%", children: [
-      leftIcon && /* @__PURE__ */ jsx17(
+      leftIcon && /* @__PURE__ */ jsx18(
         Icon_default,
         {
           name: leftIcon,
@@ -4756,7 +4902,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps,
           pointerEvents: "none"
         }
       ),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(
         TextareaElement,
         {
           theme: theme2,
@@ -4776,7 +4922,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps,
           ref
         }
       ),
-      rightIcon ? onClickRightIcon ? /* @__PURE__ */ jsx17(
+      rightIcon ? onClickRightIcon ? /* @__PURE__ */ jsx18(
         Button_default.icon,
         {
           icon: rightIcon,
@@ -4786,7 +4932,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps,
           transform: "translateY(-50%)",
           onClick: onClickRightIcon
         }
-      ) : /* @__PURE__ */ jsx17(
+      ) : /* @__PURE__ */ jsx18(
         Icon_default,
         {
           name: rightIcon,
@@ -4798,7 +4944,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps,
         }
       ) : void 0
     ] }),
-    (errorText || infoText) && /* @__PURE__ */ jsx17(
+    (errorText || infoText) && /* @__PURE__ */ jsx18(
       Text_default,
       {
         as: "span",
@@ -4817,7 +4963,7 @@ InputFieldComponent.email = forwardRef11(function Email(inputFieldProps, ref) {
     betterHtmlContextInternal.components.inputField?.style?.email,
     inputFieldProps
   );
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     InputFieldComponent,
     {
       type: "email",
@@ -4837,7 +4983,7 @@ InputFieldComponent.password = forwardRef11(function Password(inputFieldProps, r
     inputFieldProps
   );
   const [isPassword, setIsPassword] = useBooleanState5(true);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     InputFieldComponent,
     {
       type: isPassword ? "password" : "text",
@@ -4884,7 +5030,7 @@ InputFieldComponent.search = forwardRef11(function Search(inputFieldProps, ref)
   const onClickRightIcon = useCallback10(() => {
     onChangeValueElement("");
   }, [onChangeValueElement]);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     InputFieldComponent,
     {
       leftIcon: "magnifyingGlass",
@@ -4920,8 +5066,8 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber(inputFieldPr
   const [inputFieldValue, setInputFieldValue] = useState7(value?.toString() ?? "");
   const renderOption = useCallback10(
     (option, index, isSelected) => /* @__PURE__ */ jsxs14(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-      /* @__PURE__ */ jsx17(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
-      /* @__PURE__ */ jsx17(Text_default, { children: option.label })
+      /* @__PURE__ */ jsx18(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
+      /* @__PURE__ */ jsx18(Text_default, { children: option.label })
     ] }),
     []
   );
@@ -4973,7 +5119,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber(inputFieldPr
   const readyId = id ?? internalId;
   const readyLabel = betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.label ?? label;
   return /* @__PURE__ */ jsxs14(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, children: [
-    readyLabel && /* @__PURE__ */ jsx17(
+    readyLabel && /* @__PURE__ */ jsx18(
       Label_default,
       {
         text: readyLabel,
@@ -4988,7 +5134,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber(inputFieldPr
       }
     ),
     /* @__PURE__ */ jsxs14(Div_default.row, { children: [
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(
         Dropdown_default,
         {
           options,
@@ -5006,7 +5152,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber(inputFieldPr
           withoutRenderingOptionsWhenClosed: true
         }
       ),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(
         InputFieldComponent,
         {
           ...betterHtmlContextInternal.components.inputField?.style?.phoneNumber,
@@ -5046,7 +5192,7 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, dropd
     },
     [restInputFieldProps.onChangeValue]
   );
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     InputFieldComponent,
     {
       ...betterHtmlContextInternal.components.inputField?.style?.date,
@@ -5066,7 +5212,7 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, dropd
           userSelect: "none",
           ...insideInputFieldComponentProps,
           children: [
-            /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx18(
               Div_default,
               {
                 position: "absolute",
@@ -5079,7 +5225,7 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, dropd
                 transition: theme2.styles.transition
               }
             ),
-            /* @__PURE__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
+            /* @__PURE__ */ jsx18(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
           ]
         }
       ) : void 0,
@@ -5189,7 +5335,7 @@ InputFieldComponent.dateTime = forwardRef11(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__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     InputFieldComponent,
     {
       ...betterHtmlContextInternal.components.inputField?.style?.dateTime,
@@ -5210,7 +5356,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
           userSelect: "none",
           ...insideInputFieldComponentProps,
           children: [
-            /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx18(
               Div_default,
               {
                 position: "absolute",
@@ -5224,7 +5370,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
               }
             ),
             /* @__PURE__ */ jsxs14(Div_default.row, { gap: theme2.styles.space, children: [
-              /* @__PURE__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
+              /* @__PURE__ */ jsx18(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
               /* @__PURE__ */ jsxs14(
                 Div_default.row,
                 {
@@ -5235,8 +5381,8 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
                   paddingRight: theme2.styles.space / 2,
                   children: [
                     /* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
-                      /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
-                      /* @__PURE__ */ jsx17(
+                      /* @__PURE__ */ jsx18(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
+                      /* @__PURE__ */ jsx18(
                         Div_default,
                         {
                           className: "react-better-html-no-scrollbar",
@@ -5246,7 +5392,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
                           tabIndex: -1,
                           children: readyHours.map((hour) => {
                             const isSelected = hour.toString() === valueHour;
-                            return /* @__PURE__ */ jsx17(
+                            return /* @__PURE__ */ jsx18(
                               Div_default.row,
                               {
                                 alignItems: "center",
@@ -5260,7 +5406,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
                                 value: hour,
                                 onClickWithValue: onClickHour,
                                 ref: isSelected ? selectedHourRef : void 0,
-                                children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                                children: /* @__PURE__ */ jsx18(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
                               },
                               hour
                             );
@@ -5269,8 +5415,8 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
                       )
                     ] }),
                     /* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
-                      /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
-                      /* @__PURE__ */ jsx17(
+                      /* @__PURE__ */ jsx18(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
+                      /* @__PURE__ */ jsx18(
                         Div_default,
                         {
                           className: "react-better-html-no-scrollbar",
@@ -5280,7 +5426,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
                           tabIndex: -1,
                           children: readyMinutes.map((minute) => {
                             const isSelected = minute.toString() === valueMinute;
-                            return /* @__PURE__ */ jsx17(
+                            return /* @__PURE__ */ jsx18(
                               Div_default.row,
                               {
                                 alignItems: "center",
@@ -5294,7 +5440,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
                                 value: minute,
                                 onClickWithValue: onClickMinute,
                                 ref: isSelected ? selectedMinuteRef : void 0,
-                                children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                                children: /* @__PURE__ */ jsx18(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
                               },
                               minute
                             );
@@ -5400,7 +5546,7 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
   }, [isOpen]);
   const valueHour = parseInt(internalValue?.toString().split(":")?.[0]).toString();
   const valueMinute = parseInt(internalValue?.toString().split(":")?.[1]).toString();
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     InputFieldComponent,
     {
       ...betterHtmlContextInternal.components.inputField?.style?.time,
@@ -5422,7 +5568,7 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
           userSelect: "none",
           ...insideInputFieldComponentProps,
           children: [
-            /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx18(
               Div_default,
               {
                 position: "absolute",
@@ -5436,7 +5582,7 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
               }
             ),
             /* @__PURE__ */ jsxs14(Div_default.row, { height: "100%", children: [
-              /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsx18(
                 Div_default,
                 {
                   className: "react-better-html-no-scrollbar",
@@ -5447,7 +5593,7 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
                   children: readyHours.map((hour) => {
                     const isSelected = hour.toString() === valueHour;
                     const isDisabled = minHours && hour < minHours || maxHours && hour > maxHours;
-                    return /* @__PURE__ */ jsx17(
+                    return /* @__PURE__ */ jsx18(
                       Div_default.row,
                       {
                         alignItems: "center",
@@ -5461,14 +5607,14 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
                         value: hour,
                         onClickWithValue: !isDisabled ? onClickHour : void 0,
                         ref: isSelected ? selectedHourRef : void 0,
-                        children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                        children: /* @__PURE__ */ jsx18(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
                       },
                       hour
                     );
                   })
                 }
               ),
-              /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsx18(
                 Div_default,
                 {
                   className: "react-better-html-no-scrollbar",
@@ -5480,7 +5626,7 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
                     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__ */ jsx17(
+                    return /* @__PURE__ */ jsx18(
                       Div_default.row,
                       {
                         alignItems: "center",
@@ -5494,7 +5640,7 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
                         value: minute,
                         onClickWithValue: !isDisabled ? onClickMinute : void 0,
                         ref: isSelected ? selectedMinuteRef : void 0,
-                        children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                        children: /* @__PURE__ */ jsx18(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
                       },
                       minute
                     );
@@ -5532,12 +5678,12 @@ InputFieldComponent.color = forwardRef11(function Color4({ ...inputFieldProps },
     if (value === void 0) return;
     setInputFieldValue(value);
   }, [value]);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     InputFieldComponent,
     {
       ...betterHtmlContextInternal.components.inputField?.style?.color,
       type: "color",
-      insideInputFieldAfterComponent: /* @__PURE__ */ jsx17(
+      insideInputFieldAfterComponent: /* @__PURE__ */ jsx18(
         Div_default.row,
         {
           position: "absolute",
@@ -5549,7 +5695,7 @@ InputFieldComponent.color = forwardRef11(function Color4({ ...inputFieldProps },
           pointerEvents: "none",
           userSelect: "none",
           paddingLeft: colorPickerColorWidth,
-          children: /* @__PURE__ */ jsx17(Text_default, { children: inputFieldValue })
+          children: /* @__PURE__ */ jsx18(Text_default, { children: inputFieldValue })
         }
       ),
       value: inputFieldValue,
@@ -5575,7 +5721,7 @@ var InputField_default = InputField2;
 import { forwardRef as forwardRef12, useCallback as useCallback11, useId as useId3, useState as useState8 } from "react";
 import { useBetterCoreContext as useBetterCoreContext8, useBooleanState as useBooleanState6, useTheme as useTheme20 } from "react-better-core";
 import styled11, { css as css4 } from "styled-components";
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
@@ -5720,7 +5866,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
   }, [checked, controlledChecked, onChange, value]);
   const readyId = id ?? internalId;
   return /* @__PURE__ */ jsxs15(Div_default.column, { gap: labelGap ?? theme2.styles.gap, ...excludeStyle, children: [
-    label && /* @__PURE__ */ jsx18(
+    label && /* @__PURE__ */ jsx19(
       Label_default,
       {
         text: label,
@@ -5736,7 +5882,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
     ),
     /* @__PURE__ */ jsxs15(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsxs15(Div_default.row, { position: "relative", alignItems: "center", children: [
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           InputElement2,
           {
             theme: theme2,
@@ -5754,7 +5900,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
             ...ariaProps
           }
         ),
-        props.type === "checkbox" ? /* @__PURE__ */ jsx18(
+        props.type === "checkbox" ? /* @__PURE__ */ jsx19(
           Icon_default,
           {
             name: "check",
@@ -5768,7 +5914,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
             pointerEvents: "none",
             transition: theme2.styles.transition
           }
-        ) : props.type === "radio" ? /* @__PURE__ */ jsx18(
+        ) : props.type === "radio" ? /* @__PURE__ */ jsx19(
           Div_default,
           {
             position: "absolute",
@@ -5811,7 +5957,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
         ] })
       ] }) : void 0
     ] }),
-    (errorText || infoText) && /* @__PURE__ */ jsx18(
+    (errorText || infoText) && /* @__PURE__ */ jsx19(
       Text_default,
       {
         as: "span",
@@ -5830,7 +5976,7 @@ var ToggleInput_default = {
       betterHtmlContextInternal.components.toggleInput?.style?.checkbox,
       checkboxProps
     );
-    return /* @__PURE__ */ jsx18(ToggleInputComponent, { type: "checkbox", ref, ...props });
+    return /* @__PURE__ */ jsx19(ToggleInputComponent, { type: "checkbox", ref, ...props });
   }),
   radiobutton: forwardRef12(function RadioButton(radiobuttonProps, ref) {
     const betterHtmlContextInternal = useBetterHtmlContextInternal();
@@ -5838,7 +5984,7 @@ var ToggleInput_default = {
       betterHtmlContextInternal.components.toggleInput?.style?.radiobutton,
       radiobuttonProps
     );
-    return /* @__PURE__ */ jsx18(ToggleInputComponent, { type: "radio", ref, ...props });
+    return /* @__PURE__ */ jsx19(ToggleInputComponent, { type: "radio", ref, ...props });
   }),
   switch: forwardRef12(function Switch(switchProps, ref) {
     const betterHtmlContextInternal = useBetterHtmlContextInternal();
@@ -5878,7 +6024,7 @@ var ToggleInput_default = {
     }, [disabled, checked, onChange, controlledChecked, value]);
     const readyId = id ?? internalId;
     return /* @__PURE__ */ jsxs15(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...excludeStyle, children: [
-      label && /* @__PURE__ */ jsx18(
+      label && /* @__PURE__ */ jsx19(
         Label_default,
         {
           text: label,
@@ -5892,7 +6038,7 @@ var ToggleInput_default = {
           htmlFor: readyId
         }
       ),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(
         Div_default.row,
         {
           alignItems: "center",
@@ -5906,7 +6052,7 @@ var ToggleInput_default = {
           onTouchStart: setIsMouseDown.setTrue,
           onTouchEnd: setIsMouseDown.setFalse,
           onTouchCancel: setIsMouseDown.setFalse,
-          children: /* @__PURE__ */ jsx18(
+          children: /* @__PURE__ */ jsx19(
             SwitchElement,
             {
               theme: theme2,
@@ -5926,7 +6072,7 @@ var ToggleInput_default = {
           )
         }
       ),
-      (errorText || infoText) && /* @__PURE__ */ jsx18(
+      (errorText || infoText) && /* @__PURE__ */ jsx19(
         Text_default,
         {
           as: "span",
@@ -5941,9 +6087,9 @@ var ToggleInput_default = {
 };
 
 // src/components/Form.tsx
-import { Children, forwardRef as forwardRef13, Fragment as Fragment5, memo as memo19, useMemo as useMemo7 } from "react";
+import { Children, forwardRef as forwardRef13, Fragment as Fragment7, memo as memo19, useMemo as useMemo7 } from "react";
 import { useTheme as useTheme21 } from "react-better-core";
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var FormComponent = forwardRef13(function Form({
   form,
   name,
@@ -5977,10 +6123,10 @@ var FormComponent = forwardRef13(function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
-  return /* @__PURE__ */ jsx19(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs16("form", { name, onSubmit: onSubmit ?? form?.onSubmit, id, ref, children: [
-    gap !== void 0 || withDividers ? /* @__PURE__ */ jsx19(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs16(Fragment5, { children: [
+  return /* @__PURE__ */ jsx20(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs16("form", { name, onSubmit: onSubmit ?? form?.onSubmit, id, ref, children: [
+    gap !== void 0 || withDividers ? /* @__PURE__ */ jsx20(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs16(Fragment7, { children: [
       child,
-      index < Children.toArray(children).length - 1 && /* @__PURE__ */ jsx19(
+      index < Children.toArray(children).length - 1 && /* @__PURE__ */ jsx20(
         Divider_default.horizontal,
         {
           width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth
@@ -5996,7 +6142,7 @@ var FormComponent = forwardRef13(function Form({
         marginTop: theme2.styles.space,
         children: [
           renderActionButtons,
-          onClickCancel && /* @__PURE__ */ jsx19(
+          onClickCancel && /* @__PURE__ */ jsx20(
             Button_default.secondary,
             {
               text: cancelButtonText ?? "Cancel",
@@ -6007,7 +6153,7 @@ var FormComponent = forwardRef13(function Form({
               onClick: onClickCancel
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             SubmitButtonTag,
             {
               text: submitButtonText,
@@ -6029,7 +6175,7 @@ var Form_default = Form2;
 // src/components/FormRow.tsx
 import { forwardRef as forwardRef14, memo as memo20 } from "react";
 import { useTheme as useTheme22 } from "react-better-core";
-import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var FormRowComponent = forwardRef14(function FormRow({ oneItemOnly, noBreakingPoint, asColumn, gap, children, ...props }, ref) {
   const theme2 = useTheme22();
   const mediaQuery = useMediaQuery();
@@ -6037,7 +6183,7 @@ var FormRowComponent = forwardRef14(function FormRow({ oneItemOnly, noBreakingPo
   const readyGap = breakingPoint || noBreakingPoint && mediaQuery.size900 ? theme2.styles.gap : theme2.styles.space * 2;
   return /* @__PURE__ */ jsxs17(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
     children,
-    oneItemOnly && /* @__PURE__ */ jsx20(Div_default, { width: "100%" })
+    oneItemOnly && /* @__PURE__ */ jsx21(Div_default, { width: "100%" })
   ] });
 });
 FormRowComponent.withTitle = forwardRef14(function WithTitle({
@@ -6063,7 +6209,7 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
   const titleGap = theme2.styles.space;
   return /* @__PURE__ */ jsxs17(FormRowComponent, { ...props, ref, children: [
     /* @__PURE__ */ jsxs17(Div_default.row, { width: "100%", alignItems: "center", gap: titleGap, children: [
-      icon && /* @__PURE__ */ jsx20(Icon_default, { name: icon }),
+      icon && /* @__PURE__ */ jsx21(Icon_default, { name: icon }),
       /* @__PURE__ */ jsxs17(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
         /* @__PURE__ */ jsxs17(Text_default, { as: titleAs, fontSize: titleFontSize, children: [
           title,
@@ -6072,9 +6218,9 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
             "*"
           ] })
         ] }),
-        description && /* @__PURE__ */ jsx20(Text_default, { fontSize: descriptionFontSize ?? theme2.styles.fontSize, color: theme2.colors.textSecondary, children: description })
+        description && /* @__PURE__ */ jsx21(Text_default, { fontSize: descriptionFontSize ?? theme2.styles.fontSize, color: theme2.colors.textSecondary, children: description })
       ] }),
-      isLoading && /* @__PURE__ */ jsx20(Div_default, { width: 26 - titleGap })
+      isLoading && /* @__PURE__ */ jsx21(Div_default, { width: 26 - titleGap })
     ] }),
     /* @__PURE__ */ jsxs17(
       Div_default.row,
@@ -6085,7 +6231,7 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
         justifyContent: alignChildren,
         gap: theme2.styles.gap,
         children: [
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             Div_default,
             {
               position: "absolute",
@@ -6094,13 +6240,13 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
               transform: "translateY(-50%)",
               opacity: !isLoading ? 0 : void 0,
               pointerEvents: !isLoading ? "none" : void 0,
-              children: /* @__PURE__ */ jsx20(Loader_default, {})
+              children: /* @__PURE__ */ jsx21(Loader_default, {})
             }
           ),
           children,
           withActions && /* @__PURE__ */ jsxs17(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-            onClickReset && /* @__PURE__ */ jsx20(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),
-            /* @__PURE__ */ jsx20(Button_default.icon, { icon: "check", loaderName: saveButtonLoaderName, onClick: onClickSave })
+            onClickReset && /* @__PURE__ */ jsx21(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),
+            /* @__PURE__ */ jsx21(Button_default.icon, { icon: "check", loaderName: saveButtonLoaderName, onClick: onClickSave })
           ] })
         ]
       }
@@ -6114,7 +6260,7 @@ var FormRow_default = FormRow2;
 // src/components/ColorThemeSwitch.tsx
 import { memo as memo21, useCallback as useCallback12, useEffect as useEffect10, useState as useState9 } from "react";
 import { useTheme as useTheme23 } from "react-better-core";
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
   withMoon,
   className,
@@ -6143,7 +6289,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     ToggleInput_default.switch,
     {
       className: `react-better-html-color-theme-switch ${withMoon ? ` react-better-html-color-theme-switch-with-moon` : ""}${className ? ` ${className}` : ""}`,
@@ -6156,9 +6302,9 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
 ColorThemeSwitchComponent.withText = function WithText({ withMoon, className, ...props }) {
   const theme2 = useTheme23();
   return /* @__PURE__ */ jsxs18(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme2.styles.gap, userSelect: "none", ...props, children: [
-    /* @__PURE__ */ jsx21(Text_default, { children: "Light" }),
-    /* @__PURE__ */ jsx21(ColorThemeSwitchComponent, { withMoon, className }),
-    /* @__PURE__ */ jsx21(Text_default, { children: "Dark" })
+    /* @__PURE__ */ jsx22(Text_default, { children: "Light" }),
+    /* @__PURE__ */ jsx22(ColorThemeSwitchComponent, { withMoon, className }),
+    /* @__PURE__ */ jsx22(Text_default, { children: "Dark" })
   ] });
 };
 var ColorThemeSwitch2 = memo21(ColorThemeSwitchComponent);
@@ -6175,7 +6321,7 @@ import {
   useImperativeHandle as useImperativeHandle2,
   useRef as useRef6,
   useEffect as useEffect12,
-  Fragment as Fragment6
+  Fragment as Fragment8
 } from "react";
 import { darkenColor as darkenColor3, useBetterCoreContext as useBetterCoreContext9, useTheme as useTheme25 } from "react-better-core";
 import styled12, { css as css5 } from "styled-components";
@@ -6183,7 +6329,7 @@ import styled12, { css as css5 } from "styled-components";
 // src/components/Pagination.tsx
 import { memo as memo22, useCallback as useCallback13, useEffect as useEffect11, useMemo as useMemo8, useState as useState10 } from "react";
 import { useTheme as useTheme24 } from "react-better-core";
-import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var PaginationComponent = function Pagination({
   currentPage = 1,
   itemsLength = 0,
@@ -6231,7 +6377,7 @@ var PaginationComponent = function Pagination({
   }, [currentPage]);
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages2 / 1.4;
   return /* @__PURE__ */ jsxs19(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
-    pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ jsx22(
+    pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ jsx23(
       Button_default.icon,
       {
         icon: "doubleChevronLeft",
@@ -6240,8 +6386,8 @@ var PaginationComponent = function Pagination({
         onClickWithValue: setCurrentPage
       }
     ),
-    /* @__PURE__ */ jsx22(Button_default.icon, { icon: "chevronLeft", disabled: currentPageInternal === 1, onClick: onClickPreviousPageElement }),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(Button_default.icon, { icon: "chevronLeft", disabled: currentPageInternal === 1, onClick: onClickPreviousPageElement }),
+    /* @__PURE__ */ jsx23(
       Div_default.row,
       {
         alignItems: "center",
@@ -6250,14 +6396,14 @@ var PaginationComponent = function Pagination({
         gap: theme2.styles.gap,
         children: paginationItems.map((pageIndex) => {
           const isActive = currentPageInternal === pageIndex;
-          return /* @__PURE__ */ jsx22(
+          return /* @__PURE__ */ jsx23(
             Div_default,
             {
               cursor: "pointer",
               userSelect: "none",
               value: pageIndex,
               onClickWithValue: setCurrentPage,
-              children: /* @__PURE__ */ jsx22(
+              children: /* @__PURE__ */ jsx23(
                 Text_default,
                 {
                   fontWeight: isActive ? 700 : 400,
@@ -6272,7 +6418,7 @@ var PaginationComponent = function Pagination({
         })
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       Button_default.icon,
       {
         icon: "chevronRight",
@@ -6280,7 +6426,7 @@ var PaginationComponent = function Pagination({
         onClick: onClickNextPageElement
       }
     ),
-    pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ jsx22(
+    pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ jsx23(
       Button_default.icon,
       {
         icon: "doubleChevronRight",
@@ -6295,7 +6441,7 @@ var Pagination2 = memo22(PaginationComponent);
 var Pagination_default = Pagination2;
 
 // src/components/Table.tsx
-import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var defaultImageWidth = 160;
 var maximumVisiblePages = 11;
 var TableStyledComponent = styled12.table.withConfig({
@@ -6522,19 +6668,19 @@ var TableComponent = forwardRef15(function Table({
         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__ */ jsx23(Text_default, { ...textProps, children: column.format?.(item, itemIndex) ?? String(value ?? "") });
+          return /* @__PURE__ */ jsx24(Text_default, { ...textProps, children: column.format?.(item, itemIndex) ?? String(value ?? "") });
         }
         case "element": {
-          return column.render?.(item, itemIndex) ?? /* @__PURE__ */ jsx23(Fragment7, {});
+          return column.render?.(item, itemIndex) ?? /* @__PURE__ */ jsx24(Fragment9, {});
         }
         case "image": {
           const imageProps = (typeof column.getImageProps === "function" ? column.getImageProps?.(item, itemIndex) : column.getImageProps) ?? {};
-          return /* @__PURE__ */ jsx23(Image_default, { width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...imageProps });
+          return /* @__PURE__ */ jsx24(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__ */ jsx23(
+          return /* @__PURE__ */ jsx24(
             ToggleInput_default.checkbox,
             {
               checked: checkedValue,
@@ -6555,7 +6701,7 @@ var TableComponent = forwardRef15(function Table({
           );
         }
         case "expand": {
-          return /* @__PURE__ */ jsx23(Div_default, { isTabAccessed: true, children: /* @__PURE__ */ jsx23(
+          return /* @__PURE__ */ jsx24(Div_default, { isTabAccessed: true, children: /* @__PURE__ */ jsx24(
             Icon_default,
             {
               name: "chevronDown",
@@ -6565,7 +6711,7 @@ var TableComponent = forwardRef15(function Table({
           ) });
         }
         default: {
-          return /* @__PURE__ */ jsx23(Fragment7, {});
+          return /* @__PURE__ */ jsx24(Fragment9, {});
         }
       }
     },
@@ -6818,8 +6964,8 @@ var TableComponent = forwardRef15(function Table({
   }, [currentPage, setCurrentPage, pageCountInternal, setCheckedItems]);
   const withFooter = pageSize !== void 0 && pageCountInternal > 1;
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages / 1.4;
-  return /* @__PURE__ */ jsxs20(Fragment7, { children: [
-    /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs20(Fragment9, { children: [
+    /* @__PURE__ */ jsx24(
       Div_default,
       {
         border: `${theme2.styles.borderWidth}px solid ${theme2.colors.border}`,
@@ -6838,7 +6984,7 @@ var TableComponent = forwardRef15(function Table({
             containsOverflowComponents,
             withFooter,
             children: [
-              /* @__PURE__ */ jsx23("thead", { children: /* @__PURE__ */ jsx23("tr", { className: "isHeader", children: readyColumns.map((column, index) => /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24("thead", { children: /* @__PURE__ */ jsx24("tr", { className: "isHeader", children: readyColumns.map((column, index) => /* @__PURE__ */ jsx24(
                 ThStyledComponent,
                 {
                   width: column.width ?? (column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.type === "expand" ? 16 : void 0),
@@ -6853,15 +6999,15 @@ var TableComponent = forwardRef15(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__ */ jsx23(
+                        column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ jsx24(
                           ToggleInput_default.checkbox,
                           {
                             checked: everythingIsChecked,
                             disabled: data.length === 0,
                             onChange: onClickAllCheckboxesElement
                           }
-                        ) : column.label ? column.renderLabel ? column.renderLabel(column.label) : /* @__PURE__ */ jsx23(Text_default, { children: column.label }) : void 0,
-                        column.filter && /* @__PURE__ */ jsx23(
+                        ) : column.label ? column.renderLabel ? column.renderLabel(column.label) : /* @__PURE__ */ jsx24(Text_default, { children: column.label }) : void 0,
+                        column.filter && /* @__PURE__ */ jsx24(
                           Button_default.icon,
                           {
                             icon: "filter",
@@ -6876,16 +7022,16 @@ var TableComponent = forwardRef15(function Table({
                 },
                 column.type + column.label + index
               )) }) }),
-              /* @__PURE__ */ jsx23("tbody", { children: isLoading ? /* @__PURE__ */ jsx23("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx23("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ jsx23(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => {
+              /* @__PURE__ */ jsx24("tbody", { children: isLoading ? /* @__PURE__ */ jsx24("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx24("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ jsx24(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => {
                 const realRowIndex = rowIndex + (pageSize ? (currentPage - 1) * pageSize : 0);
-                return /* @__PURE__ */ jsxs20(Fragment6, { children: [
-                  /* @__PURE__ */ jsx23(
+                return /* @__PURE__ */ jsxs20(Fragment8, { children: [
+                  /* @__PURE__ */ jsx24(
                     "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__ */ jsx23(
+                      children: readyColumns.map((column, colIndex) => /* @__PURE__ */ jsx24(
                         TdStyledComponent,
                         {
                           textAlign: column.align,
@@ -6898,10 +7044,10 @@ var TableComponent = forwardRef15(function Table({
                       ))
                     }
                   ),
-                  expandedRows[realRowIndex] && /* @__PURE__ */ jsx23("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ jsx23("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, realRowIndex) }) })
+                  expandedRows[realRowIndex] && /* @__PURE__ */ jsx24("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ jsx24("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, realRowIndex) }) })
                 ] }, JSON.stringify(item) + realRowIndex);
-              }) : /* @__PURE__ */ jsx23("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx23("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ jsx23(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
-              withFooter && /* @__PURE__ */ jsx23("tfoot", { children: /* @__PURE__ */ jsx23("tr", { className: "isFooter", children: /* @__PURE__ */ jsx23("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ jsxs20(
+              }) : /* @__PURE__ */ jsx24("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx24("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ jsx24(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
+              withFooter && /* @__PURE__ */ jsx24("tfoot", { children: /* @__PURE__ */ jsx24("tr", { className: "isFooter", children: /* @__PURE__ */ jsx24("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ jsxs20(
                 Div_default.column,
                 {
                   position: "relative",
@@ -6925,7 +7071,7 @@ var TableComponent = forwardRef15(function Table({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx23(
+                    /* @__PURE__ */ jsx24(
                       Pagination_default,
                       {
                         currentPage,
@@ -6944,14 +7090,14 @@ var TableComponent = forwardRef15(function Table({
         )
       }
     ),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       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__ */ jsx23(
+        children: openedFilterColumn ? openedFilterColumn.filter === "number" ? /* @__PURE__ */ jsx24(
           Form_default,
           {
             form: filterForm,
@@ -6959,8 +7105,8 @@ var TableComponent = forwardRef15(function Table({
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
             children: /* @__PURE__ */ jsxs20(FormRow_default, { children: [
-              /* @__PURE__ */ jsx23(InputField_default, { type: "number", label: "Min", ...filterForm.getInputFieldProps("min") }),
-              /* @__PURE__ */ jsx23(InputField_default, { type: "number", label: "Max", ...filterForm.getInputFieldProps("max") })
+              /* @__PURE__ */ jsx24(InputField_default, { type: "number", label: "Min", ...filterForm.getInputFieldProps("min") }),
+              /* @__PURE__ */ jsx24(InputField_default, { type: "number", label: "Max", ...filterForm.getInputFieldProps("max") })
             ] })
           }
         ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ jsxs20(
@@ -6972,16 +7118,16 @@ var TableComponent = forwardRef15(function Table({
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
             children: [
-              /* @__PURE__ */ jsx23(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ jsxs20(Fragment7, { children: [
-                /* @__PURE__ */ jsx23(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
-                /* @__PURE__ */ jsx23(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
-              ] }) : /* @__PURE__ */ jsxs20(Fragment7, { children: [
-                /* @__PURE__ */ jsx23(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
-                /* @__PURE__ */ jsx23(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
+              /* @__PURE__ */ jsx24(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ jsxs20(Fragment9, { children: [
+                /* @__PURE__ */ jsx24(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
+                /* @__PURE__ */ jsx24(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
+              ] }) : /* @__PURE__ */ jsxs20(Fragment9, { children: [
+                /* @__PURE__ */ jsx24(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
+                /* @__PURE__ */ jsx24(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
               ] }) }),
               openedFilterColumn.presets && /* @__PURE__ */ jsxs20(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-                /* @__PURE__ */ jsx23(Label_default, { text: "Presets" }),
-                /* @__PURE__ */ jsx23(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ jsx23(
+                /* @__PURE__ */ jsx24(Label_default, { text: "Presets" }),
+                /* @__PURE__ */ jsx24(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ jsx24(
                   Button_default.secondary,
                   {
                     text: filterPresetsText[preset],
@@ -7001,7 +7147,7 @@ var TableComponent = forwardRef15(function Table({
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
             renderActionButtons: /* @__PURE__ */ jsxs20(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 Button_default.secondary,
                 {
                   text: "Select All",
@@ -7010,7 +7156,7 @@ var TableComponent = forwardRef15(function Table({
                   onClick: onClickSelectAllFilterListItems
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 Button_default.secondary,
                 {
                   text: "Deselect All",
@@ -7023,7 +7169,7 @@ var TableComponent = forwardRef15(function Table({
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
             onSubmit: filterForm.onSubmit,
             children: [
-              openedFilterColumn?.withSearch && /* @__PURE__ */ jsx23(FormRow_default, { oneItemOnly: true, children: /* @__PURE__ */ jsx23(
+              openedFilterColumn?.withSearch && /* @__PURE__ */ jsx24(FormRow_default, { oneItemOnly: true, children: /* @__PURE__ */ jsx24(
                 InputField_default.search,
                 {
                   label: "Search",
@@ -7032,17 +7178,17 @@ var TableComponent = forwardRef15(function Table({
                 }
               ) }),
               /* @__PURE__ */ jsxs20(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-                /* @__PURE__ */ jsx23(Label_default, { text: "Possible values" }),
-                /* @__PURE__ */ jsx23(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
+                /* @__PURE__ */ jsx24(Label_default, { text: "Possible values" }),
+                /* @__PURE__ */ jsx24(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
                   const isActive = filterListSelectedItems?.includes(value.value);
-                  return /* @__PURE__ */ jsx23(
+                  return /* @__PURE__ */ jsx24(
                     Div_default.box,
                     {
                       isActive,
                       value: value.value,
                       onClickWithValue: onClickFilterListItem,
                       children: /* @__PURE__ */ jsxs20(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
-                        /* @__PURE__ */ jsx23(Text_default, { children: value.label || value.value }),
+                        /* @__PURE__ */ jsx24(Text_default, { children: value.label || value.value }),
                         openedFilterColumn.withTotalNumber && /* @__PURE__ */ jsxs20(
                           Text_default,
                           {
@@ -7059,12 +7205,12 @@ var TableComponent = forwardRef15(function Table({
                     },
                     value.value.toString()
                   );
-                }) : /* @__PURE__ */ jsx23(Text_default.unknown, { children: "No values" }) })
+                }) : /* @__PURE__ */ jsx24(Text_default.unknown, { children: "No values" }) })
               ] }),
-              /* @__PURE__ */ jsx23(Div_default, {})
+              /* @__PURE__ */ jsx24(Div_default, {})
             ]
           }
-        ) : /* @__PURE__ */ jsx23(Text_default.unknown, { children: "Unknown filter" }) : /* @__PURE__ */ jsx23(Loader_default.box, {})
+        ) : /* @__PURE__ */ jsx24(Text_default.unknown, { children: "Unknown filter" }) : /* @__PURE__ */ jsx24(Loader_default.box, {})
       }
     )
   ] });
@@ -7076,7 +7222,7 @@ var Table_default = Table2;
 import { memo as memo24, useCallback as useCallback15, useRef as useRef7, useState as useState12, useEffect as useEffect13, forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo10 } from "react";
 import { useTheme as useTheme26 } from "react-better-core";
 import styled13, { css as css6 } from "styled-components";
-import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 var tooltipContainerStyle = (props) => ({
   top: css6`
       bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
@@ -7189,7 +7335,7 @@ var Arrow = memo24(function Arrow2(props) {
     [props, theme2]
   );
   const borderWidth = theme2.styles.borderWidth;
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     Div_default,
     {
       position: "absolute",
@@ -7197,7 +7343,7 @@ var Arrow = memo24(function Arrow2(props) {
       height: 0,
       border: `${size}px solid transparent`,
       ...arrowStyle(outerProps)[position],
-      children: /* @__PURE__ */ jsx24(
+      children: /* @__PURE__ */ jsx25(
         Div_default,
         {
           position: "absolute",
@@ -7327,7 +7473,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
       onMouseEnter,
       onMouseLeave,
       children: [
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           Div_default,
           {
             width: childrenWrapperWidth,
@@ -7337,7 +7483,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
             children
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           TooltipContainer,
           {
             theme: theme2,
@@ -7351,7 +7497,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
             role: "tooltip",
             ref: tooltipContainerRef,
             children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs21(Div_default, { position: "relative", ref: contentRef, children: [
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx25(
                 Div_default.box,
                 {
                   position: "relative",
@@ -7365,7 +7511,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
                   children: content
                 }
               ),
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx25(
                 Div_default,
                 {
                   position: "absolute",
@@ -7379,7 +7525,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
                   borderTopRightRadius: 999
                 }
               ),
-              withArrow && /* @__PURE__ */ jsx24(
+              withArrow && /* @__PURE__ */ jsx25(
                 Arrow,
                 {
                   position,
@@ -7429,10 +7575,10 @@ TooltipComponent.item = forwardRef16(function Item({
       onClickWithValue: !disabled ? onClickWithValue : void 0,
       ref,
       children: [
-        icon && /* @__PURE__ */ jsx24(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
+        icon && /* @__PURE__ */ jsx25(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
         /* @__PURE__ */ jsxs21(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-          /* @__PURE__ */ jsx24(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
-          description && /* @__PURE__ */ jsx24(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
+          /* @__PURE__ */ jsx25(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
+          description && /* @__PURE__ */ jsx25(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
         ] })
       ]
     }
@@ -7440,7 +7586,7 @@ TooltipComponent.item = forwardRef16(function Item({
 });
 TooltipComponent.divider = forwardRef16(function DividerComponent(props, ref) {
   const theme2 = useTheme26();
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     Divider_default.horizontal,
     {
       width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth,
@@ -7452,7 +7598,7 @@ TooltipComponent.divider = forwardRef16(function DividerComponent(props, ref) {
 });
 TooltipComponent.sectionTitle = forwardRef16(function SectionTitle({ text, ...props }, ref) {
   const theme2 = useTheme26();
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     Text_default,
     {
       fontSize: 12,
@@ -7475,7 +7621,7 @@ var Tooltip_default = Tooltip2;
 // src/components/Tabs.tsx
 import { forwardRef as forwardRef17, memo as memo25, useCallback as useCallback16, useEffect as useEffect14, useImperativeHandle as useImperativeHandle4, useMemo as useMemo11, useRef as useRef8, useState as useState13 } from "react";
 import { useTheme as useTheme27 } from "react-better-core";
-import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
 var defaultTabName = "tab";
@@ -7485,6 +7631,7 @@ var TabsComponent = forwardRef17(function Tabs({
   accentColor,
   style = "default",
   gap,
+  borderRadius,
   noBottomLine,
   keepUrlHistory = true,
   onChange,
@@ -7494,10 +7641,10 @@ var TabsComponent = forwardRef17(function Tabs({
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   const theme2 = useTheme27();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
-  const { componentsState } = useBetterHtmlContextInternal();
+  const { language, componentsState } = useBetterHtmlContextInternal();
   const firstRenderPassedRef = useRef8(false);
   const tabsRef = useRef8({});
-  const tabsGap = gap ?? (style === "box" ? theme2.styles.gap / 2 : 0);
+  const tabsGap = gap ?? (style === "box" || style === "bubble" ? theme2.styles.gap / 2 : 0);
   const [selectedTabId, setSelectedTabId] = useState13(() => {
     const selectedTabId2 = tabs[0];
     if (!selectedTabId2) return "";
@@ -7536,7 +7683,7 @@ var TabsComponent = forwardRef17(function Tabs({
       if (index < selectedTabIndex) spacing += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
     });
     return spacing;
-  }, [selectedTabId, tabs, tabsGap]);
+  }, [rerenderState, selectedTabId, tabs, tabsGap]);
   useEffect14(() => {
     const timeout = setTimeout(() => {
       setRerenderState(Math.random());
@@ -7545,7 +7692,7 @@ var TabsComponent = forwardRef17(function Tabs({
     return () => {
       clearTimeout(timeout);
     };
-  }, []);
+  }, [language]);
   useEffect14(() => {
     componentsState.tabs.setTabGroups((oldValue) => {
       const thisTabGroup = oldValue.find((item) => item.name === (name ?? defaultTabName));
@@ -7589,9 +7736,10 @@ var TabsComponent = forwardRef17(function Tabs({
       selectTab: onClickTab
     };
   }, [selectedTabId, onClickTab]);
+  const readyBorderRadius = borderRadius ?? (style === "bubble" ? theme2.styles.borderRadius : void 0);
   return /* @__PURE__ */ jsxs22(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
     /* @__PURE__ */ jsxs22(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
-      /* @__PURE__ */ jsx25(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
+      /* @__PURE__ */ jsx26(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__ */ jsxs22(
           Div_default,
@@ -7599,8 +7747,9 @@ var TabsComponent = forwardRef17(function Tabs({
             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,
@@ -7616,7 +7765,7 @@ var TabsComponent = forwardRef17(function Tabs({
               tabsRef.current[tab.id] = ref2;
             },
             children: [
-              componentsState.tabs.tabsWithDots.includes(tab.id) && /* @__PURE__ */ jsx25(
+              componentsState.tabs.tabsWithDots.includes(tab.id) && /* @__PURE__ */ jsx26(
                 Div_default,
                 {
                   position: "absolute",
@@ -7629,11 +7778,11 @@ var TabsComponent = forwardRef17(function Tabs({
                   transition: theme2.styles.transition
                 }
               ),
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx26(
                 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
@@ -7644,7 +7793,20 @@ var TabsComponent = forwardRef17(function Tabs({
           tab.id
         );
       }) }),
-      style !== "box" && !noBottomLine && /* @__PURE__ */ jsx25(
+      style !== "box" && !noBottomLine && (style === "bubble" ? /* @__PURE__ */ jsx26(
+        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__ */ jsx26(
         Div_default,
         {
           position: "absolute",
@@ -7653,11 +7815,12 @@ var TabsComponent = forwardRef17(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__ */ jsx25(Div_default, { width: "100%", children })
+    children && /* @__PURE__ */ jsx26(Div_default, { width: "100%", children })
   ] });
 });
 TabsComponent.content = function Content({ tabId, tabWithDot, tabsGroupName, isInitialTab, children }) {
@@ -7677,7 +7840,7 @@ TabsComponent.content = function Content({ tabId, tabWithDot, tabsGroupName, isI
       );
     }
   }, [tabWithDot]);
-  return (thisTabGroupData ? thisTabGroupData.selectedTab === tabId : isInitialTab) ? /* @__PURE__ */ jsx25(Div_default, { width: "100%", children }) : void 0;
+  return (thisTabGroupData ? thisTabGroupData.selectedTab === tabId : isInitialTab) ? /* @__PURE__ */ jsx26(Div_default, { width: "100%", children }) : void 0;
 };
 var Tabs2 = memo25(TabsComponent);
 Tabs2.content = TabsComponent.content;
@@ -7686,12 +7849,13 @@ var Tabs_default = Tabs2;
 // src/components/Foldable.tsx
 import { forwardRef as forwardRef18, memo as memo26, useCallback as useCallback17, useEffect as useEffect15, useImperativeHandle as useImperativeHandle5, useRef as useRef9, useState as useState14 } from "react";
 import { useBooleanState as useBooleanState7, useTheme as useTheme28 } from "react-better-core";
-import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
 var FoldableComponent = forwardRef18(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
+  withoutLine,
   icon,
   iconColor,
   iconSize,
@@ -7766,7 +7930,7 @@ var FoldableComponent = forwardRef18(function Foldable({
       isOpen
     };
   }, [open, close, toggleOpen, isOpen]);
-  const arrow = /* @__PURE__ */ jsx26(Icon_default, { name: "chevronDown", transform: `rotate(${isOpen ? 180 : 0}deg)`, transition: theme2.styles.transition });
+  const arrow = /* @__PURE__ */ jsx27(Icon_default, { name: "chevronDown", transform: `rotate(${isOpen ? 180 : 0}deg)`, transition: theme2.styles.transition });
   return /* @__PURE__ */ jsxs23(Div_default.column, { width: "100%", ...props, children: [
     renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs23(
       Div_default.row,
@@ -7781,7 +7945,7 @@ var FoldableComponent = forwardRef18(function Foldable({
         userSelect: "none",
         children: [
           arrowPosition === "left" && arrow,
-          /* @__PURE__ */ jsx26(Div_default, { flex: 1, children: /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(Div_default, { flex: 1, children: /* @__PURE__ */ jsx27(
             PageHeader_default,
             {
               icon,
@@ -7809,8 +7973,8 @@ var FoldableComponent = forwardRef18(function Foldable({
         ]
       }
     ),
-    /* @__PURE__ */ jsx26(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx26(Divider_default.horizontal, { width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth }) }),
-    /* @__PURE__ */ jsx26(
+    !withoutLine && /* @__PURE__ */ jsx27(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx27(Divider_default.horizontal, { width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth }) }),
+    /* @__PURE__ */ jsx27(
       Div_default,
       {
         maxHeight: isOpen ? bodyVirtualHeight : 0,
@@ -7819,14 +7983,14 @@ var FoldableComponent = forwardRef18(function Foldable({
         overflow: !isOpen ? "hidden" : void 0,
         pointerEvents: !isOpen ? "none" : void 0,
         ref: bodyRef,
-        children: /* @__PURE__ */ jsx26(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
+        children: /* @__PURE__ */ jsx27(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
       }
     )
   ] });
 });
 FoldableComponent.box = forwardRef18(function Box3({ ...props }, ref) {
   const theme2 = useTheme28();
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     FoldableComponent,
     {
       backgroundColor: theme2.colors.backgroundContent,
@@ -7852,7 +8016,7 @@ import {
   useBooleanState as useBooleanState8,
   useTheme as useTheme29
 } from "react-better-core";
-import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 var tabDotSize2 = 6;
 var sideMenuContext = createContext2(void 0);
 var SideMenuContextProvider = sideMenuContext.Provider;
@@ -7904,12 +8068,12 @@ var MenuItemTypeItem = memo27(function MenuItemTypeItem2({
   const lineWidth = 2;
   const lineEndRadius = iconSize / 2 + iconGap * 2;
   const backgroundColorContrast = activeItemColor ? calculateColorContrast(activeItemColor, theme2.colors.primary) : 21;
-  const content = /* @__PURE__ */ jsx27(
+  const content = /* @__PURE__ */ jsx28(
     Tooltip_default,
     {
       content: /* @__PURE__ */ jsxs24(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-        /* @__PURE__ */ jsx27(Text_default, { whiteSpace: "nowrap", children: item.text }),
-        item.children && /* @__PURE__ */ jsx27(Icon_default, { name: "chevronDown", color: theme2.colors.textSecondary, size: 14 })
+        /* @__PURE__ */ jsx28(Text_default, { whiteSpace: "nowrap", children: item.text }),
+        item.children && /* @__PURE__ */ jsx28(Icon_default, { name: "chevronDown", color: theme2.colors.textSecondary, size: 14 })
       ] }),
       contentPointerEvents: "none",
       withArrow: true,
@@ -7934,7 +8098,7 @@ var MenuItemTypeItem = memo27(function MenuItemTypeItem2({
           opacity: item.disabled ? 0.6 : void 0,
           onClick: onClickElement,
           children: [
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx28(
               Icon_default,
               {
                 name: item.iconName,
@@ -7943,7 +8107,7 @@ var MenuItemTypeItem = memo27(function MenuItemTypeItem2({
                 flexShrink: 0
               }
             ),
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx28(
               Text_default,
               {
                 flex: 1,
@@ -7954,7 +8118,7 @@ var MenuItemTypeItem = memo27(function MenuItemTypeItem2({
                 children: item.text
               }
             ),
-            item.children && /* @__PURE__ */ jsx27(
+            item.children && /* @__PURE__ */ jsx28(
               Icon_default,
               {
                 name: "chevronDown",
@@ -7964,7 +8128,7 @@ var MenuItemTypeItem = memo27(function MenuItemTypeItem2({
                 transition: theme2.styles.transition
               }
             ),
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx28(
               Div_default,
               {
                 position: "absolute",
@@ -8006,8 +8170,8 @@ var MenuItemTypeItem = memo27(function MenuItemTypeItem2({
     setIsOpened.setFalse();
   }, [isCollapsed]);
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
-  return /* @__PURE__ */ jsxs24(Fragment8, { children: [
-    item.href ? /* @__PURE__ */ jsx27(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
+  return /* @__PURE__ */ jsxs24(Fragment10, { children: [
+    item.href ? /* @__PURE__ */ jsx28(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
     item.children && /* @__PURE__ */ jsxs24(
       Div_default.column,
       {
@@ -8019,7 +8183,7 @@ var MenuItemTypeItem = memo27(function MenuItemTypeItem2({
         overflow: "hidden",
         transition: `max-height ${theme2.styles.transition}, margin-top ${theme2.styles.transition}`,
         children: [
-          item.children.map((child) => /* @__PURE__ */ jsx27(
+          item.children.map((child) => /* @__PURE__ */ jsx28(
             MenuItemComponent,
             {
               item: child,
@@ -8038,7 +8202,7 @@ var MenuItemTypeItem = memo27(function MenuItemTypeItem2({
               left: paddingLeft + iconSize / 2,
               zIndex: -1,
               children: [
-                /* @__PURE__ */ jsx27(
+                /* @__PURE__ */ jsx28(
                   Div_default,
                   {
                     position: "relative",
@@ -8048,7 +8212,7 @@ var MenuItemTypeItem = memo27(function MenuItemTypeItem2({
                     zIndex: 1
                   }
                 ),
-                /* @__PURE__ */ jsx27(
+                /* @__PURE__ */ jsx28(
                   Div_default,
                   {
                     position: "absolute",
@@ -8078,7 +8242,7 @@ var MenuItemTypeDivider = memo27(function MenuItemTypeDivider2({ item }) {
   const { items } = useSideMenuContext();
   const isCollapsed = sideMenuIsCollapsed && !item.shortText;
   const isFirst = items[0]?.type === item.type && items[0]?.text === item.text;
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     Div_default.row,
     {
       maxHeight: !isCollapsed ? 30 : theme2.styles.gap + 1,
@@ -8086,7 +8250,7 @@ var MenuItemTypeDivider = memo27(function MenuItemTypeDivider2({ item }) {
       paddingInline: theme2.styles.gap,
       overflow: "hidden",
       transition: `max-height ${theme2.styles.transition}, padding-top ${theme2.styles.transition}`,
-      children: sideMenuIsCollapsed && item.shortText || !sideMenuIsCollapsed ? /* @__PURE__ */ jsx27(
+      children: sideMenuIsCollapsed && item.shortText || !sideMenuIsCollapsed ? /* @__PURE__ */ jsx28(
         Text_default,
         {
           width: "100%",
@@ -8098,17 +8262,18 @@ var MenuItemTypeDivider = memo27(function MenuItemTypeDivider2({ item }) {
           whiteSpace: "nowrap",
           children: sideMenuIsCollapsed ? item.shortText : item.text
         }
-      ) : !isFirst ? /* @__PURE__ */ jsx27(Divider_default.horizontal, {}) : void 0
+      ) : !isFirst ? /* @__PURE__ */ jsx28(Divider_default.horizontal, {}) : void 0
     }
   );
 });
 var MenuItemComponent = memo27(function MenuItemComponent2({ item, ...props }) {
-  return /* @__PURE__ */ jsx27(Div_default, { width: "100%", children: item.type === "item" ? /* @__PURE__ */ jsx27(MenuItemTypeItem, { item, ...props }) : item.type === "divider" ? /* @__PURE__ */ jsx27(MenuItemTypeDivider, { item }) : void 0 });
+  return /* @__PURE__ */ jsx28(Div_default, { width: "100%", children: item.type === "item" ? /* @__PURE__ */ jsx28(MenuItemTypeItem, { item, ...props }) : item.type === "divider" ? /* @__PURE__ */ jsx28(MenuItemTypeDivider, { item }) : void 0 });
 });
 var SideMenuComponent = function SideMenu({
   items,
   bottomItems,
   location,
+  position = "left",
   topSpace = 0,
   logoAssetName,
   logoUrl,
@@ -8121,6 +8286,7 @@ var SideMenuComponent = function SideMenu({
   itemsAdditionalComponent,
   betweenItemsAdditionalComponent,
   bottomItemsAdditionalComponent,
+  border,
   isLoading,
   backgroundColor,
   activeItemColor,
@@ -8129,8 +8295,10 @@ var SideMenuComponent = function SideMenu({
   paddingTop,
   paddingBottom,
   mobileFoldToPosition = "left",
+  sideBar,
   renderItemsHolder,
-  renderBottomItemsHolder
+  renderBottomItemsHolder,
+  children
 }) {
   const theme2 = useTheme29();
   const mediaQuery = useMediaQuery();
@@ -8148,24 +8316,28 @@ var SideMenuComponent = function SideMenu({
       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;
+  const readyBorder = border ?? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`;
+  const readyTransition = mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition;
   useEffect16(() => {
     setItemsState(items);
   }, [items]);
   useEffect16(() => {
     setBottomItemsState(bottomItems);
   }, [bottomItems]);
-  const itemsComponent = /* @__PURE__ */ jsx27(
+  const itemsComponent = /* @__PURE__ */ jsx28(
     Div_default.column,
     {
       width: "100%",
@@ -8173,7 +8345,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__ */ jsx27(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ jsx27(
+      children: /* @__PURE__ */ jsx28(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ jsx28(
         MenuItemComponent,
         {
           item,
@@ -8183,11 +8355,11 @@ var SideMenuComponent = function SideMenu({
           location,
           onClick: onClickXButton
         },
-        item.text
+        item.type + item.text
       )) })
     }
   );
-  const bottomItemsComponent = /* @__PURE__ */ jsx27(
+  const bottomItemsComponent = /* @__PURE__ */ jsx28(
     Div_default.column,
     {
       borderTop: mediaQuery.size1000 ? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
@@ -8196,7 +8368,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__ */ jsx27(
+      children: readyBottomItems?.map((item) => /* @__PURE__ */ jsx28(
         MenuItemComponent,
         {
           item,
@@ -8206,143 +8378,172 @@ var SideMenuComponent = function SideMenu({
           location,
           onClick: onClickXButton
         },
-        item.text
+        item.type + item.text
       ))
     }
   );
-  return /* @__PURE__ */ jsx27(SideMenuContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs24(
-    Div_default.column,
+  const sideBarComponent = sideBar ? /* @__PURE__ */ jsx28(
+    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__ */ jsxs24(Div_default.column, { width: "100%", height: "100%", gap: gap ?? theme2.styles.space, children: [
-          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ jsxs24(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
-            (logoAssetName || logoUrl) && /* @__PURE__ */ jsx27(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ jsxs24(
-              Div_default.row,
-              {
-                alignItems: "center",
-                width: sideMenuCollapsedWidth ? logoSize : void 0,
-                height: logoSize,
-                whiteSpace: "nowrap",
-                gap: theme2.styles.gap,
-                children: [
-                  /* @__PURE__ */ jsx27(
-                    Image_default,
-                    {
-                      name: logoAssetName,
-                      src: logoUrl,
-                      width: logoSize,
-                      height: logoSize,
-                      objectFit: "contain"
-                    }
-                  ),
-                  logoText && /* @__PURE__ */ jsx27(
-                    Text_default,
-                    {
-                      fontFamily: logoFontFamily,
-                      fontSize: 22,
-                      fontWeight: 800,
-                      opacity: !isCollapsed ? 1 : 0,
-                      transition: theme2.styles.transition,
-                      userSelect: "none",
-                      children: logoText
-                    }
-                  )
-                ]
-              }
-            ) }),
-            withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ jsx27(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
-          ] }),
-          itemsAdditionalComponent,
-          !isLoading ? /* @__PURE__ */ jsxs24(Fragment8, { children: [
-            renderItemsHolder ? renderItemsHolder(itemsComponent) : itemsComponent,
-            betweenItemsAdditionalComponent,
-            readyBottomItems && /* @__PURE__ */ jsx27(Fragment8, { children: renderBottomItemsHolder ? renderBottomItemsHolder(bottomItemsComponent) : bottomItemsComponent })
-          ] }) : /* @__PURE__ */ jsx27(Div_default, { flex: 1, children: /* @__PURE__ */ jsx27(Loader_default.box, { text: isCollapsed ? "" : void 0 }) }),
-          bottomItemsAdditionalComponent,
-          isCollapsable && /* @__PURE__ */ jsx27(
-            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__ */ jsxs24(SideMenuContextProvider, { value: contextValue, children: [
+    /* @__PURE__ */ jsxs24(
+      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__ */ jsxs24(
+            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__ */ jsx27(
-                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__ */ jsx27(
-                    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__ */ jsxs24(Div_default.column, { width: "100%", height: "100%", gap: gap ?? theme2.styles.space, children: [
+                  (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ jsxs24(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
+                    (logoAssetName || logoUrl) && /* @__PURE__ */ jsx28(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ jsxs24(
+                      Div_default.row,
+                      {
+                        alignItems: "center",
+                        width: sideMenuCollapsedWidth ? logoSize : void 0,
+                        height: logoSize,
+                        whiteSpace: "nowrap",
+                        gap: theme2.styles.gap,
+                        children: [
+                          /* @__PURE__ */ jsx28(
+                            Image_default,
+                            {
+                              name: logoAssetName,
+                              src: logoUrl,
+                              width: logoSize,
+                              height: logoSize,
+                              objectFit: "contain"
+                            }
+                          ),
+                          logoText && /* @__PURE__ */ jsx28(
+                            Text_default,
+                            {
+                              fontFamily: logoFontFamily,
+                              fontSize: 22,
+                              fontWeight: 800,
+                              opacity: !isCollapsed ? 1 : 0,
+                              transition: theme2.styles.transition,
+                              userSelect: "none",
+                              children: logoText
+                            }
+                          )
+                        ]
+                      }
+                    ) }),
+                    withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ jsx28(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
+                  ] }),
+                  itemsAdditionalComponent,
+                  !isLoading ? /* @__PURE__ */ jsxs24(Fragment10, { children: [
+                    renderItemsHolder ? renderItemsHolder(itemsComponent) : itemsComponent,
+                    betweenItemsAdditionalComponent,
+                    readyBottomItems && /* @__PURE__ */ jsx28(Fragment10, { children: renderBottomItemsHolder ? renderBottomItemsHolder(bottomItemsComponent) : bottomItemsComponent })
+                  ] }) : /* @__PURE__ */ jsx28(Div_default, { flex: 1, children: /* @__PURE__ */ jsx28(Loader_default.box, { text: isCollapsed ? "" : void 0 }) }),
+                  bottomItemsAdditionalComponent,
+                  isCollapsable && /* @__PURE__ */ jsx28(
+                    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__ */ jsx28(
+                        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__ */ jsx28(
+                            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__ */ jsx28(
+                  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__ */ jsx28(
+                      Icon_default,
+                      {
+                        name: "chevronRight",
+                        size: 20,
+                        color: theme2.colors.textSecondary,
+                        transform: sideMenuIsOpenMobile ? "rotate(180deg)" : void 0,
+                        transition: theme2.styles.transition
+                      }
+                    )
+                  }
+                ),
+                absoluteComponent && /* @__PURE__ */ jsx28(Div_default, { position: "absolute", top: 0, left: 0, pointerEvents: "none", zIndex: 2, children: /* @__PURE__ */ jsx28(Div_default, { pointerEvents: "all", children: absoluteComponent }) })
+              ]
             }
-          )
-        ] }),
-        widthMobileHandle && /* @__PURE__ */ jsx27(
-          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__ */ jsx27(
-              Icon_default,
-              {
-                name: "chevronRight",
-                size: 20,
-                color: theme2.colors.textSecondary,
-                transform: sideMenuIsOpenMobile ? "rotate(180deg)" : void 0,
-                transition: theme2.styles.transition
-              }
-            )
-          }
-        ),
-        absoluteComponent && /* @__PURE__ */ jsx27(Div_default, { position: "absolute", top: 0, left: 0, pointerEvents: "none", zIndex: 2, children: /* @__PURE__ */ jsx27(Div_default, { pointerEvents: "all", children: absoluteComponent }) })
-      ]
-    }
-  ) });
+          ),
+          position === "right" && sideBarComponent
+        ]
+      }
+    ),
+    children
+  ] });
 };
 SideMenuComponent.pageHolder = function SideMenuPageHolder({
   additionalTopComponent,
@@ -8352,18 +8553,21 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({
   const theme2 = useTheme29();
   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;
+  const sideSpace = !mediaQuery.size1000 ? !sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth : void 0;
   return /* @__PURE__ */ jsxs24(
     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__ */ jsx27(PageHolder_default, { ...props }),
+        /* @__PURE__ */ jsx28(PageHolder_default, { ...props }),
         additionalBottomComponent
       ]
     }
@@ -8390,7 +8594,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
       onMouseOut: setIsHovered.setFalse,
       onClick: onClickElement,
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28(
           Div_default,
           {
             position: "absolute",
@@ -8405,7 +8609,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
             transition: theme2.styles.transition
           }
         ),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28(
           Div_default,
           {
             position: "absolute",
@@ -8421,7 +8625,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
             transition: theme2.styles.transition
           }
         ),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28(
           Div_default,
           {
             position: "absolute",
@@ -8487,6 +8691,7 @@ export {
   formatPhoneNumber,
   generateApi,
   generateEventEmitter,
+  generateI18n,
   generateLocalStorage,
   generateRandomString,
   getBrowser,