import { jsxs as i, jsx as o } from "react/jsx-runtime";
import { useState as p } from "react";
import { SegmentedControls as C } from "../SegmentedControls/SegmentedControls.es.js";
import { ColorFormat as f } from "../../types/colors.es.js";
import { BrandColorPicker as u } from "./BrandColorPicker.es.js";
import { ColorPreview as w } from "./ColorPreview.es.js";
import { CustomColorPicker as v } from "./CustomColorPicker.es.js";
const x = [
  { id: "Brand", value: "Brand" },
  { id: "Custom", value: "Custom" }
], B = ({
  currentColor: r,
  palettes: e,
  onSelect: t,
  setFormat: a,
  showPreview: l = !0,
  currentFormat: s = f.Hex,
  allowCustomColor: d = !0
}) => {
  const [m, c] = p(
    "Brand"
    /* Brand */
  );
  return /* @__PURE__ */ i("div", { className: "tw-w-[400px] tw-relative", children: [
    l && /* @__PURE__ */ o(w, { color: r }),
    /* @__PURE__ */ i("div", { className: "tw-p-5 tw-flex tw-flex-col tw-gap-2", children: [
      e && d && /* @__PURE__ */ o(
        C,
        {
          items: x,
          activeItemId: m,
          onChange: (n) => c(n)
        }
      ),
      e && m === "Brand" ? /* @__PURE__ */ o(u, { currentColor: r, palettes: e, onSelect: t }) : /* @__PURE__ */ o(
        v,
        {
          currentColor: r,
          currentFormat: s,
          setFormat: a,
          onSelect: t
        }
      )
    ] })
  ] });
};
B.displayName = "FondueColorPicker";
export {
  B as ColorPicker
};
//# sourceMappingURL=ColorPicker.es.js.map
