import { jsx as e, jsxs as r } from "react/jsx-runtime";
import c from "react";
import { useFormContext as p } from "react-hook-form";
import u from "../../Form.js";
import h from "../../hooks/useZodForm.js";
import a from "../../../box/Box.js";
import f from "../../../button/Button.js";
import b from "../../../text/Text.js";
import x from "../../../form-group/FormGroup.js";
import t from "../../../field/Field.js";
import o from "../../../field/components/field-label/FieldLabel.js";
import i from "../../../field/components/field-control/FieldControl.js";
import l from "../../../simple-input/SimpleInput.js";
import { o as g, s as d } from "../../../../types-Brp6Qwfh.js";
const S = g({
  street: d().min(1, "Street is required"),
  city: d().min(1, "City is required"),
  state: d().min(1, "State is required"),
  zipCode: d().min(1, "ZIP code is required")
}), C = () => {
  const { watch: s } = p(), n = s("city");
  return /* @__PURE__ */ r(a, { className: "flex flex-col gap-[var(--spacing-4)]", children: [
    /* @__PURE__ */ e(a, { className: "p-[var(--spacing-3)] rounded-[var(--border-radius-md)] bg-[var(--base-muted)] border border-solid border-[var(--base-border)]", children: /* @__PURE__ */ r(b, { type: "small", children: [
      "Current city: ",
      /* @__PURE__ */ e("strong", { children: n || "—" })
    ] }) }),
    /* @__PURE__ */ r(x, { label: "Address", columns: { xs: 4, lg: 12 }, children: [
      /* @__PURE__ */ r(t, { name: "street", columnSpan: { xs: 4, lg: 12 }, children: [
        /* @__PURE__ */ e(o, { required: !0, children: "Street" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(l, { placeholder: "123 Main St" }) })
      ] }),
      /* @__PURE__ */ r(t, { name: "city", columnSpan: { xs: 4, lg: 6 }, children: [
        /* @__PURE__ */ e(o, { required: !0, children: "City" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(l, { placeholder: "Springfield" }) })
      ] }),
      /* @__PURE__ */ r(t, { name: "state", columnSpan: { xs: 2, lg: 3 }, children: [
        /* @__PURE__ */ e(o, { required: !0, children: "State" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(l, { placeholder: "IL" }) })
      ] }),
      /* @__PURE__ */ r(t, { name: "zipCode", columnSpan: { xs: 2, lg: 3 }, children: [
        /* @__PURE__ */ e(o, { required: !0, children: "ZIP Code" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(l, { placeholder: "62701" }) })
      ] })
    ] })
  ] });
}, W = () => {
  const s = h({
    schema: S,
    defaultValues: { street: "", city: "", state: "", zipCode: "" }
  }), n = c.useCallback((m) => {
    console.log(m), alert("Address submitted!");
  }, []);
  return /* @__PURE__ */ e(u, { form: s, onSubmit: n, children: /* @__PURE__ */ r(a, { className: "flex flex-col gap-[var(--spacing-4)]", children: [
    /* @__PURE__ */ e(C, {}),
    /* @__PURE__ */ e(f, { type: "submit", label: "Submit Address", variant: "default" })
  ] }) });
};
export {
  W as default
};
//# sourceMappingURL=FormContextWrapper.js.map
