@box/metadata-editor 0.45.0

package/esm/lib/components/metadata-empty-state/metadata-empty-state.js

@@ -0,0 +1,63 @@
+import { Text as n, EmptyState as f } from "@box/blueprint-web";
+import { JobAnalyzeData as p } from "@box/blueprint-web-assets/illustrations/Small";
+import { useCallback as l } from "react";
+import { useIntl as d } from "react-intl";
+import e from "./messages.js";
+import { jsx as a } from "react/jsx-runtime";
+function E({
+  isAnyEmptyValueHidden: m = !1,
+  isBoxAiSuggestionsFeatureEnabled: s = !1,
+  level: r,
+  onShowEmptyValues: i
+}) {
+  const t = d(), c = l(() => {
+    if (r === "manager")
+      return /* @__PURE__ */ a(n, {
+        as: "p",
+        children: t.formatMessage(e.managerLevelEmptyStateBody)
+      });
+    if (r === "instance")
+      return m ? /* @__PURE__ */ a(f.PrimaryAction, {
+        onClick: i,
+        children: t.formatMessage(e.instanceLevelSeeEmptyValuesCTA)
+      }) : (
+        // EmptyState component requires body element so if level === "instance" && !isAnyEmptyValueHidden we pass heading as body and nothing as heading
+        /* @__PURE__ */ a(n, {
+          as: "h1",
+          variant: "titleSmall",
+          children: t.formatMessage(e.instanceLevelEmptyStateHeadingNoAttributes)
+        })
+      );
+    const o = s ? t.formatMessage(e.fileLevelEmptyStateBoxAiEnabledBody) : t.formatMessage(e.fileLevelEmptyStateDefaultBody);
+    return /* @__PURE__ */ a(n, {
+      as: "p",
+      children: o
+    });
+  }, [t, m, s, r, i]), g = l(() => {
+    if (r === "manager")
+      return /* @__PURE__ */ a(n, {
+        as: "h2",
+        children: t.formatMessage(e.managerLevelEmptyStateHeading)
+      });
+    if (r === "instance")
+      return m ? /* @__PURE__ */ a(n, {
+        as: "h2",
+        children: t.formatMessage(e.instanceLevelEmptyStateHeading)
+      }) : null;
+    const o = s ? t.formatMessage(e.fileLevelEmptyStateBoxAiEnabledHeading) : t.formatMessage(e.fileLevelEmptyStateDefaultHeading);
+    return /* @__PURE__ */ a(n, {
+      as: "h2",
+      children: o
+    });
+  }, [t, m, s, r]);
+  return /* @__PURE__ */ a(f, {
+    body: c(),
+    heading: g(),
+    illustration: p,
+    size: "small"
+  });
+}
+export {
+  E as MetadataEmptyState,
+  E as default
+};

package/esm/lib/components/metadata-instance-editor/index.js

@@ -0,0 +1,10 @@
+import { DeleteConfirmationModal as t } from "./subcomponents/delete-confirmation-modal/delete-confirmation-modal.js";
+import { MetadataInstanceFormHeader as r } from "./subcomponents/metadata-instance-form-header/metadata-instance-form-header.js";
+import { CustomInstanceNewField as n } from "./subcomponents/custom-instance-new-field/custom-instance-new-field.js";
+import { MetadataInstanceForm as f } from "./subcomponents/metadata-instance-form/metadata-instance-form.js";
+export {
+  n as CustomInstanceNewField,
+  t as DeleteConfirmationModal,
+  f as MetadataInstanceForm,
+  r as MetadataInstanceFormHeader
+};

package/esm/lib/components/metadata-instance-editor/subcomponents/custom-instance/custom-instance.js

