react-better-html 1.1.287 → 1.1.288

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { OmitProps, IconName, AnyOtherString, AssetName, LoaderName, Country, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, PartialRecord, PickValue } from 'react-better-core';
+import { OmitProps, IconName, AnyOtherString, AssetName, LoaderName, Country, PartialRecord, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, PickValue } from 'react-better-core';
 export { API, APIConfigItem, APIEndpointConfig, APIError, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, calculateColorContrast, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, isApiError, lightenColor, loaderControls, log, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
@@ -104,6 +104,7 @@ type InputFieldProps = {
     labelGap?: React.CSSProperties["gap"];
     errorText?: string;
     infoText?: string;
+    infoTextColor?: React.CSSProperties["color"];
     leftIcon?: IconName | AnyOtherString;
     rightIcon?: IconName | AnyOtherString;
     prefix?: React.ReactNode;
@@ -319,6 +320,7 @@ type DropdownProps<Value = unknown, Data = unknown> = {
     labelGap?: React.CSSProperties["gap"];
     errorText?: string;
     infoText?: string;
+    infoTextColor?: React.CSSProperties["color"];
     /** @default false */
     required?: boolean;
     name?: string;
@@ -387,6 +389,7 @@ type InternalToggleInputProps<Value> = {
     textAdvanced?: React.ReactNode;
     errorText?: string;
     infoText?: string;
+    infoTextColor?: React.CSSProperties["color"];
     /** @default 26 */
     size?: number;
     value?: Value;
@@ -466,6 +469,102 @@ declare const _default$2: ImageComponent & {
     profileImage: typeof Image.profileImage;
 };
 
+declare function usePageResize(): {
+    width: number;
+    height: number;
+};
+declare function usePageScroll(): {
+    scrollX: number;
+    scrollY: number;
+};
+declare function useMediaQuery(): {
+    screenWidth: number;
+    size320: boolean;
+    size400: boolean;
+    size500: boolean;
+    size600: boolean;
+    size700: boolean;
+    size800: boolean;
+    size900: boolean;
+    size1000: boolean;
+    size1100: boolean;
+    size1200: boolean;
+    size1300: boolean;
+    size1400: boolean;
+    size1500: boolean;
+    size1600: boolean;
+};
+type FormFieldValue = string | number | boolean;
+declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | undefined>>(options: {
+    defaultValues: FormFields;
+    requiredFields?: (keyof FormFields)[];
+    onSubmit?: (values: FormFields) => void | Promise<void>;
+    validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
+}): {
+    values: FormFields;
+    errors: Partial<Record<keyof FormFields, string>>;
+    isSubmitting: boolean;
+    setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
+    setFieldsValue: (values: Partial<FormFields>) => void;
+    getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
+    getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
+    getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => any;
+    getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
+    getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
+    getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
+    focusField: (field: keyof FormFields) => void;
+    inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
+    textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
+    dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
+    toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
+    validate: () => {};
+    onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
+    reset: () => void;
+    requiredFields: (keyof FormFields)[] | undefined;
+    isDirty: boolean;
+    isValid: boolean;
+    canSubmit: boolean;
+};
+declare function useUrlQuery(): {
+    setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
+    getQuery: (name: string) => string | null;
+    removeQuery: (name: string, keepHistory?: boolean) => void;
+};
+
+type FormProps = {
+    form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
+    name?: string;
+    submitButtonText?: string;
+    submitButtonLoaderName?: LoaderName | AnyOtherString;
+    submitButtonIsLoading?: boolean;
+    submitButtonId?: string;
+    /** @default false */
+    submitButtonIsDisabled?: boolean;
+    cancelButtonText?: string;
+    cancelButtonLoaderName?: LoaderName | AnyOtherString;
+    cancelButtonIsLoading?: boolean;
+    cancelButtonId?: string;
+    /** @default false */
+    cancelButtonIsDisabled?: boolean;
+    /** @default "right" */
+    actionButtonsLocation?: "left" | "center" | "right";
+    gap?: React.CSSProperties["gap"];
+    /** @default false */
+    isDestructive?: boolean;
+    /** @default false */
+    withDividers?: boolean;
+    renderActionButtons?: React.ReactNode;
+    onClickCancel?: () => void;
+    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
+    id?: React.ComponentProps<"form">["id"];
+    children?: React.ReactNode;
+} & ComponentMarginProps;
+type FormComponentType = {
+    (props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
+};
+declare const FormComponent: FormComponentType;
+declare const Form: typeof FormComponent & {};
+
 type ComponentStyleConfig<ComponentProps, Subcomponents extends string> = {
     [key in Subcomponents]?: Partial<ComponentProps>;
 };
@@ -515,6 +614,9 @@ type BetterHtmlConfig = {
         chip?: {
             style?: ComponentStyleConfig<ChipProps, "default" | "colored">;
         };
+        form?: {
+            style?: ComponentStyleConfig<FormProps, "default">;
+        };
     };
 };
 
@@ -595,68 +697,6 @@ declare const isMobileDevice: boolean;
 
 type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
 
-declare function usePageResize(): {
-    width: number;
-    height: number;
-};
-declare function usePageScroll(): {
-    scrollX: number;
-    scrollY: number;
-};
-declare function useMediaQuery(): {
-    screenWidth: number;
-    size320: boolean;
-    size400: boolean;
-    size500: boolean;
-    size600: boolean;
-    size700: boolean;
-    size800: boolean;
-    size900: boolean;
-    size1000: boolean;
-    size1100: boolean;
-    size1200: boolean;
-    size1300: boolean;
-    size1400: boolean;
-    size1500: boolean;
-    size1600: boolean;
-};
-type FormFieldValue = string | number | boolean;
-declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | undefined>>(options: {
-    defaultValues: FormFields;
-    requiredFields?: (keyof FormFields)[];
-    onSubmit?: (values: FormFields) => void | Promise<void>;
-    validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
-}): {
-    values: FormFields;
-    errors: Partial<Record<keyof FormFields, string>>;
-    isSubmitting: boolean;
-    setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
-    setFieldsValue: (values: Partial<FormFields>) => void;
-    getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
-    getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
-    getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => any;
-    getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
-    getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
-    getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
-    focusField: (field: keyof FormFields) => void;
-    inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
-    textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
-    dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
-    toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
-    validate: () => {};
-    onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
-    reset: () => void;
-    requiredFields: (keyof FormFields)[] | undefined;
-    isDirty: boolean;
-    isValid: boolean;
-    canSubmit: boolean;
-};
-declare function useUrlQuery(): {
-    setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
-    getQuery: (name: string) => string | null;
-    removeQuery: (name: string, keepHistory?: boolean) => void;
-};
-
 declare const getBrowser: () => BrowserName | undefined;
 declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
 
@@ -839,40 +879,6 @@ declare const PageHolder: typeof PageHolderComponent & {
     center: typeof PageHolderComponent.center;
 };
 
-type FormProps = {
-    form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
-    name?: string;
-    submitButtonText?: string;
-    submitButtonLoaderName?: LoaderName | AnyOtherString;
-    submitButtonIsLoading?: boolean;
-    submitButtonId?: string;
-    /** @default false */
-    submitButtonIsDisabled?: boolean;
-    cancelButtonText?: string;
-    cancelButtonLoaderName?: LoaderName | AnyOtherString;
-    cancelButtonIsLoading?: boolean;
-    cancelButtonId?: string;
-    /** @default false */
-    cancelButtonIsDisabled?: boolean;
-    /** @default "right" */
-    actionButtonsLocation?: "left" | "center" | "right";
-    gap?: React.CSSProperties["gap"];
-    /** @default false */
-    isDestructive?: boolean;
-    /** @default false */
-    withDividers?: boolean;
-    renderActionButtons?: React.ReactNode;
-    onClickCancel?: () => void;
-    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
-    id?: React.ComponentProps<"form">["id"];
-    children?: React.ReactNode;
-} & ComponentMarginProps;
-type FormComponentType = {
-    (props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
-};
-declare const FormComponent: FormComponentType;
-declare const Form: typeof FormComponent & {};
-
 type FormRowProps = {
     oneItemOnly?: boolean;
     /**

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { OmitProps, IconName, AnyOtherString, AssetName, LoaderName, Country, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, PartialRecord, PickValue } from 'react-better-core';
+import { OmitProps, IconName, AnyOtherString, AssetName, LoaderName, Country, PartialRecord, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, PickValue } from 'react-better-core';
 export { API, APIConfigItem, APIEndpointConfig, APIError, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, calculateColorContrast, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, isApiError, lightenColor, loaderControls, log, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
@@ -104,6 +104,7 @@ type InputFieldProps = {
     labelGap?: React.CSSProperties["gap"];
     errorText?: string;
     infoText?: string;
+    infoTextColor?: React.CSSProperties["color"];
     leftIcon?: IconName | AnyOtherString;
     rightIcon?: IconName | AnyOtherString;
     prefix?: React.ReactNode;
@@ -319,6 +320,7 @@ type DropdownProps<Value = unknown, Data = unknown> = {
     labelGap?: React.CSSProperties["gap"];
     errorText?: string;
     infoText?: string;
+    infoTextColor?: React.CSSProperties["color"];
     /** @default false */
     required?: boolean;
     name?: string;
@@ -387,6 +389,7 @@ type InternalToggleInputProps<Value> = {
     textAdvanced?: React.ReactNode;
     errorText?: string;
     infoText?: string;
+    infoTextColor?: React.CSSProperties["color"];
     /** @default 26 */
     size?: number;
     value?: Value;
@@ -466,6 +469,102 @@ declare const _default$2: ImageComponent & {
     profileImage: typeof Image.profileImage;
 };
 
+declare function usePageResize(): {
+    width: number;
+    height: number;
+};
+declare function usePageScroll(): {
+    scrollX: number;
+    scrollY: number;
+};
+declare function useMediaQuery(): {
+    screenWidth: number;
+    size320: boolean;
+    size400: boolean;
+    size500: boolean;
+    size600: boolean;
+    size700: boolean;
+    size800: boolean;
+    size900: boolean;
+    size1000: boolean;
+    size1100: boolean;
+    size1200: boolean;
+    size1300: boolean;
+    size1400: boolean;
+    size1500: boolean;
+    size1600: boolean;
+};
+type FormFieldValue = string | number | boolean;
+declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | undefined>>(options: {
+    defaultValues: FormFields;
+    requiredFields?: (keyof FormFields)[];
+    onSubmit?: (values: FormFields) => void | Promise<void>;
+    validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
+}): {
+    values: FormFields;
+    errors: Partial<Record<keyof FormFields, string>>;
+    isSubmitting: boolean;
+    setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
+    setFieldsValue: (values: Partial<FormFields>) => void;
+    getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
+    getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
+    getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => any;
+    getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
+    getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
+    getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
+    focusField: (field: keyof FormFields) => void;
+    inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
+    textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
+    dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
+    toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
+    validate: () => {};
+    onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
+    reset: () => void;
+    requiredFields: (keyof FormFields)[] | undefined;
+    isDirty: boolean;
+    isValid: boolean;
+    canSubmit: boolean;
+};
+declare function useUrlQuery(): {
+    setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
+    getQuery: (name: string) => string | null;
+    removeQuery: (name: string, keepHistory?: boolean) => void;
+};
+
+type FormProps = {
+    form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
+    name?: string;
+    submitButtonText?: string;
+    submitButtonLoaderName?: LoaderName | AnyOtherString;
+    submitButtonIsLoading?: boolean;
+    submitButtonId?: string;
+    /** @default false */
+    submitButtonIsDisabled?: boolean;
+    cancelButtonText?: string;
+    cancelButtonLoaderName?: LoaderName | AnyOtherString;
+    cancelButtonIsLoading?: boolean;
+    cancelButtonId?: string;
+    /** @default false */
+    cancelButtonIsDisabled?: boolean;
+    /** @default "right" */
+    actionButtonsLocation?: "left" | "center" | "right";
+    gap?: React.CSSProperties["gap"];
+    /** @default false */
+    isDestructive?: boolean;
+    /** @default false */
+    withDividers?: boolean;
+    renderActionButtons?: React.ReactNode;
+    onClickCancel?: () => void;
+    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
+    id?: React.ComponentProps<"form">["id"];
+    children?: React.ReactNode;
+} & ComponentMarginProps;
+type FormComponentType = {
+    (props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
+};
+declare const FormComponent: FormComponentType;
+declare const Form: typeof FormComponent & {};
+
 type ComponentStyleConfig<ComponentProps, Subcomponents extends string> = {
     [key in Subcomponents]?: Partial<ComponentProps>;
 };
@@ -515,6 +614,9 @@ type BetterHtmlConfig = {
         chip?: {
             style?: ComponentStyleConfig<ChipProps, "default" | "colored">;
         };
+        form?: {
+            style?: ComponentStyleConfig<FormProps, "default">;
+        };
     };
 };
 
@@ -595,68 +697,6 @@ declare const isMobileDevice: boolean;
 
 type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
 
-declare function usePageResize(): {
-    width: number;
-    height: number;
-};
-declare function usePageScroll(): {
-    scrollX: number;
-    scrollY: number;
-};
-declare function useMediaQuery(): {
-    screenWidth: number;
-    size320: boolean;
-    size400: boolean;
-    size500: boolean;
-    size600: boolean;
-    size700: boolean;
-    size800: boolean;
-    size900: boolean;
-    size1000: boolean;
-    size1100: boolean;
-    size1200: boolean;
-    size1300: boolean;
-    size1400: boolean;
-    size1500: boolean;
-    size1600: boolean;
-};
-type FormFieldValue = string | number | boolean;
-declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | undefined>>(options: {
-    defaultValues: FormFields;
-    requiredFields?: (keyof FormFields)[];
-    onSubmit?: (values: FormFields) => void | Promise<void>;
-    validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
-}): {
-    values: FormFields;
-    errors: Partial<Record<keyof FormFields, string>>;
-    isSubmitting: boolean;
-    setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
-    setFieldsValue: (values: Partial<FormFields>) => void;
-    getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
-    getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
-    getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => any;
-    getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
-    getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
-    getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
-    focusField: (field: keyof FormFields) => void;
-    inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
-    textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
-    dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
-    toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
-    validate: () => {};
-    onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
-    reset: () => void;
-    requiredFields: (keyof FormFields)[] | undefined;
-    isDirty: boolean;
-    isValid: boolean;
-    canSubmit: boolean;
-};
-declare function useUrlQuery(): {
-    setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
-    getQuery: (name: string) => string | null;
-    removeQuery: (name: string, keepHistory?: boolean) => void;
-};
-
 declare const getBrowser: () => BrowserName | undefined;
 declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
 
@@ -839,40 +879,6 @@ declare const PageHolder: typeof PageHolderComponent & {
     center: typeof PageHolderComponent.center;
 };
 
-type FormProps = {
-    form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
-    name?: string;
-    submitButtonText?: string;
-    submitButtonLoaderName?: LoaderName | AnyOtherString;
-    submitButtonIsLoading?: boolean;
-    submitButtonId?: string;
-    /** @default false */
-    submitButtonIsDisabled?: boolean;
-    cancelButtonText?: string;
-    cancelButtonLoaderName?: LoaderName | AnyOtherString;
-    cancelButtonIsLoading?: boolean;
-    cancelButtonId?: string;
-    /** @default false */
-    cancelButtonIsDisabled?: boolean;
-    /** @default "right" */
-    actionButtonsLocation?: "left" | "center" | "right";
-    gap?: React.CSSProperties["gap"];
-    /** @default false */
-    isDestructive?: boolean;
-    /** @default false */
-    withDividers?: boolean;
-    renderActionButtons?: React.ReactNode;
-    onClickCancel?: () => void;
-    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
-    id?: React.ComponentProps<"form">["id"];
-    children?: React.ReactNode;
-} & ComponentMarginProps;
-type FormComponentType = {
-    (props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
-};
-declare const FormComponent: FormComponentType;
-declare const Form: typeof FormComponent & {};
-
 type FormRowProps = {
     oneItemOnly?: boolean;
     /**

package/dist/index.js

@@ -1558,6 +1558,7 @@ Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const props = useComponentsPropsMerger(betterHtmlContextInternal.components.image?.style?.default, ImageProps3);
   const theme2 = (0, import_react_better_core4.useTheme)();
+  const lettersSplit = letters?.split(" ") ?? [];
   return letters ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Div_default.row,
     {
@@ -1571,7 +1572,7 @@ Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size
       ...props,
       width: size,
       height: size,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, color: letterColor ?? theme2.colors.textPrimary, children: letters.toUpperCase().slice(0, 2) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, color: letterColor ?? theme2.colors.textPrimary, children: lettersSplit.length > 1 ? lettersSplit[0][0] + (lettersSplit.at(-1)?.[0] ?? lettersSplit[0][1] ?? "") : letters.toUpperCase().slice(0, 2) })
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Image,
@@ -3851,6 +3852,7 @@ var DropdownComponent = (0, import_react19.forwardRef)(function Dropdown(dropdow
     labelGap,
     errorText,
     infoText,
+    infoTextColor,
     required,
     name,
     disabled,
@@ -4097,6 +4099,7 @@ var DropdownComponent = (0, import_react19.forwardRef)(function Dropdown(dropdow
       labelGap,
       errorText,
       infoText,
+      infoTextColor,
       required: withMultiselect ? (Array.isArray(value) ? value.length > 0 : value !== void 0) ? false : required : required,
       textAlign,
       name,
@@ -4749,6 +4752,7 @@ var InputFieldComponent = (0, import_react22.forwardRef)(function InputField(inp
     labelGap,
     errorText,
     infoText,
+    infoTextColor,
     leftIcon,
     rightIcon,
     prefix,
@@ -4914,7 +4918,7 @@ var InputFieldComponent = (0, import_react22.forwardRef)(function InputField(inp
         as: "span",
         display: "block",
         fontSize: 14,
-        color: errorText ? theme2.colors.error : labelColor ?? theme2.colors.textSecondary,
+        color: errorText ? theme2.colors.error : infoTextColor ?? labelColor ?? theme2.colors.textSecondary,
         children: errorText || infoText
       }
     )
@@ -5918,6 +5922,7 @@ var ToggleInputComponent = (0, import_react23.forwardRef)(function ToggleInput({
   textAdvanced,
   errorText,
   infoText,
+  infoTextColor,
   size = componentSize,
   value,
   onChange,
@@ -6047,7 +6052,7 @@ var ToggleInputComponent = (0, import_react23.forwardRef)(function ToggleInput({
         as: "span",
         display: "block",
         fontSize: 14,
-        color: errorText ? theme2.colors.error : labelColor ?? theme2.colors.textSecondary,
+        color: errorText ? theme2.colors.error : infoTextColor ?? labelColor ?? theme2.colors.textSecondary,
         children: errorText || infoText
       }
     )
@@ -6174,30 +6179,32 @@ var ToggleInput_default = {
 var import_react24 = require("react");
 var import_react_better_core21 = require("react-better-core");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var FormComponent = (0, import_react24.forwardRef)(function Form({
-  form,
-  name,
-  submitButtonText,
-  submitButtonLoaderName,
-  submitButtonIsLoading,
-  submitButtonId,
-  submitButtonIsDisabled,
-  cancelButtonText,
-  cancelButtonLoaderName,
-  cancelButtonIsLoading,
-  cancelButtonId,
-  cancelButtonIsDisabled,
-  actionButtonsLocation = "right",
-  gap,
-  isDestructive,
-  withDividers,
-  renderActionButtons,
-  onClickCancel,
-  onSubmit,
-  id,
-  children,
-  ...props
-}, ref) {
+var FormComponent = (0, import_react24.forwardRef)(function Form(formProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const {
+    form,
+    name,
+    submitButtonText,
+    submitButtonLoaderName,
+    submitButtonIsLoading,
+    submitButtonId,
+    submitButtonIsDisabled,
+    cancelButtonText,
+    cancelButtonLoaderName,
+    cancelButtonIsLoading,
+    cancelButtonId,
+    cancelButtonIsDisabled,
+    actionButtonsLocation = "right",
+    gap,
+    isDestructive,
+    withDividers,
+    renderActionButtons,
+    onClickCancel,
+    onSubmit,
+    id,
+    children,
+    ...props
+  } = useComponentsPropsMerger(betterHtmlContextInternal.components.form?.style?.default, formProps);
   const theme2 = (0, import_react_better_core21.useTheme)();
   const submitButtonIsDisabledInternal = (0, import_react24.useMemo)(() => {
     if (!form || !form.requiredFields) return false;
@@ -6207,6 +6214,17 @@ var FormComponent = (0, import_react24.forwardRef)(function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
+  const cancelButton = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    Button_default.secondary,
+    {
+      text: cancelButtonText ?? "Cancel",
+      isLoading: cancelButtonIsLoading,
+      loaderName: cancelButtonLoaderName,
+      disabled: cancelButtonIsDisabled,
+      id: cancelButtonId,
+      onClick: onClickCancel
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("form", { name, onSubmit: onSubmit ?? form?.onSubmit, id, ref, children: [
     gap !== void 0 || withDividers ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? import_react24.Children.toArray(children).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react24.Fragment, { children: [
       child,
@@ -6225,18 +6243,8 @@ var FormComponent = (0, import_react24.forwardRef)(function Form({
         gap: theme2.styles.gap,
         marginTop: theme2.styles.space,
         children: [
-          renderActionButtons,
-          onClickCancel && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            Button_default.secondary,
-            {
-              text: cancelButtonText ?? "Cancel",
-              isLoading: cancelButtonIsLoading,
-              loaderName: cancelButtonLoaderName,
-              disabled: cancelButtonIsDisabled,
-              id: cancelButtonId,
-              onClick: onClickCancel
-            }
-          ),
+          actionButtonsLocation === "right" && renderActionButtons,
+          actionButtonsLocation === "right" && onClickCancel ? cancelButton : void 0,
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             SubmitButtonTag,
             {
@@ -6247,7 +6255,9 @@ var FormComponent = (0, import_react24.forwardRef)(function Form({
               id: submitButtonId,
               isSubmit: true
             }
-          )
+          ),
+          actionButtonsLocation === "left" && onClickCancel ? cancelButton : void 0,
+          actionButtonsLocation === "left" && renderActionButtons
         ]
       }
     )