react-better-html 1.1.157 → 1.1.159

package/dist/index.mjs

@@ -1526,19 +1526,6 @@ import { memo as memo7 } from "react";
 import { memo as memo6, useCallback as useCallback2, useEffect as useEffect3, useMemo, useRef, useState } from "react";
 import styled6 from "styled-components";
 
-// src/plugins/react-router-dom.ts
-import { Link as RouterLink, NavLink as RouterNavLink } from "react-router-dom";
-var reactRouterDomPlugin = () => ({
-  name: "react-router-dom",
-  components: {
-    Link: RouterLink,
-    NavLink: RouterNavLink
-  },
-  initialize: () => {
-    console.log("react-router-dom plugin initialized");
-  }
-});
-
 // src/plugins/alerts.ts
 var defaultAlertsPluginOptions = {
   position: "bottom",
@@ -1559,6 +1546,39 @@ var alertsPlugin = (options) => ({
   })
 });
 
+// src/plugins/reactRouterDom.ts
+import { Link as RouterLink, NavLink as RouterNavLink } from "react-router-dom";
+var defaultReactRouterDomPluginOptions = {};
+var reactRouterDomPlugin = (options) => ({
+  name: "react-router-dom",
+  components: {
+    Link: RouterLink,
+    NavLink: RouterNavLink
+  },
+  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
 import { forwardRef, memo, useEffect } from "react";
 import styled from "styled-components";
@@ -2637,12 +2657,17 @@ function useStyledComponentStyles(props, theme2, excludeProps) {
         haveHover = true;
         const normalKey = key.slice(0, -5);
         hoverStyle[normalKey] = props[key];
+        if (normalKey === "transition") hoverStyle.WebkitTransition = hoverStyle.transition;
       } else {
         if (!cssProps[key.toLowerCase()]) continue;
         normalStyle[key] = props[key];
+        if (key === "transition") normalStyle.WebkitTransition = normalStyle.transition;
       }
     }
-    if (haveHover) normalStyle.transition = theme2?.styles.transition ?? "";
+    if (haveHover) {
+      normalStyle.transition = theme2?.styles.transition ?? "";
+      normalStyle.WebkitTransition = normalStyle.transition;
+    }
     return {
       normalStyle,
       hoverStyle
@@ -3848,7 +3873,7 @@ Chip2.colored = ChipComponent.colored;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
-import { forwardRef as forwardRef11, memo as memo18, useCallback as useCallback9, useState as useState7, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef5, useId } from "react";
+import { forwardRef as forwardRef11, memo as memo18, useCallback as useCallback9, useState as useState7, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef5, useId as useId2 } from "react";
 import styled10 from "styled-components";
 
 // src/constants/countries.ts
@@ -4307,13 +4332,15 @@ var countries = [
     name: "Finland",
     code: "FI",
     timeZone: "Europe/Helsinki",
-    phoneNumberExtension: "358"
+    phoneNumberExtension: "358",
+    phoneNumberFormat: "XX XXX XX XX"
   },
   {
     name: "France",
     code: "FR",
     timeZone: "Europe/Paris",
-    phoneNumberExtension: "33"
+    phoneNumberExtension: "33",
+    phoneNumberFormat: "X XX XX XX XX"
   },
   {
     name: "French Guiana",
@@ -4356,7 +4383,7 @@ var countries = [
     code: "DE",
     timeZone: "Europe/Berlin",
     phoneNumberExtension: "49",
-    phoneNumberFormat: "XXXX XXXXXX"
+    phoneNumberFormat: "XXXX XXXXXXX"
   },
   {
     name: "Ghana",
@@ -5332,6 +5359,62 @@ var countries = [
   }
 ];
 
+// src/utils/functions.ts
+import CryptoJS from "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";
@@ -5403,6 +5486,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 = CryptoJS.AES.encrypt(text, CryptoJS.enc.Hex.parse(pluginConfig.encryption.secretKey), {
+    iv: CryptoJS.enc.Hex.parse(pluginConfig.encryption.iv),
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.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 = CryptoJS.AES.decrypt(text, CryptoJS.enc.Hex.parse(pluginConfig.encryption.secretKey), {
+    iv: CryptoJS.enc.Hex.parse(pluginConfig.encryption.iv),
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7
+  });
+  return decrypted.toString(CryptoJS.enc.Utf8);
+};
 
 // src/components/Label.tsx
 import { memo as memo15 } from "react";
@@ -5773,7 +5890,7 @@ Dropdown2.countries = DropdownComponent.countries;
 var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx
-import { useCallback as useCallback8, useMemo as useMemo5, useState as useState6, memo as memo17, useEffect as useEffect7 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo5, useState as useState6, memo as memo17, useEffect as useEffect7, useId } from "react";
 import styled9 from "styled-components";
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var getMonthName = (month, short = false) => {
@@ -5805,8 +5922,18 @@ var getWeekDayName = (day, short = false) => {
 };
 var weekDaysIndex = [1, 2, 3, 4, 5, 6, 0];
 var yearsRange = Array.from({ length: 100 + 1 + 50 }, (_, index) => index + (/* @__PURE__ */ new Date()).getFullYear() - 100);
+var SelectWrapperComponent = styled9.div.withConfig({
+  shouldForwardProp: (prop) => !["theme"].includes(prop)
+})`
+   &:has(select:focus) {
+      outline: auto;
+      outline-color: -webkit-focus-ring-color;
+      outline-style: auto;
+      outline-offset: 2px;
+   }
+`;
 var SelectComponent = styled9.select.withConfig({
-  shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme"].includes(prop)
 })`
    position: absolute;
    top: 50%;
@@ -5816,6 +5943,7 @@ var SelectComponent = styled9.select.withConfig({
 `;
 function Calendar({ value, minDate, maxDate, onChange }) {
   const theme2 = useTheme();
+  const internalYearSelectId = useId();
   const [currentDate, setCurrentDate] = useState6(value ? new Date(value) : void 0);
   const [currentMonth, setCurrentMonth] = useState6(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
   const [currentYear, setCurrentYear] = useState6(currentDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
@@ -5883,11 +6011,20 @@ function Calendar({ value, minDate, maxDate, onChange }) {
       /* @__PURE__ */ jsx16(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
       /* @__PURE__ */ jsxs11(Div_default.row, { alignItems: "center", gap: 4, children: [
         /* @__PURE__ */ jsx16(Text_default, { fontWeight: 700, children: getMonthName(currentMonth) }),
-        /* @__PURE__ */ jsxs11(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx16(SelectWrapperComponent, { children: /* @__PURE__ */ jsxs11(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
           /* @__PURE__ */ jsx16(Text_default, { fontWeight: 700, children: currentYear }),
           /* @__PURE__ */ jsx16(Icon_default, { name: "chevronDown", size: 12 }),
-          /* @__PURE__ */ jsx16(SelectComponent, { theme: theme2, value: currentYear, onChange: onChangeYearSelect, children: yearsRange.map((year) => /* @__PURE__ */ jsx16("option", { value: year, children: year }, year)) })
-        ] })
+          /* @__PURE__ */ jsx16(
+            SelectComponent,
+            {
+              theme: theme2,
+              value: currentYear,
+              onChange: onChangeYearSelect,
+              id: internalYearSelectId,
+              children: yearsRange.map((year) => /* @__PURE__ */ jsx16("option", { value: year, children: year }, year))
+            }
+          )
+        ] }) })
       ] }),
       /* @__PURE__ */ jsx16(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
     ] }),
@@ -6011,6 +6148,10 @@ var InputElement = styled10.input.withConfig({
       cursor: not-allowed;
    }
 
+   &:read-only {
+      caret-color: transparent;
+   }
+
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
       -webkit-appearance: none;
@@ -6148,7 +6289,7 @@ var InputFieldComponent = forwardRef11(function InputField({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const internalId = useId();
+  const internalId = useId2();
   const { colorTheme } = useBetterHtmlContextInternal();
   const [_, debouncedValue, setDebouncedValue] = useDebounceState(
     props.value?.toString() ?? "",
@@ -6297,7 +6438,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const internalId = useId();
+  const internalId = useId2();
   const styledComponentStyles = useStyledComponentStyles(props, theme2);
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
@@ -6452,7 +6593,7 @@ InputFieldComponent.search = forwardRef11(function Search({ value, onChangeValue
 });
 InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
   const theme2 = useTheme();
-  const internalId = useId();
+  const internalId = useId2();
   const [dropdownValue, setDropdownValue] = useState7();
   const [inputFieldValue, setInputFieldValue] = useState7(value?.toString() ?? "");
   const renderOption = useCallback9(
@@ -6667,6 +6808,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
                         width: buttonWidth,
                         height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
                         overflowY: "auto",
+                        tabIndex: -1,
                         children: hours.map((hour) => {
                           const isSelected = hour.toString() === valueHour;
                           return /* @__PURE__ */ jsx17(
@@ -6700,6 +6842,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
                         width: buttonWidth,
                         height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
                         overflowY: "auto",
+                        tabIndex: -1,
                         children: minutes.map((minute) => {
                           const isSelected = minute.toString() === valueMinute;
                           return /* @__PURE__ */ jsx17(
@@ -6788,46 +6931,66 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
           userSelect: "none",
           ...insideInputFieldComponentProps,
           children: /* @__PURE__ */ jsxs12(Div_default.row, { height: "100%", children: [
-            /* @__PURE__ */ jsx17(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: hours.map((hour) => {
-              const isSelected = hour.toString() === valueHour;
-              return /* @__PURE__ */ jsx17(
-                Div_default.row,
-                {
-                  alignItems: "center",
-                  justifyContent: "center",
-                  color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-                  backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-                  filterHover: "brightness(0.9)",
-                  cursor: "pointer",
-                  padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-                  value: hour,
-                  onClickWithValue: onClickHour,
-                  ref: isSelected ? selectedHourRef : void 0,
-                  children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
-                },
-                hour
-              );
-            }) }),
-            /* @__PURE__ */ jsx17(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: minutes.map((minute) => {
-              const isSelected = minute.toString() === valueMinute;
-              return /* @__PURE__ */ jsx17(
-                Div_default.row,
-                {
-                  alignItems: "center",
-                  justifyContent: "center",
-                  color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-                  backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-                  filterHover: "brightness(0.9)",
-                  cursor: "pointer",
-                  padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-                  value: minute,
-                  onClickWithValue: onClickMinute,
-                  ref: isSelected ? selectedMinuteRef : void 0,
-                  children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
-                },
-                minute
-              );
-            }) })
+            /* @__PURE__ */ jsx17(
+              Div_default,
+              {
+                className: "react-better-html-no-scrollbar",
+                width: buttonWidth,
+                height: "100%",
+                overflowY: "auto",
+                tabIndex: -1,
+                children: hours.map((hour) => {
+                  const isSelected = hour.toString() === valueHour;
+                  return /* @__PURE__ */ jsx17(
+                    Div_default.row,
+                    {
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                      backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                      filterHover: "brightness(0.9)",
+                      cursor: "pointer",
+                      padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                      value: hour,
+                      onClickWithValue: onClickHour,
+                      ref: isSelected ? selectedHourRef : void 0,
+                      children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                    },
+                    hour
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx17(
+              Div_default,
+              {
+                className: "react-better-html-no-scrollbar",
+                width: buttonWidth,
+                height: "100%",
+                overflowY: "auto",
+                tabIndex: -1,
+                children: minutes.map((minute) => {
+                  const isSelected = minute.toString() === valueMinute;
+                  return /* @__PURE__ */ jsx17(
+                    Div_default.row,
+                    {
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                      backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                      filterHover: "brightness(0.9)",
+                      cursor: "pointer",
+                      padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                      value: minute,
+                      onClickWithValue: onClickMinute,
+                      ref: isSelected ? selectedMinuteRef : void 0,
+                      children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                    },
+                    minute
+                  );
+                })
+              }
+            )
           ] })
         }
       ) : void 0,
@@ -6890,7 +7053,7 @@ InputField2.color = InputFieldComponent.color;
 var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback10, useId as useId2, useState as useState8 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback10, useId as useId3, useState as useState8 } from "react";
 import styled11 from "styled-components";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var componentSize = 26;
@@ -7001,7 +7164,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const internalId = useId2();
+  const internalId = useId3();
   const styledComponentStyles = useStyledComponentStyles(props, theme2, true);
   const styledComponentStylesWithExcluded = useComponentPropsWithExcludedStyle(props);
   const dataProps = useComponentPropsWithPrefix(props, "data");
@@ -7118,7 +7281,7 @@ var ToggleInput_default = {
     ...props
   }, ref) {
     const theme2 = useTheme();
-    const internalId = useId2();
+    const internalId = useId3();
     const styledComponentStyles = useStyledComponentStyles(props, theme2, true);
     const styledComponentStylesWithExcluded = useComponentPropsWithExcludedStyle(props);
     const dataProps = useComponentPropsWithPrefix(props, "data");
@@ -7321,61 +7484,6 @@ var FormRow_default = FormRow2;
 
 // src/components/ColorThemeSwitch.tsx
 import { memo as memo21, useEffect as useEffect9 } from "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
 import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
   withMoon,
@@ -8989,6 +9097,71 @@ FoldableComponent.box = forwardRef18(function Box3({ ...props }, ref) {
 var Foldable2 = memo25(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();
+    }
+  };
+}
 export {
   BetterHtmlProvider_default as BetterHtmlProvider,
   Button_default as Button,
@@ -9019,17 +9192,21 @@ export {
   countries,
   darkenColor,
   defaultAlertsPluginOptions,
+  defaultLocalStoragePluginOptions,
+  defaultReactRouterDomPluginOptions,
   desaturateColor,
   eventPreventDefault,
   eventPreventStop,
   eventStopPropagation,
   formatPhoneNumber,
+  generateLocalStorage,
   generateRandomString,
   getBrowser,
   getFormErrorObject,
   isMobileDevice,
   lightenColor,
   loaderControls,
+  localStoragePlugin,
   reactRouterDomPlugin,
   saturateColor,
   useAlertControls,