@@ -0,0 +1,76 @@
+import "../../../../../../styles/custom-instance.css";
+import { useFormikContext as F, FieldArray as _, Field as h } from "formik";
+import { useState as x } from "react";
+import { useIntl as b } from "react-intl";
+import { TextInput as N, IconButton as g, TextButton as k } from "@box/blueprint-web";
+import { Trash as y } from "@box/blueprint-web-assets/icons/Line";
+import { CustomInstanceNewField as C } from "../custom-instance-new-field/custom-instance-new-field.js";
+import { fieldDefaultProps as v } from "../../../metadata-editor-fields/components/constants.js";
+import l from "./messages.js";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+const q = "_customInstance_xq8r7_1", A = "_customInstanceField_xq8r7_7", w = "_customInstanceFieldInput_xq8r7_12", M = "_customInstanceFieldIcon_xq8r7_16", o = {
+  customInstance: q,
+  customInstanceField: A,
+  customInstanceFieldInput: w,
+  customInstanceFieldIcon: M
+}, $ = (d) => {
+  const {
+    isLoading: a
+  } = d, {
+    values: s
+  } = F(), c = b(), [m, i] = x(!s.metadata.fields.length);
+  return /* @__PURE__ */ e("div", {
+    children: /* @__PURE__ */ e(_, {
+      name: "metadata.fields",
+      children: ({
+        remove: u,
+        push: I
+      }) => /* @__PURE__ */ r("div", {
+        className: o.customInstance,
+        children: [s == null ? void 0 : s.metadata.fields.map((t, n) => /* @__PURE__ */ r("div", {
+          className: o.customInstanceField,
+          children: [/* @__PURE__ */ e("div", {
+            className: o.customInstanceFieldInput,
+            children: /* @__PURE__ */ e(h, {
+              name: `metadata.fields[${n}].value`,
+              children: ({
+                field: f,
+                meta: p
+              }) => /* @__PURE__ */ e(N, {
+                ...v,
+                ...f,
+                disabled: a,
+                error: p.error,
+                label: t.key,
+                placeholder: c.formatMessage(l.setValuePlaceholder)
+              })
+            })
+          }), /* @__PURE__ */ e(g, {
+            "aria-label": c.formatMessage(l.removeAttribute),
+            className: o.customInstanceFieldIcon,
+            disabled: a,
+            icon: y,
+            onClick: () => u(n),
+            size: "x-small"
+          })]
+        }, t.key)), m && /* @__PURE__ */ e(C, {
+          formKeys: s.metadata.fields.map((t) => t.key),
+          onAdd: (t, n) => {
+            I({
+              key: t,
+              value: n
+            }), i(!1);
+          },
+          onCancel: () => i(!1)
+        }), !m && /* @__PURE__ */ e(k, {
+          disabled: a,
+          onClick: () => i(!0),
+          children: c.formatMessage(l.addAttribute)
+        })]
+      })
+    })
+  });
+};
+export {
+  $ as CustomInstance
+};

package/esm/lib/components/metadata-instance-editor/subcomponents/custom-instance/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages as t } from "react-intl";
+const a = t({
+  addAttribute: {
+    id: "metadataEditor.metadataInstanceEditor.customInstance.addAttribute",
+    defaultMessage: "+ Add Attribute"
+  },
+  removeAttribute: {
+    id: "metadataEditor.metadataInstanceEditor.customInstance.removeAttribute",
+    defaultMessage: "Remove"
+  },
+  setValuePlaceholder: {
+    id: "metadataEditor.metadataInstanceEditor.customInstance.setValuePlaceholder",
+    defaultMessage: "Set value"
+  }
+});
+export {
+  a as default
+};

package/esm/lib/components/metadata-instance-editor/subcomponents/custom-instance-new-field/custom-instance-new-field.js

