@multiplatform.one/frappe-ui 7.66.0 → 7.67.0

package/dist/cjs/FormSidebar.cjs

@@ -44,14 +44,6 @@ var import_react2 = __toESM(require("react"));
 var import_react_i18next = require("react-i18next");
 var import_tamagui = require("tamagui");
 var import_jsx_runtime = require("react/jsx-runtime");
-const avatarColors = ["$orange4", "$blue4", "$purple4", "$pink4"];
-function avatarColor(index) {
-  return avatarColors[index % avatarColors.length];
-}
-const textColors = ["$orange11", "$blue11", "$purple11", "$pink11"];
-function textColor(index) {
-  return textColors[index % textColors.length];
-}
 function FormSidebar({
   imageUrl,
   imageLabel,
@@ -59,7 +51,9 @@ function FormSidebar({
   onImageRemove,
   sections = [],
   metadata = [],
-  ...stackProps
+  width = 280,
+  divider = true,
+  "data-testid": testID
 }) {
   const {
     t
@@ -73,194 +67,101 @@ function FormSidebar({
   const [erroredUrl, setErroredUrl] = import_react2.default.useState();
   const imageBroken = Boolean(imageUrl) && erroredUrl === imageUrl;
   const sz = knobProps.sizeToken;
-  const avatarSize = sz === "$3" ? "$1" : sz === "$5" ? "$3" : "$2";
   const imageSize = sz === "$3" ? 160 : sz === "$5" ? 240 : 200;
   const resolvedImageLabel = imageLabel ?? t("Document image");
-  const showImageBlock = Boolean(imageUrl) || Boolean(onImageAdd);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    ...knobProps.containerRadius,
-    ...knobProps.panelPadding,
-    ...knobProps.gapLg,
-    width: 280,
-    ...(import_tamagui.isWeb ? {
-      borderInlineEndWidth: 1,
-      borderInlineEndStyle: "solid",
-      borderInlineEndColor: "$borderColor"
+  const imageBlock = imageUrl || onImageAdd ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    alignItems: "center",
+    gap: "$2",
+    children: [imageUrl ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Image, {
+      ...knobProps.containerRadius,
+      src: imageBroken ? void 0 : imageUrl,
+      alt: resolvedImageLabel,
+      width: imageSize,
+      height: imageSize,
+      objectFit: "contain",
+      onError: () => setErroredUrl(imageUrl)
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      chromeless: true,
+      icon: import_react.ImageSquareIcon,
+      "aria-label": t("Add image"),
+      onPress: onImageAdd
+    }), imageBroken ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      color: knobProps.textAccentColor,
+      ...knobProps.label,
+      children: t("Image failed to load")
+    }) : null, imageUrl && (onImageAdd || onImageRemove) ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$2",
+      children: [onImageAdd ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        chromeless: true,
+        icon: import_react.UploadIcon,
+        "aria-label": t("Replace image"),
+        onPress: onImageAdd
+      }) : null, onImageRemove ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        chromeless: true,
+        icon: import_react.XIcon,
+        "aria-label": t("Remove image"),
+        onPress: onImageRemove
+      }) : null]
+    }) : null]
+  }) : null;
+  const railSections = [...(imageBlock ? [{
+    items: [],
+    content: imageBlock
+  }] : []), ...sections.map(section => ({
+    title: section.title,
+    icon: section.icon,
+    action: section.onAdd ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: "$2",
+      chromeless: true,
+      icon: import_react.PlusIcon,
+      "aria-label": t("Add {{section}}", {
+        section: section.title
+      }),
+      onPress: section.onAdd
+    }) : void 0,
+    ...(section.render ? {
+      items: [],
+      content: section.render()
     } : {
-      borderEndWidth: 1,
-      borderEndColor: "$borderColor"
-    }),
-    ...stackProps,
-    children: [showImageBlock && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        alignItems: "center",
-        gap: "$2",
-        children: [imageUrl && !imageBroken ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
-          ...knobProps.containerRadius,
-          src: imageUrl,
-          alt: resolvedImageLabel,
-          width: imageSize,
-          height: imageSize,
-          objectFit: "contain",
-          onError: () => setErroredUrl(imageUrl)
-        }) : imageUrl && imageBroken ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          ...knobProps.containerRadius,
-          width: imageSize,
-          height: imageSize,
-          alignItems: "center",
-          justifyContent: "center",
-          gap: "$2",
-          borderWidth: 1,
-          borderStyle: "dashed",
-          borderColor: "$borderColor",
-          "aria-label": resolvedImageLabel,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ImageSquareIcon, {
-            size: iconSize * 2,
-            color: placeholderIconColor
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            color: knobProps.textAccentColor,
-            ...knobProps.label,
-            children: t("Image failed to load")
-          })]
-        }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          role: "button",
-          tabIndex: 0,
-          onPress: onImageAdd,
-          "aria-label": t("Add image"),
-          width: imageSize,
-          height: imageSize,
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "pointer",
-          gap: "$2",
-          ...knobProps.containerRadius,
-          borderWidth: 1,
-          borderStyle: "dashed",
-          borderColor: "$borderColor",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ImageSquareIcon, {
-            size: iconSize * 2,
-            color: placeholderIconColor
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            color: knobProps.textAccentColor,
-            ...knobProps.label,
-            children: t("Add image")
-          })]
-        }), imageUrl && (onImageAdd || onImageRemove) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          gap: "$2",
-          children: [onImageAdd && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            size: "$2",
-            chromeless: true,
-            icon: import_react.UploadIcon,
-            "aria-label": t("Replace image"),
-            onPress: onImageAdd,
-            children: t("Replace")
-          }), onImageRemove && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            size: "$2",
-            chromeless: true,
-            icon: import_react.XIcon,
-            "aria-label": t("Remove image"),
-            onPress: onImageRemove,
-            children: t("Remove")
-          })]
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {})]
-    }), sections.map((section, sectionIdx) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react2.default.Fragment, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        ...knobProps.gap,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          alignItems: "center",
-          justifyContent: "space-between",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            alignItems: "center",
-            gap: "$2",
-            children: [section.icon, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              color: knobProps.textAccentColor,
-              ...knobProps.label,
-              fontWeight: "400",
-              children: section.title
-            })]
-          }), section.onAdd && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            size: "$2",
-            circular: true,
-            chromeless: true,
-            icon: import_react.PlusIcon,
-            "aria-label": t("Add {{section}}", {
-              section: section.title
-            }),
-            onPress: section.onAdd
-          })]
-        }), section.render ? section.render() : section.items && section.items.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-          ...knobProps.gap,
-          children: section.items.map(item => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            gap: "$2",
-            alignItems: "center",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Avatar, {
-              circular: true,
-              size: avatarSize,
-              backgroundColor: avatarColor(sectionIdx),
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Avatar.Fallback, {
-                backgroundColor: avatarColor(sectionIdx),
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                  color: textColor(sectionIdx),
-                  ...knobProps.label,
-                  fontWeight: "700",
-                  children: (0, import_components.getInitials)(item.label)
-                })
-              })
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-              flex: 1,
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                color: import_components.componentColors.text.primary,
-                numberOfLines: 1,
-                ...knobProps.label,
-                children: item.label
-              }), item.sublabel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                color: knobProps.textAccentColor,
-                ...knobProps.label,
-                children: item.sublabel
-              })]
-            }), section.onRemoveItem && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-              size: "$2",
-              circular: true,
-              chromeless: true,
-              icon: import_react.XIcon,
-              "aria-label": t("Remove {{name}}", {
-                name: item.label
-              }),
-              onPress: () => section.onRemoveItem?.(item)
-            })]
-          }, item.id))
-        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          color: knobProps.textAccentColor,
-          ...knobProps.label,
-          children: section.emptyText ?? t("None")
-        })]
-      }), sectionIdx < sections.length - 1 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {})]
-    }, section.key)), metadata.length > 0 && sections.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), metadata.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      gap: "$1",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        color: knobProps.textAccentColor,
-        paddingHorizontal: "$2",
-        ...knobProps.label,
-        fontWeight: "400",
-        children: t("Info")
-      }), metadata.map(entry => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
-        size: knobProps.sizeToken,
-        icon: entry.icon ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UserIcon, {
-          size: iconSize,
-          color: placeholderIconColor,
-          style: {
-            flexShrink: 0
-          }
+      items: (section.items ?? []).map(item => ({
+        label: item.label,
+        value: item.id,
+        subTitle: item.sublabel,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Avatar, {
+          name: item.label,
+          nested: true
         }),
-        title: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          color: knobProps.textAccentColor,
-          ...knobProps.label,
-          children: entry.label
-        }),
-        backgroundColor: "transparent",
-        paddingVertical: "$1"
-      }, entry.label))]
-    })]
+        trailing: section.onRemoveItem ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: "$2",
+          chromeless: true,
+          icon: import_react.XIcon,
+          "aria-label": t("Remove {{name}}", {
+            name: item.label
+          }),
+          onPress: () => section.onRemoveItem?.(item)
+        }) : void 0
+      })),
+      emptyText: section.emptyText ?? t("None")
+    })
+  })), ...(metadata.length > 0 ? [{
+    title: t("Info"),
+    items: metadata.map(entry => ({
+      label: entry.label,
+      value: entry.label,
+      icon: entry.icon ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UserIcon, {
+        size: iconSize,
+        color: placeholderIconColor
+      })
+    }))
+  }] : [])];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Sidebar, {
+    role: "complementary",
+    "aria-label": t("Document details"),
+    width,
+    divider,
+    sections: railSections,
+    testID
   });
 }

