@sudobility/building_blocks 0.0.31 → 0.0.32

package/dist/index.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { useState, useRef, useMemo, useCallback, useEffect, createContext } from "react";
-import { TopbarProvider, Topbar, TopbarLeft, TopbarNavigation, TopbarLogo, Logo, TopbarCenter, TopbarRight, TopbarActions, TopbarMobileContent, BreadcrumbSection, Footer, FooterCompact, FooterCompactLeft, FooterVersion, FooterCopyright, FooterCompactRight, FooterGrid, FooterLinkSection, FooterLink, FooterBottom, FooterBrand, FooterSocialLinks, LayoutProvider, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Card, CardContent, Button } from "@sudobility/components";
+import React, { useState, useRef, useMemo, useCallback, useEffect } from "react";
+import { TopbarProvider, Topbar, TopbarLeft, TopbarNavigation, TopbarLogo, Logo, TopbarCenter, TopbarRight, TopbarActions, TopbarMobileContent, BreadcrumbSection, Footer, FooterCompact, FooterCompactLeft, FooterVersion, FooterCopyright, FooterCompactRight, FooterGrid, FooterLinkSection, FooterLink, FooterBottom, FooterBrand, FooterSocialLinks, LayoutProvider, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@sudobility/components";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { ChevronDownIcon, CalendarDaysIcon, PaintBrushIcon, ChevronLeftIcon, LanguageIcon, ChevronRightIcon, EnvelopeIcon, DocumentTextIcon, CogIcon, HomeIcon } from "@heroicons/react/24/outline";
 import { GRADIENT_CLASSES, textVariants } from "@sudobility/design";
 import { cva } from "class-variance-authority";
+import { SubscriptionLayout, SubscriptionTile, SegmentedControl } from "@sudobility/subscription-components";
 import { createUserWithEmailAndPassword, signInWithEmailAndPassword, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -44,7 +45,7 @@ const LanguageSelector = ({
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
   const sortedLanguages = useMemo(
-    () => [...languages].sort((a, b2) => a.name.localeCompare(b2.name)),
+    () => [...languages].sort((a, b) => a.name.localeCompare(b.name)),
     [languages]
   );
   const currentLang = useMemo(
@@ -1106,3171 +1107,6 @@ const GlobalSettingsPage = ({
     ] }) })
   ] });
 };
