react-better-html 1.1.244 → 1.1.245

package/dist/index.d.mts

@@ -416,6 +416,24 @@ type LabelProps = {
 declare function Label(labelProps: LabelProps): react_jsx_runtime.JSX.Element;
 declare const _default$3: react.MemoExoticComponent<typeof Label>;
 
+type ImageProps = {
+    name?: AssetName | AnyOtherString;
+} & OmitProps<React.ComponentProps<"img">, "style"> & ComponentStyle & ComponentHoverStyle;
+type ImageComponent = {
+    (props: ComponentPropWithRef<HTMLImageElement, ImageProps>): React.ReactElement;
+    profileImage: (props: ComponentPropWithRef<HTMLImageElement, OmitProps<ImageProps, "width" | "height"> & {
+        /** @default 40 */
+        size?: number;
+        letters?: string;
+        letterColor?: string;
+        backgroundColor?: string;
+    }>) => React.ReactElement;
+};
+declare const Image: ImageComponent;
+declare const _default$2: ImageComponent & {
+    profileImage: typeof Image.profileImage;
+};
+
 type ComponentStyleConfig<ComponentProps, Subcomponents extends string> = {
     [key in Subcomponents]?: Partial<ComponentProps>;
 };
@@ -452,6 +470,9 @@ type BetterHtmlConfig = {
                 horizontal?: HorizontalDividerProps;
             };
         };