package/dist/cjs/FormSidebar.native.js

@@ -46,14 +46,6 @@ var import_react = require("@phosphor-icons/react");
 var import_react2 = __toESM(require("react"));
 var import_react_i18next = require("react-i18next");
 var import_tamagui = require("tamagui");
-var avatarColors = ["$orange4", "$blue4", "$purple4", "$pink4"];
-function avatarColor(index) {
-  return avatarColors[index % avatarColors.length];
-}
-var textColors = ["$orange11", "$blue11", "$purple11", "$pink11"];
-function textColor(index) {
-  return textColors[index % textColors.length];
-}
 function FormSidebar(param) {
   var {
     imageUrl,
@@ -62,7 +54,9 @@ function FormSidebar(param) {
     onImageRemove,
     sections = [],
     metadata = [],
-    ...stackProps
+    width = 280,
+    divider = true,
+    "data-testid": testID
   } = param;
   var _ref;
   var _theme_color11, _knobProps_controlIcon;
@@ -78,219 +72,115 @@ function FormSidebar(param) {
   var [erroredUrl, setErroredUrl] = import_react2.default.useState();
   var imageBroken = Boolean(imageUrl) && erroredUrl === imageUrl;
   var sz = knobProps.sizeToken;
-  var avatarSize = sz === "$3" ? "$1" : sz === "$5" ? "$3" : "$2";
   var imageSize = sz === "$3" ? 160 : sz === "$5" ? 240 : 200;
   var resolvedImageLabel = imageLabel !== null && imageLabel !== void 0 ? imageLabel : t("Document image");
-  var showImageBlock = Boolean(imageUrl) || Boolean(onImageAdd);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    // Radius-only fragment: the full borderRadius fragment carries
-    // borderWidth and drew an unintended box border around the whole rail
-    // (rtl-audit U6); the panel border is the logical end rail below.
-    ...knobProps.containerRadius,
-    ...knobProps.panelPadding,
-    ...knobProps.gapLg,
-    width: 280,
-    // Logical end edge so the rail mirrors in RTL; tamagui borderEndWidth
-    // does not compile to working CSS on web (SB-M-1215)
-    ...(import_tamagui.isWeb ? {
-      borderInlineEndWidth: 1,
-      borderInlineEndStyle: "solid",
-      borderInlineEndColor: "$borderColor"
-    } : {
-      borderEndWidth: 1,
-      borderEndColor: "$borderColor"
-    }),
-    ...stackProps,
-    children: [/* -- Image section -- */
-    showImageBlock && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        alignItems: "center",
-        gap: "$2",
-        children: [imageUrl && !imageBroken ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
-          ...knobProps.containerRadius,
-          // src (string), not source: the RN source object leaks onto
-          // the DOM <img> as source="[object Object]" on web
-          src: imageUrl,
-          alt: resolvedImageLabel,
-          width: imageSize,
-          height: imageSize,
-          objectFit: "contain",
-          onError: function onError() {
-            return setErroredUrl(imageUrl);
-          }
-        }) : imageUrl && imageBroken ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          ...knobProps.containerRadius,
-          width: imageSize,
-          height: imageSize,
-          alignItems: "center",
-          justifyContent: "center",
-          gap: "$2",
-          borderWidth: 1,
-          borderStyle: "dashed",
-          borderColor: "$borderColor",
-          "aria-label": resolvedImageLabel,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ImageSquareIcon, {
-            size: iconSize * 2,
-            color: placeholderIconColor
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            color: knobProps.textAccentColor,
-            ...knobProps.label,
-            children: t("Image failed to load")
-          })]
-        }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          role: "button",
-          tabIndex: 0,
-          onPress: onImageAdd,
-          "aria-label": t("Add image"),
-          width: imageSize,
-          height: imageSize,
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "pointer",
-          gap: "$2",
-          ...knobProps.containerRadius,
-          borderWidth: 1,
-          borderStyle: "dashed",
-          borderColor: "$borderColor",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ImageSquareIcon, {
-            size: iconSize * 2,
-            color: placeholderIconColor
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            color: knobProps.textAccentColor,
-            ...knobProps.label,
-            children: t("Add image")
-          })]
-        }), imageUrl && (onImageAdd || onImageRemove) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          gap: "$2",
-          children: [onImageAdd && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            size: "$2",
-            chromeless: true,
-            icon: import_react.UploadIcon,
-            "aria-label": t("Replace image"),
-            onPress: onImageAdd,
-            children: t("Replace")
-          }), onImageRemove && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            size: "$2",
-            chromeless: true,
-            icon: import_react.XIcon,
-            "aria-label": t("Remove image"),
-            onPress: onImageRemove,
-            children: t("Remove")
-          })]
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {})]
-    }), /* -- Dynamic sections -- */
-    sections.map(function (section, sectionIdx) {
-      var _section_emptyText;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react2.default.Fragment, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          ...knobProps.gap,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            alignItems: "center",
-            justifyContent: "space-between",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-              alignItems: "center",
-              gap: "$2",
-              children: [section.icon, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                color: knobProps.textAccentColor,
-                ...knobProps.label,
-                fontWeight: "400",
-                children: section.title
-              })]
-            }), section.onAdd && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+  var imageBlock = imageUrl || onImageAdd ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    alignItems: "center",
+    gap: "$2",
+    children: [imageUrl ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Image, {
+      ...knobProps.containerRadius,
+      src: imageBroken ? void 0 : imageUrl,
+      alt: resolvedImageLabel,
+      width: imageSize,
+      height: imageSize,
+      objectFit: "contain",
+      onError: function onError() {
+        return setErroredUrl(imageUrl);
+      }
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      chromeless: true,
+      icon: import_react.ImageSquareIcon,
+      "aria-label": t("Add image"),
+      onPress: onImageAdd
+    }), imageBroken ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      color: knobProps.textAccentColor,
+      ...knobProps.label,
+      children: t("Image failed to load")
+    }) : null, imageUrl && (onImageAdd || onImageRemove) ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$2",
+      children: [onImageAdd ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        chromeless: true,
+        icon: import_react.UploadIcon,
+        "aria-label": t("Replace image"),
+        onPress: onImageAdd
+      }) : null, onImageRemove ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        chromeless: true,
+        icon: import_react.XIcon,
+        "aria-label": t("Remove image"),
+        onPress: onImageRemove
+      }) : null]
+    }) : null]
+  }) : null;
+  var railSections = [...(imageBlock ? [{
+    items: [],
+    content: imageBlock
+  }] : []), ...sections.map(function (section) {
+    var _section_items, _section_emptyText;
+    return {
+      title: section.title,
+      icon: section.icon,
+      action: section.onAdd ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        chromeless: true,
+        icon: import_react.PlusIcon,
+        "aria-label": t("Add {{section}}", {
+          section: section.title
+        }),
+        onPress: section.onAdd
+      }) : void 0,
+      ...(section.render ? {
+        items: [],
+        content: section.render()
+      } : {
+        items: ((_section_items = section.items) !== null && _section_items !== void 0 ? _section_items : []).map(function (item) {
+          return {
+            label: item.label,
+            value: item.id,
+            subTitle: item.sublabel,
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Avatar, {
+              name: item.label,
+              nested: true
+            }),
+            trailing: section.onRemoveItem ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
               size: "$2",
-              circular: true,
               chromeless: true,
-              icon: import_react.PlusIcon,
-              "aria-label": t("Add {{section}}", {
-                section: section.title
+              icon: import_react.XIcon,
+              "aria-label": t("Remove {{name}}", {
+                name: item.label
               }),
-              onPress: section.onAdd
-            })]
-          }), section.render ? section.render() : section.items && section.items.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-            ...knobProps.gap,
-            children: section.items.map(function (item) {
-              return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                gap: "$2",
-                alignItems: "center",
-                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Avatar, {
-                  circular: true,
-                  size: avatarSize,
-                  backgroundColor: avatarColor(sectionIdx),
-                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Avatar.Fallback, {
-                    backgroundColor: avatarColor(sectionIdx),
-                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                      color: textColor(sectionIdx),
-                      ...knobProps.label,
-                      fontWeight: "700",
-                      children: (0, import_components.getInitials)(item.label)
-                    })
-                  })
-                }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-                  flex: 1,
-                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                    color: import_components.componentColors.text.primary,
-                    numberOfLines: 1,
-                    ...knobProps.label,
-                    children: item.label
-                  }), item.sublabel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                    color: knobProps.textAccentColor,
-                    ...knobProps.label,
-                    children: item.sublabel
-                  })]
-                }), section.onRemoveItem && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                  size: "$2",
-                  circular: true,
-                  chromeless: true,
-                  icon: import_react.XIcon,
-                  "aria-label": t("Remove {{name}}", {
-                    name: item.label
-                  }),
-                  onPress: function onPress() {
-                    var _section_onRemoveItem;
-                    return (_section_onRemoveItem = section.onRemoveItem) === null || _section_onRemoveItem === void 0 ? void 0 : _section_onRemoveItem.call(section, item);
-                  }
-                })]
-              }, item.id);
-            })
-          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            color: knobProps.textAccentColor,
-            ...knobProps.label,
-            children: (_section_emptyText = section.emptyText) !== null && _section_emptyText !== void 0 ? _section_emptyText : t("None")
-          })]
-        }), sectionIdx < sections.length - 1 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {})]
-      }, section.key);
-    }), /* -- Separator before metadata -- */
-    metadata.length > 0 && sections.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* -- Info / Metadata -- */
-    metadata.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      gap: "$1",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        color: knobProps.textAccentColor,
-        paddingHorizontal: "$2",
-        ...knobProps.label,
-        fontWeight: "400",
-        children: t("Info")
-      }), metadata.map(function (entry) {
-        var _entry_icon;
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
-          size: knobProps.sizeToken,
-          icon: (_entry_icon = entry.icon) !== null && _entry_icon !== void 0 ? _entry_icon : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UserIcon, {
-            size: iconSize,
-            color: placeholderIconColor,
-            style: {
-              flexShrink: 0
-            }
-          }),
-          title: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            color: knobProps.textAccentColor,
-            ...knobProps.label,
-            children: entry.label
-          }),
-          backgroundColor: "transparent",
-          paddingVertical: "$1"
-        }, entry.label);
-      })]
-    })]
+              onPress: function onPress() {
+                var _section_onRemoveItem;
+                return (_section_onRemoveItem = section.onRemoveItem) === null || _section_onRemoveItem === void 0 ? void 0 : _section_onRemoveItem.call(section, item);
+              }
+            }) : void 0
+          };
+        }),
+        emptyText: (_section_emptyText = section.emptyText) !== null && _section_emptyText !== void 0 ? _section_emptyText : t("None")
+      })
+    };
+  }), ...(metadata.length > 0 ? [{
+    title: t("Info"),
+    items: metadata.map(function (entry) {
+      var _entry_icon;
+      return {
+        label: entry.label,
+        value: entry.label,
+        icon: (_entry_icon = entry.icon) !== null && _entry_icon !== void 0 ? _entry_icon : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UserIcon, {
+          size: iconSize,
+          color: placeholderIconColor
+        })
+      };
+    })
+  }] : [])];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Sidebar, {
+    role: "complementary",
+    "aria-label": t("Document details"),
+    width,
+    divider,
+    sections: railSections,
+    testID
   });
 }
 //# sourceMappingURL=FormSidebar.native.js.map