"use client";
import { jsxs as F, jsx as m } from "react/jsx-runtime";
import { useSettings as u } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as $ } from "../../../../../store/selectors.js";
import { useAppSelector as x } from "../../hooks/use-app-selector.js";
import { classNames as g } from "../../utils/index.js";
import { Label as h } from "../shared/label.js";
import { FontSelector as y } from "../shared/font-selector.js";
const v = ({
  type: s,
  className: a,
  label: r = "Font Family",
  mode: t,
  responsive: e = !1,
  fieldName: o,
  side: c = "bottom",
  align: i = "center",
  avoidCollisions: l = !0
}) => {
  const n = x($), [p, f] = u(
    e && t ? `${o}.${n}.${t}` : e ? `${o}.${n}` : t ? `${o}.${t}` : o,
    s
  );
  return /* @__PURE__ */ F("div", { className: g("mt-4 flex flex-col gap-1.5", a), children: [
    r && /* @__PURE__ */ m(h, { className: "flex-1 whitespace-nowrap", children: r }),
    /* @__PURE__ */ m(
      y,
      {
        value: p,
        onChange: f,
        side: c,
        align: i,
        avoidCollisions: l
      }
    )
  ] });
};
export {
  v as FontFamilyControl
};
//# sourceMappingURL=font-family.control.js.map
