import { jsx, jsxs } from "react/jsx-runtime";
import styled from "styled-components";
import { Grid } from "@elliemae/ds-grid";
import { useFormContext } from "react-hook-form";
const Section = styled.section`
  margin-top: 10px;
  border-top: 2px blue dotted;
  width: 100%;
`;
const Div = styled.div`
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  align-items: flex-start;
`;
const WatchValue = ({ name, label }) => {
  const { watch } = useFormContext();
  const data = watch(name, false) || "";
  return /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsxs(Section, { children: [
    /* @__PURE__ */ jsx("h4", { children: "Form Data:" }),
    /* @__PURE__ */ jsx(Div, { children: /* @__PURE__ */ jsxs("div", { children: [
      label,
      " : ",
      /* @__PURE__ */ jsx("strong", { children: JSON.stringify(data) })
    ] }) })
  ] }) });
};
export {
  WatchValue
};
