@buun_group/brutalist-ui
Version:
A brutalist-styled component library
1,446 lines (1,444 loc) • 380 kB
JavaScript
import './brutalist-ui.css';
import q, { useRef as Z, useMemo as Xt, useEffect as Y, forwardRef as $, useState as z, useCallback as J, useImperativeHandle as hn, useContext as _e, createContext as $e, useId as fn } from "react";
import { createPortal as ut } from "react-dom";
function co(e) {
var s, o, r = "";
if (typeof e == "string" || typeof e == "number") r += e;
else if (typeof e == "object") if (Array.isArray(e)) {
var a = e.length;
for (s = 0; s < a; s++) e[s] && (o = co(e[s])) && (r && (r += " "), r += o);
} else for (o in e) e[o] && (r && (r += " "), r += o);
return r;
}
function N() {
for (var e, s, o = 0, r = "", a = arguments.length; o < a; o++) (e = arguments[o]) && (s = co(e)) && (r && (r += " "), r += s);
return r;
}
const he = {
0: "0",
1: "var(--brutal-space-1)",
2: "var(--brutal-space-2)",
3: "var(--brutal-space-3)",
4: "var(--brutal-space-4)",
5: "var(--brutal-space-5)",
6: "var(--brutal-space-6)",
8: "var(--brutal-space-8)",
10: "var(--brutal-space-10)",
12: "var(--brutal-space-12)",
16: "var(--brutal-space-16)",
20: "var(--brutal-space-20)",
24: "var(--brutal-space-24)"
}, gn = {
// Padding
p: (e) => ({ padding: he[e] }),
pt: (e) => ({ paddingTop: he[e] }),
pr: (e) => ({ paddingRight: he[e] }),
pb: (e) => ({ paddingBottom: he[e] }),
pl: (e) => ({ paddingLeft: he[e] }),
px: (e) => ({ paddingLeft: he[e], paddingRight: he[e] }),
py: (e) => ({ paddingTop: he[e], paddingBottom: he[e] }),
// Margin
m: (e) => ({ margin: he[e] }),
mt: (e) => ({ marginTop: he[e] }),
mr: (e) => ({ marginRight: he[e] }),
mb: (e) => ({ marginBottom: he[e] }),
ml: (e) => ({ marginLeft: he[e] }),
mx: (e) => ({ marginLeft: he[e], marginRight: he[e] }),
my: (e) => ({ marginTop: he[e], marginBottom: he[e] }),
// Gap
gap: (e) => ({ gap: he[e] }),
"gap-x": (e) => ({ columnGap: he[e] }),
"gap-y": (e) => ({ rowGap: he[e] })
}, Os = {
block: { display: "block" },
"inline-block": { display: "inline-block" },
inline: { display: "inline" },
flex: { display: "flex" },
"inline-flex": { display: "inline-flex" },
grid: { display: "grid" },
hidden: { display: "none" }
}, Gs = {
"flex-row": { flexDirection: "row" },
"flex-row-reverse": { flexDirection: "row-reverse" },
"flex-col": { flexDirection: "column" },
"flex-col-reverse": { flexDirection: "column-reverse" },
"flex-wrap": { flexWrap: "wrap" },
"flex-nowrap": { flexWrap: "nowrap" },
"items-start": { alignItems: "flex-start" },
"items-end": { alignItems: "flex-end" },
"items-center": { alignItems: "center" },
"items-baseline": { alignItems: "baseline" },
"items-stretch": { alignItems: "stretch" },
"justify-start": { justifyContent: "flex-start" },
"justify-end": { justifyContent: "flex-end" },
"justify-center": { justifyContent: "center" },
"justify-between": { justifyContent: "space-between" },
"justify-around": { justifyContent: "space-around" },
"justify-evenly": { justifyContent: "space-evenly" }
}, qs = {
"w-full": { width: "100%" },
"w-auto": { width: "auto" },
"h-full": { height: "100%" },
"h-auto": { height: "auto" }
}, Vs = {
relative: { position: "relative" },
absolute: { position: "absolute" },
fixed: { position: "fixed" },
sticky: { position: "sticky" },
static: { position: "static" }
}, Ys = {
"overflow-auto": { overflow: "auto" },
"overflow-hidden": { overflow: "hidden" },
"overflow-visible": { overflow: "visible" },
"overflow-scroll": { overflow: "scroll" },
"overflow-x-auto": { overflowX: "auto" },
"overflow-y-auto": { overflowY: "auto" }
}, Xs = {
// Font sizes
"text-xs": { fontSize: "0.75rem", lineHeight: "1rem" },
"text-sm": { fontSize: "0.875rem", lineHeight: "1.25rem" },
"text-base": { fontSize: "1rem", lineHeight: "1.5rem" },
"text-lg": { fontSize: "1.125rem", lineHeight: "1.75rem" },
"text-xl": { fontSize: "1.25rem", lineHeight: "1.75rem" },
"text-2xl": { fontSize: "1.5rem", lineHeight: "2rem" },
"text-3xl": { fontSize: "1.875rem", lineHeight: "2.25rem" },
"text-4xl": { fontSize: "2.25rem", lineHeight: "2.5rem" },
"text-5xl": { fontSize: "3rem", lineHeight: "1" },
"text-6xl": { fontSize: "3.75rem", lineHeight: "1" },
// Text alignment
"text-left": { textAlign: "left" },
"text-center": { textAlign: "center" },
"text-right": { textAlign: "right" },
"text-justify": { textAlign: "justify" },
// Font weight
"font-normal": { fontWeight: "var(--brutal-font-regular)" },
"font-medium": { fontWeight: "var(--brutal-font-medium)" },
"font-bold": { fontWeight: "var(--brutal-font-bold)" },
"font-black": { fontWeight: "var(--brutal-font-black)" },
// Text transform
uppercase: { textTransform: "uppercase" },
lowercase: { textTransform: "lowercase" },
capitalize: { textTransform: "capitalize" },
"normal-case": { textTransform: "none" },
// Line height
"leading-none": { lineHeight: "1" },
"leading-tight": { lineHeight: "1.25" },
"leading-snug": { lineHeight: "1.375" },
"leading-normal": { lineHeight: "1.5" },
"leading-relaxed": { lineHeight: "1.625" },
"leading-loose": { lineHeight: "2" },
// Letter spacing
"tracking-tighter": { letterSpacing: "-0.05em" },
"tracking-tight": { letterSpacing: "-0.025em" },
"tracking-normal": { letterSpacing: "0" },
"tracking-wide": { letterSpacing: "0.025em" },
"tracking-wider": { letterSpacing: "0.05em" },
"tracking-widest": { letterSpacing: "0.1em" }
}, Us = {
// Text colors
"text-black": { color: "var(--brutal-black)" },
"text-white": { color: "var(--brutal-white)" },
"text-accent": { color: "var(--brutal-accent)" },
"text-gray-50": { color: "#f9fafb" },
"text-gray-100": { color: "#f3f4f6" },
"text-gray-200": { color: "#e5e7eb" },
"text-gray-300": { color: "#d1d5db" },
"text-gray-400": { color: "#9ca3af" },
"text-gray-500": { color: "#6b7280" },
"text-gray-600": { color: "#4b5563" },
"text-gray-700": { color: "#374151" },
"text-gray-800": { color: "#1f2937" },
"text-gray-900": { color: "#111827" },
"text-red": { color: "#ef4444" },
"text-blue": { color: "#3b82f6" },
"text-green": { color: "#10b981" },
"text-yellow": { color: "#f59e0b" },
"text-purple": { color: "#8b5cf6" },
"text-pink": { color: "#ec4899" },
// Background colors
"bg-black": { backgroundColor: "var(--brutal-black)" },
"bg-white": { backgroundColor: "var(--brutal-white)" },
"bg-accent": { backgroundColor: "var(--brutal-accent)" },
"bg-gray-50": { backgroundColor: "#f9fafb" },
"bg-gray-100": { backgroundColor: "#f3f4f6" },
"bg-gray-200": { backgroundColor: "#e5e7eb" },
"bg-gray-300": { backgroundColor: "#d1d5db" },
"bg-gray-400": { backgroundColor: "#9ca3af" },
"bg-gray-500": { backgroundColor: "#6b7280" },
"bg-gray-600": { backgroundColor: "#4b5563" },
"bg-gray-700": { backgroundColor: "#374151" },
"bg-gray-800": { backgroundColor: "#1f2937" },
"bg-gray-900": { backgroundColor: "#111827" },
"bg-red": { backgroundColor: "#ef4444" },
"bg-blue": { backgroundColor: "#3b82f6" },
"bg-green": { backgroundColor: "#10b981" },
"bg-yellow": { backgroundColor: "#f59e0b" },
"bg-purple": { backgroundColor: "#8b5cf6" },
"bg-pink": { backgroundColor: "#ec4899" }
}, Js = {
border: { border: "var(--brutal-border-width) solid var(--brutal-black)" },
"border-0": { borderWidth: "0" },
"border-2": { borderWidth: "2px", borderStyle: "solid" },
"border-4": { borderWidth: "4px", borderStyle: "solid" },
"border-8": { borderWidth: "8px", borderStyle: "solid" },
"border-t": { borderTop: "var(--brutal-border-width) solid var(--brutal-black)" },
"border-r": { borderRight: "var(--brutal-border-width) solid var(--brutal-black)" },
"border-b": { borderBottom: "var(--brutal-border-width) solid var(--brutal-black)" },
"border-l": { borderLeft: "var(--brutal-border-width) solid var(--brutal-black)" },
"border-black": { borderColor: "var(--brutal-black)" },
"border-white": { borderColor: "var(--brutal-white)" },
"border-accent": { borderColor: "var(--brutal-accent)" },
"border-gray-50": { borderColor: "#f9fafb" },
"border-gray-100": { borderColor: "#f3f4f6" },
"border-gray-200": { borderColor: "#e5e7eb" },
"border-gray-300": { borderColor: "#d1d5db" },
"border-gray-400": { borderColor: "#9ca3af" },
"border-gray-500": { borderColor: "#6b7280" },
"border-gray-600": { borderColor: "#4b5563" },
"border-gray-700": { borderColor: "#374151" },
"border-gray-800": { borderColor: "#1f2937" },
"border-gray-900": { borderColor: "#111827" },
// Border radius
"rounded-none": { borderRadius: "0" },
"rounded-sm": { borderRadius: "0.125rem" },
rounded: { borderRadius: "0.25rem" },
"rounded-md": { borderRadius: "0.375rem" },
"rounded-lg": { borderRadius: "0.5rem" },
"rounded-xl": { borderRadius: "0.75rem" },
"rounded-2xl": { borderRadius: "1rem" },
"rounded-full": { borderRadius: "9999px" }
}, Ks = {
"shadow-none": { boxShadow: "none" },
"shadow-brutal": { boxShadow: "var(--brutal-shadow)" },
"shadow-brutal-sm": { boxShadow: "2px 2px 0 var(--brutal-black)" },
"shadow-brutal-md": { boxShadow: "4px 4px 0 var(--brutal-black)" },
"shadow-brutal-lg": { boxShadow: "6px 6px 0 var(--brutal-black)" },
"shadow-brutal-xl": { boxShadow: "8px 8px 0 var(--brutal-black)" }
}, Zs = {
"opacity-0": { opacity: "0" },
"opacity-5": { opacity: "0.05" },
"opacity-10": { opacity: "0.1" },
"opacity-20": { opacity: "0.2" },
"opacity-25": { opacity: "0.25" },
"opacity-30": { opacity: "0.3" },
"opacity-40": { opacity: "0.4" },
"opacity-50": { opacity: "0.5" },
"opacity-60": { opacity: "0.6" },
"opacity-70": { opacity: "0.7" },
"opacity-75": { opacity: "0.75" },
"opacity-80": { opacity: "0.8" },
"opacity-90": { opacity: "0.9" },
"opacity-95": { opacity: "0.95" },
"opacity-100": { opacity: "1" }
}, Qs = {
"ring-0": { boxShadow: "0 0 0 0px var(--brutal-black)" },
"ring-1": { boxShadow: "0 0 0 1px var(--brutal-black)" },
"ring-2": { boxShadow: "0 0 0 2px var(--brutal-black)" },
"ring-4": { boxShadow: "0 0 0 4px var(--brutal-black)" },
"ring-8": { boxShadow: "0 0 0 8px var(--brutal-black)" },
"ring-black": { boxShadow: "0 0 0 2px var(--brutal-black)" },
"ring-white": { boxShadow: "0 0 0 2px var(--brutal-white)" },
"ring-accent": { boxShadow: "0 0 0 2px var(--brutal-accent)" },
"ring-purple": { boxShadow: "0 0 0 4px #8b5cf6" },
// Ring offset utilities
"ring-offset-0": { boxShadow: "0 0 0 0px #fff, 0 0 0 0px var(--brutal-black)" },
"ring-offset-1": { boxShadow: "0 0 0 1px #fff, 0 0 0 3px var(--brutal-accent)" },
"ring-offset-2": { boxShadow: "0 0 0 2px #fff, 0 0 0 4px var(--brutal-accent)" },
"ring-offset-4": { boxShadow: "0 0 0 4px #fff, 0 0 0 6px var(--brutal-accent)" },
"ring-offset-8": { boxShadow: "0 0 0 8px #fff, 0 0 0 10px var(--brutal-accent)" }
}, eo = {
"translate-x-0": { transform: "translateX(0px)" },
"translate-x-1": { transform: "translateX(0.25rem)" },
"translate-x-2": { transform: "translateX(0.5rem)" },
"translate-x-4": { transform: "translateX(1rem)" },
"translate-y-0": { transform: "translateY(0px)" },
"translate-y-1": { transform: "translateY(0.25rem)" },
"translate-y-2": { transform: "translateY(0.5rem)" },
"translate-y-4": { transform: "translateY(1rem)" },
"scale-0": { transform: "scale(0)" },
"scale-50": { transform: "scale(0.5)" },
"scale-75": { transform: "scale(0.75)" },
"scale-90": { transform: "scale(0.9)" },
"scale-95": { transform: "scale(0.95)" },
"scale-100": { transform: "scale(1)" },
"scale-105": { transform: "scale(1.05)" },
"scale-110": { transform: "scale(1.1)" },
"scale-125": { transform: "scale(1.25)" },
"scale-150": { transform: "scale(1.5)" },
"rotate-0": { transform: "rotate(0deg)" },
"rotate-1": { transform: "rotate(1deg)" },
"rotate-2": { transform: "rotate(2deg)" },
"rotate-3": { transform: "rotate(3deg)" },
"rotate-6": { transform: "rotate(6deg)" },
"rotate-12": { transform: "rotate(12deg)" },
"rotate-45": { transform: "rotate(45deg)" },
"rotate-90": { transform: "rotate(90deg)" },
"rotate-180": { transform: "rotate(180deg)" }
}, to = {
"cursor-auto": { cursor: "auto" },
"cursor-default": { cursor: "default" },
"cursor-pointer": { cursor: "pointer" },
"cursor-wait": { cursor: "wait" },
"cursor-text": { cursor: "text" },
"cursor-move": { cursor: "move" },
"cursor-help": { cursor: "help" },
"cursor-not-allowed": { cursor: "not-allowed" },
"cursor-none": { cursor: "none" },
"cursor-context-menu": { cursor: "context-menu" },
"cursor-progress": { cursor: "progress" },
"cursor-cell": { cursor: "cell" },
"cursor-crosshair": { cursor: "crosshair" },
"cursor-vertical-text": { cursor: "vertical-text" },
"cursor-alias": { cursor: "alias" },
"cursor-copy": { cursor: "copy" },
"cursor-no-drop": { cursor: "no-drop" },
"cursor-grab": { cursor: "grab" },
"cursor-grabbing": { cursor: "grabbing" }
}, so = {
"transition-none": { transition: "none" },
"transition-all": { transition: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)" },
transition: { transition: "color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1), fill 150ms cubic-bezier(0.4, 0, 0.2, 1), stroke 150ms cubic-bezier(0.4, 0, 0.2, 1)" },
"transition-colors": { transition: "color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1), fill 150ms cubic-bezier(0.4, 0, 0.2, 1), stroke 150ms cubic-bezier(0.4, 0, 0.2, 1)" },
"transition-opacity": { transition: "opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)" },
"transition-shadow": { transition: "box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1)" },
"transition-transform": { transition: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1)" },
// Duration modifiers
"duration-75": { transitionDuration: "75ms" },
"duration-100": { transitionDuration: "100ms" },
"duration-150": { transitionDuration: "150ms" },
"duration-200": { transitionDuration: "200ms" },
"duration-300": { transitionDuration: "300ms" },
"duration-500": { transitionDuration: "500ms" },
"duration-700": { transitionDuration: "700ms" },
"duration-1000": { transitionDuration: "1000ms" }
};
function Tt(e) {
if (Os[e])
return Os[e];
if (Gs[e])
return Gs[e];
if (qs[e])
return qs[e];
if (Vs[e])
return Vs[e];
if (Ys[e])
return Ys[e];
if (Xs[e])
return Xs[e];
if (Us[e])
return Us[e];
if (Js[e])
return Js[e];
if (Ks[e])
return Ks[e];
if (Zs[e])
return Zs[e];
if (Qs[e])
return Qs[e];
if (eo[e])
return eo[e];
if (so[e])
return so[e];
if (to[e])
return to[e];
for (const [s, o] of Object.entries(gn))
if (e.startsWith(`${s}-`)) {
const r = e.slice(s.length + 1);
if (he[r])
return o(r);
}
return e === "m-auto" ? { margin: "auto" } : e === "mt-auto" ? { marginTop: "auto" } : e === "mr-auto" ? { marginRight: "auto" } : e === "mb-auto" ? { marginBottom: "auto" } : e === "ml-auto" ? { marginLeft: "auto" } : e === "mx-auto" ? { marginLeft: "auto", marginRight: "auto" } : e === "my-auto" ? { marginTop: "auto", marginBottom: "auto" } : null;
}
function u1(e) {
const s = e.split(" ").filter(Boolean), o = {};
for (const r of s) {
const a = Tt(r);
a && Object.assign(o, a);
}
return o;
}
function bn(e) {
const s = e.split(" ").filter(Boolean), o = [], r = [], a = {};
for (const n of s) {
const l = Tt(n);
l ? (o.push(n), Object.assign(a, l)) : r.push(n);
}
return { utilities: o, others: r, styles: a };
}
const Vt = {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px"
}, oo = [
"hover",
"focus",
"active",
"disabled",
"focus-within",
"focus-visible"
];
function io(e) {
const s = e.split(":");
if (s.length === 1)
return { utility: s[0] };
let o, r, a;
if (s.length === 2) {
const [n, l] = s;
n in Vt ? o = n : oo.includes(n) && (r = n), a = l;
} else if (s.length === 3) {
const [n, l, c] = s;
n in Vt && (o = n), oo.includes(l) && (r = l), a = c;
} else
a = s[s.length - 1];
return { breakpoint: o, state: r, utility: a };
}
function yn(e, s, o) {
const r = Object.entries(o).map(([a, n]) => `${a.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${n};`).join(`
`);
return `
@media (min-width: ${Vt[e]}) {
${s} {
${r}
}
}`;
}
function ro(e, s, o) {
const r = Object.entries(o).map(([n, l]) => `${n.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${l} !important;`).join(`
`);
return `
${s}:${e === "focus-within" ? "focus-within" : e === "focus-visible" ? "focus-visible" : e} {
${r}
}`;
}
function xn(e) {
const s = [], o = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map();
for (const n of e) {
const { breakpoint: l, state: c, utility: i } = io(n);
if (!l && !c)
s.push(i);
else if (l && !c)
o.has(l) || o.set(l, []), o.get(l).push(i);
else if (!l && c)
r.has(c) || r.set(c, []), r.get(c).push(i);
else if (l && c) {
const d = `${l}:${c}`;
a.has(d) || a.set(d, []), a.get(d).push(i);
}
}
return { base: s, responsive: o, states: r, responsiveStates: a };
}
let vn = 0;
function k(e) {
const {
className: s = "",
style: o = {},
componentClasses: r = "",
componentId: a
} = e, n = Z(null), l = Z(`brutal-${a || `util-${vn++}`}`), c = Xt(() => {
if (!s)
return {
className: N(r),
style: o
};
const i = s.split(" ").filter(Boolean), d = [], u = [], p = {};
for (const x of i) {
const { utility: g } = io(x), b = Tt(g);
b ? (d.push(x), x === g && Object.assign(p, b)) : u.push(x);
}
const m = xn(d);
let _ = "";
const f = l.current;
for (const [x, g] of m.responsive) {
const b = {};
for (const y of g) {
const C = Tt(y);
C && Object.assign(b, C);
}
Object.keys(b).length > 0 && (_ += yn(x, `.${f}`, b));
}
for (const [x, g] of m.states) {
const b = {}, y = [];
for (const C of g) {
const v = Tt(C);
v && (v.transform && typeof v.transform == "string" ? y.push(v.transform) : Object.assign(b, v));
}
y.length > 0 && (b.transform = y.join(" ")), Object.keys(b).length > 0 && (_ += ro(x, `.${f}`, b));
}
for (const [x, g] of m.responsiveStates) {
const [b, y] = x.split(":"), C = {}, v = [];
for (const L of g) {
const S = Tt(L);
S && (S.transform && typeof S.transform == "string" ? v.push(S.transform) : Object.assign(C, S));
}
if (v.length > 0 && (C.transform = v.join(" ")), Object.keys(C).length > 0) {
const L = ro(y, `.${f}`, C), S = Vt[b];
_ += `
@media (min-width: ${S}) {
${L.trim()}
}`;
}
}
return {
className: N(
r,
_ ? f : "",
...u
),
style: Object.keys(p).length > 0 ? { ...p, ...o } : o,
generatedCSS: _
};
}, [s, o, r]);
return Y(() => {
if (c.generatedCSS && typeof document < "u")
return n.current || (n.current = document.createElement("style"), n.current.setAttribute("data-brutal-utilities", l.current), document.head.appendChild(n.current)), n.current.textContent = c.generatedCSS, process.env.NODE_ENV === "development" && console.log("Generated CSS for", l.current, `:
`, c.generatedCSS), () => {
n.current && n.current.parentNode && (n.current.parentNode.removeChild(n.current), n.current = null);
};
}, [c.generatedCSS]), {
className: c.className,
style: c.style
};
}
function m1(e, s, o) {
return k({
className: e,
style: s,
componentClasses: o
});
}
function wn(e) {
const {
className: s = "",
style: o = {},
useUtilityCSS: r = !1,
componentClasses: a = ""
} = e;
return Xt(() => {
const { utilities: n, others: l, styles: c } = bn(s);
return r ? {
className: N(
a,
...n,
...l
),
style: o
} : {
className: N(
a,
...l
),
style: Object.keys(c).length > 0 ? { ...c, ...o } : o
};
}, [s, o, r, a]);
}
function Cn(e, s, o) {
return k({
className: e,
style: s,
componentClasses: o
});
}
function p1(e, s) {
return wn({
className: e,
useUtilityCSS: !0,
componentClasses: s
});
}
const Nn = $(
({ as: e = "div", className: s, style: o, children: r, ...a }, n) => {
const { className: l, style: c } = k({
className: s,
style: o
});
return q.createElement(
e,
{
...a,
ref: n,
className: l,
style: c
},
r
);
}
);
Nn.displayName = "Box";
var _s = { exports: {} }, It = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ao;
function Sn() {
if (ao) return It;
ao = 1;
var e = q, s = Symbol.for("react.element"), o = Symbol.for("react.fragment"), r = Object.prototype.hasOwnProperty, a = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, n = { key: !0, ref: !0, __self: !0, __source: !0 };
function l(c, i, d) {
var u, p = {}, m = null, _ = null;
d !== void 0 && (m = "" + d), i.key !== void 0 && (m = "" + i.key), i.ref !== void 0 && (_ = i.ref);
for (u in i) r.call(i, u) && !n.hasOwnProperty(u) && (p[u] = i[u]);
if (c && c.defaultProps) for (u in i = c.defaultProps, i) p[u] === void 0 && (p[u] = i[u]);
return { $$typeof: s, type: c, key: m, ref: _, props: p, _owner: a.current };
}
return It.Fragment = o, It.jsx = l, It.jsxs = l, It;
}
var Dt = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var no;
function jn() {
return no || (no = 1, process.env.NODE_ENV !== "production" && function() {
var e = q, s = Symbol.for("react.element"), o = Symbol.for("react.portal"), r = Symbol.for("react.fragment"), a = Symbol.for("react.strict_mode"), n = Symbol.for("react.profiler"), l = Symbol.for("react.provider"), c = Symbol.for("react.context"), i = Symbol.for("react.forward_ref"), d = Symbol.for("react.suspense"), u = Symbol.for("react.suspense_list"), p = Symbol.for("react.memo"), m = Symbol.for("react.lazy"), _ = Symbol.for("react.offscreen"), f = Symbol.iterator, x = "@@iterator";
function g(h) {
if (h === null || typeof h != "object")
return null;
var M = f && h[f] || h[x];
return typeof M == "function" ? M : null;
}
var b = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function y(h) {
{
for (var M = arguments.length, O = new Array(M > 1 ? M - 1 : 0), X = 1; X < M; X++)
O[X - 1] = arguments[X];
C("error", h, O);
}
}
function C(h, M, O) {
{
var X = b.ReactDebugCurrentFrame, ae = X.getStackAddendum();
ae !== "" && (M += "%s", O = O.concat([ae]));
var ie = O.map(function(ee) {
return String(ee);
});
ie.unshift("Warning: " + M), Function.prototype.apply.call(console[h], console, ie);
}
}
var v = !1, L = !1, S = !1, w = !1, j = !1, T;
T = Symbol.for("react.module.reference");
function D(h) {
return !!(typeof h == "string" || typeof h == "function" || h === r || h === n || j || h === a || h === d || h === u || w || h === _ || v || L || S || typeof h == "object" && h !== null && (h.$$typeof === m || h.$$typeof === p || h.$$typeof === l || h.$$typeof === c || h.$$typeof === i || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
h.$$typeof === T || h.getModuleId !== void 0));
}
function F(h, M, O) {
var X = h.displayName;
if (X)
return X;
var ae = M.displayName || M.name || "";
return ae !== "" ? O + "(" + ae + ")" : O;
}
function B(h) {
return h.displayName || "Context";
}
function P(h) {
if (h == null)
return null;
if (typeof h.tag == "number" && y("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof h == "function")
return h.displayName || h.name || null;
if (typeof h == "string")
return h;
switch (h) {
case r:
return "Fragment";
case o:
return "Portal";
case n:
return "Profiler";
case a:
return "StrictMode";
case d:
return "Suspense";
case u:
return "SuspenseList";
}
if (typeof h == "object")
switch (h.$$typeof) {
case c:
var M = h;
return B(M) + ".Consumer";
case l:
var O = h;
return B(O._context) + ".Provider";
case i:
return F(h, h.render, "ForwardRef");
case p:
var X = h.displayName || null;
return X !== null ? X : P(h.type) || "Memo";
case m: {
var ae = h, ie = ae._payload, ee = ae._init;
try {
return P(ee(ie));
} catch {
return null;
}
}
}
return null;
}
var E = Object.assign, I = 0, H, A, R, U, oe, G, W;
function V() {
}
V.__reactDisabledLog = !0;
function Q() {
{
if (I === 0) {
H = console.log, A = console.info, R = console.warn, U = console.error, oe = console.group, G = console.groupCollapsed, W = console.groupEnd;
var h = {
configurable: !0,
enumerable: !0,
value: V,
writable: !0
};
Object.defineProperties(console, {
info: h,
log: h,
warn: h,
error: h,
group: h,
groupCollapsed: h,
groupEnd: h
});
}
I++;
}
}
function ne() {
{
if (I--, I === 0) {
var h = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: E({}, h, {
value: H
}),
info: E({}, h, {
value: A
}),
warn: E({}, h, {
value: R
}),
error: E({}, h, {
value: U
}),
group: E({}, h, {
value: oe
}),
groupCollapsed: E({}, h, {
value: G
}),
groupEnd: E({}, h, {
value: W
})
});
}
I < 0 && y("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var xe = b.ReactCurrentDispatcher, He;
function ce(h, M, O) {
{
if (He === void 0)
try {
throw Error();
} catch (ae) {
var X = ae.stack.trim().match(/\n( *(at )?)/);
He = X && X[1] || "";
}
return `
` + He + h;
}
}
var de = !1, me;
{
var We = typeof WeakMap == "function" ? WeakMap : Map;
me = new We();
}
function Pe(h, M) {
if (!h || de)
return "";
{
var O = me.get(h);
if (O !== void 0)
return O;
}
var X;
de = !0;
var ae = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var ie;
ie = xe.current, xe.current = null, Q();
try {
if (M) {
var ee = function() {
throw Error();
};
if (Object.defineProperty(ee.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(ee, []);
} catch (Me) {
X = Me;
}
Reflect.construct(h, [], ee);
} else {
try {
ee.call();
} catch (Me) {
X = Me;
}
h.call(ee.prototype);
}
} else {
try {
throw Error();
} catch (Me) {
X = Me;
}
h();
}
} catch (Me) {
if (Me && X && typeof Me.stack == "string") {
for (var K = Me.stack.split(`
`), ke = X.stack.split(`
`), fe = K.length - 1, be = ke.length - 1; fe >= 1 && be >= 0 && K[fe] !== ke[be]; )
be--;
for (; fe >= 1 && be >= 0; fe--, be--)
if (K[fe] !== ke[be]) {
if (fe !== 1 || be !== 1)
do
if (fe--, be--, be < 0 || K[fe] !== ke[be]) {
var Ue = `
` + K[fe].replace(" at new ", " at ");
return h.displayName && Ue.includes("<anonymous>") && (Ue = Ue.replace("<anonymous>", h.displayName)), typeof h == "function" && me.set(h, Ue), Ue;
}
while (fe >= 1 && be >= 0);
break;
}
}
} finally {
de = !1, xe.current = ie, ne(), Error.prepareStackTrace = ae;
}
var Ct = h ? h.displayName || h.name : "", gt = Ct ? ce(Ct) : "";
return typeof h == "function" && me.set(h, gt), gt;
}
function At(h, M, O) {
return Pe(h, !1);
}
function ft(h) {
var M = h.prototype;
return !!(M && M.isReactComponent);
}
function Ot(h, M, O) {
if (h == null)
return "";
if (typeof h == "function")
return Pe(h, ft(h));
if (typeof h == "string")
return ce(h);
switch (h) {
case d:
return ce("Suspense");
case u:
return ce("SuspenseList");
}
if (typeof h == "object")
switch (h.$$typeof) {
case i:
return At(h.render);
case p:
return Ot(h.type, M, O);
case m: {
var X = h, ae = X._payload, ie = X._init;
try {
return Ot(ie(ae), M, O);
} catch {
}
}
}
return "";
}
var Et = Object.prototype.hasOwnProperty, ks = {}, Ls = b.ReactDebugCurrentFrame;
function Gt(h) {
if (h) {
var M = h._owner, O = Ot(h.type, h._source, M ? M.type : null);
Ls.setExtraStackFrame(O);
} else
Ls.setExtraStackFrame(null);
}
function Va(h, M, O, X, ae) {
{
var ie = Function.call.bind(Et);
for (var ee in h)
if (ie(h, ee)) {
var K = void 0;
try {
if (typeof h[ee] != "function") {
var ke = Error((X || "React class") + ": " + O + " type `" + ee + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof h[ee] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw ke.name = "Invariant Violation", ke;
}
K = h[ee](M, ee, X, O, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (fe) {
K = fe;
}
K && !(K instanceof Error) && (Gt(ae), y("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", X || "React class", O, ee, typeof K), Gt(null)), K instanceof Error && !(K.message in ks) && (ks[K.message] = !0, Gt(ae), y("Failed %s type: %s", O, K.message), Gt(null));
}
}
}
var Ya = Array.isArray;
function ss(h) {
return Ya(h);
}
function Xa(h) {
{
var M = typeof Symbol == "function" && Symbol.toStringTag, O = M && h[Symbol.toStringTag] || h.constructor.name || "Object";
return O;
}
}
function Ua(h) {
try {
return As(h), !1;
} catch {
return !0;
}
}
function As(h) {
return "" + h;
}
function Es(h) {
if (Ua(h))
return y("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Xa(h)), As(h);
}
var Is = b.ReactCurrentOwner, Ja = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, Ds, Bs;
function Ka(h) {
if (Et.call(h, "ref")) {
var M = Object.getOwnPropertyDescriptor(h, "ref").get;
if (M && M.isReactWarning)
return !1;
}
return h.ref !== void 0;
}
function Za(h) {
if (Et.call(h, "key")) {
var M = Object.getOwnPropertyDescriptor(h, "key").get;
if (M && M.isReactWarning)
return !1;
}
return h.key !== void 0;
}
function Qa(h, M) {
typeof h.ref == "string" && Is.current;
}
function en(h, M) {
{
var O = function() {
Ds || (Ds = !0, y("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", M));
};
O.isReactWarning = !0, Object.defineProperty(h, "key", {
get: O,
configurable: !0
});
}
}
function tn(h, M) {
{
var O = function() {
Bs || (Bs = !0, y("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", M));
};
O.isReactWarning = !0, Object.defineProperty(h, "ref", {
get: O,
configurable: !0
});
}
}
var sn = function(h, M, O, X, ae, ie, ee) {
var K = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: s,
// Built-in properties that belong on the element
type: h,
key: M,
ref: O,
props: ee,
// Record the component responsible for creating this element.
_owner: ie
};
return K._store = {}, Object.defineProperty(K._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(K, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: X
}), Object.defineProperty(K, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: ae
}), Object.freeze && (Object.freeze(K.props), Object.freeze(K)), K;
};
function on(h, M, O, X, ae) {
{
var ie, ee = {}, K = null, ke = null;
O !== void 0 && (Es(O), K = "" + O), Za(M) && (Es(M.key), K = "" + M.key), Ka(M) && (ke = M.ref, Qa(M, ae));
for (ie in M)
Et.call(M, ie) && !Ja.hasOwnProperty(ie) && (ee[ie] = M[ie]);
if (h && h.defaultProps) {
var fe = h.defaultProps;
for (ie in fe)
ee[ie] === void 0 && (ee[ie] = fe[ie]);
}
if (K || ke) {
var be = typeof h == "function" ? h.displayName || h.name || "Unknown" : h;
K && en(ee, be), ke && tn(ee, be);
}
return sn(h, K, ke, ae, X, Is.current, ee);
}
}
var os = b.ReactCurrentOwner, Ps = b.ReactDebugCurrentFrame;
function wt(h) {
if (h) {
var M = h._owner, O = Ot(h.type, h._source, M ? M.type : null);
Ps.setExtraStackFrame(O);
} else
Ps.setExtraStackFrame(null);
}
var rs;
rs = !1;
function as(h) {
return typeof h == "object" && h !== null && h.$$typeof === s;
}
function Ms() {
{
if (os.current) {
var h = P(os.current.type);
if (h)
return `
Check the render method of \`` + h + "`.";
}
return "";
}
}
function rn(h) {
return "";
}
var Rs = {};
function an(h) {
{
var M = Ms();
if (!M) {
var O = typeof h == "string" ? h : h.displayName || h.name;
O && (M = `
Check the top-level render call using <` + O + ">.");
}
return M;
}
}
function Fs(h, M) {
{
if (!h._store || h._store.validated || h.key != null)
return;
h._store.validated = !0;
var O = an(M);
if (Rs[O])
return;
Rs[O] = !0;
var X = "";
h && h._owner && h._owner !== os.current && (X = " It was passed a child from " + P(h._owner.type) + "."), wt(h), y('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', O, X), wt(null);
}
}
function Hs(h, M) {
{
if (typeof h != "object")
return;
if (ss(h))
for (var O = 0; O < h.length; O++) {
var X = h[O];
as(X) && Fs(X, M);
}
else if (as(h))
h._store && (h._store.validated = !0);
else if (h) {
var ae = g(h);
if (typeof ae == "function" && ae !== h.entries)
for (var ie = ae.call(h), ee; !(ee = ie.next()).done; )
as(ee.value) && Fs(ee.value, M);
}
}
}
function nn(h) {
{
var M = h.type;
if (M == null || typeof M == "string")
return;
var O;
if (typeof M == "function")
O = M.propTypes;
else if (typeof M == "object" && (M.$$typeof === i || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
M.$$typeof === p))
O = M.propTypes;
else
return;
if (O) {
var X = P(M);
Va(O, h.props, "prop", X, h);
} else if (M.PropTypes !== void 0 && !rs) {
rs = !0;
var ae = P(M);
y("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", ae || "Unknown");
}
typeof M.getDefaultProps == "function" && !M.getDefaultProps.isReactClassApproved && y("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function ln(h) {
{
for (var M = Object.keys(h.props), O = 0; O < M.length; O++) {
var X = M[O];
if (X !== "children" && X !== "key") {
wt(h), y("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", X), wt(null);
break;
}
}
h.ref !== null && (wt(h), y("Invalid attribute `ref` supplied to `React.Fragment`."), wt(null));
}
}
var Ws = {};
function zs(h, M, O, X, ae, ie) {
{
var ee = D(h);
if (!ee) {
var K = "";
(h === void 0 || typeof h == "object" && h !== null && Object.keys(h).length === 0) && (K += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var ke = rn();
ke ? K += ke : K += Ms();
var fe;
h === null ? fe = "null" : ss(h) ? fe = "array" : h !== void 0 && h.$$typeof === s ? (fe = "<" + (P(h.type) || "Unknown") + " />", K = " Did you accidentally export a JSX literal instead of a component?") : fe = typeof h, y("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", fe, K);
}
var be = on(h, M, O, ae, ie);
if (be == null)
return be;
if (ee) {
var Ue = M.children;
if (Ue !== void 0)
if (X)
if (ss(Ue)) {
for (var Ct = 0; Ct < Ue.length; Ct++)
Hs(Ue[Ct], h);
Object.freeze && Object.freeze(Ue);
} else
y("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
else
Hs(Ue, h);
}
if (Et.call(M, "key")) {
var gt = P(h), Me = Object.keys(M).filter(function(pn) {
return pn !== "key";
}), ns = Me.length > 0 ? "{key: someKey, " + Me.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!Ws[gt + ns]) {
var mn = Me.length > 0 ? "{" + Me.join(": ..., ") + ": ...}" : "{}";
y(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`, ns, gt, mn, gt), Ws[gt + ns] = !0;
}
}
return h === r ? ln(be) : nn(be), be;
}
}
function cn(h, M, O) {
return zs(h, M, O, !0);
}
function dn(h, M, O) {
return zs(h, M, O, !1);
}
var _n = dn, un = cn;
Dt.Fragment = r, Dt.jsx = _n, Dt.jsxs = un;
}()), Dt;
}
process.env.NODE_ENV === "production" ? _s.exports = Sn() : _s.exports = jn();
var t = _s.exports;
const Tn = "Button-module__button___M2FCc", $n = "Button-module__sm___5hfKe", kn = "Button-module__md___JO9f-", Ln = "Button-module__lg___IQEqM", An = "Button-module__xl___I8TPw", En = "Button-module__disabled___tpHwD", In = "Button-module__destructive___8LGbo", Dn = "Button-module__outline___zjzTL", Bn = "Button-module__ghost___pMmuQ", Pn = "Button-module__brutal___kaDHQ", Mn = "Button-module__primary___D3CEZ", Rn = "Button-module__secondary___hONSp", Fn = "Button-module__danger___A9ok9", Hn = "Button-module__withShadow___Ke14w", Wn = "Button-module__fullWidth___sDBss", zn = "Button-module__loading___oMywk", On = "Button-module__loader___wkV5u", Gn = "Button-module__spin___YO5-z", qn = "Button-module__icon___q2e1E", Vn = "Button-module__content___BJgs2", Yn = "Button-module__glitch___hSkLD", Xn = "Button-module__brutal-glitch-1___B1O-7", Un = "Button-module__brutal-glitch-2___DwFCD", Je = {
button: Tn,
sm: $n,
md: kn,
lg: Ln,
xl: An,
default: "Button-module__default___AB6Eh",
disabled: En,
destructive: In,
outline: Dn,
ghost: Bn,
brutal: Pn,
primary: Mn,
secondary: Rn,
danger: Fn,
withShadow: Hn,
fullWidth: Wn,
loading: zn,
loader: On,
spin: Gn,
icon: qn,
content: Vn,
glitch: Yn,
brutalGlitch1: Xn,
brutalGlitch2: Un
}, Jn = $(
({
children: e,
className: s,
variant: o = "default",
size: r = "md",
fullWidth: a = !1,
loading: n = !1,
leftIcon: l,
rightIcon: c,
brutalistShadow: i = !0,
glitch: d = !1,
disabled: u,
style: p,
...m
}, _) => {
const { className: f, style: x } = Cn(
s,
p,
N(
Je.button,
Je[o],
Je[r],
{
[Je.fullWidth]: a,
[Je.loading]: n,
[Je.withShadow]: i,
[Je.glitch]: d,
[Je.disabled]: u || n
}
)
);
return /* @__PURE__ */ t.jsxs(
"button",
{
ref: _,
className: f,
style: x,
disabled: u || n,
"data-text": d ? e : void 0,
...m,
children: [
n && /* @__PURE__ */ t.jsx("span", { className: Je.loader }),
l && /* @__PURE__ */ t.jsx("span", { className: Je.icon, children: l }),
/* @__PURE__ */ t.jsx("span", { className: Je.content, children: e }),
c && /* @__PURE__ */ t.jsx("span", { className: Je.icon, children: c })
]
}
);
}
);
Jn.displayName = "Button";
const Kn = "Input-module__input___bJOuX", Zn = "Input-module__sm___LrnGW", Qn = "Input-module__md___IgG-s", el = "Input-module__lg___nrpmJ", tl = "Input-module__withLeftIcon___T4JX2", sl = "Input-module__withRightIcon___mtdvp", ol = "Input-module__error___cuwOB", rl = "Input-module__success___jDBBC", al = "Input-module__withShadow___-J-G9", nl = "Input-module__readOnly___Pz6bc", ll = "Input-module__disabled___GtcS3", cl = "Input-module__inputWrapper___jgDE7", il = "Input-module__fullWidth___CBcxB", dl = "Input-module__icon___oEfEz", _l = "Input-module__leftIcon___ytDJc", ul = "Input-module__rightIcon___Ace8v", ve = {
input: Kn,
sm: Zn,
md: Qn,
lg: el,
withLeftIcon: tl,
withRightIcon: sl,
default: "Input-module__default___sk5nc",
error: ol,
success: rl,
withShadow: al,
readOnly: nl,
disabled: ll,
inputWrapper: cl,
fullWidth: il,
icon: dl,
leftIcon: _l,
rightIcon: ul
}, ml = $(
({
className: e,
style: s,
variant: o = "default",
size: r = "md",
leftIcon: a,
rightIcon: n,
fullWidth: l = !1,
brutalistShadow: c = !0,
disabled: i,
readOnly: d,
type: u = "text",
...p
}, m) => {
const { className: _, style: f } = k({
className: e,
style: s,
componentClasses: N(
ve.input,
ve[o],
ve[r],
{
[ve.withLeftIcon]: a,
[ve.withRightIcon]: n,
[ve.disabled]: i,
[ve.readOnly]: d,
[ve.withShadow]: c && !i && !d
}
)
}), { className: x, style: g } = k({
className: e,
style: s,
componentClasses: N(
ve.inputWrapper,
ve[o],
ve[r],
{
[ve.fullWidth]: l,
[ve.disabled]: i,
[ve.readOnly]: d,
[ve.withShadow]: c && !i && !d
}
)
}), b = /* @__PURE__ */ t.jsx(
"input",
{
ref: m,
type: u,
className: _,
style: f,
disabled: i,
readOnly: d,
...p
}
);
return a || n ? /* @__PURE__ */ t.jsxs(
"div",
{
className: x,
style: g,
children: [
a && /* @__PURE__ */ t.jsx("span", { className: N(ve.icon, ve.leftIcon), children: a }),
b,
n && /* @__PURE__ */ t.jsx("span", { className: N(ve.icon, ve.rightIcon), children: n })
]
}
) : b;
}
);
ml.displayName = "Input";
const pl = "InputOTP-module__container___auLUu", hl = "InputOTP-module__sm___DS5s2", fl = "InputOTP-module__md___hhGcD", gl = "InputOTP-module__lg___Sxa8s", bl = "InputOTP-module__input___yK7LR", yl = "InputOTP-module__error___9c1bD", xl = "InputOTP-module__success___SrNaU", vl = "InputOTP-module__withShadow___AkXLZ", wl = "InputOTP-module__filled___BXbkP", Cl = "InputOTP-module__disabled___u1z90", st = {
container: pl,
sm: hl,
md: fl,
lg: gl,
input: bl,
default: "InputOTP-module__default___ASLDz",
error: yl,
success: xl,
withShadow: vl,
filled: wl,
disabled: Cl
}, Nl = $(
({
length: e = 6,
value: s = "",
onChange: o,
onComplete: r,
variant: a = "default",
size: n = "md",
disabled: l = !1,
autoFocus: c = !1,
type: i = "text",
placeholder: d = "•",
className: u,
style: p,
brutalistShadow: m = !0
}, _) => {
const [f, x] = z(() => {
const w = s.split("").slice(0, e);
return [...w, ...Array(e - w.length).fill("")];
}), g = Z([]), { className: b, style: y } = k({
className: u,
style: p,
componentClasses: N(
st.container,
st[a],
st[n],
{
[st.brutalistShadow]: m,
[st.disabled]: l
}
)
});
Y(() => {
const w = s.split("").slice(0, e);
x([...w, ...Array(e - w.length).fill("")]);
}, [s, e]);
const C = (w) => {
var j, T;
g.current[w] && ((j = g.current[w]) == null || j.focus(), (T = g.current[w]) == null || T.select());
}, v = (w, j) => {
if (i === "number" && j && !/^\d+$/.test(j)) return;
const T = [...f];
T[w] = j.slice(-1), x(T);
const D = T.join("");
o == null || o(D), j && w < e - 1 && C(w + 1), D.length === e && !T.includes("") && (r == null || r(D));
}, L = (w, j) => {
j.key === "Backspace" && !f[w] && w > 0 || j.key === "ArrowLeft" && w > 0 ? (j.preventDefault(), C(w - 1)) : j.key === "ArrowRight" && w < e - 1 && (j.preventDefault(), C(w + 1));
}, S = (w) => {
w.preventDefault();
const j = w.clipboardData.getData("text/plain").slice(0, e);
if (i === "number" && !/^\d+$/.test(j)) return;
const T = [...f];
j.split("").forEach((B, P) => {
P < e && (T[P] = B);
}), x(T);
const D = T.join("");
o == null || o(D);
const F = T.map((B, P) => B !== "" ? P : -1).filter((B) => B !== -1).pop() ?? -1;
C(Math.min(F + 1, e - 1)), D.length === e && !T.includes("") && (r == null || r(D));
};
return /* @__PURE__ */ t.jsx(
"div",
{
ref: _,
className: b,
style: y,
children: Array.from({ length: e }).map((w, j) => /* @__PURE__ */ t.jsx(
"input",
{
ref: (T) => g.current[j] = T,
type: "text",
inputMode: i === "number" ? "numeric" : "text",
pattern: i === "number" ? "\\d*" : void 0,
maxLeng