@ranixxd/saju-design-system 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1157 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import p from "react";
+const S = "_button_1sr1u_1", M = "_sm_1sr1u_31", H = "_md_1sr1u_38", U = "_lg_1sr1u_45", P = "_primary_1sr1u_53", G = "_secondary_1sr1u_67", K = "_outline_1sr1u_80", V = "_ghost_1sr1u_92", J = "_danger_1sr1u_104", Q = "_fullWidth_1sr1u_120", X = "_loading_1sr1u_125", Y = "_icon_1sr1u_130", Z = "_label_1sr1u_136", O = "_spinner_1sr1u_142", ee = "_spin_1sr1u_142", w = {
+  button: S,
+  sm: M,
+  md: H,
+  lg: U,
+  primary: P,
+  secondary: G,
+  outline: K,
+  ghost: V,
+  danger: J,
+  fullWidth: Q,
+  loading: X,
+  icon: Y,
+  label: Z,
+  spinner: O,
+  spin: ee
+}, te = p.forwardRef(
+  ({
+    variant: o = "primary",
+    size: r = "md",
+    loading: t = !1,
+    leftIcon: s,
+    rightIcon: n,
+    fullWidth: a = !1,
+    disabled: c,
+    children: l,
+    className: d,
+    ...m
+  }, u) => {
+    const b = c || t;
+    return /* @__PURE__ */ i(
+      "button",
+      {
+        ref: u,
+        className: [
+          w.button,
+          w[o],
+          w[r],
+          a ? w.fullWidth : "",
+          t ? w.loading : "",
+          d ?? ""
+        ].filter(Boolean).join(" "),
+        disabled: b,
+        "aria-busy": t,
+        ...m,
+        children: [
+          t && /* @__PURE__ */ e("span", { className: w.spinner, "aria-hidden": "true" }),
+          !t && s && /* @__PURE__ */ e("span", { className: w.icon, children: s }),
+          /* @__PURE__ */ e("span", { className: w.label, children: l }),
+          !t && n && /* @__PURE__ */ e("span", { className: w.icon, children: n })
+        ]
+      }
+    );
+  }
+);
+te.displayName = "Button";
+const re = "_wrapper_1g7vq_1", oe = "_fullWidth_1g7vq_7", se = "_label_1g7vq_11", ne = "_inputWrapper_1g7vq_18", ae = "_error_1g7vq_33", le = "_success_1g7vq_41", ce = "_disabled_1g7vq_45", ie = "_sm_1g7vq_51", _e = "_input_1g7vq_18", de = "_md_1g7vq_60", me = "_lg_1g7vq_69", pe = "_addon_1g7vq_98", ue = "_helperText_1g7vq_106", he = "_errorText_1g7vq_113", g = {
+  wrapper: re,
+  fullWidth: oe,
+  label: se,
+  inputWrapper: ne,
+  error: ae,
+  success: le,
+  disabled: ce,
+  sm: ie,
+  input: _e,
+  md: de,
+  lg: me,
+  addon: pe,
+  helperText: ue,
+  errorText: he
+}, ge = p.forwardRef(
+  ({
+    size: o = "md",
+    label: r,
+    helperText: t,
+    errorMessage: s,
+    leftAddon: n,
+    rightAddon: a,
+    isError: c = !1,
+    isSuccess: l = !1,
+    fullWidth: d = !1,
+    id: m,
+    disabled: u,
+    className: b,
+    ...v
+  }, T) => {
+    const h = m ?? (r ? `input-${r.toLowerCase().replace(/\s+/g, "-")}` : void 0), C = c || !!s;
+    return /* @__PURE__ */ i("div", { className: [g.wrapper, d ? g.fullWidth : ""].filter(Boolean).join(" "), children: [
+      r && /* @__PURE__ */ e("label", { htmlFor: h, className: g.label, children: r }),
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: [
+            g.inputWrapper,
+            g[o],
+            C ? g.error : "",
+            l ? g.success : "",
+            u ? g.disabled : ""
+          ].filter(Boolean).join(" "),
+          children: [
+            n && /* @__PURE__ */ e("span", { className: g.addon, children: n }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                ref: T,
+                id: h,
+                disabled: u,
+                "aria-invalid": C,
+                "aria-describedby": s ? `${h}-error` : t ? `${h}-helper` : void 0,
+                className: [g.input, b ?? ""].filter(Boolean).join(" "),
+                ...v
+              }
+            ),
+            a && /* @__PURE__ */ e("span", { className: g.addon, children: a })
+          ]
+        }
+      ),
+      s && /* @__PURE__ */ e("p", { id: `${h}-error`, className: g.errorText, role: "alert", children: s }),
+      !s && t && /* @__PURE__ */ e("p", { id: `${h}-helper`, className: g.helperText, children: t })
+    ] });
+  }
+);
+ge.displayName = "Input";
+const fe = "_wrapper_19m1u_1", xe = "_fullWidth_19m1u_7", be = "_textarea_19m1u_10", ve = "_label_19m1u_14", we = "_error_19m1u_44", ye = "_disabled_19m1u_51", $e = "_helperText_19m1u_57", Ne = "_errorText_19m1u_63", N = {
+  wrapper: fe,
+  fullWidth: xe,
+  textarea: be,
+  label: ve,
+  error: we,
+  disabled: ye,
+  helperText: $e,
+  errorText: Ne
+}, Be = p.forwardRef(
+  ({
+    label: o,
+    helperText: r,
+    errorMessage: t,
+    isError: s = !1,
+    fullWidth: n = !1,
+    resize: a = "vertical",
+    id: c,
+    disabled: l,
+    className: d,
+    ...m
+  }, u) => {
+    const b = c ?? (o ? `textarea-${o.toLowerCase().replace(/\s+/g, "-")}` : void 0), v = s || !!t;
+    return /* @__PURE__ */ i("div", { className: [N.wrapper, n ? N.fullWidth : ""].filter(Boolean).join(" "), children: [
+      o && /* @__PURE__ */ e("label", { htmlFor: b, className: N.label, children: o }),
+      /* @__PURE__ */ e(
+        "textarea",
+        {
+          ref: u,
+          id: b,
+          disabled: l,
+          "aria-invalid": v,
+          className: [
+            N.textarea,
+            v ? N.error : "",
+            l ? N.disabled : "",
+            d ?? ""
+          ].filter(Boolean).join(" "),
+          style: { resize: a },
+          ...m
+        }
+      ),
+      t && /* @__PURE__ */ e("p", { className: N.errorText, role: "alert", children: t }),
+      !t && r && /* @__PURE__ */ e("p", { className: N.helperText, children: r })
+    ] });
+  }
+);
+Be.displayName = "Textarea";
+const Fe = "_wrapper_15dy7_1", ke = "_fullWidth_15dy7_7", Te = "_selectWrapper_15dy7_10", je = "_label_15dy7_14", qe = "_error_15dy7_36", Ce = "_disabled_15dy7_43", Ee = "_sm_15dy7_49", ze = "_select_15dy7_10", We = "_md_15dy7_50", Le = "_lg_15dy7_51", De = "_chevron_15dy7_71", Ie = "_helperText_15dy7_80", Re = "_errorText_15dy7_86", x = {
+  wrapper: Fe,
+  fullWidth: ke,
+  selectWrapper: Te,
+  label: je,
+  error: qe,
+  disabled: Ce,
+  sm: Ee,
+  select: ze,
+  md: We,
+  lg: Le,
+  chevron: De,
+  helperText: Ie,
+  errorText: Re
+}, Ae = p.forwardRef(
+  ({
+    size: o = "md",
+    label: r,
+    helperText: t,
+    errorMessage: s,
+    isError: n = !1,
+    fullWidth: a = !1,
+    options: c = [],
+    placeholder: l,
+    id: d,
+    disabled: m,
+    className: u,
+    children: b,
+    ...v
+  }, T) => {
+    const h = d ?? (r ? `select-${r.toLowerCase().replace(/\s+/g, "-")}` : void 0), C = n || !!s;
+    return /* @__PURE__ */ i("div", { className: [x.wrapper, a ? x.fullWidth : ""].filter(Boolean).join(" "), children: [
+      r && /* @__PURE__ */ e("label", { htmlFor: h, className: x.label, children: r }),
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: [
+            x.selectWrapper,
+            x[o],
+            C ? x.error : "",
+            m ? x.disabled : ""
+          ].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ i(
+              "select",
+              {
+                ref: T,
+                id: h,
+                disabled: m,
+                "aria-invalid": C,
+                className: [x.select, u ?? ""].filter(Boolean).join(" "),
+                ...v,
+                children: [
+                  l && /* @__PURE__ */ e("option", { value: "", disabled: !0, children: l }),
+                  b ?? c.map((z) => /* @__PURE__ */ e("option", { value: z.value, disabled: z.disabled, children: z.label }, z.value))
+                ]
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: x.chevron, "aria-hidden": "true", children: /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ e("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+          ]
+        }
+      ),
+      s && /* @__PURE__ */ e("p", { className: x.errorText, role: "alert", children: s }),
+      !s && t && /* @__PURE__ */ e("p", { className: x.helperText, children: t })
+    ] });
+  }
+);
+Ae.displayName = "Select";
+const Se = "_wrapper_19mpw_1", Me = "_label_19mpw_7", He = "_disabled_19mpw_15", Ue = "_input_19mpw_20", Pe = "_checkmark_19mpw_27", Ge = "_error_19mpw_71", Ke = "_labelText_19mpw_75", Ve = "_helperText_19mpw_81", Je = "_errorText_19mpw_88", y = {
+  wrapper: Se,
+  label: Me,
+  disabled: He,
+  input: Ue,
+  checkmark: Pe,
+  error: Ge,
+  labelText: Ke,
+  helperText: Ve,
+  errorText: Je
+}, Qe = p.forwardRef(
+  ({ label: o, helperText: r, errorMessage: t, isError: s = !1, indeterminate: n = !1, id: a, disabled: c, className: l, ...d }, m) => {
+    const u = p.useRef(null), b = (h) => {
+      u.current = h, typeof m == "function" ? m(h) : m && (m.current = h);
+    };
+    p.useEffect(() => {
+      u.current && (u.current.indeterminate = n);
+    }, [n]);
+    const v = a ?? (o ? `checkbox-${o.toLowerCase().replace(/\s+/g, "-")}` : void 0), T = s || !!t;
+    return /* @__PURE__ */ i("div", { className: y.wrapper, children: [
+      /* @__PURE__ */ i(
+        "label",
+        {
+          htmlFor: v,
+          className: [y.label, c ? y.disabled : ""].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                ref: b,
+                type: "checkbox",
+                id: v,
+                disabled: c,
+                "aria-invalid": T,
+                className: [y.input, T ? y.error : "", l ?? ""].filter(Boolean).join(" "),
+                ...d
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: y.checkmark, "aria-hidden": "true" }),
+            o && /* @__PURE__ */ e("span", { className: y.labelText, children: o })
+          ]
+        }
+      ),
+      t && /* @__PURE__ */ e("p", { className: y.errorText, role: "alert", children: t }),
+      !t && r && /* @__PURE__ */ e("p", { className: y.helperText, children: r })
+    ] });
+  }
+);
+Qe.displayName = "Checkbox";
+const Xe = "_wrapper_t377s_1", Ye = "_label_t377s_7", Ze = "_disabled_t377s_15", Oe = "_input_t377s_20", et = "_dot_t377s_27", tt = "_error_t377s_58", rt = "_labelText_t377s_62", ot = "_helperText_t377s_68", st = "_group_t377s_76", nt = "_groupLabel_t377s_85", at = "_options_t377s_92", lt = "_errorText_t377s_98", f = {
+  wrapper: Xe,
+  label: Ye,
+  disabled: Ze,
+  input: Oe,
+  dot: et,
+  error: tt,
+  labelText: rt,
+  helperText: ot,
+  group: st,
+  groupLabel: nt,
+  options: at,
+  errorText: lt
+}, R = p.forwardRef(
+  ({ label: o, helperText: r, isError: t = !1, id: s, disabled: n, className: a, ...c }, l) => {
+    const d = s ?? (o ? `radio-${o.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+    return /* @__PURE__ */ i("div", { className: f.wrapper, children: [
+      /* @__PURE__ */ i(
+        "label",
+        {
+          htmlFor: d,
+          className: [f.label, n ? f.disabled : ""].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                ref: l,
+                type: "radio",
+                id: d,
+                disabled: n,
+                "aria-invalid": t,
+                className: [f.input, t ? f.error : "", a ?? ""].filter(Boolean).join(" "),
+                ...c
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: f.dot, "aria-hidden": "true" }),
+            o && /* @__PURE__ */ e("span", { className: f.labelText, children: o })
+          ]
+        }
+      ),
+      r && /* @__PURE__ */ e("p", { className: f.helperText, children: r })
+    ] });
+  }
+);
+R.displayName = "Radio";
+const To = ({
+  name: o,
+  label: r,
+  options: t,
+  value: s,
+  onChange: n,
+  isError: a = !1,
+  errorMessage: c
+}) => /* @__PURE__ */ i("fieldset", { className: f.group, children: [
+  r && /* @__PURE__ */ e("legend", { className: f.groupLabel, children: r }),
+  /* @__PURE__ */ e("div", { className: f.options, children: t.map((l) => /* @__PURE__ */ e(
+    R,
+    {
+      name: o,
+      label: l.label,
+      value: l.value,
+      checked: s === l.value,
+      disabled: l.disabled,
+      isError: a,
+      onChange: () => n == null ? void 0 : n(l.value)
+    },
+    l.value
+  )) }),
+  c && /* @__PURE__ */ e("p", { className: f.errorText, role: "alert", children: c })
+] }), ct = "_wrapper_dgzcf_1", it = "_label_dgzcf_7", _t = "_disabled_dgzcf_15", dt = "_input_dgzcf_20", mt = "_track_dgzcf_27", pt = "_sm_dgzcf_38", ut = "_md_dgzcf_39", ht = "_lg_dgzcf_40", gt = "_thumb_dgzcf_42", ft = "_labelText_dgzcf_75", xt = "_helperText_dgzcf_81", $ = {
+  wrapper: ct,
+  label: it,
+  disabled: _t,
+  input: dt,
+  track: mt,
+  sm: pt,
+  md: ut,
+  lg: ht,
+  thumb: gt,
+  labelText: ft,
+  helperText: xt
+}, bt = p.forwardRef(
+  ({ size: o = "md", label: r, helperText: t, id: s, disabled: n, className: a, ...c }, l) => {
+    const d = s ?? (r ? `toggle-${r.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+    return /* @__PURE__ */ i("div", { className: $.wrapper, children: [
+      /* @__PURE__ */ i(
+        "label",
+        {
+          htmlFor: d,
+          className: [$.label, n ? $.disabled : ""].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                ref: l,
+                type: "checkbox",
+                role: "switch",
+                id: d,
+                disabled: n,
+                className: [$.input, a ?? ""].filter(Boolean).join(" "),
+                ...c
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: [$.track, $[o]].join(" "), "aria-hidden": "true", children: /* @__PURE__ */ e("span", { className: $.thumb }) }),
+            r && /* @__PURE__ */ e("span", { className: $.labelText, children: r })
+          ]
+        }
+      ),
+      t && /* @__PURE__ */ e("p", { className: $.helperText, children: t })
+    ] });
+  }
+);
+bt.displayName = "Toggle";
+const vt = "_badge_1mczn_1", wt = "_sm_1mczn_11", yt = "_md_1mczn_12", $t = "_neutral_1mczn_15", Nt = "_primary_1mczn_16", Bt = "_success_1mczn_17", Ft = "_warning_1mczn_18", kt = "_danger_1mczn_19", Tt = "_info_1mczn_20", jt = "_dotIndicator_1mczn_23", E = {
+  badge: vt,
+  sm: wt,
+  md: yt,
+  neutral: $t,
+  primary: Nt,
+  success: Bt,
+  warning: Ft,
+  danger: kt,
+  info: Tt,
+  dotIndicator: jt
+}, jo = ({
+  variant: o = "neutral",
+  size: r = "md",
+  dot: t = !1,
+  children: s,
+  className: n
+}) => /* @__PURE__ */ i(
+  "span",
+  {
+    className: [E.badge, E[o], E[r], t ? E.dot : "", n ?? ""].filter(Boolean).join(" "),
+    children: [
+      t && /* @__PURE__ */ e("span", { className: E.dotIndicator, "aria-hidden": "true" }),
+      s
+    ]
+  }
+), qt = "_tag_2pfl6_1", Ct = "_primary_2pfl6_14", Et = "_success_2pfl6_15", zt = "_warning_2pfl6_16", Wt = "_danger_2pfl6_17", Lt = "_label_2pfl6_19", Dt = "_removeBtn_2pfl6_21", W = {
+  tag: qt,
+  default: "_default_2pfl6_13",
+  primary: Ct,
+  success: Et,
+  warning: zt,
+  danger: Wt,
+  label: Lt,
+  removeBtn: Dt
+}, qo = ({ variant: o = "default", onRemove: r, children: t, className: s }) => /* @__PURE__ */ i("span", { className: [W.tag, W[o], s ?? ""].filter(Boolean).join(" "), children: [
+  /* @__PURE__ */ e("span", { className: W.label, children: t }),
+  r && /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      className: W.removeBtn,
+      onClick: r,
+      "aria-label": "Remove tag",
+      children: /* @__PURE__ */ e("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+    }
+  )
+] }), It = "_avatar_1ggx9_1", Rt = "_xs_1ggx9_14", At = "_sm_1ggx9_15", St = "_md_1ggx9_16", Mt = "_lg_1ggx9_17", Ht = "_xl_1ggx9_18", Ut = "_img_1ggx9_20", Pt = "_initials_1ggx9_26", L = {
+  avatar: It,
+  xs: Rt,
+  sm: At,
+  md: St,
+  lg: Mt,
+  xl: Ht,
+  img: Ut,
+  initials: Pt
+};
+function Gt(o) {
+  return o.split(" ").map((r) => r[0]).slice(0, 2).join("").toUpperCase();
+}
+function Kt(o) {
+  const r = [
+    "#3B82F6",
+    "#8B5CF6",
+    "#EC4899",
+    "#F59E0B",
+    "#10B981",
+    "#06B6D4",
+    "#EF4444",
+    "#F97316"
+  ];
+  let t = 0;
+  for (let s = 0; s < o.length; s++)
+    t = o.charCodeAt(s) + ((t << 5) - t);
+  return r[Math.abs(t) % r.length];
+}
+const Co = ({
+  src: o,
+  alt: r,
+  name: t,
+  size: s = "md",
+  className: n
+}) => {
+  const [a, c] = p.useState(!1), l = !o || a, d = t ? Gt(t) : "?", m = t ? Kt(t) : "#9CA3AF";
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      className: [L.avatar, L[s], n ?? ""].filter(Boolean).join(" "),
+      style: l ? { backgroundColor: m } : void 0,
+      "aria-label": r ?? t,
+      role: "img",
+      children: l ? /* @__PURE__ */ e("span", { className: L.initials, "aria-hidden": "true", children: d }) : /* @__PURE__ */ e(
+        "img",
+        {
+          src: o,
+          alt: r ?? t ?? "",
+          className: L.img,
+          onError: () => c(!0)
+        }
+      )
+    }
+  );
+}, Vt = "_card_tmi9g_1", Jt = "_padding_none_tmi9g_8", Qt = "_padding_sm_tmi9g_9", Xt = "_padding_md_tmi9g_10", Yt = "_padding_lg_tmi9g_11", Zt = "_shadow_none_tmi9g_14", Ot = "_shadow_sm_tmi9g_15", er = "_shadow_md_tmi9g_16", tr = "_shadow_lg_tmi9g_17", rr = "_bordered_tmi9g_20", or = "_hoverable_tmi9g_25", sr = "_header_tmi9g_35", nr = "_body_tmi9g_41", ar = "_footer_tmi9g_45", k = {
+  card: Vt,
+  padding_none: Jt,
+  padding_sm: Qt,
+  padding_md: Xt,
+  padding_lg: Yt,
+  shadow_none: Zt,
+  shadow_sm: Ot,
+  shadow_md: er,
+  shadow_lg: tr,
+  bordered: rr,
+  hoverable: or,
+  header: sr,
+  body: nr,
+  footer: ar
+}, Eo = ({
+  padding: o = "md",
+  shadow: r = "sm",
+  bordered: t = !0,
+  hoverable: s = !1,
+  className: n,
+  children: a,
+  ...c
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    className: [
+      k.card,
+      k[`padding_${o}`],
+      k[`shadow_${r}`],
+      t ? k.bordered : "",
+      s ? k.hoverable : "",
+      n ?? ""
+    ].filter(Boolean).join(" "),
+    ...c,
+    children: a
+  }
+), zo = ({
+  className: o,
+  children: r,
+  ...t
+}) => /* @__PURE__ */ e("div", { className: [k.header, o ?? ""].filter(Boolean).join(" "), ...t, children: r }), Wo = ({
+  className: o,
+  children: r,
+  ...t
+}) => /* @__PURE__ */ e("div", { className: [k.body, o ?? ""].filter(Boolean).join(" "), ...t, children: r }), Lo = ({
+  className: o,
+  children: r,
+  ...t
+}) => /* @__PURE__ */ e("div", { className: [k.footer, o ?? ""].filter(Boolean).join(" "), ...t, children: r }), lr = "_overlay_1eqx2_1", cr = "_fadeIn_1eqx2_1", ir = "_modal_1eqx2_13", _r = "_slideUp_1eqx2_1", dr = "_sm_1eqx2_26", mr = "_md_1eqx2_27", pr = "_lg_1eqx2_28", ur = "_xl_1eqx2_29", hr = "_full_1eqx2_30", gr = "_header_1eqx2_32", fr = "_title_1eqx2_41", xr = "_closeBtn_1eqx2_48", br = "_body_1eqx2_68", vr = "_footer_1eqx2_74", B = {
+  overlay: lr,
+  fadeIn: cr,
+  modal: ir,
+  slideUp: _r,
+  sm: dr,
+  md: mr,
+  lg: pr,
+  xl: ur,
+  full: hr,
+  header: gr,
+  title: fr,
+  closeBtn: xr,
+  body: br,
+  footer: vr
+}, Do = ({
+  isOpen: o,
+  onClose: r,
+  title: t,
+  size: s = "md",
+  closeOnOverlayClick: n = !0,
+  closeOnEscape: a = !0,
+  children: c,
+  footer: l,
+  className: d
+}) => (p.useEffect(() => {
+  if (!a) return;
+  const m = (u) => {
+    u.key === "Escape" && o && r();
+  };
+  return document.addEventListener("keydown", m), () => document.removeEventListener("keydown", m);
+}, [o, r, a]), p.useEffect(() => (o ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+  document.body.style.overflow = "";
+}), [o]), o ? /* @__PURE__ */ e(
+  "div",
+  {
+    className: B.overlay,
+    onClick: n ? r : void 0,
+    "aria-modal": "true",
+    role: "dialog",
+    "aria-labelledby": t ? "modal-title" : void 0,
+    children: /* @__PURE__ */ i(
+      "div",
+      {
+        className: [B.modal, B[s], d ?? ""].filter(Boolean).join(" "),
+        onClick: (m) => m.stopPropagation(),
+        children: [
+          t && /* @__PURE__ */ i("div", { className: B.header, children: [
+            /* @__PURE__ */ e("h2", { id: "modal-title", className: B.title, children: t }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: B.closeBtn,
+                onClick: r,
+                "aria-label": "Close modal",
+                children: /* @__PURE__ */ e("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("div", { className: B.body, children: c }),
+          l && /* @__PURE__ */ e("div", { className: B.footer, children: l })
+        ]
+      }
+    )
+  }
+) : null), wr = "_container_7pb5x_1", yr = "_toast_7pb5x_12", $r = "_slideInRight_7pb5x_1", Nr = "_info_7pb5x_28", Br = "_success_7pb5x_29", Fr = "_warning_7pb5x_30", kr = "_danger_7pb5x_31", Tr = "_icon_7pb5x_33", jr = "_content_7pb5x_45", qr = "_title_7pb5x_50", Cr = "_message_7pb5x_57", Er = "_closeBtn_7pb5x_64", F = {
+  container: wr,
+  toast: yr,
+  slideInRight: $r,
+  info: Nr,
+  success: Br,
+  warning: Fr,
+  danger: kr,
+  icon: Tr,
+  content: jr,
+  title: qr,
+  message: Cr,
+  closeBtn: Er
+}, zr = {
+  info: /* @__PURE__ */ i("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ e("path", { d: "M8 5v1M8 8v3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  success: /* @__PURE__ */ i("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ e("path", { d: "M5 8l2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  warning: /* @__PURE__ */ i("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ e("path", { d: "M8 2L15 14H1L8 2z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ e("path", { d: "M8 6v3M8 11v1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  danger: /* @__PURE__ */ i("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ e("path", { d: "M5.5 5.5l5 5M10.5 5.5l-5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] })
+}, Wr = ({
+  id: o,
+  variant: r = "info",
+  title: t,
+  message: s,
+  duration: n = 4e3,
+  onDismiss: a
+}) => (p.useEffect(() => {
+  if (n <= 0) return;
+  const c = setTimeout(() => a(o), n);
+  return () => clearTimeout(c);
+}, [o, n, a]), /* @__PURE__ */ i(
+  "div",
+  {
+    role: "alert",
+    "aria-live": "polite",
+    className: [F.toast, F[r]].join(" "),
+    children: [
+      /* @__PURE__ */ e("span", { className: F.icon, children: zr[r] }),
+      /* @__PURE__ */ i("div", { className: F.content, children: [
+        t && /* @__PURE__ */ e("p", { className: F.title, children: t }),
+        /* @__PURE__ */ e("p", { className: F.message, children: s })
+      ] }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: F.closeBtn,
+          onClick: () => a(o),
+          "aria-label": "Dismiss notification",
+          children: /* @__PURE__ */ e("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M11 3L3 11M3 3l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+        }
+      )
+    ]
+  }
+)), A = p.createContext(null), Io = ({ children: o }) => {
+  const [r, t] = p.useState([]), s = p.useCallback((a) => {
+    const c = Math.random().toString(36).slice(2);
+    t((l) => [...l, { ...a, id: c }]);
+  }, []), n = p.useCallback((a) => {
+    t((c) => c.filter((l) => l.id !== a));
+  }, []);
+  return /* @__PURE__ */ i(A.Provider, { value: { addToast: s, removeToast: n }, children: [
+    o,
+    /* @__PURE__ */ e("div", { className: F.container, "aria-live": "polite", "aria-label": "Notifications", children: r.map((a) => /* @__PURE__ */ e(Wr, { ...a, onDismiss: n }, a.id)) })
+  ] });
+};
+function Ro() {
+  const o = p.useContext(A);
+  if (!o) throw new Error("useToast must be used within ToastProvider");
+  return o;
+}
+const Lr = "_wrapper_mtqtk_1", Dr = "_tooltip_mtqtk_6", Ir = "_fadeIn_mtqtk_1", Rr = "_top_mtqtk_25", Ar = "_bottom_mtqtk_26", Sr = "_left_mtqtk_27", Mr = "_right_mtqtk_28", Hr = "_arrow_mtqtk_31", D = {
+  wrapper: Lr,
+  tooltip: Dr,
+  fadeIn: Ir,
+  top: Rr,
+  bottom: Ar,
+  left: Sr,
+  right: Mr,
+  arrow: Hr
+}, Ao = ({
+  content: o,
+  placement: r = "top",
+  delay: t = 300,
+  children: s,
+  className: n
+}) => {
+  const [a, c] = p.useState(!1), l = p.useRef(void 0), d = () => {
+    l.current = setTimeout(() => c(!0), t);
+  }, m = () => {
+    clearTimeout(l.current), c(!1);
+  };
+  return /* @__PURE__ */ i(
+    "span",
+    {
+      className: D.wrapper,
+      onMouseEnter: d,
+      onMouseLeave: m,
+      onFocus: d,
+      onBlur: m,
+      children: [
+        s,
+        a && /* @__PURE__ */ i(
+          "span",
+          {
+            role: "tooltip",
+            className: [D.tooltip, D[r], n ?? ""].filter(Boolean).join(" "),
+            children: [
+              o,
+              /* @__PURE__ */ e("span", { className: D.arrow, "aria-hidden": "true" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, Ur = "_spinner_zltzo_1", Pr = "_spin_zltzo_1", Gr = "_sm_zltzo_10", Kr = "_md_zltzo_11", Vr = "_lg_zltzo_12", Jr = "_xl_zltzo_13", Qr = "_primary_zltzo_16", Xr = "_white_zltzo_17", Yr = "_neutral_zltzo_18", I = {
+  spinner: Ur,
+  spin: Pr,
+  sm: Gr,
+  md: Kr,
+  lg: Vr,
+  xl: Jr,
+  primary: Qr,
+  white: Xr,
+  neutral: Yr
+}, So = ({
+  size: o = "md",
+  variant: r = "primary",
+  label: t = "Loading...",
+  className: s
+}) => /* @__PURE__ */ e(
+  "span",
+  {
+    role: "status",
+    "aria-label": t,
+    className: [I.spinner, I[o], I[r], s ?? ""].filter(Boolean).join(" "),
+    children: /* @__PURE__ */ e("span", { className: "sr-only", children: t })
+  }
+), Zr = "_h1_7jlcq_2", Or = "_h2_7jlcq_3", eo = "_h3_7jlcq_4", to = "_h4_7jlcq_5", ro = "_h5_7jlcq_6", oo = "_h6_7jlcq_7", so = "_text_7jlcq_10", no = "_body_7jlcq_11", ao = "_body_sm_7jlcq_12", lo = "_caption_7jlcq_13", co = "_overline_7jlcq_14", io = "_color_primary_7jlcq_17", _o = "_color_secondary_7jlcq_18", mo = "_color_tertiary_7jlcq_19", po = "_color_inverse_7jlcq_20", uo = "_color_danger_7jlcq_21", ho = "_color_success_7jlcq_22", go = "_weight_regular_7jlcq_25", fo = "_weight_medium_7jlcq_26", xo = "_weight_semibold_7jlcq_27", bo = "_weight_bold_7jlcq_28", vo = "_truncate_7jlcq_31", q = {
+  h1: Zr,
+  h2: Or,
+  h3: eo,
+  h4: to,
+  h5: ro,
+  h6: oo,
+  text: so,
+  body: no,
+  body_sm: ao,
+  caption: lo,
+  overline: co,
+  color_primary: io,
+  color_secondary: _o,
+  color_tertiary: mo,
+  color_inverse: po,
+  color_danger: uo,
+  color_success: ho,
+  weight_regular: go,
+  weight_medium: fo,
+  weight_semibold: xo,
+  weight_bold: bo,
+  truncate: vo
+}, Mo = ({
+  as: o,
+  level: r = "h2",
+  className: t,
+  children: s,
+  ...n
+}) => /* @__PURE__ */ e(
+  o ?? r,
+  {
+    className: [q[r], t ?? ""].filter(Boolean).join(" "),
+    ...n,
+    children: s
+  }
+), Ho = ({
+  as: o = "p",
+  variant: r = "body",
+  color: t = "primary",
+  weight: s,
+  truncate: n = !1,
+  className: a,
+  children: c,
+  ...l
+}) => /* @__PURE__ */ e(
+  o,
+  {
+    className: [
+      q.text,
+      q[r.replace("-", "_")],
+      q[`color_${t}`],
+      s ? q[`weight_${s}`] : "",
+      n ? q.truncate : "",
+      a ?? ""
+    ].filter(Boolean).join(" "),
+    ...l,
+    children: c
+  }
+), wo = "_horizontal_190o0_1", yo = "_vertical_190o0_8", $o = "_withLabel_190o0_17", No = "_line_190o0_23", Bo = "_labelText_190o0_29", j = {
+  horizontal: wo,
+  vertical: yo,
+  withLabel: $o,
+  line: No,
+  labelText: Bo
+}, Uo = ({
+  orientation: o = "horizontal",
+  label: r,
+  className: t
+}) => o === "vertical" ? /* @__PURE__ */ e(
+  "span",
+  {
+    role: "separator",
+    "aria-orientation": "vertical",
+    className: [j.vertical, t ?? ""].filter(Boolean).join(" ")
+  }
+) : r ? /* @__PURE__ */ i(
+  "div",
+  {
+    role: "separator",
+    className: [j.withLabel, t ?? ""].filter(Boolean).join(" "),
+    children: [
+      /* @__PURE__ */ e("span", { className: j.line }),
+      /* @__PURE__ */ e("span", { className: j.labelText, children: r }),
+      /* @__PURE__ */ e("span", { className: j.line })
+    ]
+  }
+) : /* @__PURE__ */ e(
+  "hr",
+  {
+    role: "separator",
+    className: [j.horizontal, t ?? ""].filter(Boolean).join(" ")
+  }
+), _ = {
+  // Neutral
+  white: "#FFFFFF",
+  black: "#000000",
+  neutral: {
+    50: "#F9FAFB",
+    100: "#F3F4F6",
+    200: "#E5E7EB",
+    300: "#D1D5DB",
+    400: "#9CA3AF",
+    500: "#6B7280",
+    600: "#4B5563",
+    700: "#374151",
+    800: "#1F2937",
+    900: "#111827",
+    950: "#030712"
+  },
+  // Primary (Blue)
+  primary: {
+    50: "#EFF6FF",
+    100: "#DBEAFE",
+    200: "#BFDBFE",
+    300: "#93C5FD",
+    400: "#60A5FA",
+    500: "#3B82F6",
+    600: "#2563EB",
+    700: "#1D4ED8",
+    800: "#1E40AF",
+    900: "#1E3A8A"
+  },
+  // Success (Green)
+  success: {
+    50: "#F0FDF4",
+    100: "#DCFCE7",
+    200: "#BBF7D0",
+    300: "#86EFAC",
+    400: "#4ADE80",
+    500: "#22C55E",
+    600: "#16A34A",
+    700: "#15803D",
+    800: "#166534",
+    900: "#14532D"
+  },
+  // Warning (Amber)
+  warning: {
+    50: "#FFFBEB",
+    100: "#FEF3C7",
+    200: "#FDE68A",
+    300: "#FCD34D",
+    400: "#FBBF24",
+    500: "#F59E0B",
+    600: "#D97706",
+    700: "#B45309",
+    800: "#92400E",
+    900: "#78350F"
+  },
+  // Danger (Red)
+  danger: {
+    50: "#FFF1F2",
+    100: "#FFE4E6",
+    200: "#FECDD3",
+    300: "#FDA4AF",
+    400: "#FB7185",
+    500: "#F43F5E",
+    600: "#E11D48",
+    700: "#BE123C",
+    800: "#9F1239",
+    900: "#881337"
+  },
+  // Info (Cyan)
+  info: {
+    50: "#ECFEFF",
+    100: "#CFFAFE",
+    200: "#A5F3FC",
+    300: "#67E8F9",
+    400: "#22D3EE",
+    500: "#06B6D4",
+    600: "#0891B2",
+    700: "#0E7490",
+    800: "#155E75",
+    900: "#164E63"
+  }
+}, Po = {
+  text: {
+    primary: _.neutral[900],
+    secondary: _.neutral[600],
+    tertiary: _.neutral[400],
+    disabled: _.neutral[300],
+    inverse: _.white,
+    link: _.primary[600],
+    linkHover: _.primary[700]
+  },
+  background: {
+    primary: _.white,
+    secondary: _.neutral[50],
+    tertiary: _.neutral[100],
+    overlay: "rgba(0, 0, 0, 0.5)",
+    inverse: _.neutral[900]
+  },
+  border: {
+    default: _.neutral[200],
+    strong: _.neutral[300],
+    focus: _.primary[500]
+  },
+  action: {
+    primary: _.primary[600],
+    primaryHover: _.primary[700],
+    primaryActive: _.primary[800],
+    primaryDisabled: _.primary[200]
+  },
+  status: {
+    success: _.success[500],
+    successBg: _.success[50],
+    warning: _.warning[500],
+    warningBg: _.warning[50],
+    danger: _.danger[500],
+    dangerBg: _.danger[50],
+    info: _.info[500],
+    infoBg: _.info[50]
+  }
+}, Go = {
+  sans: [
+    "-apple-system",
+    "BlinkMacSystemFont",
+    '"Segoe UI"',
+    "Roboto",
+    '"Helvetica Neue"',
+    "Arial",
+    '"Noto Sans KR"',
+    "sans-serif"
+  ].join(", "),
+  mono: ['"SFMono-Regular"', "Consolas", '"Liberation Mono"', "Menlo", "monospace"].join(", ")
+}, Ko = {
+  xs: "0.75rem",
+  // 12px
+  sm: "0.875rem",
+  // 14px
+  md: "1rem",
+  // 16px
+  lg: "1.125rem",
+  // 18px
+  xl: "1.25rem",
+  // 20px
+  "2xl": "1.5rem",
+  // 24px
+  "3xl": "1.875rem",
+  // 30px
+  "4xl": "2.25rem",
+  // 36px
+  "5xl": "3rem"
+  // 48px
+}, Vo = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+}, Jo = {
+  none: 1,
+  tight: 1.25,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 2
+}, Qo = {
+  tighter: "-0.05em",
+  tight: "-0.025em",
+  normal: "0em",
+  wide: "0.025em",
+  wider: "0.05em",
+  widest: "0.1em"
+}, Xo = {
+  0: "0px",
+  0.5: "0.125rem",
+  // 2px
+  1: "0.25rem",
+  // 4px
+  1.5: "0.375rem",
+  // 6px
+  2: "0.5rem",
+  // 8px
+  2.5: "0.625rem",
+  // 10px
+  3: "0.75rem",
+  // 12px
+  3.5: "0.875rem",
+  // 14px
+  4: "1rem",
+  // 16px
+  5: "1.25rem",
+  // 20px
+  6: "1.5rem",
+  // 24px
+  7: "1.75rem",
+  // 28px
+  8: "2rem",
+  // 32px
+  9: "2.25rem",
+  // 36px
+  10: "2.5rem",
+  // 40px
+  12: "3rem",
+  // 48px
+  14: "3.5rem",
+  // 56px
+  16: "4rem",
+  // 64px
+  20: "5rem",
+  // 80px
+  24: "6rem",
+  // 96px
+  32: "8rem"
+  // 128px
+}, Yo = {
+  none: "0px",
+  sm: "0.125rem",
+  // 2px
+  md: "0.375rem",
+  // 6px
+  lg: "0.5rem",
+  // 8px
+  xl: "0.75rem",
+  // 12px
+  "2xl": "1rem",
+  // 16px
+  "3xl": "1.5rem",
+  // 24px
+  full: "9999px"
+}, Zo = {
+  none: "none",
+  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+  "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+  inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)",
+  focus: "0 0 0 3px rgba(59, 130, 246, 0.4)",
+  focusDanger: "0 0 0 3px rgba(244, 63, 94, 0.4)"
+}, Oo = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+}, es = {
+  hide: -1,
+  base: 0,
+  raised: 1,
+  dropdown: 1e3,
+  sticky: 1100,
+  overlay: 1200,
+  modal: 1300,
+  popover: 1400,
+  toast: 1500,
+  tooltip: 1600
+};
+export {
+  Co as Avatar,
+  jo as Badge,
+  te as Button,
+  Eo as Card,
+  Wo as CardBody,
+  Lo as CardFooter,
+  zo as CardHeader,
+  Qe as Checkbox,
+  Uo as Divider,
+  Mo as Heading,
+  ge as Input,
+  Do as Modal,
+  R as Radio,
+  To as RadioGroup,
+  Ae as Select,
+  So as Spinner,
+  qo as Tag,
+  Ho as Text,
+  Be as Textarea,
+  Wr as Toast,
+  Io as ToastProvider,
+  bt as Toggle,
+  Ao as Tooltip,
+  Yo as borderRadius,
+  Oo as breakpoints,
+  Go as fontFamily,
+  Ko as fontSize,
+  Vo as fontWeight,
+  Qo as letterSpacing,
+  Jo as lineHeight,
+  _ as palette,
+  Po as semanticColors,
+  Zo as shadows,
+  Xo as spacing,
+  Ro as useToast,
+  es as zIndex
+};