@@ -0,0 +1,58 @@
+import "../../../../../../styles/custom-instance-new-field.css";
+import { Card as v, TextInput as m, Button as u } from "@box/blueprint-web";
+import { useState as l } from "react";
+import { useIntl as w } from "react-intl";
+import t from "./messages.js";
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+const M = "_customInstanceNewFieldCard_1m7z1_1", _ = "_customInstanceNewFieldFooter_1m7z1_6", K = "_inputWrapper_1m7z1_13", n = {
+  customInstanceNewFieldCard: M,
+  customInstanceNewFieldFooter: _,
+  inputWrapper: K
+}, z = (f) => {
+  const {
+    onAdd: h,
+    onCancel: g,
+    formKeys: c = []
+  } = f, e = w(), [s, F] = l(""), [i, C] = l(""), [d, o] = l(""), N = c.length !== 0, I = (r) => {
+    F(r), d && o("");
+  }, y = () => {
+    s ? s.startsWith("$") ? o(e.formatMessage(t.customErrorInternalKey)) : c.includes(s) ? o(e.formatMessage(t.customErrorDuplicateKey)) : h(s, i) : o(e.formatMessage(t.keyFieldRequiredError));
+  };
+  return /* @__PURE__ */ p(v, {
+    className: n.customInstanceNewFieldCard,
+    "data-testid": "customInstanceNewField",
+    children: [/* @__PURE__ */ a("div", {
+      className: n.inputWrapper,
+      children: /* @__PURE__ */ a(m, {
+        error: d,
+        label: e.formatMessage(t.customKeyLabel),
+        onChange: (r) => I(r.target.value),
+        placeholder: e.formatMessage(t.customKeyPlaceholder),
+        required: !0,
+        value: s
+      })
+    }), /* @__PURE__ */ a("div", {
+      className: n.inputWrapper,
+      children: /* @__PURE__ */ a(m, {
+        label: e.formatMessage(t.valueLabel),
+        onChange: (r) => C(r.target.value),
+        placeholder: e.formatMessage(t.valuePlaceholder),
+        value: i
+      })
+    }), /* @__PURE__ */ p("div", {
+      className: n.customInstanceNewFieldFooter,
+      children: [N && /* @__PURE__ */ a(u, {
+        onClick: g,
+        variant: "secondary",
+        children: e.formatMessage(t.cancelCTA)
+      }), /* @__PURE__ */ a(u, {
+        onClick: y,
+        variant: "primary",
+        children: e.formatMessage(t.addNewFieldCTA)
+      })]
+    })]
+  });
+};
+export {
+  z as CustomInstanceNewField
+};

package/esm/lib/components/metadata-instance-editor/subcomponents/custom-instance-new-field/messages.js

@@ -0,0 +1,42 @@
+import { defineMessages as e } from "react-intl";
+const t = e({
+  addNewFieldCTA: {
+    id: "metadataEditor.metadataEditor.customIntanceNewField.addNewFieldCTA",
+    defaultMessage: "Add"
+  },
+  cancelCTA: {
+    id: "metadataEditor.metadataEditor.customIntanceNewField.cancelCTA",
+    defaultMessage: "Cancel"
+  },
+  customErrorInternalKey: {
+    id: "metadataEditor.metadataEditor.customIntanceNewField.customErrorInternalKey",
+    defaultMessage: "Keys cannot begin with a $."
+  },
+  customErrorDuplicateKey: {
+    id: "metadataEditor.metadataEditor.customIntanceNewField.customErrorDuplicateKey",
+    defaultMessage: "Key already exists."
+  },
+  customKeyLabel: {
+    id: "metadataEditor.metadataEditor.customIntanceNewField.attributeNameLabel",
+    defaultMessage: "Attribute Name"
+  },
+  customKeyPlaceholder: {
+    id: "metadataEditor.metadataEditor.customIntanceNewField.customKeyPlaceholder",
+    defaultMessage: "e.g. Order Number"
+  },
+  keyFieldRequiredError: {
+    id: "metadataEditor.metadataEditor.customIntanceNewField.keyFieldRequired",
+    defaultMessage: "Key is required"
+  },
+  valueLabel: {
+    id: "metadataEditor.metadataEditor.customIntanceNewField.valueLabel",
+    defaultMessage: "Value"
+  },
+  valuePlaceholder: {
+    id: "metadataEditor.metadataEditor.customIntanceNewField.valuePlaceholder",
+    defaultMessage: "e.g. 42"
+  }
+});
+export {
+  t as default
+};

package/esm/lib/components/metadata-instance-editor/subcomponents/delete-confirmation-modal/delete-confirmation-modal.js

