react-better-html 1.1.101 → 1.1.103

package/dist/index.d.mts

@@ -152,7 +152,7 @@ type IconProps = {
 type IconComponent = {
     (props: ComponentPropWithRef<SVGSVGElement, IconProps>): React.ReactElement;
 };
-declare const _default$8: IconComponent;
+declare const _default$5: IconComponent;
 
 type AssetName = "logo";
 type AssetsConfig = Record<AssetName, string> & {
@@ -172,7 +172,7 @@ type ImageComponent = {
     }>) => React.ReactElement;
 };
 declare const Image: ImageComponent;
-declare const _default$7: ImageComponent & {
+declare const _default$4: ImageComponent & {
     profileImage: typeof Image.profileImage;
 };
 
@@ -255,9 +255,13 @@ type HorizontalDividerProps = DividerProps & {
     /** @default textSecondary */
     textColor?: string;
 };
-declare const _default$6: {
-    vertical: react.NamedExoticComponent<VerticalDividerProps>;
-    horizontal: react.NamedExoticComponent<HorizontalDividerProps>;
+type DividerComponentType = {
+    vertical: (props: ComponentPropWithRef<HTMLDivElement, VerticalDividerProps>) => React.ReactElement;
+    horizontal: (props: ComponentPropWithRef<HTMLDivElement, HorizontalDividerProps>) => React.ReactElement;
+};
+declare const _default$3: {
+    vertical: DividerComponentType["vertical"];
+    horizontal: DividerComponentType["horizontal"];
 };
 
 type ModalProps = {
@@ -306,10 +310,17 @@ declare const Modal: typeof ModalComponent & {
 type PageHolderProps = {
     /** @default false */
     noMaxContentWidth?: boolean;
+    backgroundColor?: string;
     children?: React.ReactNode;
 } & ComponentPaddingProps;
-declare function PageHolder({ noMaxContentWidth, children, ...props }: PageHolderProps): react_jsx_runtime.JSX.Element;
-declare const _default$5: react.MemoExoticComponent<typeof PageHolder>;
+type PageHolderComponentType = {
+    (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
+    center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>) => React.ReactElement;
+};
+declare const PageHolderComponent: PageHolderComponentType;
+declare const PageHolder: typeof PageHolderComponent & {
+    center: typeof PageHolderComponent.center;
+};
 
 type PageHeaderProps = {
     imageUrl?: string;
@@ -323,8 +334,11 @@ type PageHeaderProps = {
     /** @default false */
     lightMode?: boolean;
 } & Pick<ComponentMarginProps, "marginBottom">;
-declare function PageHeader({ imageUrl, imageSize, title, titleAs, titleRightElement, description, textAlign, rightElement, lightMode, marginBottom, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
-declare const _default$4: react.MemoExoticComponent<typeof PageHeader>;
+type PageHeaderComponentType = {
+    (props: ComponentPropWithRef<HTMLDivElement, PageHeaderProps>): React.ReactElement;
+};
+declare const PageHeaderComponent: PageHeaderComponentType;
+declare const PageHeader: typeof PageHeaderComponent & {};
 
 type ChipProps = {
     text: string;
@@ -466,7 +480,7 @@ type InternalToggleInputProps<Value> = {
 } & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange"> & ComponentStyle & ComponentHoverStyle;
 type ToggleInputProps<Value> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
 type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
-declare const _default$3: {
+declare const _default$2: {
     checkbox: ToggleInputComponentType;
     radiobutton: ToggleInputComponentType;
     switch: ToggleInputComponentType;
@@ -557,8 +571,11 @@ type FormProps = {
     onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
-declare function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId, submitButtonIsDisabled, actionButtonsLocation, gap, isSubmitting, isDestructive, withDividers, onClickCancel, onSubmit, children, ...props }: FormProps): react_jsx_runtime.JSX.Element;
-declare const _default$2: react.MemoExoticComponent<typeof Form>;
+type FormComponentType = {
+    (props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
+};
+declare const FormComponent: FormComponentType;
+declare const Form: typeof FormComponent & {};
 
 type LabelProps = {
     text?: string;
@@ -790,4 +807,4 @@ declare const isMobileDevice: boolean;
 
 declare const reactRouterDomPlugin: BetterHtmlPlugin;
 
-export { 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 DeepPartialRecord, Div, type DivProps, _default$6 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, _default$2 as Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$8 as Icon, type IconName, type IconProps, type IconsConfig, _default$7 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, _default$4 as PageHeader, type PageHeaderProps, _default$5 as PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$3 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { 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 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, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.d.ts

@@ -152,7 +152,7 @@ type IconProps = {
 type IconComponent = {
     (props: ComponentPropWithRef<SVGSVGElement, IconProps>): React.ReactElement;
 };
-declare const _default$8: IconComponent;
+declare const _default$5: IconComponent;
 
 type AssetName = "logo";
 type AssetsConfig = Record<AssetName, string> & {
@@ -172,7 +172,7 @@ type ImageComponent = {
     }>) => React.ReactElement;
 };
 declare const Image: ImageComponent;
-declare const _default$7: ImageComponent & {
+declare const _default$4: ImageComponent & {
     profileImage: typeof Image.profileImage;
 };
 
@@ -255,9 +255,13 @@ type HorizontalDividerProps = DividerProps & {
     /** @default textSecondary */
     textColor?: string;
 };
-declare const _default$6: {
-    vertical: react.NamedExoticComponent<VerticalDividerProps>;
-    horizontal: react.NamedExoticComponent<HorizontalDividerProps>;
+type DividerComponentType = {
+    vertical: (props: ComponentPropWithRef<HTMLDivElement, VerticalDividerProps>) => React.ReactElement;
+    horizontal: (props: ComponentPropWithRef<HTMLDivElement, HorizontalDividerProps>) => React.ReactElement;
+};
+declare const _default$3: {
+    vertical: DividerComponentType["vertical"];
+    horizontal: DividerComponentType["horizontal"];
 };
 
 type ModalProps = {
@@ -306,10 +310,17 @@ declare const Modal: typeof ModalComponent & {
 type PageHolderProps = {
     /** @default false */
     noMaxContentWidth?: boolean;
+    backgroundColor?: string;
     children?: React.ReactNode;
 } & ComponentPaddingProps;
-declare function PageHolder({ noMaxContentWidth, children, ...props }: PageHolderProps): react_jsx_runtime.JSX.Element;
-declare const _default$5: react.MemoExoticComponent<typeof PageHolder>;
+type PageHolderComponentType = {
+    (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
+    center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>) => React.ReactElement;
+};
+declare const PageHolderComponent: PageHolderComponentType;
+declare const PageHolder: typeof PageHolderComponent & {
+    center: typeof PageHolderComponent.center;
+};
 
 type PageHeaderProps = {
     imageUrl?: string;
@@ -323,8 +334,11 @@ type PageHeaderProps = {
     /** @default false */
     lightMode?: boolean;
 } & Pick<ComponentMarginProps, "marginBottom">;
-declare function PageHeader({ imageUrl, imageSize, title, titleAs, titleRightElement, description, textAlign, rightElement, lightMode, marginBottom, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
-declare const _default$4: react.MemoExoticComponent<typeof PageHeader>;
+type PageHeaderComponentType = {
+    (props: ComponentPropWithRef<HTMLDivElement, PageHeaderProps>): React.ReactElement;
+};
+declare const PageHeaderComponent: PageHeaderComponentType;
+declare const PageHeader: typeof PageHeaderComponent & {};
 
 type ChipProps = {
     text: string;
@@ -466,7 +480,7 @@ type InternalToggleInputProps<Value> = {
 } & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange"> & ComponentStyle & ComponentHoverStyle;
 type ToggleInputProps<Value> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
 type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
-declare const _default$3: {
+declare const _default$2: {
     checkbox: ToggleInputComponentType;
     radiobutton: ToggleInputComponentType;
     switch: ToggleInputComponentType;
@@ -557,8 +571,11 @@ type FormProps = {
     onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
-declare function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId, submitButtonIsDisabled, actionButtonsLocation, gap, isSubmitting, isDestructive, withDividers, onClickCancel, onSubmit, children, ...props }: FormProps): react_jsx_runtime.JSX.Element;
-declare const _default$2: react.MemoExoticComponent<typeof Form>;
+type FormComponentType = {
+    (props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
+};
+declare const FormComponent: FormComponentType;
+declare const Form: typeof FormComponent & {};
 
 type LabelProps = {
     text?: string;
@@ -790,4 +807,4 @@ declare const isMobileDevice: boolean;
 
 declare const reactRouterDomPlugin: BetterHtmlPlugin;
 
-export { 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 DeepPartialRecord, Div, type DivProps, _default$6 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, _default$2 as Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$8 as Icon, type IconName, type IconProps, type IconsConfig, _default$7 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, _default$4 as PageHeader, type PageHeaderProps, _default$5 as PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$3 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { 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 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, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.js

@@ -2833,33 +2833,32 @@ var Button_default = Button2;
 var import_react10 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var Divider_default = {
-  vertical: (0, import_react10.memo)(function Divider({ width = 1, backgroundColor, height, ...props }) {
-    const theme2 = useTheme();
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      Div_default,
-      {
-        width,
-        height: height ?? "100%",
-        flexShrink: 0,
-        backgroundColor: backgroundColor ?? theme2.colors.border,
-        ...props
-      }
-    );
-  }),
-  horizontal: (0, import_react10.memo)(function Divider2({
-    width = 1,
-    backgroundColor,
-    text,
-    textColor,
-    ...props
-  }) {
-    const theme2 = useTheme();
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
-      text && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text_default, { color: textColor ?? theme2.colors.textSecondary, children: text }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
-    ] });
-  })
+  vertical: (0, import_react10.memo)(
+    (0, import_react10.forwardRef)(function Divider({ width = 1, backgroundColor, height, ...props }, ref) {
+      const theme2 = useTheme();
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Div_default,
+        {
+          width,
+          height: height ?? "100%",
+          flexShrink: 0,
+          backgroundColor: backgroundColor ?? theme2.colors.border,
+          ...props,
+          ref
+        }
+      );
+    })
+  ),
+  horizontal: (0, import_react10.memo)(
+    (0, import_react10.forwardRef)(function Divider2({ width = 1, backgroundColor, text, textColor, ...props }, ref) {
+      const theme2 = useTheme();
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, ref, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
+        text && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text_default, { color: textColor ?? theme2.colors.textSecondary, children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
+      ] });
+    })
+  )
 };
 
 // src/components/Modal.tsx
@@ -3131,7 +3130,7 @@ var Modal_default = Modal2;
 // src/components/PageHolder.tsx
 var import_react12 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function PageHolder({ noMaxContentWidth, children, ...props }) {
+var PageHolderComponent = (0, import_react12.forwardRef)(function PageHolder({ noMaxContentWidth, backgroundColor, children, ...props }, ref) {
   const theme2 = useTheme();
   const { app } = useBetterHtmlContextInternal();
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -3140,19 +3139,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 = (0, import_react12.memo)(PageHolder);
+});
+PageHolderComponent.center = (0, import_react12.forwardRef)(function Center(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
+});
+var PageHolder2 = (0, import_react12.memo)(PageHolderComponent);
+PageHolder2.center = PageHolderComponent.center;
+var PageHolder_default = PageHolder2;
 
 // src/components/PageHeader.tsx
 var import_react13 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function PageHeader({
+var PageHeaderComponent = (0, import_react13.forwardRef)(function PageHeader({
   imageUrl,
   imageSize = 60,
   title,
@@ -3163,56 +3169,66 @@ function PageHeader({
   rightElement,
   lightMode,
   marginBottom
-}) {
+}, ref) {
   const theme2 = useTheme();
   const { app } = useBetterHtmlContextInternal();
   const mediaQuery = useMediaQuery();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.space, marginBottom: marginBottom ?? theme2.styles.space * 2, children: [
-    imageUrl && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      Div_default.column,
-      {
-        alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
-        flex: 1,
-        gap: theme2.styles.gap / 2,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-            Div_default.row,
-            {
-              alignItems: "center",
-              justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
-              gap: theme2.styles.space,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  Text_default,
-                  {
-                    as: titleAs ?? "h1",
-                    textAlign,
-                    color: lightMode ? theme2.colors.base : theme2.colors.textPrimary,
-                    children: title
-                  }
-                ),
-                titleRightElement
-              ]
-            }
-          ),
-          description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            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 = (0, import_react13.memo)(PageHeader);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    Div_default.row,
+    {
+      alignItems: "center",
+      gap: theme2.styles.space,
+      marginBottom: marginBottom ?? theme2.styles.space * 2,
+      ref,
+      children: [
+        imageUrl && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          Div_default.column,
+          {
+            alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
+            flex: 1,
+            gap: theme2.styles.gap / 2,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                Div_default.row,
+                {
+                  alignItems: "center",
+                  justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
+                  gap: theme2.styles.space,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      Text_default,
+                      {
+                        as: titleAs ?? "h1",
+                        textAlign,
+                        color: lightMode ? theme2.colors.base : theme2.colors.textPrimary,
+                        children: title
+                      }
+                    ),
+                    titleRightElement
+                  ]
+                }
+              ),
+              description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                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 = (0, import_react13.memo)(PageHeaderComponent);
+var PageHeader_default = PageHeader2;
 
 // src/components/Chip.tsx
 var import_react14 = require("react");
@@ -5919,6 +5935,7 @@ InputFieldComponent.phoneNumber = (0, import_react18.forwardRef)(function PhoneN
           inputFieldClassName: "react-better-html-phone-number-holder",
           defaultValue,
           value: dropdownValue,
+          disabled: props.disabled,
           onChange: setDropdownValue,
           withoutClearButton: true
         }
@@ -6241,6 +6258,9 @@ InputFieldComponent.color = (0, import_react18.forwardRef)(function Color2({ val
     },
     [onChangeValue]
   );
+  (0, import_react18.useEffect)(() => {
+    setInputFieldValue(value);
+  }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     InputFieldComponent,
     {
@@ -6567,7 +6587,7 @@ var ToggleInput_default = {
 // src/components/Form.tsx
 var import_react20 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function Form({
+var FormComponent = (0, import_react20.forwardRef)(function Form({
   form,
   submitButtonText,
   submitButtonLoaderName,
@@ -6582,7 +6602,7 @@ function Form({
   onSubmit,
   children,
   ...props
-}) {
+}, ref) {
   const theme2 = useTheme();
   const submitButtonIsDisabledInternal = (0, import_react20.useMemo)(() => {
     if (!form || !form.requiredFields) return false;
@@ -6592,7 +6612,7 @@ function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("form", { onSubmit: onSubmit ?? form?.onSubmit, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("form", { onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
     gap !== void 0 || withDividers ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? import_react20.Children.toArray(children).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react20.Fragment, { children: [
       child,
       index < import_react20.Children.toArray(children).length - 1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Divider_default.horizontal, {})
@@ -6621,8 +6641,9 @@ function Form({
       }
     )
   ] }) });
-}
-var Form_default = (0, import_react20.memo)(Form);
+});
+var Form2 = (0, import_react20.memo)(FormComponent);
+var Form_default = Form2;
 
 // src/components/FormRow.tsx
 var import_react21 = require("react");