@digitalpromise/design 4.8.2 → 4.9.0

package/dist/index.js

@@ -1,187 +1,340 @@
-import { I as w } from "./icon-Ce5_UC8P.js";
-import { B as T, a as U } from "./icon-Ce5_UC8P.js";
-import { jsx as e, jsxs as S } from "react/jsx-runtime";
-import { useSearchParams as C, usePathname as k, useRouter as L } from "next/navigation";
-import { useRef as j, useState as R, useEffect as I } from "react";
-const M = /* @__PURE__ */ new Map([
+"use client";
+import { I as N } from "./icon-B0jP5FtS.js";
+import { B as le } from "./icon-B0jP5FtS.js";
+import { jsx as n, jsxs as h, Fragment as k } from "react/jsx-runtime";
+import { useSearchParams as I, usePathname as z, useRouter as L } from "next/navigation";
+import { useRef as R, useState as F, useEffect as M, useId as O } from "react";
+const Y = [
+  "default",
+  "danger",
+  "inverse",
+  "emphasize",
+  "decolor"
+], Z = ["md", "sm", "xs"], K = [
+  "ghost",
+  "outline",
+  "secondary",
+  "tertiary"
+], V = "inline-flex items-center justify-center rounded-lg cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", A = {
+  md: "h-12 w-12 p-3",
+  sm: "h-8 w-8 p-2",
+  xs: "h-6 w-6 p-0"
+}, E = {
+  default: "text-gray-5 hover:text-neutral-5 transition-colors",
+  danger: "text-red-4 hover:text-red-5",
+  inverse: "text-white hover:text-gray-1",
+  emphasize: "bg-white text-gray-5 hover:bg-gray-1 hover:text-neutral-5 focus-visible:bg-blue-1 focus-visible:text-blue-4 focus-visible:hover:bg-blue-2 focus-visible:hover:text-blue-5",
+  decolor: "text-gray-5 hover:text-neutral-5 transition-colors"
+}, G = {
+  ghost: "",
+  outline: "border-2 border-gray-5"
+}, q = {
+  default: "btn btn-primary",
+  danger: "btn btn-primary btn-danger",
+  inverse: "btn btn-primary btn-inverse",
+  emphasize: "btn btn-primary",
+  decolor: "btn btn-primary btn-decolor"
+}, D = {
+  default: "flex items-center gap-2 py-3 text-gray-5",
+  danger: "flex items-center gap-2 py-3 text-red-4 hover:text-red-5",
+  inverse: "flex items-center gap-2 py-3 text-white hover:text-gray-1",
+  emphasize: "flex items-center gap-2 py-3 text-gray-5",
+  decolor: "flex items-center gap-2 py-3 text-gray-5 hover:text-neutral-5"
+};
+function j(e, o) {
+  return `${e === "xs" ? "block h-5 w-5 shrink-0 leading-none" : e === "sm" ? "block h-4 w-4 shrink-0 text-base leading-none" : "block h-6 w-6 shrink-0 text-2xl leading-none"} ${o ?? ""}`.trim();
+}
+function Q({
+  className: e,
+  size: o = "md",
+  state: t = "default",
+  variant: s = "ghost"
+}) {
+  return s === "secondary" ? `${q[t]} ${e ?? ""}`.trim() : s === "tertiary" ? `${D[t]} ${e ?? ""}`.trim() : `${V} ${A[o]} ${E[t]} ${G[s]} ${e ?? ""}`.trim();
+}
+function T({
+  children: e,
+  icon: o,
+  iconClassName: t,
+  iconPosition: s = "start",
+  size: l = "md",
+  textClassName: u,
+  variant: i = "ghost"
+}) {
+  const a = o ? /* @__PURE__ */ n(
+    N,
+    {
+      name: o,
+      className: i === "ghost" || i === "outline" ? j(l, t) : i === "tertiary" ? `h-5 w-5 shrink-0 ${t ?? ""}`.trim() : t
+    }
+  ) : null;
+  if (i === "tertiary") {
+    const r = e ? /* @__PURE__ */ n("span", { className: `font-semibold underline ${u ?? ""}`.trim(), children: e }) : null;
+    return s === "end" ? /* @__PURE__ */ h(k, { children: [
+      r,
+      a
+    ] }) : /* @__PURE__ */ h(k, { children: [
+      a,
+      r
+    ] });
+  }
+  if (i === "secondary") {
+    const r = u ? /* @__PURE__ */ n("span", { className: u, children: e }) : e;
+    return a ? r ? s === "end" ? /* @__PURE__ */ h(k, { children: [
+      r,
+      " ",
+      a
+    ] }) : /* @__PURE__ */ h(k, { children: [
+      a,
+      " ",
+      r
+    ] }) : a : r;
+  }
+  return /* @__PURE__ */ h(k, { children: [
+    a,
+    e
+  ] });
+}
+function ee({
+  children: e,
+  icon: o,
+  iconClassName: t,
+  iconPosition: s = "start",
+  label: l,
+  className: u,
+  size: i = "md",
+  state: a = "default",
+  textClassName: r,
+  type: c = "button",
+  variant: m = "ghost",
+  ...y
+}) {
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      type: c,
+      className: Q({ className: u, size: i, state: a, variant: m }),
+      ...y,
+      "aria-label": l,
+      children: T({
+        children: e,
+        icon: o,
+        iconClassName: t,
+        iconPosition: s,
+        size: i,
+        textClassName: r,
+        variant: m
+      })
+    }
+  );
+}
+function te({
+  name: e,
+  size: o = "md",
+  className: t
+}) {
+  return /* @__PURE__ */ n(
+    N,
+    {
+      name: e,
+      className: j(o, t)
+    }
+  );
+}
+const U = /* @__PURE__ */ new Map([
   ["black", "/primary-badge-engine-logo-black.svg"],
   ["white", "/primary-badge-engine-logo-white.svg"],
   ["color", "/primary-badge-engine-logo-color.svg"]
 ]);
