import { createContext as z, useRef as A, useState as V, useMemo as b, useEffect as a, Children as _, isValidElement as H, cloneElement as D, useContext as u } from "react";
import { jsx as n, jsxs as m } from "react/jsx-runtime";
import { createSlotRecipeContext as G, mergeRefs as J } from "@chakra-ui/react";
import { j as K, $ as O, k as Q } from "./Dialog-7Yf08giu.es.js";
import { HelpOutline as R, ErrorOutline as T } from "@commercetools/nimbus-icons";
import { $ as U } from "./useObjectRef-CaJ5pgjX.es.js";
import { $ as W } from "./useField-BxLfE_kx.es.js";
import { B as F } from "./box-DuBoAZvq.es.js";
import { I as X } from "./icon-button-DQaOMIAe.es.js";
const p = /* @__PURE__ */ z({
  context: {
    label: null,
    description: null,
    error: null,
    info: null,
    input: null
  },
  setContext: () => {
  }
}), { withProvider: Y, withContext: f } = /* @__PURE__ */ G({
  key: "nimbusFormField"
}), Z = /* @__PURE__ */ Y("div", "root"), q = /* @__PURE__ */ f("div", "label"), oo = /* @__PURE__ */ f("div", "input"), eo = /* @__PURE__ */ f("div", "description"), ro = /* @__PURE__ */ f("div", "error"), to = /* @__PURE__ */ f("div", "popover"), $ = function({
  ref: l,
  id: e,
  isInvalid: r,
  isRequired: s,
  isDisabled: c,
  isReadOnly: d,
  children: y,
  ...E
}) {
  const N = A(null), B = U(J(N, l)), [o, x] = V({
    label: null,
    description: null,
    error: null,
    info: null,
    input: null,
    isInvalid: r,
    isRequired: s,
    isDisabled: c,
    isReadOnly: d
  }), I = b(() => {
    const i = {
      id: e,
      description: o.description,
      errorMessage: o.error
    };
    return o.label ? i.label = o.label : (i["aria-label"] = "empty-label", i["aria-labelledby"] = "empty-label"), i;
  }, [e, o.description, o.error, o.label]), { labelProps: k, fieldProps: h, descriptionProps: L, errorMessageProps: M } = W(I);
  a(() => {
    x((i) => ({
      ...i,
      isInvalid: r,
      isRequired: s,
      isDisabled: c,
      isReadOnly: d
    }));
  }, [r, s, c, d]);
  const j = b(
    () => ({
      ...h,
      isInvalid: r,
      isRequired: s,
      isDisabled: c,
      isReadOnly: d
    }),
    [h, r, s, c, d]
  ), w = b(() => ({ context: o, setContext: x }), [o]);
  return /* @__PURE__ */ n(p.Provider, { value: w, children: /* @__PURE__ */ m(Z, { ref: B, ...E, children: [
    o.label && /* @__PURE__ */ m(q, { ...o.labelSlotProps, children: [
      /* @__PURE__ */ m("label", { ...k, "data-required": s, children: [
        o.label,
        s && /* @__PURE__ */ n("sup", { "aria-hidden": "true", children: "*" })
      ] }),
      o.info && /* @__PURE__ */ m(K, { children: [
        /* @__PURE__ */ n(
          F,
          {
            as: "span",
            display: "inline-block",
            position: "relative",
            width: "1ch",
            height: "1ch",
            ml: "200",
            children: /* @__PURE__ */ n(
              F,
              {
                as: "span",
                display: "inline-flex",
                position: "absolute",
                top: "50%",
                right: "50%",
                transform: "translate(50%, -50%)",
                children: /* @__PURE__ */ n(
                  X,
                  {
                    "aria-label": "__MORE INFO",
                    size: "2xs",
                    colorPalette: "info",
                    variant: "link",
                    children: /* @__PURE__ */ n(R, {})
                  }
                )
              }
            )
          }
        ),
        /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(to, { asChild: !0, children: /* @__PURE__ */ n(Q, { children: /* @__PURE__ */ n(F, { p: "300", children: o.info }) }) }) })
      ] })
    ] }),
    o.input && /* @__PURE__ */ n(oo, { ...o.inputSlotProps, children: _.map(o.input, (i) => H(i) ? D(i, j) : i) }),
    o.description && /* @__PURE__ */ n(
      eo,
      {
        ...L,
        ...o.descriptionSlotProps,
        children: o.description
      }
    ),
    r && o.error && /* @__PURE__ */ m(
      ro,
      {
        ...M,
        ...o.errorSlotProps,
        children: [
          /* @__PURE__ */ n(
            F,
            {
              as: T,
              display: "inline-flex",
              boxSize: "400",
              verticalAlign: "text-bottom",
              mr: "100",
              alignSelf: "center"
            }
          ),
          o.error
        ]
      }
    ),
    y
  ] }) });
};
$.displayName = "FormField.Root";
const S = ({
  children: t,
  ...l
}) => {
  const { setContext: e } = u(p);
  return a(() => (e((r) => ({
    ...r,
    label: t,
    labelSlotProps: l
  })), () => {
    e((r) => ({
      ...r,
      label: null,
      labelSlotProps: void 0
    }));
  }), [t, e]), null;
};
S.displayName = "FormField.Label";
const P = ({
  children: t,
  ...l
}) => {
  const { setContext: e } = u(p);
  return a(() => {
    e((r) => ({
      ...r,
      input: t,
      inputSlotProps: l
    }));
  }, [t, e]), null;
};
P.displayName = "FormField.Input";
const C = ({
  children: t,
  ...l
}) => {
  const { setContext: e } = u(p);
  return a(() => (e((r) => ({
    ...r,
    description: t,
    descriptionSlotProps: l
  })), () => {
    e((r) => ({
      ...r,
      description: null,
      descriptionSlotProps: void 0
    }));
  }), [t, e]), null;
};
C.displayName = "FormField.Description";
const v = ({
  children: t,
  ...l
}) => {
  const { setContext: e } = u(p);
  return a(() => (e((r) => ({
    ...r,
    error: t,
    errorSlotProps: l
  })), () => {
    e((r) => ({
      ...r,
      error: null,
      errorSlotProps: void 0
    }));
  }), [t, e]), null;
};
v.displayName = "FormField.Error";
const g = ({ children: t }) => {
  const { setContext: l } = u(p);
  return a(() => (l((e) => ({
    ...e,
    info: t
  })), () => {
    l((e) => ({
      ...e,
      info: null
    }));
  }), [t, l]), null;
};
g.displayName = "FormField.InfoBox";
const fo = {
  /**
   * # FormField.Root
   *
   * The root container for the form field that provides context and state management
   * for all child components. Handles React Aria integration for accessibility,
   * manages field state (required, invalid, disabled, readonly), and coordinates
   * rendering of label, input, description, and error elements.
   *
   * @example
   * ```tsx
   * <FormField.Root isRequired isInvalid>
   *   <FormField.Label>Username</FormField.Label>
   *   <FormField.Input>
   *     <TextInput />
   *   </FormField.Input>
   *   <FormField.Description>Enter your username</FormField.Description>
   *   <FormField.Error>Username is required</FormField.Error>
   * </FormField.Root>
   * ```
   */
  Root: $,
  /**
   * # FormField.Label
   *
   * The label element for the form field. Automatically associates with the input
   * via React Aria and displays a required indicator when the field is required.
   * Supports an optional info box trigger for additional field information.
   *
   * @example
   * ```tsx
   * <FormField.Root>
   *   <FormField.Label>Email Address</FormField.Label>
   *   <FormField.InfoBox>
   *     Your email will be used for account notifications
   *   </FormField.InfoBox>
   *   <FormField.Input>
   *     <TextInput />
   *   </FormField.Input>
   * </FormField.Root>
   * ```
   */
  Label: S,
  /**
   * # FormField.Input
   *
   * The input wrapper element that receives and displays the actual input component.
   * Automatically clones children and passes accessibility props, validation state,
   * and field attributes from React Aria.
   *
   * @example
   * ```tsx
   * <FormField.Root>
   *   <FormField.Label>Password</FormField.Label>
   *   <FormField.Input>
   *     <PasswordInput />
   *   </FormField.Input>
   * </FormField.Root>
   * ```
   */
  Input: P,
  /**
   * # FormField.Description
   *
   * The description element that provides helpful information about the field.
   * Automatically associates with the input via `aria-describedby` for screen readers.
   *
   * @example
   * ```tsx
   * <FormField.Root>
   *   <FormField.Label>Username</FormField.Label>
   *   <FormField.Input>
   *     <TextInput />
   *   </FormField.Input>
   *   <FormField.Description>
   *     Must be 3-20 characters, letters and numbers only
   *   </FormField.Description>
   * </FormField.Root>
   * ```
   */
  Description: C,
  /**
   * # FormField.Error
   *
   * The error message element that displays validation errors. Only visible when
   * the field is invalid. Automatically associates with the input via
   * `aria-errormessage` and includes an error icon.
   *
   * @example
   * ```tsx
   * <FormField.Root isInvalid>
   *   <FormField.Label>Email</FormField.Label>
   *   <FormField.Input>
   *     <TextInput />
   *   </FormField.Input>
   *   <FormField.Error>Please enter a valid email address</FormField.Error>
   * </FormField.Root>
   * ```
   */
  Error: v,
  /**
   * # FormField.InfoBox
   *
   * The info box content that appears in a popover when the help icon next to
   * the label is clicked. Use for additional context or instructions that don't
   * need to be visible by default.
   *
   * @example
   * ```tsx
   * <FormField.Root>
   *   <FormField.Label>API Key</FormField.Label>
   *   <FormField.InfoBox>
   *     Your API key can be found in your account settings.
   *     Keep it secure and never share it publicly.
   *   </FormField.InfoBox>
   *   <FormField.Input>
   *     <TextInput />
   *   </FormField.Input>
   * </FormField.Root>
   * ```
   */
  InfoBox: g
};
export {
  fo as F,
  C as a,
  v as b,
  g as c,
  P as d,
  S as e,
  $ as f
};
//# sourceMappingURL=form-field-ClimvHF6.es.js.map