+        image?: {
+            style?: ComponentStyleConfig<ImageProps, "default" | "profileImage">;
+        };
         sideMenu?: {
             /** @default 300 */
             width?: number;
@@ -521,7 +542,7 @@ type BetterHtmlProviderProps = BetterProviderCommonProps & {
     config?: BetterHtmlProviderConfig;
 };
 declare function BetterHtmlProvider({ config, ...props }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
-declare const _default$2: react.MemoExoticComponent<typeof BetterHtmlProvider>;
+declare const _default$1: react.MemoExoticComponent<typeof BetterHtmlProvider>;
 
 declare const isMobileDevice: boolean;
 
@@ -652,25 +673,7 @@ type IconProps = {
 type IconComponent = {
     (props: ComponentPropWithRef<SVGSVGElement, IconProps>): React.ReactElement;
 };
-declare const _default$1: IconComponent;
-
-type ImageProps = {
-    name?: AssetName | AnyOtherString;
-} & OmitProps<React.ComponentProps<"img">, "style"> & ComponentStyle & ComponentHoverStyle;
-type ImageComponent = {
-    (props: ComponentPropWithRef<HTMLImageElement, ImageProps>): React.ReactElement;
-    profileImage: (props: ComponentPropWithRef<HTMLImageElement, OmitProps<ImageProps, "width" | "height"> & {
-        /** @default 40 */
-        size?: number;
-        letters?: string;
-        letterColor?: string;
-        backgroundColor?: string;
-    }>) => React.ReactElement;
-};
-declare const Image: ImageComponent;
-declare const _default: ImageComponent & {
-    profileImage: typeof Image.profileImage;
-};
+declare const _default: IconComponent;
 
 type ModalProps = {
     /**
@@ -1099,12 +1102,17 @@ type SideMenuProps = {
 type SideMenuComponentType = {
     (props: SideMenuProps): React.ReactElement;
     pageHolder: (props: SideMenuPageHolderProps) => React.ReactElement;
-    burgerButton: () => React.ReactElement;
+    burgerButton: (props: BurgerButtonProps) => React.ReactElement;
 };
 declare const SideMenuComponent: SideMenuComponentType;
 type SideMenuPageHolderProps = PageHolderProps & {
     outsideComponent?: React.ReactNode;
 };
+type BurgerButtonProps = {
+    /** @default "left" */
+    position?: "left" | "center" | "right";
+    onClick?: (isOpened: boolean) => void;
+};
 declare const SideMenu: typeof SideMenuComponent & {
     pageHolder: typeof SideMenuComponent.pageHolder;
     burgerButton: typeof SideMenuComponent.burgerButton;
@@ -1169,4 +1177,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$2 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$1 as Icon, type IconProps, _default as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };
+export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$1 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, type BurgerButtonProps, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };

package/dist/index.d.ts

@@ -416,6 +416,24 @@ type LabelProps = {
 declare function Label(labelProps: LabelProps): react_jsx_runtime.JSX.Element;
 declare const _default$3: react.MemoExoticComponent<typeof Label>;
 
+type ImageProps = {
+    name?: AssetName | AnyOtherString;
+} & OmitProps<React.ComponentProps<"img">, "style"> & ComponentStyle & ComponentHoverStyle;
+type ImageComponent = {
+    (props: ComponentPropWithRef<HTMLImageElement, ImageProps>): React.ReactElement;
+    profileImage: (props: ComponentPropWithRef<HTMLImageElement, OmitProps<ImageProps, "width" | "height"> & {
+        /** @default 40 */
+        size?: number;
+        letters?: string;
+        letterColor?: string;
+        backgroundColor?: string;
+    }>) => React.ReactElement;
+};
+declare const Image: ImageComponent;
+declare const _default$2: ImageComponent & {
+    profileImage: typeof Image.profileImage;
+};
+
 type ComponentStyleConfig<ComponentProps, Subcomponents extends string> = {
     [key in Subcomponents]?: Partial<ComponentProps>;
 };
@@ -452,6 +470,9 @@ type BetterHtmlConfig = {
                 horizontal?: HorizontalDividerProps;
             };
         };
+        image?: {
+            style?: ComponentStyleConfig<ImageProps, "default" | "profileImage">;
+        };
         sideMenu?: {
             /** @default 300 */
             width?: number;
@@ -521,7 +542,7 @@ type BetterHtmlProviderProps = BetterProviderCommonProps & {
     config?: BetterHtmlProviderConfig;
 };
 declare function BetterHtmlProvider({ config, ...props }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
-declare const _default$2: react.MemoExoticComponent<typeof BetterHtmlProvider>;
+declare const _default$1: react.MemoExoticComponent<typeof BetterHtmlProvider>;
 
 declare const isMobileDevice: boolean;
 
@@ -652,25 +673,7 @@ type IconProps = {
 type IconComponent = {
     (props: ComponentPropWithRef<SVGSVGElement, IconProps>): React.ReactElement;
 };
-declare const _default$1: IconComponent;
-
-type ImageProps = {
-    name?: AssetName | AnyOtherString;
-} & OmitProps<React.ComponentProps<"img">, "style"> & ComponentStyle & ComponentHoverStyle;
-type ImageComponent = {
-    (props: ComponentPropWithRef<HTMLImageElement, ImageProps>): React.ReactElement;
-    profileImage: (props: ComponentPropWithRef<HTMLImageElement, OmitProps<ImageProps, "width" | "height"> & {
-        /** @default 40 */
-        size?: number;
-        letters?: string;
-        letterColor?: string;
-        backgroundColor?: string;
-    }>) => React.ReactElement;
-};
-declare const Image: ImageComponent;
-declare const _default: ImageComponent & {
-    profileImage: typeof Image.profileImage;
-};
+declare const _default: IconComponent;
 
 type ModalProps = {
     /**
@@ -1099,12 +1102,17 @@ type SideMenuProps = {
 type SideMenuComponentType = {
     (props: SideMenuProps): React.ReactElement;
     pageHolder: (props: SideMenuPageHolderProps) => React.ReactElement;
-    burgerButton: () => React.ReactElement;
+    burgerButton: (props: BurgerButtonProps) => React.ReactElement;
 };
 declare const SideMenuComponent: SideMenuComponentType;
 type SideMenuPageHolderProps = PageHolderProps & {
     outsideComponent?: React.ReactNode;
 };
+type BurgerButtonProps = {
+    /** @default "left" */
+    position?: "left" | "center" | "right";
+    onClick?: (isOpened: boolean) => void;
+};
 declare const SideMenu: typeof SideMenuComponent & {
     pageHolder: typeof SideMenuComponent.pageHolder;
     burgerButton: typeof SideMenuComponent.burgerButton;
@@ -1169,4 +1177,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$2 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$1 as Icon, type IconProps, _default as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };
+export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$1 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, type BurgerButtonProps, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };

package/dist/index.js

@@ -1379,6 +1379,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var TextStyledComponent = import_styled_components.default.p.withConfig({
   shouldForwardProp: (prop) => !["style", "hoverStyle"].includes(prop)
 })`
+   font-size: ${(props) => props.theme.styles.fontSize}px;
+
    ${(props) => props.style}
 
    &:hover {
@@ -1386,6 +1388,7 @@ var TextStyledComponent = import_styled_components.default.p.withConfig({
    }
 `;
 var TextComponent = (0, import_react2.forwardRef)(function Text({ htmlContentTranslate, children, ...props }, ref) {
+  const theme2 = (0, import_react_better_core2.useTheme)();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
@@ -1393,6 +1396,7 @@ var TextComponent = (0, import_react2.forwardRef)(function Text({ htmlContentTra
     TextStyledComponent,
     {
       as: props.as,
+      theme: theme2,
       translate: htmlContentTranslate,
       style,
       hoverStyle,
@@ -1500,7 +1504,12 @@ var ImageElement = import_styled_components2.default.img.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var Image = (0, import_react4.forwardRef)(function Image2({ name, src, ...props }, ref) {
+var Image = (0, import_react4.forwardRef)(function Image2(ImageProps3, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { name, src, ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.image?.style?.default,
+    ImageProps3
+  );
   const { assets: assets2 } = (0, import_react_better_core4.useBetterCoreContext)();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
@@ -1525,7 +1534,9 @@ var Image = (0, import_react4.forwardRef)(function Image2({ name, src, ...props
     }
   );
 });
-Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size = 40, letters, letterColor, backgroundColor, ...props }, ref) {
+Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size = 40, letters, letterColor, backgroundColor, ...ImageProps3 }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(betterHtmlContextInternal.components.image?.style?.default, ImageProps3);
   const theme2 = (0, import_react_better_core4.useTheme)();
   return letters ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Div_default.row,
@@ -2112,8 +2123,8 @@ var ButtonElement = import_styled_components6.default.button.withConfig({
    width: fit-content;
    min-width: max-content;
    font-family: ${(props) => props.theme.styles.fontFamily};
-   font-size: 16px;
-   line-height: 20px;
+   font-size: ${(props) => props.theme.styles.fontSize}px;
+   line-height: ${(props) => props.theme.styles.fontSize + 4}px;
    text-decoration: none;
    color: ${(props) => props.theme.colors.base};
    background-color: ${(props) => props.theme.colors.primary};
@@ -2204,7 +2215,7 @@ var ButtonComponent = function Button(buttonProps) {
   const iconComponent = icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Div_default.row,
     {
-      height: iconSize ?? parseInt(style.fontSize?.toString() ?? "16"),
+      height: iconSize ?? parseInt(style.fontSize?.toString() ?? theme2.styles.fontSize.toString()),
       alignItems: "center",
       justifyContent: "center",
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -2212,7 +2223,7 @@ var ButtonComponent = function Button(buttonProps) {
         {
           name: icon,
           color: iconColor ?? props.color ?? theme2.colors.base,
-          size: iconSize ?? parseInt(style.fontSize?.toString() ?? "16")
+          size: iconSize ?? parseInt(style.fontSize?.toString() ?? theme2.styles.fontSize.toString())
         }
       )
     }
@@ -2222,7 +2233,7 @@ var ButtonComponent = function Button(buttonProps) {
     {
       name: image,
       color: iconColor ?? props.color ?? theme2.colors.base,
-      width: imageWidth ?? parseInt(style.fontSize?.toString() ?? "16"),
+      width: imageWidth ?? parseInt(style.fontSize?.toString() ?? theme2.styles.fontSize.toString()),
       height: imageHeight
     }
   ) : void 0;
@@ -3007,7 +3018,7 @@ function Alert2({ alert }) {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { fontSize: 18, fontWeight: 700, children: alertTitle }),
-            alert.message && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { color: theme2.colors.textSecondary, children: alert.message })
+            alert.message && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { fontSize: theme2.styles.fontSize, color: theme2.colors.textSecondary, children: alert.message })
           ] }),
           pluginConfig.withCloseButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button_default.icon, { icon: "XMark", alignSelf: "flex-start", onClick: onClickCloseAlert })
         ] }),
@@ -4310,8 +4321,8 @@ var InputElement = import_styled_components11.default.input.withConfig({
    position: relative;
    width: 100%;
    font-family: ${(props) => props.theme.styles.fontFamily};
-   font-size: 16px;
-   line-height: 20px;
+   font-size: ${(props) => props.theme.styles.fontSize}px;
+   line-height: ${(props) => props.theme.styles.fontSize + 4}px;
    color: ${(props) => props.theme.colors.textPrimary};
    background: ${(props) => props.theme.colors.backgroundContent};
    border: ${(props) => props.theme.styles.borderWidth}px solid ${(props) => props.theme.colors.border};
@@ -4437,8 +4448,8 @@ var TextareaElement = import_styled_components11.default.textarea.withConfig({
    min-height: 3lh;
    max-height: 8lh;
    font-family: ${(props) => props.theme.styles.fontFamily};
-   font-size: 16px;
-   line-height: 20px;
+   font-size: ${(props) => props.theme.styles.fontSize}px;
+   line-height: ${(props) => props.theme.styles.fontSize + 4}px;
    color: ${(props) => props.theme.colors.textPrimary};
    background: ${(props) => props.theme.colors.backgroundContent};
    border: ${(props) => props.theme.styles.borderWidth}px solid ${(props) => props.theme.colors.border};
@@ -5706,7 +5717,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
           onClick: onClickText,
           children: [
             text,
-            required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+            required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, children: [
               " ",
               "*"
             ] })
@@ -5714,7 +5725,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
         }
       ) : textAdvanced ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         textAdvanced,
-        required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, marginLeft: 4, children: [
+        required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, marginLeft: 4, children: [
           " ",
           "*"
         ] })
@@ -5975,12 +5986,12 @@ FormRowComponent.withTitle = (0, import_react24.forwardRef)(function WithTitle({
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Text_default, { as: titleAs, fontSize: titleFontSize, children: [
           title,
-          required && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+          required && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, children: [
             " ",
             "*"
           ] })
         ] }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { fontSize: descriptionFontSize, color: theme2.colors.textSecondary, children: description })
+        description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { fontSize: descriptionFontSize ?? theme2.styles.fontSize, color: theme2.colors.textSecondary, children: description })
       ] }),
       isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default, { width: 26 - titleGap })
     ] }),
