payload-intl 0.0.3 → 0.0.4

package/dist/components/MessageController.js

@@ -1,28 +1,29 @@
-import { Controller as l } from "react-hook-form";
-import { useMessagesForm as s } from "../context/messages-form.js";
-import { MessageInput as p } from "./inputs/MessageInput.js";
-import { RichTextInput as h } from "./inputs/RichTextInput.js";
-function B({
-  type: c,
+import { jsx as o } from "react/jsx-runtime";
+import { Controller as m } from "react-hook-form";
+import { useMessagesForm as i } from "../context/messages-form.js";
+import { MessageInput as h } from "./inputs/MessageInput.js";
+import { RichTextInput as C } from "./inputs/RichTextInput.js";
+function M({
+  type: a,
   name: n,
-  variables: m,
-  label: o,
+  variables: l,
+  label: u,
   locale: t,
-  validate: g,
-  className: u
+  validate: p,
+  className: s
 }) {
-  const { control: a } = s();
-  return c === "rich" ? /* @__PURE__ */ React.createElement(
-    l,
+  const { control: g } = i();
+  return a === "rich" ? /* @__PURE__ */ o(
+    m,
     {
-      control: a,
+      control: g,
       name: n,
-      render: ({ field: r, fieldState: e }) => /* @__PURE__ */ React.createElement(
-        h,
+      render: ({ field: r, fieldState: e }) => /* @__PURE__ */ o(
+        C,
         {
-          className: u,
+          className: s,
           error: e.error,
-          label: o,
+          label: u,
           lang: t,
           onChange: r.onChange,
           onBlur: r.onBlur,
@@ -33,19 +34,19 @@ function B({
         required: !0
       }
     }
-  ) : /* @__PURE__ */ React.createElement(
-    l,
+  ) : /* @__PURE__ */ o(
+    m,
     {
-      control: a,
+      control: g,
       name: n,
-      render: ({ field: r, fieldState: e }) => /* @__PURE__ */ React.createElement(
-        p,
+      render: ({ field: r, fieldState: e }) => /* @__PURE__ */ o(
+        h,
         {
-          label: o,
+          label: u,
           lang: t,
-          className: u,
+          className: s,
           value: r.value || "",
-          variables: m,
+          variables: l,
           error: e.error,
           onChange: r.onChange,
           onBlur: r.onBlur
@@ -53,12 +54,12 @@ function B({
       ),
       rules: {
         required: !0,
-        validate: g
+        validate: p
       }
     }
   );
 }
 export {
-  B as MessageController
+  M as MessageController
 };
 //# sourceMappingURL=MessageController.js.map

package/dist/components/MessageController.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageController.js","sources":["../../src/components/MessageController.tsx"],"sourcesContent":["import type { TemplateVariable } from \"@/types\";\nimport type { MessageType } from \"@/utils/schema\";\nimport type { MessageValidator } from \"@/utils/validate\";\nimport { Controller } from \"react-hook-form\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\n\nimport { MessageInput } from \"./inputs/MessageInput\";\nimport { RichTextInput } from \"./inputs/RichTextInput\";\n\ninterface MessageControllerProps {\n  type: MessageType;\n  label: string;\n  locale: string;\n  name: string;\n  className?: string;\n  variables: TemplateVariable[];\n  validate: MessageValidator;\n}\n\nexport function MessageController({\n  type,\n  name,\n  variables,\n  label,\n  locale,\n  validate,\n  className,\n}: MessageControllerProps): React.ReactNode {\n  const { control } = useMessagesForm();\n\n  if (type === \"rich\") {\n    return (\n      <Controller\n        control={control}\n        name={name}\n        render={({ field, fieldState }) => (\n          <RichTextInput\n            className={className}\n            error={fieldState.error}\n            label={label}\n            lang={locale}\n            onChange={field.onChange}\n            onBlur={field.onBlur}\n            value={(field.value as unknown as string) || \"\"}\n          />\n        )}\n        rules={{\n          required: true,\n        }}\n      />\n    );\n  }\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      render={({ field, fieldState }) => (\n        <MessageInput\n          label={label}\n          lang={locale}\n          className={className}\n          value={(field.value as unknown as string) || \"\"}\n          variables={variables}\n          error={fieldState.error}\n          onChange={field.onChange}\n          onBlur={field.onBlur}\n        />\n      )}\n      rules={{\n        required: true,\n        validate,\n      }}\n    />\n  );\n}\n"],"names":["MessageController","type","name","variables","label","locale","validate","className","control","useMessagesForm","Controller","field","fieldState","RichTextInput","MessageInput"],"mappings":";;;;AAoBO,SAASA,EAAkB;AAAA,EAChC,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA4C;AAC1C,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA;AAEpB,SAAIR,MAAS,SAET,sBAAA;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,SAAAF;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAS,GAAO,YAAAC,QAChB,sBAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAAN;AAAA,UACA,OAAOK,EAAW;AAAA,UAClB,OAAAR;AAAA,UACA,MAAMC;AAAA,UACN,UAAUM,EAAM;AAAA,UAChB,QAAQA,EAAM;AAAA,UACd,OAAQA,EAAM,SAA+B;AAAA,QAAA;AAAA,MAAA;AAAA,MAGjD,OAAO;AAAA,QACL,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA,IAMJ,sBAAA;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,SAAAF;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAS,GAAO,YAAAC,QAChB,sBAAA;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAAV;AAAA,UACA,MAAMC;AAAA,UACN,WAAAE;AAAA,UACA,OAAQI,EAAM,SAA+B;AAAA,UAC7C,WAAAR;AAAA,UACA,OAAOS,EAAW;AAAA,UAClB,UAAUD,EAAM;AAAA,UAChB,QAAQA,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAGlB,OAAO;AAAA,QACL,UAAU;AAAA,QACV,UAAAL;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"MessageController.js","sources":["../../src/components/MessageController.tsx"],"sourcesContent":["import type { TemplateVariable } from \"@/types\";\nimport type { MessageType } from \"@/utils/schema\";\nimport type { MessageValidator } from \"@/utils/validate\";\nimport { Controller } from \"react-hook-form\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\n\nimport { MessageInput } from \"./inputs/MessageInput\";\nimport { RichTextInput } from \"./inputs/RichTextInput\";\n\ninterface MessageControllerProps {\n  type: MessageType;\n  label: string;\n  locale: string;\n  name: string;\n  className?: string;\n  variables: TemplateVariable[];\n  validate: MessageValidator;\n}\n\nexport function MessageController({\n  type,\n  name,\n  variables,\n  label,\n  locale,\n  validate,\n  className,\n}: MessageControllerProps): React.ReactNode {\n  const { control } = useMessagesForm();\n\n  if (type === \"rich\") {\n    return (\n      <Controller\n        control={control}\n        name={name}\n        render={({ field, fieldState }) => (\n          <RichTextInput\n            className={className}\n            error={fieldState.error}\n            label={label}\n            lang={locale}\n            onChange={field.onChange}\n            onBlur={field.onBlur}\n            value={(field.value as unknown as string) || \"\"}\n          />\n        )}\n        rules={{\n          required: true,\n        }}\n      />\n    );\n  }\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      render={({ field, fieldState }) => (\n        <MessageInput\n          label={label}\n          lang={locale}\n          className={className}\n          value={(field.value as unknown as string) || \"\"}\n          variables={variables}\n          error={fieldState.error}\n          onChange={field.onChange}\n          onBlur={field.onBlur}\n        />\n      )}\n      rules={{\n        required: true,\n        validate,\n      }}\n    />\n  );\n}\n"],"names":["MessageController","type","name","variables","label","locale","validate","className","control","useMessagesForm","jsx","Controller","field","fieldState","RichTextInput","MessageInput"],"mappings":";;;;;AAoBO,SAASA,EAAkB;AAAA,EAChC,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA4C;AAC1C,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA;AAEpB,SAAIR,MAAS,SAET,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAU,GAAO,YAAAC,QAChB,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAAP;AAAA,UACA,OAAOM,EAAW;AAAA,UAClB,OAAAT;AAAA,UACA,MAAMC;AAAA,UACN,UAAUO,EAAM;AAAA,UAChB,QAAQA,EAAM;AAAA,UACd,OAAQA,EAAM,SAA+B;AAAA,QAAA;AAAA,MAAA;AAAA,MAGjD,OAAO;AAAA,QACL,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA,IAMJ,gBAAAF;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAU,GAAO,YAAAC,QAChB,gBAAAH;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAAX;AAAA,UACA,MAAMC;AAAA,UACN,WAAAE;AAAA,UACA,OAAQK,EAAM,SAA+B;AAAA,UAC7C,WAAAT;AAAA,UACA,OAAOU,EAAW;AAAA,UAClB,UAAUD,EAAM;AAAA,UAChB,QAAQA,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAGlB,OAAO;AAAA,QACL,UAAU;AAAA,QACV,UAAAN;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/MessagesForm.js

@@ -1,92 +1,107 @@
 "use client";
-import { useStepNav as v, Button as N } from "@payloadcms/ui";
-import { isEqual as S } from "lodash-es";
-import { useEffect as M, useState as x } from "react";
-import { useForm as y } from "react-hook-form";
-import { toast as f } from "sonner";
-import { MessagesFormProvider as T } from "../context/messages-form.js";
-import { cn as d } from "../utils/cn.js";
-import { JsonImport as j } from "./actions/JsonImport.js";
-import { MessageField as F } from "./layout/MessageField.js";
-import { MessagesTabs as O } from "./layout/MessagesTabs.js";
-import { MessagesTree as p } from "./layout/MessagesTree.js";
-function U({
-  locales: g,
+import { jsx as s, jsxs as r } from "react/jsx-runtime";
+import { useStepNav as M, Button as j } from "@payloadcms/ui";
+import { isEqual as y } from "lodash-es";
+import { useEffect as T, useState as F } from "react";
+import { useForm as O } from "react-hook-form";
+import { toast as h } from "sonner";
+import { MessagesFormProvider as w } from "../context/messages-form.js";
+import { cn as p } from "../utils/cn.js";
+import { JsonImport as C } from "./actions/JsonImport.js";
+import { MessageField as I } from "./layout/MessageField.js";
+import { MessagesTabs as E } from "./layout/MessagesTabs.js";
+import { MessagesTree as g } from "./layout/MessagesTree.js";
+function Q({
+  locales: u,
   schema: a,
-  tabs: r = !1,
-  values: c,
-  endpointUrl: h,
-  richTextEditorOptions: u
+  tabs: o = !1,
+  values: m,
+  endpointUrl: b,
+  richTextEditorOptions: v
 }) {
-  const { setStepNav: n } = v();
-  M(() => {
-    n([{ label: "Intl Messages", url: "/intl" }]);
-  }, [n]);
-  const s = y({
-    defaultValues: c,
+  const { setStepNav: c } = M();
+  T(() => {
+    c([{ label: "Intl Messages", url: "/intl" }]);
+  }, [c]);
+  const i = O({
+    defaultValues: m,
     reValidateMode: "onChange"
-  }), [m, b] = x(Object.keys(a)[0]), E = async (e) => {
-    const t = f.loading("Saving..."), R = Object.entries(e).reduce((o, [i, l]) => S(l, c[i]) ? o : {
-      ...o,
-      [i]: l
+  }), [n, N] = F(Object.keys(a)[0]), S = async (e) => {
+    const t = h.loading("Saving..."), x = Object.entries(e).reduce((d, [l, f]) => y(f, m[l]) ? d : {
+      ...d,
+      [l]: f
     }, {});
-    await fetch(h, {
+    await fetch(b, {
       method: "PUT",
-      body: JSON.stringify(R)
-    }), s.reset(e), f.success("Saved", { id: t });
+      body: JSON.stringify(x)
+    }), i.reset(e), h.success("Saved", { id: t });
   };
-  return /* @__PURE__ */ React.createElement(
-    T,
+  return /* @__PURE__ */ s(
+    w,
     {
-      form: s,
-      locales: g,
-      richTextEditorOptions: u
-    },
-    /* @__PURE__ */ React.createElement(
-      "form",
-      {
-        className: "flex h-[calc(100vh-var(--app-header-height))] flex-col",
-        onSubmit: s.handleSubmit(E)
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "sticky top-0 z-10 bg-background" }, /* @__PURE__ */ React.createElement("header", { className: "mb-6 flex items-center justify-between gap-4" }, /* @__PURE__ */ React.createElement("h1", { className: "text-4xl" }, "Messages"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(j, null), /* @__PURE__ */ React.createElement(
-        N,
+      form: i,
+      locales: u,
+      richTextEditorOptions: v,
+      children: /* @__PURE__ */ r(
+        "form",
         {
-          className: "my-0",
-          type: "submit",
-          disabled: !s.formState.isDirty
-        },
-        "Save"
-      ))), r && /* @__PURE__ */ React.createElement(
-        O,
-        {
-          schema: a,
-          activeTab: m,
-          setActiveTab: b
-        }
-      )),
-      /* @__PURE__ */ React.createElement("div", { id: "messages-form-content", className: "overflow-y-auto pt-8 pb-16" }, !r && /* @__PURE__ */ React.createElement(p, { path: "", schema: a, nestingLevel: 0 }), r && Object.entries(a).map(([e, t]) => typeof t == "string" ? /* @__PURE__ */ React.createElement(
-        F,
-        {
-          schema: t,
-          key: e,
-          className: d({ hidden: m !== e }),
-          messageKey: e,
-          path: e
-        }
-      ) : /* @__PURE__ */ React.createElement(
-        p,
-        {
-          className: d({ hidden: m !== e }),
-          key: e,
-          path: e,
-          schema: t,
-          nestingLevel: 0
+          className: "flex h-[calc(100vh-var(--app-header-height))] flex-col",
+          onSubmit: i.handleSubmit(S),
+          children: [
+            /* @__PURE__ */ r("div", { className: "sticky top-0 z-10 bg-background", children: [
+              /* @__PURE__ */ r("header", { className: "mb-6 flex items-center justify-between gap-4", children: [
+                /* @__PURE__ */ s("h1", { className: "text-4xl", children: "Messages" }),
+                /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ s(C, {}),
+                  /* @__PURE__ */ s(
+                    j,
+                    {
+                      className: "my-0",
+                      type: "submit",
+                      disabled: !i.formState.isDirty,
+                      children: "Save"
+                    }
+                  )
+                ] })
+              ] }),
+              o && /* @__PURE__ */ s(
+                E,
+                {
+                  schema: a,
+                  activeTab: n,
+                  setActiveTab: N
+                }
+              )
+            ] }),
+            /* @__PURE__ */ r("div", { id: "messages-form-content", className: "overflow-y-auto pt-8 pb-16", children: [
+              !o && /* @__PURE__ */ s(g, { path: "", schema: a, nestingLevel: 0 }),
+              o && Object.entries(a).map(([e, t]) => typeof t == "string" ? /* @__PURE__ */ s(
+                I,
+                {
+                  schema: t,
+                  className: p({ hidden: n !== e }),
+                  messageKey: e,
+                  path: e
+                },
+                e
+              ) : /* @__PURE__ */ s(
+                g,
+                {
+                  className: p({ hidden: n !== e }),
+                  path: e,
+                  schema: t,
+                  nestingLevel: 0
+                },
+                e
+              ))
+            ] })
+          ]
         }
-      )))
-    )
+      )
+    }
   );
 }
 export {
-  U as MessagesForm
+  Q as MessagesForm
 };
 //# sourceMappingURL=MessagesForm.js.map

package/dist/components/MessagesForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessagesForm.js","sources":["../../src/components/MessagesForm.tsx"],"sourcesContent":["\"use client\";\n\nimport type { FormValues } from \"@/context/messages-form\";\nimport type {\n  DeepPartial,\n  Locales,\n  Messages,\n  MessagesSchema,\n  RichTextEditorOptions,\n  Translations,\n} from \"@/types\";\nimport { Button, useStepNav } from \"@payloadcms/ui\";\nimport { isEqual } from \"lodash-es\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\n\nimport { MessagesFormProvider } from \"@/context/messages-form\";\nimport { cn } from \"@/utils/cn\";\n\nimport { JsonImport } from \"./actions/JsonImport\";\nimport { MessageField } from \"./layout/MessageField\";\nimport { MessagesTabs } from \"./layout/MessagesTabs\";\nimport { MessagesTree } from \"./layout/MessagesTree\";\n\ninterface MessagesFormProps {\n  locales: Locales;\n  schema: MessagesSchema;\n  tabs?: boolean;\n  values: Translations<DeepPartial<Messages>>;\n  endpointUrl: string;\n  richTextEditorOptions?: RichTextEditorOptions;\n}\n\nexport function MessagesForm({\n  locales,\n  schema,\n  tabs = false,\n  values,\n  endpointUrl,\n  richTextEditorOptions,\n}: MessagesFormProps): React.ReactNode {\n  const { setStepNav } = useStepNav();\n  useEffect(() => {\n    setStepNav([{ label: \"Intl Messages\", url: \"/intl\" }]);\n  }, [setStepNav]);\n\n  const form = useForm<FormValues>({\n    defaultValues: values,\n    reValidateMode: \"onChange\",\n  });\n  const [activeTab, setActiveTab] = useState(Object.keys(schema)[0]);\n\n  const handleSubmit = async (currentValues: FormValues) => {\n    const toastId = toast.loading(\"Saving...\");\n    const changes = Object.entries(currentValues).reduce<\n      Translations<Messages>\n    >((acc, [locale, value]) => {\n      const hasChanged = !isEqual(value, values[locale]);\n      if (!hasChanged) {\n        return acc;\n      }\n      return {\n        ...acc,\n        [locale]: value,\n      };\n    }, {});\n\n    await fetch(endpointUrl, {\n      method: \"PUT\",\n      body: JSON.stringify(changes),\n    });\n\n    form.reset(currentValues);\n    toast.success(\"Saved\", { id: toastId });\n  };\n\n  return (\n    <MessagesFormProvider\n      form={form}\n      locales={locales}\n      richTextEditorOptions={richTextEditorOptions}\n    >\n      <form\n        className=\"flex h-[calc(100vh-var(--app-header-height))] flex-col\"\n        onSubmit={form.handleSubmit(handleSubmit)}\n      >\n        <div className=\"sticky top-0 z-10 bg-background\">\n          <header className=\"mb-6 flex items-center justify-between gap-4\">\n            <h1 className=\"text-4xl\">Messages</h1>\n            <div className=\"flex items-center gap-2\">\n              <JsonImport />\n              <Button\n                className=\"my-0\"\n                type=\"submit\"\n                disabled={!form.formState.isDirty}\n              >\n                Save\n              </Button>\n            </div>\n          </header>\n          {tabs && (\n            <MessagesTabs\n              schema={schema}\n              activeTab={activeTab}\n              setActiveTab={setActiveTab}\n            />\n          )}\n        </div>\n\n        <div id=\"messages-form-content\" className=\"overflow-y-auto pt-8 pb-16\">\n          {!tabs && <MessagesTree path=\"\" schema={schema} nestingLevel={0} />}\n          {tabs &&\n            Object.entries(schema).map(([key, value]) => {\n              if (typeof value === \"string\") {\n                return (\n                  <MessageField\n                    schema={value}\n                    key={key}\n                    className={cn({ hidden: activeTab !== key })}\n                    messageKey={key}\n                    path={key}\n                  />\n                );\n              }\n              return (\n                <MessagesTree\n                  className={cn({ hidden: activeTab !== key })}\n                  key={key}\n                  path={key}\n                  schema={value}\n                  nestingLevel={0}\n                />\n              );\n            })}\n        </div>\n      </form>\n    </MessagesFormProvider>\n  );\n}\n"],"names":["MessagesForm","locales","schema","tabs","values","endpointUrl","richTextEditorOptions","setStepNav","useStepNav","useEffect","form","useForm","activeTab","setActiveTab","useState","handleSubmit","currentValues","toastId","toast","changes","acc","locale","value","isEqual","MessagesFormProvider","JsonImport","Button","MessagesTabs","MessagesTree","key","MessageField","cn"],"mappings":"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"}
+{"version":3,"file":"MessagesForm.js","sources":["../../src/components/MessagesForm.tsx"],"sourcesContent":["\"use client\";\n\nimport type { FormValues } from \"@/context/messages-form\";\nimport type {\n  DeepPartial,\n  Locales,\n  Messages,\n  MessagesSchema,\n  RichTextEditorOptions,\n  Translations,\n} from \"@/types\";\nimport { Button, useStepNav } from \"@payloadcms/ui\";\nimport { isEqual } from \"lodash-es\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\n\nimport { MessagesFormProvider } from \"@/context/messages-form\";\nimport { cn } from \"@/utils/cn\";\n\nimport { JsonImport } from \"./actions/JsonImport\";\nimport { MessageField } from \"./layout/MessageField\";\nimport { MessagesTabs } from \"./layout/MessagesTabs\";\nimport { MessagesTree } from \"./layout/MessagesTree\";\n\ninterface MessagesFormProps {\n  locales: Locales;\n  schema: MessagesSchema;\n  tabs?: boolean;\n  values: Translations<DeepPartial<Messages>>;\n  endpointUrl: string;\n  richTextEditorOptions?: RichTextEditorOptions;\n}\n\nexport function MessagesForm({\n  locales,\n  schema,\n  tabs = false,\n  values,\n  endpointUrl,\n  richTextEditorOptions,\n}: MessagesFormProps): React.ReactNode {\n  const { setStepNav } = useStepNav();\n  useEffect(() => {\n    setStepNav([{ label: \"Intl Messages\", url: \"/intl\" }]);\n  }, [setStepNav]);\n\n  const form = useForm<FormValues>({\n    defaultValues: values,\n    reValidateMode: \"onChange\",\n  });\n  const [activeTab, setActiveTab] = useState(Object.keys(schema)[0]);\n\n  const handleSubmit = async (currentValues: FormValues) => {\n    const toastId = toast.loading(\"Saving...\");\n    const changes = Object.entries(currentValues).reduce<\n      Translations<Messages>\n    >((acc, [locale, value]) => {\n      const hasChanged = !isEqual(value, values[locale]);\n      if (!hasChanged) {\n        return acc;\n      }\n      return {\n        ...acc,\n        [locale]: value,\n      };\n    }, {});\n\n    await fetch(endpointUrl, {\n      method: \"PUT\",\n      body: JSON.stringify(changes),\n    });\n\n    form.reset(currentValues);\n    toast.success(\"Saved\", { id: toastId });\n  };\n\n  return (\n    <MessagesFormProvider\n      form={form}\n      locales={locales}\n      richTextEditorOptions={richTextEditorOptions}\n    >\n      <form\n        className=\"flex h-[calc(100vh-var(--app-header-height))] flex-col\"\n        onSubmit={form.handleSubmit(handleSubmit)}\n      >\n        <div className=\"sticky top-0 z-10 bg-background\">\n          <header className=\"mb-6 flex items-center justify-between gap-4\">\n            <h1 className=\"text-4xl\">Messages</h1>\n            <div className=\"flex items-center gap-2\">\n              <JsonImport />\n              <Button\n                className=\"my-0\"\n                type=\"submit\"\n                disabled={!form.formState.isDirty}\n              >\n                Save\n              </Button>\n            </div>\n          </header>\n          {tabs && (\n            <MessagesTabs\n              schema={schema}\n              activeTab={activeTab}\n              setActiveTab={setActiveTab}\n            />\n          )}\n        </div>\n\n        <div id=\"messages-form-content\" className=\"overflow-y-auto pt-8 pb-16\">\n          {!tabs && <MessagesTree path=\"\" schema={schema} nestingLevel={0} />}\n          {tabs &&\n            Object.entries(schema).map(([key, value]) => {\n              if (typeof value === \"string\") {\n                return (\n                  <MessageField\n                    schema={value}\n                    key={key}\n                    className={cn({ hidden: activeTab !== key })}\n                    messageKey={key}\n                    path={key}\n                  />\n                );\n              }\n              return (\n                <MessagesTree\n                  className={cn({ hidden: activeTab !== key })}\n                  key={key}\n                  path={key}\n                  schema={value}\n                  nestingLevel={0}\n                />\n              );\n            })}\n        </div>\n      </form>\n    </MessagesFormProvider>\n  );\n}\n"],"names":["MessagesForm","locales","schema","tabs","values","endpointUrl","richTextEditorOptions","setStepNav","useStepNav","useEffect","form","useForm","activeTab","setActiveTab","useState","handleSubmit","currentValues","toastId","toast","changes","acc","locale","value","isEqual","jsx","MessagesFormProvider","jsxs","JsonImport","Button","MessagesTabs","MessagesTree","key","MessageField","cn"],"mappings":"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"}

package/dist/components/actions/JsonImport.d.ts

@@ -1 +1 @@
-export declare function JsonImport(): import("react").JSX.Element;
+export declare function JsonImport(): import("react/jsx-runtime").JSX.Element;

package/dist/components/actions/JsonImport.js

@@ -1,57 +1,63 @@
-import { Button as l } from "@payloadcms/ui";
-import { IconBraces as d } from "@tabler/icons-react";
-import { useRef as f, useState as R } from "react";
-import { useMessagesForm as g } from "../../context/messages-form.js";
-function h() {
-  const { locales: s, setValue: c } = g(), a = f(null), [o, n] = R(), u = (t) => {
-    const e = t.target.files?.[0];
-    if (!o || !e) {
-      t.target.value = "";
-      return;
-    }
-    const r = new FileReader();
-    r.onload = (i) => {
-      const m = i.target?.result, p = JSON.parse(m);
-      c(o, p, {
-        shouldDirty: !0,
-        shouldValidate: !0
-      }), n(void 0), t.target.value = "";
-    }, r.readAsText(e);
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      ref: a,
-      accept: ".json",
-      hidden: !0,
-      onChange: u,
-      type: "file"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    l,
-    {
-      className: "my-0",
-      buttonStyle: "subtle",
-      iconPosition: "left",
-      icon: /* @__PURE__ */ React.createElement(d, { className: "size-5" }),
-      SubMenuPopupContent: ({ close: t }) => /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, s.map((e) => /* @__PURE__ */ React.createElement(
-        l,
-        {
-          key: e,
-          buttonStyle: "subtle",
-          size: "small",
-          onClick: () => {
-            n(e), a.current?.click(), t();
+import { jsxs as a, Fragment as f, jsx as o } from "react/jsx-runtime";
+import { Button as c } from "@payloadcms/ui";
+import { IconBraces as h } from "@tabler/icons-react";
+import { useRef as g, useState as S } from "react";
+import { useMessagesForm as x } from "../../context/messages-form.js";
+function C() {
+  const { locales: i, setValue: u } = x(), r = g(null), [s, n] = S();
+  return /* @__PURE__ */ a(f, { children: [
+    /* @__PURE__ */ o(
+      "input",
+      {
+        ref: r,
+        accept: ".json",
+        hidden: !0,
+        onChange: (t) => {
+          const e = t.target.files?.[0];
+          if (!s || !e) {
+            t.target.value = "";
+            return;
           }
+          const l = new FileReader();
+          l.onload = (m) => {
+            const d = m.target?.result, p = JSON.parse(d);
+            u(s, p, {
+              shouldDirty: !0,
+              shouldValidate: !0
+            }), n(void 0), t.target.value = "";
+          }, l.readAsText(e);
         },
-        e,
-        ".json"
-      )))
-    },
-    "Import"
-  ));
+        type: "file"
+      }
+    ),
+    /* @__PURE__ */ o(
+      c,
+      {
+        className: "my-0",
+        buttonStyle: "subtle",
+        iconPosition: "left",
+        icon: /* @__PURE__ */ o(h, { className: "size-5" }),
+        SubMenuPopupContent: ({ close: t }) => /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: i.map((e) => /* @__PURE__ */ a(
+          c,
+          {
+            buttonStyle: "subtle",
+            size: "small",
+            onClick: () => {
+              n(e), r.current?.click(), t();
+            },
+            children: [
+              e,
+              ".json"
+            ]
+          },
+          e
+        )) }),
+        children: "Import"
+      }
+    )
+  ] });
 }
 export {
-  h as JsonImport
+  C as JsonImport
 };
 //# sourceMappingURL=JsonImport.js.map

package/dist/components/actions/JsonImport.js.map

@@ -1 +1 @@
-{"version":3,"file":"JsonImport.js","sources":["../../../src/components/actions/JsonImport.tsx"],"sourcesContent":["import { Button } from \"@payloadcms/ui\";\nimport { IconBraces } from \"@tabler/icons-react\";\nimport { useRef, useState } from \"react\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\n\nexport function JsonImport() {\n  const { locales, setValue } = useMessagesForm();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [selectedLocale, setSelectedLocale] = useState<string>();\n\n  const handleImportJSON = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n    if (!selectedLocale || !file) {\n      event.target.value = \"\";\n      return;\n    }\n\n    const reader = new FileReader();\n    reader.onload = (readerEvent) => {\n      const text = readerEvent.target?.result as string;\n      const data = JSON.parse(text);\n      // FIMXE this does not cause the form to re-render\n      setValue(selectedLocale, data, {\n        shouldDirty: true,\n        shouldValidate: true,\n      });\n      setSelectedLocale(undefined);\n      // Clear the input value to allow re-selection of the same or different file\n      event.target.value = \"\";\n    };\n    reader.readAsText(file);\n  };\n\n  return (\n    <>\n      <input\n        ref={inputRef}\n        accept=\".json\"\n        hidden\n        onChange={handleImportJSON}\n        type=\"file\"\n      />\n      <Button\n        className=\"my-0\"\n        buttonStyle=\"subtle\"\n        iconPosition=\"left\"\n        icon={<IconBraces className=\"size-5\" />}\n        SubMenuPopupContent={({ close }) => (\n          <div className=\"flex flex-col gap-2\">\n            {locales.map((locale) => (\n              <Button\n                key={locale}\n                buttonStyle=\"subtle\"\n                size=\"small\"\n                onClick={() => {\n                  setSelectedLocale(locale);\n                  inputRef.current?.click();\n                  close();\n                }}\n              >\n                {locale}.json\n              </Button>\n            ))}\n          </div>\n        )}\n      >\n        Import\n      </Button>\n    </>\n  );\n}\n"],"names":["JsonImport","locales","setValue","useMessagesForm","inputRef","useRef","selectedLocale","setSelectedLocale","useState","handleImportJSON","event","file","reader","readerEvent","text","data","Button","IconBraces","close","locale"],"mappings":";;;;AAMO,SAASA,IAAa;AAC3B,QAAM,EAAE,SAAAC,GAAS,UAAAC,EAAA,IAAaC,EAAA,GACxBC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAgBC,CAAiB,IAAIC,EAAA,GAEtCC,IAAmB,CAACC,MAA+C;AACvE,UAAMC,IAAOD,EAAM,OAAO,QAAQ,CAAC;AACnC,QAAI,CAACJ,KAAkB,CAACK,GAAM;AAC5B,MAAAD,EAAM,OAAO,QAAQ;AACrB;AAAA,IACF;AAEA,UAAME,IAAS,IAAI,WAAA;AACnB,IAAAA,EAAO,SAAS,CAACC,MAAgB;AAC/B,YAAMC,IAAOD,EAAY,QAAQ,QAC3BE,IAAO,KAAK,MAAMD,CAAI;AAE5B,MAAAZ,EAASI,GAAgBS,GAAM;AAAA,QAC7B,aAAa;AAAA,QACb,gBAAgB;AAAA,MAAA,CACjB,GACDR,EAAkB,MAAS,GAE3BG,EAAM,OAAO,QAAQ;AAAA,IACvB,GACAE,EAAO,WAAWD,CAAI;AAAA,EACxB;AAEA,SACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKP;AAAA,MACL,QAAO;AAAA,MACP,QAAM;AAAA,MACN,UAAUK;AAAA,MACV,MAAK;AAAA,IAAA;AAAA,EAAA,GAEP,sBAAA;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,aAAY;AAAA,MACZ,cAAa;AAAA,MACb,MAAM,sBAAA,cAACC,GAAA,EAAW,WAAU,UAAS;AAAA,MACrC,qBAAqB,CAAC,EAAE,OAAAC,EAAA,MACtB,sBAAA,cAAC,OAAA,EAAI,WAAU,sBAAA,GACZjB,EAAQ,IAAI,CAACkB,MACZ,sBAAA;AAAA,QAACH;AAAA,QAAA;AAAA,UACC,KAAKG;AAAA,UACL,aAAY;AAAA,UACZ,MAAK;AAAA,UACL,SAAS,MAAM;AACb,YAAAZ,EAAkBY,CAAM,GACxBf,EAAS,SAAS,MAAA,GAClBc,EAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAECC;AAAA,QAAO;AAAA,MAAA,CAEX,CACH;AAAA,IAAA;AAAA,IAEH;AAAA,EAAA,CAGH;AAEJ;"}
+{"version":3,"file":"JsonImport.js","sources":["../../../src/components/actions/JsonImport.tsx"],"sourcesContent":["import { Button } from \"@payloadcms/ui\";\nimport { IconBraces } from \"@tabler/icons-react\";\nimport { useRef, useState } from \"react\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\n\nexport function JsonImport() {\n  const { locales, setValue } = useMessagesForm();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [selectedLocale, setSelectedLocale] = useState<string>();\n\n  const handleImportJSON = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n    if (!selectedLocale || !file) {\n      event.target.value = \"\";\n      return;\n    }\n\n    const reader = new FileReader();\n    reader.onload = (readerEvent) => {\n      const text = readerEvent.target?.result as string;\n      const data = JSON.parse(text);\n      // FIMXE this does not cause the form to re-render\n      setValue(selectedLocale, data, {\n        shouldDirty: true,\n        shouldValidate: true,\n      });\n      setSelectedLocale(undefined);\n      // Clear the input value to allow re-selection of the same or different file\n      event.target.value = \"\";\n    };\n    reader.readAsText(file);\n  };\n\n  return (\n    <>\n      <input\n        ref={inputRef}\n        accept=\".json\"\n        hidden\n        onChange={handleImportJSON}\n        type=\"file\"\n      />\n      <Button\n        className=\"my-0\"\n        buttonStyle=\"subtle\"\n        iconPosition=\"left\"\n        icon={<IconBraces className=\"size-5\" />}\n        SubMenuPopupContent={({ close }) => (\n          <div className=\"flex flex-col gap-2\">\n            {locales.map((locale) => (\n              <Button\n                key={locale}\n                buttonStyle=\"subtle\"\n                size=\"small\"\n                onClick={() => {\n                  setSelectedLocale(locale);\n                  inputRef.current?.click();\n                  close();\n                }}\n              >\n                {locale}.json\n              </Button>\n            ))}\n          </div>\n        )}\n      >\n        Import\n      </Button>\n    </>\n  );\n}\n"],"names":["JsonImport","locales","setValue","useMessagesForm","inputRef","useRef","selectedLocale","setSelectedLocale","useState","jsxs","Fragment","jsx","event","file","reader","readerEvent","text","data","Button","IconBraces","close","locale"],"mappings":";;;;;AAMO,SAASA,IAAa;AAC3B,QAAM,EAAE,SAAAC,GAAS,UAAAC,EAAA,IAAaC,EAAA,GACxBC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAgBC,CAAiB,IAAIC,EAAA;AAyB5C,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKP;AAAA,QACL,QAAO;AAAA,QACP,QAAM;AAAA,QACN,UA7BmB,CAACQ,MAA+C;AACvE,gBAAMC,IAAOD,EAAM,OAAO,QAAQ,CAAC;AACnC,cAAI,CAACN,KAAkB,CAACO,GAAM;AAC5B,YAAAD,EAAM,OAAO,QAAQ;AACrB;AAAA,UACF;AAEA,gBAAME,IAAS,IAAI,WAAA;AACnB,UAAAA,EAAO,SAAS,CAACC,MAAgB;AAC/B,kBAAMC,IAAOD,EAAY,QAAQ,QAC3BE,IAAO,KAAK,MAAMD,CAAI;AAE5B,YAAAd,EAASI,GAAgBW,GAAM;AAAA,cAC7B,aAAa;AAAA,cACb,gBAAgB;AAAA,YAAA,CACjB,GACDV,EAAkB,MAAS,GAE3BK,EAAM,OAAO,QAAQ;AAAA,UACvB,GACAE,EAAO,WAAWD,CAAI;AAAA,QACxB;AAAA,QASM,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAEP,gBAAAF;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,MAAM,gBAAAP,EAACQ,GAAA,EAAW,WAAU,SAAA,CAAS;AAAA,QACrC,qBAAqB,CAAC,EAAE,OAAAC,QACtB,gBAAAT,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAV,EAAQ,IAAI,CAACoB,MACZ,gBAAAZ;AAAA,UAACS;AAAA,UAAA;AAAA,YAEC,aAAY;AAAA,YACZ,MAAK;AAAA,YACL,SAAS,MAAM;AACb,cAAAX,EAAkBc,CAAM,GACxBjB,EAAS,SAAS,MAAA,GAClBgB,EAAA;AAAA,YACF;AAAA,YAEC,UAAA;AAAA,cAAAC;AAAA,cAAO;AAAA,YAAA;AAAA,UAAA;AAAA,UATHA;AAAA,QAAA,CAWR,GACH;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACF;AAEJ;"}

package/dist/components/actions/Move.d.ts

@@ -1,3 +1,3 @@
 export interface MoveProps {
 }
-export declare function Move({}: MoveProps): import("react").JSX.Element;
+export declare function Move({}: MoveProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/InputWrapper.d.ts

@@ -4,4 +4,4 @@ export interface InputWrapperProps {
     error: FieldError | undefined;
     className?: string;
 }
-export declare function InputWrapper({ label, error, className, children, }: React.PropsWithChildren<InputWrapperProps>): import("react").JSX.Element;
+export declare function InputWrapper({ label, error, className, children, }: React.PropsWithChildren<InputWrapperProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/InputWrapper.js

@@ -1,23 +1,29 @@
-import { FieldLabel as l } from "@payloadcms/ui";
-import { cn as t } from "../../utils/cn.js";
-function o({
-  label: a,
-  error: e,
-  className: r,
-  children: c
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { FieldLabel as i } from "@payloadcms/ui";
+import { cn as s } from "../../utils/cn.js";
+function c({
+  label: o,
+  error: r,
+  className: t,
+  children: a
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: t("flex flex-col gap-1", r) }, /* @__PURE__ */ React.createElement(
-    "fieldset",
-    {
-      className: t("mx-0 rounded-md focus-within:border-elevation-400", {
-        "border-error bg-error": e
-      })
-    },
-    /* @__PURE__ */ React.createElement("legend", { className: "-ml-2 px-1.5 text-base" }, /* @__PURE__ */ React.createElement(l, { label: a })),
-    c
-  ), /* @__PURE__ */ React.createElement("p", { className: "text-base text-error" }, e?.message));
+  return /* @__PURE__ */ l("div", { className: s("flex flex-col gap-1", t), children: [
+    /* @__PURE__ */ l(
+      "fieldset",
+      {
+        className: s("mx-0 rounded-md focus-within:border-elevation-400", {
+          "border-error bg-error": r
+        }),
+        children: [
+          /* @__PURE__ */ e("legend", { className: "-ml-2 px-1.5 text-base", children: /* @__PURE__ */ e(i, { label: o }) }),
+          a
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("p", { className: "text-base text-error", children: r?.message })
+  ] });
 }
 export {
-  o as InputWrapper
+  c as InputWrapper
 };
 //# sourceMappingURL=InputWrapper.js.map

package/dist/components/inputs/InputWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputWrapper.js","sources":["../../../src/components/inputs/InputWrapper.tsx"],"sourcesContent":["import type { FieldError } from \"react-hook-form\";\nimport { FieldLabel } from \"@payloadcms/ui\";\n\nimport { cn } from \"@/utils/cn\";\n\nexport interface InputWrapperProps {\n  label: string;\n  error: FieldError | undefined;\n  className?: string;\n}\n\nexport function InputWrapper({\n  label,\n  error,\n  className,\n  children,\n}: React.PropsWithChildren<InputWrapperProps>) {\n  return (\n    <div className={cn(\"flex flex-col gap-1\", className)}>\n      <fieldset\n        className={cn(\"mx-0 rounded-md focus-within:border-elevation-400\", {\n          \"border-error bg-error\": error,\n        })}\n      >\n        <legend className=\"-ml-2 px-1.5 text-base\">\n          <FieldLabel label={label} />\n        </legend>\n        {children}\n      </fieldset>\n      <p className=\"text-base text-error\">{error?.message}</p>\n    </div>\n  );\n}\n"],"names":["InputWrapper","label","error","className","children","cn","FieldLabel"],"mappings":";;AAWO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA+C;AAC7C,6CACG,OAAA,EAAI,WAAWC,EAAG,uBAAuBF,CAAS,KACjD,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWE,EAAG,qDAAqD;AAAA,QACjE,yBAAyBH;AAAA,MAAA,CAC1B;AAAA,IAAA;AAAA,wCAEA,UAAA,EAAO,WAAU,4BAChB,sBAAA,cAACI,GAAA,EAAW,OAAAL,GAAc,CAC5B;AAAA,IACCG;AAAA,EAAA,GAEH,sBAAA,cAAC,KAAA,EAAE,WAAU,uBAAA,GAAwBF,GAAO,OAAQ,CACtD;AAEJ;"}
+{"version":3,"file":"InputWrapper.js","sources":["../../../src/components/inputs/InputWrapper.tsx"],"sourcesContent":["import type { FieldError } from \"react-hook-form\";\nimport { FieldLabel } from \"@payloadcms/ui\";\n\nimport { cn } from \"@/utils/cn\";\n\nexport interface InputWrapperProps {\n  label: string;\n  error: FieldError | undefined;\n  className?: string;\n}\n\nexport function InputWrapper({\n  label,\n  error,\n  className,\n  children,\n}: React.PropsWithChildren<InputWrapperProps>) {\n  return (\n    <div className={cn(\"flex flex-col gap-1\", className)}>\n      <fieldset\n        className={cn(\"mx-0 rounded-md focus-within:border-elevation-400\", {\n          \"border-error bg-error\": error,\n        })}\n      >\n        <legend className=\"-ml-2 px-1.5 text-base\">\n          <FieldLabel label={label} />\n        </legend>\n        {children}\n      </fieldset>\n      <p className=\"text-base text-error\">{error?.message}</p>\n    </div>\n  );\n}\n"],"names":["InputWrapper","label","error","className","children","cn","jsxs","jsx","FieldLabel"],"mappings":";;;AAWO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA+C;AAC7C,2BACG,OAAA,EAAI,WAAWC,EAAG,uBAAuBF,CAAS,GACjD,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,EAAG,qDAAqD;AAAA,UACjE,yBAAyBH;AAAA,QAAA,CAC1B;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAK,EAAC,YAAO,WAAU,0BAChB,UAAA,gBAAAA,EAACC,GAAA,EAAW,OAAAP,GAAc,GAC5B;AAAA,UACCG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAG,EAAC,KAAA,EAAE,WAAU,wBAAwB,aAAO,QAAA,CAAQ;AAAA,EAAA,GACtD;AAEJ;"}

package/dist/components/inputs/MessageInput.d.ts

@@ -7,4 +7,4 @@ export interface MessageInputProps extends InputWrapperProps {
     onChange: (value: string) => void;
     onBlur: () => void;
 }
-export declare function MessageInput({ label, value, lang, error, variables, onChange, onBlur, className, }: MessageInputProps): import("react").JSX.Element;
+export declare function MessageInput({ label, value, lang, error, variables, onChange, onBlur, className, }: MessageInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/MessageInput.js

@@ -1,37 +1,38 @@
-import c from "@tiptap/extension-document";
-import f from "@tiptap/extension-paragraph";
-import d from "@tiptap/extension-text";
-import { useEditor as u, EditorContent as l } from "@tiptap/react";
-import { parseIcuToProseMirrorJSON as x } from "../../utils/icu-tranform.js";
-import { InputWrapper as E } from "./InputWrapper.js";
-import { VariableMention as g } from "./variables/extension.js";
-function b({
-  label: e,
+import { jsx as r } from "react/jsx-runtime";
+import d from "@tiptap/extension-document";
+import c from "@tiptap/extension-paragraph";
+import u from "@tiptap/extension-text";
+import { useEditor as l, EditorContent as x } from "@tiptap/react";
+import { parseIcuToProseMirrorJSON as g } from "../../utils/icu-tranform.js";
+import { InputWrapper as h } from "./InputWrapper.js";
+import { VariableMention as I } from "./variables/extension.js";
+function C({
+  label: o,
   value: t,
-  lang: r,
-  error: o,
-  variables: i,
-  onChange: m,
-  onBlur: n,
+  lang: e,
+  error: i,
+  variables: m,
+  onChange: n,
+  onBlur: p,
   className: a
 }) {
-  const p = u({
+  const s = l({
     immediatelyRender: !1,
-    content: x(t),
-    extensions: [c, f, d, g(i)],
-    onUpdate: ({ editor: s }) => m(s.getText())
+    content: g(t),
+    extensions: [d, c, u, I(m)],
+    onUpdate: ({ editor: f }) => n(f.getText())
   });
-  return /* @__PURE__ */ React.createElement(E, { label: e, error: o, className: a }, /* @__PURE__ */ React.createElement(
-    l,
+  return /* @__PURE__ */ r(h, { label: o, error: i, className: a, children: /* @__PURE__ */ r(
+    x,
     {
       className: "tiptap-editor min-h-8",
-      editor: p,
-      lang: r,
-      onBlur: n
+      editor: s,
+      lang: e,
+      onBlur: p
     }
-  ));
+  ) });
 }
 export {
-  b as MessageInput
+  C as MessageInput
 };
 //# sourceMappingURL=MessageInput.js.map