react-better-html 1.1.140 → 1.1.142

package/dist/index.mjs

@@ -2348,6 +2348,7 @@ function AlertsHolder() {
       gap: theme2.styles.gap,
       alignItems: pluginConfig.align === "center" ? "center" : pluginConfig.align === "right" ? "flex-end" : void 0,
       transform: pluginConfig.align === "center" ? "translateX(-50%)" : void 0,
+      zIndex: 1e3,
       children: alerts.map((alert) => /* @__PURE__ */ jsx7(Alert_default, { alert }, alert.id))
     }
   );
@@ -6902,7 +6903,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
     onChange?.(newIsChecked, value);
   }, [checked, controlledChecked, onChange, value]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs13(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
+  return /* @__PURE__ */ jsxs13(Div_default.column, { gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
     label && /* @__PURE__ */ jsx18(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
     /* @__PURE__ */ jsxs13(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsxs13(Div_default.row, { position: "relative", alignItems: "center", children: [
@@ -7121,10 +7122,10 @@ var Form_default = Form2;
 // src/components/FormRow.tsx
 import { forwardRef as forwardRef14, memo as memo20 } from "react";
 import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
-var FormRowComponent = forwardRef14(function FormRow({ oneItemOnly, noBreakingPoint, gap, children, ...props }, ref) {
+var FormRowComponent = forwardRef14(function FormRow({ oneItemOnly, noBreakingPoint, asColumn, gap, children, ...props }, ref) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
-  const breakingPoint = !noBreakingPoint ? mediaQuery.size900 : false;
+  const breakingPoint = asColumn ?? (!noBreakingPoint ? mediaQuery.size900 : false);
   const readyGap = breakingPoint || noBreakingPoint && mediaQuery.size900 ? theme2.styles.gap : theme2.styles.space * 2;
   return /* @__PURE__ */ jsxs15(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
     children,
@@ -7135,6 +7136,7 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
   icon,
   title,
   description,
+  isLoading,
   withActions,
   saveButtonLoaderName,
   resetButtonLoaderName,
@@ -7145,21 +7147,36 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
 }, ref) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
+  const titleGap = theme2.styles.space;
   return /* @__PURE__ */ jsxs15(FormRowComponent, { ...props, ref, children: [
-    /* @__PURE__ */ jsxs15(Div_default.row, { width: "100%", alignItems: "center", gap: theme2.styles.space, children: [
+    /* @__PURE__ */ jsxs15(Div_default.row, { width: "100%", alignItems: "center", gap: titleGap, children: [
       icon && /* @__PURE__ */ jsx20(Icon_default, { name: icon }),
       /* @__PURE__ */ jsxs15(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
         /* @__PURE__ */ jsx20(Text_default, { as: "h3", children: title }),
         description && /* @__PURE__ */ jsx20(Text_default, { color: theme2.colors.textSecondary, children: description })
-      ] })
+      ] }),
+      isLoading && /* @__PURE__ */ jsx20(Div_default, { width: 26 - titleGap })
     ] }),
     /* @__PURE__ */ jsxs15(
       Div_default.row,
       {
+        position: "relative",
         width: props.noBreakingPoint && mediaQuery.size900 ? void 0 : "100%",
         alignItems: "center",
         gap: theme2.styles.gap,
         children: [
+          /* @__PURE__ */ jsx20(
+            Div_default,
+            {
+              position: "absolute",
+              top: "50%",
+              right: `calc(100% + ${theme2.styles.space}px)`,
+              transform: "translateY(-50%)",
+              opacity: !isLoading ? 0 : void 0,
+              pointerEvents: !isLoading ? "none" : void 0,
+              children: /* @__PURE__ */ jsx20(Loader_default, {})
+            }
+          ),
           children,
           withActions && /* @__PURE__ */ jsxs15(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
             onClickReset && /* @__PURE__ */ jsx20(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),