@drawbridge/components 0.0.77 → 0.1.0

package/dist/dashboard/input-fields.mjs

@@ -0,0 +1,1060 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useState } from "react";
+import { useFormContext, Controller, useWatch } from "react-hook-form";
+import { useQueryClient } from "@tanstack/react-query";
+import dynamic from "next/dynamic";
+import { constants } from "@drawbridge/drawbridge-utils";
+import yup from "../shared/lib/yup";
+import Fieldset from "../shared/fieldset";
+import InputGroup from "../input-group";
+import InputGroupAI from "./input-group-ai";
+import InputColor from "./input-color";
+import InputFont from "./input-font";
+import InputRange from "../shared/input-range";
+import InputCombobox from "./input-combobox";
+import InputText from "../input-text";
+import InputTextarea from "../input-textarea";
+import { InputArrayControl, InputArraySortable } from "./input-array";
+import InputFile from "./input-file";
+import Divider from "../shared/divider";
+import Button from "../shared/button";
+import MapPin from "../icons/map-pin";
+import Plus from "../icons/plus";
+import Trash from "../icons/trash";
+const InputGoogleAutocomplete = dynamic(() => import("./google").then((m) => m.InputGoogleAutocomplete), { loading: () => /* @__PURE__ */ jsx(LoaderDynamic, {}), ssr: false });
+import { getLocation, reverseGeocode } from "./lib/geo";
+import { LoaderDynamic } from "../shared/loader";
+const schemas = {
+  // The one address rule, the same shape every api address route checks
+  // (utils yup). Its unit is nullable: a saved empty unit comes back null.
+  address: () => yup.address(),
+  style: () => ({
+    style: yup.object({
+      background: yup.object(),
+      body: yup.object(),
+      button: yup.object({
+        background: yup.object(),
+        radius: yup.number(),
+        text: yup.object()
+      }),
+      heading: yup.object(),
+      image: yup.object({ radius: yup.number() }),
+      input: yup.object({ radius: yup.number() }),
+      text: yup.object()
+    })
+  }),
+  campaign: ({ typeEnum }) => ({
+    title: yup.string().label("Title").required().max(150).nullable(),
+    type: yup.string().label("Type").oneOf(typeEnum).required()
+  }),
+  page: () => ({
+    title: yup.string().label("Title").required().max(150)
+  }),
+  currency: () => ({
+    currency: yup.string().label("Currency").required()
+  }),
+  images: () => ({
+    images: yup.object({
+      logo: yup.mixed().file().nullable(),
+      preview: yup.mixed().file().nullable()
+    })
+  })
+};
+const InputFieldsAddress = ({ showAutocomplete = true }) => {
+  var _a, _b;
+  const { control, formState, setValue } = useFormContext();
+  const queryClient = useQueryClient();
+  const countries = queryClient.getQueryData(["countries"]);
+  const updateAddress = useCallback((value) => {
+    const options = { shouldDirty: true, shouldValidate: true };
+    setValue("address", value.address, options);
+    setValue("address2", value.address2, options);
+    setValue("city", value.city, options);
+    setValue("country", value.country, options);
+    setValue("postal", value.postalCode, options);
+    setValue("province", value.province, options);
+  }, [setValue]);
+  const [geolocating, setGeolocating] = useState(false);
+  const handleGeolocate = useCallback(() => {
+    setGeolocating(true);
+    getLocation({
+      onError: (response) => {
+        queryClient.setQueryData(
+          ["notice"],
+          {
+            active: true,
+            response: new Error((response == null ? void 0 : response.message) || "Could not get your location.")
+          }
+        );
+        setGeolocating(false);
+      },
+      onSuccess: async ({ lat, lng }) => {
+        try {
+          const address = await reverseGeocode({ lat, lng });
+          if (address) {
+            updateAddress(address);
+          }
+        } finally {
+          setGeolocating(false);
+        }
+      }
+    });
+  }, [queryClient, updateAddress]);
+  const country = useWatch({ control, name: "country" });
+  return /* @__PURE__ */ jsxs("div", { ...{ className: "space-y-6" }, children: [
+    showAutocomplete && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...{
+            icon: MapPin,
+            justify: "between",
+            loading: geolocating,
+            onClick: handleGeolocate,
+            title: "Use my current location",
+            variant: "secondary"
+          },
+          children: "Use location"
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, { children: "Or" }),
+      /* @__PURE__ */ jsx(
+        InputGroup,
+        {
+          ...{
+            input: /* @__PURE__ */ jsx(
+              InputGoogleAutocomplete,
+              {
+                ...{
+                  includedPrimaryTypes: ["street_address", "premise", "subpremise"],
+                  onAddressChange: (value) => updateAddress(value),
+                  placeholder: "Search for an address..."
+                }
+              }
+            )
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, {})
+    ] }),
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          name: "address",
+          render: ({ field: { value, onChange } }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.address) == null ? void 0 : _b2.message,
+                  input: /* @__PURE__ */ jsx(InputText, { ...{ onChange, placeholder: "Street Address", value: value || "" } }),
+                  label: "Address"
+                }
+              }
+            );
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          name: "address2",
+          render: ({ field: { value, onChange } }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.address2) == null ? void 0 : _b2.message,
+                  input: /* @__PURE__ */ jsx(InputText, { ...{ onChange, placeholder: "Apartment, suite, etc. (Optional)", value: value || "" } }),
+                  label: "Address 2"
+                }
+              }
+            );
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          name: "country",
+          render: ({ field: { onChange } }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.country) == null ? void 0 : _b2.message,
+                  input: /* @__PURE__ */ jsx(
+                    InputCombobox,
+                    {
+                      ...{
+                        // Use the field's onChange (not a bare setValue) so
+                        // selecting a country re-validates and clears the
+                        // "Country is a required field" error on the create form.
+                        onChange,
+                        options: [
+                          { value: null, key: "Select a Country" },
+                          ...((countries == null ? void 0 : countries.list) || []).map((c) => ({ value: c.key, key: c.key }))
+                        ],
+                        value: country || ""
+                      }
+                    }
+                  ),
+                  label: "Country"
+                }
+              }
+            );
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          name: "city",
+          render: ({ field: { value, onChange } }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.city) == null ? void 0 : _b2.message,
+                  input: /* @__PURE__ */ jsx(InputText, { ...{ onChange, placeholder: "City", value: value || "" } }),
+                  label: "City"
+                }
+              }
+            );
+          }
+        }
+      }
+    ),
+    country && /* @__PURE__ */ jsx(Fragment, { children: ((_b = (_a = countries == null ? void 0 : countries.list) == null ? void 0 : _a.find(({ key }) => key === country)) == null ? void 0 : _b.subdivisions) ? /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          name: "province",
+          render: ({ field: { value, onChange } }) => {
+            var _a2, _b2, _c, _d;
+            return /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.province) == null ? void 0 : _b2.message,
+                  input: /* @__PURE__ */ jsx(
+                    InputCombobox,
+                    {
+                      ...{
+                        onChange,
+                        options: [
+                          { value: null, key: "Select a Province/State" },
+                          ...(_d = (_c = countries == null ? void 0 : countries.list) == null ? void 0 : _c.find((c) => c.key === country)) == null ? void 0 : _d.subdivisions.map((province) => ({ value: province.key, key: province.key }))
+                        ],
+                        value: value || ""
+                      }
+                    }
+                  ),
+                  label: "Province/State"
+                }
+              }
+            );
+          }
+        }
+      }
+    ) : /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          name: "province",
+          render: ({ field: { value, onChange } }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.province) == null ? void 0 : _b2.message,
+                  input: /* @__PURE__ */ jsx(InputText, { ...{ onChange, placeholder: "Province/State", value: value || "" } }),
+                  label: "Province/State"
+                }
+              }
+            );
+          }
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          name: "postal",
+          render: ({ field: { value, onChange } }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.postal) == null ? void 0 : _b2.message,
+                  input: /* @__PURE__ */ jsx(InputText, { ...{ onChange, placeholder: "Postal Code", value: value || "" } }),
+                  label: "Postal Code"
+                }
+              }
+            );
+          }
+        }
+      }
+    )
+  ] });
+};
+const InputFieldsStyle = ({ disabled, onUpdate }) => {
+  const { control, getValues } = useFormContext();
+  return /* @__PURE__ */ jsxs("div", { ...{ className: "space-y-8" }, children: [
+    /* @__PURE__ */ jsxs(Fieldset, { ...{ disabled, legend: "General" }, children: [
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          ...{
+            control,
+            name: "style.heading",
+            render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  input: /* @__PURE__ */ jsx(
+                    InputFont,
+                    {
+                      ...{
+                        onChange: (val) => {
+                          onChange(val);
+                          onUpdate == null ? void 0 : onUpdate(getValues());
+                        },
+                        value: value || ""
+                      }
+                    }
+                  ),
+                  label: "Heading font"
+                }
+              }
+            )
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          ...{
+            control,
+            name: "style.body",
+            render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  input: /* @__PURE__ */ jsx(
+                    InputFont,
+                    {
+                      ...{
+                        onChange: (val) => {
+                          onChange(val);
+                          onUpdate == null ? void 0 : onUpdate(getValues());
+                        },
+                        value: value || ""
+                      }
+                    }
+                  ),
+                  label: "Body font"
+                }
+              }
+            )
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { ...{ className: "grid grid-cols-1 gap-6 md:grid-cols-2" }, children: [
+        /* @__PURE__ */ jsx(
+          Controller,
+          {
+            ...{
+              control,
+              name: "style.background.color",
+              render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx(
+                InputGroup,
+                {
+                  ...{
+                    input: /* @__PURE__ */ jsx(
+                      InputColor,
+                      {
+                        ...{
+                          onChange: (val) => {
+                            onChange(val);
+                            onUpdate == null ? void 0 : onUpdate(getValues());
+                          },
+                          value: value || ""
+                        }
+                      }
+                    ),
+                    label: "Background color"
+                  }
+                }
+              )
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Controller,
+          {
+            ...{
+              control,
+              name: "style.text.color",
+              render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx(
+                InputGroup,
+                {
+                  ...{
+                    input: /* @__PURE__ */ jsx(
+                      InputColor,
+                      {
+                        ...{
+                          onChange: (val) => {
+                            onChange(val);
+                            onUpdate == null ? void 0 : onUpdate(getValues());
+                          },
+                          value: value || ""
+                        }
+                      }
+                    ),
+                    label: "Text color"
+                  }
+                }
+              )
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Fieldset, { ...{ disabled, legend: "Input" }, children: /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          name: "style.input.radius",
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx(
+            InputGroup,
+            {
+              ...{
+                input: /* @__PURE__ */ jsx(
+                  InputRange,
+                  {
+                    ...{
+                      min: 0,
+                      max: 100,
+                      onChange: (val) => {
+                        onChange(val);
+                        onUpdate == null ? void 0 : onUpdate(getValues());
+                      },
+                      preview: "input",
+                      value: value ?? 0
+                    }
+                  }
+                ),
+                label: "Border radius",
+                message: "Controls the corner rounding of form inputs on your page"
+              }
+            }
+          )
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Fieldset, { ...{ disabled, legend: "Image" }, children: /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          name: "style.image.radius",
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx(
+            InputGroup,
+            {
+              ...{
+                input: /* @__PURE__ */ jsx(
+                  InputRange,
+                  {
+                    ...{
+                      min: 0,
+                      max: 30,
+                      onChange: (val) => {
+                        onChange(val);
+                        onUpdate == null ? void 0 : onUpdate(getValues());
+                      },
+                      preview: "image",
+                      value: value ?? 12
+                    }
+                  }
+                ),
+                label: "Image radius",
+                message: "Controls the corner rounding of images on your page"
+              }
+            }
+          )
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Fieldset, { ...{ disabled, legend: "Button" }, children: [
+      /* @__PURE__ */ jsxs("div", { ...{ className: "grid grid-cols-1 gap-6 md:grid-cols-2" }, children: [
+        /* @__PURE__ */ jsx(
+          Controller,
+          {
+            ...{
+              control,
+              name: "style.button.background.color",
+              render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx(
+                InputGroup,
+                {
+                  ...{
+                    input: /* @__PURE__ */ jsx(
+                      InputColor,
+                      {
+                        ...{
+                          onChange: (val) => {
+                            onChange(val);
+                            onUpdate == null ? void 0 : onUpdate(getValues());
+                          },
+                          value: value || ""
+                        }
+                      }
+                    ),
+                    label: "Background color"
+                  }
+                }
+              )
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Controller,
+          {
+            ...{
+              control,
+              name: "style.button.text.color",
+              render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx(
+                InputGroup,
+                {
+                  ...{
+                    input: /* @__PURE__ */ jsx(
+                      InputColor,
+                      {
+                        ...{
+                          onChange: (val) => {
+                            onChange(val);
+                            onUpdate == null ? void 0 : onUpdate(getValues());
+                          },
+                          value: value || ""
+                        }
+                      }
+                    ),
+                    label: "Text color"
+                  }
+                }
+              )
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          ...{
+            control,
+            name: "style.button.radius",
+            render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  input: /* @__PURE__ */ jsx(
+                    InputRange,
+                    {
+                      ...{
+                        min: 0,
+                        max: 100,
+                        onChange: (val) => {
+                          onChange(val);
+                          onUpdate == null ? void 0 : onUpdate(getValues());
+                        },
+                        preview: "button",
+                        value: value ?? 0
+                      }
+                    }
+                  ),
+                  label: "Border radius",
+                  message: "Controls the corner rounding of buttons on your page"
+                }
+              }
+            )
+          }
+        }
+      )
+    ] })
+  ] });
+};
+const InputFieldsCampaign = ({ onUpdate }) => {
+  const { control, formState } = useFormContext();
+  const queryClient = useQueryClient();
+  const app = queryClient.getQueryData(["app"]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          name: "title",
+          render: ({ field: { value, onChange } }) => {
+            var _a, _b;
+            return /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.title) == null ? void 0 : _b.message,
+                  input: /* @__PURE__ */ jsx(
+                    InputText,
+                    {
+                      ...{
+                        onChange: (val) => {
+                          onChange(val);
+                          onUpdate == null ? void 0 : onUpdate(val);
+                        },
+                        value: value || ""
+                      }
+                    }
+                  ),
+                  label: "Campaign title"
+                }
+              }
+            );
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          name: "type",
+          render: ({ field: { value, onChange } }) => {
+            var _a, _b;
+            return /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.type) == null ? void 0 : _b.message,
+                  input: /* @__PURE__ */ jsx(
+                    InputCombobox,
+                    {
+                      ...{
+                        onChange,
+                        options: app.enums.campaign.type.options,
+                        value: value || "giveaway"
+                      }
+                    }
+                  ),
+                  label: "Campaign type",
+                  message: "Giveaway includes prize draws, ranges, and prizes. Default type is for lead capture only."
+                }
+              }
+            );
+          }
+        }
+      }
+    )
+  ] });
+};
+const InputFieldsCurrency = ({ label } = {}) => {
+  const { control, formState } = useFormContext();
+  const queryClient = useQueryClient();
+  const app = queryClient.getQueryData(["app"]);
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      ...{
+        control,
+        name: "currency",
+        render: ({ field: { value, onChange } }) => {
+          var _a, _b, _c, _d;
+          return /* @__PURE__ */ jsx(
+            InputGroup,
+            {
+              ...{
+                error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.currency) == null ? void 0 : _b.message,
+                input: /* @__PURE__ */ jsx(
+                  InputCombobox,
+                  {
+                    ...{
+                      onChange,
+                      options: ((_d = (_c = app == null ? void 0 : app.enums) == null ? void 0 : _c.currency) == null ? void 0 : _d.options) || [],
+                      searchable: true,
+                      value: value || "usd"
+                    }
+                  }
+                ),
+                label
+              }
+            }
+          );
+        }
+      }
+    }
+  );
+};
+const InputFieldsPage = ({ onUpdate }) => {
+  const { control, formState } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      ...{
+        control,
+        name: "title",
+        render: ({ field: { value, onChange } }) => {
+          var _a, _b;
+          return /* @__PURE__ */ jsx(
+            InputGroup,
+            {
+              ...{
+                "data-guide": "form-input-title",
+                error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.title) == null ? void 0 : _b.message,
+                input: /* @__PURE__ */ jsx(
+                  InputText,
+                  {
+                    ...{
+                      onChange: (val) => {
+                        onChange(val);
+                        onUpdate == null ? void 0 : onUpdate(val);
+                      },
+                      value: value || ""
+                    }
+                  }
+                ),
+                label: "Title"
+              }
+            }
+          );
+        }
+      }
+    }
+  );
+};
+const InputFieldsDetails = ({ organization, onUpdate }) => {
+  const { control, formState, getValues } = useFormContext();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          name: "headline",
+          render: ({ field }) => {
+            var _a, _b;
+            const onChange = (val) => {
+              field.onChange(val);
+              onUpdate == null ? void 0 : onUpdate(getValues());
+            };
+            const value = (field == null ? void 0 : field.value) || "";
+            return /* @__PURE__ */ jsx(
+              InputGroupAI,
+              {
+                ...{
+                  "data-guide": "form-input-headline",
+                  error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.headline) == null ? void 0 : _b.message,
+                  input: /* @__PURE__ */ jsx(
+                    InputTextarea,
+                    {
+                      ...{
+                        onChange,
+                        placeholder: constants.page.headline,
+                        value
+                      }
+                    }
+                  ),
+                  label: "Headline",
+                  limit: 150,
+                  message: "Max 150 characters",
+                  onChange,
+                  organization,
+                  value
+                }
+              }
+            );
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          name: "description",
+          render: ({ field }) => {
+            var _a, _b;
+            const onChange = (val) => {
+              field.onChange(val);
+              onUpdate == null ? void 0 : onUpdate(getValues());
+            };
+            const value = (field == null ? void 0 : field.value) || "";
+            return /* @__PURE__ */ jsx(
+              InputGroupAI,
+              {
+                ...{
+                  "data-guide": "form-input-description",
+                  error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.description) == null ? void 0 : _b.message,
+                  input: /* @__PURE__ */ jsx(
+                    InputTextarea,
+                    {
+                      ...{
+                        onChange,
+                        value
+                      }
+                    }
+                  ),
+                  label: "Description",
+                  limit: 300,
+                  message: "Max 300 characters",
+                  onChange,
+                  organization,
+                  value
+                }
+              }
+            );
+          }
+        }
+      }
+    )
+  ] });
+};
+const InputFieldsImages = ({ organization, onUpdate, values = {} }) => {
+  var _a, _b, _c, _d;
+  const { control, formState, getValues } = useFormContext();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          defaultValue: (_b = values == null ? void 0 : values.images) == null ? void 0 : _b.logo,
+          name: "images.logo",
+          render: ({ field: { value, onChange } }) => {
+            var _a2, _b2, _c2;
+            return /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  "data-guide": "form-input-logo",
+                  error: (_c2 = (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.images) == null ? void 0 : _b2.logo) == null ? void 0 : _c2.message,
+                  input: /* @__PURE__ */ jsx(
+                    InputFile,
+                    {
+                      ...{
+                        endpoint: "/organization/" + values.organization,
+                        onChange: (val) => {
+                          onChange(val);
+                          onUpdate == null ? void 0 : onUpdate(getValues());
+                        },
+                        organization,
+                        type: "image",
+                        value: value || ""
+                      }
+                    }
+                  ),
+                  label: "Logo"
+                }
+              }
+            );
+          }
+        }
+      },
+      "images-logo-" + JSON.stringify((_a = values == null ? void 0 : values.images) == null ? void 0 : _a.logo)
+    ),
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        ...{
+          control,
+          defaultValue: (_d = values == null ? void 0 : values.images) == null ? void 0 : _d.preview,
+          name: "images.preview",
+          render: ({ field: { value, onChange } }) => {
+            var _a2, _b2, _c2;
+            return /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  "data-guide": "form-input-preview",
+                  error: (_c2 = (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.images) == null ? void 0 : _b2.preview) == null ? void 0 : _c2.message,
+                  input: /* @__PURE__ */ jsx(
+                    InputFile,
+                    {
+                      ...{
+                        endpoint: "/organization/" + values.organization,
+                        organization,
+                        onChange: (val) => {
+                          onChange(val);
+                          onUpdate == null ? void 0 : onUpdate(getValues());
+                        },
+                        type: "image",
+                        value: value || ""
+                      }
+                    }
+                  ),
+                  label: "Preview image",
+                  message: "The image that is displayed in applications that support link previews"
+                }
+              }
+            );
+          }
+        }
+      },
+      "images-preview-" + JSON.stringify((_c = values == null ? void 0 : values.images) == null ? void 0 : _c.preview)
+    )
+  ] });
+};
+const InputFieldsMedia = ({ organization, onUpdate, values = {} }) => {
+  var _a, _b;
+  const { control, formState, getValues } = useFormContext();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      InputGroup,
+      {
+        ...{
+          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.gallery) == null ? void 0 : _b.message,
+          input: /* @__PURE__ */ jsx(
+            InputArraySortable,
+            {
+              ...{
+                control,
+                "data-guide": "form-input-gallery",
+                empty: "Gallery is empty",
+                name: "gallery",
+                onSort: () => onUpdate == null ? void 0 : onUpdate(getValues()),
+                renderButton: (append) => /* @__PURE__ */ jsx(
+                  InputFile,
+                  {
+                    ...{
+                      button: {
+                        icon: Plus,
+                        text: "Add gallery item"
+                      },
+                      endpoint: "/organization/" + values.organization,
+                      filters: {
+                        id: {
+                          $nin: (getValues().gallery || []).map(({ id }) => id).filter(Boolean)
+                        }
+                      },
+                      onChange: (response) => {
+                        append(response);
+                        onUpdate == null ? void 0 : onUpdate(getValues());
+                      },
+                      organization,
+                      nullable: false,
+                      value: null,
+                      type: "media"
+                    }
+                  }
+                ),
+                renderControls: ({ index, remove }) => [
+                  /* @__PURE__ */ jsx(
+                    InputArrayControl,
+                    {
+                      ...{
+                        onClick: () => {
+                          remove(index);
+                          onUpdate == null ? void 0 : onUpdate(getValues());
+                        },
+                        icon: Trash
+                      }
+                    },
+                    "gallery-control-remove-" + index
+                  )
+                ]
+              },
+              children: ({ field, handle, index, update }) => {
+                var _a2, _b2, _c;
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ...{
+                      className: "flex items-center min-w-0 flex-1 space-x-3"
+                    },
+                    children: [
+                      handle,
+                      /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            error: (_c = (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.gallery) == null ? void 0 : _b2[index]) == null ? void 0 : _c.message,
+                            input: /* @__PURE__ */ jsx(
+                              InputFile,
+                              {
+                                ...{
+                                  endpoint: "/organization/" + values.organization,
+                                  filters: {
+                                    id: {
+                                      $nin: (getValues().gallery || []).map(({ id }) => id).filter(Boolean)
+                                    }
+                                  },
+                                  onChange: (response) => {
+                                    update(
+                                      index,
+                                      response
+                                    );
+                                    onUpdate == null ? void 0 : onUpdate(getValues());
+                                  },
+                                  organization,
+                                  nullable: false,
+                                  value: field,
+                                  type: "media"
+                                }
+                              }
+                            )
+                          }
+                        }
+                      )
+                    ]
+                  }
+                );
+              }
+            }
+          ),
+          label: "Gallery"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputFieldsImages,
+      {
+        ...{
+          onUpdate,
+          organization,
+          values
+        }
+      }
+    )
+  ] });
+};
+export {
+  InputFieldsAddress,
+  InputFieldsCampaign,
+  InputFieldsCurrency,
+  InputFieldsDetails,
+  InputFieldsImages,
+  InputFieldsMedia,
+  InputFieldsPage,
+  InputFieldsStyle,
+  schemas
+};