@@ -0,0 +1,81 @@
+import "../../../../../../styles/delete-confirmation-modal.css";
+import { Modal as a, Text as c, TextInput as b } from "@box/blueprint-web";
+import { useIntl as F, FormattedMessage as s } from "react-intl";
+import { useState as f, useEffect as I } from "react";
+import o from "./messages.js";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+const x = "_modalBody_yiat3_1", N = {
+  modalBody: x
+}, V = ({
+  onConfirm: u,
+  templateName: p,
+  onDismiss: C,
+  open: h
+}) => {
+  const l = F(), [r, m] = f(""), [M, g] = f(!0), i = (n) => {
+    n || (C(), m(""));
+  }, t = p || l.formatMessage(o.deleteConfirmationModalCustomMetadata), B = (n) => {
+    m(n);
+  }, y = () => {
+    u(), i(!1);
+  };
+  return I(() => {
+    g(r !== t);
+  }, [r, t]), /* @__PURE__ */ e(a, {
+    onOpenChange: i,
+    open: h,
+    children: /* @__PURE__ */ d(a.Content, {
+      size: "small",
+      children: [/* @__PURE__ */ e(a.Header, {
+        children: /* @__PURE__ */ e(s, {
+          ...o.deleteConfirmationModalHeader,
+          values: {
+            templateName: t
+          }
+        })
+      }), /* @__PURE__ */ e(a.ScrollableContainer, {
+        children: /* @__PURE__ */ d(a.Body, {
+          className: N.modalBody,
+          children: [/* @__PURE__ */ e(c, {
+            as: "p",
+            children: /* @__PURE__ */ e(s, {
+              ...o.deleteConfirmationModalBodyFirstParagraph,
+              values: {
+                templateName: t
+              }
+            })
+          }), /* @__PURE__ */ e(c, {
+            as: "p",
+            children: /* @__PURE__ */ e(s, {
+              ...o.deleteConfirmationModalBodySecondParagraph
+            })
+          }), /* @__PURE__ */ e(b, {
+            label: l.formatMessage(o.deleteConfirmationModalBodyInputFieldLabel, {
+              templateName: t
+            }),
+            onChange: (n) => B(n.target.value),
+            placeholder: t,
+            required: !0,
+            value: r
+          })]
+        })
+      }), /* @__PURE__ */ d(a.Footer, {
+        children: [/* @__PURE__ */ e(a.Footer.SecondaryButton, {
+          onClick: () => i(!1),
+          size: "large",
+          children: l.formatMessage(o.deleteConfirmationModalCancelButton)
+        }), /* @__PURE__ */ e(a.Footer.PrimaryButton, {
+          disabled: M,
+          onClick: y,
+          size: "large",
+          children: l.formatMessage(o.deleteConfirmationModalConfirmButton)
+        })]
+      }), /* @__PURE__ */ e(a.Close, {
+        "aria-label": l.formatMessage(o.deleteConfirmationModalDismissButton)
+      })]
+    })
+  });
+};
+export {
+  V as DeleteConfirmationModal
+};

package/esm/lib/components/metadata-instance-editor/subcomponents/delete-confirmation-modal/messages.js

@@ -0,0 +1,38 @@
+import { defineMessages as e } from "react-intl";
+const a = e({
+  deleteConfirmationModalCustomMetadata: {
+    id: "metadataEditor.editInstance.deleteConfirmationModal.customMedatata",
+    defaultMessage: "Custom Metadata"
+  },
+  deleteConfirmationModalHeader: {
+    id: "metadataEditor.editInstance.deleteConfirmationModal.header",
+    defaultMessage: 'Delete "{templateName}"'
+  },
+  deleteConfirmationModalBodyFirstParagraph: {
+    id: "metadataEditor.editInstance.deleteConfirmationModal.body.firstParagraph",
+    defaultMessage: 'Are you sure you want to delete the "{templateName}" Metadata template, and all of its values from this file?'
+  },
+  deleteConfirmationModalBodySecondParagraph: {
+    id: "metadataEditor.editInstance.deleteConfirmationModal.body.secondParagraph",
+    defaultMessage: "Once deleted, Metadata values cannot be restored."
+  },
+  deleteConfirmationModalBodyInputFieldLabel: {
+    id: "metadataEditor.editInstance.deleteConfirmationModal.body.inputFieldLabel",
+    defaultMessage: 'Type "{templateName}" to confirm'
+  },
+  deleteConfirmationModalCancelButton: {
+    id: "metadataEditor.editInstance.deleteConfirmationModal.cancelButton",
+    defaultMessage: "Cancel"
+  },
+  deleteConfirmationModalConfirmButton: {
+    id: "metadataEditor.editInstance.deleteConfirmationModal.confirmButton",
+    defaultMessage: "Confirm"
+  },
+  deleteConfirmationModalDismissButton: {
+    id: "metadataEditor.editInstance.deleteConfirmationModal.dismissButton",
+    defaultMessage: "Dismiss"
+  }
+});
+export {
+  a as default
+};