@@ -8183,10 +8194,14 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
     }
   );
 };
-SideMenuComponent.burgerButton = function BurgerButton() {
+SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onClick }) {
   const theme2 = (0, import_react_better_core29.useTheme)();
   const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [isHovered, setIsHovered] = (0, import_react_better_core29.useBooleanState)();
+  const onClickElement = (0, import_react31.useCallback)(() => {
+    setSideMenuIsOpenMobile.toggle();
+    onClick?.(!sideMenuIsOpenMobile);
+  }, [onClick, sideMenuIsOpenMobile]);
   const width = 2;
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Div_default,
@@ -8198,7 +8213,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
       onMouseOver: setIsHovered.setTrue,
       onMouseLeave: setIsHovered.setFalse,
       onMouseOut: setIsHovered.setFalse,
-      onClick: setSideMenuIsOpenMobile.toggle,
+      onClick: onClickElement,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           Div_default,
@@ -8207,10 +8222,11 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             width: isHovered || sideMenuIsOpenMobile ? "100%" : "50%",
             height: width,
             top: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
-            left: 0,
+            left: position === "left" ? 0 : position === "center" ? sideMenuIsOpenMobile ? 0 : "50%" : "auto",
+            right: position === "right" ? 0 : void 0,
             backgroundColor: theme2.colors.border,
             borderRadius: 999,
-            transform: sideMenuIsOpenMobile ? "rotate(45deg)" : void 0,
+            transform: sideMenuIsOpenMobile ? "rotate(45deg)" : position === "center" ? "translateX(-50%)" : void 0,
             transition: theme2.styles.transition
           }
         ),
