import { jsx as e, jsxs as r } from "react/jsx-runtime";
import u from "react";
import g from "../../../form/hooks/useZodForm.js";
import b from "../../../form/Form.js";
import o from "../../../box/Box.js";
import l from "../../Field.js";
import m from "../../components/field-label/FieldLabel.js";
import t from "../../components/field-control/FieldControl.js";
import d from "../../../simple-input/SimpleInput.js";
import n from "../../components/field-description/FieldDescription.js";
import x from "../../../link/Link.js";
import w from "../../../text/Text.js";
import y from "../../../switch/Switch.js";
import F from "../../../error-message/ErrorMessage.js";
import N from "../../../button/Button.js";
import { o as v, b as j, s as f } from "../../../../types-Brp6Qwfh.js";
const E = v({
  email: f().email({ message: "Please enter a valid email address" }),
  password: f().min(8, { message: "Password must be at least 8 characters" }),
  enableNotifications: j().refine((i) => i, {
    message: "Please enable notifications"
  })
}), S = () => {
  const i = g({
    schema: E,
    defaultValues: { email: "", password: "", enableNotifications: !1 }
  }), h = u.useCallback((s) => {
    alert(JSON.stringify(s, null, 2));
  }, []);
  return /* @__PURE__ */ e(b, { form: i, onSubmit: h, children: /* @__PURE__ */ r(o, { className: "flex flex-col gap-[var(--spacing-4)]", children: [
    /* @__PURE__ */ r(l, { name: "email", children: [
      /* @__PURE__ */ e(m, { required: !0, children: "Email Address" }),
      /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(d, { type: "email", placeholder: "john.doe@example.com" }) }),
      /* @__PURE__ */ e(n, { children: "Enter your registered email" })
    ] }),
    /* @__PURE__ */ r(l, { name: "password", children: [
      /* @__PURE__ */ e(
        m,
        {
          required: !0,
          extra: /* @__PURE__ */ e(x, { url: "#", children: /* @__PURE__ */ e(w, { type: "muted", children: "Forgot password?" }) }),
          children: "Password"
        }
      ),
      /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(d, { type: "password", placeholder: "Enter your password" }) }),
      /* @__PURE__ */ e(n, { children: "Must be at least 8 characters" })
    ] }),
    /* @__PURE__ */ e(
      l,
      {
        name: "enableNotifications",
        render: ({ field: s, fieldState: a }) => {
          var c, p;
          return /* @__PURE__ */ r(o, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
            /* @__PURE__ */ r(o, { className: "flex flex-row gap-[var(--spacing-2)] justify-between", children: [
              /* @__PURE__ */ r(o, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
                /* @__PURE__ */ e(m, { children: "Enable notifications" }),
                /* @__PURE__ */ e(n, { children: "Get updates via email" })
              ] }),
              /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(y, { ...s }) })
            ] }),
            ((c = a == null ? void 0 : a.error) == null ? void 0 : c.message) && /* @__PURE__ */ e(F, { message: (p = a.error) == null ? void 0 : p.message })
          ] });
        }
      }
    ),
    /* @__PURE__ */ e(N, { variant: "default", type: "submit", label: "Sign In" })
  ] }) });
};
export {
  S as default
};
//# sourceMappingURL=LoginFormWrapper.js.map