package/esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form/messages.js

@@ -0,0 +1 @@
+

package/esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form/metadata-instance-form.js

@@ -0,0 +1,79 @@
+import "../../../../../../styles/metadata-instance-form.css";
+import { useState as l, useMemo as S } from "react";
+import { Formik as D } from "formik";
+import { Card as E } from "@box/blueprint-web";
+import { CustomInstance as y } from "../custom-instance/custom-instance.js";
+import { DeleteConfirmationModal as O } from "../delete-confirmation-modal/delete-confirmation-modal.js";
+import { MetadataEmptyState as b } from "../../../metadata-empty-state/metadata-empty-state.js";
+import { MetadataInstanceFormFooter as N } from "../metadata-instance-form-footer/metadata-instance-form-footer.js";
+import { MetadataInstanceFormHeader as T } from "../metadata-instance-form-header/metadata-instance-form-header.js";
+import { UnsavedChangesModal as v } from "../../../unsaved-changes-modal/unsaved-changes-modal.js";
+import { TemplateInstance as _ } from "../../../metadata-editor-fields/metadata-editor-fields.js";
+import { TEMPLATE_CUSTOM_PROPERTIES as x } from "../../../../constants.js";
+import { createJSONPatch as A } from "./utils.js";
+import { jsx as t, jsxs as d, Fragment as P } from "react/jsx-runtime";
+const U = "_metadataInstanceForm_1hu4u_1", j = {
+  metadataInstanceForm: U
+}, X = (c) => {
+  const {
+    isAiSuggestionsFeatureEnabled: o,
+    isLoading: n,
+    onCancel: p,
+    onDelete: f,
+    onSubmit: u,
+    selectedTemplateInstance: e
+  } = c, [C, m] = l(!1), [M, r] = l(!1), i = (a) => {
+    u(e.id, A(a, e));
+  }, h = (a) => {
+    a ? m(!0) : p();
+  }, F = () => {
+    r(!0);
+  }, I = {
+    metadata: {
+      ...e
+    }
+  }, g = S(() => {
+    const a = e.templateKey === x, s = e.fields.length === 0;
+    return a ? /* @__PURE__ */ t(y, {
+      isLoading: n
+    }) : s ? /* @__PURE__ */ t(b, {
+      isBoxAiSuggestionsFeatureEnabled: o,
+      level: "instance"
+    }) : /* @__PURE__ */ t(_, {
+      disableForm: n
+    });
+  }, [e.templateKey, e.fields.length, n, o]);
+  return /* @__PURE__ */ t(D, {
+    initialValues: I,
+    onSubmit: i,
+    children: ({
+      values: a,
+      dirty: s
+    }) => /* @__PURE__ */ d(P, {
+      children: [/* @__PURE__ */ d(E, {
+        className: j.metadataInstanceForm,
+        children: [/* @__PURE__ */ t(T, {
+          isAiSuggestionsFeatureEnabled: o,
+          isLoading: n,
+          templateName: e.displayName
+        }), g, /* @__PURE__ */ t(N, {
+          isLoading: n,
+          onCancel: () => h(s),
+          onDelete: F
+        })]
+      }), /* @__PURE__ */ t(v, {
+        onDismiss: () => m(!1),
+        onSaveAndContinue: () => i(a),
+        open: C
+      }), /* @__PURE__ */ t(O, {
+        onConfirm: () => f(e.id),
+        onDismiss: () => r(!1),
+        open: M,
+        templateName: e.displayName
+      })]
+    })
+  });
+};
+export {
+  X as MetadataInstanceForm
+};