@@ -8221,10 +8237,11 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             width: isHovered ? "100%" : "100%",
             height: width,
             top: "50%",
-            left: 0,
+            left: position === "left" ? 0 : position === "center" ? "50%" : "auto",
+            right: position === "right" ? 0 : void 0,
             backgroundColor: theme2.colors.border,
             borderRadius: 999,
-            transform: "translateY(-50%)",
+            transform: `translateY(-50%)${position === "center" ? " translateX(-50%)" : ""}`,
             opacity: sideMenuIsOpenMobile ? 0 : void 0,
             transition: theme2.styles.transition
           }
@@ -8236,10 +8253,11 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             width: isHovered || sideMenuIsOpenMobile ? "100%" : "75%",
             height: width,
             bottom: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
-            left: 0,
+            left: position === "left" ? 0 : position === "center" ? sideMenuIsOpenMobile ? 0 : "50%" : "auto",
+            right: position === "right" ? 0 : void 0,
             backgroundColor: theme2.colors.border,
             borderRadius: 999,
-            transform: sideMenuIsOpenMobile ? "rotate(-45deg)" : void 0,
+            transform: sideMenuIsOpenMobile ? "rotate(-45deg)" : position === "center" ? "translateX(-50%)" : void 0,
             transition: theme2.styles.transition
           }
         )