react-better-html 1.1.287 → 1.1.288

package/dist/index.mjs

@@ -1485,6 +1485,7 @@ Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, let
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const props = useComponentsPropsMerger(betterHtmlContextInternal.components.image?.style?.default, ImageProps3);
   const theme2 = useTheme4();
+  const lettersSplit = letters?.split(" ") ?? [];
   return letters ? /* @__PURE__ */ jsx3(
     Div_default.row,
     {
@@ -1498,7 +1499,7 @@ Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, let
       ...props,
       width: size,
       height: size,
-      children: /* @__PURE__ */ jsx3(Text_default, { fontSize: size / 2.5, fontWeight: 700, color: letterColor ?? theme2.colors.textPrimary, children: letters.toUpperCase().slice(0, 2) })
+      children: /* @__PURE__ */ jsx3(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__ */ jsx3(
     Image,
@@ -3800,6 +3801,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
     labelGap,
     errorText,
     infoText,
+    infoTextColor,
     required,
     name,
     disabled,
@@ -4046,6 +4048,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
       labelGap,
       errorText,
       infoText,
+      infoTextColor,
       required: withMultiselect ? (Array.isArray(value) ? value.length > 0 : value !== void 0) ? false : required : required,
       textAlign,
       name,
@@ -4698,6 +4701,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
     labelGap,
     errorText,
     infoText,
+    infoTextColor,
     leftIcon,
     rightIcon,
     prefix,
@@ -4863,7 +4867,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
         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
       }
     )
@@ -5867,6 +5871,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
   textAdvanced,
   errorText,
   infoText,
+  infoTextColor,
   size = componentSize,
   value,
   onChange,
@@ -5996,7 +6001,7 @@ var ToggleInputComponent = forwardRef12(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
       }
     )
@@ -6123,30 +6128,32 @@ var ToggleInput_default = {
 import { Children, forwardRef as forwardRef13, Fragment as Fragment7, memo as memo19, useMemo as useMemo7 } from "react";
 import { useTheme as useTheme21 } from "react-better-core";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
-var FormComponent = forwardRef13(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 = forwardRef13(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 = useTheme21();
   const submitButtonIsDisabledInternal = useMemo7(() => {
     if (!form || !form.requiredFields) return false;
@@ -6156,6 +6163,17 @@ var FormComponent = forwardRef13(function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
+  const cancelButton = /* @__PURE__ */ jsx20(
+    Button_default.secondary,
+    {
+      text: cancelButtonText ?? "Cancel",
+      isLoading: cancelButtonIsLoading,
+      loaderName: cancelButtonLoaderName,
+      disabled: cancelButtonIsDisabled,
+      id: cancelButtonId,
+      onClick: onClickCancel
+    }
+  );
   return /* @__PURE__ */ jsx20(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs16("form", { name, onSubmit: onSubmit ?? form?.onSubmit, id, ref, children: [
     gap !== void 0 || withDividers ? /* @__PURE__ */ jsx20(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs16(Fragment7, { children: [
       child,
@@ -6174,18 +6192,8 @@ var FormComponent = forwardRef13(function Form({
         gap: theme2.styles.gap,
         marginTop: theme2.styles.space,
         children: [
-          renderActionButtons,
-          onClickCancel && /* @__PURE__ */ jsx20(
-            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__ */ jsx20(
             SubmitButtonTag,
             {
@@ -6196,7 +6204,9 @@ var FormComponent = forwardRef13(function Form({
               id: submitButtonId,
               isSubmit: true
             }
-          )
+          ),
+          actionButtonsLocation === "left" && onClickCancel ? cancelButton : void 0,
+          actionButtonsLocation === "left" && renderActionButtons
         ]
       }
     )