react-better-html 1.1.243 → 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,
@@ -1968,6 +1979,75 @@ var import_react10 = require("react");
 var import_react_better_core9 = require("react-better-core");
 var import_styled_components6 = __toESM(require("styled-components"));
 
+// src/utils/variableFunctions.ts
+var checkBetterCoreContextValue = (value, functionsName) => {
+  if (value === void 0) {
+    throw new Error(
+      `\`${functionsName}()\` must be used within a \`<BetterCoreProvider>\`. Make sure to add one at the root of your component tree.`
+    );
+  }
+  return value !== void 0;
+};
+var checkBetterHtmlContextValue = (value, functionsName) => {
+  if (value === void 0) {
+    throw new Error(
+      `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
+    );
+  }
+  return value !== void 0;
+};
+var alertControls = {
+  createAlert: (alert) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.createAlert"))
+      return void 0;
+    const readyAlert = {
+      id: crypto.randomUUID(),
+      ...alert
+    };
+    externalBetterHtmlContextValue.setAlerts((oldValue) => [...oldValue, readyAlert]);
+    return readyAlert;
+  },
+  removeAlert: (alertId) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.removeAlert")) return;
+    externalBetterHtmlContextValue.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
+  }
+};
+var sideMenuControls = {
+  expand: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.expand")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setFalse();
+  },
+  collapse: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.collapse")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setTrue();
+  },
+  toggleExpanded: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleExpanded")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.toggle();
+  },
+  open: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.open")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setTrue();
+  },
+  close: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.close")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setFalse();
+  },
+  toggleOpened: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleOpened")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.toggle();
+  }
+};
+var filterHover = () => {
+  if (!checkBetterCoreContextValue(externalBetterCoreContextValue, "filterHover")) return void 0;
+  return {
+    z05: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.95)",
+    z1: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.3)" : "brightness(0.9)",
+    z2: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.6)" : "brightness(0.8)",
+    z3: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.9)" : "brightness(0.7)"
+  };
+};
+
 // src/components/Loader.tsx
 var import_react9 = require("react");
 var import_react_better_core8 = require("react-better-core");
@@ -2043,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};
@@ -2062,12 +2142,12 @@ var ButtonElement = import_styled_components6.default.button.withConfig({
                 cursor: pointer;
 
                 &:not(.secondary):hover {
-                   filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+                   filter: ${props.hoverStyle.filter ?? filterHover().z1};
                 }
 
                 &.secondary:hover {
                    ${props.withNoBorder ? import_styled_components6.css`
-                           filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+                           filter: ${props.hoverStyle.filter ?? filterHover().z1};
                         ` : import_styled_components6.css`
                            border-color: ${props.theme.colors.primary};
                         `}
@@ -2135,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)(
@@ -2143,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())
         }
       )
     }
@@ -2153,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;
@@ -2938,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 })
         ] }),
@@ -3201,77 +3281,6 @@ var BetterHtmlProvider_default = (0, import_react14.memo)(BetterHtmlProvider);
 
 // src/utils/functions.ts
 var import_crypto_js = __toESM(require("crypto-js"));
-
-// src/utils/variableFunctions.ts
-var checkBetterCoreContextValue = (value, functionsName) => {
-  if (value === void 0) {
-    throw new Error(
-      `\`${functionsName}()\` must be used within a \`<BetterCoreProvider>\`. Make sure to add one at the root of your component tree.`
-    );
-  }
-  return value !== void 0;
-};
-var checkBetterHtmlContextValue = (value, functionsName) => {
-  if (value === void 0) {
-    throw new Error(
-      `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
-    );
-  }
-  return value !== void 0;
-};
-var alertControls = {
-  createAlert: (alert) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.createAlert"))
-      return void 0;
-    const readyAlert = {
-      id: crypto.randomUUID(),
-      ...alert
-    };
-    externalBetterHtmlContextValue.setAlerts((oldValue) => [...oldValue, readyAlert]);
-    return readyAlert;
-  },
-  removeAlert: (alertId) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.removeAlert")) return;
-    externalBetterHtmlContextValue.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
-  }
-};
-var sideMenuControls = {
-  expand: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.expand")) return;
-    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setFalse();
-  },
-  collapse: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.collapse")) return;
-    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setTrue();
-  },
-  toggleExpanded: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleExpanded")) return;
-    externalBetterHtmlContextValue.setSideMenuIsCollapsed.toggle();
-  },
-  open: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.open")) return;
-    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setTrue();
-  },
-  close: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.close")) return;
-    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setFalse();
-  },
-  toggleOpened: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleOpened")) return;
-    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.toggle();
-  }
-};
-var filterHover = () => {
-  if (!checkBetterCoreContextValue(externalBetterCoreContextValue, "filterHover")) return void 0;
-  return {
-    z05: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.95)",
-    z1: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.3)" : "brightness(0.9)",
-    z2: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.6)" : "brightness(0.8)",
-    z3: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.9)" : "brightness(0.7)"
-  };
-};
-
-// src/utils/functions.ts
 var getBrowser = () => {
   const userAgent = navigator.userAgent.toLowerCase();
   if (userAgent.includes("firefox")) return "firefox";
@@ -4312,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};
@@ -4334,7 +4343,7 @@ var InputElement = import_styled_components11.default.input.withConfig({
 
    &:focus {
       ${(props) => props.withNoBorder ? import_styled_components11.css`
-                 filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+                 filter: ${props.hoverStyle.filter ?? filterHover().z1};
               ` : import_styled_components11.css`
                  border-color: ${props.theme.colors.primary};
               `}
@@ -4439,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};
@@ -4457,7 +4466,7 @@ var TextareaElement = import_styled_components11.default.textarea.withConfig({
    }
 
    ${(props) => props.withNoBorder ? import_styled_components11.css`
-              filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+              filter: ${props.hoverStyle.filter ?? filterHover().z1};
            ` : import_styled_components11.css`
               border-color: ${props.theme.colors.primary};
            `}
@@ -5522,7 +5531,7 @@ var InputElement2 = import_styled_components12.default.input.withConfig({
 
    &:hover {
       ${(props) => props.withNoBorder ? import_styled_components12.css`
-                 filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+                 filter: ${props.hoverStyle.filter ?? filterHover().z1};
               ` : import_styled_components12.css`
                  border-color: ${props.theme.colors.primary};
               `}
@@ -5599,7 +5608,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
   textAdvanced,
   errorText,
   infoText,
-  size,
+  size = componentSize,
   value,
   onChange,
   checked: controlledChecked,
@@ -5673,7 +5682,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
             top: "50%",
             left: "50%",
             color: theme2.colors.base,
-            size: 14,
+            size: size / 1.8,
             transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`,
             opacity: checked ? 1 : 0,
             pointerEvents: "none",
@@ -5683,8 +5692,8 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
           Div_default,
           {
             position: "absolute",
-            width: 10,
-            height: 10,
+            width: size / 2,
+            height: size / 2,
             top: "50%",
             left: "50%",
             backgroundColor: theme2.colors.base,
@@ -5708,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: [
               " ",
               "*"
             ] })
@@ -5716,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: [
           " ",
           "*"
         ] })
@@ -5977,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 })
     ] }),
@@ -8185,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,
@@ -8200,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,
@@ -8209,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
           }
         ),
@@ -8223,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
           }
@@ -8238,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
           }
         )