package/esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form/utils.js

@@ -0,0 +1,33 @@
+const p = {
+  ADD: "add",
+  REMOVE: "remove",
+  REPLACE: "replace",
+  TEST: "test"
+}, f = (a, s) => {
+  const u = [], o = a.metadata.fields, c = new Map(s.fields.map((e) => [e.key, e])), l = new Map(o.map((e) => [e.key, e]));
+  return o.forEach((e) => {
+    const t = c.get(e.key);
+    t ? JSON.stringify(e) === JSON.stringify(t) || (t.value === null && e.value !== null ? u.push(r(e.key, e.value)) : e.value !== t.value && e.value !== null && t.value !== null && (u.push(n(t.key, t.value)), u.push(h(e.key, e.value)))) : u.push(r(e.key, e.value));
+  }), s.fields.forEach((e) => {
+    const t = l.get(e.key);
+    (!t || t.value === null && e.value !== null) && (u.push(n(e.key, e.value)), u.push(v(e.key)));
+  }), u;
+}, n = (a, s) => ({
+  op: p.TEST,
+  path: `/${a}`,
+  value: s
+}), r = (a, s) => ({
+  op: p.ADD,
+  path: `/${a}`,
+  value: s
+}), v = (a) => ({
+  op: p.REMOVE,
+  path: `/${a}`
+}), h = (a, s) => ({
+  op: p.REPLACE,
+  path: `/${a}`,
+  value: s
+});
+export {
+  f as createJSONPatch
+};

package/esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-footer/messages.js

@@ -0,0 +1,22 @@
+import { defineMessages as a } from "react-intl";
+const e = a({
+  cancelButton: {
+    id: "metadataEditor.metadataInstanceEditor.metadataInstanceFormFooter.cancelButton",
+    defaultMessage: "Cancel"
+  },
+  deleteButton: {
+    id: "metadataEditor.metadataInstanceEditor.metadataInstanceFormFooter.deleteButton",
+    defaultMessage: "Delete"
+  },
+  loadingAriaLabel: {
+    id: "metadataEditor.metadataInstanceEditor.metadataInstanceFormFooter.loadingAriaLabel",
+    defaultMessage: "Loading..."
+  },
+  saveButton: {
+    id: "metadataEditor.metadataInstanceEditor.metadataInstanceFormFooter.saveButton",
+    defaultMessage: "Save"
+  }
+});
+export {
+  e as default
+};

package/esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-footer/metadata-instance-form-footer.js

@@ -0,0 +1,50 @@
+import "../../../../../../styles/metadata-instance-form-footer.css";
+import { TextButton as u, Button as r } from "@box/blueprint-web";
+import { useFormikContext as b } from "formik";
+import { useIntl as F } from "react-intl";
+import o from "./messages.js";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+const g = "_metadataInstanceFormFooter_17478_1", f = "_buttonsContainer_17478_8", _ = "_buttons_17478_8", a = {
+  metadataInstanceFormFooter: g,
+  buttonsContainer: f,
+  buttons: _
+}, x = ({
+  isLoading: m,
+  onCancel: c,
+  onDelete: l
+}) => {
+  const t = F(), {
+    isSubmitting: s,
+    submitForm: d
+  } = b(), n = m || s;
+  return /* @__PURE__ */ e("div", {
+    className: a.metadataInstanceFormFooter,
+    children: /* @__PURE__ */ i("div", {
+      className: a.buttonsContainer,
+      children: [/* @__PURE__ */ e(u, {
+        disabled: n,
+        onClick: l,
+        children: t.formatMessage(o.deleteButton)
+      }), /* @__PURE__ */ i("div", {
+        className: a.buttons,
+        children: [/* @__PURE__ */ e(r, {
+          disabled: n,
+          onClick: c,
+          size: "large",
+          variant: "secondary",
+          children: t.formatMessage(o.cancelButton)
+        }), /* @__PURE__ */ e(r, {
+          disabled: n,
+          loading: s,
+          loadingAriaLabel: t.formatMessage(o.loadingAriaLabel),
+          onClick: d,
+          size: "large",
+          children: t.formatMessage(o.saveButton)
+        })]
+      })]
+    })
+  });
+};
+export {
+  x as MetadataInstanceFormFooter
+};