-function Ie(e) {
-  var o, r, t = "";
-  if (typeof e == "string" || typeof e == "number") t += e;
-  else if (typeof e == "object") if (Array.isArray(e)) {
-    var n = e.length;
-    for (o = 0; o < n; o++) e[o] && (r = Ie(e[o])) && (t && (t += " "), t += r);
-  } else for (r in e) e[r] && (t && (t += " "), t += r);
-  return t;
-}
-function Xe() {
-  for (var e, o, r = 0, t = "", n = arguments.length; r < n; r++) (e = arguments[r]) && (o = Ie(e)) && (t && (t += " "), t += o);
-  return t;
-}
-const Je = (e, o) => {
-  const r = new Array(e.length + o.length);
-  for (let t = 0; t < e.length; t++)
-    r[t] = e[t];
-  for (let t = 0; t < o.length; t++)
-    r[e.length + t] = o[t];
-  return r;
-}, He = (e, o) => ({
-  classGroupId: e,
-  validator: o
-}), Re = (e = /* @__PURE__ */ new Map(), o = null, r) => ({
-  nextPart: e,
-  validators: o,
-  classGroupId: r
-}), me = "-", Ce = [], Qe = "arbitrary..", Ze = (e) => {
-  const o = tt(e), {
-    conflictingClassGroups: r,
-    conflictingClassGroupModifiers: t
-  } = e;
-  return {
-    getClassGroupId: (a) => {
-      if (a.startsWith("[") && a.endsWith("]"))
-        return et(a);
-      const p = a.split(me), c = p[0] === "" && p.length > 1 ? 1 : 0;
-      return Me(p, c, o);
-    },
-    getConflictingClassGroupIds: (a, p) => {
-      if (p) {
-        const c = t[a], h = r[a];
-        return c ? h ? Je(h, c) : c : h || Ce;
-      }
-      return r[a] || Ce;
-    }
-  };
-}, Me = (e, o, r) => {
-  if (e.length - o === 0)
-    return r.classGroupId;
-  const n = e[o], s = r.nextPart.get(n);
-  if (s) {
-    const h = Me(e, o + 1, s);
-    if (h) return h;
-  }
-  const a = r.validators;
-  if (a === null)
-    return;
-  const p = o === 0 ? e.join(me) : e.slice(o).join(me), c = a.length;
-  for (let h = 0; h < c; h++) {
-    const x = a[h];
-    if (x.validator(p))
-      return x.classGroupId;
-  }
-}, et = (e) => e.slice(1, -1).indexOf(":") === -1 ? void 0 : (() => {
-  const o = e.slice(1, -1), r = o.indexOf(":"), t = o.slice(0, r);
-  return t ? Qe + t : void 0;
-})(), tt = (e) => {
-  const {
-    theme: o,
-    classGroups: r
-  } = e;
-  return rt(r, o);
-}, rt = (e, o) => {
-  const r = Re();
-  for (const t in e) {
-    const n = e[t];
-    we(n, r, t, o);
-  }
-  return r;
-}, we = (e, o, r, t) => {
-  const n = e.length;
-  for (let s = 0; s < n; s++) {
-    const a = e[s];
-    ot(a, o, r, t);
-  }
-}, ot = (e, o, r, t) => {
-  if (typeof e == "string") {
-    nt(e, o, r);
-    return;
-  }
-  if (typeof e == "function") {
-    st(e, o, r, t);
-    return;
-  }
-  at(e, o, r, t);
-}, nt = (e, o, r) => {
-  const t = e === "" ? o : De(o, e);
-  t.classGroupId = r;
-}, st = (e, o, r, t) => {
-  if (it(e)) {
-    we(e(t), o, r, t);
-    return;
-  }
-  o.validators === null && (o.validators = []), o.validators.push(He(r, e));
-}, at = (e, o, r, t) => {
-  const n = Object.entries(e), s = n.length;
-  for (let a = 0; a < s; a++) {
-    const [p, c] = n[a];
-    we(c, De(o, p), r, t);
-  }
-}, De = (e, o) => {
-  let r = e;
-  const t = o.split(me), n = t.length;
-  for (let s = 0; s < n; s++) {
-    const a = t[s];
-    let p = r.nextPart.get(a);
-    p || (p = Re(), r.nextPart.set(a, p)), r = p;
-  }
-  return r;
-}, it = (e) => "isThemeGetter" in e && e.isThemeGetter === true, lt = (e) => {
-  if (e < 1)
-    return {
-      get: () => {
-      },
-      set: () => {
-      }
-    };
-  let o = 0, r = /* @__PURE__ */ Object.create(null), t = /* @__PURE__ */ Object.create(null);
-  const n = (s, a) => {
-    r[s] = a, o++, o > e && (o = 0, t = r, r = /* @__PURE__ */ Object.create(null));
-  };
-  return {
-    get(s) {
-      let a = r[s];
-      if (a !== void 0)
-        return a;
-      if ((a = t[s]) !== void 0)
-        return n(s, a), a;
-    },
-    set(s, a) {
-      s in r ? r[s] = a : n(s, a);
-    }
-  };
-}, xe = "!", Pe = ":", ct = [], ze = (e, o, r, t, n) => ({
-  modifiers: e,
-  hasImportantModifier: o,
-  baseClassName: r,
-  maybePostfixModifierPosition: t,
-  isExternal: n
-}), dt = (e) => {
-  const {
-    prefix: o,
-    experimentalParseClassName: r
-  } = e;
-  let t = (n) => {
-    const s = [];
-    let a = 0, p = 0, c = 0, h;
-    const x = n.length;
-    for (let z = 0; z < x; z++) {
-      const k = n[z];
-      if (a === 0 && p === 0) {
-        if (k === Pe) {
-          s.push(n.slice(c, z)), c = z + 1;
-          continue;
-        }
-        if (k === "/") {
-          h = z;
-          continue;
-        }
-      }
-      k === "[" ? a++ : k === "]" ? a-- : k === "(" ? p++ : k === ")" && p--;
-    }
-    const S = s.length === 0 ? n : n.slice(c);
-    let w = S, y = false;
-    S.endsWith(xe) ? (w = S.slice(0, -1), y = true) : (
-      /**
-       * In Tailwind CSS v3 the important modifier was at the start of the base class name. This is still supported for legacy reasons.
-       * @see https://github.com/dcastil/tailwind-merge/issues/513#issuecomment-2614029864
-       */
-      S.startsWith(xe) && (w = S.slice(1), y = true)
-    );
-    const j = h && h > c ? h - c : void 0;
-    return ze(s, y, w, j);
-  };
-  if (o) {
-    const n = o + Pe, s = t;
-    t = (a) => a.startsWith(n) ? s(a.slice(n.length)) : ze(ct, false, a, void 0, true);
-  }
-  if (r) {
-    const n = t;
-    t = (s) => r({
-      className: s,
-      parseClassName: n
-    });
-  }
-  return t;
-}, mt = (e) => {
-  const o = /* @__PURE__ */ new Map();
-  return e.orderSensitiveModifiers.forEach((r, t) => {
-    o.set(r, 1e6 + t);
-  }), (r) => {
-    const t = [];
-    let n = [];
-    for (let s = 0; s < r.length; s++) {
-      const a = r[s], p = a[0] === "[", c = o.has(a);
-      p || c ? (n.length > 0 && (n.sort(), t.push(...n), n = []), t.push(a)) : n.push(a);
-    }
-    return n.length > 0 && (n.sort(), t.push(...n)), t;
-  };
-}, ut = (e) => ({
-  cache: lt(e.cacheSize),
-  parseClassName: dt(e),
-  sortModifiers: mt(e),
-  ...Ze(e)
-}), ft = /\s+/, pt = (e, o) => {
-  const {
-    parseClassName: r,
-    getClassGroupId: t,
-    getConflictingClassGroupIds: n,
-    sortModifiers: s
-  } = o, a = [], p = e.trim().split(ft);
-  let c = "";
-  for (let h = p.length - 1; h >= 0; h -= 1) {
-    const x = p[h], {
-      isExternal: S,
-      modifiers: w,
-      hasImportantModifier: y,
-      baseClassName: j,
-      maybePostfixModifierPosition: z
-    } = r(x);
-    if (S) {
-      c = x + (c.length > 0 ? " " + c : c);
-      continue;
-    }
-    let k = !!z, D = t(k ? j.substring(0, z) : j);
-    if (!D) {
-      if (!k) {
-        c = x + (c.length > 0 ? " " + c : c);
-        continue;
-      }
-      if (D = t(j), !D) {
-        c = x + (c.length > 0 ? " " + c : c);
-        continue;
-      }
-      k = false;
-    }
-    const F = w.length === 0 ? "" : w.length === 1 ? w[0] : s(w).join(":"), M = y ? F + xe : F, L = M + D;
-    if (a.indexOf(L) > -1)
-      continue;
-    a.push(L);
-    const N = n(D, k);
-    for (let C = 0; C < N.length; ++C) {
-      const E = N[C];
-      a.push(M + E);
-    }
-    c = x + (c.length > 0 ? " " + c : c);
-  }
-  return c;
-}, gt = (...e) => {
-  let o = 0, r, t, n = "";
-  for (; o < e.length; )
-    (r = e[o++]) && (t = Ee(r)) && (n && (n += " "), n += t);
-  return n;
-}, Ee = (e) => {
-  if (typeof e == "string")
-    return e;
-  let o, r = "";
-  for (let t = 0; t < e.length; t++)
-    e[t] && (o = Ee(e[t])) && (r && (r += " "), r += o);
-  return r;
-}, bt = (e, ...o) => {
-  let r, t, n, s;
-  const a = (c) => {
-    const h = o.reduce((x, S) => S(x), e());
-    return r = ut(h), t = r.cache.get, n = r.cache.set, s = p, p(c);
-  }, p = (c) => {
-    const h = t(c);
-    if (h)
-      return h;
-    const x = pt(c, r);
-    return n(c, x), x;
-  };
-  return s = a, (...c) => s(gt(...c));
-}, ht = [], A = (e) => {
-  const o = (r) => r[e] || ht;
-  return o.isThemeGetter = true, o;
-}, Oe = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, Te = /^\((?:(\w[\w-]*):)?(.+)\)$/i, xt = /^\d+\/\d+$/, wt = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, yt = /\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$/, kt = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, vt = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Ct = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, Z = (e) => xt.test(e), b = (e) => !!e && !Number.isNaN(Number(e)), q = (e) => !!e && Number.isInteger(Number(e)), fe = (e) => e.endsWith("%") && b(e.slice(0, -1)), B = (e) => wt.test(e), Pt = () => true, zt = (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.
-  yt.test(e) && !kt.test(e)
-), Ge = () => false, Nt = (e) => vt.test(e), At = (e) => Ct.test(e), St = (e) => !i(e) && !l(e), It = (e) => ee(e, _e, Ge), i = (e) => Oe.test(e), X = (e) => ee(e, Fe, zt), pe = (e) => ee(e, Ot, b), Ne = (e) => ee(e, je, Ge), Rt = (e) => ee(e, Le, At), ce = (e) => ee(e, Ve, Nt), l = (e) => Te.test(e), ne = (e) => te(e, Fe), Mt = (e) => te(e, Tt), Ae = (e) => te(e, je), Dt = (e) => te(e, _e), Et = (e) => te(e, Le), de = (e) => te(e, Ve, true), ee = (e, o, r) => {
-  const t = Oe.exec(e);
-  return t ? t[1] ? o(t[1]) : r(t[2]) : false;
-}, te = (e, o, r = false) => {
-  const t = Te.exec(e);
-  return t ? t[1] ? o(t[1]) : r : false;
-}, je = (e) => e === "position" || e === "percentage", Le = (e) => e === "image" || e === "url", _e = (e) => e === "length" || e === "size" || e === "bg-size", Fe = (e) => e === "length", Ot = (e) => e === "number", Tt = (e) => e === "family-name", Ve = (e) => e === "shadow", Gt = () => {
-  const e = A("color"), o = A("font"), r = A("text"), t = A("font-weight"), n = A("tracking"), s = A("leading"), a = A("breakpoint"), p = A("container"), c = A("spacing"), h = A("radius"), x = A("shadow"), S = A("inset-shadow"), w = A("text-shadow"), y = A("drop-shadow"), j = A("blur"), z = A("perspective"), k = A("aspect"), D = A("ease"), F = A("animate"), M = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], L = () => [
-    "center",
-    "top",
-    "bottom",
-    "left",
-    "right",
-    "top-left",
-    // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
-    "left-top",
-    "top-right",
-    // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
-    "right-top",
-    "bottom-right",
-    // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
-    "right-bottom",
-    "bottom-left",
-    // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
-    "left-bottom"
-  ], N = () => [...L(), l, i], C = () => ["auto", "hidden", "clip", "visible", "scroll"], E = () => ["auto", "contain", "none"], m = () => [l, i, c], V = () => [Z, "full", "auto", ...m()], J = () => [q, "none", "subgrid", l, i], H = () => ["auto", {
-    span: ["full", q, l, i]
-  }, q, l, i], I = () => [q, "auto", l, i], U = () => ["auto", "min", "max", "fr", l, i], re = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], u = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], f = () => ["auto", ...m()], v = () => [Z, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...m()], d = () => [e, l, i], O = () => [...L(), Ae, Ne, {
-    position: [l, i]
-  }], W = () => ["no-repeat", {
-    repeat: ["", "x", "y", "space", "round"]
-  }], Q = () => ["auto", "cover", "contain", Dt, It, {
-    size: [l, i]
-  }], oe = () => [fe, ne, X], _ = () => [
-    // Deprecated since Tailwind CSS v4.0.0
-    "",
-    "none",
-    "full",
-    h,
-    l,
-    i
-  ], $ = () => ["", b, ne, X], se = () => ["solid", "dashed", "dotted", "double"], ye = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], R = () => [b, fe, Ae, Ne], ke = () => [
-    // Deprecated since Tailwind CSS v4.0.0
-    "",
-    "none",
-    j,
-    l,
-    i
-  ], ae = () => ["none", b, l, i], ie = () => ["none", b, l, i], ue = () => [b, l, i], le = () => [Z, "full", ...m()];
-  return {
-    cacheSize: 500,
-    theme: {
-      animate: ["spin", "ping", "pulse", "bounce"],
-      aspect: ["video"],
-      blur: [B],
-      breakpoint: [B],
-      color: [Pt],
-      container: [B],
-      "drop-shadow": [B],
-      ease: ["in", "out", "in-out"],
-      font: [St],
-      "font-weight": ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
-      "inset-shadow": [B],
-      leading: ["none", "tight", "snug", "normal", "relaxed", "loose"],
-      perspective: ["dramatic", "near", "normal", "midrange", "distant", "none"],
-      radius: [B],
-      shadow: [B],
-      spacing: ["px", b],
-      text: [B],
-      "text-shadow": [B],
-      tracking: ["tighter", "tight", "normal", "wide", "wider", "widest"]
-    },
-    classGroups: {
-      // --------------
-      // --- Layout ---
-      // --------------
-      /**
-       * Aspect Ratio
-       * @see https://tailwindcss.com/docs/aspect-ratio
-       */
-      aspect: [{
-        aspect: ["auto", "square", Z, i, l, k]
-      }],
-      /**
-       * Container
-       * @see https://tailwindcss.com/docs/container
-       * @deprecated since Tailwind CSS v4.0.0
-       */
-      container: ["container"],
-      /**
-       * Columns
-       * @see https://tailwindcss.com/docs/columns
-       */
-      columns: [{
-        columns: [b, i, l, p]
-      }],
-      /**
-       * Break After
-       * @see https://tailwindcss.com/docs/break-after
-       */
-      "break-after": [{
-        "break-after": M()
-      }],
-      /**
-       * Break Before
-       * @see https://tailwindcss.com/docs/break-before
-       */
-      "break-before": [{
-        "break-before": M()
-      }],
-      /**
-       * Break Inside
-       * @see https://tailwindcss.com/docs/break-inside
-       */
-      "break-inside": [{
-        "break-inside": ["auto", "avoid", "avoid-page", "avoid-column"]
-      }],
-      /**
-       * Box Decoration Break
-       * @see https://tailwindcss.com/docs/box-decoration-break
-       */
-      "box-decoration": [{
-        "box-decoration": ["slice", "clone"]
-      }],
-      /**
-       * Box Sizing
-       * @see https://tailwindcss.com/docs/box-sizing
-       */
-      box: [{
-        box: ["border", "content"]
-      }],
-      /**
-       * Display
-       * @see https://tailwindcss.com/docs/display
-       */
-      display: ["block", "inline-block", "inline", "flex", "inline-flex", "table", "inline-table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row-group", "table-row", "flow-root", "grid", "inline-grid", "contents", "list-item", "hidden"],
-      /**
-       * Screen Reader Only
-       * @see https://tailwindcss.com/docs/display#screen-reader-only
-       */
-      sr: ["sr-only", "not-sr-only"],
-      /**
-       * Floats
-       * @see https://tailwindcss.com/docs/float
-       */
-      float: [{
-        float: ["right", "left", "none", "start", "end"]
-      }],
-      /**
-       * Clear
-       * @see https://tailwindcss.com/docs/clear
-       */
-      clear: [{
-        clear: ["left", "right", "both", "none", "start", "end"]
-      }],
-      /**
-       * Isolation
-       * @see https://tailwindcss.com/docs/isolation
-       */
-      isolation: ["isolate", "isolation-auto"],
-      /**
-       * Object Fit
-       * @see https://tailwindcss.com/docs/object-fit
-       */
-      "object-fit": [{
-        object: ["contain", "cover", "fill", "none", "scale-down"]
-      }],
-      /**
-       * Object Position
-       * @see https://tailwindcss.com/docs/object-position
-       */
-      "object-position": [{
-        object: N()
-      }],
-      /**
-       * Overflow
-       * @see https://tailwindcss.com/docs/overflow
-       */
-      overflow: [{
-        overflow: C()
-      }],
-      /**
-       * Overflow X
-       * @see https://tailwindcss.com/docs/overflow
-       */
-      "overflow-x": [{
-        "overflow-x": C()
-      }],
-      /**
-       * Overflow Y
-       * @see https://tailwindcss.com/docs/overflow
-       */
-      "overflow-y": [{
-        "overflow-y": C()
-      }],
-      /**
-       * Overscroll Behavior
-       * @see https://tailwindcss.com/docs/overscroll-behavior
-       */
-      overscroll: [{
-        overscroll: E()
-      }],
-      /**
-       * Overscroll Behavior X
-       * @see https://tailwindcss.com/docs/overscroll-behavior
-       */
-      "overscroll-x": [{
-        "overscroll-x": E()
-      }],
-      /**
-       * Overscroll Behavior Y
-       * @see https://tailwindcss.com/docs/overscroll-behavior
-       */
-      "overscroll-y": [{
-        "overscroll-y": E()
-      }],
-      /**
-       * Position
-       * @see https://tailwindcss.com/docs/position
-       */
-      position: ["static", "fixed", "absolute", "relative", "sticky"],
-      /**
-       * Top / Right / Bottom / Left
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       */
-      inset: [{
-        inset: V()
-      }],
-      /**
-       * Right / Left
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       */
-      "inset-x": [{
-        "inset-x": V()
-      }],
-      /**
-       * Top / Bottom
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       */
-      "inset-y": [{
-        "inset-y": V()
-      }],
-      /**
-       * Start
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       */
-      start: [{
-        start: V()
-      }],
-      /**
-       * End
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       */
-      end: [{
-        end: V()
-      }],
-      /**
-       * Top
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       */
-      top: [{
-        top: V()
-      }],
-      /**
-       * Right
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       */
-      right: [{
-        right: V()
-      }],
-      /**
-       * Bottom
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       */
-      bottom: [{
-        bottom: V()
-      }],
-      /**
-       * Left
-       * @see https://tailwindcss.com/docs/top-right-bottom-left
-       */
-      left: [{
-        left: V()
-      }],
-      /**
-       * Visibility
-       * @see https://tailwindcss.com/docs/visibility
-       */
-      visibility: ["visible", "invisible", "collapse"],
-      /**
-       * Z-Index
-       * @see https://tailwindcss.com/docs/z-index
-       */
-      z: [{
-        z: [q, "auto", l, i]
-      }],
-      // ------------------------
-      // --- Flexbox and Grid ---
-      // ------------------------
-      /**
-       * Flex Basis
-       * @see https://tailwindcss.com/docs/flex-basis
-       */
-      basis: [{
-        basis: [Z, "full", "auto", p, ...m()]
-      }],
-      /**
-       * Flex Direction
-       * @see https://tailwindcss.com/docs/flex-direction
-       */
-      "flex-direction": [{
-        flex: ["row", "row-reverse", "col", "col-reverse"]
-      }],
-      /**
-       * Flex Wrap
-       * @see https://tailwindcss.com/docs/flex-wrap
-       */
-      "flex-wrap": [{
-        flex: ["nowrap", "wrap", "wrap-reverse"]
-      }],
-      /**
-       * Flex
-       * @see https://tailwindcss.com/docs/flex
-       */
-      flex: [{
-        flex: [b, Z, "auto", "initial", "none", i]
-      }],
-      /**
-       * Flex Grow
-       * @see https://tailwindcss.com/docs/flex-grow
-       */
-      grow: [{
-        grow: ["", b, l, i]
-      }],
-      /**
-       * Flex Shrink
-       * @see https://tailwindcss.com/docs/flex-shrink
-       */
-      shrink: [{
-        shrink: ["", b, l, i]
-      }],
-      /**
-       * Order
-       * @see https://tailwindcss.com/docs/order
-       */
-      order: [{
-        order: [q, "first", "last", "none", l, i]
-      }],
-      /**
-       * Grid Template Columns
-       * @see https://tailwindcss.com/docs/grid-template-columns
-       */
-      "grid-cols": [{
-        "grid-cols": J()
-      }],
-      /**
-       * Grid Column Start / End
-       * @see https://tailwindcss.com/docs/grid-column
-       */
-      "col-start-end": [{
-        col: H()
-      }],
-      /**
-       * Grid Column Start
-       * @see https://tailwindcss.com/docs/grid-column
-       */
-      "col-start": [{
-        "col-start": I()
-      }],
-      /**
-       * Grid Column End
-       * @see https://tailwindcss.com/docs/grid-column
-       */
-      "col-end": [{
-        "col-end": I()
-      }],
-      /**
-       * Grid Template Rows
-       * @see https://tailwindcss.com/docs/grid-template-rows
-       */
-      "grid-rows": [{
-        "grid-rows": J()
-      }],
-      /**
-       * Grid Row Start / End
-       * @see https://tailwindcss.com/docs/grid-row
-       */
-      "row-start-end": [{
-        row: H()
-      }],
-      /**
-       * Grid Row Start
-       * @see https://tailwindcss.com/docs/grid-row
-       */
-      "row-start": [{
-        "row-start": I()
-      }],
-      /**
-       * Grid Row End
-       * @see https://tailwindcss.com/docs/grid-row
-       */
-      "row-end": [{
-        "row-end": I()
-      }],
-      /**
-       * Grid Auto Flow
-       * @see https://tailwindcss.com/docs/grid-auto-flow
-       */
-      "grid-flow": [{
-        "grid-flow": ["row", "col", "dense", "row-dense", "col-dense"]
-      }],
-      /**
-       * Grid Auto Columns
-       * @see https://tailwindcss.com/docs/grid-auto-columns
-       */
-      "auto-cols": [{
-        "auto-cols": U()
-      }],
-      /**
-       * Grid Auto Rows
-       * @see https://tailwindcss.com/docs/grid-auto-rows
-       */
-      "auto-rows": [{
-        "auto-rows": U()
-      }],
-      /**
-       * Gap
-       * @see https://tailwindcss.com/docs/gap
-       */
-      gap: [{
-        gap: m()
-      }],
-      /**
-       * Gap X
-       * @see https://tailwindcss.com/docs/gap
-       */
-      "gap-x": [{
-        "gap-x": m()
-      }],
-      /**
-       * Gap Y
-       * @see https://tailwindcss.com/docs/gap
-       */
-      "gap-y": [{
-        "gap-y": m()
-      }],
-      /**
-       * Justify Content
-       * @see https://tailwindcss.com/docs/justify-content
-       */
-      "justify-content": [{
-        justify: [...re(), "normal"]
-      }],
-      /**
-       * Justify Items
-       * @see https://tailwindcss.com/docs/justify-items
-       */
-      "justify-items": [{
-        "justify-items": [...u(), "normal"]
-      }],
-      /**
-       * Justify Self
-       * @see https://tailwindcss.com/docs/justify-self
-       */
-      "justify-self": [{
-        "justify-self": ["auto", ...u()]
-      }],
-      /**
-       * Align Content
-       * @see https://tailwindcss.com/docs/align-content
-       */
-      "align-content": [{
-        content: ["normal", ...re()]
-      }],
-      /**
-       * Align Items
-       * @see https://tailwindcss.com/docs/align-items
-       */
-      "align-items": [{
-        items: [...u(), {
-          baseline: ["", "last"]
-        }]
-      }],
-      /**
-       * Align Self
-       * @see https://tailwindcss.com/docs/align-self
-       */
-      "align-self": [{
-        self: ["auto", ...u(), {
-          baseline: ["", "last"]
-        }]
-      }],
-      /**
-       * Place Content
-       * @see https://tailwindcss.com/docs/place-content
-       */
-      "place-content": [{
-        "place-content": re()
-      }],
-      /**
-       * Place Items
-       * @see https://tailwindcss.com/docs/place-items
-       */
-      "place-items": [{
-        "place-items": [...u(), "baseline"]
-      }],
-      /**
-       * Place Self
-       * @see https://tailwindcss.com/docs/place-self
-       */
-      "place-self": [{
-        "place-self": ["auto", ...u()]
-      }],
-      // Spacing
-      /**
-       * Padding
-       * @see https://tailwindcss.com/docs/padding
-       */
-      p: [{
-        p: m()
-      }],
-      /**
-       * Padding X
-       * @see https://tailwindcss.com/docs/padding
-       */
-      px: [{
-        px: m()
-      }],
-      /**
-       * Padding Y
-       * @see https://tailwindcss.com/docs/padding
-       */
-      py: [{
-        py: m()
-      }],
-      /**
-       * Padding Start
-       * @see https://tailwindcss.com/docs/padding
-       */
-      ps: [{
-        ps: m()
-      }],
-      /**
-       * Padding End
-       * @see https://tailwindcss.com/docs/padding
-       */
-      pe: [{
-        pe: m()
-      }],
-      /**
-       * Padding Top
-       * @see https://tailwindcss.com/docs/padding
-       */
-      pt: [{
-        pt: m()
-      }],
-      /**
-       * Padding Right
-       * @see https://tailwindcss.com/docs/padding
-       */
-      pr: [{
-        pr: m()
-      }],
-      /**
-       * Padding Bottom
-       * @see https://tailwindcss.com/docs/padding
-       */
-      pb: [{
-        pb: m()
-      }],
-      /**
-       * Padding Left
-       * @see https://tailwindcss.com/docs/padding
-       */
-      pl: [{
-        pl: m()
-      }],
-      /**
-       * Margin
-       * @see https://tailwindcss.com/docs/margin
-       */
-      m: [{
-        m: f()
-      }],
-      /**
-       * Margin X
-       * @see https://tailwindcss.com/docs/margin
-       */
-      mx: [{
-        mx: f()
-      }],
-      /**
-       * Margin Y
-       * @see https://tailwindcss.com/docs/margin
-       */
-      my: [{
-        my: f()
-      }],
-      /**
-       * Margin Start
-       * @see https://tailwindcss.com/docs/margin
-       */
-      ms: [{
-        ms: f()
-      }],
-      /**
-       * Margin End
-       * @see https://tailwindcss.com/docs/margin
-       */
-      me: [{
-        me: f()
-      }],
-      /**
-       * Margin Top
-       * @see https://tailwindcss.com/docs/margin
-       */
-      mt: [{
-        mt: f()
-      }],
-      /**
-       * Margin Right
-       * @see https://tailwindcss.com/docs/margin
-       */
-      mr: [{
-        mr: f()
-      }],
-      /**
-       * Margin Bottom
-       * @see https://tailwindcss.com/docs/margin
-       */
-      mb: [{
-        mb: f()
-      }],
-      /**
-       * Margin Left
-       * @see https://tailwindcss.com/docs/margin
-       */
-      ml: [{
-        ml: f()
-      }],
-      /**
-       * Space Between X
-       * @see https://tailwindcss.com/docs/margin#adding-space-between-children
-       */
-      "space-x": [{
-        "space-x": m()
-      }],
-      /**
-       * Space Between X Reverse
-       * @see https://tailwindcss.com/docs/margin#adding-space-between-children
-       */
-      "space-x-reverse": ["space-x-reverse"],
-      /**
-       * Space Between Y
-       * @see https://tailwindcss.com/docs/margin#adding-space-between-children
-       */
-      "space-y": [{
-        "space-y": m()
-      }],
-      /**
-       * Space Between Y Reverse
-       * @see https://tailwindcss.com/docs/margin#adding-space-between-children
-       */
-      "space-y-reverse": ["space-y-reverse"],
-      // --------------
-      // --- Sizing ---
-      // --------------
-      /**
-       * Size
-       * @see https://tailwindcss.com/docs/width#setting-both-width-and-height
-       */
-      size: [{
-        size: v()
-      }],
-      /**
-       * Width
-       * @see https://tailwindcss.com/docs/width
-       */
-      w: [{
-        w: [p, "screen", ...v()]
-      }],
-      /**
-       * Min-Width
-       * @see https://tailwindcss.com/docs/min-width
-       */
-      "min-w": [{
-        "min-w": [
-          p,
-          "screen",
-          /** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
-          "none",
-          ...v()
-        ]
-      }],
-      /**
-       * Max-Width
-       * @see https://tailwindcss.com/docs/max-width
-       */
-      "max-w": [{
-        "max-w": [
-          p,
-          "screen",
-          "none",
-          /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
-          "prose",
-          /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
-          {
-            screen: [a]
-          },
-          ...v()
-        ]
-      }],
-      /**
-       * Height
-       * @see https://tailwindcss.com/docs/height
-       */
-      h: [{
-        h: ["screen", "lh", ...v()]
-      }],
-      /**
-       * Min-Height
-       * @see https://tailwindcss.com/docs/min-height
-       */
-      "min-h": [{
-        "min-h": ["screen", "lh", "none", ...v()]
-      }],
-      /**
-       * Max-Height
-       * @see https://tailwindcss.com/docs/max-height
-       */
-      "max-h": [{
-        "max-h": ["screen", "lh", ...v()]
-      }],
-      // ------------------
-      // --- Typography ---
-      // ------------------
-      /**
-       * Font Size
-       * @see https://tailwindcss.com/docs/font-size
-       */
-      "font-size": [{
-        text: ["base", r, ne, X]
-      }],
-      /**
-       * Font Smoothing
-       * @see https://tailwindcss.com/docs/font-smoothing
-       */
-      "font-smoothing": ["antialiased", "subpixel-antialiased"],
-      /**
-       * Font Style
-       * @see https://tailwindcss.com/docs/font-style
-       */
-      "font-style": ["italic", "not-italic"],
-      /**
-       * Font Weight
-       * @see https://tailwindcss.com/docs/font-weight
-       */
-      "font-weight": [{
-        font: [t, l, pe]
-      }],
-      /**
-       * Font Stretch
-       * @see https://tailwindcss.com/docs/font-stretch
-       */
-      "font-stretch": [{
-        "font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", fe, i]
-      }],
-      /**
-       * Font Family
-       * @see https://tailwindcss.com/docs/font-family
-       */
-      "font-family": [{
-        font: [Mt, i, o]
-      }],
-      /**
-       * Font Variant Numeric
-       * @see https://tailwindcss.com/docs/font-variant-numeric
-       */
-      "fvn-normal": ["normal-nums"],
-      /**
-       * Font Variant Numeric
-       * @see https://tailwindcss.com/docs/font-variant-numeric
-       */
-      "fvn-ordinal": ["ordinal"],
-      /**
-       * Font Variant Numeric
-       * @see https://tailwindcss.com/docs/font-variant-numeric
-       */
-      "fvn-slashed-zero": ["slashed-zero"],
-      /**
-       * Font Variant Numeric
-       * @see https://tailwindcss.com/docs/font-variant-numeric
-       */
-      "fvn-figure": ["lining-nums", "oldstyle-nums"],
-      /**
-       * Font Variant Numeric
-       * @see https://tailwindcss.com/docs/font-variant-numeric
-       */
-      "fvn-spacing": ["proportional-nums", "tabular-nums"],
-      /**
-       * Font Variant Numeric
-       * @see https://tailwindcss.com/docs/font-variant-numeric
-       */
-      "fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
-      /**
-       * Letter Spacing
-       * @see https://tailwindcss.com/docs/letter-spacing
-       */
-      tracking: [{
-        tracking: [n, l, i]
-      }],
-      /**
-       * Line Clamp
-       * @see https://tailwindcss.com/docs/line-clamp
-       */
-      "line-clamp": [{
-        "line-clamp": [b, "none", l, pe]
-      }],
-      /**
-       * Line Height
-       * @see https://tailwindcss.com/docs/line-height
-       */
-      leading: [{
-        leading: [
-          /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
-          s,
-          ...m()
-        ]
-      }],
-      /**
-       * List Style Image
-       * @see https://tailwindcss.com/docs/list-style-image
-       */
-      "list-image": [{
-        "list-image": ["none", l, i]
-      }],
-      /**
-       * List Style Position
-       * @see https://tailwindcss.com/docs/list-style-position
-       */
-      "list-style-position": [{
-        list: ["inside", "outside"]
-      }],
-      /**
-       * List Style Type
-       * @see https://tailwindcss.com/docs/list-style-type
-       */
-      "list-style-type": [{
-        list: ["disc", "decimal", "none", l, i]
-      }],
-      /**
-       * Text Alignment
-       * @see https://tailwindcss.com/docs/text-align
-       */
-      "text-alignment": [{
-        text: ["left", "center", "right", "justify", "start", "end"]
-      }],
-      /**
-       * Placeholder Color
-       * @deprecated since Tailwind CSS v3.0.0
-       * @see https://v3.tailwindcss.com/docs/placeholder-color
-       */
-      "placeholder-color": [{
-        placeholder: d()
-      }],
-      /**
-       * Text Color
-       * @see https://tailwindcss.com/docs/text-color
-       */
-      "text-color": [{
-        text: d()
-      }],
-      /**
-       * Text Decoration
-       * @see https://tailwindcss.com/docs/text-decoration
-       */
-      "text-decoration": ["underline", "overline", "line-through", "no-underline"],
-      /**
-       * Text Decoration Style
-       * @see https://tailwindcss.com/docs/text-decoration-style
-       */
-      "text-decoration-style": [{
-        decoration: [...se(), "wavy"]
-      }],
-      /**
-       * Text Decoration Thickness
-       * @see https://tailwindcss.com/docs/text-decoration-thickness
-       */
-      "text-decoration-thickness": [{
-        decoration: [b, "from-font", "auto", l, X]
-      }],
-      /**
-       * Text Decoration Color
-       * @see https://tailwindcss.com/docs/text-decoration-color
-       */
-      "text-decoration-color": [{
-        decoration: d()
-      }],
-      /**
-       * Text Underline Offset
-       * @see https://tailwindcss.com/docs/text-underline-offset
-       */
-      "underline-offset": [{
-        "underline-offset": [b, "auto", l, i]
-      }],
-      /**
-       * Text Transform
-       * @see https://tailwindcss.com/docs/text-transform
-       */
-      "text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"],
-      /**
-       * Text Overflow
-       * @see https://tailwindcss.com/docs/text-overflow
-       */
-      "text-overflow": ["truncate", "text-ellipsis", "text-clip"],
-      /**
-       * Text Wrap
-       * @see https://tailwindcss.com/docs/text-wrap
-       */
-      "text-wrap": [{
-        text: ["wrap", "nowrap", "balance", "pretty"]
-      }],
-      /**
-       * Text Indent
-       * @see https://tailwindcss.com/docs/text-indent
-       */
-      indent: [{
-        indent: m()
-      }],
-      /**
-       * Vertical Alignment
-       * @see https://tailwindcss.com/docs/vertical-align
-       */
-      "vertical-align": [{
-        align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", l, i]
-      }],
-      /**
-       * Whitespace
-       * @see https://tailwindcss.com/docs/whitespace
-       */
-      whitespace: [{
-        whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"]
-      }],
-      /**
-       * Word Break
-       * @see https://tailwindcss.com/docs/word-break
-       */
-      break: [{
-        break: ["normal", "words", "all", "keep"]
-      }],
-      /**
-       * Overflow Wrap
-       * @see https://tailwindcss.com/docs/overflow-wrap
-       */
-      wrap: [{
-        wrap: ["break-word", "anywhere", "normal"]
-      }],
-      /**
-       * Hyphens
-       * @see https://tailwindcss.com/docs/hyphens
-       */
-      hyphens: [{
-        hyphens: ["none", "manual", "auto"]
-      }],
-      /**
-       * Content
-       * @see https://tailwindcss.com/docs/content
-       */
-      content: [{
-        content: ["none", l, i]
-      }],
-      // -------------------
-      // --- Backgrounds ---
-      // -------------------
-      /**
-       * Background Attachment
-       * @see https://tailwindcss.com/docs/background-attachment
-       */
-      "bg-attachment": [{
-        bg: ["fixed", "local", "scroll"]
-      }],
-      /**
-       * Background Clip
-       * @see https://tailwindcss.com/docs/background-clip
-       */
-      "bg-clip": [{
-        "bg-clip": ["border", "padding", "content", "text"]
-      }],
-      /**
-       * Background Origin
-       * @see https://tailwindcss.com/docs/background-origin
-       */
-      "bg-origin": [{
-        "bg-origin": ["border", "padding", "content"]
-      }],
-      /**
-       * Background Position
-       * @see https://tailwindcss.com/docs/background-position
-       */
-      "bg-position": [{
-        bg: O()
-      }],
-      /**
-       * Background Repeat
-       * @see https://tailwindcss.com/docs/background-repeat
-       */
-      "bg-repeat": [{
-        bg: W()
-      }],
-      /**
-       * Background Size
-       * @see https://tailwindcss.com/docs/background-size
-       */
-      "bg-size": [{
-        bg: Q()
-      }],
-      /**
-       * Background Image
-       * @see https://tailwindcss.com/docs/background-image
-       */
-      "bg-image": [{
-        bg: ["none", {
-          linear: [{
-            to: ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
-          }, q, l, i],
-          radial: ["", l, i],
-          conic: [q, l, i]
-        }, Et, Rt]
-      }],
-      /**
-       * Background Color
-       * @see https://tailwindcss.com/docs/background-color
-       */
-      "bg-color": [{
-        bg: d()
-      }],
-      /**
-       * Gradient Color Stops From Position
-       * @see https://tailwindcss.com/docs/gradient-color-stops
-       */
-      "gradient-from-pos": [{
-        from: oe()
-      }],
-      /**
-       * Gradient Color Stops Via Position
-       * @see https://tailwindcss.com/docs/gradient-color-stops
-       */
-      "gradient-via-pos": [{
-        via: oe()
-      }],
-      /**
-       * Gradient Color Stops To Position
-       * @see https://tailwindcss.com/docs/gradient-color-stops
-       */
-      "gradient-to-pos": [{
-        to: oe()
-      }],
-      /**
-       * Gradient Color Stops From
-       * @see https://tailwindcss.com/docs/gradient-color-stops
-       */
-      "gradient-from": [{
-        from: d()
-      }],
-      /**
-       * Gradient Color Stops Via
-       * @see https://tailwindcss.com/docs/gradient-color-stops
-       */
-      "gradient-via": [{
-        via: d()
-      }],
-      /**
-       * Gradient Color Stops To
-       * @see https://tailwindcss.com/docs/gradient-color-stops
-       */
-      "gradient-to": [{
-        to: d()
-      }],
-      // ---------------
-      // --- Borders ---
-      // ---------------
-      /**
-       * Border Radius
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      rounded: [{
-        rounded: _()
-      }],
-      /**
-       * Border Radius Start
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      "rounded-s": [{
-        "rounded-s": _()
-      }],
-      /**
-       * Border Radius End
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      "rounded-e": [{
-        "rounded-e": _()
-      }],
-      /**
-       * Border Radius Top
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      "rounded-t": [{
-        "rounded-t": _()
-      }],
-      /**
-       * Border Radius Right
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      "rounded-r": [{
-        "rounded-r": _()
-      }],
-      /**
-       * Border Radius Bottom
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      "rounded-b": [{
-        "rounded-b": _()
-      }],
-      /**
-       * Border Radius Left
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      "rounded-l": [{
-        "rounded-l": _()
-      }],
-      /**
-       * Border Radius Start Start
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      "rounded-ss": [{
-        "rounded-ss": _()
-      }],
-      /**
-       * Border Radius Start End
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      "rounded-se": [{
-        "rounded-se": _()
-      }],
-      /**
-       * Border Radius End End
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      "rounded-ee": [{
-        "rounded-ee": _()
-      }],
-      /**
-       * Border Radius End Start
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      "rounded-es": [{
-        "rounded-es": _()
-      }],
-      /**
-       * Border Radius Top Left
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      "rounded-tl": [{
-        "rounded-tl": _()
-      }],
-      /**
-       * Border Radius Top Right
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      "rounded-tr": [{
-        "rounded-tr": _()
-      }],
-      /**
-       * Border Radius Bottom Right
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      "rounded-br": [{
-        "rounded-br": _()
-      }],
-      /**
-       * Border Radius Bottom Left
-       * @see https://tailwindcss.com/docs/border-radius
-       */
-      "rounded-bl": [{
-        "rounded-bl": _()
-      }],
-      /**
-       * Border Width
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      "border-w": [{
-        border: $()
-      }],
-      /**
-       * Border Width X
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      "border-w-x": [{
-        "border-x": $()
-      }],
-      /**
-       * Border Width Y
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      "border-w-y": [{
-        "border-y": $()
-      }],
-      /**
-       * Border Width Start
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      "border-w-s": [{
-        "border-s": $()
-      }],
-      /**
-       * Border Width End
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      "border-w-e": [{
-        "border-e": $()
-      }],
-      /**
-       * Border Width Top
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      "border-w-t": [{
-        "border-t": $()
-      }],
-      /**
-       * Border Width Right
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      "border-w-r": [{
-        "border-r": $()
-      }],
-      /**
-       * Border Width Bottom
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      "border-w-b": [{
-        "border-b": $()
-      }],
-      /**
-       * Border Width Left
-       * @see https://tailwindcss.com/docs/border-width
-       */
-      "border-w-l": [{
-        "border-l": $()
-      }],
-      /**
-       * Divide Width X
-       * @see https://tailwindcss.com/docs/border-width#between-children
-       */
-      "divide-x": [{
-        "divide-x": $()
-      }],
-      /**
-       * Divide Width X Reverse
-       * @see https://tailwindcss.com/docs/border-width#between-children
-       */
-      "divide-x-reverse": ["divide-x-reverse"],
-      /**
-       * Divide Width Y
-       * @see https://tailwindcss.com/docs/border-width#between-children
-       */
-      "divide-y": [{
-        "divide-y": $()
-      }],
-      /**
-       * Divide Width Y Reverse
-       * @see https://tailwindcss.com/docs/border-width#between-children
-       */
-      "divide-y-reverse": ["divide-y-reverse"],
-      /**
-       * Border Style
-       * @see https://tailwindcss.com/docs/border-style
-       */
-      "border-style": [{
-        border: [...se(), "hidden", "none"]
-      }],
-      /**
-       * Divide Style
-       * @see https://tailwindcss.com/docs/border-style#setting-the-divider-style
-       */
-      "divide-style": [{
-        divide: [...se(), "hidden", "none"]
-      }],
-      /**
-       * Border Color
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      "border-color": [{
-        border: d()
-      }],
-      /**
-       * Border Color X
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      "border-color-x": [{
-        "border-x": d()
-      }],
-      /**
-       * Border Color Y
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      "border-color-y": [{
-        "border-y": d()
-      }],
-      /**
-       * Border Color S
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      "border-color-s": [{
-        "border-s": d()
-      }],
-      /**
-       * Border Color E
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      "border-color-e": [{
-        "border-e": d()
-      }],
-      /**
-       * Border Color Top
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      "border-color-t": [{
-        "border-t": d()
-      }],
-      /**
-       * Border Color Right
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      "border-color-r": [{
-        "border-r": d()
-      }],
-      /**
-       * Border Color Bottom
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      "border-color-b": [{
-        "border-b": d()
-      }],
-      /**
-       * Border Color Left
-       * @see https://tailwindcss.com/docs/border-color
-       */
-      "border-color-l": [{
-        "border-l": d()
-      }],
-      /**
-       * Divide Color
-       * @see https://tailwindcss.com/docs/divide-color
-       */
-      "divide-color": [{
-        divide: d()
-      }],
-      /**
-       * Outline Style
-       * @see https://tailwindcss.com/docs/outline-style
-       */
-      "outline-style": [{
-        outline: [...se(), "none", "hidden"]
-      }],
-      /**
-       * Outline Offset
-       * @see https://tailwindcss.com/docs/outline-offset
-       */
-      "outline-offset": [{
-        "outline-offset": [b, l, i]
-      }],
-      /**
-       * Outline Width
-       * @see https://tailwindcss.com/docs/outline-width
-       */
-      "outline-w": [{
-        outline: ["", b, ne, X]
-      }],
-      /**
-       * Outline Color
-       * @see https://tailwindcss.com/docs/outline-color
-       */
-      "outline-color": [{
-        outline: d()
-      }],
-      // ---------------
-      // --- Effects ---
-      // ---------------
-      /**
-       * Box Shadow
-       * @see https://tailwindcss.com/docs/box-shadow
-       */
-      shadow: [{
-        shadow: [
-          // Deprecated since Tailwind CSS v4.0.0
-          "",
-          "none",
-          x,
-          de,
-          ce
-        ]
-      }],
-      /**
-       * Box Shadow Color
-       * @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
-       */
-      "shadow-color": [{
-        shadow: d()
-      }],
-      /**
-       * Inset Box Shadow
-       * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
-       */
-      "inset-shadow": [{
-        "inset-shadow": ["none", S, de, ce]
-      }],
-      /**
-       * Inset Box Shadow Color
-       * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
-       */
-      "inset-shadow-color": [{
-        "inset-shadow": d()
-      }],
-      /**
-       * Ring Width
-       * @see https://tailwindcss.com/docs/box-shadow#adding-a-ring
-       */
-      "ring-w": [{
-        ring: $()
-      }],
-      /**
-       * Ring Width Inset
-       * @see https://v3.tailwindcss.com/docs/ring-width#inset-rings
-       * @deprecated since Tailwind CSS v4.0.0
-       * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
-       */
-      "ring-w-inset": ["ring-inset"],
-      /**
-       * Ring Color
-       * @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
-       */
-      "ring-color": [{
-        ring: d()
-      }],
-      /**
-       * Ring Offset Width
-       * @see https://v3.tailwindcss.com/docs/ring-offset-width
-       * @deprecated since Tailwind CSS v4.0.0
-       * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
-       */
-      "ring-offset-w": [{
-        "ring-offset": [b, X]
-      }],
-      /**
-       * Ring Offset Color
-       * @see https://v3.tailwindcss.com/docs/ring-offset-color
-       * @deprecated since Tailwind CSS v4.0.0
-       * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
-       */
-      "ring-offset-color": [{
-        "ring-offset": d()
-      }],
-      /**
-       * Inset Ring Width
-       * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring
-       */
-      "inset-ring-w": [{
-        "inset-ring": $()
-      }],
-      /**
-       * Inset Ring Color
-       * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
-       */
-      "inset-ring-color": [{
-        "inset-ring": d()
-      }],
-      /**
-       * Text Shadow
-       * @see https://tailwindcss.com/docs/text-shadow
-       */
-      "text-shadow": [{
-        "text-shadow": ["none", w, de, ce]
-      }],
-      /**
-       * Text Shadow Color
-       * @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
-       */
-      "text-shadow-color": [{
-        "text-shadow": d()
-      }],
-      /**
-       * Opacity
-       * @see https://tailwindcss.com/docs/opacity
-       */
-      opacity: [{
-        opacity: [b, l, i]
-      }],
-      /**
-       * Mix Blend Mode
-       * @see https://tailwindcss.com/docs/mix-blend-mode
-       */
-      "mix-blend": [{
-        "mix-blend": [...ye(), "plus-darker", "plus-lighter"]
-      }],
-      /**
-       * Background Blend Mode
-       * @see https://tailwindcss.com/docs/background-blend-mode
-       */
-      "bg-blend": [{
-        "bg-blend": ye()
-      }],
-      /**
-       * Mask Clip
-       * @see https://tailwindcss.com/docs/mask-clip
-       */
-      "mask-clip": [{
-        "mask-clip": ["border", "padding", "content", "fill", "stroke", "view"]
-      }, "mask-no-clip"],
-      /**
-       * Mask Composite
-       * @see https://tailwindcss.com/docs/mask-composite
-       */
-      "mask-composite": [{
-        mask: ["add", "subtract", "intersect", "exclude"]
-      }],
-      /**
-       * Mask Image
-       * @see https://tailwindcss.com/docs/mask-image
-       */
-      "mask-image-linear-pos": [{
-        "mask-linear": [b]
-      }],
-      "mask-image-linear-from-pos": [{
-        "mask-linear-from": R()
-      }],
-      "mask-image-linear-to-pos": [{
-        "mask-linear-to": R()
-      }],
-      "mask-image-linear-from-color": [{
-        "mask-linear-from": d()
-      }],
-      "mask-image-linear-to-color": [{
-        "mask-linear-to": d()
-      }],
-      "mask-image-t-from-pos": [{
-        "mask-t-from": R()
-      }],
-      "mask-image-t-to-pos": [{
-        "mask-t-to": R()
-      }],
-      "mask-image-t-from-color": [{
-        "mask-t-from": d()
-      }],
-      "mask-image-t-to-color": [{
-        "mask-t-to": d()
-      }],
-      "mask-image-r-from-pos": [{
-        "mask-r-from": R()
-      }],
-      "mask-image-r-to-pos": [{
-        "mask-r-to": R()
-      }],
-      "mask-image-r-from-color": [{
-        "mask-r-from": d()
-      }],
-      "mask-image-r-to-color": [{
-        "mask-r-to": d()
-      }],
-      "mask-image-b-from-pos": [{
-        "mask-b-from": R()
-      }],
-      "mask-image-b-to-pos": [{
-        "mask-b-to": R()
-      }],
-      "mask-image-b-from-color": [{
-        "mask-b-from": d()
-      }],
-      "mask-image-b-to-color": [{
-        "mask-b-to": d()
-      }],
-      "mask-image-l-from-pos": [{
-        "mask-l-from": R()
-      }],
-      "mask-image-l-to-pos": [{
-        "mask-l-to": R()
-      }],
-      "mask-image-l-from-color": [{
-        "mask-l-from": d()
-      }],
-      "mask-image-l-to-color": [{
-        "mask-l-to": d()
-      }],
-      "mask-image-x-from-pos": [{
-        "mask-x-from": R()
-      }],
-      "mask-image-x-to-pos": [{
-        "mask-x-to": R()
-      }],
-      "mask-image-x-from-color": [{
-        "mask-x-from": d()
-      }],
-      "mask-image-x-to-color": [{
-        "mask-x-to": d()
-      }],
-      "mask-image-y-from-pos": [{
-        "mask-y-from": R()
-      }],
-      "mask-image-y-to-pos": [{
-        "mask-y-to": R()
-      }],
-      "mask-image-y-from-color": [{
-        "mask-y-from": d()
-      }],
-      "mask-image-y-to-color": [{
-        "mask-y-to": d()
-      }],
-      "mask-image-radial": [{
-        "mask-radial": [l, i]
-      }],
-      "mask-image-radial-from-pos": [{
-        "mask-radial-from": R()
-      }],
-      "mask-image-radial-to-pos": [{
-        "mask-radial-to": R()
-      }],
-      "mask-image-radial-from-color": [{
-        "mask-radial-from": d()
-      }],
-      "mask-image-radial-to-color": [{
-        "mask-radial-to": d()
-      }],
-      "mask-image-radial-shape": [{
-        "mask-radial": ["circle", "ellipse"]
-      }],
-      "mask-image-radial-size": [{
-        "mask-radial": [{
-          closest: ["side", "corner"],
-          farthest: ["side", "corner"]
-        }]
-      }],
-      "mask-image-radial-pos": [{
-        "mask-radial-at": L()
-      }],
-      "mask-image-conic-pos": [{
-        "mask-conic": [b]
-      }],
-      "mask-image-conic-from-pos": [{
-        "mask-conic-from": R()
-      }],
-      "mask-image-conic-to-pos": [{
-        "mask-conic-to": R()
-      }],
-      "mask-image-conic-from-color": [{
-        "mask-conic-from": d()
-      }],
-      "mask-image-conic-to-color": [{
-        "mask-conic-to": d()
-      }],
-      /**
-       * Mask Mode
-       * @see https://tailwindcss.com/docs/mask-mode
-       */
-      "mask-mode": [{
-        mask: ["alpha", "luminance", "match"]
-      }],
-      /**
-       * Mask Origin
-       * @see https://tailwindcss.com/docs/mask-origin
-       */
-      "mask-origin": [{
-        "mask-origin": ["border", "padding", "content", "fill", "stroke", "view"]
-      }],
-      /**
-       * Mask Position
-       * @see https://tailwindcss.com/docs/mask-position
-       */
-      "mask-position": [{
-        mask: O()
-      }],
-      /**
-       * Mask Repeat
-       * @see https://tailwindcss.com/docs/mask-repeat
-       */
-      "mask-repeat": [{
-        mask: W()
-      }],
-      /**
-       * Mask Size
-       * @see https://tailwindcss.com/docs/mask-size
-       */
-      "mask-size": [{
-        mask: Q()
-      }],
-      /**
-       * Mask Type
-       * @see https://tailwindcss.com/docs/mask-type
-       */
-      "mask-type": [{
-        "mask-type": ["alpha", "luminance"]
-      }],
-      /**
-       * Mask Image
-       * @see https://tailwindcss.com/docs/mask-image
-       */
-      "mask-image": [{
-        mask: ["none", l, i]
-      }],
-      // ---------------
-      // --- Filters ---
-      // ---------------
-      /**
-       * Filter
-       * @see https://tailwindcss.com/docs/filter
-       */
-      filter: [{
-        filter: [
-          // Deprecated since Tailwind CSS v3.0.0
-          "",
-          "none",
-          l,
-          i
-        ]
-      }],
-      /**
-       * Blur
-       * @see https://tailwindcss.com/docs/blur
-       */
-      blur: [{
-        blur: ke()
-      }],
-      /**
-       * Brightness
-       * @see https://tailwindcss.com/docs/brightness
-       */
-      brightness: [{
-        brightness: [b, l, i]
-      }],
-      /**
-       * Contrast
-       * @see https://tailwindcss.com/docs/contrast
-       */
-      contrast: [{
-        contrast: [b, l, i]
-      }],
-      /**
-       * Drop Shadow
-       * @see https://tailwindcss.com/docs/drop-shadow
-       */
-      "drop-shadow": [{
-        "drop-shadow": [
-          // Deprecated since Tailwind CSS v4.0.0
-          "",
-          "none",
-          y,
-          de,
-          ce
-        ]
-      }],
-      /**
-       * Drop Shadow Color
-       * @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
-       */
-      "drop-shadow-color": [{
-        "drop-shadow": d()
-      }],
-      /**
-       * Grayscale
-       * @see https://tailwindcss.com/docs/grayscale
-       */
-      grayscale: [{
-        grayscale: ["", b, l, i]
-      }],
-      /**
-       * Hue Rotate
-       * @see https://tailwindcss.com/docs/hue-rotate
-       */
-      "hue-rotate": [{
-        "hue-rotate": [b, l, i]
-      }],
-      /**
-       * Invert
-       * @see https://tailwindcss.com/docs/invert
-       */
-      invert: [{
-        invert: ["", b, l, i]
-      }],
-      /**
-       * Saturate
-       * @see https://tailwindcss.com/docs/saturate
-       */
-      saturate: [{
-        saturate: [b, l, i]
-      }],
-      /**
-       * Sepia
-       * @see https://tailwindcss.com/docs/sepia
-       */
-      sepia: [{
-        sepia: ["", b, l, i]
-      }],
-      /**
-       * Backdrop Filter
-       * @see https://tailwindcss.com/docs/backdrop-filter
-       */
-      "backdrop-filter": [{
-        "backdrop-filter": [
-          // Deprecated since Tailwind CSS v3.0.0
-          "",
-          "none",
-          l,
-          i
-        ]
-      }],
-      /**
-       * Backdrop Blur
-       * @see https://tailwindcss.com/docs/backdrop-blur
-       */
-      "backdrop-blur": [{
-        "backdrop-blur": ke()
-      }],
-      /**
-       * Backdrop Brightness
-       * @see https://tailwindcss.com/docs/backdrop-brightness
-       */
-      "backdrop-brightness": [{
-        "backdrop-brightness": [b, l, i]
-      }],
-      /**
-       * Backdrop Contrast
-       * @see https://tailwindcss.com/docs/backdrop-contrast
-       */
-      "backdrop-contrast": [{
-        "backdrop-contrast": [b, l, i]
-      }],
-      /**
-       * Backdrop Grayscale
-       * @see https://tailwindcss.com/docs/backdrop-grayscale
-       */
-      "backdrop-grayscale": [{
-        "backdrop-grayscale": ["", b, l, i]
-      }],
-      /**
-       * Backdrop Hue Rotate
-       * @see https://tailwindcss.com/docs/backdrop-hue-rotate
-       */
-      "backdrop-hue-rotate": [{
-        "backdrop-hue-rotate": [b, l, i]
-      }],
-      /**
-       * Backdrop Invert
-       * @see https://tailwindcss.com/docs/backdrop-invert
-       */
-      "backdrop-invert": [{
-        "backdrop-invert": ["", b, l, i]
-      }],
-      /**
-       * Backdrop Opacity
-       * @see https://tailwindcss.com/docs/backdrop-opacity
-       */
-      "backdrop-opacity": [{
-        "backdrop-opacity": [b, l, i]
-      }],
-      /**
-       * Backdrop Saturate
-       * @see https://tailwindcss.com/docs/backdrop-saturate
-       */
-      "backdrop-saturate": [{
-        "backdrop-saturate": [b, l, i]
-      }],
-      /**
-       * Backdrop Sepia
-       * @see https://tailwindcss.com/docs/backdrop-sepia
-       */
-      "backdrop-sepia": [{
-        "backdrop-sepia": ["", b, l, i]
-      }],
-      // --------------
-      // --- Tables ---
-      // --------------
-      /**
-       * Border Collapse
-       * @see https://tailwindcss.com/docs/border-collapse
-       */
-      "border-collapse": [{
-        border: ["collapse", "separate"]
-      }],
-      /**
-       * Border Spacing
-       * @see https://tailwindcss.com/docs/border-spacing
-       */
-      "border-spacing": [{
-        "border-spacing": m()
-      }],
-      /**
-       * Border Spacing X
-       * @see https://tailwindcss.com/docs/border-spacing
-       */
-      "border-spacing-x": [{
-        "border-spacing-x": m()
-      }],
-      /**
-       * Border Spacing Y
-       * @see https://tailwindcss.com/docs/border-spacing
-       */
-      "border-spacing-y": [{
-        "border-spacing-y": m()
-      }],
-      /**
-       * Table Layout
-       * @see https://tailwindcss.com/docs/table-layout
-       */
-      "table-layout": [{
-        table: ["auto", "fixed"]
-      }],
-      /**
-       * Caption Side
-       * @see https://tailwindcss.com/docs/caption-side
-       */
-      caption: [{
-        caption: ["top", "bottom"]
-      }],
-      // ---------------------------------
-      // --- Transitions and Animation ---
-      // ---------------------------------
-      /**
-       * Transition Property
-       * @see https://tailwindcss.com/docs/transition-property
-       */
-      transition: [{
-        transition: ["", "all", "colors", "opacity", "shadow", "transform", "none", l, i]
-      }],
-      /**
-       * Transition Behavior
-       * @see https://tailwindcss.com/docs/transition-behavior
-       */
-      "transition-behavior": [{
-        transition: ["normal", "discrete"]
-      }],
-      /**
-       * Transition Duration
-       * @see https://tailwindcss.com/docs/transition-duration
-       */
-      duration: [{
-        duration: [b, "initial", l, i]
-      }],
-      /**
-       * Transition Timing Function
-       * @see https://tailwindcss.com/docs/transition-timing-function
-       */
-      ease: [{
-        ease: ["linear", "initial", D, l, i]
-      }],
-      /**
-       * Transition Delay
-       * @see https://tailwindcss.com/docs/transition-delay
-       */
-      delay: [{
-        delay: [b, l, i]
-      }],
-      /**
-       * Animation
-       * @see https://tailwindcss.com/docs/animation
-       */
-      animate: [{
-        animate: ["none", F, l, i]
-      }],
-      // ------------------
-      // --- Transforms ---
-      // ------------------
-      /**
-       * Backface Visibility
-       * @see https://tailwindcss.com/docs/backface-visibility
-       */
-      backface: [{
-        backface: ["hidden", "visible"]
-      }],
-      /**
-       * Perspective
-       * @see https://tailwindcss.com/docs/perspective
-       */
-      perspective: [{
-        perspective: [z, l, i]
-      }],
-      /**
-       * Perspective Origin
-       * @see https://tailwindcss.com/docs/perspective-origin
-       */
-      "perspective-origin": [{
-        "perspective-origin": N()
-      }],
-      /**
-       * Rotate
-       * @see https://tailwindcss.com/docs/rotate
-       */
-      rotate: [{
-        rotate: ae()
-      }],
-      /**
-       * Rotate X
-       * @see https://tailwindcss.com/docs/rotate
-       */
-      "rotate-x": [{
-        "rotate-x": ae()
-      }],
-      /**
-       * Rotate Y
-       * @see https://tailwindcss.com/docs/rotate
-       */
-      "rotate-y": [{
-        "rotate-y": ae()
-      }],
-      /**
-       * Rotate Z
-       * @see https://tailwindcss.com/docs/rotate
-       */
-      "rotate-z": [{
-        "rotate-z": ae()
-      }],
-      /**
-       * Scale
-       * @see https://tailwindcss.com/docs/scale
-       */
-      scale: [{
-        scale: ie()
-      }],
-      /**
-       * Scale X
-       * @see https://tailwindcss.com/docs/scale
-       */
-      "scale-x": [{
-        "scale-x": ie()
-      }],
-      /**
-       * Scale Y
-       * @see https://tailwindcss.com/docs/scale
-       */
-      "scale-y": [{
-        "scale-y": ie()
-      }],
-      /**
-       * Scale Z
-       * @see https://tailwindcss.com/docs/scale
-       */
-      "scale-z": [{
-        "scale-z": ie()
-      }],
-      /**
-       * Scale 3D
-       * @see https://tailwindcss.com/docs/scale
-       */
-      "scale-3d": ["scale-3d"],
-      /**
-       * Skew
-       * @see https://tailwindcss.com/docs/skew
-       */
-      skew: [{
-        skew: ue()
-      }],
-      /**
-       * Skew X
-       * @see https://tailwindcss.com/docs/skew
-       */
-      "skew-x": [{
-        "skew-x": ue()
-      }],
-      /**
-       * Skew Y
-       * @see https://tailwindcss.com/docs/skew
-       */
-      "skew-y": [{
-        "skew-y": ue()
-      }],
-      /**
-       * Transform
-       * @see https://tailwindcss.com/docs/transform
-       */
-      transform: [{
-        transform: [l, i, "", "none", "gpu", "cpu"]
-      }],
-      /**
-       * Transform Origin
-       * @see https://tailwindcss.com/docs/transform-origin
-       */
-      "transform-origin": [{
-        origin: N()
-      }],
-      /**
-       * Transform Style
-       * @see https://tailwindcss.com/docs/transform-style
-       */
-      "transform-style": [{
-        transform: ["3d", "flat"]
-      }],
-      /**
-       * Translate
-       * @see https://tailwindcss.com/docs/translate
-       */
-      translate: [{
-        translate: le()
-      }],
-      /**
-       * Translate X
-       * @see https://tailwindcss.com/docs/translate
-       */
-      "translate-x": [{
-        "translate-x": le()
-      }],
-      /**
-       * Translate Y
-       * @see https://tailwindcss.com/docs/translate
-       */
-      "translate-y": [{
-        "translate-y": le()
-      }],
-      /**
-       * Translate Z
-       * @see https://tailwindcss.com/docs/translate
-       */
-      "translate-z": [{
-        "translate-z": le()
-      }],
-      /**
-       * Translate None
-       * @see https://tailwindcss.com/docs/translate
-       */
-      "translate-none": ["translate-none"],
-      // ---------------------
-      // --- Interactivity ---
-      // ---------------------
-      /**
-       * Accent Color
-       * @see https://tailwindcss.com/docs/accent-color
-       */
-      accent: [{
-        accent: d()
-      }],
-      /**
-       * Appearance
-       * @see https://tailwindcss.com/docs/appearance
-       */
-      appearance: [{
-        appearance: ["none", "auto"]
-      }],
-      /**
-       * Caret Color
-       * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
-       */
-      "caret-color": [{
-        caret: d()
-      }],
-      /**
-       * Color Scheme
-       * @see https://tailwindcss.com/docs/color-scheme
-       */
-      "color-scheme": [{
-        scheme: ["normal", "dark", "light", "light-dark", "only-dark", "only-light"]
-      }],
-      /**
-       * Cursor
-       * @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", l, i]
-      }],
-      /**
-       * Field Sizing
-       * @see https://tailwindcss.com/docs/field-sizing
-       */
-      "field-sizing": [{
-        "field-sizing": ["fixed", "content"]
-      }],
-      /**
-       * Pointer Events
-       * @see https://tailwindcss.com/docs/pointer-events
-       */
-      "pointer-events": [{
-        "pointer-events": ["auto", "none"]
-      }],
-      /**
-       * Resize
-       * @see https://tailwindcss.com/docs/resize
-       */
-      resize: [{
-        resize: ["none", "", "y", "x"]
-      }],
-      /**
-       * Scroll Behavior
-       * @see https://tailwindcss.com/docs/scroll-behavior
-       */
-      "scroll-behavior": [{
-        scroll: ["auto", "smooth"]
-      }],
-      /**
-       * Scroll Margin
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      "scroll-m": [{
-        "scroll-m": m()
-      }],
-      /**
-       * Scroll Margin X
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      "scroll-mx": [{
-        "scroll-mx": m()
-      }],
-      /**
-       * Scroll Margin Y
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      "scroll-my": [{
-        "scroll-my": m()
-      }],
-      /**
-       * Scroll Margin Start
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      "scroll-ms": [{
-        "scroll-ms": m()
-      }],
-      /**
-       * Scroll Margin End
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      "scroll-me": [{
-        "scroll-me": m()
-      }],
-      /**
-       * Scroll Margin Top
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      "scroll-mt": [{
-        "scroll-mt": m()
-      }],
-      /**
-       * Scroll Margin Right
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      "scroll-mr": [{
-        "scroll-mr": m()
-      }],
-      /**
-       * Scroll Margin Bottom
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      "scroll-mb": [{
-        "scroll-mb": m()
-      }],
-      /**
-       * Scroll Margin Left
-       * @see https://tailwindcss.com/docs/scroll-margin
-       */
-      "scroll-ml": [{
-        "scroll-ml": m()
-      }],
-      /**
-       * Scroll Padding
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      "scroll-p": [{
-        "scroll-p": m()
-      }],
-      /**
-       * Scroll Padding X
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      "scroll-px": [{
-        "scroll-px": m()
-      }],
-      /**
-       * Scroll Padding Y
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      "scroll-py": [{
-        "scroll-py": m()
-      }],
-      /**
-       * Scroll Padding Start
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      "scroll-ps": [{
-        "scroll-ps": m()
-      }],
-      /**
-       * Scroll Padding End
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      "scroll-pe": [{
-        "scroll-pe": m()
-      }],
-      /**
-       * Scroll Padding Top
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      "scroll-pt": [{
-        "scroll-pt": m()
-      }],
-      /**
-       * Scroll Padding Right
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      "scroll-pr": [{
-        "scroll-pr": m()
-      }],
-      /**
-       * Scroll Padding Bottom
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      "scroll-pb": [{
-        "scroll-pb": m()
-      }],
-      /**
-       * Scroll Padding Left
-       * @see https://tailwindcss.com/docs/scroll-padding
-       */
-      "scroll-pl": [{
-        "scroll-pl": m()
-      }],
-      /**
-       * Scroll Snap Align
-       * @see https://tailwindcss.com/docs/scroll-snap-align
-       */
-      "snap-align": [{
-        snap: ["start", "end", "center", "align-none"]
-      }],
-      /**
-       * Scroll Snap Stop
-       * @see https://tailwindcss.com/docs/scroll-snap-stop
-       */
-      "snap-stop": [{
-        snap: ["normal", "always"]
-      }],
-      /**
-       * Scroll Snap Type
-       * @see https://tailwindcss.com/docs/scroll-snap-type
-       */
-      "snap-type": [{
-        snap: ["none", "x", "y", "both"]
-      }],
-      /**
-       * Scroll Snap Type Strictness
-       * @see https://tailwindcss.com/docs/scroll-snap-type
-       */
-      "snap-strictness": [{
-        snap: ["mandatory", "proximity"]
-      }],
-      /**
-       * Touch Action
-       * @see https://tailwindcss.com/docs/touch-action
-       */
-      touch: [{
-        touch: ["auto", "none", "manipulation"]
-      }],
-      /**
-       * Touch Action X
-       * @see https://tailwindcss.com/docs/touch-action
-       */
-      "touch-x": [{
-        "touch-pan": ["x", "left", "right"]
-      }],
-      /**
-       * Touch Action Y
-       * @see https://tailwindcss.com/docs/touch-action
-       */
-      "touch-y": [{
-        "touch-pan": ["y", "up", "down"]
-      }],
-      /**
-       * Touch Action Pinch Zoom
-       * @see https://tailwindcss.com/docs/touch-action
-       */
-      "touch-pz": ["touch-pinch-zoom"],
-      /**
-       * User Select
-       * @see https://tailwindcss.com/docs/user-select
-       */
-      select: [{
-        select: ["none", "text", "all", "auto"]
-      }],
-      /**
-       * Will Change
-       * @see https://tailwindcss.com/docs/will-change
-       */
-      "will-change": [{
-        "will-change": ["auto", "scroll", "contents", "transform", l, i]
-      }],
-      // -----------
-      // --- SVG ---
-      // -----------
-      /**
-       * Fill
-       * @see https://tailwindcss.com/docs/fill
-       */
-      fill: [{
-        fill: ["none", ...d()]
-      }],
-      /**
-       * Stroke Width
-       * @see https://tailwindcss.com/docs/stroke-width
-       */
-      "stroke-w": [{
-        stroke: [b, ne, X, pe]
-      }],
-      /**
-       * Stroke
-       * @see https://tailwindcss.com/docs/stroke
-       */
-      stroke: [{
-        stroke: ["none", ...d()]
-      }],
-      // ---------------------
-      // --- Accessibility ---
-      // ---------------------
-      /**
-       * Forced Color Adjust
-       * @see https://tailwindcss.com/docs/forced-color-adjust
-       */
-      "forced-color-adjust": [{
-        "forced-color-adjust": ["auto", "none"]
-      }]
-    },
-    conflictingClassGroups: {
-      overflow: ["overflow-x", "overflow-y"],
-      overscroll: ["overscroll-x", "overscroll-y"],
-      inset: ["inset-x", "inset-y", "start", "end", "top", "right", "bottom", "left"],
-      "inset-x": ["right", "left"],
-      "inset-y": ["top", "bottom"],
-      flex: ["basis", "grow", "shrink"],
-      gap: ["gap-x", "gap-y"],
-      p: ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"],
-      px: ["pr", "pl"],
-      py: ["pt", "pb"],
-      m: ["mx", "my", "ms", "me", "mt", "mr", "mb", "ml"],
-      mx: ["mr", "ml"],
-      my: ["mt", "mb"],
-      size: ["w", "h"],
-      "font-size": ["leading"],
-      "fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
-      "fvn-ordinal": ["fvn-normal"],
-      "fvn-slashed-zero": ["fvn-normal"],
-      "fvn-figure": ["fvn-normal"],
-      "fvn-spacing": ["fvn-normal"],
-      "fvn-fraction": ["fvn-normal"],
-      "line-clamp": ["display", "overflow"],
-      rounded: ["rounded-s", "rounded-e", "rounded-t", "rounded-r", "rounded-b", "rounded-l", "rounded-ss", "rounded-se", "rounded-ee", "rounded-es", "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl"],
-      "rounded-s": ["rounded-ss", "rounded-es"],
-      "rounded-e": ["rounded-se", "rounded-ee"],
-      "rounded-t": ["rounded-tl", "rounded-tr"],
-      "rounded-r": ["rounded-tr", "rounded-br"],
-      "rounded-b": ["rounded-br", "rounded-bl"],
-      "rounded-l": ["rounded-tl", "rounded-bl"],
-      "border-spacing": ["border-spacing-x", "border-spacing-y"],
-      "border-w": ["border-w-x", "border-w-y", "border-w-s", "border-w-e", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
-      "border-w-x": ["border-w-r", "border-w-l"],
-      "border-w-y": ["border-w-t", "border-w-b"],
-      "border-color": ["border-color-x", "border-color-y", "border-color-s", "border-color-e", "border-color-t", "border-color-r", "border-color-b", "border-color-l"],
-      "border-color-x": ["border-color-r", "border-color-l"],
-      "border-color-y": ["border-color-t", "border-color-b"],
-      translate: ["translate-x", "translate-y", "translate-none"],
-      "translate-none": ["translate", "translate-x", "translate-y", "translate-z"],
-      "scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
-      "scroll-mx": ["scroll-mr", "scroll-ml"],
-      "scroll-my": ["scroll-mt", "scroll-mb"],
-      "scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
-      "scroll-px": ["scroll-pr", "scroll-pl"],
-      "scroll-py": ["scroll-pt", "scroll-pb"],
-      touch: ["touch-x", "touch-y", "touch-pz"],
-      "touch-x": ["touch"],
-      "touch-y": ["touch"],
-      "touch-pz": ["touch"]
-    },
-    conflictingClassGroupModifiers: {
-      "font-size": ["leading"]
-    },
-    orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
-  };
-}, jt = /* @__PURE__ */ bt(Gt);
-function P(...e) {
-  return jt(Xe(e));
-}
-const Lt = {
-  purple: "bg-purple-500",
-  green: "bg-green-500",
-  blue: "bg-blue-500",
-  yellow: "bg-yellow-400 !text-yellow-900",
-  red: "bg-red-500"
-}, _t = ({
-  id: e,
-  title: o,
-  price: r,
-  periodLabel: t,
-  features: n,
-  isSelected: s,
-  onSelect: a,
-  topBadge: p,
-  discountBadge: c,
-  premiumCallout: h,
-  bottomNote: x,
-  introPriceNote: S,
-  isBestValue: w = false,
-  ctaButton: y,
-  className: j,
-  children: z,
-  disabled: k = false,
-  ariaLabel: D,
-  onTrack: F,
-  trackingLabel: M,
-  componentName: L = "SubscriptionTile",
-  hideSelectionIndicator: N = false
-}) => {
-  const C = !!y, E = !N, m = s ? "bg-blue-600 text-white ring-4 ring-blue-600 ring-offset-4 ring-offset-white dark:ring-offset-gray-900 border-transparent" : "bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-md", V = () => {
-    !k && !C && (F == null ? void 0 : F({ action: "select", trackingLabel: M, componentName: L }), a());
-  }, J = (I) => {
-    !k && !C && (I.key === "Enter" || I.key === " ") && (I.preventDefault(), F == null ? void 0 : F({ action: "select", trackingLabel: M, componentName: L }), a());
-  }, H = (I) => {
-    I.stopPropagation(), F == null ? void 0 : F({ action: "cta_click", trackingLabel: M, componentName: L }), (y == null ? void 0 : y.onClick) && y.onClick();
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: P(
-        "relative rounded-2xl p-6 transition-all flex flex-col h-full",
-        // Add extra bottom padding for radio button or CTA button (not needed if hidden)
-        E && (C ? "pb-20" : "pb-14"),
-        k ? "opacity-50 cursor-not-allowed" : C ? "cursor-default" : "cursor-pointer",
-        m,
-        j
-      ),
-      onClick: V,
-      onKeyDown: J,
-      role: C ? "article" : "radio",
-      "aria-checked": C ? void 0 : s,
-      "aria-label": D || `${o} - ${r}${t || ""}`,
-      "aria-disabled": k,
-      tabIndex: C || k ? -1 : 0,
-      children: [
-        p && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10", children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: P(
-              Lt[p.color],
-              "text-white px-4 py-1.5 rounded-full text-sm font-semibold shadow-lg whitespace-nowrap"
-            ),
-            children: p.text
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-grow", children: [
-          /* @__PURE__ */ jsxs("div", { className: P("text-center mb-6", p && "mt-2"), children: [
-            /* @__PURE__ */ jsx(
-              "h3",
-              {
-                className: P(
-                  textVariants.heading.h4(),
-                  "mb-2",
-                  s ? "text-white" : ""
-                ),
-                children: o
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: P(
-                    "text-4xl font-bold",
-                    s ? "text-white" : "text-gray-900 dark:text-gray-100"
-                  ),
-                  children: r
-                }
-              ),
-              t && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: P(
-                    "text-lg",
-                    s ? "text-blue-100" : "text-gray-500 dark:text-gray-400"
-                  ),
-                  children: t
-                }
-              )
-            ] }),
-            c && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: P(
-                  "inline-flex items-center px-2 py-1 rounded-full text-sm font-semibold",
-                  s ? "bg-blue-500 text-white" : "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300"
-                ),
-                children: c.text
-              }
-            )
-          ] }),
-          z,
-          n.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-3 mb-6 flex-grow", children: n.map((I, U) => /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-            /* @__PURE__ */ jsx(
-              "svg",
-              {
-                className: P(
-                  "w-5 h-5 mr-3 flex-shrink-0",
-                  s ? "text-blue-200" : "text-green-500"
-                ),
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M5 13l4 4L19 7"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: P(
-                  "text-sm text-left",
-                  s ? "text-white" : "text-gray-700 dark:text-gray-300"
-                ),
-                children: I.replace(/^✓\s*/, "")
-              }
-            )
-          ] }, U)) }),
-          h && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: P(
-                "rounded-lg p-4 mb-4",
-                s ? "bg-blue-500/30" : "bg-gradient-to-r from-purple-50 to-blue-50 dark:from-purple-900/20 dark:to-blue-900/20"
-              ),
-              children: [
-                /* @__PURE__ */ jsx("div", { className: "flex items-center mb-2", children: /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: P(
-                      "font-semibold text-sm",
-                      s ? "text-white" : "text-purple-600 dark:text-purple-400"
-                    ),
-                    children: h.title
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(
-                  "ul",
-                  {
-                    className: P(
-                      "text-xs space-y-1",
-                      s ? "text-blue-100" : "text-gray-600 dark:text-gray-400"
-                    ),
-                    children: h.features.map((I, U) => /* @__PURE__ */ jsxs("li", { children: [
-                      "• ",
-                      I
-                    ] }, U))
-                  }
-                )
-              ]
-            }
-          ),
-          x && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: P(
-                "text-center text-sm font-medium mb-4",
-                s ? "text-blue-100" : "text-blue-600 dark:text-blue-400"
-              ),
-              children: x
-            }
-          ),
-          S && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: P(
-                "p-3 rounded-lg mt-auto",
-                s ? "bg-blue-500/30" : "bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800"
-              ),
-              children: /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: P(
-                    "text-sm font-semibold text-center",
-                    s ? "text-white" : "text-yellow-700 dark:text-yellow-300"
-                  ),
-                  children: S
-                }
-              )
-            }
-          )
-        ] }),
-        E && C && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-0 right-0 px-6", children: y.href ? /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: y.href,
-            className: P(
-              "block w-full py-3 font-semibold rounded-lg text-center transition-colors",
-              s ? "bg-white text-blue-600 hover:bg-gray-100" : "bg-blue-600 text-white hover:bg-blue-700"
-            ),
-            onClick: (I) => I.stopPropagation(),
-            children: y.label
-          }
-        ) : /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: H,
-            disabled: k,
-            className: P(
-              "w-full py-3 font-semibold rounded-lg transition-colors",
-              s ? "bg-white text-blue-600 hover:bg-gray-100" : "bg-blue-600 text-white hover:bg-blue-700",
-              k && "opacity-50 cursor-not-allowed"
-            ),
-            children: y.label
-          }
-        ) }),
-        E && !C && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: P(
-              "w-5 h-5 rounded-full border-2 flex items-center justify-center",
-              s ? "border-white bg-white" : "border-gray-300 dark:border-gray-600"
-            ),
-            children: s && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-blue-600" })
-          }
-        ) })
-      ]
-    }
-  );
-}, Kt = ({
-  title: e,
-  children: o,
-  error: r,
-  variant: t = "selection",
-  currentStatus: n,
-  primaryAction: s,
-  secondaryAction: a,
-  minTileWidth: p = 240,
-  className: c,
-  headerContent: h,
-  aboveProducts: x,
-  footerContent: S,
-  currentStatusLabel: w = "Current Status",
-  freeTileConfig: y,
-  onTrack: j,
-  trackingLabel: z,
-  componentName: k = "SubscriptionLayout"
-}) => {
-  var _a, _b, _c, _d;
-  const D = t === "selection" && s, F = () => {
-    j == null ? void 0 : j({ action: "primary_action", trackingLabel: z, componentName: k }), s == null ? void 0 : s.onClick();
-  }, M = () => {
-    j == null ? void 0 : j({ action: "secondary_action", trackingLabel: z, componentName: k }), a == null ? void 0 : a.onClick();
-  }, L = t === "cta" && y, N = {
-    display: "grid",
-    gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${p}px), 1fr))`,
-    gap: "1.5rem"
-  };
-  return /* @__PURE__ */ jsx(Card, { className: c, children: /* @__PURE__ */ jsxs(CardContent, { className: "pt-6", children: [
-    h,
-    n && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("h2", { className: P(textVariants.heading.h3(), "mb-4"), children: w }),
-      n.isActive ? /* @__PURE__ */ jsxs("div", { className: "bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 mb-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center mb-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "w-3 h-3 bg-green-500 rounded-full mr-3" }),
-          /* @__PURE__ */ jsx("span", { className: "font-semibold text-green-800 dark:text-green-300", children: ((_a = n.activeContent) == null ? void 0 : _a.title) || "Active Subscription" })
-        ] }),
-        ((_b = n.activeContent) == null ? void 0 : _b.fields) && n.activeContent.fields.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mt-4", children: n.activeContent.fields.map(
-          (C, E) => /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-green-600 dark:text-green-400", children: C.label }),
-            /* @__PURE__ */ jsx("p", { className: "font-semibold text-green-800 dark:text-green-300", children: C.value })
-          ] }, E)
-        ) })
-      ] }) : /* @__PURE__ */ jsxs("div", { className: "bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center mb-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "w-3 h-3 bg-yellow-500 rounded-full mr-3" }),
-          /* @__PURE__ */ jsx("span", { className: "font-semibold text-yellow-800 dark:text-yellow-300", children: ((_c = n.inactiveContent) == null ? void 0 : _c.title) || "No Active Subscription" })
-        ] }),
-        ((_d = n.inactiveContent) == null ? void 0 : _d.message) && /* @__PURE__ */ jsx("p", { className: "text-yellow-700 dark:text-yellow-400", children: n.inactiveContent.message })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("h2", { className: P(textVariants.heading.h3(), "mb-4"), children: e }),
-    x,
-    /* @__PURE__ */ jsxs("div", { style: N, children: [
-      L && /* @__PURE__ */ jsx(
-        _t,
-        {
-          id: "free",
-          title: y.title,
-          price: y.price,
-          periodLabel: y.periodLabel,
-          features: y.features,
-          isSelected: false,
-          onSelect: () => {
-          },
-          topBadge: y.topBadge,
-          ctaButton: y.ctaButton
-        }
-      ),
-      o
-    ] }),
-    S,
-    r && /* @__PURE__ */ jsx("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mt-6", children: /* @__PURE__ */ jsx("p", { className: "text-red-600 dark:text-red-400", children: r }) }),
-    D && /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-3 mt-6", children: [
-      a && /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: M,
-          disabled: a.disabled || a.loading,
-          variant: "outline",
-          className: "sm:flex-shrink-0",
-          children: a.label
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: F,
-          disabled: s.disabled || s.loading,
-          className: "flex-1",
-          children: s.label
-        }
-      )
-    ] })
-  ] }) });
-};
-function Yt({
-  options: e,
-  value: o,
-  onChange: r,
-  className: t,
-  disabled: n = false,
-  size: s = "md"
-}) {
-  const a = {
-    sm: "px-3 py-1.5 text-xs",
-    md: "px-4 py-2 text-sm",
-    lg: "px-6 py-3 text-base"
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: P(
-        "inline-flex rounded-lg bg-gray-100 dark:bg-gray-800 p-1",
-        n && "opacity-50",
-        t
-      ),
-      role: "radiogroup",
-      children: e.map((p) => {
-        const c = o === p.value;
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            role: "radio",
-            "aria-checked": c,
-            disabled: n,
-            onClick: () => !n && r(p.value),
-            className: P(
-              a[s],
-              "font-medium rounded-md transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
-              c ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white",
-              n && "cursor-not-allowed"
-            ),
-            children: p.label
-          },
-          p.value
-        );
-      })
-    }
-  );
-}
-createContext(
-  void 0
-);
 function AppSubscriptionsPage({
   subscription,
   rateLimitsConfig,
@@ -4319,7 +1155,7 @@ function AppSubscriptionsPage({
     if (!product.period) return false;
     const isYearly = product.period.includes("Y") || product.period.includes("year");
     return billingPeriod === "yearly" ? isYearly : !isYearly;
-  }).sort((a, b2) => parseFloat(a.price) - parseFloat(b2.price));
+  }).sort((a, b) => parseFloat(a.price) - parseFloat(b.price));
   const handlePeriodChange = useCallback(
     (period) => {
       setBillingPeriod(period);
@@ -4490,7 +1326,7 @@ function AppSubscriptionsPage({
     { value: "yearly", label: labels.billingYearly }
   ];
   return /* @__PURE__ */ jsx(
-    Kt,
+    SubscriptionLayout,
     {
       title: labels.title,
       error,
@@ -4532,7 +1368,7 @@ function AppSubscriptionsPage({
         } : void 0
       },
       aboveProducts: !isLoading && products.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ jsx(
-        Yt,
+        SegmentedControl,
         {
           options: billingPeriodOptions,
           value: billingPeriod,
@@ -4553,7 +1389,7 @@ function AppSubscriptionsPage({
       },
       children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }) }) : products.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-12 text-theme-text-secondary", children: labels.noProducts }) : filteredProducts.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-12 text-theme-text-secondary", children: labels.noProductsForPeriod }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
-          _t,
+          SubscriptionTile,
           {
             id: "free",
             title: labels.freeTierTitle,
@@ -4574,7 +1410,7 @@ function AppSubscriptionsPage({
         filteredProducts.map((product) => {
           var _a;
           return /* @__PURE__ */ jsx(
-            _t,
+            SubscriptionTile,
             {
               id: product.identifier,
               title: product.title,
@@ -4665,7 +1501,7 @@ function AppPricingPage({
     if (!product.period) return false;
     const isYearly = product.period.includes("Y") || product.period.includes("year");
     return billingPeriod === "yearly" ? isYearly : !isYearly;
-  }).sort((a, b2) => parseFloat(a.price) - parseFloat(b2.price));
+  }).sort((a, b) => parseFloat(a.price) - parseFloat(b.price));
   const getPeriodLabel = useCallback(
     (period) => {
       if (!period) return "";
@@ -4731,7 +1567,7 @@ function AppPricingPage({
     ] }) }),
     /* @__PURE__ */ jsx("section", { className: "pb-20 px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto", children: [
       /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-8", children: /* @__PURE__ */ jsx(
-        Yt,
+        SegmentedControl,
         {
           options: billingPeriodOptions,
           value: billingPeriod,
@@ -4750,7 +1586,7 @@ function AppPricingPage({
           },
           children: [
             /* @__PURE__ */ jsx(
-              _t,
+              SubscriptionTile,
               {
                 id: "free",
                 title: labels.freeTierTitle,
@@ -4807,7 +1643,7 @@ function AppPricingPage({
                 };
               }
               return /* @__PURE__ */ jsx(
-                _t,
+                SubscriptionTile,
                 {
                   id: product.identifier,
                   title: product.title,