-function E({
-  variant: c = "color",
-  className: b
+function ne({
+  variant: e = "color",
+  className: o
 }) {
-  const s = M.get(c);
-  return s === void 0 ? null : /* @__PURE__ */ e(
+  const t = U.get(e);
+  return t === void 0 ? null : /* @__PURE__ */ n(
     "img",
     {
-      src: s,
+      src: t,
       width: 186,
       height: 36,
       alt: "Badge Engine",
-      className: b
+      className: o
     }
   );
 }
-function V({
-  count: c,
-  limit: b,
-  pageParamKey: s = "page"
+function re({
+  count: e,
+  limit: o,
+  pageParamKey: t = "page"
 }) {
-  const r = C(), f = k(), o = L(), x = r.get(s), d = x ? Number.parseInt(x, 10) : Number.NaN, t = Number.isFinite(d) ? d : 1, n = Math.max(1, Math.ceil(c / b)), P = n <= 7 ? Array.from({ length: n }, (a, i) => i + 1) : t <= 4 ? [1, 2, 3, 4, 5, "ellipsis", n] : t >= n - 3 ? [1, "ellipsis", n - 4, n - 3, n - 2, n - 1, n] : [
+  const s = I(), l = z(), u = L(), i = s.get(t), a = i ? Number.parseInt(i, 10) : Number.NaN, r = Number.isFinite(a) ? a : 1, c = Math.max(1, Math.ceil(e / o)), m = c <= 7 ? Array.from({ length: c }, (d, g) => g + 1) : r <= 4 ? [1, 2, 3, 4, 5, "ellipsis", c] : r >= c - 3 ? [1, "ellipsis", c - 4, c - 3, c - 2, c - 1, c] : [
     1,
     "ellipsis",
-    t - 1,
-    t,
-    t + 1,
+    r - 1,
+    r,
+    r + 1,
     "ellipsis",
-    n
-  ], v = t === 1, u = t === n, N = (a) => {
-    if (v && a === "prev" || u && a === "next")
+    c
+  ], y = r === 1, C = r === c, $ = (d) => {
+    if (y && d === "prev" || C && d === "next")
       return;
-    const i = a === "prev" ? t - 1 : t + 1, g = new URLSearchParams(r.toString());
-    g.set(s, String(i)), o.push(`${f}?${g.toString()}`, { scroll: !1 });
-  }, y = (a) => {
-    const i = new URLSearchParams(r.toString());
-    i.set(s, String(a)), o.push(`${f}?${i.toString()}`, { scroll: !1 });
+    const g = d === "prev" ? r - 1 : r + 1, b = new URLSearchParams(s.toString());
+    b.set(t, String(g)), u.push(`${l}?${b.toString()}`, { scroll: !1 });
+  }, f = (d) => {
+    const g = new URLSearchParams(s.toString());
+    g.set(t, String(d)), u.push(`${l}?${g.toString()}`, { scroll: !1 });
   };
-  return /* @__PURE__ */ S("ul", { className: "flex items-center justify-center gap-4 font-medium", children: [
-    /* @__PURE__ */ e("li", { className: "mr-2", children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ h("ul", { className: "flex items-center justify-center gap-4 font-medium", children: [
+    /* @__PURE__ */ n("li", { className: "mr-2", children: /* @__PURE__ */ n(
       "button",
       {
         type: "button",
         "aria-label": "Previous page",
-        disabled: v,
+        disabled: y,
         className: "inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        onClick: () => N("prev"),
-        children: /* @__PURE__ */ e(w, { name: "ArrowLineLeft" })
+        onClick: () => $("prev"),
+        children: /* @__PURE__ */ n(N, { name: "ArrowLineLeft" })
       }
     ) }),
-    P.map((a, i) => {
-      const g = a === "ellipsis", h = g ? void 0 : a, m = h === t, p = g || m, l = g ? "Pagination ellipsis" : `Go to page ${h}`;
-      return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+    m.map((d, g) => {
+      const b = d === "ellipsis", x = b ? void 0 : d, w = x === r, S = b || w, P = b ? "Pagination ellipsis" : `Go to page ${x}`;
+      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
         "button",
         {
           type: "button",
-          "aria-label": l,
-          "aria-current": m ? "page" : void 0,
-          disabled: p,
-          className: `flex h-[36px] w-[36px] items-center justify-center rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 ${m ? "bg-blue-1 text-blue-4" : ""} ${p ? "cursor-default" : "cursor-pointer hover:bg-gray-1"}`.trim(),
-          onClick: !p && h ? () => y(h) : void 0,
-          children: g ? "..." : h
+          "aria-label": P,
+          "aria-current": w ? "page" : void 0,
+          disabled: S,
+          className: `flex h-[36px] w-[36px] items-center justify-center rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 ${w ? "bg-blue-1 text-blue-4" : ""} ${S ? "cursor-default" : "cursor-pointer hover:bg-gray-1"}`.trim(),
+          onClick: !S && x ? () => f(x) : void 0,
+          children: b ? "..." : x
         }
-      ) }, `${a}-${i}`);
+      ) }, `${d}-${g}`);
     }),
-    /* @__PURE__ */ e("li", { className: "ml-2", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ n("li", { className: "ml-2", children: /* @__PURE__ */ n(
       "button",
       {
         type: "button",
         "aria-label": "Next page",
-        disabled: u,
+        disabled: C,
         className: "inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        onClick: () => N("next"),
-        children: /* @__PURE__ */ e(w, { name: "ArrowLineRight" })
+        onClick: () => $("next"),
+        children: /* @__PURE__ */ n(N, { name: "ArrowLineRight" })
       }
     ) })
   ] });
 }
-function q({
-  placeholder: c,
-  className: b,
-  inputWidth: s,
-  value: r,
-  onChange: f,
-  syncToUrl: o = !0,
-  id: x = "search",
-  paramKey: d = "s"
+function se({
+  placeholder: e,
+  className: o,
+  inputWidth: t,
+  value: s,
+  onChange: l,
+  syncToUrl: u = !0,
+  id: i = "search",
+  paramKey: a = "s",
+  firstResultSelector: r,
+  onEnter: c
 }) {
-  const t = C(), n = k(), P = L(), v = j(null), u = r !== void 0, [N, y] = R(
-    u ? r : t.get(d)?.toString() ?? ""
-  ), a = u ? r : N, i = Math.max(c.length, 1), g = `calc(${i}ch + 60px)`, h = s === void 0 ? g : typeof s == "number" ? `${s}px` : s;
-  I(() => {
-    !o || u || y(t.get(d)?.toString() ?? "");
-  }, [u, d, t, o]);
-  const m = (p) => {
-    if (!o) return;
-    const l = new URLSearchParams(t.toString());
-    p ? (l.set(d, p), l.delete("page")) : (l.delete(d), l.delete("page"));
-    const $ = l.toString();
-    P.replace($ ? `${n}?${$}` : n);
+  const m = I(), y = z(), C = L(), $ = R(null), f = s !== void 0, [d, g] = F(
+    f ? s : m.get(a)?.toString() ?? ""
+  ), b = f ? s : d, x = Math.max(e.length, 1), w = `calc(${x}ch + 60px)`, S = t === void 0 ? w : typeof t == "number" ? `${t}px` : t;
+  M(() => {
+    !u || f || g(m.get(a)?.toString() ?? "");
+  }, [f, a, m, u]);
+  const P = (v) => {
+    if (!u) return;
+    const p = new URLSearchParams(m.toString());
+    v ? (p.set(a, v), p.delete("page")) : (p.delete(a), p.delete("page"));
+    const B = p.toString();
+    C.replace(B ? `${y}?${B}` : y);
   };
-  return /* @__PURE__ */ S("form", { className: b ?? "", noValidate: !0, children: [
-    /* @__PURE__ */ e("label", { className: "sr-only", htmlFor: x, children: "Search" }),
-    /* @__PURE__ */ S("div", { className: "relative max-w-full", style: { width: h }, children: [
-      /* @__PURE__ */ e(
-        w,
+  return /* @__PURE__ */ h("form", { className: o ?? "", noValidate: !0, onSubmit: (v) => {
+    if (v.preventDefault(), c?.(b), r && b.trim()) {
+      const p = document.querySelector(r);
+      p && p.focus();
+    }
+  }, children: [
+    /* @__PURE__ */ n("label", { className: "sr-only", htmlFor: i, children: "Search" }),
+    /* @__PURE__ */ h("div", { className: "relative max-w-full", style: { width: S }, children: [
+      /* @__PURE__ */ n(
+        N,
         {
           name: "Magnifier",
           "aria-hidden": !0,
           className: "absolute left-[15px] top-1/2 z-10 -translate-y-1/2 text-large leading-5 text-gray-5"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "input",
         {
-          ref: v,
+          ref: $,
           className: "hide-search-clear block w-full max-w-full rounded-sm bg-white py-[11px] pl-[15px] pr-[40px] text-base leading-5 indent-[30px] outline-1 outline-gray-5 transition focus:outline-2 focus:outline-blue-4",
           style: {
             color: "#000000",
             WebkitTextFillColor: "#000000"
           },
-          size: i,
-          id: x,
+          size: x,
+          id: i,
           type: "search",
           autoComplete: "off",
-          value: a,
-          placeholder: c,
-          onChange: (p) => {
-            const l = p.target.value;
-            u || y(l), f?.(l), m(l);
+          value: b,
+          placeholder: e,
+          onChange: (v) => {
+            const p = v.target.value;
+            f || g(p), l?.(p), P(p);
           }
         }
       ),
-      a.length > 0 && /* @__PURE__ */ e(
+      b.length > 0 && /* @__PURE__ */ n(
         "button",
         {
           type: "button",
           "aria-label": "Clear search",
           className: "absolute right-1 top-1/2 z-10 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg p-2 text-gray-5 hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4",
           onClick: () => {
-            u || y(""), f?.(""), m(""), v.current?.focus();
+            f || g(""), l?.(""), P(""), $.current?.focus();
           },
-          children: /* @__PURE__ */ e(w, { name: "Close" })
+          children: /* @__PURE__ */ n(N, { name: "Close" })
         }
       )
     ] })
   ] });
 }
-function D({ columns: c, rows: b, rowKey: s }) {
-  return /* @__PURE__ */ S("table", { className: "w-full table-auto border-y border-gray-2 text-gray-5", children: [
-    /* @__PURE__ */ e("thead", { className: "font-bold", children: /* @__PURE__ */ e("tr", { children: c.map((r) => /* @__PURE__ */ e(
-      "td",
+function ie({ columns: e, rows: o, rowKey: t }) {
+  const s = O();
+  return /* @__PURE__ */ h("table", { className: "w-full table-auto border-y border-gray-2 text-gray-5", children: [
+    /* @__PURE__ */ n("thead", { className: "font-bold", children: /* @__PURE__ */ n("tr", { children: e.map((l) => /* @__PURE__ */ n(
+      "th",
       {
-        className: `px-3 py-4 ${r.headerClassName ?? ""}`.trim(),
-        children: r.header
+        id: `${s}-col-${l.key}`,
+        scope: "col",
+        className: `px-3 py-4 text-left ${l.headerClassName ?? ""}`.trim(),
+        children: l.header
       },
-      r.key
+      l.key
     )) }) }),
-    /* @__PURE__ */ e("tbody", { children: b.map((r, f) => /* @__PURE__ */ e("tr", { className: "border-t border-gray-2", children: c.map((o) => /* @__PURE__ */ e(
+    /* @__PURE__ */ n("tbody", { children: o.map((l, u) => /* @__PURE__ */ n("tr", { className: "border-t border-gray-2", children: e.map((i) => /* @__PURE__ */ n(
       "td",
       {
-        className: `${o.cellClassName ?? "px-3 py-4"}`.trim(),
-        children: o.render(r)
+        headers: `${s}-col-${i.key}`,
+        className: `${i.cellClassName ?? "px-3 py-4"}`.trim(),
+        children: i.render(l)
       },
-      o.key
-    )) }, s(r, f))) })
+      i.key
+    )) }, t(l, u))) })
   ] });
 }
 export {
-  T as Button,
-  w as Icon,
-  U as IconButton,
-  E as Logo,
-  V as Pagination,
-  q as Search,
-  D as Table
+  le as Button,
+  N as Icon,
+  ee as IconButton,
+  te as IconButtonGlyph,
+  ne as Logo,
+  re as Pagination,
+  se as Search,
+  ie as Table,
+  Z as iconButtonSizes,
+  Y as iconButtonStates,
+  K as iconButtonVariants
 };

package/dist/theme.css

@@ -1 +1 @@
-@theme{--color-*: initial; --text-*: initial; --spacing-*: initial;}@theme{ --color-gray-1: #f4f4f4; --color-gray-2: #e6e6e6; --color-gray-3: #a3a3a3; --color-gray-4: #767676; --color-gray-5: #454545; --color-blue-1: #eaf4fb; --color-blue-2: #d5e8f5; --color-blue-3: #2077be; --color-blue-4: #1166aa; --color-blue-5: #075593; --color-indigo-1: #eef2f9; --color-indigo-2: #d9dff3; --color-indigo-3: #5770be; --color-indigo-4: #465faa; --color-indigo-5: #3a4f92; --color-purple-1: #f1eef6; --color-purple-2: #e4dcf0; --color-purple-3: #8164af; --color-purple-4: #72559f; --color-purple-5: #5e4586; --color-violet-1: #f5eef6; --color-violet-2: #ecddef; --color-violet-3: #9f57af; --color-violet-4: #8a4799; --color-violet-5: #713c7c; --color-magenta-1: #f6eef4; --color-magenta-2: #f0dce9; --color-magenta-3: #aa558e; --color-magenta-4: #8f4777; --color-magenta-5: #7d3c68; --color-red-1: #ffefea; --color-red-2: #fee0d7; --color-red-3: #cc4a22; --color-red-4: #bc3a11; --color-red-5: #a22a06; --color-orange-1: #fcf2e8; --color-orange-2: #fae3cb; --color-orange-3: #d46b00; --color-orange-4: #b55b00; --color-orange-5: #8c4500; --color-green-1: #f5f9eb; --color-green-2: #e6f1cd; --color-green-3: #69930d; --color-green-4: #577d04; --color-green-5: #426001; --color-jade-1: #eef7f1; --color-jade-2: #d4eadd; --color-jade-3: #299a55; --color-jade-4: #14833f; --color-jade-5: #07652c; --color-teal-1: #eaf8fb; --color-teal-2: #caeef4; --color-teal-3: #1692a9; --color-teal-4: #1a7b8d; --color-teal-5: #11606e; --color-neutral-1: #ffffff; --color-neutral-2: rgba(0, 0, 0, .08); --color-neutral-3: rgba(0, 0, 0, .15); --color-neutral-4: rgba(0, 0, 0, .45); --color-neutral-5: #000000; --color-primary: #1166aa; --color-primary-hover: #eaf4fb; --color-danger: #bc3a11; --color-danger-hover: #a22a06; --color-disabled: #a3a3a3; --text-small: .875rem; --text-medium: 1rem; --text-medium-large: 1.25rem; --text-large: 1.5rem; --text-x-large: 2rem; --text-xx-large: 3rem; --text-xxx-large: 4rem; --text-base: 1rem; --spacing-0: 0; --spacing-1: .25rem; --spacing-2: .5rem; --spacing-3: .75rem; --spacing-4: 1rem; --spacing-5: 1.5rem; --spacing-6: 2rem; --spacing-7: 3rem; --spacing-8: 4rem; --spacing-9: 5rem; --spacing-10: 6rem; --spacing-11: 15rem; --spacing-12: 22.5rem; }@source "./components";@layer components{.btn{@apply transition cursor-pointer font-semibold px-[1.375rem] py-[.625rem] rounded-3xl disabled:opacity-50;}.btn-primary{@apply bg-blue-3 border-2 border-blue-3 leading-5 text-neutral-1 hover:border-blue-4 hover:bg-blue-4 disabled:border-blue-3 disabled:bg-blue-3;}.btn-primary.btn-danger{@apply border-red-3 bg-red-3 text-neutral-1 hover:border-red-4 hover:bg-red-4;}.btn-primary.btn-inverse{@apply bg-neutral-1 text-blue-4 hover:bg-blue-1 hover:border-blue-5 hover:text-blue-5;}.btn-primary.btn-decolor{@apply border-gray-5 bg-gray-5 text-neutral-1 hover:border-neutral-5 hover:bg-neutral-5;}.btn-secondary{@apply bg-neutral-1 border-2 border-blue-3 text-blue-4 hover:border-blue-4 hover:bg-blue-1 hover:text-blue-5;}.btn-secondary.btn-danger{@apply border-red-3 text-red-3 hover:border-red-4 hover:text-red-4 hover:bg-red-1;}.btn-secondary.btn-inverse{@apply border-neutral-1 text-neutral-1 bg-indigo-3 hover:bg-indigo-4;}.btn-secondary.btn-decolor{@apply text-gray-5 border-gray-5 hover:text-neutral-5 hover:border-neutral-5 hover:bg-gray-1;}.btn-tertiary{@apply px-0 py-3 text-blue-4 underline hover:text-blue-5;}.btn-tertiary.btn-danger{@apply text-red-4 hover:text-red-5;}.btn-tertiary.btn-inverse{@apply text-neutral-1 hover:text-gray-1;}.btn-tertiary.btn-decolor{@apply text-gray-5 hover:text-neutral-5;}}@utility hide-search-clear{&::-webkit-search-cancel-button,&::-webkit-search-decoration {-webkit-appearance: none; appearance: none;} &::-ms-clear {display: none;}}
+@theme{--color-*: initial; --text-*: initial; --spacing-*: initial;}@theme{ --color-gray-1: #f4f4f4; --color-gray-2: #e6e6e6; --color-gray-3: #a3a3a3; --color-gray-4: #767676; --color-gray-5: #454545; --color-blue-1: #eaf4fb; --color-blue-2: #d5e8f5; --color-blue-3: #2077be; --color-blue-4: #1166aa; --color-blue-5: #075593; --color-indigo-1: #eef2f9; --color-indigo-2: #d9dff3; --color-indigo-3: #5770be; --color-indigo-4: #465faa; --color-indigo-5: #3a4f92; --color-purple-1: #f1eef6; --color-purple-2: #e4dcf0; --color-purple-3: #8164af; --color-purple-4: #72559f; --color-purple-5: #5e4586; --color-violet-1: #f5eef6; --color-violet-2: #ecddef; --color-violet-3: #9f57af; --color-violet-4: #8a4799; --color-violet-5: #713c7c; --color-magenta-1: #f6eef4; --color-magenta-2: #f0dce9; --color-magenta-3: #aa558e; --color-magenta-4: #8f4777; --color-magenta-5: #7d3c68; --color-red-1: #ffefea; --color-red-2: #fee0d7; --color-red-3: #cc4a22; --color-red-4: #bc3a11; --color-red-5: #a22a06; --color-orange-1: #fcf2e8; --color-orange-2: #fae3cb; --color-orange-3: #d46b00; --color-orange-4: #b55b00; --color-orange-5: #8c4500; --color-green-1: #f5f9eb; --color-green-2: #e6f1cd; --color-green-3: #69930d; --color-green-4: #577d04; --color-green-5: #426001; --color-jade-1: #eef7f1; --color-jade-2: #d4eadd; --color-jade-3: #299a55; --color-jade-4: #14833f; --color-jade-5: #07652c; --color-teal-1: #eaf8fb; --color-teal-2: #caeef4; --color-teal-3: #1692a9; --color-teal-4: #1a7b8d; --color-teal-5: #11606e; --color-neutral-1: #ffffff; --color-neutral-2: rgba(0, 0, 0, .08); --color-neutral-3: rgba(0, 0, 0, .15); --color-neutral-4: rgba(0, 0, 0, .45); --color-neutral-5: #000000; --color-primary: #1166aa; --color-primary-hover: #eaf4fb; --color-danger: #bc3a11; --color-danger-hover: #a22a06; --color-disabled: #a3a3a3; --color-focus: #14833f; --color-focus-outer: #ffffff; --text-small: .875rem; --text-medium: 1rem; --text-medium-large: 1.25rem; --text-large: 1.5rem; --text-x-large: 2rem; --text-xx-large: 3rem; --text-xxx-large: 4rem; --text-base: 1rem; --spacing-0: 0; --spacing-1: .25rem; --spacing-2: .5rem; --spacing-3: .75rem; --spacing-4: 1rem; --spacing-5: 1.5rem; --spacing-6: 2rem; --spacing-7: 3rem; --spacing-8: 4rem; --spacing-9: 5rem; --spacing-10: 6rem; --spacing-11: 15rem; --spacing-12: 22.5rem; }@source "./components";:root{--focus-ring-color: #14833F;--focus-ring-outer-color: #FFFFFF;--focus-ring-width: 4px;--focus-ring-outer-width: 2px;--focus-ring-offset: 2px}.focus-ring:focus-visible,*:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-offset) var(--focus-ring-outer-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) + var(--focus-ring-outer-width)) var(--focus-ring-outer-color)}.focus-ring-inside:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer-color),inset 0 0 0 calc(var(--focus-ring-outer-width) + var(--focus-ring-width)) var(--focus-ring-color)}.focus-ring-none:focus-visible{outline:none;box-shadow:none}@layer components{.btn{@apply transition cursor-pointer font-semibold px-[1.375rem] py-[.625rem] rounded-3xl disabled:opacity-50;}.btn-primary{@apply bg-blue-3 border-2 border-blue-3 leading-5 text-neutral-1 hover:border-blue-4 hover:bg-blue-4 disabled:border-blue-3 disabled:bg-blue-3;}.btn-primary.btn-danger{@apply border-red-3 bg-red-3 text-neutral-1 hover:border-red-4 hover:bg-red-4;}.btn-primary.btn-inverse{@apply bg-neutral-1 text-blue-4 hover:bg-blue-1 hover:border-blue-5 hover:text-blue-5;}.btn-primary.btn-decolor{@apply border-gray-5 bg-gray-5 text-neutral-1 hover:border-neutral-5 hover:bg-neutral-5;}.btn-secondary{@apply bg-neutral-1 border-2 border-blue-3 text-blue-4 hover:border-blue-4 hover:bg-blue-1 hover:text-blue-5;}.btn-secondary.btn-danger{@apply border-red-3 text-red-3 hover:border-red-4 hover:text-red-4 hover:bg-red-1;}.btn-secondary.btn-inverse{@apply border-neutral-1 text-neutral-1 bg-indigo-3 hover:bg-indigo-4;}.btn-secondary.btn-decolor{@apply text-gray-5 border-gray-5 hover:text-neutral-5 hover:border-neutral-5 hover:bg-gray-1;}.btn-tertiary{@apply px-0 py-3 text-blue-4 underline hover:text-blue-5;}.btn-tertiary.btn-danger{@apply text-red-4 hover:text-red-5;}.btn-tertiary.btn-inverse{@apply text-neutral-1 hover:text-gray-1;}.btn-tertiary.btn-decolor{@apply text-gray-5 hover:text-neutral-5;}}@utility hide-search-clear{&::-webkit-search-cancel-button,&::-webkit-search-decoration {-webkit-appearance: none; appearance: none;} &::-ms-clear {display: none;}}@utility focus-ring{&:focus-visible {outline: none; box-shadow: 0 0 0 var(--focus-ring-offset) var(--focus-ring-outer-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) + var(--focus-ring-outer-width)) var(--focus-ring-outer-color);}}@utility focus-ring-inside{&:focus-visible {outline: none; box-shadow: inset 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer-color),inset 0 0 0 calc(var(--focus-ring-outer-width) + var(--focus-ring-width)) var(--focus-ring-color);}}@utility focus-ring-none{&:focus-visible {outline: none; box-shadow: none;}}

package/dist/tokens.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default tokens;
+
+declare interface DesignToken {
+  $value?: any;
+  $type?: string;
+  $description?: string;
+  name?: string;
+  themeable?: boolean;
+  attributes?: Record<string, unknown>;
+  [key: string]: any;
+}
+
+declare const tokens: {
+  color: {
+    gray: {
+      "1": DesignToken;
+      "2": DesignToken;
+      "3": DesignToken;
+      "4": DesignToken;
+      "5": DesignToken;
+    };
+    blue: {
+      "1": DesignToken;
+      "2": DesignToken;
+      "3": DesignToken;
+      "4": DesignToken;
+      "5": DesignToken;
+    };
+    indigo: {
+      "1": DesignToken;
+      "2": DesignToken;
+      "3": DesignToken;
+      "4": DesignToken;
+      "5": DesignToken;
+    };
+    purple: {
+      "1": DesignToken;
+      "2": DesignToken;
+      "3": DesignToken;
+      "4": DesignToken;
+      "5": DesignToken;
+    };
+    violet: {
+      "1": DesignToken;
+      "2": DesignToken;
+      "3": DesignToken;
+      "4": DesignToken;
+      "5": DesignToken;
+    };
+    magenta: {
+      "1": DesignToken;
+      "2": DesignToken;
+      "3": DesignToken;
+      "4": DesignToken;
+      "5": DesignToken;
+    };
+    red: {
+      "1": DesignToken;
+      "2": DesignToken;
+      "3": DesignToken;
+      "4": DesignToken;
+      "5": DesignToken;
+    };
+    orange: {
+      "1": DesignToken;
+      "2": DesignToken;
+      "3": DesignToken;
+      "4": DesignToken;
+      "5": DesignToken;
+    };
+    green: {
+      "1": DesignToken;
+      "2": DesignToken;
+      "3": DesignToken;
+      "4": DesignToken;
+      "5": DesignToken;
+    };
+    jade: {
+      "1": DesignToken;
+      "2": DesignToken;
+      "3": DesignToken;
+      "4": DesignToken;
+      "5": DesignToken;
+    };
+    teal: {
+      "1": DesignToken;
+      "2": DesignToken;
+      "3": DesignToken;
+      "4": DesignToken;
+      "5": DesignToken;
+    };
+    neutral: {
+      "1": DesignToken;
+      "2": DesignToken;
+      "3": DesignToken;
+      "4": DesignToken;
+      "5": DesignToken;
+    };
+    primary: DesignToken;
+    "primary-hover": DesignToken;
+    danger: DesignToken;
+    "danger-hover": DesignToken;
+    disabled: DesignToken;
+    focus: DesignToken;
+    "focus-outer": DesignToken;
+  };
+  text: {
+    small: DesignToken;
+    medium: DesignToken;
+    "medium-large": DesignToken;
+    large: DesignToken;
+    "x-large": DesignToken;
+    "xx-large": DesignToken;
+    "xxx-large": DesignToken;
+    base: DesignToken;
+  };
+  spacing: {
+    "0": DesignToken;
+    "1": DesignToken;
+    "2": DesignToken;
+    "3": DesignToken;
+    "4": DesignToken;
+    "5": DesignToken;
+    "6": DesignToken;
+    "7": DesignToken;
+    "8": DesignToken;
+    "9": DesignToken;
+    "10": DesignToken;
+    "11": DesignToken;
+    "12": DesignToken;
+  };
+};