package/esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-header/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages as a } from "react-intl";
+const e = a({
+  autofillButton: {
+    id: "metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.autofillButton",
+    defaultMessage: "Autofill"
+  },
+  customInstanceTitle: {
+    id: "metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.customInstanceTitle",
+    defaultMessage: "Custom Metadata"
+  },
+  loadingButtonAriaLabel: {
+    id: "metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.loadingButtonAriaLabel",
+    defaultMessage: "Loading..."
+  }
+});
+export {
+  e as default
+};

package/esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-header/metadata-instance-form-header.js

@@ -0,0 +1,40 @@
+import "../../../../../../styles/metadata-instance-form-header.css";
+import { Text as l, Button as d } from "@box/blueprint-web";
+import { BoxAiLogo as f } from "@box/blueprint-web-assets/icons/Logo";
+import { useFormikContext as u } from "formik";
+import { useIntl as g } from "react-intl";
+import e from "./messages.js";
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+const I = "_metadataInstanceFormHeader_1b2cc_1", b = "_title_1b2cc_8", o = {
+  metadataInstanceFormHeader: I,
+  title: b
+}, v = ({
+  isAiSuggestionsFeatureEnabled: n,
+  isLoading: r,
+  onAutofill: s,
+  templateName: i
+}) => {
+  const {
+    isSubmitting: m
+  } = u(), t = g(), c = i ?? t.formatMessage(e.customInstanceTitle);
+  return /* @__PURE__ */ p("div", {
+    className: o.metadataInstanceFormHeader,
+    children: [/* @__PURE__ */ a(l, {
+      as: "h1",
+      className: o.title,
+      variant: "titleMedium",
+      children: c
+    }), n && /* @__PURE__ */ a(d, {
+      disabled: m,
+      icon: f,
+      loading: r,
+      loadingAriaLabel: t.formatMessage(e.loadingButtonAriaLabel),
+      onClick: s,
+      variant: "secondary",
+      children: t.formatMessage(e.autofillButton)
+    })]
+  });
+};
+export {
+  v as MetadataInstanceFormHeader
+};

package/esm/lib/components/metadata-instance-list/index.js

@@ -0,0 +1,8 @@
+import { MetadataInstanceList as e } from "./metadata-instance-list.js";
+import { MetadataInstanceHeader as r, autofillButtonAriaLabel as n, editButtonAriaLabel as i } from "./subcomponents/metadata-instance-header/metadata-instance-header.js";
+export {
+  r as MetadataInstanceHeader,
+  e as MetadataInstanceList,
+  n as autofillButtonAriaLabel,
+  i as editButtonAriaLabel
+};

package/esm/lib/components/metadata-instance-list/metadata-instance-list.js

@@ -0,0 +1,22 @@
+import "../../../../styles/metadata-instance-list.css";
+import { MetadataInstance as c } from "./subcomponents/metadata-instance/metadata-instance.js";
+import { jsx as a } from "react/jsx-runtime";
+const d = "_metadataInstanceList_bd83w_1", m = {
+  metadataInstanceList: d
+}, L = ({
+  isAiSuggestionsFeatureEnabled: s,
+  onEdit: n,
+  onEditWithAutofill: e,
+  templateInstances: i
+}) => /* @__PURE__ */ a("div", {
+  className: m.metadataInstanceList,
+  children: i.map((t) => /* @__PURE__ */ a(c, {
+    isAiSuggestionsFeatureEnabled: s,
+    onEdit: n,
+    onEditWithAutofill: e,
+    templateInstance: t
+  }, t.id))
+});
+export {
+  L as MetadataInstanceList
+};