react-better-html 1.1.101 → 1.1.103

package/dist/index.mjs

@@ -2751,40 +2751,39 @@ Button2.upload = ButtonComponent.upload;
 var Button_default = Button2;
 
 // src/components/Divider.tsx
-import { memo as memo8 } from "react";
+import { forwardRef as forwardRef5, memo as memo8 } from "react";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var Divider_default = {
-  vertical: memo8(function Divider({ width = 1, backgroundColor, height, ...props }) {
-    const theme2 = useTheme();
-    return /* @__PURE__ */ jsx8(
-      Div_default,
-      {
-        width,
-        height: height ?? "100%",
-        flexShrink: 0,
-        backgroundColor: backgroundColor ?? theme2.colors.border,
-        ...props
-      }
-    );
-  }),
-  horizontal: memo8(function Divider2({
-    width = 1,
-    backgroundColor,
-    text,
-    textColor,
-    ...props
-  }) {
-    const theme2 = useTheme();
-    return /* @__PURE__ */ jsxs4(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, children: [
-      /* @__PURE__ */ jsx8(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
-      text && /* @__PURE__ */ jsx8(Text_default, { color: textColor ?? theme2.colors.textSecondary, children: text }),
-      /* @__PURE__ */ jsx8(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
-    ] });
-  })
+  vertical: memo8(
+    forwardRef5(function Divider({ width = 1, backgroundColor, height, ...props }, ref) {
+      const theme2 = useTheme();
+      return /* @__PURE__ */ jsx8(
+        Div_default,
+        {
+          width,
+          height: height ?? "100%",
+          flexShrink: 0,
+          backgroundColor: backgroundColor ?? theme2.colors.border,
+          ...props,
+          ref
+        }
+      );
+    })
+  ),
+  horizontal: memo8(
+    forwardRef5(function Divider2({ width = 1, backgroundColor, text, textColor, ...props }, ref) {
+      const theme2 = useTheme();
+      return /* @__PURE__ */ jsxs4(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, ref, children: [
+        /* @__PURE__ */ jsx8(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
+        text && /* @__PURE__ */ jsx8(Text_default, { color: textColor ?? theme2.colors.textSecondary, children: text }),
+        /* @__PURE__ */ jsx8(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
+      ] });
+    })
+  )
 };
 
 // src/components/Modal.tsx
-import { memo as memo9, useCallback as useCallback5, forwardRef as forwardRef5, useImperativeHandle, useRef as useRef2, useState as useState3 } from "react";
+import { memo as memo9, useCallback as useCallback5, forwardRef as forwardRef6, useImperativeHandle, useRef as useRef2, useState as useState3 } from "react";
 import styled7 from "styled-components";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var DialogStylesElement = styled7.dialog.withConfig({
@@ -2827,7 +2826,7 @@ var DialogStylesElement = styled7.dialog.withConfig({
       }
    }
 `;
-var ModalComponent = forwardRef5(function Modal({
+var ModalComponent = forwardRef6(function Modal({
   maxWidth,
   title,
   titleColor,
@@ -2978,7 +2977,7 @@ var ModalComponent = forwardRef5(function Modal({
     }
   );
 });
-ModalComponent.confirmation = forwardRef5(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
+ModalComponent.confirmation = forwardRef6(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
   const theme2 = useTheme();
   const modalRef = useRef2(null);
   const onCancelElement = useCallback5(() => {
@@ -3007,7 +3006,7 @@ ModalComponent.confirmation = forwardRef5(function Confirmation({ continueButton
     )
   ] });
 });
-ModalComponent.destructive = forwardRef5(function Destructive2({ deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
+ModalComponent.destructive = forwardRef6(function Destructive2({ deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
   const theme2 = useTheme();
   const modalRef = useRef2(null);
   const onCancelElement = useCallback5(() => {
@@ -3050,9 +3049,9 @@ Modal2.destructive = ModalComponent.destructive;
 var Modal_default = Modal2;
 
 // src/components/PageHolder.tsx
-import { memo as memo10 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-function PageHolder({ noMaxContentWidth, children, ...props }) {
+import { forwardRef as forwardRef7, memo as memo10 } from "react";
+import { Fragment as Fragment3, jsx as jsx10 } from "react/jsx-runtime";
+var PageHolderComponent = forwardRef7(function PageHolder({ noMaxContentWidth, backgroundColor, children, ...props }, ref) {
   const theme2 = useTheme();
   const { app } = useBetterHtmlContextInternal();
   return /* @__PURE__ */ jsx10(
@@ -3061,19 +3060,26 @@ function PageHolder({ noMaxContentWidth, children, ...props }) {
       as: "main",
       width: "100%",
       maxWidth: !noMaxContentWidth ? app.contentMaxWidth : void 0,
+      backgroundColor,
       margin: "0px auto",
       padding: theme2.styles.space,
       ...props,
+      ref,
       children
     }
   );
-}
-var PageHolder_default = memo10(PageHolder);
+});
+PageHolderComponent.center = forwardRef7(function Center(props, ref) {
+  return /* @__PURE__ */ jsx10(Fragment3, {});
+});
+var PageHolder2 = memo10(PageHolderComponent);
+PageHolder2.center = PageHolderComponent.center;
+var PageHolder_default = PageHolder2;
 
 // src/components/PageHeader.tsx
-import { memo as memo11 } from "react";
+import { forwardRef as forwardRef8, memo as memo11 } from "react";
 import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-function PageHeader({
+var PageHeaderComponent = forwardRef8(function PageHeader({
   imageUrl,
   imageSize = 60,
   title,
@@ -3084,59 +3090,69 @@ function PageHeader({
   rightElement,
   lightMode,
   marginBottom
-}) {
+}, ref) {
   const theme2 = useTheme();
   const { app } = useBetterHtmlContextInternal();
   const mediaQuery = useMediaQuery();
-  return /* @__PURE__ */ jsxs6(Div_default.row, { alignItems: "center", gap: theme2.styles.space, marginBottom: marginBottom ?? theme2.styles.space * 2, children: [
-    imageUrl && /* @__PURE__ */ jsx11(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
-    /* @__PURE__ */ jsxs6(
-      Div_default.column,
-      {
-        alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
-        flex: 1,
-        gap: theme2.styles.gap / 2,
-        children: [
-          /* @__PURE__ */ jsxs6(
-            Div_default.row,
-            {
-              alignItems: "center",
-              justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
-              gap: theme2.styles.space,
-              children: [
-                /* @__PURE__ */ jsx11(
-                  Text_default,
-                  {
-                    as: titleAs ?? "h1",
-                    textAlign,
-                    color: lightMode ? theme2.colors.base : theme2.colors.textPrimary,
-                    children: title
-                  }
-                ),
-                titleRightElement
-              ]
-            }
-          ),
-          description && /* @__PURE__ */ jsx11(
-            Text_default,
-            {
-              maxWidth: !mediaQuery.size600 ? app.contentMaxWidth * 0.6 : void 0,
-              textAlign,
-              color: lightMode ? theme2.colors.base : theme2.colors.textSecondary,
-              opacity: lightMode ? 0.7 : void 0,
-              children: description
-            }
-          )
-        ]
-      }
-    ),
-    rightElement
-  ] });
-}
-var PageHeader_default = memo11(PageHeader);
+  return /* @__PURE__ */ jsxs6(
+    Div_default.row,
+    {
+      alignItems: "center",
+      gap: theme2.styles.space,
+      marginBottom: marginBottom ?? theme2.styles.space * 2,
+      ref,
+      children: [
+        imageUrl && /* @__PURE__ */ jsx11(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
+        /* @__PURE__ */ jsxs6(
+          Div_default.column,
+          {
+            alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
+            flex: 1,
+            gap: theme2.styles.gap / 2,
+            children: [
+              /* @__PURE__ */ jsxs6(
+                Div_default.row,
+                {
+                  alignItems: "center",
+                  justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
+                  gap: theme2.styles.space,
+                  children: [
+                    /* @__PURE__ */ jsx11(
+                      Text_default,
+                      {
+                        as: titleAs ?? "h1",
+                        textAlign,
+                        color: lightMode ? theme2.colors.base : theme2.colors.textPrimary,
+                        children: title
+                      }
+                    ),
+                    titleRightElement
+                  ]
+                }
+              ),
+              description && /* @__PURE__ */ jsx11(
+                Text_default,
+                {
+                  maxWidth: !mediaQuery.size600 ? app.contentMaxWidth * 0.6 : void 0,
+                  textAlign,
+                  color: lightMode ? theme2.colors.base : theme2.colors.textSecondary,
+                  opacity: lightMode ? 0.7 : void 0,
+                  children: description
+                }
+              )
+            ]
+          }
+        ),
+        rightElement
+      ]
+    }
+  );
+});
+var PageHeader2 = memo11(PageHeaderComponent);
+var PageHeader_default = PageHeader2;
 
 // src/components/Chip.tsx
-import { forwardRef as forwardRef6, memo as memo12 } from "react";
+import { forwardRef as forwardRef9, memo as memo12 } from "react";
 
 // src/utils/colorManipulation.ts
 var rgbToHsl = (r, g, b) => {
@@ -3258,7 +3274,7 @@ var desaturateColor = (hexColor, amount) => {
 
 // src/components/Chip.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
-var ChipComponent = forwardRef6(function Chip({ text, color, backgroundColor, borderRadius, isCircle, ...props }, ref) {
+var ChipComponent = forwardRef9(function Chip({ text, color, backgroundColor, borderRadius, isCircle, ...props }, ref) {
   const theme2 = useTheme();
   return /* @__PURE__ */ jsx12(
     Div_default,
@@ -3274,7 +3290,7 @@ var ChipComponent = forwardRef6(function Chip({ text, color, backgroundColor, bo
     }
   );
 });
-ChipComponent.colored = forwardRef6(function Colored({ color, ...props }, ref) {
+ChipComponent.colored = forwardRef9(function Colored({ color, ...props }, ref) {
   const theme2 = useTheme();
   const { colorTheme } = useBetterHtmlContextInternal();
   const readyColor = color ?? theme2.colors.textSecondary;
@@ -3294,7 +3310,7 @@ Chip2.colored = ChipComponent.colored;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
-import { forwardRef as forwardRef8, memo as memo16, useCallback as useCallback8, useState as useState6, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef4, useId } from "react";
+import { forwardRef as forwardRef11, memo as memo16, useCallback as useCallback8, useState as useState6, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef4, useId } from "react";
 import styled8 from "styled-components";
 
 // src/constants/countries.ts
@@ -4868,9 +4884,9 @@ function Label({ text, required, isError, color, htmlFor }) {
 var Label_default = memo13(Label);
 
 // src/components/Dropdown.tsx
-import { forwardRef as forwardRef7, memo as memo14, useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var DropdownComponent = forwardRef7(function Dropdown({
+import { forwardRef as forwardRef10, memo as memo14, useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var DropdownComponent = forwardRef10(function Dropdown({
   label,
   labelColor,
   errorText,
@@ -5103,7 +5119,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
             transition: theme2.styles.transition,
             role: "listbox",
             "aria-label": label,
-            children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ jsx13(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx13(Loader_default.text, {}) }) : filteredOptions.length ? /* @__PURE__ */ jsx13(Fragment3, { children: (withoutRenderingOptionsWhenClosed ? isOpen || isOpenLate : true) ? renderedOptions : void 0 }) : /* @__PURE__ */ jsx13(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx13(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
+            children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ jsx13(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx13(Loader_default.text, {}) }) : filteredOptions.length ? /* @__PURE__ */ jsx13(Fragment4, { children: (withoutRenderingOptionsWhenClosed ? isOpen || isOpenLate : true) ? renderedOptions : void 0 }) : /* @__PURE__ */ jsx13(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx13(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
           }
         ),
         role: "combobox",
@@ -5161,7 +5177,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
     )
   ] }) });
 });
-DropdownComponent.countries = forwardRef7(function Countries({ ...props }, ref) {
+DropdownComponent.countries = forwardRef10(function Countries({ ...props }, ref) {
   const theme2 = useTheme();
   const renderOption = useCallback6(
     (option, index, isSelected) => /* @__PURE__ */ jsxs8(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
@@ -5516,7 +5532,7 @@ var TextareaElement = styled8.textarea.withConfig({
 `;
 var hours = Array.from({ length: 24 }, (_, index) => index);
 var minutes = Array.from({ length: 60 }, (_, index) => index);
-var InputFieldComponent = forwardRef8(function InputField({
+var InputFieldComponent = forwardRef11(function InputField({
   label,
   labelColor,
   errorText,
@@ -5637,7 +5653,7 @@ var InputFieldComponent = forwardRef8(function InputField({
     )
   ] });
 });
-InputFieldComponent.multiline = forwardRef8(function Multiline({
+InputFieldComponent.multiline = forwardRef11(function Multiline({
   label,
   placeholder,
   errorText,
@@ -5731,7 +5747,7 @@ InputFieldComponent.multiline = forwardRef8(function Multiline({
     )
   ] });
 });
-InputFieldComponent.email = forwardRef8(function Email({ ...props }, ref) {
+InputFieldComponent.email = forwardRef11(function Email({ ...props }, ref) {
   return /* @__PURE__ */ jsx15(
     InputFieldComponent,
     {
@@ -5745,7 +5761,7 @@ InputFieldComponent.email = forwardRef8(function Email({ ...props }, ref) {
     }
   );
 });
-InputFieldComponent.password = forwardRef8(function Password({ ...props }, ref) {
+InputFieldComponent.password = forwardRef11(function Password({ ...props }, ref) {
   const [isPassword, setIsPassword] = useBooleanState(true);
   return /* @__PURE__ */ jsx15(
     InputFieldComponent,
@@ -5762,10 +5778,10 @@ InputFieldComponent.password = forwardRef8(function Password({ ...props }, ref)
     }
   );
 });
-InputFieldComponent.search = forwardRef8(function Search({ ...props }, ref) {
+InputFieldComponent.search = forwardRef11(function Search({ ...props }, ref) {
   return /* @__PURE__ */ jsx15(InputFieldComponent, { leftIcon: "magnifyingGlass", placeholder: "Search...", ref, ...props });
 });
-InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
+InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
   const theme2 = useTheme();
   const internalId = useId();
   const [dropdownValue, setDropdownValue] = useState6();
@@ -5840,6 +5856,7 @@ InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, valu
           inputFieldClassName: "react-better-html-phone-number-holder",
           defaultValue,
           value: dropdownValue,
+          disabled: props.disabled,
           onChange: setDropdownValue,
           withoutClearButton: true
         }
@@ -5859,7 +5876,7 @@ InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, valu
     ] })
   ] });
 });
-InputFieldComponent.date = forwardRef8(function Date2({ minDate, maxDate, ...props }, ref) {
+InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...props }, ref) {
   const theme2 = useTheme();
   const holderRef = useRef4(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
@@ -5898,7 +5915,7 @@ InputFieldComponent.date = forwardRef8(function Date2({ minDate, maxDate, ...pro
     }
   );
 });
-InputFieldComponent.dateTime = forwardRef8(function DateTime({ minDate, maxDate, ...props }, ref) {
+InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate, ...props }, ref) {
   const theme2 = useTheme();
   const holderRef = useRef4(null);
   const selectedHourRef = useRef4(null);
@@ -6051,7 +6068,7 @@ InputFieldComponent.dateTime = forwardRef8(function DateTime({ minDate, maxDate,
     }
   );
 });
-InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
+InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
   const theme2 = useTheme();
   const holderRef = useRef4(null);
   const selectedHourRef = useRef4(null);
@@ -6153,7 +6170,7 @@ InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
     }
   );
 });
-InputFieldComponent.color = forwardRef8(function Color2({ value, onChangeValue, ...props }, ref) {
+InputFieldComponent.color = forwardRef11(function Color2({ value, onChangeValue, ...props }, ref) {
   const [inputFieldValue, setInputFieldValue] = useState6(value ?? "#000000");
   const onChangeValueElement = useCallback8(
     (value2) => {
@@ -6162,6 +6179,9 @@ InputFieldComponent.color = forwardRef8(function Color2({ value, onChangeValue,
     },
     [onChangeValue]
   );
+  useEffect7(() => {
+    setInputFieldValue(value);
+  }, [value]);
   return /* @__PURE__ */ jsx15(
     InputFieldComponent,
     {
@@ -6201,7 +6221,7 @@ InputField2.color = InputFieldComponent.color;
 var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
-import { forwardRef as forwardRef9, useCallback as useCallback9, useId as useId2, useState as useState7 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback9, useId as useId2, useState as useState7 } from "react";
 import styled9 from "styled-components";
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var componentSize = 26;
@@ -6296,7 +6316,7 @@ var SwitchElement = styled9.div.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var ToggleInputComponent = forwardRef9(function ToggleInput({
+var ToggleInputComponent = forwardRef12(function ToggleInput({
   label,
   labelColor,
   text,
@@ -6402,13 +6422,13 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
   ] });
 });
 var ToggleInput_default = {
-  checkbox: forwardRef9(function Checkbox(props, ref) {
+  checkbox: forwardRef12(function Checkbox(props, ref) {
     return /* @__PURE__ */ jsx16(ToggleInputComponent, { type: "checkbox", ref, ...props });
   }),
-  radiobutton: forwardRef9(function RadioButton(props, ref) {
+  radiobutton: forwardRef12(function RadioButton(props, ref) {
     return /* @__PURE__ */ jsx16(ToggleInputComponent, { type: "radio", ref, ...props });
   }),
-  switch: forwardRef9(function Switch({
+  switch: forwardRef12(function Switch({
     label,
     labelColor,
     errorText,
@@ -6486,9 +6506,9 @@ var ToggleInput_default = {
 };
 
 // src/components/Form.tsx
-import { Children, Fragment as Fragment4, memo as memo17, useMemo as useMemo6 } from "react";
+import { Children, forwardRef as forwardRef13, Fragment as Fragment5, memo as memo17, useMemo as useMemo6 } from "react";
 import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
-function Form({
+var FormComponent = forwardRef13(function Form({
   form,
   submitButtonText,
   submitButtonLoaderName,
@@ -6503,7 +6523,7 @@ function Form({
   onSubmit,
   children,
   ...props
-}) {
+}, ref) {
   const theme2 = useTheme();
   const submitButtonIsDisabledInternal = useMemo6(() => {
     if (!form || !form.requiredFields) return false;
@@ -6513,8 +6533,8 @@ function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
-  return /* @__PURE__ */ jsx17(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs12("form", { onSubmit: onSubmit ?? form?.onSubmit, children: [
-    gap !== void 0 || withDividers ? /* @__PURE__ */ jsx17(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs12(Fragment4, { children: [
+  return /* @__PURE__ */ jsx17(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs12("form", { onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
+    gap !== void 0 || withDividers ? /* @__PURE__ */ jsx17(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs12(Fragment5, { children: [
       child,
       index < Children.toArray(children).length - 1 && /* @__PURE__ */ jsx17(Divider_default.horizontal, {})
     ] }, index)) : children }) : children,
@@ -6542,13 +6562,14 @@ function Form({
       }
     )
   ] }) });
-}
-var Form_default = memo17(Form);
+});
+var Form2 = memo17(FormComponent);
+var Form_default = Form2;
 
 // src/components/FormRow.tsx
-import { forwardRef as forwardRef10, memo as memo18 } from "react";
+import { forwardRef as forwardRef14, memo as memo18 } from "react";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-var FormRowComponent = forwardRef10(function FormRow({ oneItemOnly, noBreakingPoint, gap, children, ...props }, ref) {
+var FormRowComponent = forwardRef14(function FormRow({ oneItemOnly, noBreakingPoint, gap, children, ...props }, ref) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const breakingPoint = !noBreakingPoint ? mediaQuery.size900 : false;
@@ -6558,7 +6579,7 @@ var FormRowComponent = forwardRef10(function FormRow({ oneItemOnly, noBreakingPo
     oneItemOnly && /* @__PURE__ */ jsx18(Div_default, { width: "100%" })
   ] });
 });
-FormRowComponent.withTitle = forwardRef10(function WithTitle({
+FormRowComponent.withTitle = forwardRef14(function WithTitle({
   icon,
   title,
   description,
@@ -6662,9 +6683,9 @@ ColorThemeSwitch2.withText = ColorThemeSwitchComponent.withText;
 var ColorThemeSwitch_default = ColorThemeSwitch2;
 
 // src/components/Table.tsx
-import { forwardRef as forwardRef11, memo as memo20, useCallback as useCallback10, useMemo as useMemo7, useState as useState8 } from "react";
+import { forwardRef as forwardRef15, memo as memo20, useCallback as useCallback10, useMemo as useMemo7, useState as useState8 } from "react";
 import styled10, { css as css2 } from "styled-components";
-import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultImageWidth = 120;
 var TableStyledComponent = styled10.table.withConfig({
   shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "colorTheme", "theme"].includes(prop)
@@ -6729,7 +6750,7 @@ var TdStyledComponent = styled10.td.withConfig({
 })`
    ${(props) => props.textAlign ? `text-align: ${props.textAlign} !important;` : ""}
 `;
-var TableComponent = forwardRef11(function Table({
+var TableComponent = forwardRef15(function Table({
   columns,
   data,
   isStriped,
@@ -6751,7 +6772,7 @@ var TableComponent = forwardRef11(function Table({
           return column.format ? column.format(item, index) : String(value ?? "");
         }
         case "element": {
-          return column.render?.(item, index) ?? /* @__PURE__ */ jsx20(Fragment5, {});
+          return column.render?.(item, index) ?? /* @__PURE__ */ jsx20(Fragment6, {});
         }
         case "image": {
           const { type, keyName, ...props2 } = column;
@@ -6776,7 +6797,7 @@ var TableComponent = forwardRef11(function Table({
           );
         }
         default: {
-          return /* @__PURE__ */ jsx20(Fragment5, {});
+          return /* @__PURE__ */ jsx20(Fragment6, {});
         }
       }
     },
@@ -6851,12 +6872,12 @@ var Table2 = memo20(TableComponent);
 var Table_default = Table2;
 
 // src/components/Tabs.tsx
-import { forwardRef as forwardRef12, memo as memo21, useCallback as useCallback11, useEffect as useEffect9, useImperativeHandle as useImperativeHandle2, useMemo as useMemo8, useRef as useRef5, useState as useState9 } from "react";
+import { forwardRef as forwardRef16, memo as memo21, useCallback as useCallback11, useEffect as useEffect9, useImperativeHandle as useImperativeHandle2, useMemo as useMemo8, useRef as useRef5, useState as useState9 } from "react";
 import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
 var defaultTabName = "tab";
-var TabsComponent = forwardRef12(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
+var TabsComponent = forwardRef16(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   const theme2 = useTheme();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
@@ -7042,11 +7063,11 @@ Tabs2.content = TabsComponent.content;
 var Tabs_default = Tabs2;
 
 // src/components/Foldable.tsx
-import { forwardRef as forwardRef13, memo as memo22, useCallback as useCallback12, useEffect as useEffect10, useImperativeHandle as useImperativeHandle3, useRef as useRef6, useState as useState10 } from "react";
+import { forwardRef as forwardRef17, memo as memo22, useCallback as useCallback12, useEffect as useEffect10, useImperativeHandle as useImperativeHandle3, useRef as useRef6, useState as useState10 } from "react";
 import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
-var FoldableComponent = forwardRef13(function Foldable({
+var FoldableComponent = forwardRef17(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
   title,
@@ -7140,7 +7161,7 @@ var FoldableComponent = forwardRef13(function Foldable({
     )
   ] });
 });
-FoldableComponent.box = forwardRef13(function Box3({ ...props }, ref) {
+FoldableComponent.box = forwardRef17(function Box3({ ...props }, ref) {
   const theme2 = useTheme();
   return /* @__PURE__ */ jsx22(
     FoldableComponent,