goobs-frontend
Version:
A comprehensive React-based libary for building modern web applications
1,548 lines (1,544 loc) • 2.88 MB
JavaScript
'use client';
import rt, { forwardRef as dr, useState as y, useMemo as ye, useCallback as G, useRef as Be, useEffect as Fe, useId as mS, useImperativeHandle as Gh, createContext as xd, useContext as vd, memo as Vh } from "react";
import qn, { createPortal as $n } from "react-dom";
var $D = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
function Po(e) {
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
}
var no = { exports: {} }, kn = {};
var $d;
function _S() {
if ($d) return kn;
$d = 1;
var e = /* @__PURE__ */ Symbol.for("react.transitional.element"), r = /* @__PURE__ */ Symbol.for("react.fragment");
function t(o, a, n) {
var s = null;
if (n !== void 0 && (s = "" + n), a.key !== void 0 && (s = "" + a.key), "key" in a) {
n = {};
for (var l in a)
l !== "key" && (n[l] = a[l]);
} else n = a;
return a = n.ref, {
$$typeof: e,
type: o,
key: s,
ref: a !== void 0 ? a : null,
props: n
};
}
return kn.Fragment = r, kn.jsx = t, kn.jsxs = t, kn;
}
var Ln = {};
var Kd;
function hS() {
return Kd || (Kd = 1, process.env.NODE_ENV !== "production" && (function() {
function e(U) {
if (U == null) return null;
if (typeof U == "function")
return U.$$typeof === N ? null : U.displayName || U.name || null;
if (typeof U == "string") return U;
switch (U) {
case m:
return "Fragment";
case S:
return "Profiler";
case _:
return "StrictMode";
case C:
return "Suspense";
case T:
return "SuspenseList";
case R:
return "Activity";
}
if (typeof U == "object")
switch (typeof U.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), U.$$typeof) {
case f:
return "Portal";
case v:
return U.displayName || "Context";
case x:
return (U._context.displayName || "Context") + ".Consumer";
case E:
var Q = U.render;
return U = U.displayName, U || (U = Q.displayName || Q.name || "", U = U !== "" ? "ForwardRef(" + U + ")" : "ForwardRef"), U;
case I:
return Q = U.displayName || null, Q !== null ? Q : e(U.type) || "Memo";
case w:
Q = U._payload, U = U._init;
try {
return e(U(Q));
} catch {
}
}
return null;
}
function r(U) {
return "" + U;
}
function t(U) {
try {
r(U);
var Q = !1;
} catch {
Q = !0;
}
if (Q) {
Q = console;
var re = Q.error, X = typeof Symbol == "function" && Symbol.toStringTag && U[Symbol.toStringTag] || U.constructor.name || "Object";
return re.call(
Q,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
X
), r(U);
}
}
function o(U) {
if (U === m) return "<>";
if (typeof U == "object" && U !== null && U.$$typeof === w)
return "<...>";
try {
var Q = e(U);
return Q ? "<" + Q + ">" : "<...>";
} catch {
return "<...>";
}
}
function a() {
var U = M.A;
return U === null ? null : U.getOwner();
}
function n() {
return Error("react-stack-top-frame");
}
function s(U) {
if (L.call(U, "key")) {
var Q = Object.getOwnPropertyDescriptor(U, "key").get;
if (Q && Q.isReactWarning) return !1;
}
return U.key !== void 0;
}
function l(U, Q) {
function re() {
k || (k = !0, console.error(
"%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://react.dev/link/special-props)",
Q
));
}
re.isReactWarning = !0, Object.defineProperty(U, "key", {
get: re,
configurable: !0
});
}
function c() {
var U = e(this.type);
return z[U] || (z[U] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), U = this.props.ref, U !== void 0 ? U : null;
}
function d(U, Q, re, X, le, ae) {
var H = re.ref;
return U = {
$$typeof: h,
type: U,
key: Q,
props: re,
_owner: X
}, (H !== void 0 ? H : null) !== null ? Object.defineProperty(U, "ref", {
enumerable: !1,
get: c
}) : Object.defineProperty(U, "ref", { enumerable: !1, value: null }), U._store = {}, Object.defineProperty(U._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(U, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(U, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: le
}), Object.defineProperty(U, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: ae
}), Object.freeze && (Object.freeze(U.props), Object.freeze(U)), U;
}
function g(U, Q, re, X, le, ae) {
var H = Q.children;
if (H !== void 0)
if (X)
if (A(H)) {
for (X = 0; X < H.length; X++)
u(H[X]);
Object.freeze && Object.freeze(H);
} else
console.error(
"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 u(H);
if (L.call(Q, "key")) {
H = e(U);
var J = Object.keys(Q).filter(function(oe) {
return oe !== "key";
});
X = 0 < J.length ? "{key: someKey, " + J.join(": ..., ") + ": ...}" : "{key: someKey}", K[H + X] || (J = 0 < J.length ? "{" + J.join(": ..., ") + ": ...}" : "{}", console.error(
`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} />`,
X,
H,
J,
H
), K[H + X] = !0);
}
if (H = null, re !== void 0 && (t(re), H = "" + re), s(Q) && (t(Q.key), H = "" + Q.key), "key" in Q) {
re = {};
for (var ne in Q)
ne !== "key" && (re[ne] = Q[ne]);
} else re = Q;
return H && l(
re,
typeof U == "function" ? U.displayName || U.name || "Unknown" : U
), d(
U,
H,
re,
a(),
le,
ae
);
}
function u(U) {
b(U) ? U._store && (U._store.validated = 1) : typeof U == "object" && U !== null && U.$$typeof === w && (U._payload.status === "fulfilled" ? b(U._payload.value) && U._payload.value._store && (U._payload.value._store.validated = 1) : U._store && (U._store.validated = 1));
}
function b(U) {
return typeof U == "object" && U !== null && U.$$typeof === h;
}
var p = rt, h = /* @__PURE__ */ Symbol.for("react.transitional.element"), f = /* @__PURE__ */ Symbol.for("react.portal"), m = /* @__PURE__ */ Symbol.for("react.fragment"), _ = /* @__PURE__ */ Symbol.for("react.strict_mode"), S = /* @__PURE__ */ Symbol.for("react.profiler"), x = /* @__PURE__ */ Symbol.for("react.consumer"), v = /* @__PURE__ */ Symbol.for("react.context"), E = /* @__PURE__ */ Symbol.for("react.forward_ref"), C = /* @__PURE__ */ Symbol.for("react.suspense"), T = /* @__PURE__ */ Symbol.for("react.suspense_list"), I = /* @__PURE__ */ Symbol.for("react.memo"), w = /* @__PURE__ */ Symbol.for("react.lazy"), R = /* @__PURE__ */ Symbol.for("react.activity"), N = /* @__PURE__ */ Symbol.for("react.client.reference"), M = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, L = Object.prototype.hasOwnProperty, A = Array.isArray, O = console.createTask ? console.createTask : function() {
return null;
};
p = {
react_stack_bottom_frame: function(U) {
return U();
}
};
var k, z = {}, D = p.react_stack_bottom_frame.bind(
p,
n
)(), V = O(o(n)), K = {};
Ln.Fragment = m, Ln.jsx = function(U, Q, re) {
var X = 1e4 > M.recentlyCreatedOwnerStacks++;
return g(
U,
Q,
re,
!1,
X ? Error("react-stack-top-frame") : D,
X ? O(o(U)) : V
);
}, Ln.jsxs = function(U, Q, re) {
var X = 1e4 > M.recentlyCreatedOwnerStacks++;
return g(
U,
Q,
re,
!0,
X ? Error("react-stack-top-frame") : D,
X ? O(o(U)) : V
);
};
})()), Ln;
}
var Qd;
function Fo() {
return Qd || (Qd = 1, process.env.NODE_ENV === "production" ? no.exports = /* @__PURE__ */ _S() : no.exports = /* @__PURE__ */ hS()), no.exports;
}
var i = /* @__PURE__ */ Fo();
function he(e, r) {
const t = e.replace("#", ""), o = parseInt(t.substring(0, 2), 16), a = parseInt(t.substring(2, 4), 16), n = parseInt(t.substring(4, 6), 16);
return `rgba(${o}, ${a}, ${n}, ${r})`;
}
const Yr = "#FFD700", bS = ({ value: e, exclusive: r, onChange: t, children: o, styles: a }) => {
const s = rt.Children.toArray(o).length, l = rt.Children.map(o, (d, g) => {
if (rt.isValidElement(d)) {
const u = g === 0, b = g === s - 1, p = (d.props.value || "") === e, h = he(Yr, 0.4);
return rt.cloneElement(d, {
...d.props,
styles: {
...d.props.styles,
...a,
borderColor: "transparent",
borderWidth: "0",
boxShadow: "none",
margin: "0",
padding: "8px 16px",
borderRadius: u ? "8px 0 0 8px" : b ? "0 8px 8px 0" : "0",
...!b && {
borderRightWidth: "1px",
borderRightStyle: "solid",
borderRightColor: h
},
...p && {
backgroundColor: he(Yr, 0.2)
}
},
onClick: (f) => {
r && t(f, d.props.value || ""), d.props.onClick && d.props.onClick(f);
},
selected: p
});
}
return d;
}), c = {
display: "flex",
borderRadius: "8px",
overflow: "hidden",
background: "transparent",
boxShadow: `0 0 10px ${he(Yr, 0.3)}`,
border: `1px solid ${he(Yr, 0.3)}`,
padding: "0"
};
return i.jsx("div", { style: c, children: l });
}, gt = dr(({ text: e, icon: r, styles: t, onClick: o, selected: a, ...n }, s) => {
const [l, c] = y(!1), [d, g] = y(!1), u = ye(() => {
const { sacredtheme: I, ...w } = n;
return w;
}, [n]), b = t?.disabled || u.disabled, p = t?.iconLocation || "left", h = G(() => {
c(!0);
}, []), f = G(() => {
c(!1), g(!1);
}, []), m = G(() => {
g(!0);
}, []), _ = G(() => {
g(!1);
}, []), S = G((I) => {
!b && o && o(I);
}, [b, o]), x = t?.outline === !0 ? "none" : t?.outline === !1 ? void 0 : t?.outline || "none", v = () => b ? "rgba(0, 0, 0, 0.3)" : (t?.backgroundColor || t?.background) && !l && !d && !a ? t?.backgroundColor || t?.background : d || a ? he(Yr, 0.3) : l ? t?.hoverBackgroundColor || he(Yr, 0.2) : t?.backgroundColor || t?.background || "rgba(0, 0, 0, 0.6)", E = () => {
if (t?.border)
return t.border;
const I = l && t?.hoverBorderColor ? t.hoverBorderColor : t?.borderColor || he(Yr, l ? 0.6 : 0.3);
return `${t?.borderWidth || "1px"} solid ${I}`;
}, C = {
position: "relative",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
gap: p === "above" ? "4px" : "8px",
flexDirection: p === "above" ? "column" : "row",
width: t?.width || "auto",
minWidth: t?.minWidth || "fit-content",
maxWidth: t?.maxWidth,
height: t?.height || "auto",
minHeight: t?.minHeight || "40px",
padding: t?.padding || "8px 16px",
margin: t?.margin,
marginTop: t?.marginTop,
marginBottom: t?.marginBottom,
marginLeft: t?.marginLeft,
marginRight: t?.marginRight,
fontSize: t?.fontSize || "14px",
fontWeight: t?.fontWeight || 500,
fontFamily: t?.fontFamily || '"Cinzel", serif',
color: t?.color || (b ? "rgba(255, 255, 255, 0.4)" : "rgba(255, 255, 255, 0.9)"),
backgroundColor: v(),
border: E(),
borderRadius: t?.borderRadius || "8px",
boxShadow: l && t?.hoverBoxShadow ? t.hoverBoxShadow : t?.boxShadow || (l && !b ? `0 0 15px ${he(Yr, 0.3)}` : "none"),
textShadow: t?.textShadow,
flex: t?.flex,
cursor: t?.cursor || (b ? "not-allowed" : "pointer"),
transition: "all 0.3s ease",
transform: l && t?.hoverTransform ? t.hoverTransform : void 0,
outline: x,
userSelect: "none",
textTransform: t?.textTransform || "none",
letterSpacing: t?.letterSpacing || "0.05em",
boxSizing: "border-box",
whiteSpace: t?.whiteSpace || "nowrap",
opacity: t?.opacity
}, T = ye(() => r ? i.jsx("span", { style: { display: "flex", alignItems: "center" }, children: r }) : null, [r]);
return i.jsxs("button", { ref: s, style: C, disabled: b, onMouseEnter: h, onMouseLeave: f, onMouseDown: m, onMouseUp: _, onClick: S, ...u, children: [p === "above" && T, p === "left" && T, e && i.jsx("span", { children: e }), p === "right" && T] });
});
gt.displayName = "Button";
const fS = dr(({ size: e = "medium", color: r = "default", children: t, styles: o, ...a }, n) => {
const s = {
small: { width: "32px", height: "32px", padding: "4px" },
medium: { width: "40px", height: "40px", padding: "8px" },
large: { width: "48px", height: "48px", padding: "12px" }
}, l = o?.theme === "sacred" ? {
primary: { backgroundColor: "transparent", color: "#FFD700" },
secondary: { backgroundColor: "transparent", color: "#FFD700" },
success: { backgroundColor: "transparent", color: "#10B981" },
error: { backgroundColor: "transparent", color: "#EF4444" },
info: { backgroundColor: "transparent", color: "#3B82F6" },
warning: { backgroundColor: "transparent", color: "#F59E0B" },
default: { backgroundColor: "transparent", color: "#FFD700" }
} : {
primary: { backgroundColor: "#1976d2", color: "white" },
secondary: { backgroundColor: "#9c27b0", color: "white" },
success: { backgroundColor: "#2e7d32", color: "white" },
error: { backgroundColor: "#d32f2f", color: "white" },
info: { backgroundColor: "#0288d1", color: "white" },
warning: { backgroundColor: "#ed6c02", color: "white" },
default: { backgroundColor: "transparent", color: "inherit" }
}, c = r === "default" && o?.theme !== "sacred", d = {
...s[e],
...l[r],
borderRadius: "50%",
border: c ? "1px solid rgba(0, 0, 0, 0.12)" : "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
minWidth: "auto",
...o,
// Force remove all borders and backgrounds if sacred theme
...o?.theme === "sacred" && {
outline: !1,
// This is the key property that removes borders in getButtonStyles
border: "none",
borderWidth: "0",
borderStyle: "none",
borderColor: "transparent",
boxShadow: "none",
backgroundColor: "transparent",
"&:hover": {
backgroundColor: "rgba(255, 215, 0, 0.1)"
}
}
};
return i.jsx(gt, { ref: n, icon: t, styles: d, ...a });
});
fS.displayName = "IconButton";
const SS = "#FFD700", Ft = ({ text: e, children: r, variant: t = "body1", color: o, fontSize: a, fontFamily: n, fontWeight: s, textAlign: l = "left", marginBottom: c, marginTop: d, width: g, outline: u, gutterBottom: b, styles: p }) => {
const h = p?.theme === "sacred", f = p?.variant || t, m = p?.color || o || (h ? SS : "rgba(255, 255, 255, 0.9)"), _ = p?.fontSize || a, S = p?.fontFamily || n || '"Crimson Text", serif', x = p?.fontWeight || s, v = p?.textAlign || l, E = p?.marginBottom || c || "0", C = p?.marginTop || d || "0", T = p?.marginLeft || "0", I = p?.marginRight || "0", w = p?.margin, R = p?.padding, N = p?.paddingLeft, M = p?.paddingRight, L = p?.paddingTop, A = p?.paddingBottom, O = p?.lineHeight, k = p?.letterSpacing, z = p?.textShadow, D = p?.fontStyle, V = p?.textTransform, K = p?.whiteSpace, U = p?.opacity, Q = p?.maxWidth, re = p?.minWidth, X = p?.backgroundColor, le = p?.borderLeft, ae = p?.flex, H = p?.alignSelf, J = p?.width || g, ne = p?.borderRadius, oe = p?.overflow, B = p?.textOverflow, Y = p?.outline ?? u, Te = Y === !0 ? "none" : Y === !1 ? void 0 : Y, pe = p?.gutterBottom ?? b ?? !1, Se = (() => {
const fe = String(f).toLowerCase();
return fe.includes("cinzel") ? fe.includes("h1") ? {
fontSize: _ || "2.5rem",
fontWeight: 700,
fontFamily: '"Cinzel", serif'
} : fe.includes("h2") ? {
fontSize: _ || "2rem",
fontWeight: 700,
fontFamily: '"Cinzel", serif'
} : fe.includes("h3") ? {
fontSize: _ || "1.75rem",
fontWeight: 600,
fontFamily: '"Cinzel", serif'
} : fe.includes("h4") ? {
fontSize: _ || "1.5rem",
fontWeight: 600,
fontFamily: '"Cinzel", serif'
} : fe.includes("h5") ? {
fontSize: _ || "1.25rem",
fontWeight: 600,
fontFamily: '"Cinzel", serif'
} : fe.includes("h6") ? {
fontSize: _ || "1.1rem",
fontWeight: 600,
fontFamily: '"Cinzel", serif'
} : {
fontSize: _ || "1rem",
fontWeight: 600,
fontFamily: '"Cinzel", serif'
} : fe.includes("merri") && (fe.includes("helper") || fe.includes("footer")) ? {
fontSize: _ || "0.85rem",
fontWeight: 400,
fontFamily: '"Merriweather", serif',
color: h ? "rgba(255, 215, 0, 0.7)" : "rgba(255, 255, 255, 0.6)"
} : fe.includes("h1") ? {
fontSize: _ || "2.5rem",
fontWeight: 600,
fontFamily: '"Cinzel", serif'
} : fe.includes("h2") ? {
fontSize: _ || "2rem",
fontWeight: 600,
fontFamily: '"Cinzel", serif'
} : fe.includes("h3") ? {
fontSize: _ || "1.75rem",
fontWeight: 600,
fontFamily: '"Cinzel", serif'
} : fe.includes("h4") ? {
fontSize: _ || "1.5rem",
fontWeight: 600,
fontFamily: '"Cinzel", serif'
} : fe.includes("h5") ? {
fontSize: _ || "1.25rem",
fontWeight: 600,
fontFamily: '"Cinzel", serif'
} : fe.includes("h6") ? {
fontSize: _ || "1rem",
fontWeight: 600,
fontFamily: '"Cinzel", serif'
} : fe.includes("body2") || fe.includes("small") ? { fontSize: _ || "0.875rem", fontWeight: 400 } : { fontSize: _ || "1rem", fontWeight: 400 };
})(), Le = String(f).toLowerCase().includes("h"), Ne = e || r;
return i.jsx("p", { style: {
...Se,
color: Se.color || m,
fontFamily: Se.fontFamily || (Le ? '"Cinzel", serif' : S),
fontWeight: x || Se.fontWeight,
textAlign: v,
margin: w,
marginTop: w ? void 0 : C,
marginBottom: w ? void 0 : pe ? "0.35em" : E,
marginLeft: w ? void 0 : T,
marginRight: w ? void 0 : I,
padding: R,
paddingLeft: R ? void 0 : N,
paddingRight: R ? void 0 : M,
paddingTop: R ? void 0 : L,
paddingBottom: R ? void 0 : A,
lineHeight: O,
letterSpacing: k,
textShadow: z,
fontStyle: D,
textTransform: V,
whiteSpace: K,
opacity: U,
maxWidth: Q,
minWidth: re,
backgroundColor: X,
borderLeft: le,
flex: ae,
alignSelf: H,
width: J,
outline: Te,
borderRadius: ne,
overflow: oe,
textOverflow: B
}, children: Ne });
};
let ri = !1;
const ES = () => {
if (!ri && !(typeof document > "u"))
try {
const e = "formfield-global-resets";
if (document.getElementById(e)) {
ri = !0;
return;
}
const r = document.createElement("style");
r.id = e, r.textContent = `
/* Enforce no text transform on inputs across the app */
input, textarea, [contenteditable="true"], [contenteditable=""] {
text-transform: none !important;
}
`, document.head.appendChild(r), ri = !0;
} catch {
}
}, xS = {
light: {
background: "rgba(255, 255, 255, 0.95)",
border: {
default: "rgba(209, 213, 219, 1)",
// #D1D5DB
focused: "rgba(59, 130, 246, 1)",
// #3B82F6
error: "rgba(239, 68, 68, 1)"
// #EF4444
},
text: "rgba(31, 41, 55, 1)",
label: {
default: "rgba(107, 114, 128, 1)",
// #6B7280
focused: "rgba(59, 130, 246, 1)",
// #3B82F6
error: "rgba(239, 68, 68, 1)",
// #EF4444
shrunkBackground: "rgba(255, 255, 255, 0.95)"
},
adornment: {
default: "rgba(107, 114, 128, 1)",
// #6B7280
focused: "rgba(59, 130, 246, 1)"
// #3B82F6
},
footerText: {
default: "rgba(107, 114, 128, 1)",
// #6B7280
error: "rgba(239, 68, 68, 1)",
// #EF4444
info: "rgba(59, 130, 246, 1)"
// #3B82F6
},
fontFamily: '"Inter", sans-serif'
},
dark: {
background: "rgba(31, 41, 55, 0.95)",
border: {
default: "rgba(75, 85, 99, 1)",
// #4B5563
focused: "rgba(96, 165, 250, 1)",
// #60A5FA
error: "rgba(239, 68, 68, 1)"
// #EF4444
},
text: "rgba(255, 255, 255, 1)",
label: {
default: "rgba(156, 163, 175, 1)",
// #9CA3AF
focused: "rgba(96, 165, 250, 1)",
// #60A5FA
error: "rgba(239, 68, 68, 1)",
// #EF4444
shrunkBackground: "rgba(31, 41, 55, 0.95)"
},
adornment: {
default: "rgba(156, 163, 175, 1)",
// #9CA3AF
focused: "rgba(96, 165, 250, 1)"
// #60A5FA
},
footerText: {
default: "rgba(156, 163, 175, 1)",
// #9CA3AF
error: "rgba(239, 68, 68, 1)",
// #EF4444
info: "rgba(96, 165, 250, 1)"
// #60A5FA
},
fontFamily: '"Inter", sans-serif'
},
sacred: {
background: "rgba(10, 10, 10, 0.9)",
border: {
default: "rgba(255, 215, 0, 0.4)",
// Gold with transparency
focused: "rgba(255, 215, 0, 1)",
// #FFD700
error: "rgba(239, 68, 68, 1)"
// #EF4444
},
text: "rgba(255, 215, 0, 1)",
// #FFD700
label: {
default: "rgba(255, 215, 0, 0.9)",
// Gold for sacred theme labels
focused: "rgba(255, 215, 0, 1)",
// #FFD700
error: "rgba(239, 68, 68, 1)",
// #EF4444
shrunkBackground: "rgba(10, 10, 10, 0.9)"
},
adornment: {
default: "rgba(255, 215, 0, 0.7)",
// Gold for sacred theme adornments
focused: "rgba(255, 215, 0, 1)"
// #FFD700
},
footerText: {
default: "rgba(255, 215, 0, 0.6)",
// Gold for sacred theme footer text
error: "rgba(239, 68, 68, 1)",
// #EF4444
info: "rgba(255, 215, 0, 0.8)"
// Gold with slight transparency
},
// Cinzel renders lowercase as small caps, which makes inputs appear uppercased.
// Use Inter for form fields to preserve true lowercase input rendering.
fontFamily: '"Inter", sans-serif'
}
}, Wh = (e) => {
const r = e?.theme || "sacred", t = xS[r];
return e ? {
background: e.backgroundColor || t.background,
border: {
default: e.borderColor || t.border.default,
focused: e.borderFocusedColor || t.border.focused,
error: e.borderErrorColor || t.border.error
},
text: e.textColor || t.text,
label: {
default: e.labelColor || t.label.default,
focused: e.labelFocusedColor || t.label.focused,
error: e.labelErrorColor || t.label.error,
shrunkBackground: e.labelShrunkBackgroundColor || t.label.shrunkBackground
},
adornment: {
default: e.adornmentColor || t.adornment.default,
focused: e.adornmentFocusedColor || t.adornment.focused
},
footerText: {
default: e.footerTextColor || t.footerText.default,
error: e.footerTextErrorColor || t.footerText.error,
info: e.footerTextInfoColor || t.footerText.info
},
fontFamily: e.fontFamily || t.fontFamily
} : t;
}, jt = (e, r) => {
ES();
const t = Wh(e), o = e?.helperTextType || "info", a = o === "error", n = a ? t.border.error : r ? t.border.focused : t.border.default, s = a ? t.label.error : t.label.default, l = r ? t.adornment.focused : t.adornment.default, c = o === "error" ? t.footerText.error : o === "info" ? t.footerText.info : t.footerText.default, d = e?.transitionDuration ? `all ${e.transitionDuration} ${e.transitionEasing || "cubic-bezier(0.4, 0, 0.2, 1)"}` : "all 200ms cubic-bezier(0.4, 0, 0.2, 1)";
return {
themeConfig: t,
borderColor: n,
labelColor: s,
adornmentColor: l,
footerTextColor: c,
transition: d,
isError: a,
helperTextType: o
};
}, er = (e, r) => ({
display: "block",
marginBottom: "6px",
fontSize: "14px",
color: e,
fontFamily: r.fontFamily,
fontWeight: 600,
lineHeight: "1.2",
letterSpacing: "0.01em",
pointerEvents: "auto",
textTransform: "none"
}), cr = (e) => ({
position: "relative",
width: e?.width || "100%",
minWidth: e?.minWidth,
maxWidth: e?.maxWidth,
height: e?.height || "auto",
minHeight: e?.minHeight,
maxHeight: e?.maxHeight,
marginTop: e?.marginTop || "0",
marginBottom: e?.marginBottom,
marginLeft: e?.marginLeft,
marginRight: e?.marginRight,
margin: e?.margin,
// Ensure inputs and text content do not inherit uppercase from parent containers
textTransform: "none"
}), tr = (e, r, t) => ({
display: "block",
marginTop: t?.footerMarginTop || "8px",
fontSize: t?.footerFontSize || "12px",
color: e,
fontFamily: r.fontFamily,
lineHeight: "1.3",
fontWeight: 400,
textTransform: "none"
}), Ar = (e) => ({
position: "absolute",
top: "50%",
transform: "translateY(-50%)",
display: "flex",
alignItems: "center",
color: e
}), KD = (e, r, t) => {
if (!e || !r)
return e;
const o = t?.requiredIndicatorText || " *";
return `${e}${o}`;
}, or = (e) => ({
color: e?.requiredIndicatorColor || "rgba(239, 68, 68, 1)"
}), ir = (e) => ({
required: !!e,
"aria-required": !!e
}), QD = (e, r) => {
if (r && (!e || e.trim() === ""))
return "This field is required";
}, vS = {
light: {
container: {
backgroundColor: "white",
borderWidth: "0",
borderStyle: "none",
borderColor: "transparent",
borderRadius: "8px",
boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.1)",
backdropFilter: "none"
},
containerHover: {
transform: "translateY(-1px)",
boxShadow: "0px 3px 6px rgba(0, 0, 0, 0.15)"
},
containerExpanded: {
boxShadow: "0px 3px 8px rgba(0, 0, 0, 0.12)",
backgroundColor: "#fafafa"
},
summary: {
backgroundColor: "#f5f7fa",
color: "inherit",
fontFamily: "merriweather",
fontSize: "14px",
fontWeight: 500,
letterSpacing: "normal",
borderBottom: "none",
minHeight: "32px",
height: "32px",
maxHeight: "32px",
whiteSpace: "nowrap",
minWidth: "fit-content"
},
summaryHover: {
backgroundColor: "#e8f0fe",
color: "inherit"
},
summaryExpanded: {
backgroundColor: "#e3f2fd",
borderBottomColor: "rgba(0, 0, 0, 0.12)",
color: "inherit",
fontWeight: 500
},
details: {
backgroundColor: "white",
borderTop: "1px solid rgba(0, 0, 0, 0.08)",
color: "inherit",
fontFamily: "inherit",
fontSize: "16px",
lineHeight: 1.6,
backdropFilter: "none"
},
icon: {
color: "#000000",
filter: "none"
},
iconHover: {
color: "#000000",
transform: "scale(1.1)",
filter: "none"
},
iconExpanded: {
transform: "rotate(180deg)",
color: "#000000",
filter: "none"
},
transition: "all 0.2s ease",
mobile: {
borderRadius: "6px",
boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.1)",
summaryPadding: "4px 16px",
summaryMinHeight: "32px",
detailsPadding: "12px 16px",
summaryFontSize: "14px"
},
tablet: {
detailsPadding: "14px 18px"
},
desktop: {
detailsPadding: "16px 24px"
}
},
dark: {
container: {
backgroundColor: "rgba(31, 41, 55, 0.95)",
borderWidth: "0",
borderStyle: "none",
borderColor: "transparent",
borderRadius: "8px",
boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.3)",
backdropFilter: "blur(8px)"
},
containerHover: {
transform: "translateY(-1px)",
boxShadow: "0px 3px 6px rgba(0, 0, 0, 0.25)"
},
containerExpanded: {
boxShadow: "0px 3px 8px rgba(0, 0, 0, 0.3)",
backgroundColor: "rgba(30, 58, 138, 0.2)"
},
summary: {
backgroundColor: "rgba(17, 24, 39, 0.5)",
color: "rgb(243, 244, 246)",
fontFamily: "merriweather",
fontSize: "14px",
fontWeight: 500,
letterSpacing: "normal",
borderBottom: "none",
minHeight: "32px",
height: "32px",
maxHeight: "32px",
whiteSpace: "nowrap",
minWidth: "fit-content"
},
summaryHover: {
backgroundColor: "rgba(30, 58, 138, 0.3)",
color: "rgb(96, 165, 250)"
},
summaryExpanded: {
backgroundColor: "rgba(30, 58, 138, 0.4)",
borderBottomColor: "rgba(96, 165, 250, 0.3)",
color: "rgb(96, 165, 250)",
fontWeight: 500
},
details: {
backgroundColor: "rgba(17, 24, 39, 0.8)",
borderTop: "1px solid rgba(75, 85, 99, 0.5)",
color: "rgb(209, 213, 219)",
fontFamily: "inherit",
fontSize: "16px",
lineHeight: 1.6,
backdropFilter: "blur(4px)"
},
icon: {
color: "rgb(156, 163, 175)",
filter: "none"
},
iconHover: {
color: "rgb(96, 165, 250)",
transform: "scale(1.1)",
filter: "none"
},
iconExpanded: {
transform: "rotate(180deg)",
color: "rgb(96, 165, 250)",
filter: "none"
},
transition: "all 0.2s ease",
mobile: {
borderRadius: "6px",
boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.3)",
summaryPadding: "4px 16px",
summaryMinHeight: "32px",
detailsPadding: "12px 16px",
summaryFontSize: "14px"
},
tablet: {
detailsPadding: "14px 18px"
},
desktop: {
detailsPadding: "16px 24px"
}
},
sacred: {
container: {
backgroundColor: "#0a0a0a",
borderWidth: "1px",
borderStyle: "solid",
borderColor: "rgba(255, 215, 0, 0.3)",
borderRadius: "8px",
boxShadow: "0 0 15px rgba(255, 215, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3)",
backdropFilter: "blur(8px)",
backgroundImage: `
linear-gradient(rgba(255, 215, 0, 0.02), rgba(255, 215, 0, 0.02)),
radial-gradient(circle at top right, rgba(255, 215, 0, 0.08) 0%, transparent 50%)
`
},
containerHover: {
transform: "translateY(-1px)",
boxShadow: "0 0 25px rgba(255, 215, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.4)"
},
containerExpanded: {
boxShadow: "0 0 30px rgba(255, 215, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.5)",
backgroundColor: "#0a0a0a",
borderColor: "#FFD700",
backgroundImage: `
linear-gradient(rgba(255, 215, 0, 0.02), rgba(255, 215, 0, 0.02)),
radial-gradient(circle at top right, rgba(255, 215, 0, 0.08) 0%, transparent 50%)
`
},
summary: {
backgroundColor: "transparent",
color: "rgba(255, 215, 0, 0.9)",
fontFamily: '"Cinzel", serif',
fontSize: "14px",
fontWeight: 600,
letterSpacing: "0.05em",
textShadow: "0 0 8px rgba(255, 215, 0, 0.6)",
borderBottom: "none",
minHeight: "32px",
height: "32px",
maxHeight: "32px",
whiteSpace: "nowrap",
minWidth: "fit-content"
},
summaryHover: {
backgroundColor: "rgba(255, 215, 0, 0.1)",
color: "#FFD700",
textShadow: "0 0 8px rgba(255, 215, 0, 0.6)"
},
summaryExpanded: {
backgroundColor: "rgba(255, 215, 0, 0.05)",
borderBottomColor: "rgba(255, 215, 0, 0.3)",
color: "#FFD700",
fontWeight: 600,
textShadow: "0 0 8px rgba(255, 215, 0, 0.6)"
},
details: {
backgroundColor: "transparent",
borderTop: "1px solid rgba(255, 215, 0, 0.2)",
color: "rgba(255, 215, 0, 0.8)",
fontFamily: "inherit",
fontSize: "16px",
lineHeight: 1.6,
backdropFilter: "blur(2px)"
},
icon: {
color: "#FFD700",
filter: "drop-shadow(0 0 4px rgba(255, 215, 0, 0.5))"
},
iconHover: {
color: "#FFD700",
transform: "scale(1.1)",
filter: "drop-shadow(0 0 8px rgba(255, 215, 0, 0.8))"
},
iconExpanded: {
transform: "rotate(180deg)",
color: "#FFD700",
filter: "drop-shadow(0 0 8px rgba(255, 215, 0, 0.8))"
},
transition: "all 0.3s ease",
mobile: {
borderRadius: "6px",
boxShadow: "0 0 10px rgba(255, 215, 0, 0.2)",
summaryPadding: "4px 16px",
summaryMinHeight: "32px",
detailsPadding: "12px 16px",
summaryFontSize: "14px"
},
tablet: {
detailsPadding: "14px 18px"
},
desktop: {
detailsPadding: "24px 32px"
}
}
}, CS = (e) => {
const r = e?.theme || "light", t = vS[r];
if (!e)
return t;
const o = e.hoverBorderColor ?? t.containerHover.borderColor, a = e.expandedBorderColor ?? t.containerExpanded.borderColor, n = e.summaryTextShadow ?? t.summary.textShadow, s = e.summaryHoverTransform ?? t.summaryHover.transform, l = e.summaryHoverTextShadow ?? t.summaryHover.textShadow, c = e.summaryExpandedTextShadow ?? t.summaryExpanded.textShadow, d = e.iconFilter ?? t.icon.filter, g = e.iconHoverFilter ?? t.iconHover.filter, u = e.iconExpandedFilter ?? t.iconExpanded.filter, b = e.height ?? t.summary.height, p = e.maxHeight ?? t.summary.maxHeight, h = e.summaryWhiteSpace ?? t.summary.whiteSpace, f = e.summaryOverflow ?? t.summary.overflow, m = e.summaryTextOverflow ?? t.summary.textOverflow, _ = e.minWidth ?? t.summary.minWidth;
return {
...t,
container: {
backgroundColor: e.backgroundColor || t.container.backgroundColor,
borderWidth: e.borderWidth || t.container.borderWidth,
borderStyle: e.borderColor ? "solid" : t.container.borderStyle,
borderColor: e.borderColor || t.container.borderColor,
borderRadius: e.borderRadius || t.container.borderRadius,
boxShadow: e.boxShadow || t.container.boxShadow,
backdropFilter: e.backdropFilter || t.container.backdropFilter,
...e.backgroundImage || t.container.backgroundImage ? {
backgroundImage: e.backgroundImage || t.container.backgroundImage
} : {}
},
containerHover: {
transform: e.hoverTransform || t.containerHover.transform,
boxShadow: e.hoverBoxShadow || t.containerHover.boxShadow,
...o !== void 0 ? { borderColor: o } : {}
},
containerExpanded: {
boxShadow: e.expandedBoxShadow || t.containerExpanded.boxShadow,
backgroundColor: e.expandedBackgroundColor || t.containerExpanded.backgroundColor,
...a !== void 0 ? { borderColor: a } : {},
...e.expandedBackgroundImage || t.containerExpanded.backgroundImage ? {
backgroundImage: e.expandedBackgroundImage || t.containerExpanded.backgroundImage
} : {}
},
summary: {
backgroundColor: e.summaryBackgroundColor || t.summary.backgroundColor,
color: e.summaryColor || t.summary.color,
fontFamily: e.summaryFontFamily || t.summary.fontFamily,
fontSize: e.summaryFontSize || t.summary.fontSize,
fontWeight: e.summaryFontWeight || t.summary.fontWeight,
letterSpacing: e.summaryLetterSpacing || t.summary.letterSpacing,
...n !== void 0 ? { textShadow: n } : {},
borderBottom: e.summaryBorderBottom || t.summary.borderBottom,
minHeight: e.summaryMinHeight || t.summary.minHeight,
...b !== void 0 ? { height: b } : {},
...p !== void 0 ? { maxHeight: p } : {},
...h !== void 0 ? { whiteSpace: h } : {},
...f !== void 0 ? { overflow: f } : {},
...m !== void 0 ? { textOverflow: m } : {},
..._ !== void 0 ? { minWidth: _ } : {}
},
summaryHover: {
backgroundColor: e.summaryHoverBackgroundColor || t.summaryHover.backgroundColor,
color: e.summaryHoverColor || t.summaryHover.color,
...s !== void 0 ? { transform: s } : {},
...l !== void 0 ? { textShadow: l } : {}
},
summaryExpanded: {
backgroundColor: e.summaryExpandedBackgroundColor || t.summaryExpanded.backgroundColor,
borderBottomColor: e.summaryExpandedBorderBottomColor || t.summaryExpanded.borderBottomColor,
color: e.summaryExpandedColor || t.summaryExpanded.color,
fontWeight: e.summaryExpandedFontWeight || t.summaryExpanded.fontWeight,
...c !== void 0 ? { textShadow: c } : {}
},
details: {
backgroundColor: e.detailsBackgroundColor || t.details.backgroundColor,
borderTop: e.detailsBorderTop || t.details.borderTop,
color: e.detailsColor || t.details.color,
fontFamily: e.detailsFontFamily || t.details.fontFamily,
fontSize: e.detailsFontSize || t.details.fontSize,
lineHeight: e.detailsLineHeight || t.details.lineHeight,
backdropFilter: e.detailsBackdropFilter || t.details.backdropFilter
},
icon: {
color: e.iconColor || t.icon.color,
...d !== void 0 ? { filter: d } : {}
},
iconHover: {
color: e.iconHoverColor || t.iconHover.color,
transform: e.iconHoverTransform || t.iconHover.transform,
...g !== void 0 ? { filter: g } : {}
},
iconExpanded: {
transform: e.iconExpandedTransform || t.iconExpanded.transform,
color: e.iconExpandedColor || t.iconExpanded.color,
...u !== void 0 ? { filter: u } : {}
},
transition: e.transitionDuration ? `all ${e.transitionDuration} ${e.transitionEasing || "cubic-bezier(0.4, 0, 0.2, 1)"}` : t.transition
};
}, ni = (e, r) => {
const t = e[r];
switch (r) {
case "mobile":
return {
borderRadius: t.borderRadius,
boxShadow: t.boxShadow
};
case "tablet":
case "desktop":
return {};
default:
return {};
}
}, oi = (e, r) => {
const t = e[r];
return r === "mobile" ? {
padding: t.summaryPadding,
minHeight: t.summaryMinHeight,
fontSize: t.summaryFontSize
} : {};
}, ii = (e, r) => ({
padding: e[r].detailsPadding
}), XD = (e, r, t, o) => {
const a = CS(e), n = e?.theme === "sacred", s = e?.level || 0, l = e?.levelIndentBase || 0, c = e?.levelIndentIncrement || 6, d = l + s * c, g = {
marginBottom: e?.marginBottom || "8px",
margin: e?.margin,
width: e?.width || "100%",
maxWidth: e?.maxWidth,
minWidth: e?.minWidth,
borderRadius: a.container.borderRadius,
overflow: "hidden",
position: "relative",
transition: a.transition,
backgroundColor: a.container.backgroundColor,
borderWidth: a.container.borderWidth,
borderStyle: a.container.borderStyle,
borderColor: a.container.borderColor,
boxShadow: a.container.boxShadow,
backdropFilter: a.container.backdropFilter,
backgroundImage: a.container.backgroundImage,
...r && !o && {
transform: a.containerHover.transform,
boxShadow: a.containerHover.boxShadow,
borderColor: a.containerHover.borderColor
},
...t && !o && {
boxShadow: a.containerExpanded.boxShadow,
backgroundColor: a.containerExpanded.backgroundColor,
borderColor: a.containerExpanded.borderColor,
backgroundImage: a.containerExpanded.backgroundImage
},
...o && {
opacity: n ? 0.6 : 0.8,
backgroundColor: n ? "rgba(0, 0, 0, 0.8)" : "#f8f8f8",
borderColor: n ? "rgba(255, 215, 0, 0.1)" : void 0
},
...e?.outline === !1 && {
borderWidth: "0",
borderStyle: "none",
borderColor: "transparent",
boxShadow: "none"
}
}, u = {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: e?.summaryPadding || `4px 16px 4px ${d}px`,
height: "32px",
maxHeight: "32px",
minWidth: "fit-content",
transition: a.transition,
position: "relative",
backgroundColor: a.summary.backgroundColor,
color: a.summary.color,
fontFamily: a.summary.fontFamily,
fontWeight: a.summary.fontWeight,
fontSize: a.summary.fontSize,
letterSpacing: a.summary.letterSpacing,
cursor: o ? "not-allowed" : "pointer",
minHeight: a.summary.minHeight,
borderBottom: a.summary.borderBottom,
textShadow: a.summary.textShadow,
whiteSpace: "nowrap",
...r && !o && {
backgroundColor: a.summaryHover.backgroundColor,
color: a.summaryHover.color,
transform: a.summaryHover.transform,
textShadow: a.summaryHover.textShadow
},
...t && !o && {
backgroundColor: a.summaryExpanded.backgroundColor,
borderBottom: `1px solid ${a.summaryExpanded.borderBottomColor}`,
color: a.summaryExpanded.color,
fontWeight: a.summaryExpanded.fontWeight,
textShadow: a.summaryExpanded.textShadow
},
...o && {
opacity: 1,
color: n ? "rgba(255, 215, 0, 0.3)" : "#666",
cursor: "not-allowed"
}
}, b = {
padding: e?.detailsPadding || "16px",
position: "relative",
backgroundColor: a.details.backgroundColor,
borderTop: a.details.borderTop,
color: a.details.color,
fontFamily: a.details.fontFamily,
fontSize: a.details.fontSize,
lineHeight: a.details.lineHeight,
backdropFilter: a.details.backdropFilter,
...e?.outline === !1 && { borderTop: "none" }
}, p = {
width: "24px",
height: "24px",
transition: a.transition,
color: a.icon.color,
filter: a.icon.filter,
...r && !o && {
color: a.iconHover.color,
transform: a.iconHover.transform,
filter: a.iconHover.filter
},
...t && !o && {
transform: a.iconExpanded.transform,
color: a.iconExpanded.color,
filter: a.iconExpanded.filter
},
...o && {
color: n ? "rgba(255, 215, 0, 0.3)" : "#999"
}
};
return {
container: g,
summary: u,
details: b,
icon: p,
responsive: {
mobile: {
container: ni(a, "mobile"),
summary: oi(a, "mobile"),
details: ii(a, "mobile")
},
tablet: {
container: ni(a, "tablet"),
summary: oi(a, "tablet"),
details: ii(a, "tablet")
},
desktop: {
container: ni(a, "desktop"),
summary: oi(a, "desktop"),
details: ii(a, "desktop")
}
}
};
}, TS = `
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
@keyframes progressIndeterminate {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(250%);
}
}
@keyframes progressStripes {
0% {
background-position: 0 0;
}
100% {
background-position: 40px 0;
}
}
@keyframes progressPulse {
0% {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
}
70% {
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
}
}
`, Z = {
fast: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)",
medium: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)",
slow: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)",
premium: "all 400ms cubic-bezier(0.4, 0, 0.2, 1)"
}, Ue = {
light: {
small: "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
medium: "0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12)",
large: "0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1)"
},
dark: {
small: "0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4)",
medium: "0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3)",
large: "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3)"
},
sacred: {
small: "0 0 20px rgba(255, 215, 0, 0.3), 0 0 40px rgba(255, 215, 0, 0.1)",
medium: "0 0 30px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 215, 0, 0.2)",
large: "0 0 40px rgba(255, 215, 0, 0.6), 0 0 80px rgba(255, 215, 0, 0.3)"
}
}, yS = () => {
if (typeof document < "u") {
const e = document.createElement("style");
e.textContent = TS, document.head.querySelector('style[data-keyframes="true"]') || (e.setAttribute("data-keyframes", "true"), document.head.appendChild(e));
}
}, RS = {
container: {
display: "flex",
alignItems: "center",
padding: "8px 0",
position: "relative"
},
list: {
display: "flex",
alignItems: "center",
listStyle: "none",
margin: 0,
padding: 0,
flexWrap: "wrap"
},
listItem: {
display: "flex",
alignItems: "center"
},
item: {
color: "rgba(0, 0, 0, 0.6)",
textDecoration: "none",
fontSize: "14px",
fontFamily: "Inter, system-ui, sans-serif",
fontWeight: "400",
padding: "4px 8px",
borderRadius: "4px",
transition: Z.medium,
cursor: "pointer",
position: "relative"
},
itemHover: {
color: "rgba(25, 118, 210, 1)",
backgroundColor: "rgba(25, 118, 210, 0.04)"
},
activeItem: {
color: "rgba(0, 0, 0, 0.87)",
fontWeight: "500",
cursor: "default"
},
separator: {
color: "rgba(0, 0, 0, 0.38)",
fontSize: "14px",
margin: "0 8px",
userSelect: "none"
},
ellipsis: {
color: "rgba(0, 0, 0, 0.38)",
fontSize: "14px",
padding: "4px 8px",
userSelect: "none"
},
transition: Z.medium
}, IS = {
container: {
display: "flex",
alignItems: "center",
padding: "8px 0",
position: "relative"
},
list: {
display: "flex",
alignItems: "center",
listStyle: "none",
margin: 0,
padding: 0,
flexWrap: "wrap"
},
listItem: {
display: "flex",
alignItems: "center"
},
item: {
color: "rgba(255, 255, 255, 0.7)",
textDecoration: "none",
fontSize: "14px",
fontFamily: "Inter, system-ui, sans-serif",
fontWeight: "400",
padding: "4px 8px",
borderRadius: "4px",
transition: Z.medium,
cursor: "pointer",
position: "relative"
},
itemHover: {
color: "rgba(96, 165, 250, 1)",
backgroundColor: "rgba(96, 165, 250, 0.1)"
},
activeItem: {
color: "rgba(255, 255, 255, 0.95)",
fontWeight: "500",
cursor: "default"
},
separator: {
color: "rgba(255, 255, 255, 0.5)",
fontSize: "14px",
margin: "0 8px",
userSelect: "none"
},
ellipsis: {
color: "rgba(255, 255, 255, 0.5)",
fontSize: "14px",
padding: "4px 8px",
userSelect: "none"
},
transition: Z.medium
}, wS = {
container: {
display: "flex",
alignItems: "center",
padding: "12px 16px",
position: "relative",
backgroundColor: "rgba(10, 10, 10, 0.9)",
border: "1px solid rgba(255, 215, 0, 0.3)",
borderRadius: "8px",
boxShadow: Ue.sacred.small,
backdropFilter: "blur(8px)",
backgroundImage: `
radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.03) 0%, transparent 50%)
`,
overflow: "hidden"
},
list: {
display: "flex",
alignItems: "center",
listStyle: "none",
margin: 0,
padding: 0,
flexWrap: "wrap",
position: "relative",
zIndex: 2
},
listItem: {
display: "flex",
alignItems: "center"
},
item: {
color: "rgba(255, 215, 0, 0.8)",
textDecoration: "none",
fontSize: "14px",
fontFamily: '"Cinzel", serif',
fontWeight: "400",
padding: "6px 12px",
borderRadius: "6px",
transition: Z.premium,
cursor: "pointer",
position: "relative",
letterSpacing: "0.025em",
textShadow: "0 0 2px rgba(255, 215, 0, 0.3)"
},
itemHover: {
color: "#FFD700",
backgroundColor: "rgba(255, 215, 0, 0.1)",
transform: "translateY(-1px)",
textShadow: "0 0 8px rgba(255, 215, 0, 0.6)",
boxShadow: "0 4px 12px rgba(255, 215, 0, 0.2)"
},
activeItem: {
color: "#FFD700",
fontWeight: "600",
cursor: "default",
textShadow: "0 0 10px rgba(255, 215, 0, 0.8)",
backgroundColor: "rgba(255, 215, 0, 0.05)"
},
separator: {
color: "rgba(255, 215, 0, 0.6)",
fontSize: "16px",
margin: "0 12px",
userSelect: "none",
filter: "drop-shadow(0 0 4px rgba(255, 215, 0, 0.4))"
},
ellipsis: {
color: "rgba(255, 215, 0, 0.5)",
fontSize: "14px",
padding: "6px 12px",
userSelect: "none",
fontFamily: '"Cinzel", serif'
},
sacred: {
shimmer: {
position: "absolute",
top: "0",
left: "-100%",
width: "100%",
height: "100%",
background: "linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent)",
pointerEvents: "none",
zIndex: 1
},
glyph: {
position: "absolute",
fontSize: "12px",
color: "rgba(255, 215, 0, 0.3)",
transition: "all 0.3s ease",
pointerEvents: "none"
}
},
transition: Z.premium
}, NS = {
light: RS,
dark: IS,
sacred: wS
}, OS = (e = "light") => NS[e], AS = (e) => {
const r = OS(e?.theme || "light");
return {
...r,
container: {
...r.container,
...e?.container
},
item: {
...r.item,
...e?.item
},
separator: {
...r.separator,
...e?.separator
},
activeItem: {
...r.activeItem,
...e?.activeItem
},
itemHover: {
...r.itemHover,
...e?.itemHover
}
};
}, DS = {
light: {
container: {
backgroundColor: "#ffffff",
border: "1px solid rgba(229, 231, 235, 0.8)",
borderRadius: "0",
boxShadow: Ue.light.small,
backdropFilter: "blur(10px)"
},
toolbar