@drawbridge/components 0.0.78 → 0.1.0

package/dist/dashboard/input-fields.js

@@ -0,0 +1,1101 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var input_fields_exports = {};
+__export(input_fields_exports, {
+  InputFieldsAddress: () => InputFieldsAddress,
+  InputFieldsCampaign: () => InputFieldsCampaign,
+  InputFieldsCurrency: () => InputFieldsCurrency,
+  InputFieldsDetails: () => InputFieldsDetails,
+  InputFieldsImages: () => InputFieldsImages,
+  InputFieldsMedia: () => InputFieldsMedia,
+  InputFieldsPage: () => InputFieldsPage,
+  InputFieldsStyle: () => InputFieldsStyle,
+  schemas: () => schemas
+});
+module.exports = __toCommonJS(input_fields_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import_react_query = require("@tanstack/react-query");
+var import_dynamic = __toESM(require("next/dynamic"));
+var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
+var import_yup = __toESM(require("../shared/lib/yup"));
+var import_fieldset = __toESM(require("../shared/fieldset"));
+var import_input_group = __toESM(require("../input-group"));
+var import_input_group_ai = __toESM(require("./input-group-ai"));
+var import_input_color = __toESM(require("./input-color"));
+var import_input_font = __toESM(require("./input-font"));
+var import_input_range = __toESM(require("../shared/input-range"));
+var import_input_combobox = __toESM(require("./input-combobox"));
+var import_input_text = __toESM(require("../input-text"));
+var import_input_textarea = __toESM(require("../input-textarea"));
+var import_input_array = require("./input-array");
+var import_input_file = __toESM(require("./input-file"));
+var import_divider = __toESM(require("../shared/divider"));
+var import_button = __toESM(require("../shared/button"));
+var import_map_pin = __toESM(require("../icons/map-pin"));
+var import_plus = __toESM(require("../icons/plus"));
+var import_trash = __toESM(require("../icons/trash"));
+var import_geo = require("./lib/geo");
+var import_loader = require("../shared/loader");
+const InputGoogleAutocomplete = (0, import_dynamic.default)(() => import("./google").then((m) => m.InputGoogleAutocomplete), { loading: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loader.LoaderDynamic, {}), ssr: false });
+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: () => import_yup.default.address(),
+  style: () => ({
+    style: import_yup.default.object({
+      background: import_yup.default.object(),
+      body: import_yup.default.object(),
+      button: import_yup.default.object({
+        background: import_yup.default.object(),
+        radius: import_yup.default.number(),
+        text: import_yup.default.object()
+      }),
+      heading: import_yup.default.object(),
+      image: import_yup.default.object({ radius: import_yup.default.number() }),
+      input: import_yup.default.object({ radius: import_yup.default.number() }),
+      text: import_yup.default.object()
+    })
+  }),
+  campaign: ({ typeEnum }) => ({
+    title: import_yup.default.string().label("Title").required().max(150).nullable(),
+    type: import_yup.default.string().label("Type").oneOf(typeEnum).required()
+  }),
+  page: () => ({
+    title: import_yup.default.string().label("Title").required().max(150)
+  }),
+  currency: () => ({
+    currency: import_yup.default.string().label("Currency").required()
+  }),
+  images: () => ({
+    images: import_yup.default.object({
+      logo: import_yup.default.mixed().file().nullable(),
+      preview: import_yup.default.mixed().file().nullable()
+    })
+  })
+};
+const InputFieldsAddress = ({ showAutocomplete = true }) => {
+  var _a, _b;
+  const { control, formState, setValue } = (0, import_react_hook_form.useFormContext)();
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const countries = queryClient.getQueryData(["countries"]);
+  const updateAddress = (0, import_react.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] = (0, import_react.useState)(false);
+  const handleGeolocate = (0, import_react.useCallback)(() => {
+    setGeolocating(true);
+    (0, import_geo.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 (0, import_geo.reverseGeocode)({ lat, lng });
+          if (address) {
+            updateAddress(address);
+          }
+        } finally {
+          setGeolocating(false);
+        }
+      }
+    });
+  }, [queryClient, updateAddress]);
+  const country = (0, import_react_hook_form.useWatch)({ control, name: "country" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...{ className: "space-y-6" }, children: [
+    showAutocomplete && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_button.default,
+        {
+          ...{
+            icon: import_map_pin.default,
+            justify: "between",
+            loading: geolocating,
+            onClick: handleGeolocate,
+            title: "Use my current location",
+            variant: "secondary"
+          },
+          children: "Use location"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_divider.default, { children: "Or" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_input_group.default,
+        {
+          ...{
+            input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              InputGoogleAutocomplete,
+              {
+                ...{
+                  includedPrimaryTypes: ["street_address", "premise", "subpremise"],
+                  onAddressChange: (value) => updateAddress(value),
+                  placeholder: "Search for an address..."
+                }
+              }
+            )
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_divider.default, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.Controller,
+      {
+        ...{
+          control,
+          name: "address",
+          render: ({ field: { value, onChange } }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.address) == null ? void 0 : _b2.message,
+                  input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_text.default, { ...{ onChange, placeholder: "Street Address", value: value || "" } }),
+                  label: "Address"
+                }
+              }
+            );
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.Controller,
+      {
+        ...{
+          control,
+          name: "address2",
+          render: ({ field: { value, onChange } }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.address2) == null ? void 0 : _b2.message,
+                  input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_text.default, { ...{ onChange, placeholder: "Apartment, suite, etc. (Optional)", value: value || "" } }),
+                  label: "Address 2"
+                }
+              }
+            );
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.Controller,
+      {
+        ...{
+          control,
+          name: "country",
+          render: ({ field: { onChange } }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.country) == null ? void 0 : _b2.message,
+                  input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_input_combobox.default,
+                    {
+                      ...{
+                        // 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__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.Controller,
+      {
+        ...{
+          control,
+          name: "city",
+          render: ({ field: { value, onChange } }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.city) == null ? void 0 : _b2.message,
+                  input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_text.default, { ...{ onChange, placeholder: "City", value: value || "" } }),
+                  label: "City"
+                }
+              }
+            );
+          }
+        }
+      }
+    ),
+    country && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: ((_b = (_a = countries == null ? void 0 : countries.list) == null ? void 0 : _a.find(({ key }) => key === country)) == null ? void 0 : _b.subdivisions) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.Controller,
+      {
+        ...{
+          control,
+          name: "province",
+          render: ({ field: { value, onChange } }) => {
+            var _a2, _b2, _c, _d;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.province) == null ? void 0 : _b2.message,
+                  input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_input_combobox.default,
+                    {
+                      ...{
+                        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__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.Controller,
+      {
+        ...{
+          control,
+          name: "province",
+          render: ({ field: { value, onChange } }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.province) == null ? void 0 : _b2.message,
+                  input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_text.default, { ...{ onChange, placeholder: "Province/State", value: value || "" } }),
+                  label: "Province/State"
+                }
+              }
+            );
+          }
+        }
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.Controller,
+      {
+        ...{
+          control,
+          name: "postal",
+          render: ({ field: { value, onChange } }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.postal) == null ? void 0 : _b2.message,
+                  input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_text.default, { ...{ onChange, placeholder: "Postal Code", value: value || "" } }),
+                  label: "Postal Code"
+                }
+              }
+            );
+          }
+        }
+      }
+    )
+  ] });
+};
+const InputFieldsStyle = ({ disabled, onUpdate }) => {
+  const { control, getValues } = (0, import_react_hook_form.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...{ className: "space-y-8" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_fieldset.default, { ...{ disabled, legend: "General" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_hook_form.Controller,
+        {
+          ...{
+            control,
+            name: "style.heading",
+            render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_input_font.default,
+                    {
+                      ...{
+                        onChange: (val) => {
+                          onChange(val);
+                          onUpdate == null ? void 0 : onUpdate(getValues());
+                        },
+                        value: value || ""
+                      }
+                    }
+                  ),
+                  label: "Heading font"
+                }
+              }
+            )
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_hook_form.Controller,
+        {
+          ...{
+            control,
+            name: "style.body",
+            render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_input_font.default,
+                    {
+                      ...{
+                        onChange: (val) => {
+                          onChange(val);
+                          onUpdate == null ? void 0 : onUpdate(getValues());
+                        },
+                        value: value || ""
+                      }
+                    }
+                  ),
+                  label: "Body font"
+                }
+              }
+            )
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...{ className: "grid grid-cols-1 gap-6 md:grid-cols-2" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_hook_form.Controller,
+          {
+            ...{
+              control,
+              name: "style.background.color",
+              render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_input_group.default,
+                {
+                  ...{
+                    input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_input_color.default,
+                      {
+                        ...{
+                          onChange: (val) => {
+                            onChange(val);
+                            onUpdate == null ? void 0 : onUpdate(getValues());
+                          },
+                          value: value || ""
+                        }
+                      }
+                    ),
+                    label: "Background color"
+                  }
+                }
+              )
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_hook_form.Controller,
+          {
+            ...{
+              control,
+              name: "style.text.color",
+              render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_input_group.default,
+                {
+                  ...{
+                    input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_input_color.default,
+                      {
+                        ...{
+                          onChange: (val) => {
+                            onChange(val);
+                            onUpdate == null ? void 0 : onUpdate(getValues());
+                          },
+                          value: value || ""
+                        }
+                      }
+                    ),
+                    label: "Text color"
+                  }
+                }
+              )
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fieldset.default, { ...{ disabled, legend: "Input" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.Controller,
+      {
+        ...{
+          control,
+          name: "style.input.radius",
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input_group.default,
+            {
+              ...{
+                input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_input_range.default,
+                  {
+                    ...{
+                      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__ */ (0, import_jsx_runtime.jsx)(import_fieldset.default, { ...{ disabled, legend: "Image" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.Controller,
+      {
+        ...{
+          control,
+          name: "style.image.radius",
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input_group.default,
+            {
+              ...{
+                input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_input_range.default,
+                  {
+                    ...{
+                      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__ */ (0, import_jsx_runtime.jsxs)(import_fieldset.default, { ...{ disabled, legend: "Button" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...{ className: "grid grid-cols-1 gap-6 md:grid-cols-2" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_hook_form.Controller,
+          {
+            ...{
+              control,
+              name: "style.button.background.color",
+              render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_input_group.default,
+                {
+                  ...{
+                    input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_input_color.default,
+                      {
+                        ...{
+                          onChange: (val) => {
+                            onChange(val);
+                            onUpdate == null ? void 0 : onUpdate(getValues());
+                          },
+                          value: value || ""
+                        }
+                      }
+                    ),
+                    label: "Background color"
+                  }
+                }
+              )
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_hook_form.Controller,
+          {
+            ...{
+              control,
+              name: "style.button.text.color",
+              render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_input_group.default,
+                {
+                  ...{
+                    input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_input_color.default,
+                      {
+                        ...{
+                          onChange: (val) => {
+                            onChange(val);
+                            onUpdate == null ? void 0 : onUpdate(getValues());
+                          },
+                          value: value || ""
+                        }
+                      }
+                    ),
+                    label: "Text color"
+                  }
+                }
+              )
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_hook_form.Controller,
+        {
+          ...{
+            control,
+            name: "style.button.radius",
+            render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_input_range.default,
+                    {
+                      ...{
+                        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 } = (0, import_react_hook_form.useFormContext)();
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const app = queryClient.getQueryData(["app"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.Controller,
+      {
+        ...{
+          control,
+          name: "title",
+          render: ({ field: { value, onChange } }) => {
+            var _a, _b;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.title) == null ? void 0 : _b.message,
+                  input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_input_text.default,
+                    {
+                      ...{
+                        onChange: (val) => {
+                          onChange(val);
+                          onUpdate == null ? void 0 : onUpdate(val);
+                        },
+                        value: value || ""
+                      }
+                    }
+                  ),
+                  label: "Campaign title"
+                }
+              }
+            );
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.Controller,
+      {
+        ...{
+          control,
+          name: "type",
+          render: ({ field: { value, onChange } }) => {
+            var _a, _b;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.type) == null ? void 0 : _b.message,
+                  input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_input_combobox.default,
+                    {
+                      ...{
+                        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 } = (0, import_react_hook_form.useFormContext)();
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const app = queryClient.getQueryData(["app"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_hook_form.Controller,
+    {
+      ...{
+        control,
+        name: "currency",
+        render: ({ field: { value, onChange } }) => {
+          var _a, _b, _c, _d;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input_group.default,
+            {
+              ...{
+                error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.currency) == null ? void 0 : _b.message,
+                input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_input_combobox.default,
+                  {
+                    ...{
+                      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 } = (0, import_react_hook_form.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_hook_form.Controller,
+    {
+      ...{
+        control,
+        name: "title",
+        render: ({ field: { value, onChange } }) => {
+          var _a, _b;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input_group.default,
+            {
+              ...{
+                "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__ */ (0, import_jsx_runtime.jsx)(
+                  import_input_text.default,
+                  {
+                    ...{
+                      onChange: (val) => {
+                        onChange(val);
+                        onUpdate == null ? void 0 : onUpdate(val);
+                      },
+                      value: value || ""
+                    }
+                  }
+                ),
+                label: "Title"
+              }
+            }
+          );
+        }
+      }
+    }
+  );
+};
+const InputFieldsDetails = ({ organization, onUpdate }) => {
+  const { control, formState, getValues } = (0, import_react_hook_form.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.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__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group_ai.default,
+              {
+                ...{
+                  "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__ */ (0, import_jsx_runtime.jsx)(
+                    import_input_textarea.default,
+                    {
+                      ...{
+                        onChange,
+                        placeholder: import_drawbridge_utils.constants.page.headline,
+                        value
+                      }
+                    }
+                  ),
+                  label: "Headline",
+                  limit: 150,
+                  message: "Max 150 characters",
+                  onChange,
+                  organization,
+                  value
+                }
+              }
+            );
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.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__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group_ai.default,
+              {
+                ...{
+                  "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__ */ (0, import_jsx_runtime.jsx)(
+                    import_input_textarea.default,
+                    {
+                      ...{
+                        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 } = (0, import_react_hook_form.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.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__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  "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__ */ (0, import_jsx_runtime.jsx)(
+                    import_input_file.default,
+                    {
+                      ...{
+                        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__ */ (0, import_jsx_runtime.jsx)(
+      import_react_hook_form.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__ */ (0, import_jsx_runtime.jsx)(
+              import_input_group.default,
+              {
+                ...{
+                  "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__ */ (0, import_jsx_runtime.jsx)(
+                    import_input_file.default,
+                    {
+                      ...{
+                        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 } = (0, import_react_hook_form.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_input_group.default,
+      {
+        ...{
+          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.gallery) == null ? void 0 : _b.message,
+          input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input_array.InputArraySortable,
+            {
+              ...{
+                control,
+                "data-guide": "form-input-gallery",
+                empty: "Gallery is empty",
+                name: "gallery",
+                onSort: () => onUpdate == null ? void 0 : onUpdate(getValues()),
+                renderButton: (append) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_input_file.default,
+                  {
+                    ...{
+                      button: {
+                        icon: import_plus.default,
+                        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__ */ (0, import_jsx_runtime.jsx)(
+                    import_input_array.InputArrayControl,
+                    {
+                      ...{
+                        onClick: () => {
+                          remove(index);
+                          onUpdate == null ? void 0 : onUpdate(getValues());
+                        },
+                        icon: import_trash.default
+                      }
+                    },
+                    "gallery-control-remove-" + index
+                  )
+                ]
+              },
+              children: ({ field, handle, index, update }) => {
+                var _a2, _b2, _c;
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    ...{
+                      className: "flex items-center min-w-0 flex-1 space-x-3"
+                    },
+                    children: [
+                      handle,
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_input_group.default,
+                        {
+                          ...{
+                            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__ */ (0, import_jsx_runtime.jsx)(
+                              import_input_file.default,
+                              {
+                                ...{
+                                  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__ */ (0, import_jsx_runtime.jsx)(
+      InputFieldsImages,
+      {
+        ...{
+          onUpdate,
+          organization,
+          values
+        }
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputFieldsAddress,
+  InputFieldsCampaign,
+  InputFieldsCurrency,
+  InputFieldsDetails,
+  InputFieldsImages,
+  InputFieldsMedia,
+  InputFieldsPage,
+  InputFieldsStyle,
+  schemas
+});