syntra-ui 0.1.0

package/dist/syntra-ui.mjs

@@ -0,0 +1,1541 @@
+import { jsx as x, jsxs as L } from "react/jsx-runtime";
+import { createContext as Q, useState as I, useRef as tt, useMemo as M, useLayoutEffect as nt, useEffect as R, useCallback as et, useContext as D, forwardRef as k, useInsertionEffect as rt } from "react";
+const H = Q(null), at = {
+  primary: {
+    50: "#f0f5ff",
+    100: "#dce8ff",
+    200: "#b4cdff",
+    300: "#84adff",
+    400: "#4d8bff",
+    500: "#007AFF",
+    600: "#0064d6",
+    700: "#004fad",
+    800: "#003c85",
+    900: "#002a5e",
+    950: "#001d42"
+  },
+  gray: {
+    25: "#fcfcfd",
+    50: "#f8f8fa",
+    100: "#f2f2f7",
+    200: "#e5e5ea",
+    300: "#d1d1d6",
+    400: "#aeaeb2",
+    500: "#8e8e93",
+    600: "#636366",
+    700: "#48484a",
+    800: "#3a3a3c",
+    900: "#2c2c2e",
+    950: "#1c1c1e"
+  },
+  red: {
+    50: "#fff5f5",
+    100: "#ffe3e3",
+    200: "#ffc9c9",
+    300: "#ffa8a8",
+    400: "#ff7e7e",
+    500: "#FF3B30",
+    600: "#d63028",
+    700: "#ad2620",
+    800: "#851d19",
+    900: "#5e1412",
+    950: "#420e0d"
+  },
+  orange: {
+    50: "#fff8f0",
+    100: "#ffecdb",
+    200: "#ffd5b0",
+    300: "#ffba7d",
+    400: "#ff9d4d",
+    500: "#FF9500",
+    600: "#d67d00",
+    700: "#ad6500",
+    800: "#854d00",
+    900: "#5e3700",
+    950: "#422700"
+  },
+  yellow: {
+    50: "#fffcf0",
+    100: "#fff7db",
+    200: "#ffecb0",
+    300: "#ffe07d",
+    400: "#ffd44d",
+    500: "#FFCC00",
+    600: "#d6ab00",
+    700: "#ad8a00",
+    800: "#856a00",
+    900: "#5e4b00",
+    950: "#423500"
+  },
+  green: {
+    50: "#f0faf2",
+    100: "#dbf5e0",
+    200: "#b0e8bc",
+    300: "#7dd995",
+    400: "#4dca6f",
+    500: "#34C759",
+    600: "#2ba74a",
+    700: "#23873c",
+    800: "#1b682e",
+    900: "#134a21",
+    950: "#0d3417"
+  },
+  teal: {
+    50: "#f0fcfa",
+    100: "#dbf8f3",
+    200: "#b0f0e4",
+    300: "#7de6d2",
+    400: "#4ddbbf",
+    500: "#5AC8FA",
+    600: "#4ba8d2",
+    700: "#3c88aa",
+    800: "#2e6983",
+    900: "#204b5d",
+    950: "#163542"
+  },
+  blue: {
+    50: "#f0f5ff",
+    100: "#dce8ff",
+    200: "#b4cdff",
+    300: "#84adff",
+    400: "#4d8bff",
+    500: "#007AFF",
+    600: "#0064d6",
+    700: "#004fad",
+    800: "#003c85",
+    900: "#002a5e",
+    950: "#001d42"
+  },
+  indigo: {
+    50: "#f2f0ff",
+    100: "#e3dbff",
+    200: "#c4b0ff",
+    300: "#a27dff",
+    400: "#814dff",
+    500: "#5856D6",
+    600: "#4944b3",
+    700: "#3b3791",
+    800: "#2d2a70",
+    900: "#201e50",
+    950: "#161538"
+  },
+  purple: {
+    50: "#f8f0ff",
+    100: "#efdbff",
+    200: "#dcb0ff",
+    300: "#c67dff",
+    400: "#b04dff",
+    500: "#AF52DE",
+    600: "#9244b9",
+    700: "#763796",
+    800: "#5b2a73",
+    900: "#401e52",
+    950: "#2d1539"
+  },
+  pink: {
+    50: "#fff0f5",
+    100: "#ffdbea",
+    200: "#ffb0d1",
+    300: "#ff7db4",
+    400: "#ff4d98",
+    500: "#FF2D55",
+    600: "#d62647",
+    700: "#ad1f39",
+    800: "#85182c",
+    900: "#5e1120",
+    950: "#420c16"
+  },
+  background: {
+    default: "#ffffff",
+    emphasis: "#f2f2f7",
+    muted: "#f8f8fa",
+    subtle: "#fcfcfd"
+  },
+  foreground: {
+    default: "#1c1c1e",
+    emphasis: "#000000",
+    muted: "#636366",
+    subtle: "#8e8e93"
+  },
+  border: {
+    default: "#d1d1d6",
+    emphasis: "#aeaeb2",
+    muted: "#e5e5ea",
+    subtle: "#f2f2f7"
+  }
+}, ot = {
+  primary: {
+    50: "#001a3d",
+    100: "#002455",
+    200: "#003580",
+    300: "#0050b3",
+    400: "#0068de",
+    500: "#0A84FF",
+    600: "#3d9eff",
+    700: "#6db5ff",
+    800: "#9dccff",
+    900: "#cce3ff",
+    950: "#e8f2ff"
+  },
+  gray: {
+    25: "#1c1c1e",
+    50: "#2c2c2e",
+    100: "#3a3a3c",
+    200: "#48484a",
+    300: "#636366",
+    400: "#8e8e93",
+    500: "#aeaeb2",
+    600: "#d1d1d6",
+    700: "#e5e5ea",
+    800: "#f2f2f7",
+    900: "#f8f8fa",
+    950: "#fcfcfd"
+  },
+  red: {
+    50: "#3d0a08",
+    100: "#551210",
+    200: "#801f1b",
+    300: "#b33228",
+    400: "#de4a3d",
+    500: "#FF453A",
+    600: "#ff6b63",
+    700: "#ff918b",
+    800: "#ffb8b4",
+    900: "#ffdedd",
+    950: "#fff0ef"
+  },
+  orange: {
+    50: "#3d2400",
+    100: "#553300",
+    200: "#804d00",
+    300: "#b36d00",
+    400: "#de8d00",
+    500: "#FF9F0A",
+    600: "#ffb43d",
+    700: "#ffc96d",
+    800: "#ffdd9d",
+    900: "#fff0cc",
+    950: "#fff8e8"
+  },
+  yellow: {
+    50: "#3d3200",
+    100: "#554500",
+    200: "#806800",
+    300: "#b39200",
+    400: "#deb800",
+    500: "#FFD60A",
+    600: "#ffdf3d",
+    700: "#ffe86d",
+    800: "#fff09d",
+    900: "#fff7cc",
+    950: "#fffbe8"
+  },
+  green: {
+    50: "#0a3015",
+    100: "#10431e",
+    200: "#1a6630",
+    300: "#258f44",
+    400: "#2fb85a",
+    500: "#30D158",
+    600: "#5ddc7c",
+    700: "#89e6a0",
+    800: "#b5f0c3",
+    900: "#e0f9e6",
+    950: "#f0fcf3"
+  },
+  indigo: {
+    50: "#141238",
+    100: "#1d1a50",
+    200: "#2c2980",
+    300: "#3f3cb3",
+    400: "#5351de",
+    500: "#5E5CE6",
+    600: "#807feb",
+    700: "#a1a0f0",
+    800: "#c2c1f5",
+    900: "#e2e2fa",
+    950: "#f2f2fd"
+  },
+  purple: {
+    50: "#2a1239",
+    100: "#3b1a50",
+    200: "#582880",
+    300: "#7b39b3",
+    400: "#9d4bde",
+    500: "#BF5AF2",
+    600: "#cf7ef5",
+    700: "#dda1f7",
+    800: "#ecc4fa",
+    900: "#f7e5fd",
+    950: "#fbf2fe"
+  },
+  pink: {
+    50: "#3d0a1c",
+    100: "#551028",
+    200: "#801a3e",
+    300: "#b32857",
+    400: "#de3672",
+    500: "#FF375F",
+    600: "#ff6282",
+    700: "#ff8da5",
+    800: "#ffb8c7",
+    900: "#ffe3ea",
+    950: "#fff2f5"
+  },
+  teal: {
+    50: "#0a2e3d",
+    100: "#104055",
+    200: "#1a6180",
+    300: "#2588b3",
+    400: "#2fb0de",
+    500: "#64D2FF",
+    600: "#85dcff",
+    700: "#a5e5ff",
+    800: "#c5eeff",
+    900: "#e5f7ff",
+    950: "#f2fbff"
+  },
+  blue: {
+    50: "#001a3d",
+    100: "#002455",
+    200: "#003580",
+    300: "#0050b3",
+    400: "#0068de",
+    500: "#0A84FF",
+    600: "#3d9eff",
+    700: "#6db5ff",
+    800: "#9dccff",
+    900: "#cce3ff",
+    950: "#e8f2ff"
+  },
+  background: {
+    default: "#000000",
+    emphasis: "#1c1c1e",
+    muted: "#2c2c2e",
+    subtle: "#3a3a3c"
+  },
+  foreground: {
+    default: "#f2f2f7",
+    emphasis: "#ffffff",
+    muted: "#aeaeb2",
+    subtle: "#8e8e93"
+  },
+  border: {
+    default: "#48484a",
+    emphasis: "#636366",
+    muted: "#3a3a3c",
+    subtle: "#2c2c2e"
+  }
+}, G = {
+  fontFamily: {
+    sans: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif',
+    mono: '"SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, "Cascadia Code", "Courier New", monospace'
+  },
+  fontSize: {
+    "2xs": "11px",
+    xs: "12px",
+    sm: "13px",
+    base: "15px",
+    md: "17px",
+    lg: "20px",
+    xl: "24px",
+    "2xl": "28px",
+    "3xl": "34px",
+    "4xl": "48px"
+  },
+  fontWeight: {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  },
+  lineHeight: {
+    tight: "1.2",
+    normal: "1.47",
+    relaxed: "1.6"
+  },
+  letterSpacing: {
+    tight: "-0.02em",
+    normal: "0em",
+    wide: "0.02em"
+  }
+}, K = {
+  px: "1px",
+  0: "0px",
+  0.5: "2px",
+  1: "4px",
+  1.5: "6px",
+  2: "8px",
+  2.5: "10px",
+  3: "12px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  8: "32px",
+  10: "40px",
+  12: "48px",
+  16: "64px",
+  20: "80px",
+  24: "96px"
+}, V = {
+  none: "0px",
+  xs: "4px",
+  sm: "6px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  "2xl": "20px",
+  full: "9999px"
+}, it = {
+  none: "none",
+  xs: "0 1px 2px rgba(0, 0, 0, 0.04)",
+  sm: "0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)",
+  md: "0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04)",
+  lg: "0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04)",
+  xl: "0 20px 25px rgba(0, 0, 0, 0.10), 0 8px 10px rgba(0, 0, 0, 0.04)",
+  "2xl": "0 25px 50px rgba(0, 0, 0, 0.15)"
+}, st = {
+  none: "none",
+  xs: "0 1px 2px rgba(0, 0, 0, 0.20)",
+  sm: "0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20)",
+  md: "0 4px 6px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.20)",
+  lg: "0 10px 15px rgba(0, 0, 0, 0.30), 0 4px 6px rgba(0, 0, 0, 0.20)",
+  xl: "0 20px 25px rgba(0, 0, 0, 0.35), 0 8px 10px rgba(0, 0, 0, 0.20)",
+  "2xl": "0 25px 50px rgba(0, 0, 0, 0.45)"
+}, Y = {
+  duration: {
+    fast: "100ms",
+    normal: "200ms",
+    slow: "350ms",
+    slower: "500ms"
+  },
+  easing: {
+    default: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+    in: "cubic-bezier(0.42, 0, 1, 1)",
+    out: "cubic-bezier(0, 0, 0.58, 1)",
+    inOut: "cubic-bezier(0.42, 0, 0.58, 1)",
+    spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
+  }
+}, lt = {
+  colors: at,
+  typography: G,
+  spacing: K,
+  borderRadius: V,
+  shadows: it,
+  transitions: Y
+}, dt = {
+  colors: ot,
+  typography: G,
+  spacing: K,
+  borderRadius: V,
+  shadows: st,
+  transitions: Y
+};
+function ft(t) {
+  const e = t.replace("#", "");
+  if (/^[0-9a-fA-F]{3}$/.test(e))
+    return e[0] + e[0] + e[1] + e[1] + e[2] + e[2];
+  if (/^[0-9a-fA-F]{6}$/.test(e))
+    return e;
+  throw new Error(`[syntra] Invalid hex color: "${t}"`);
+}
+function ct(t) {
+  const e = ft(t), n = parseInt(e.slice(0, 2), 16) / 255, r = parseInt(e.slice(2, 4), 16) / 255, a = parseInt(e.slice(4, 6), 16) / 255, o = Math.max(n, r, a), i = Math.min(n, r, a), l = (o + i) / 2;
+  if (o === i) return { h: 0, s: 0, l };
+  const s = o - i, d = l > 0.5 ? s / (2 - o - i) : s / (o + i);
+  let c = 0;
+  return o === n ? c = ((r - a) / s + (r < a ? 6 : 0)) / 6 : o === r ? c = ((a - n) / s + 2) / 6 : c = ((n - r) / s + 4) / 6, { h: c * 360, s: d, l };
+}
+function ut(t) {
+  const { h: e, s: n, l: r } = t;
+  if (n === 0)
+    return `#${Math.round(r * 255).toString(16).padStart(2, "0").repeat(3)}`;
+  const a = (u, f, y) => {
+    const p = y < 0 ? y + 1 : y > 1 ? y - 1 : y;
+    return p < 1 / 6 ? u + (f - u) * 6 * p : p < 1 / 2 ? f : p < 2 / 3 ? u + (f - u) * (2 / 3 - p) * 6 : u;
+  }, o = r < 0.5 ? r * (1 + n) : r + n - r * n, i = 2 * r - o, l = e / 360, s = Math.round(a(i, o, l + 1 / 3) * 255), d = Math.round(a(i, o, l) * 255), c = Math.round(a(i, o, l - 1 / 3) * 255);
+  return `#${s.toString(16).padStart(2, "0")}${d.toString(16).padStart(2, "0")}${c.toString(16).padStart(2, "0")}`;
+}
+const bt = {
+  50: 0.97,
+  100: 0.94,
+  200: 0.86,
+  300: 0.76,
+  400: 0.64,
+  500: 0.5,
+  600: 0.42,
+  700: 0.35,
+  800: 0.27,
+  900: 0.2,
+  950: 0.14
+};
+function gt(t) {
+  const e = ct(t), n = {};
+  for (const [r, a] of Object.entries(bt)) {
+    const o = { ...e };
+    o.l = a, a > 0.9 ? o.s = e.s * 0.6 : (a > 0.8 || a < 0.2) && (o.s = e.s * 0.8), n[r] = ut(o);
+  }
+  return n;
+}
+function P(t) {
+  return !!(t && typeof t == "object" && !Array.isArray(t));
+}
+function U(t, ...e) {
+  const n = { ...t };
+  for (const r of e)
+    if (P(r))
+      for (const a of Object.keys(r)) {
+        const o = r[a];
+        o !== void 0 && (P(o) && P(n[a]) ? n[a] = U(
+          n[a],
+          o
+        ) : n[a] = o);
+      }
+  return n;
+}
+const yt = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+function j(t, e) {
+  if (typeof t == "string")
+    return gt(t);
+  const n = { ...e };
+  for (const r of yt)
+    t[r] !== void 0 && (n[r] = t[r]);
+  return n;
+}
+const pt = [
+  "primary",
+  "gray",
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "teal",
+  "blue",
+  "indigo",
+  "purple",
+  "pink"
+];
+function mt(t, e) {
+  if (!t) return e.colors;
+  const n = { ...e.colors };
+  for (const r of pt) {
+    const a = t[r];
+    if (a !== void 0)
+      if (r === "gray") {
+        const o = j(a, e.colors.gray);
+        n.gray = {
+          ...o,
+          25: e.colors.gray[25]
+        };
+      } else
+        n[r] = j(a, e.colors[r]);
+  }
+  return t.background && (n.background = { ...n.background, ...t.background }), t.foreground && (n.foreground = { ...n.foreground, ...t.foreground }), t.border && (n.border = { ...n.border, ...t.border }), n;
+}
+function O(t, e = "light") {
+  const n = e === "light" ? lt : dt;
+  if (!t) return n;
+  const r = mt(t.colors, n), { colors: a, ...o } = t, i = U(
+    n,
+    o
+  );
+  return i.colors = r, i;
+}
+function F(t, e, n) {
+  for (const [r, a] of Object.entries(t)) {
+    const o = `${e}-${r}`;
+    typeof a == "string" ? n[o] = a : typeof a == "number" ? n[o] = String(a) : a && typeof a == "object" && !Array.isArray(a) && F(a, o, n);
+  }
+}
+function ht(t, e = "syntra") {
+  const n = {};
+  return F(
+    t.colors,
+    `--${e}-color`,
+    n
+  ), F(
+    t.typography,
+    `--${e}-font`,
+    n
+  ), F(
+    t.spacing,
+    `--${e}-space`,
+    n
+  ), F(
+    t.borderRadius,
+    `--${e}-radius`,
+    n
+  ), F(
+    t.shadows,
+    `--${e}-shadow`,
+    n
+  ), F(
+    t.transitions,
+    `--${e}-transition`,
+    n
+  ), n;
+}
+function xt(t, e = "syntra", n = document.documentElement) {
+  const r = ht(t, e);
+  for (const [a, o] of Object.entries(r))
+    n.style.setProperty(a, o);
+}
+function vt(t = "syntra", e = document.documentElement) {
+  const n = e.style, r = [];
+  for (let a = 0; a < n.length; a++) {
+    const o = n[a];
+    o.startsWith(`--${t}-`) && r.push(o);
+  }
+  for (const a of r)
+    n.removeProperty(a);
+}
+function _t() {
+  const [t, e] = I(() => typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+  return R(() => {
+    const n = window.matchMedia("(prefers-color-scheme: dark)"), r = (a) => {
+      e(a.matches ? "dark" : "light");
+    };
+    return n.addEventListener("change", r), () => n.removeEventListener("change", r);
+  }, []), t;
+}
+function an({
+  theme: t,
+  darkTheme: e,
+  mode: n = "system",
+  cssVarPrefix: r = "syntra",
+  children: a
+}) {
+  const [o, i] = I(n), l = _t(), s = tt(null), d = o === "system" ? l : o, c = M(
+    () => O(t, "light"),
+    [t]
+  ), u = M(
+    () => O(e ?? t, "dark"),
+    [e, t]
+  ), f = d === "dark" ? u : c;
+  nt(() => {
+    const b = s.current;
+    b && xt(f, r, b);
+  }, [f, r]), R(() => {
+    const b = s.current;
+    return () => {
+      b && vt(r, b);
+    };
+  }, [r]);
+  const y = et((b) => {
+    i(b);
+  }, []), p = M(
+    () => ({
+      theme: f,
+      mode: o,
+      resolvedMode: d,
+      setMode: y,
+      cssVarPrefix: r
+    }),
+    [f, o, d, y, r]
+  );
+  return /* @__PURE__ */ x(H.Provider, { value: p, children: /* @__PURE__ */ x(
+    "div",
+    {
+      ref: s,
+      "data-syntra-root": "",
+      "data-syntra-mode": d,
+      style: { display: "contents" },
+      children: a
+    }
+  ) });
+}
+function St() {
+  const t = D(H);
+  if (!t)
+    throw new Error("useSyntra must be used within a <SyntraProvider>");
+  return t;
+}
+function on() {
+  const { resolvedMode: t, setMode: e } = St();
+  return [t, e];
+}
+const wt = /* @__PURE__ */ new Set([
+  "px",
+  "0",
+  "0.5",
+  "1",
+  "1.5",
+  "2",
+  "2.5",
+  "3",
+  "4",
+  "5",
+  "6",
+  "8",
+  "10",
+  "12",
+  "16",
+  "20",
+  "24"
+]), kt = /* @__PURE__ */ new Set([
+  "none",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "full"
+]), Nt = /* @__PURE__ */ new Set([
+  "none",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl"
+]), zt = /* @__PURE__ */ new Set([
+  "2xs",
+  "xs",
+  "sm",
+  "base",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl"
+]), Ct = /* @__PURE__ */ new Set([
+  "regular",
+  "medium",
+  "semibold",
+  "bold"
+]), $t = /* @__PURE__ */ new Set([
+  "tight",
+  "normal",
+  "relaxed"
+]), Ft = /* @__PURE__ */ new Set([
+  "tight",
+  "normal",
+  "wide"
+]);
+function m(t, e) {
+  const n = String(t);
+  return wt.has(n) ? `var(--${e}-space-${n})` : typeof t == "number" ? `${t}px` : t;
+}
+function Tt(t, e) {
+  return kt.has(t) ? `var(--${e}-radius-${t})` : t;
+}
+function Et(t, e) {
+  return Nt.has(t) ? `var(--${e}-shadow-${t})` : t;
+}
+function S(t) {
+  return typeof t == "number" ? `${t}px` : t;
+}
+function X(t, e) {
+  return zt.has(t) ? `var(--${e}-font-fontSize-${t})` : t;
+}
+function Z(t, e) {
+  return Ct.has(t) ? `var(--${e}-font-fontWeight-${t})` : t;
+}
+function At(t, e) {
+  return $t.has(t) ? `var(--${e}-font-lineHeight-${t})` : t;
+}
+function q(t, e) {
+  return Ft.has(t) ? `var(--${e}-font-letterSpacing-${t})` : t;
+}
+function N(t, e = "syntra") {
+  const n = {};
+  return t.p != null && (n.padding = m(t.p, e)), t.px != null && (n.paddingLeft = m(t.px, e), n.paddingRight = m(t.px, e)), t.py != null && (n.paddingTop = m(t.py, e), n.paddingBottom = m(t.py, e)), t.pt != null && (n.paddingTop = m(t.pt, e)), t.pr != null && (n.paddingRight = m(t.pr, e)), t.pb != null && (n.paddingBottom = m(t.pb, e)), t.pl != null && (n.paddingLeft = m(t.pl, e)), t.m != null && (n.margin = m(t.m, e)), t.mx != null && (n.marginLeft = m(t.mx, e), n.marginRight = m(t.mx, e)), t.my != null && (n.marginTop = m(t.my, e), n.marginBottom = m(t.my, e)), t.mt != null && (n.marginTop = m(t.mt, e)), t.mr != null && (n.marginRight = m(t.mr, e)), t.mb != null && (n.marginBottom = m(t.mb, e)), t.ml != null && (n.marginLeft = m(t.ml, e)), t.gap != null && (n.gap = m(t.gap, e)), t.gapX != null && (n.columnGap = m(t.gapX, e)), t.gapY != null && (n.rowGap = m(t.gapY, e)), t.w != null && (n.width = S(t.w)), t.h != null && (n.height = S(t.h)), t.minW != null && (n.minWidth = S(t.minW)), t.minH != null && (n.minHeight = S(t.minH)), t.maxW != null && (n.maxWidth = S(t.maxW)), t.maxH != null && (n.maxHeight = S(t.maxH)), t.display != null && (n.display = t.display), t.position != null && (n.position = t.position), t.overflow != null && (n.overflow = t.overflow), t.inset != null && (n.inset = S(t.inset)), t.top != null && (n.top = S(t.top)), t.right != null && (n.right = S(t.right)), t.bottom != null && (n.bottom = S(t.bottom)), t.left != null && (n.left = S(t.left)), t.bg != null && (n.background = t.bg), t.color != null && (n.color = t.color), t.opacity != null && (n.opacity = t.opacity), t.radius != null && (n.borderRadius = Tt(t.radius, e)), t.shadow != null && (n.boxShadow = Et(t.shadow, e)), t.border != null && (n.border = t.border), t.borderColor != null && (n.borderColor = t.borderColor), t.borderWidth != null && (n.borderWidth = S(t.borderWidth)), t.flex != null && (n.flex = t.flex), t.flexGrow != null && (n.flexGrow = t.flexGrow), t.flexShrink != null && (n.flexShrink = t.flexShrink), t.flexBasis != null && (n.flexBasis = typeof t.flexBasis == "number" ? `${t.flexBasis}px` : t.flexBasis), t.alignSelf != null && (n.alignSelf = t.alignSelf), t.justifySelf != null && (n.justifySelf = t.justifySelf), n;
+}
+const Mt = /* @__PURE__ */ new Set([
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "gap",
+  "gapX",
+  "gapY",
+  "w",
+  "h",
+  "minW",
+  "minH",
+  "maxW",
+  "maxH",
+  "display",
+  "position",
+  "overflow",
+  "inset",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "bg",
+  "color",
+  "opacity",
+  "radius",
+  "shadow",
+  "border",
+  "borderColor",
+  "borderWidth",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "alignSelf",
+  "justifySelf"
+]);
+function z(t) {
+  const e = {}, n = {};
+  for (const r of Object.keys(t))
+    Mt.has(r) ? e[r] = t[r] : n[r] = t[r];
+  return {
+    styleProps: e,
+    rest: n
+  };
+}
+function C() {
+  return D(H)?.cssVarPrefix ?? "syntra";
+}
+function w(...t) {
+  const e = [];
+  for (const n of t)
+    if (!(!n && n !== 0)) {
+      if (typeof n == "string")
+        e.push(n);
+      else if (typeof n == "number")
+        e.push(String(n));
+      else if (Array.isArray(n)) {
+        const r = w(...n);
+        r && e.push(r);
+      }
+    }
+  return e.join(" ");
+}
+const Pt = k(
+  (t, e) => {
+    const { as: n = "div", className: r, style: a, children: o, ...i } = t, l = C(), { styleProps: s, rest: d } = z(i), c = N(s, l);
+    return /* @__PURE__ */ x(
+      n,
+      {
+        ...d,
+        ref: e,
+        className: w("syntra-box", r),
+        style: { ...c, ...a },
+        children: o
+      }
+    );
+  }
+);
+Pt.displayName = "Box";
+const Ht = k(
+  (t, e) => {
+    const {
+      as: n = "span",
+      className: r,
+      style: a,
+      children: o,
+      size: i,
+      weight: l,
+      lineHeight: s,
+      tracking: d,
+      align: c,
+      truncate: u,
+      lineClamp: f,
+      mono: y,
+      italic: p,
+      ...b
+    } = t, g = C(), { styleProps: _, rest: $ } = z(b), T = N(_, g), h = {};
+    i != null && (h.fontSize = X(String(i), g)), l != null && (h.fontWeight = Z(String(l), g)), s != null && (h.lineHeight = At(String(s), g)), d != null && (h.letterSpacing = q(String(d), g)), c != null && (h.textAlign = c), y && (h.fontFamily = `var(--${g}-font-fontFamily-mono)`), p && (h.fontStyle = "italic"), u && (h.overflow = "hidden", h.textOverflow = "ellipsis", h.whiteSpace = "nowrap"), f != null && (h.display = "-webkit-box", h.WebkitLineClamp = f, h.WebkitBoxOrient = "vertical", h.overflow = "hidden");
+    const E = {};
+    return u && (E["data-truncate"] = ""), f != null && (E["data-line-clamp"] = String(f)), /* @__PURE__ */ x(
+      n,
+      {
+        ...$,
+        ...E,
+        ref: e,
+        className: w("syntra-text", r),
+        style: { ...h, ...T, ...a },
+        children: o
+      }
+    );
+  }
+);
+Ht.displayName = "Text";
+const Wt = {
+  h1: { size: "4xl", weight: "bold", tracking: "tight" },
+  h2: { size: "3xl", weight: "bold", tracking: "tight" },
+  h3: { size: "2xl", weight: "semibold", tracking: "tight" },
+  h4: { size: "xl", weight: "semibold", tracking: void 0 },
+  h5: { size: "lg", weight: "semibold", tracking: void 0 },
+  h6: { size: "md", weight: "medium", tracking: void 0 }
+}, jt = k(
+  (t, e) => {
+    const {
+      as: n,
+      className: r,
+      style: a,
+      children: o,
+      level: i = "h2",
+      size: l,
+      weight: s,
+      tracking: d,
+      ...c
+    } = t, u = n || i, f = C(), { styleProps: y, rest: p } = z(c), b = N(y, f), g = Wt[i], _ = l ?? g.size, $ = s ?? g.weight, T = d ?? g.tracking, h = {
+      fontSize: X(String(_), f),
+      fontWeight: Z(String($), f)
+    };
+    return T != null && (h.letterSpacing = q(String(T), f)), /* @__PURE__ */ x(
+      u,
+      {
+        ...p,
+        ref: e,
+        className: w("syntra-heading", r),
+        style: { ...h, ...b, ...a },
+        children: o
+      }
+    );
+  }
+);
+jt.displayName = "Heading";
+const Ot = k(
+  (t, e) => {
+    const {
+      as: n = "div",
+      className: r,
+      style: a,
+      children: o,
+      direction: i,
+      align: l,
+      justify: s,
+      wrap: d,
+      inline: c,
+      ...u
+    } = t, f = C(), { styleProps: y, rest: p } = z(u), b = N(y, f), g = {
+      display: c ? "inline-flex" : "flex"
+    };
+    return i != null && (g.flexDirection = i), l != null && (g.alignItems = l), s != null && (g.justifyContent = s), d != null && (g.flexWrap = d), /* @__PURE__ */ x(
+      n,
+      {
+        ...p,
+        ref: e,
+        className: w("syntra-flex", r),
+        style: { ...g, ...b, ...a },
+        children: o
+      }
+    );
+  }
+);
+Ot.displayName = "Flex";
+const Bt = k(
+  (t, e) => {
+    const {
+      as: n = "div",
+      className: r,
+      style: a,
+      children: o,
+      direction: i = "vertical",
+      align: l,
+      justify: s,
+      wrap: d,
+      ...c
+    } = t, u = C(), { styleProps: f, rest: y } = z(c), p = N(f, u), b = {
+      display: "flex",
+      flexDirection: i === "horizontal" ? "row" : "column"
+    };
+    l != null && (b.alignItems = l), s != null && (b.justifyContent = s), d != null && (b.flexWrap = d);
+    const g = i === "horizontal" ? "horizontal" : "vertical";
+    return /* @__PURE__ */ x(
+      n,
+      {
+        ...y,
+        ref: e,
+        className: w("syntra-stack", r),
+        style: { ...b, ...p, ...a },
+        "data-orientation": g,
+        children: o
+      }
+    );
+  }
+);
+Bt.displayName = "Stack";
+function B(t) {
+  return typeof t == "number" ? `repeat(${t}, 1fr)` : t;
+}
+const Lt = k(
+  (t, e) => {
+    const {
+      as: n = "div",
+      className: r,
+      style: a,
+      children: o,
+      columns: i,
+      rows: l,
+      areas: s,
+      align: d,
+      justify: c,
+      inline: u,
+      ...f
+    } = t, y = C(), { styleProps: p, rest: b } = z(f), g = N(p, y), _ = {
+      display: u ? "inline-grid" : "grid"
+    };
+    return i != null && (_.gridTemplateColumns = B(i)), l != null && (_.gridTemplateRows = B(l)), s != null && (_.gridTemplateAreas = s), d != null && (_.alignItems = d), c != null && (_.justifyContent = c), /* @__PURE__ */ x(
+      n,
+      {
+        ...b,
+        ref: e,
+        className: w("syntra-grid", r),
+        style: { ..._, ...g, ...a },
+        children: o
+      }
+    );
+  }
+);
+Lt.displayName = "Grid";
+const It = k(
+  (t, e) => {
+    const {
+      as: n = "div",
+      className: r,
+      style: a,
+      children: o,
+      orientation: i = "horizontal",
+      color: l,
+      thickness: s = 1,
+      decorative: d = !0,
+      ...c
+    } = t, u = C(), { styleProps: f, rest: y } = z(c), p = N(f, u), b = l ?? `var(--${u}-color-border-default)`, g = typeof s == "number" ? `${s}px` : s, _ = i === "horizontal" ? {
+      width: "100%",
+      height: 0,
+      borderTop: `${g} solid ${b}`
+    } : {
+      height: "100%",
+      width: 0,
+      borderLeft: `${g} solid ${b}`
+    };
+    return /* @__PURE__ */ x(
+      n,
+      {
+        ...y,
+        ...d ? { "aria-hidden": !0 } : { role: "separator", "aria-orientation": i },
+        ref: e,
+        className: w("syntra-divider", r),
+        style: { ..._, ...p, ...a },
+        "data-orientation": i,
+        children: o
+      }
+    );
+  }
+);
+It.displayName = "Divider";
+const Rt = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  borderWidth: 0
+}, Dt = k(
+  (t, e) => {
+    const { as: n = "span", className: r, style: a, children: o, ...i } = t;
+    return /* @__PURE__ */ x(
+      n,
+      {
+        ...i,
+        ref: e,
+        className: r,
+        style: { ...Rt, ...a },
+        children: o
+      }
+    );
+  }
+);
+Dt.displayName = "VisuallyHidden";
+const A = /* @__PURE__ */ new Map();
+function W(t, e) {
+  rt(() => {
+    if ((A.get(t) ?? 0) === 0) {
+      const r = document.createElement("style");
+      r.setAttribute("data-syntra", t), r.textContent = e, document.head.appendChild(r);
+    }
+    return A.set(t, (A.get(t) ?? 0) + 1), () => {
+      const r = (A.get(t) ?? 1) - 1;
+      r <= 0 ? (A.delete(t), document.head.querySelector(`style[data-syntra="${t}"]`)?.remove()) : A.set(t, r);
+    };
+  }, [t, e]);
+}
+const Gt = `
+@keyframes syntra-spin {
+  to { transform: rotate(360deg); }
+}
+.syntra-spinner {
+  animation: syntra-spin 0.6s linear infinite;
+}
+`;
+function J({ size: t = "1em", color: e = "currentColor", className: n, style: r }) {
+  W("spinner", Gt);
+  const a = typeof t == "number" ? `${t}px` : t;
+  return /* @__PURE__ */ x(
+    "svg",
+    {
+      className: `syntra-spinner${n ? ` ${n}` : ""}`,
+      width: a,
+      height: a,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: e,
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      style: r,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ x("path", { d: "M12 2a10 10 0 0 1 10 10" })
+    }
+  );
+}
+J.displayName = "Spinner";
+const Kt = `
+.syntra-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  white-space: nowrap;
+  user-select: none;
+  vertical-align: middle;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: var(--_btn-fw);
+  font-size: var(--_btn-fz);
+  height: var(--_btn-h);
+  padding-left: var(--_btn-px);
+  padding-right: var(--_btn-px);
+  gap: var(--_btn-gap);
+  border-radius: var(--_btn-radius);
+  background: var(--_btn-bg);
+  color: var(--_btn-color);
+  border: 1px solid var(--_btn-border, transparent);
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
+  text-decoration: none;
+  outline: none;
+}
+.syntra-button:hover:not(:disabled):not([data-loading]) {
+  background: var(--_btn-bg-hover);
+  border-color: var(--_btn-border-hover, transparent);
+  color: var(--_btn-color-hover, var(--_btn-color));
+}
+.syntra-button:active:not(:disabled):not([data-loading]) {
+  background: var(--_btn-bg-active);
+}
+.syntra-button:focus-visible {
+  outline: 2px solid var(--_btn-ring);
+  outline-offset: 2px;
+}
+.syntra-button:disabled,
+.syntra-button[data-loading] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.syntra-button[data-loading] {
+  cursor: wait;
+  pointer-events: none;
+}
+.syntra-button[data-full-width] {
+  width: 100%;
+}
+.syntra-button[data-variant="link"] {
+  height: auto;
+  padding-left: 0;
+  padding-right: 0;
+  background: transparent;
+  border-color: transparent;
+}
+.syntra-button[data-variant="link"]:hover:not(:disabled) {
+  text-decoration: underline;
+  background: transparent;
+}
+.syntra-button-label[data-loading] {
+  opacity: 0;
+}
+.syntra-button-spinner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+`, Vt = {
+  xs: {
+    "--_btn-h": "28px",
+    "--_btn-px": "10px",
+    "--_btn-fz": "var(--syntra-font-fontSize-2xs)",
+    "--_btn-fw": "500",
+    "--_btn-radius": "var(--syntra-radius-sm)",
+    "--_btn-gap": "4px"
+  },
+  sm: {
+    "--_btn-h": "32px",
+    "--_btn-px": "12px",
+    "--_btn-fz": "var(--syntra-font-fontSize-xs)",
+    "--_btn-fw": "500",
+    "--_btn-radius": "var(--syntra-radius-sm)",
+    "--_btn-gap": "6px"
+  },
+  md: {
+    "--_btn-h": "36px",
+    "--_btn-px": "16px",
+    "--_btn-fz": "var(--syntra-font-fontSize-sm)",
+    "--_btn-fw": "500",
+    "--_btn-radius": "var(--syntra-radius-md)",
+    "--_btn-gap": "8px"
+  },
+  lg: {
+    "--_btn-h": "44px",
+    "--_btn-px": "20px",
+    "--_btn-fz": "var(--syntra-font-fontSize-md)",
+    "--_btn-fw": "500",
+    "--_btn-radius": "var(--syntra-radius-md)",
+    "--_btn-gap": "8px"
+  }
+};
+function Yt(t) {
+  return Vt[t];
+}
+function v(t, e) {
+  return t === "danger" ? `var(--syntra-color-red-${e})` : `var(--syntra-color-${t}-${e})`;
+}
+function Ut(t, e) {
+  const n = e === "neutral" ? "var(--syntra-color-foreground-subtle)" : e === "danger" ? "var(--syntra-color-red-500)" : `var(--syntra-color-${e}-500)`;
+  return (() => {
+    switch (t) {
+      case "solid":
+        return e === "neutral" ? {
+          "--_btn-bg": "var(--syntra-color-foreground-default)",
+          "--_btn-bg-hover": "var(--syntra-color-foreground-muted)",
+          "--_btn-bg-active": "var(--syntra-color-foreground-subtle)",
+          "--_btn-color": "var(--syntra-color-background-default)",
+          "--_btn-border": "transparent",
+          "--_btn-ring": n
+        } : {
+          "--_btn-bg": v(e, 500),
+          "--_btn-bg-hover": v(e, 600),
+          "--_btn-bg-active": v(e, 700),
+          "--_btn-color": "#fff",
+          "--_btn-border": "transparent",
+          "--_btn-ring": n
+        };
+      case "outline":
+        return e === "neutral" ? {
+          "--_btn-bg": "transparent",
+          "--_btn-bg-hover": "var(--syntra-color-background-emphasis)",
+          "--_btn-bg-active": "var(--syntra-color-background-subtle)",
+          "--_btn-color": "var(--syntra-color-foreground-default)",
+          "--_btn-border": "var(--syntra-color-border-default)",
+          "--_btn-border-hover": "var(--syntra-color-border-emphasis)",
+          "--_btn-ring": n
+        } : {
+          "--_btn-bg": "transparent",
+          "--_btn-bg-hover": v(e, 50),
+          "--_btn-bg-active": v(e, 100),
+          "--_btn-color": v(e, 500),
+          "--_btn-border": v(e, 500),
+          "--_btn-border-hover": v(e, 600),
+          "--_btn-ring": n
+        };
+      case "ghost":
+        return e === "neutral" ? {
+          "--_btn-bg": "transparent",
+          "--_btn-bg-hover": "var(--syntra-color-background-emphasis)",
+          "--_btn-bg-active": "var(--syntra-color-background-subtle)",
+          "--_btn-color": "var(--syntra-color-foreground-default)",
+          "--_btn-border": "transparent",
+          "--_btn-ring": n
+        } : {
+          "--_btn-bg": "transparent",
+          "--_btn-bg-hover": v(e, 50),
+          "--_btn-bg-active": v(e, 100),
+          "--_btn-color": v(e, 500),
+          "--_btn-border": "transparent",
+          "--_btn-ring": n
+        };
+      case "soft":
+        return e === "neutral" ? {
+          "--_btn-bg": "var(--syntra-color-background-emphasis)",
+          "--_btn-bg-hover": "var(--syntra-color-background-subtle)",
+          "--_btn-bg-active": "var(--syntra-color-border-default)",
+          "--_btn-color": "var(--syntra-color-foreground-default)",
+          "--_btn-border": "transparent",
+          "--_btn-ring": n
+        } : {
+          "--_btn-bg": v(e, 50),
+          "--_btn-bg-hover": v(e, 100),
+          "--_btn-bg-active": v(e, 200),
+          "--_btn-color": v(e, 700),
+          "--_btn-border": "transparent",
+          "--_btn-ring": n
+        };
+      case "link":
+        return e === "neutral" ? {
+          "--_btn-bg": "transparent",
+          "--_btn-bg-hover": "transparent",
+          "--_btn-bg-active": "transparent",
+          "--_btn-color": "var(--syntra-color-foreground-default)",
+          "--_btn-color-hover": "var(--syntra-color-foreground-muted)",
+          "--_btn-border": "transparent",
+          "--_btn-ring": n
+        } : {
+          "--_btn-bg": "transparent",
+          "--_btn-bg-hover": "transparent",
+          "--_btn-bg-active": "transparent",
+          "--_btn-color": v(e, 500),
+          "--_btn-color-hover": v(e, 600),
+          "--_btn-border": "transparent",
+          "--_btn-ring": n
+        };
+    }
+  })();
+}
+const Xt = k(
+  (t, e) => {
+    const {
+      as: n = "button",
+      variant: r = "solid",
+      colorScheme: a = "primary",
+      size: o = "md",
+      loading: i = !1,
+      disabled: l = !1,
+      fullWidth: s = !1,
+      leftSection: d,
+      rightSection: c,
+      className: u,
+      style: f,
+      children: y,
+      ...p
+    } = t;
+    W("button", Kt);
+    const b = C(), { styleProps: g, rest: _ } = z(p), $ = N(g, b), T = Ut(r, a), h = Yt(o), E = l || i;
+    return /* @__PURE__ */ L(
+      n,
+      {
+        ..._,
+        ref: e,
+        className: w("syntra-button", u),
+        disabled: n === "button" ? E : void 0,
+        "aria-disabled": n !== "button" && E ? !0 : void 0,
+        "data-variant": r,
+        "data-loading": i || void 0,
+        "data-full-width": s || void 0,
+        style: {
+          ...T,
+          ...h,
+          ...$,
+          ...f
+        },
+        children: [
+          i && /* @__PURE__ */ x("span", { className: "syntra-button-spinner", children: /* @__PURE__ */ x(J, {}) }),
+          d && /* @__PURE__ */ x("span", { className: "syntra-button-section", "data-position": "left", "aria-hidden": "true", children: d }),
+          /* @__PURE__ */ x("span", { className: "syntra-button-label", "data-loading": i || void 0, children: y }),
+          c && /* @__PURE__ */ x("span", { className: "syntra-button-section", "data-position": "right", "aria-hidden": "true", children: c })
+        ]
+      }
+    );
+  }
+);
+Xt.displayName = "Button";
+const Zt = `
+.syntra-input-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  width: var(--_input-w, auto);
+  height: var(--_input-h);
+  padding-left: var(--_input-px);
+  padding-right: var(--_input-px);
+  gap: var(--_input-gap);
+  border-radius: var(--_input-radius);
+  background: var(--_input-bg);
+  border: 1px solid var(--_input-border, transparent);
+  font-family: inherit;
+  font-size: var(--_input-fz);
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+.syntra-input-wrapper:focus-within:not([data-disabled]):not([data-variant="unstyled"]) {
+  border-color: var(--_input-focus-border);
+  box-shadow: 0 0 0 1px var(--_input-focus-border);
+}
+.syntra-input-wrapper[data-invalid]:not([data-disabled]) {
+  border-color: var(--_input-invalid-border);
+}
+.syntra-input-wrapper[data-invalid]:focus-within:not([data-disabled]) {
+  border-color: var(--_input-invalid-border);
+  box-shadow: 0 0 0 1px var(--_input-invalid-border);
+}
+.syntra-input-wrapper[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.syntra-input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0;
+}
+.syntra-input::placeholder {
+  color: var(--syntra-color-foreground-muted);
+}
+.syntra-input:disabled {
+  cursor: not-allowed;
+}
+.syntra-input-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--syntra-color-foreground-muted);
+}
+`, qt = {
+  xs: {
+    "--_input-h": "28px",
+    "--_input-px": "8px",
+    "--_input-fz": "var(--syntra-font-fontSize-2xs)",
+    "--_input-radius": "var(--syntra-radius-sm)",
+    "--_input-gap": "4px"
+  },
+  sm: {
+    "--_input-h": "32px",
+    "--_input-px": "10px",
+    "--_input-fz": "var(--syntra-font-fontSize-xs)",
+    "--_input-radius": "var(--syntra-radius-sm)",
+    "--_input-gap": "6px"
+  },
+  md: {
+    "--_input-h": "36px",
+    "--_input-px": "12px",
+    "--_input-fz": "var(--syntra-font-fontSize-sm)",
+    "--_input-radius": "var(--syntra-radius-md)",
+    "--_input-gap": "8px"
+  },
+  lg: {
+    "--_input-h": "44px",
+    "--_input-px": "16px",
+    "--_input-fz": "var(--syntra-font-fontSize-md)",
+    "--_input-radius": "var(--syntra-radius-md)",
+    "--_input-gap": "8px"
+  }
+};
+function Jt(t) {
+  return qt[t];
+}
+const Qt = {
+  outline: {
+    "--_input-bg": "var(--syntra-color-background-default)",
+    "--_input-border": "var(--syntra-color-border-default)",
+    "--_input-focus-border": "var(--syntra-color-primary-500)",
+    "--_input-invalid-border": "var(--syntra-color-red-500)"
+  },
+  filled: {
+    "--_input-bg": "var(--syntra-color-background-emphasis)",
+    "--_input-border": "transparent",
+    "--_input-focus-border": "var(--syntra-color-primary-500)",
+    "--_input-invalid-border": "var(--syntra-color-red-500)"
+  },
+  unstyled: {
+    "--_input-bg": "transparent",
+    "--_input-border": "transparent",
+    "--_input-focus-border": "transparent",
+    "--_input-invalid-border": "transparent"
+  }
+};
+function tn(t) {
+  return Qt[t];
+}
+const nn = k(
+  (t, e) => {
+    const {
+      variant: n = "outline",
+      size: r = "md",
+      invalid: a = !1,
+      leftSection: o,
+      rightSection: i,
+      wrapperClassName: l,
+      wrapperStyle: s,
+      className: d,
+      style: c,
+      disabled: u,
+      ...f
+    } = t;
+    W("input", Zt);
+    const y = C(), { styleProps: p, rest: b } = z(f), g = N(p, y), _ = tn(n), $ = Jt(r);
+    return /* @__PURE__ */ L(
+      "div",
+      {
+        className: w("syntra-input-wrapper", l),
+        "data-variant": n,
+        "data-size": r,
+        "data-invalid": a || void 0,
+        "data-disabled": u || void 0,
+        style: {
+          ..._,
+          ...$,
+          ...g,
+          ...s
+        },
+        children: [
+          o && /* @__PURE__ */ x("span", { className: "syntra-input-section", "data-position": "left", children: o }),
+          /* @__PURE__ */ x(
+            "input",
+            {
+              ...b,
+              ref: e,
+              className: w("syntra-input", d),
+              disabled: u,
+              "aria-invalid": a || void 0,
+              style: c
+            }
+          ),
+          i && /* @__PURE__ */ x("span", { className: "syntra-input-section", "data-position": "right", children: i })
+        ]
+      }
+    );
+  }
+);
+nn.displayName = "Input";
+export {
+  Pt as Box,
+  Xt as Button,
+  It as Divider,
+  Ot as Flex,
+  Lt as Grid,
+  jt as Heading,
+  nn as Input,
+  J as Spinner,
+  Bt as Stack,
+  an as SyntraProvider,
+  Ht as Text,
+  Dt as VisuallyHidden,
+  w as cn,
+  O as createSyntraTheme,
+  ot as darkColors,
+  U as deepMerge,
+  dt as defaultDarkTheme,
+  lt as defaultLightTheme,
+  z as extractStyleProps,
+  gt as generateColorScale,
+  at as lightColors,
+  N as resolveStyleProps,
+  St as useSyntra,
+  on as useSyntraMode
+};