import { j as e } from "../../_virtual/jsx-runtime.js";
import a from "styled-components";
import { getColorAlias as s, getFontSize as l, getSpacing as o, getColorAliasValue as c } from "../../utils/index.js";
import { Tag as d } from "../Tag/index.js";
const m = require("@jet-pie/theme/variations/skip"), p = m.skipTokens, g = a.div`
  font-family: Ubuntu;
  margin: 2rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 16px;
  grid-column-gap: 32px;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  @media (max-width: 600px) {
    grid-template-columns: 1fr;
  }
`, x = a.div`
  display: flex;
  width: 100%;
  padding: 14px 0;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid lightgrey;
  justify-content: space-between;
  div {
    display: flex;
    flex-direction: column;

    span:nth-child(1) {
      color: ${s("contentDefault")};
      ${l("size16")};
      margin-bottom: ${o("s04")};
    }

    span:nth-child(2) {
      color: ${s("contentSubdued")};
      ${l("size16")};
    }

    span:nth-child(3) {
      color: ${s("contentDefault")};
      display: flex;
      ${l("size16")};
      margin-bottom: ${o("s04")};
      b {
        margin-right: ${o("s02")};
        text-decoration: underline;
      }
    }

    > div {
      margin-bottom: ${o("s04")};
    }
  }
`, u = a.span`
  width: 120px;
  height: 120px;
  border-radius: ${(t) => t.theme.radius.roundedC};
  background: ${(t) => t.color};
  border: 1px solid lightgrey;
`, f = (t) => {
  const { global: i } = p;
  return Object.keys(i).find((n) => i[n] === t) || "";
}, h = ({ name: t, color: i, isAlias: n }) => {
  const r = n ? f(i) : "";
  return /* @__PURE__ */ e.jsxs(x, { children: [
    /* @__PURE__ */ e.jsxs("div", { children: [
      /* @__PURE__ */ e.jsx("span", { children: t }),
      /* @__PURE__ */ e.jsx(
        d,
        {
          size: "large",
          variant: "neutral",
          label: c(i).toUpperCase()
        }
      ),
      r !== "" && /* @__PURE__ */ e.jsxs("span", { children: [
        /* @__PURE__ */ e.jsx("b", { children: "Global Token:" }),
        /* @__PURE__ */ e.jsx(d, { size: "large", variant: "info", label: r })
      ] })
    ] }),
    /* @__PURE__ */ e.jsx(u, { color: i })
  ] });
};
function v({ colors: t, isAlias: i }) {
  return /* @__PURE__ */ e.jsx(g, { children: Object.entries(t).map(([n, r]) => /* @__PURE__ */ e.jsx(
    h,
    {
      name: n,
      color: String(r),
      isAlias: !!i
    },
    n
  )) });
}
export {
  v as ColorList,
  p as skipTokens
};
