import { j as s } from "../../../../../_virtual/jsx-runtime.js";
import { useState as B } from "react";
import { baseColors as C } from "../../../../sdk/dist/shared/themes/color-system.js";
import "../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_c02c1e17bf76c343fd22d1f22394ecf5/node_modules/react-hot-toast/dist/index.js";
import D from "../../../../sdk/dist/shared/utils/invariant.js";
import { tx as u } from "../../../../style-system/dist/twind.js";
import { colorPalette as M } from "../../../../style-system/dist/colors.js";
import { useTheme as q } from "../../../../../use-page-data.js";
import { generateRelatedNeutral as k } from "../utils/colors.js";
import "../../../../../node_modules/.pnpm/chroma-js@3.1.2/node_modules/chroma-js/index.js";
import L from "../../../../../node_modules/.pnpm/chroma-js@3.1.2/node_modules/chroma-js/src/chroma.js";
import { Inset as S } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/inset.js";
import { Text as O } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/text.js";
import { Root as F, Text as I } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/callout.js";
import { Root as z, List as G, Trigger as j, Content as v } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/tabs.js";
import { Button as R } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/button.js";
import { Root as A, Trigger as _, Content as E, Group as H, Label as J, Item as x } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/select.js";
const P = [
  ["100", "200"],
  ["100", "300"],
  ["200", "400"],
  ["300", "500"],
  ["400", "600"],
  ["500", "700"],
  ["600", "800"],
  ["700", "900"]
], K = {
  // Gray - Pure neutrals from Tailwind
  gray: {
    50: "hsl(0, 0%, 98%)",
    // Even lighter
    100: "hsl(0, 0%, 95%)",
    // Even lighter
    200: "hsl(0, 0%, 90%)",
    // Even lighter
    800: "hsl(0, 0%, 25%)",
    // Darker
    900: "hsl(0, 0%, 15%)",
    // Darker
    950: "hsl(0, 0%, 8%)"
    // Much darker
  },
  // Amber - Tailwind amber color scale
  amber: {
    50: "hsl(48, 100%, 98%)",
    // Even lighter
    100: "hsl(48, 96%, 95%)",
    // Even lighter
    200: "hsl(48, 97%, 90%)",
    // Even lighter
    800: "hsl(32, 95%, 25%)",
    // Darker
    900: "hsl(28, 93%, 15%)",
    // Darker
    950: "hsl(24, 94%, 8%)"
    // Much darker
  },
  // Yellow - Tailwind yellow color scale
  yellow: {
    50: "hsl(55, 92%, 98%)",
    // Even lighter
    100: "hsl(55, 97%, 95%)",
    // Even lighter
    200: "hsl(53, 98%, 90%)",
    // Even lighter
    800: "hsl(32, 81%, 25%)",
    // Darker
    900: "hsl(28, 73%, 15%)",
    // Darker
    950: "hsl(26, 77%, 8%)"
    // Much darker
  },
  // Lime - Tailwind lime color scale
  lime: {
    50: "hsl(78, 92%, 98%)",
    // Even lighter
    100: "hsl(80, 89%, 95%)",
    // Even lighter
    200: "hsl(81, 88%, 90%)",
    // Even lighter
    800: "hsl(84, 81%, 25%)",
    // Darker
    900: "hsl(88, 61%, 15%)",
    // Darker
    950: "hsl(89, 80%, 8%)"
    // Much darker
  },
  // Green - Tailwind green color scale
  green: {
    50: "hsl(138, 76%, 98%)",
    // Even lighter
    100: "hsl(141, 84%, 95%)",
    // Even lighter
    200: "hsl(141, 79%, 90%)",
    // Even lighter
    800: "hsl(158, 64%, 25%)",
    // Darker
    900: "hsl(158, 68%, 15%)",
    // Darker
    950: "hsl(164, 86%, 8%)"
    // Much darker
  },
  // Emerald - Tailwind emerald color scale
  emerald: {
    50: "hsl(152, 81%, 98%)",
    // Even lighter
    100: "hsl(149, 80%, 95%)",
    // Even lighter
    200: "hsl(152, 76%, 90%)",
    // Even lighter
    800: "hsl(158, 84%, 25%)",
    // Darker
    900: "hsl(158, 84%, 15%)",
    // Darker
    950: "hsl(164, 96%, 8%)"
    // Much darker
  },
  // Teal - Tailwind teal color scale
  teal: {
    50: "hsl(166, 76%, 98%)",
    // Even lighter
    100: "hsl(167, 85%, 95%)",
    // Even lighter
    200: "hsl(168, 84%, 90%)",
    // Even lighter
    800: "hsl(183, 81%, 25%)",
    // Darker
    900: "hsl(184, 91%, 15%)",
    // Darker
    950: "hsl(186, 100%, 8%)"
    // Much darker
  },
  // Cyan - Tailwind cyan color scale
  cyan: {
    50: "hsl(183, 100%, 98%)",
    // Even lighter
    100: "hsl(185, 96%, 95%)",
    // Even lighter
    200: "hsl(186, 94%, 90%)",
    // Even lighter
    800: "hsl(200, 84%, 25%)",
    // Darker
    900: "hsl(202, 83%, 15%)",
    // Darker
    950: "hsl(205, 100%, 8%)"
    // Much darker
  },
  // Sky - Tailwind sky color scale
  sky: {
    50: "hsl(204, 100%, 98%)",
    // Even lighter
    100: "hsl(204, 94%, 95%)",
    // Even lighter
    200: "hsl(201, 94%, 90%)",
    // Even lighter
    800: "hsl(213, 92%, 25%)",
    // Darker
    900: "hsl(218, 79%, 15%)",
    // Darker
    950: "hsl(223, 88%, 8%)"
    // Much darker
  },
  // Blue - Tailwind blue color scale
  blue: {
    50: "hsl(214, 100%, 98%)",
    // Even lighter
    100: "hsl(214, 95%, 95%)",
    // Even lighter
    200: "hsl(213, 97%, 90%)",
    // Even lighter
    800: "hsl(213, 94%, 25%)",
    // Darker
    900: "hsl(215, 92%, 15%)",
    // Darker
    950: "hsl(221, 100%, 8%)"
    // Much darker
  },
  // Indigo - Tailwind indigo color scale
  indigo: {
    50: "hsl(228, 100%, 98%)",
    // Even lighter
    100: "hsl(228, 100%, 95%)",
    // Even lighter
    200: "hsl(228, 100%, 90%)",
    // Even lighter
    800: "hsl(228, 100%, 25%)",
    // Darker
    900: "hsl(228, 100%, 15%)",
    // Darker
    950: "hsl(228, 100%, 8%)"
    // Much darker
  },
  // Violet - Tailwind violet color scale
  violet: {
    50: "hsl(250, 100%, 98%)",
    // Even lighter
    100: "hsl(251, 91%, 95%)",
    // Even lighter
    200: "hsl(251, 95%, 90%)",
    // Even lighter
    800: "hsl(258, 90%, 25%)",
    // Darker
    900: "hsl(259, 94%, 15%)",
    // Darker
    950: "hsl(261, 100%, 8%)"
    // Much darker
  },
  // Purple - Tailwind purple color scale
  purple: {
    50: "hsl(270, 100%, 98%)",
    // Even lighter
    100: "hsl(269, 100%, 95%)",
    // Even lighter
    200: "hsl(269, 100%, 90%)",
    // Even lighter
    800: "hsl(273, 85%, 25%)",
    // Darker
    900: "hsl(275, 100%, 15%)",
    // Darker
    950: "hsl(279, 100%, 8%)"
    // Much darker
  },
  // Fuchsia - Tailwind fuchsia color scale
  fuchsia: {
    50: "hsl(289, 100%, 98%)",
    // Even lighter
    100: "hsl(287, 100%, 95%)",
    // Even lighter
    200: "hsl(288, 96%, 90%)",
    // Even lighter
    800: "hsl(295, 100%, 25%)",
    // Darker
    900: "hsl(297, 100%, 15%)",
    // Darker
    950: "hsl(303, 100%, 8%)"
    // Much darker
  },
  // Pink - Tailwind pink color scale
  pink: {
    50: "hsl(327, 73%, 98%)",
    // Even lighter
    100: "hsl(326, 78%, 95%)",
    // Even lighter
    200: "hsl(326, 85%, 90%)",
    // Even lighter
    800: "hsl(335, 78%, 25%)",
    // Darker
    900: "hsl(336, 84%, 15%)",
    // Darker
    950: "hsl(340, 87%, 8%)"
    // Much darker
  },
  // Rose - Tailwind rose color scale
  rose: {
    50: "hsl(356, 100%, 98%)",
    // Even lighter
    100: "hsl(356, 100%, 95%)",
    // Even lighter
    200: "hsl(356, 100%, 90%)",
    // Even lighter
    800: "hsl(356, 100%, 25%)",
    // Darker
    900: "hsl(356, 100%, 15%)",
    // Darker
    950: "hsl(356, 100%, 8%)"
    // Much darker
  },
  // Orange - Tailwind orange color scale
  orange: {
    50: "hsl(33, 100%, 98%)",
    // Even lighter
    100: "hsl(34, 100%, 95%)",
    // Even lighter
    200: "hsl(32, 98%, 90%)",
    // Even lighter
    800: "hsl(15, 79%, 25%)",
    // Darker
    900: "hsl(9, 87%, 15%)",
    // Darker
    950: "hsl(15, 86%, 8%)"
    // Much darker
  },
  // Red - Tailwind red color scale
  red: {
    50: "hsl(0, 86%, 98%)",
    // Even lighter
    100: "hsl(0, 93%, 95%)",
    // Even lighter
    200: "hsl(0, 96%, 90%)",
    // Even lighter
    800: "hsl(0, 84%, 25%)",
    // Darker
    900: "hsl(0, 63%, 15%)",
    // Darker
    950: "hsl(0, 75%, 8%)"
    // Much darker
  }
}, ms = ({
  colorType: e,
  initialValue: o = 120,
  onChange: r = () => {
  }
}) => {
  const [n, h] = B(o), i = q(), c = (d) => {
    h(d), r(d);
  }, p = e === "base100", y = e === "neutral", g = p ? K : y ? U(i) : M, N = p ? 3 : 7;
  if (p) {
    const d = Object.entries(g).flatMap(
      ([t, l]) => Object.entries(l).filter((a) => parseInt(a[0], 10) >= 900).map(([a, m]) => [t, a, L(m).css("oklch")])
    ).toSorted((t, l) => {
      const a = parseInt(t[1], 10), m = parseInt(l[1], 10);
      return a - m;
    }), f = Object.entries(g).flatMap(
      ([t, l]) => Object.entries(l).filter((a) => parseInt(a[0], 10) <= 100).map(([a, m]) => [t, a, L(m).css("oklch")])
    ).toSorted((t, l) => {
      const a = parseInt(t[1], 10), m = parseInt(l[1], 10);
      return a - m;
    });
    return /* @__PURE__ */ s.jsxs("div", { children: [
      /* @__PURE__ */ s.jsx(O, { as: "p", size: "2", className: "!capitalize !font-medium select-none", children: C[e] }),
      /* @__PURE__ */ s.jsx(F, { className: "mt-3 -mx-4 !py-2 !px-3 !rounded-none", children: /* @__PURE__ */ s.jsx(I, { size: "1", className: u("text-pretty"), children: "Base color are very light or very dark colors that are used as backgrounds or for large areas. So don't worry if those colors look too light or too dark, they are meant to!" }) }),
      /* @__PURE__ */ s.jsxs(z, { defaultValue: i.browserColorScheme, children: [
        /* @__PURE__ */ s.jsx(S, { clip: "padding-box", side: "x", pb: "current", children: /* @__PURE__ */ s.jsxs(G, { size: "1", children: [
          /* @__PURE__ */ s.jsx(j, { value: "light", className: "!flex-1", children: "Light" }),
          /* @__PURE__ */ s.jsx(j, { value: "dark", className: "!flex-1", children: "Dark" })
        ] }) }),
        /* @__PURE__ */ s.jsx(v, { value: "light", children: /* @__PURE__ */ s.jsxs("div", { className: "flex flex-wrap gap-3", children: [
          f.map(([t, l, a]) => /* @__PURE__ */ s.jsx(
            "button",
            {
              type: "button",
              title: `${t} ${l}`,
              id: `${t}-${l}`,
              className: u(
                "outline outline-gray-200 outline-offset-1  transition-transform hover:scale-110 focus:outline-upstart-300",
                "w-6 h-6 rounded-full",
                n === a && "outline-upstart-300"
              ),
              style: {
                background: a,
                filter: "saturate(180%)"
              },
              onClick: () => c(a),
              "aria-label": `Select color ${a}`
            },
            `${t}-${l}`
          )),
          /* @__PURE__ */ s.jsx(
            R,
            {
              size: "1",
              variant: "outline",
              className: "!mt-1 self-stretch !basis-full block",
              onClick: () => c("#ffffff"),
              children: "Full white"
            }
          )
        ] }) }),
        /* @__PURE__ */ s.jsx(v, { value: "dark", children: /* @__PURE__ */ s.jsxs("div", { className: "flex flex-wrap gap-3", children: [
          d.map(([t, l, a]) => /* @__PURE__ */ s.jsx(
            "button",
            {
              type: "button",
              className: u(
                "outline outline-gray-200 outline-offset-1 transition-transform hover:scale-110 focus:outline-upstart-300",
                "w-6 h-6 rounded-full",
                n === a && "outline-upstart-300"
              ),
              title: `Dark ${t} ${l}`,
              style: {
                background: a,
                filter: "saturate(180%)"
              },
              onClick: () => c(a)
            },
            `${t}-${l}`
          )),
          /* @__PURE__ */ s.jsx(
            R,
            {
              size: "1",
              variant: "outline",
              className: "!mt-1 self-stretch !basis-full block",
              onClick: () => c("#000000"),
              children: "Full black"
            }
          )
        ] }) })
      ] }),
      /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-3 p-2 bg-gray-100 rounded mt-2", children: [
        /* @__PURE__ */ s.jsx(
          "div",
          {
            className: "w-8 h-8 flex-nowrap shrink-0 aspect-square rounded-md shadow-sm",
            style: { background: n }
          }
        ),
        /* @__PURE__ */ s.jsx("code", { className: "text-xs text-gray-600", children: n })
      ] }),
      /* @__PURE__ */ s.jsx(
        "form",
        {
          className: "group mt-2",
          onSubmit: (t) => {
            t.preventDefault();
            const l = new FormData(t.currentTarget).get("customColor");
            D(l, "Color is required"), c(l);
          }
        }
      )
    ] });
  }
  return /* @__PURE__ */ s.jsxs("div", { children: [
    /* @__PURE__ */ s.jsx(O, { as: "p", size: "2", color: "gray", className: "!capitalize !font-medium", children: C[e] }),
    e.endsWith("Content") && /* @__PURE__ */ s.jsx(F, { className: "mt-3 -mx-4 !py-2 !px-3 !rounded-none", children: /* @__PURE__ */ s.jsx(I, { size: "1", className: u("text-pretty"), children: "Text content colors are auto-generated when you select the associated background color. We recommend using the generated one, but you can also select a different one if you want." }) }),
    e === "neutral" && /* @__PURE__ */ s.jsx(F, { className: "mt-3 -mx-4 !py-2 !px-3 !rounded-none", children: /* @__PURE__ */ s.jsx(I, { size: "1", className: u("text-pretty"), children: "Neutral color is a subdued color derived from the primary color. It is used for backgrounds and elements that need to be less prominent." }) }),
    /* @__PURE__ */ s.jsx(
      "div",
      {
        className: u(
          `grid grid-cols-${N} gap-3 mt-3 pt-1 pb-1 pl-1 w-full pr-5 max-h-[45dvh] overflow-y-scroll scrollbar-thin scrollbar-color-violet`
        ),
        style: {
          scrollbarGutter: "stable"
        },
        children: Object.entries(g).map(
          ([d, f], t) => Object.entries(f).filter((l) => {
            const a = parseInt(l[0], 10);
            return y || a >= 200 && a <= 800;
          }).map(([l, a]) => /* @__PURE__ */ s.jsx(
            "button",
            {
              type: "button",
              id: `${d}-${l}`,
              className: u(
                "outline outline-gray-200 outline-offset-1 transition-transform hover:scale-110 focus:outline-upstart-300",
                //isBaseColor ? "w-5 h-5 aspect-square rounded-full" :
                "w-6 h-6 rounded-full",
                n === a && "outline-upstart-300"
              ),
              style: {
                background: a
              },
              onClick: () => c(a),
              "aria-label": `Select color ${a}`
            },
            `${d}-${l}`
          ))
        )
      }
    ),
    /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-3 p-2 bg-gray-100 rounded mt-3", children: [
      /* @__PURE__ */ s.jsx(
        "div",
        {
          className: "w-8 h-8 flex-nowrap shrink-0 aspect-square rounded-md shadow-sm",
          style: { background: n }
        }
      ),
      /* @__PURE__ */ s.jsx("code", { className: "text-xs", children: n })
    ] }),
    /* @__PURE__ */ s.jsx(
      "form",
      {
        className: "group mt-2",
        onSubmit: (d) => {
          d.preventDefault();
          const f = new FormData(d.currentTarget).get("customColor");
          D(f, "Color is required"), c(f);
        }
      }
    )
  ] });
};
function b({
  type: e,
  colors: o,
  onChange: r,
  cols: n,
  children: h,
  currentColor: i,
  elementColorType: c
}) {
  const [p, y] = B(d()), [g, N] = B(f());
  function d() {
    const t = i?.match(/to-(\w+)/);
    return t ? t[1] : "b";
  }
  function f() {
    if (i?.includes("bg-gradient")) {
      const t = i.match(/from-(\w+)/)?.[1], l = i.match(/to-(\w+)/)?.[1];
      return t && l ? { from: t, to: l } : null;
    }
    return null;
  }
  if (e === "solid")
    return /* @__PURE__ */ s.jsxs("div", { className: "flex flex-col gap-3", children: [
      /* @__PURE__ */ s.jsx("div", { className: `grid grid-cols-${n} gap-2.5 mx-auto`, children: o.map((t) => /* @__PURE__ */ s.jsx(
        "button",
        {
          type: "button",
          className: u(
            "mx-auto h-7 w-7 rounded-full shadow-sm shadow-upstart-300 transition-transform",
            `bg-${t} hover:outline-gray-300 hover:scale-110`
          ),
          onClick: () => {
            c.includes("background") ? r(`bg-${t}`) : c.includes("text") ? r(`text-${t}`) : c.includes("border") && r(`border-${t}`);
          }
        },
        t
      )) }),
      h
    ] });
  if (e === "gradient")
    return /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
      /* @__PURE__ */ s.jsxs(
        A,
        {
          defaultValue: p,
          size: "1",
          onValueChange: (t) => {
            y(t), g && r(`bg-gradient-to-${t} from-${g.from} to-${g.to}`);
          },
          children: [
            /* @__PURE__ */ s.jsx(_, { className: "!w-full" }),
            /* @__PURE__ */ s.jsx(E, { children: /* @__PURE__ */ s.jsxs(H, { children: [
              /* @__PURE__ */ s.jsx(J, { children: "Gradient direction" }),
              /* @__PURE__ */ s.jsx(x, { value: "t", children: "To top" }),
              /* @__PURE__ */ s.jsx(x, { value: "b", children: "To bottom" }),
              /* @__PURE__ */ s.jsx(x, { value: "l", children: "To left" }),
              /* @__PURE__ */ s.jsx(x, { value: "r", children: "To right" }),
              /* @__PURE__ */ s.jsx(x, { value: "tl", children: "To top left" }),
              /* @__PURE__ */ s.jsx(x, { value: "tr", children: "To top right" }),
              /* @__PURE__ */ s.jsx(x, { value: "bl", children: "To bottom left" }),
              /* @__PURE__ */ s.jsx(x, { value: "br", children: "To bottom right" })
            ] }) })
          ]
        }
      ),
      /* @__PURE__ */ s.jsxs("div", { className: `grid grid-cols-${P.length} gap-3 mt-3.5`, children: [
        o.flatMap(
          (t) => P.map((l) => ({ from: `${t.from}-${l[0]}`, to: `${t.to}-${l[1]}` })).map((l) => /* @__PURE__ */ s.jsx(
            "button",
            {
              type: "button",
              className: u(
                "mx-auto h-7 w-7 rounded-full shadow-sm shadow-upstart-300 transition-transform",
                `bg-gradient-to-${p} from-${l.from} to-${l.to} hover:scale-110`
              ),
              onClick: () => {
                r(`bg-gradient-to-${p} from-${l.from} to-${l.to}`), N(l);
              }
            },
            `${l.from}-${l.to}`
          ))
        ),
        h
      ] })
    ] });
}
function W(e) {
  const o = [];
  for (let r = 0; r < e.length; r++)
    for (let n = r; n < e.length; n++)
      e[r] === "neutral" && e[n] !== "neutral" || e[r] !== "neutral" && e[n] === "neutral" || e[r] !== e[n] || o.push({ from: e[r], to: e[n] });
  return o;
}
function Q(e) {
  return e === "page-background" ? {
    colors: ["primary", "secondary", "neutral"],
    shades: ["100", "300", "500", "700", "900"],
    colorButtons: [
      { label: "White", value: "#FFFFFF" },
      { label: "Black", value: "#000000" }
    ]
  } : e === "background" ? {
    colors: ["primary", "secondary", "accent", "neutral"],
    shades: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
    colorButtons: [
      { label: "Reset", value: null },
      { label: "White", value: "#FFFFFF" },
      { label: "Black", value: "#000000" },
      { label: "Transparent", value: "transparent" }
    ]
  } : e === "border" ? {
    colors: ["primary", "secondary", "accent", "neutral"],
    shades: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
    colorButtons: [
      // { label: "Auto", value: "border-auto" },
      { label: "White", value: "#FFFFFF" },
      { label: "Black", value: "#000000" },
      { label: "Transparent", value: "transparent" }
    ]
  } : e === "text" ? {
    colors: ["primary", "secondary", "accent", "neutral"],
    shades: ["100", "300", "500", "700", "900"],
    colorButtons: [
      { label: "Reset", value: null },
      { label: "White", value: "#FFFFFF" },
      { label: "Black", value: "#000000" }
    ]
  } : {
    colors: ["primary", "secondary", "accent", "neutral"],
    shades: ["100", "200", "300", "400", "500", "600", "700", "800", "900"]
  };
}
function $(e, o) {
  return e.flatMap((r) => o.map((n) => `${r}-${n}`));
}
const fs = ({
  initialValue: e,
  elementColorType: o,
  onChange: r = () => {
  }
}) => {
  const n = e?.includes("gradient") ? "gradient" : "solid", { colors: h, shades: i, colorButtons: c } = Q(o);
  return o === "page-background" ? /* @__PURE__ */ s.jsxs(z, { defaultValue: n, children: [
    /* @__PURE__ */ s.jsx(S, { clip: "padding-box", side: "top", pb: "current", children: /* @__PURE__ */ s.jsxs(G, { size: "1", children: [
      /* @__PURE__ */ s.jsx(j, { value: "solid", className: "!flex-1", children: "Solid" }),
      /* @__PURE__ */ s.jsx(j, { value: "gradient", className: "!flex-1", children: "Gradient" })
    ] }) }),
    /* @__PURE__ */ s.jsx(v, { value: "solid", children: /* @__PURE__ */ s.jsx(
      b,
      {
        type: "solid",
        elementColorType: o,
        currentColor: e,
        cols: i.length,
        colors: $(h, i),
        onChange: r,
        children: /* @__PURE__ */ s.jsx(w, { colorButtons: c, onChange: r, shadesLen: i.length })
      }
    ) }),
    /* @__PURE__ */ s.jsx(v, { value: "gradient", children: /* @__PURE__ */ s.jsx(
      b,
      {
        elementColorType: o,
        currentColor: e,
        type: "gradient",
        cols: 4,
        colors: W(h),
        onChange: r
      }
    ) })
  ] }) : o === "border" ? /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsx(
    b,
    {
      type: "solid",
      elementColorType: o,
      currentColor: e,
      cols: i.length,
      colors: $(h, i),
      onChange: r,
      children: /* @__PURE__ */ s.jsx(w, { colorButtons: c, onChange: r, shadesLen: i.length })
    }
  ) }) : o === "text" ? /* @__PURE__ */ s.jsx(
    b,
    {
      type: "solid",
      elementColorType: o,
      currentColor: e,
      cols: i.length,
      colors: $(h, i),
      onChange: r,
      children: /* @__PURE__ */ s.jsx(w, { colorButtons: c, onChange: r, shadesLen: i.length })
    }
  ) : o === "background" ? /* @__PURE__ */ s.jsxs(z, { defaultValue: n, children: [
    /* @__PURE__ */ s.jsx(S, { clip: "padding-box", side: "top", pb: "current", children: /* @__PURE__ */ s.jsxs(G, { size: "1", children: [
      /* @__PURE__ */ s.jsx(j, { value: "solid", className: "!flex-1", children: "Solid" }),
      /* @__PURE__ */ s.jsx(j, { value: "gradient", className: "!flex-1", children: "Gradient" })
    ] }) }),
    /* @__PURE__ */ s.jsx(v, { value: "solid", children: /* @__PURE__ */ s.jsx(
      b,
      {
        type: "solid",
        elementColorType: o,
        currentColor: e,
        cols: i.length,
        colors: $(h, i),
        onChange: r,
        children: /* @__PURE__ */ s.jsx(w, { colorButtons: c, onChange: r, shadesLen: i.length })
      }
    ) }),
    /* @__PURE__ */ s.jsx(v, { value: "gradient", children: /* @__PURE__ */ s.jsx(
      b,
      {
        elementColorType: o,
        currentColor: e,
        type: "gradient",
        cols: 4,
        colors: W(h),
        onChange: r
      }
    ) })
  ] }) : null;
};
function w({
  colorButtons: e,
  onChange: o,
  shadesLen: r
}) {
  return e ? /* @__PURE__ */ s.jsx("div", { className: u("flex gap-1.5 mt-1 w-full", `col-span-${r}`), children: e.map((n) => /* @__PURE__ */ s.jsx(
    "button",
    {
      type: "button",
      onClick: () => o(n.value),
      className: "grow h-6 text-xs rounded-lg outline outline-gray-200 hover:outline-gray-300",
      children: n.label
    },
    n.value
  )) }) : null;
}
function U(e) {
  return {
    primary: {
      default: k(e.colors.primary, "same-hue")
    },
    primary_temperature: {
      default: k(e.colors.primary, "temperature")
    },
    primary_analogous: {
      default: k(e.colors.primary, "analogous")
    },
    primary_complementary: {
      default: k(e.colors.primary, "complementary")
    },
    pureGray: {
      default: "oklch(45% 0 0)"
    },
    coolGray: {
      default: "oklch(45% 0.02 240)"
    },
    warmGray: {
      default: "oklch(45% 0.03 40)"
    }
  };
}
export {
  fs as ElementColorPicker,
  ms as default
};
//# sourceMappingURL=ColorPicker.js.map
