react-better-html 1.1.158 → 1.1.160

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import { ComponentType, ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-type PluginName = "react-router-dom" | "alerts";
+type PluginName = "alerts" | "react-router-dom" | "localStorage";
 type BetterHtmlPluginConstructor<T extends object = object> = (config?: T) => BetterHtmlPlugin<T>;
 type BetterHtmlPlugin<T = object> = {
     name: PluginName;
@@ -257,8 +257,9 @@ type VerticalDividerProps = DividerProps & {
 };
 type HorizontalDividerProps = DividerProps & {
     text?: string;
+    textFontSize?: React.CSSProperties["fontSize"];
     /** @default textSecondary */
-    textColor?: string;
+    textColor?: React.CSSProperties["color"];
 };
 type DividerComponentType = {
     vertical: (props: ComponentPropWithRef<HTMLDivElement, VerticalDividerProps>) => React.ReactElement;
@@ -326,13 +327,9 @@ type PageHolderComponentType = {
     center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
         pageBackgroundColor?: string;
         contentMaxWidth?: React.CSSProperties["maxWidth"];
-        sideImageSrc?: string;
-        sideImageName?: AssetName | AnyOtherString;
+        sideComponent?: React.ReactNode;
         /** @default "right" */
-        sideImagePosition?: "left" | "right";
-        /** @default "center" */
-        sideImageAlignment?: "left" | "center" | "right";
-        sideImageFooter?: React.ReactNode;
+        sideComponentPosition?: "left" | "right";
     }>) => React.ReactElement;
 };
 declare const PageHolderComponent: PageHolderComponentType;
@@ -405,7 +402,10 @@ type InputFieldComponentType = {
     (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
     multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
     email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
-    password: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    password: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "autoComplete"> & {
+        /** @default "current-password" */
+        autoComplete?: React.ComponentProps<"input">["autoComplete"];
+    }>) => React.ReactElement;
     search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
     phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type" | "prefix">>) => React.ReactElement;
     date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
@@ -981,12 +981,17 @@ declare const colorThemeControls: {
     toggleTheme: (theme?: ColorTheme) => void;
 };
 
+declare function generateLocalStorage<LocalStorage extends object>(): {
+    setItem: <StorageName extends keyof LocalStorage>(name: StorageName, value: LocalStorage[StorageName]) => void;
+    getItem: <StorageName extends keyof LocalStorage>(name: StorageName) => LocalStorage[StorageName] | undefined;
+    removeItem: (name: keyof LocalStorage) => void;
+    removeAllItems: () => void;
+};
+
 declare const countries: Country[];
 
 declare const isMobileDevice: boolean;
 
-declare const reactRouterDomPlugin: BetterHtmlPluginConstructor;
-
 type AlertsPluginOptions = {
     /** @default "bottom" */
     position?: "top" | "bottom";
@@ -1004,4 +1009,22 @@ type AlertsPluginOptions = {
 declare const defaultAlertsPluginOptions: Required<AlertsPluginOptions>;
 declare const alertsPlugin: BetterHtmlPluginConstructor<AlertsPluginOptions>;
 
-export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+type ReactRouterDomPluginOptions = {};
+declare const defaultReactRouterDomPluginOptions: Required<ReactRouterDomPluginOptions>;
+declare const reactRouterDomPlugin: BetterHtmlPluginConstructor<ReactRouterDomPluginOptions>;
+
+type LocalStoragePluginOptions = {
+    encryption?: {
+        /** @default false */
+        enabled?: false;
+    } | {
+        /** @default false */
+        enabled?: true;
+        secretKey: string;
+        iv: string;
+    };
+};
+declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
+declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
+
+export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import { ComponentType, ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-type PluginName = "react-router-dom" | "alerts";
+type PluginName = "alerts" | "react-router-dom" | "localStorage";
 type BetterHtmlPluginConstructor<T extends object = object> = (config?: T) => BetterHtmlPlugin<T>;
 type BetterHtmlPlugin<T = object> = {
     name: PluginName;
@@ -257,8 +257,9 @@ type VerticalDividerProps = DividerProps & {
 };
 type HorizontalDividerProps = DividerProps & {
     text?: string;
+    textFontSize?: React.CSSProperties["fontSize"];
     /** @default textSecondary */
-    textColor?: string;
+    textColor?: React.CSSProperties["color"];
 };
 type DividerComponentType = {
     vertical: (props: ComponentPropWithRef<HTMLDivElement, VerticalDividerProps>) => React.ReactElement;
@@ -326,13 +327,9 @@ type PageHolderComponentType = {
     center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
         pageBackgroundColor?: string;
         contentMaxWidth?: React.CSSProperties["maxWidth"];
-        sideImageSrc?: string;
-        sideImageName?: AssetName | AnyOtherString;
+        sideComponent?: React.ReactNode;
         /** @default "right" */
-        sideImagePosition?: "left" | "right";
-        /** @default "center" */
-        sideImageAlignment?: "left" | "center" | "right";
-        sideImageFooter?: React.ReactNode;
+        sideComponentPosition?: "left" | "right";
     }>) => React.ReactElement;
 };
 declare const PageHolderComponent: PageHolderComponentType;
@@ -405,7 +402,10 @@ type InputFieldComponentType = {
     (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
     multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
     email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
-    password: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    password: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "autoComplete"> & {
+        /** @default "current-password" */
+        autoComplete?: React.ComponentProps<"input">["autoComplete"];
+    }>) => React.ReactElement;
     search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
     phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type" | "prefix">>) => React.ReactElement;
     date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
@@ -981,12 +981,17 @@ declare const colorThemeControls: {
     toggleTheme: (theme?: ColorTheme) => void;
 };
 
+declare function generateLocalStorage<LocalStorage extends object>(): {
+    setItem: <StorageName extends keyof LocalStorage>(name: StorageName, value: LocalStorage[StorageName]) => void;
+    getItem: <StorageName extends keyof LocalStorage>(name: StorageName) => LocalStorage[StorageName] | undefined;
+    removeItem: (name: keyof LocalStorage) => void;
+    removeAllItems: () => void;
+};
+
 declare const countries: Country[];
 
 declare const isMobileDevice: boolean;
 
-declare const reactRouterDomPlugin: BetterHtmlPluginConstructor;
-
 type AlertsPluginOptions = {
     /** @default "bottom" */
     position?: "top" | "bottom";
@@ -1004,4 +1009,22 @@ type AlertsPluginOptions = {
 declare const defaultAlertsPluginOptions: Required<AlertsPluginOptions>;
 declare const alertsPlugin: BetterHtmlPluginConstructor<AlertsPluginOptions>;
 
-export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+type ReactRouterDomPluginOptions = {};
+declare const defaultReactRouterDomPluginOptions: Required<ReactRouterDomPluginOptions>;
+declare const reactRouterDomPlugin: BetterHtmlPluginConstructor<ReactRouterDomPluginOptions>;
+
+type LocalStoragePluginOptions = {
+    encryption?: {
+        /** @default false */
+        enabled?: false;
+    } | {
+        /** @default false */
+        enabled?: true;
+        secretKey: string;
+        iv: string;
+    };
+};
+declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
+declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
+
+export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.js

@@ -59,17 +59,21 @@ __export(index_exports, {
   countries: () => countries,
   darkenColor: () => darkenColor,
   defaultAlertsPluginOptions: () => defaultAlertsPluginOptions,
+  defaultLocalStoragePluginOptions: () => defaultLocalStoragePluginOptions,
+  defaultReactRouterDomPluginOptions: () => defaultReactRouterDomPluginOptions,
   desaturateColor: () => desaturateColor,
   eventPreventDefault: () => eventPreventDefault,
   eventPreventStop: () => eventPreventStop,
   eventStopPropagation: () => eventStopPropagation,
   formatPhoneNumber: () => formatPhoneNumber,
+  generateLocalStorage: () => generateLocalStorage,
   generateRandomString: () => generateRandomString,
   getBrowser: () => getBrowser,
   getFormErrorObject: () => getFormErrorObject,
   isMobileDevice: () => isMobileDevice,
   lightenColor: () => lightenColor,
   loaderControls: () => loaderControls,
+  localStoragePlugin: () => localStoragePlugin,
   reactRouterDomPlugin: () => reactRouterDomPlugin,
   saturateColor: () => saturateColor,
   useAlertControls: () => useAlertControls,
@@ -1615,19 +1619,6 @@ var import_react8 = require("react");
 var import_react7 = require("react");
 var import_styled_components6 = __toESM(require("styled-components"));
 
-// src/plugins/react-router-dom.ts
-var import_react_router_dom = require("react-router-dom");
-var reactRouterDomPlugin = () => ({
-  name: "react-router-dom",
-  components: {
-    Link: import_react_router_dom.Link,
-    NavLink: import_react_router_dom.NavLink
-  },
-  initialize: () => {
-    console.log("react-router-dom plugin initialized");
-  }
-});
-
 // src/plugins/alerts.ts
 var defaultAlertsPluginOptions = {
   position: "bottom",
@@ -1648,6 +1639,39 @@ var alertsPlugin = (options) => ({
   })
 });
 
+// src/plugins/reactRouterDom.ts
+var import_react_router_dom = require("react-router-dom");
+var defaultReactRouterDomPluginOptions = {};
+var reactRouterDomPlugin = (options) => ({
+  name: "react-router-dom",
+  components: {
+    Link: import_react_router_dom.Link,
+    NavLink: import_react_router_dom.NavLink
+  },
+  initialize: () => {
+    console.log("react-router-dom plugin initialized");
+  },
+  getConfig: () => ({
+    ...defaultReactRouterDomPluginOptions,
+    ...options
+  })
+});
+
+// src/plugins/localStorage.ts
+var defaultLocalStoragePluginOptions = {
+  encryption: {}
+};
+var localStoragePlugin = (options) => ({
+  name: "localStorage",
+  initialize: () => {
+    console.log("localStorage plugin initialized");
+  },
+  getConfig: () => ({
+    ...defaultLocalStoragePluginOptions,
+    ...options
+  })
+});
+
 // src/components/Icon.tsx
 var import_react = require("react");
 var import_styled_components = __toESM(require("styled-components"));
@@ -3321,11 +3345,11 @@ var Divider_default = {
     })
   ),
   horizontal: (0, import_react12.memo)(
-    (0, import_react12.forwardRef)(function Divider2({ width = 1, backgroundColor, text, textColor, ...props }, ref) {
+    (0, import_react12.forwardRef)(function Divider2({ width = 1, backgroundColor, text, textFontSize, textColor, ...props }, ref) {
       const theme2 = useTheme();
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, ref, children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
-        text && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { color: textColor ?? theme2.colors.textSecondary, children: text }),
+        text && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { fontSize: textFontSize, color: textColor ?? theme2.colors.textSecondary, children: text }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
       ] });
     })
@@ -3636,11 +3660,8 @@ var PageHolderComponent = (0, import_react14.forwardRef)(function PageHolder({ n
 PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
   pageBackgroundColor,
   contentMaxWidth,
-  sideImageSrc,
-  sideImageName,
-  sideImagePosition = "right",
-  sideImageAlignment = "center",
-  sideImageFooter,
+  sideComponent,
+  sideComponentPosition = "right",
   noMaxContentWidth,
   children,
   ...props
@@ -3649,7 +3670,7 @@ PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
   const mediaQuery = useMediaQuery();
   const { app } = useBetterHtmlContextInternal();
   const breakingPoint = mediaQuery.size1000;
-  const withSideImage = (sideImageSrc || sideImageName) && !breakingPoint;
+  const withSideComponent = sideComponent && !breakingPoint;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     Div_default.row,
     {
@@ -3659,8 +3680,8 @@ PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
       justifyContent: "center",
       backgroundColor: pageBackgroundColor,
       children: [
-        sideImagePosition === "left" && withSideImage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { width: "50%" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default.column, { width: `${withSideImage ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        sideComponentPosition === "left" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { width: "50%" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default.column, { width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Div_default.box,
           {
             width: `calc(100% - ${theme2.styles.space}px * 2)`,
@@ -3672,32 +3693,17 @@ PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
             children
           }
         ) }),
-        sideImagePosition === "right" && withSideImage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { width: "50%" }),
-        withSideImage && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        sideComponentPosition === "right" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { width: "50%" }),
+        withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Div_default,
           {
             position: "fixed",
             width: "50%",
             height: "100svh",
             top: 0,
-            left: sideImagePosition === "left" ? 0 : "auto",
-            right: sideImagePosition === "right" ? 0 : "auto",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                Div_default.row,
-                {
-                  position: "absolute",
-                  width: "100%",
-                  height: "100%",
-                  top: 0,
-                  left: 0,
-                  justifyContent: sideImageAlignment === "left" ? "flex-start" : sideImageAlignment === "right" ? "flex-end" : "center",
-                  overflow: "hidden",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Image_default, { name: sideImageName, height: "100%", src: sideImageSrc })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { position: "absolute", width: "100%", bottom: theme2.styles.space, children: sideImageFooter })
-            ]
+            left: sideComponentPosition === "left" ? 0 : "auto",
+            right: sideComponentPosition === "right" ? 0 : "auto",
+            children: sideComponent
           }
         )
       ]
@@ -5428,6 +5434,62 @@ var countries = [
   }
 ];
 
+// src/utils/functions.ts
+var import_crypto_js = __toESM(require("crypto-js"));
+
+// src/utils/variableFunctions.ts
+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 loaderControls = {
+  startLoading: (loaderName) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.startLoading")) return;
+    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
+      ...oldValue,
+      [loaderName.toString()]: true
+    }));
+  },
+  stopLoading: (loaderName) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.stopLoading")) return;
+    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
+      ...oldValue,
+      [loaderName.toString()]: false
+    }));
+  }
+};
+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 colorThemeControls = {
+  toggleTheme: (theme2) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "colorThemeControls.toggleTheme")) return;
+    const currentColorTheme = externalBetterHtmlContextValue.colorTheme;
+    const newColorTheme = theme2 ?? (currentColorTheme === "dark" ? "light" : "dark");
+    setTimeout(() => {
+      window.document.body.parentElement?.setAttribute("data-theme", newColorTheme);
+      localStorage.setItem("theme", newColorTheme);
+    }, 0.01 * 1e3);
+  }
+};
+
 // src/utils/functions.ts
 var generateRandomString = (stringLength, options) => {
   const capitals = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
@@ -5499,6 +5561,40 @@ var eventPreventStop = (event) => {
   event.preventDefault();
   event.stopPropagation();
 };
+var encryptString = (text) => {
+  if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "encryptString")) return void 0;
+  const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find((plugin) => plugin.name === "localStorage");
+  if (!localStoragePlugin2) {
+    throw new Error(
+      "`encryptString` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+    );
+  }
+  const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+  if (!pluginConfig?.encryption?.enabled) return text;
+  const encrypted = import_crypto_js.default.AES.encrypt(text, import_crypto_js.default.enc.Hex.parse(pluginConfig.encryption.secretKey), {
+    iv: import_crypto_js.default.enc.Hex.parse(pluginConfig.encryption.iv),
+    mode: import_crypto_js.default.mode.CBC,
+    padding: import_crypto_js.default.pad.Pkcs7
+  }).toString();
+  return encrypted;
+};
+var decryptString = (text) => {
+  if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "decryptString")) return void 0;
+  const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find((plugin) => plugin.name === "localStorage");
+  if (!localStoragePlugin2) {
+    throw new Error(
+      "`decryptString` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+    );
+  }
+  const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+  if (!pluginConfig?.encryption?.enabled) return text;
+  const decrypted = import_crypto_js.default.AES.decrypt(text, import_crypto_js.default.enc.Hex.parse(pluginConfig.encryption.secretKey), {
+    iv: import_crypto_js.default.enc.Hex.parse(pluginConfig.encryption.iv),
+    mode: import_crypto_js.default.mode.CBC,
+    padding: import_crypto_js.default.pad.Pkcs7
+  });
+  return decrypted.toString(import_crypto_js.default.enc.Utf8);
+};
 
 // src/components/Label.tsx
 var import_react17 = require("react");
@@ -7463,61 +7559,6 @@ var FormRow_default = FormRow2;
 
 // src/components/ColorThemeSwitch.tsx
 var import_react24 = require("react");
-
-// src/utils/variableFunctions.ts
-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 loaderControls = {
-  startLoading: (loaderName) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.startLoading")) return;
-    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
-      ...oldValue,
-      [loaderName.toString()]: true
-    }));
-  },
-  stopLoading: (loaderName) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.stopLoading")) return;
-    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
-      ...oldValue,
-      [loaderName.toString()]: false
-    }));
-  }
-};
-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 colorThemeControls = {
-  toggleTheme: (theme2) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "colorThemeControls.toggleTheme")) return;
-    const currentColorTheme = externalBetterHtmlContextValue.colorTheme;
-    const newColorTheme = theme2 ?? (currentColorTheme === "dark" ? "light" : "dark");
-    setTimeout(() => {
-      window.document.body.parentElement?.setAttribute("data-theme", newColorTheme);
-      localStorage.setItem("theme", newColorTheme);
-    }, 0.01 * 1e3);
-  }
-};
-
-// src/components/ColorThemeSwitch.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
   withMoon,
@@ -9121,6 +9162,71 @@ FoldableComponent.box = (0, import_react28.forwardRef)(function Box3({ ...props
 var Foldable2 = (0, import_react28.memo)(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
+
+// src/utils/localStorage.ts
+function generateLocalStorage() {
+  return {
+    setItem: (name, value) => {
+      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage"))
+        return void 0;
+      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
+        (plugin) => plugin.name === "localStorage"
+      );
+      if (!localStoragePlugin2) {
+        throw new Error(
+          "`generateLocalStorage` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+        );
+      }
+      const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
+      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
+      const readyValue = encryptionEnabled ? encryptString(JSON.stringify(value)) : JSON.stringify(value);
+      if (value) localStorage.setItem(readyName.toString(), readyValue);
+      else localStorage.removeItem(readyName.toString());
+    },
+    getItem: (name) => {
+      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage"))
+        return void 0;
+      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
+        (plugin) => plugin.name === "localStorage"
+      );
+      if (!localStoragePlugin2) {
+        throw new Error(
+          "`generateLocalStorage` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+        );
+      }
+      const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
+      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
+      const item = localStorage.getItem(readyName.toString());
+      if (item === null) return void 0;
+      try {
+        return encryptionEnabled ? JSON.parse(decryptString(item)) : JSON.parse(item);
+      } catch (error) {
+        return void 0;
+      }
+    },
+    removeItem: (name) => {
+      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage"))
+        return void 0;
+      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
+        (plugin) => plugin.name === "localStorage"
+      );
+      if (!localStoragePlugin2) {
+        throw new Error(
+          "`generateLocalStorage` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+        );
+      }
+      const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
+      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
+      localStorage.removeItem(readyName.toString());
+    },
+    removeAllItems: () => {
+      localStorage.clear();
+    }
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BetterHtmlProvider,
@@ -9152,17 +9258,21 @@ var Foldable_default = Foldable2;
   countries,
   darkenColor,
   defaultAlertsPluginOptions,
+  defaultLocalStoragePluginOptions,
+  defaultReactRouterDomPluginOptions,
   desaturateColor,
   eventPreventDefault,
   eventPreventStop,
   eventStopPropagation,
   formatPhoneNumber,
+  generateLocalStorage,
   generateRandomString,
   getBrowser,
   getFormErrorObject,
   isMobileDevice,
   lightenColor,
   loaderControls,
+  localStoragePlugin,
   reactRouterDomPlugin,
   saturateColor,
   useAlertControls,