import v, { useId as D, useMemo as p, useState as h, createContext as g, useContext as c } from "react";
import { useEvent as E } from "../../hooks/use-event.js";
import { useIsoMorphicEffect as b } from "../../hooks/use-iso-morphic-effect.js";
import { useSyncRefs as x } from "../../hooks/use-sync-refs.js";
import { useDisabled as S } from "../../internal/disabled.js";
import { forwardRefWithAs as w, useRender as y } from "../../utils/render.js";
let u = g(null);
u.displayName = "DescriptionContext";
function d() {
  let t = c(u);
  if (t === null) {
    let e = new Error("You used a <Description /> component, but it is not inside a relevant parent.");
    throw Error.captureStackTrace && Error.captureStackTrace(e, d), e;
  }
  return t;
}
function M() {
  var t, e;
  return (e = (t = c(u)) == null ? void 0 : t.value) != null ? e : void 0;
}
function O() {
  let [t, e] = h([]);
  return [t.length > 0 ? t.join(" ") : void 0, p(() => function(r) {
    let a = E((l) => (e((o) => [...o, l]), () => e((o) => {
      let i = o.slice(), n = i.indexOf(l);
      return n !== -1 && i.splice(n, 1), i;
    }))), s = p(() => ({ register: a, slot: r.slot, name: r.name, props: r.props, value: r.value }), [a, r.slot, r.name, r.props, r.value]);
    return v.createElement(u.Provider, { value: s }, r.children);
  }, [e])];
}
let C = "p";
function R(t, e) {
  let r = D(), a = S(), { id: s = `headlessui-description-${r}`, ...l } = t, o = d(), i = x(e);
  b(() => o.register(s), [s, o.register]);
  let n = a || !1, f = p(() => ({ ...o.slot, disabled: n }), [o.slot, n]), m = { ref: i, ...o.props, id: s };
  return y()({ ourProps: m, theirProps: l, slot: f, defaultTag: C, name: o.name || "Description" });
}
let P = w(R), A = Object.assign(P, {});
export {
  A as Description,
  M as useDescribedBy,
  O as useDescriptions
};
