@cfcc/design-system 0.1.0 → 0.1.1

package/dist/index.js

@@ -18,17 +18,17 @@ const H = "-", de = (e) => {
     conflictingClassGroupModifiers: o
   } = e;
   return {
-    getClassGroupId: (a) => {
-      const l = a.split(H);
-      return l[0] === "" && l.length !== 1 && l.shift(), ne(l, r) || ue(a);
+    getClassGroupId: (i) => {
+      const a = i.split(H);
+      return a[0] === "" && a.length !== 1 && a.shift(), ne(a, r) || ue(i);
     },
-    getConflictingClassGroupIds: (a, l) => {
-      const d = t[a] || [];
-      return l && o[a] ? [...d, ...o[a]] : d;
+    getConflictingClassGroupIds: (i, a) => {
+      const d = t[i] || [];
+      return a && o[i] ? [...d, ...o[i]] : d;
     }
   };
 }, ne = (e, r) => {
-  var a;
+  var i;
   if (e.length === 0)
     return r.classGroupId;
   const t = e[0], o = r.nextPart.get(t), s = o ? ne(e.slice(1), o) : void 0;
@@ -37,9 +37,9 @@ const H = "-", de = (e) => {
   if (r.validators.length === 0)
     return;
   const n = e.join(H);
-  return (a = r.validators.find(({
-    validator: l
-  }) => l(n))) == null ? void 0 : a.classGroupId;
+  return (i = r.validators.find(({
+    validator: a
+  }) => a(n))) == null ? void 0 : i.classGroupId;
 }, ee = /^\[(.+)\]$/, ue = (e) => {
   if (ee.test(e)) {
     const r = ee.exec(e)[1], t = r == null ? void 0 : r.substring(0, r.indexOf(":"));
@@ -54,8 +54,8 @@ const H = "-", de = (e) => {
     nextPart: /* @__PURE__ */ new Map(),
     validators: []
   };
-  return ge(Object.entries(e.classGroups), t).forEach(([n, a]) => {
-    q(a, o, n, r);
+  return ge(Object.entries(e.classGroups), t).forEach(([n, i]) => {
+    q(i, o, n, r);
   }), o;
 }, q = (e, r, t, o) => {
   e.forEach((s) => {
@@ -75,8 +75,8 @@ const H = "-", de = (e) => {
       });
       return;
     }
-    Object.entries(s).forEach(([n, a]) => {
-      q(a, re(r, n), t, o);
+    Object.entries(s).forEach(([n, i]) => {
+      q(i, re(r, n), t, o);
     });
   });
 }, re = (e, r) => {
@@ -88,7 +88,7 @@ const H = "-", de = (e) => {
     }), t = t.nextPart.get(o);
   }), t;
 }, be = (e) => e.isThemeGetter, ge = (e, r) => r ? e.map(([t, o]) => {
-  const s = o.map((n) => typeof n == "string" ? r + n : typeof n == "object" ? Object.fromEntries(Object.entries(n).map(([a, l]) => [r + a, l])) : n);
+  const s = o.map((n) => typeof n == "string" ? r + n : typeof n == "object" ? Object.fromEntries(Object.entries(n).map(([i, a]) => [r + i, a])) : n);
   return [t, s];
 }) : e, fe = (e) => {
   if (e < 1)
@@ -99,33 +99,33 @@ const H = "-", de = (e) => {
       }
     };
   let r = 0, t = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map();
-  const s = (n, a) => {
-    t.set(n, a), r++, r > e && (r = 0, o = t, t = /* @__PURE__ */ new Map());
+  const s = (n, i) => {
+    t.set(n, i), r++, r > e && (r = 0, o = t, t = /* @__PURE__ */ new Map());
   };
   return {
     get(n) {
-      let a = t.get(n);
-      if (a !== void 0)
-        return a;
-      if ((a = o.get(n)) !== void 0)
-        return s(n, a), a;
+      let i = t.get(n);
+      if (i !== void 0)
+        return i;
+      if ((i = o.get(n)) !== void 0)
+        return s(n, i), i;
     },
-    set(n, a) {
-      t.has(n) ? t.set(n, a) : s(n, a);
+    set(n, i) {
+      t.has(n) ? t.set(n, i) : s(n, i);
     }
   };
 }, se = "!", me = (e) => {
   const {
     separator: r,
     experimentalParseClassName: t
-  } = e, o = r.length === 1, s = r[0], n = r.length, a = (l) => {
+  } = e, o = r.length === 1, s = r[0], n = r.length, i = (a) => {
     const d = [];
     let g = 0, f = 0, v;
-    for (let b = 0; b < l.length; b++) {
-      let h = l[b];
+    for (let b = 0; b < a.length; b++) {
+      let h = a[b];
       if (g === 0) {
-        if (h === s && (o || l.slice(b, b + n) === r)) {
-          d.push(l.slice(f, b)), f = b + n;
+        if (h === s && (o || a.slice(b, b + n) === r)) {
+          d.push(a.slice(f, b)), f = b + n;
           continue;
         }
         if (h === "/") {
@@ -135,18 +135,18 @@ const H = "-", de = (e) => {
       }
       h === "[" ? g++ : h === "]" && g--;
     }
-    const w = d.length === 0 ? l : l.substring(f), k = w.startsWith(se), C = k ? w.substring(1) : w, m = v && v > f ? v - f : void 0;
+    const w = d.length === 0 ? a : a.substring(f), C = w.startsWith(se), k = C ? w.substring(1) : w, m = v && v > f ? v - f : void 0;
     return {
       modifiers: d,
-      hasImportantModifier: k,
-      baseClassName: C,
+      hasImportantModifier: C,
+      baseClassName: k,
       maybePostfixModifierPosition: m
     };
   };
-  return t ? (l) => t({
-    className: l,
-    parseClassName: a
-  }) : a;
+  return t ? (a) => t({
+    className: a,
+    parseClassName: i
+  }) : i;
 }, he = (e) => {
   if (e.length <= 1)
     return e;
@@ -164,61 +164,61 @@ const H = "-", de = (e) => {
     parseClassName: t,
     getClassGroupId: o,
     getConflictingClassGroupIds: s
-  } = r, n = [], a = e.trim().split(ye);
-  let l = "";
-  for (let d = a.length - 1; d >= 0; d -= 1) {
-    const g = a[d], {
+  } = r, n = [], i = e.trim().split(ye);
+  let a = "";
+  for (let d = i.length - 1; d >= 0; d -= 1) {
+    const g = i[d], {
       modifiers: f,
       hasImportantModifier: v,
       baseClassName: w,
-      maybePostfixModifierPosition: k
+      maybePostfixModifierPosition: C
     } = t(g);
-    let C = !!k, m = o(C ? w.substring(0, k) : w);
+    let k = !!C, m = o(k ? w.substring(0, C) : w);
     if (!m) {
-      if (!C) {
-        l = g + (l.length > 0 ? " " + l : l);
+      if (!k) {
+        a = g + (a.length > 0 ? " " + a : a);
         continue;
       }
       if (m = o(w), !m) {
-        l = g + (l.length > 0 ? " " + l : l);
+        a = g + (a.length > 0 ? " " + a : a);
         continue;
       }
-      C = !1;
+      k = !1;
     }
     const b = he(f).join(":"), h = v ? b + se : b, y = h + m;
     if (n.includes(y))
       continue;
     n.push(y);
-    const L = s(m, C);
+    const L = s(m, k);
     for (let R = 0; R < L.length; ++R) {
       const B = L[R];
       n.push(h + B);
     }
-    l = g + (l.length > 0 ? " " + l : l);
+    a = g + (a.length > 0 ? " " + a : a);
   }
-  return l;
+  return a;
 };
 function we() {
   let e = 0, r, t, o = "";
   for (; e < arguments.length; )
-    (r = arguments[e++]) && (t = le(r)) && (o && (o += " "), o += t);
+    (r = arguments[e++]) && (t = ae(r)) && (o && (o += " "), o += t);
   return o;
 }
-const le = (e) => {
+const ae = (e) => {
   if (typeof e == "string")
     return e;
   let r, t = "";
   for (let o = 0; o < e.length; o++)
-    e[o] && (r = le(e[o])) && (t && (t += " "), t += r);
+    e[o] && (r = ae(e[o])) && (t && (t += " "), t += r);
   return t;
 };
-function Ce(e, ...r) {
-  let t, o, s, n = a;
-  function a(d) {
+function ke(e, ...r) {
+  let t, o, s, n = i;
+  function i(d) {
     const g = r.reduce((f, v) => v(f), e());
-    return t = xe(g), o = t.cache.get, s = t.cache.set, n = l, l(d);
+    return t = xe(g), o = t.cache.get, s = t.cache.set, n = a, a(d);
   }
-  function l(d) {
+  function a(d) {
     const g = o(d);
     if (g)
       return g;
@@ -232,26 +232,26 @@ function Ce(e, ...r) {
 const u = (e) => {
   const r = (t) => t[e] || [];
   return r.isThemeGetter = !0, r;
-}, ae = /^\[(?:([a-z-]+):)?(.+)\]$/i, ke = /^\d+\/\d+$/, ze = /* @__PURE__ */ new Set(["px", "full", "screen"]), Ne = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Ae = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Me = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, Se = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Re = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, N = (e) => G(e) || ze.has(e) || ke.test(e), M = (e) => j(e, "length", Te), G = (e) => !!e && !Number.isNaN(Number(e)), _ = (e) => j(e, "number", G), I = (e) => !!e && Number.isInteger(Number(e)), Ge = (e) => e.endsWith("%") && G(e.slice(0, -1)), i = (e) => ae.test(e), S = (e) => Ne.test(e), je = /* @__PURE__ */ new Set(["length", "size", "percentage"]), Le = (e) => j(e, je, ie), Pe = (e) => j(e, "position", ie), Ie = /* @__PURE__ */ new Set(["image", "url"]), Ee = (e) => j(e, Ie, $e), Be = (e) => j(e, "", We), E = () => !0, j = (e, r, t) => {
-  const o = ae.exec(e);
+}, ie = /^\[(?:([a-z-]+):)?(.+)\]$/i, Ce = /^\d+\/\d+$/, ze = /* @__PURE__ */ new Set(["px", "full", "screen"]), Ne = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Ae = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Me = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, Se = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Re = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, N = (e) => G(e) || ze.has(e) || Ce.test(e), M = (e) => j(e, "length", Te), G = (e) => !!e && !Number.isNaN(Number(e)), _ = (e) => j(e, "number", G), I = (e) => !!e && Number.isInteger(Number(e)), Ge = (e) => e.endsWith("%") && G(e.slice(0, -1)), l = (e) => ie.test(e), S = (e) => Ne.test(e), je = /* @__PURE__ */ new Set(["length", "size", "percentage"]), Le = (e) => j(e, je, le), Pe = (e) => j(e, "position", le), Ie = /* @__PURE__ */ new Set(["image", "url"]), Ee = (e) => j(e, Ie, $e), Be = (e) => j(e, "", We), E = () => !0, j = (e, r, t) => {
+  const o = ie.exec(e);
   return o ? o[1] ? typeof r == "string" ? o[1] === r : r.has(o[1]) : t(o[2]) : !1;
 }, Te = (e) => (
   // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
   // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   Ae.test(e) && !Me.test(e)
-), ie = () => !1, We = (e) => Se.test(e), $e = (e) => Re.test(e), Ve = () => {
-  const e = u("colors"), r = u("spacing"), t = u("blur"), o = u("brightness"), s = u("borderColor"), n = u("borderRadius"), a = u("borderSpacing"), l = u("borderWidth"), d = u("contrast"), g = u("grayscale"), f = u("hueRotate"), v = u("invert"), w = u("gap"), k = u("gradientColorStops"), C = u("gradientColorStopPositions"), m = u("inset"), b = u("margin"), h = u("opacity"), y = u("padding"), L = u("saturate"), R = u("scale"), B = u("sepia"), J = u("skew"), X = u("space"), Z = u("translate"), $ = () => ["auto", "contain", "none"], V = () => ["auto", "hidden", "clip", "visible", "scroll"], O = () => ["auto", i, r], p = () => [i, r], K = () => ["", N, M], T = () => ["auto", G, i], Q = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], W = () => ["solid", "dashed", "dotted", "double", "none"], Y = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], U = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], P = () => ["", "0", i], D = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], z = () => [G, i];
+), le = () => !1, We = (e) => Se.test(e), $e = (e) => Re.test(e), Ve = () => {
+  const e = u("colors"), r = u("spacing"), t = u("blur"), o = u("brightness"), s = u("borderColor"), n = u("borderRadius"), i = u("borderSpacing"), a = u("borderWidth"), d = u("contrast"), g = u("grayscale"), f = u("hueRotate"), v = u("invert"), w = u("gap"), C = u("gradientColorStops"), k = u("gradientColorStopPositions"), m = u("inset"), b = u("margin"), h = u("opacity"), y = u("padding"), L = u("saturate"), R = u("scale"), B = u("sepia"), J = u("skew"), X = u("space"), Z = u("translate"), $ = () => ["auto", "contain", "none"], V = () => ["auto", "hidden", "clip", "visible", "scroll"], O = () => ["auto", l, r], p = () => [l, r], K = () => ["", N, M], T = () => ["auto", G, l], Q = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], W = () => ["solid", "dashed", "dotted", "double", "none"], Y = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], U = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], P = () => ["", "0", l], D = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], z = () => [G, l];
   return {
     cacheSize: 500,
     separator: ":",
     theme: {
       colors: [E],
       spacing: [N, M],
-      blur: ["none", "", S, i],
+      blur: ["none", "", S, l],
       brightness: z(),
       borderColor: [e],
-      borderRadius: ["none", "", "full", S, i],
+      borderRadius: ["none", "", "full", S, l],
       borderSpacing: p(),
       borderWidth: K(),
       contrast: z(),
@@ -279,7 +279,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/aspect-ratio
        */
       aspect: [{
-        aspect: ["auto", "square", "video", i]
+        aspect: ["auto", "square", "video", l]
       }],
       /**
        * Container
@@ -364,7 +364,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/object-position
        */
       "object-position": [{
-        object: [...Q(), i]
+        object: [...Q(), l]
       }],
       /**
        * Overflow
@@ -486,7 +486,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/z-index
        */
       z: [{
-        z: ["auto", I, i]
+        z: ["auto", I, l]
       }],
       // Flexbox and Grid
       /**
@@ -515,7 +515,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/flex
        */
       flex: [{
-        flex: ["1", "auto", "initial", "none", i]
+        flex: ["1", "auto", "initial", "none", l]
       }],
       /**
        * Flex Grow
@@ -536,7 +536,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/order
        */
       order: [{
-        order: ["first", "last", "none", I, i]
+        order: ["first", "last", "none", I, l]
       }],
       /**
        * Grid Template Columns
@@ -551,8 +551,8 @@ const u = (e) => {
        */
       "col-start-end": [{
         col: ["auto", {
-          span: ["full", I, i]
-        }, i]
+          span: ["full", I, l]
+        }, l]
       }],
       /**
        * Grid Column Start
@@ -581,8 +581,8 @@ const u = (e) => {
        */
       "row-start-end": [{
         row: ["auto", {
-          span: [I, i]
-        }, i]
+          span: [I, l]
+        }, l]
       }],
       /**
        * Grid Row Start
@@ -610,14 +610,14 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/grid-auto-columns
        */
       "auto-cols": [{
-        "auto-cols": ["auto", "min", "max", "fr", i]
+        "auto-cols": ["auto", "min", "max", "fr", l]
       }],
       /**
        * Grid Auto Rows
        * @see https://tailwindcss.com/docs/grid-auto-rows
        */
       "auto-rows": [{
-        "auto-rows": ["auto", "min", "max", "fr", i]
+        "auto-rows": ["auto", "min", "max", "fr", l]
       }],
       /**
        * Gap
@@ -860,21 +860,21 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/width
        */
       w: [{
-        w: ["auto", "min", "max", "fit", "svw", "lvw", "dvw", i, r]
+        w: ["auto", "min", "max", "fit", "svw", "lvw", "dvw", l, r]
       }],
       /**
        * Min-Width
        * @see https://tailwindcss.com/docs/min-width
        */
       "min-w": [{
-        "min-w": [i, r, "min", "max", "fit"]
+        "min-w": [l, r, "min", "max", "fit"]
       }],
       /**
        * Max-Width
        * @see https://tailwindcss.com/docs/max-width
        */
       "max-w": [{
-        "max-w": [i, r, "none", "full", "min", "max", "fit", "prose", {
+        "max-w": [l, r, "none", "full", "min", "max", "fit", "prose", {
           screen: [S]
         }, S]
       }],
@@ -883,28 +883,28 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/height
        */
       h: [{
-        h: [i, r, "auto", "min", "max", "fit", "svh", "lvh", "dvh"]
+        h: [l, r, "auto", "min", "max", "fit", "svh", "lvh", "dvh"]
       }],
       /**
        * Min-Height
        * @see https://tailwindcss.com/docs/min-height
        */
       "min-h": [{
-        "min-h": [i, r, "min", "max", "fit", "svh", "lvh", "dvh"]
+        "min-h": [l, r, "min", "max", "fit", "svh", "lvh", "dvh"]
       }],
       /**
        * Max-Height
        * @see https://tailwindcss.com/docs/max-height
        */
       "max-h": [{
-        "max-h": [i, r, "min", "max", "fit", "svh", "lvh", "dvh"]
+        "max-h": [l, r, "min", "max", "fit", "svh", "lvh", "dvh"]
       }],
       /**
        * Size
        * @see https://tailwindcss.com/docs/size
        */
       size: [{
-        size: [i, r, "auto", "min", "max", "fit"]
+        size: [l, r, "auto", "min", "max", "fit"]
       }],
       // Typography
       /**
@@ -973,7 +973,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/letter-spacing
        */
       tracking: [{
-        tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", i]
+        tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", l]
       }],
       /**
        * Line Clamp
@@ -987,21 +987,21 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/line-height
        */
       leading: [{
-        leading: ["none", "tight", "snug", "normal", "relaxed", "loose", N, i]
+        leading: ["none", "tight", "snug", "normal", "relaxed", "loose", N, l]
       }],
       /**
        * List Style Image
        * @see https://tailwindcss.com/docs/list-style-image
        */
       "list-image": [{
-        "list-image": ["none", i]
+        "list-image": ["none", l]
       }],
       /**
        * List Style Type
        * @see https://tailwindcss.com/docs/list-style-type
        */
       "list-style-type": [{
-        list: ["none", "disc", "decimal", i]
+        list: ["none", "disc", "decimal", l]
       }],
       /**
        * List Style Position
@@ -1070,7 +1070,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/text-underline-offset
        */
       "underline-offset": [{
-        "underline-offset": ["auto", N, i]
+        "underline-offset": ["auto", N, l]
       }],
       /**
        * Text Decoration Color
@@ -1108,7 +1108,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/vertical-align
        */
       "vertical-align": [{
-        align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", i]
+        align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", l]
       }],
       /**
        * Whitespace
@@ -1136,7 +1136,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/content
        */
       content: [{
-        content: ["none", i]
+        content: ["none", l]
       }],
       // Backgrounds
       /**
@@ -1212,42 +1212,42 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-from-pos": [{
-        from: [C]
+        from: [k]
       }],
       /**
        * Gradient Color Stops Via Position
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-via-pos": [{
-        via: [C]
+        via: [k]
       }],
       /**
        * Gradient Color Stops To Position
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-to-pos": [{
-        to: [C]
+        to: [k]
       }],
       /**
        * Gradient Color Stops From
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-from": [{
-        from: [k]
+        from: [C]
       }],
       /**
        * Gradient Color Stops Via
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-via": [{
-        via: [k]
+        via: [C]
       }],
       /**
        * Gradient Color Stops To
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-to": [{
-        to: [k]
+        to: [C]
       }],
       // Borders
       /**
@@ -1360,63 +1360,63 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w": [{
-        border: [l]
+        border: [a]
       }],
       /**
        * Border Width X
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-x": [{
-        "border-x": [l]
+        "border-x": [a]
       }],
       /**
        * Border Width Y
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-y": [{
-        "border-y": [l]
+        "border-y": [a]
       }],
       /**
        * Border Width Start
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-s": [{
-        "border-s": [l]
+        "border-s": [a]
       }],
       /**
        * Border Width End
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-e": [{
-        "border-e": [l]
+        "border-e": [a]
       }],
       /**
        * Border Width Top
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-t": [{
-        "border-t": [l]
+        "border-t": [a]
       }],
       /**
        * Border Width Right
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-r": [{
-        "border-r": [l]
+        "border-r": [a]
       }],
       /**
        * Border Width Bottom
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-b": [{
-        "border-b": [l]
+        "border-b": [a]
       }],
       /**
        * Border Width Left
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-l": [{
-        "border-l": [l]
+        "border-l": [a]
       }],
       /**
        * Border Opacity
@@ -1437,7 +1437,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/divide-width
        */
       "divide-x": [{
-        "divide-x": [l]
+        "divide-x": [a]
       }],
       /**
        * Divide Width X Reverse
@@ -1449,7 +1449,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/divide-width
        */
       "divide-y": [{
-        "divide-y": [l]
+        "divide-y": [a]
       }],
       /**
        * Divide Width Y Reverse
@@ -1552,7 +1552,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/outline-offset
        */
       "outline-offset": [{
-        "outline-offset": [N, i]
+        "outline-offset": [N, l]
       }],
       /**
        * Outline Width
@@ -1679,7 +1679,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/drop-shadow
        */
       "drop-shadow": [{
-        "drop-shadow": ["", "none", S, i]
+        "drop-shadow": ["", "none", S, l]
       }],
       /**
        * Grayscale
@@ -1800,21 +1800,21 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/border-spacing
        */
       "border-spacing": [{
-        "border-spacing": [a]
+        "border-spacing": [i]
       }],
       /**
        * Border Spacing X
        * @see https://tailwindcss.com/docs/border-spacing
        */
       "border-spacing-x": [{
-        "border-spacing-x": [a]
+        "border-spacing-x": [i]
       }],
       /**
        * Border Spacing Y
        * @see https://tailwindcss.com/docs/border-spacing
        */
       "border-spacing-y": [{
-        "border-spacing-y": [a]
+        "border-spacing-y": [i]
       }],
       /**
        * Table Layout
@@ -1836,7 +1836,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/transition-property
        */
       transition: [{
-        transition: ["none", "all", "", "colors", "opacity", "shadow", "transform", i]
+        transition: ["none", "all", "", "colors", "opacity", "shadow", "transform", l]
       }],
       /**
        * Transition Duration
@@ -1850,7 +1850,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/transition-timing-function
        */
       ease: [{
-        ease: ["linear", "in", "out", "in-out", i]
+        ease: ["linear", "in", "out", "in-out", l]
       }],
       /**
        * Transition Delay
@@ -1864,7 +1864,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/animation
        */
       animate: [{
-        animate: ["none", "spin", "ping", "pulse", "bounce", i]
+        animate: ["none", "spin", "ping", "pulse", "bounce", l]
       }],
       // Transforms
       /**
@@ -1900,7 +1900,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/rotate
        */
       rotate: [{
-        rotate: [I, i]
+        rotate: [I, l]
       }],
       /**
        * Translate X
@@ -1935,7 +1935,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/transform-origin
        */
       "transform-origin": [{
-        origin: ["center", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left", i]
+        origin: ["center", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left", l]
       }],
       // Interactivity
       /**
@@ -1957,7 +1957,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/cursor
        */
       cursor: [{
-        cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", i]
+        cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", l]
       }],
       /**
        * Caret Color
@@ -2179,7 +2179,7 @@ const u = (e) => {
        * @see https://tailwindcss.com/docs/will-change
        */
       "will-change": [{
-        "will-change": ["auto", "scroll", "contents", "transform", i]
+        "will-change": ["auto", "scroll", "contents", "transform", l]
       }],
       // SVG
       /**
@@ -2269,19 +2269,19 @@ const u = (e) => {
       "font-size": ["leading"]
     }
   };
-}, Oe = /* @__PURE__ */ Ce(Ve);
+}, Oe = /* @__PURE__ */ ke(Ve);
 function x(...e) {
   return Oe(ce(e));
 }
 const Ue = {
-  primary: "bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus-visible:ring-blue-500",
-  secondary: "bg-violet-600 text-white hover:bg-violet-700 active:bg-violet-800 focus-visible:ring-violet-500",
-  outline: "border-2 border-blue-600 text-blue-600 bg-transparent hover:bg-blue-50 active:bg-blue-100 focus-visible:ring-blue-500",
-  ghost: "text-gray-700 bg-transparent hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-gray-400",
-  danger: "bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-500"
+  primary: "bg-primary text-white hover:bg-primary-strong active:bg-primary-strong focus-visible:ring-primary",
+  secondary: "bg-surface2 text-fg border border-line hover:border-primary hover:text-primary focus-visible:ring-primary",
+  outline: "border border-primary text-primary bg-transparent hover:bg-primary-weak active:bg-primary-weak focus-visible:ring-primary",
+  ghost: "bg-transparent text-muted hover:bg-surface2 hover:text-fg focus-visible:ring-primary",
+  danger: "bg-danger text-white hover:opacity-90 active:opacity-100 focus-visible:ring-danger"
 }, _e = {
-  sm: "h-8 px-3 text-sm gap-1.5",
-  md: "h-10 px-4 text-sm gap-2",
+  sm: "h-9 px-3.5 text-[13px] gap-1.5",
+  md: "h-10 px-[18px] text-sm gap-2",
   lg: "h-12 px-6 text-base gap-2"
 };
 function Ye({
@@ -2291,21 +2291,21 @@ function Ye({
   disabled: o,
   className: s,
   children: n,
-  ...a
+  ...i
 }) {
   return /* @__PURE__ */ A(
     "button",
     {
       className: x(
-        "inline-flex items-center justify-center rounded-lg font-medium transition-colors duration-150",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "inline-flex items-center justify-center rounded-pill font-bold leading-none transition-all duration-150",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface",
         "disabled:pointer-events-none disabled:opacity-50",
         Ue[e],
         _e[r],
         s
       ),
       disabled: o || t,
-      ...a,
+      ...i,
       children: [
         t && /* @__PURE__ */ A(
           "svg",
@@ -2344,22 +2344,22 @@ function Ye({
   );
 }
 const Fe = {
-  default: "bg-gray-100 text-gray-700",
-  success: "bg-green-100 text-green-700",
-  warning: "bg-amber-100 text-amber-700",
-  error: "bg-red-100 text-red-700",
-  info: "bg-blue-100 text-blue-700",
-  outline: "border border-gray-300 text-gray-600 bg-transparent"
+  default: "bg-surface2 text-muted border border-line",
+  info: "bg-primary-weak text-primary",
+  success: "bg-green-100 text-green-700 dark:bg-green-900/35 dark:text-green-300",
+  warning: "bg-amber-100 text-amber-700 dark:bg-amber-900/35 dark:text-amber-300",
+  error: "bg-red-100 text-red-700 dark:bg-red-900/35 dark:text-red-300",
+  outline: "border border-line text-muted bg-transparent"
 }, qe = {
   sm: "px-2 py-0.5 text-xs",
-  md: "px-2.5 py-1 text-sm"
+  md: "px-2.5 py-1 text-[13px]"
 };
 function De({ variant: e = "default", size: r = "md", children: t, className: o }) {
   return /* @__PURE__ */ c(
     "span",
     {
       className: x(
-        "inline-flex items-center gap-1 rounded-full font-medium",
+        "inline-flex items-center gap-1 rounded-badge font-bold leading-none",
         Fe[e],
         qe[r],
         o
@@ -2375,21 +2375,21 @@ const F = {
   lg: "p-8"
 };
 function er({ title: e, description: r, footer: t, children: o, className: s, padding: n = "md" }) {
-  const a = n !== "none";
+  const i = n !== "none";
   return /* @__PURE__ */ A(
     "div",
     {
       className: x(
-        "rounded-xl border border-gray-200 bg-white shadow-sm",
+        "rounded-card border border-line bg-surface text-fg shadow-card",
         s
       ),
       children: [
-        (e || r) && /* @__PURE__ */ A("div", { className: x("border-b border-gray-100", F[n]), children: [
-          e && /* @__PURE__ */ c("h3", { className: "text-base font-semibold text-gray-900", children: e }),
-          r && /* @__PURE__ */ c("p", { className: x("text-sm text-gray-500", e && "mt-1"), children: r })
+        (e || r) && /* @__PURE__ */ A("div", { className: x("border-b border-line2", F[n]), children: [
+          e && /* @__PURE__ */ c("h3", { className: "text-base font-bold tracking-[-0.2px] text-fg", children: e }),
+          r && /* @__PURE__ */ c("p", { className: x("text-sm text-muted", e && "mt-1"), children: r })
         ] }),
-        o && /* @__PURE__ */ c("div", { className: x(a && F[n]), children: o }),
-        t && /* @__PURE__ */ c("div", { className: x("border-t border-gray-100 bg-gray-50 rounded-b-xl", F[n]), children: t })
+        o && /* @__PURE__ */ c("div", { className: x(i && F[n]), children: o }),
+        t && /* @__PURE__ */ c("div", { className: x("rounded-b-card border-t border-line2 bg-surface2", F[n]), children: t })
       ]
     }
   );
@@ -2406,56 +2406,56 @@ function rr({
   inputSize: o = "md",
   leadingIcon: s,
   trailingIcon: n,
-  className: a,
-  id: l,
+  className: i,
+  id: a,
   ...d
 }) {
-  const g = l ?? (e == null ? void 0 : e.toLowerCase().replace(/\s+/g, "-")), f = !!t;
+  const g = a ?? (e == null ? void 0 : e.toLowerCase().replace(/\s+/g, "-")), f = !!t;
   return /* @__PURE__ */ A("div", { className: "flex flex-col gap-1.5", children: [
-    e && /* @__PURE__ */ A("label", { htmlFor: g, className: "text-sm font-medium text-gray-700", children: [
+    e && /* @__PURE__ */ A("label", { htmlFor: g, className: "text-[13px] font-bold text-fg", children: [
       e,
-      d.required && /* @__PURE__ */ c("span", { className: "ml-0.5 text-red-500", children: "*" })
+      d.required && /* @__PURE__ */ c("span", { className: "ml-0.5 text-danger", children: "*" })
     ] }),
     /* @__PURE__ */ A("div", { className: "relative flex items-center", children: [
-      s && /* @__PURE__ */ c("span", { className: "pointer-events-none absolute left-3 text-gray-400", children: s }),
+      s && /* @__PURE__ */ c("span", { className: "pointer-events-none absolute left-3 text-faint", children: s }),
       /* @__PURE__ */ c(
         "input",
         {
           id: g,
           className: x(
-            "w-full rounded-lg border bg-white text-gray-900 transition-colors duration-150",
-            "placeholder:text-gray-400",
+            "w-full rounded-field border bg-surface text-fg transition-colors duration-150",
+            "placeholder:text-faint",
             "focus:outline-none focus:ring-2 focus:ring-offset-0",
-            "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
-            f ? "border-red-400 focus:border-red-400 focus:ring-red-200" : "border-gray-300 focus:border-blue-500 focus:ring-blue-200",
+            "disabled:cursor-not-allowed disabled:bg-surface2 disabled:text-muted",
+            f ? "border-danger focus:border-danger focus:ring-red-200" : "border-line focus:border-primary focus:ring-primary-weak",
             He[o],
             s && "pl-10",
             n && "pr-10",
-            a
+            i
           ),
           ...d
         }
       ),
-      n && /* @__PURE__ */ c("span", { className: "pointer-events-none absolute right-3 text-gray-400", children: n })
+      n && /* @__PURE__ */ c("span", { className: "pointer-events-none absolute right-3 text-faint", children: n })
     ] }),
-    (r || t) && /* @__PURE__ */ c("p", { className: x("text-xs", f ? "text-red-600" : "text-gray-500"), children: t ?? r })
+    (r || t) && /* @__PURE__ */ c("p", { className: x("text-xs", f ? "text-danger" : "text-muted"), children: t ?? r })
   ] });
 }
 const Je = {
   info: {
-    container: "bg-blue-50 border-blue-200 text-blue-900",
-    icon: /* @__PURE__ */ c("svg", { className: "h-5 w-5 text-blue-500 shrink-0", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ c("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z", clipRule: "evenodd" }) })
+    container: "bg-primary-weak border-line text-fg",
+    icon: /* @__PURE__ */ c("svg", { className: "h-5 w-5 text-primary shrink-0", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ c("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z", clipRule: "evenodd" }) })
   },
   success: {
-    container: "bg-green-50 border-green-200 text-green-900",
+    container: "bg-green-50 border-green-200 text-green-900 dark:bg-green-950/40 dark:border-green-900 dark:text-green-200",
     icon: /* @__PURE__ */ c("svg", { className: "h-5 w-5 text-green-500 shrink-0", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ c("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z", clipRule: "evenodd" }) })
   },
   warning: {
-    container: "bg-amber-50 border-amber-200 text-amber-900",
+    container: "bg-amber-50 border-amber-200 text-amber-900 dark:bg-amber-950/40 dark:border-amber-900 dark:text-amber-200",
     icon: /* @__PURE__ */ c("svg", { className: "h-5 w-5 text-amber-500 shrink-0", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ c("path", { fillRule: "evenodd", d: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z", clipRule: "evenodd" }) })
   },
   error: {
-    container: "bg-red-50 border-red-200 text-red-900",
+    container: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950/40 dark:border-red-900 dark:text-red-200",
     icon: /* @__PURE__ */ c("svg", { className: "h-5 w-5 text-red-500 shrink-0", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ c("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z", clipRule: "evenodd" }) })
   }
 };
@@ -2465,15 +2465,11 @@ function tr({ variant: e = "info", title: r, children: t, className: o, onDismis
     "div",
     {
       role: "alert",
-      className: x(
-        "flex gap-3 rounded-lg border p-4",
-        n.container,
-        o
-      ),
+      className: x("flex gap-3 rounded-field border p-4", n.container, o),
       children: [
         n.icon,
         /* @__PURE__ */ A("div", { className: "flex-1 min-w-0", children: [
-          r && /* @__PURE__ */ c("p", { className: "font-semibold text-sm", children: r }),
+          r && /* @__PURE__ */ c("p", { className: "font-bold text-sm", children: r }),
           /* @__PURE__ */ c("div", { className: x("text-sm", r && "mt-1"), children: t })
         ] }),
         s && /* @__PURE__ */ c(
@@ -2516,7 +2512,7 @@ function Ke(e) {
   return te[r];
 }
 function or({ src: e, alt: r, name: t, size: o = "md", className: s }) {
-  const { container: n, text: a } = Xe[o], l = t ? Ze(t) : "?", d = t ? Ke(t) : "bg-gray-400";
+  const { container: n, text: i } = Xe[o], a = t ? Ze(t) : "?", d = t ? Ke(t) : "bg-faint";
   return /* @__PURE__ */ c(
     "span",
     {
@@ -2528,9 +2524,9 @@ function or({ src: e, alt: r, name: t, size: o = "md", className: s }) {
       children: e ? /* @__PURE__ */ c("img", { src: e, alt: r ?? t ?? "Avatar", className: "h-full w-full object-cover" }) : /* @__PURE__ */ c(
         "span",
         {
-          className: x("flex h-full w-full items-center justify-center font-semibold text-white", d, a),
+          className: x("flex h-full w-full items-center justify-center font-semibold text-white", d, i),
           "aria-label": t ?? "User avatar",
-          children: l
+          children: a
         }
       )
     }