sud-ui
Version:
A React UI component library with dark mode support, customizable styles, reusable components, and utility-style class names.
1,681 lines (1,676 loc) • 786 kB
JavaScript
import A1, { createContext as B2, useEffect as j1, useContext as H2, useRef as x1, useState as K, useCallback as S1, useLayoutEffect as d0, useMemo as F1, cloneElement as M0, Children as Z2, isValidElement as w2, createElement as x0, useId as C2, forwardRef as Y0 } from "react";
import { createPortal as v0 } from "react-dom";
function A2(s) {
return s && s.__esModule && Object.prototype.hasOwnProperty.call(s, "default") ? s.default : s;
}
var R0 = { exports: {} }, S0 = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var i2;
function E2() {
if (i2) return S0;
i2 = 1;
var s = Symbol.for("react.transitional.element"), c = Symbol.for("react.fragment");
function o(l, n, a) {
var h = null;
if (a !== void 0 && (h = "" + a), n.key !== void 0 && (h = "" + n.key), "key" in n) {
a = {};
for (var x in n)
x !== "key" && (a[x] = n[x]);
} else a = n;
return n = a.ref, {
$$typeof: s,
type: l,
key: h,
ref: n !== void 0 ? n : null,
props: a
};
}
return S0.Fragment = c, S0.jsx = o, S0.jsxs = o, S0;
}
var k0 = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var d2;
function I2() {
return d2 || (d2 = 1, process.env.NODE_ENV !== "production" && function() {
function s(r) {
if (r == null) return null;
if (typeof r == "function")
return r.$$typeof === I ? null : r.displayName || r.name || null;
if (typeof r == "string") return r;
switch (r) {
case M:
return "Fragment";
case b:
return "Profiler";
case $:
return "StrictMode";
case y:
return "Suspense";
case z:
return "SuspenseList";
case E:
return "Activity";
}
if (typeof r == "object")
switch (typeof r.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), r.$$typeof) {
case _:
return "Portal";
case Z:
return (r.displayName || "Context") + ".Provider";
case w:
return (r._context.displayName || "Context") + ".Consumer";
case D:
var p = r.render;
return r = r.displayName, r || (r = p.displayName || p.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
case O:
return p = r.displayName || null, p !== null ? p : s(r.type) || "Memo";
case V:
p = r._payload, r = r._init;
try {
return s(r(p));
} catch {
}
}
return null;
}
function c(r) {
return "" + r;
}
function o(r) {
try {
c(r);
var p = !1;
} catch {
p = !0;
}
if (p) {
p = console;
var g = p.error, N = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
return g.call(
p,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
N
), c(r);
}
}
function l(r) {
if (r === M) return "<>";
if (typeof r == "object" && r !== null && r.$$typeof === V)
return "<...>";
try {
var p = s(r);
return p ? "<" + p + ">" : "<...>";
} catch {
return "<...>";
}
}
function n() {
var r = T.A;
return r === null ? null : r.getOwner();
}
function a() {
return Error("react-stack-top-frame");
}
function h(r) {
if (W.call(r, "key")) {
var p = Object.getOwnPropertyDescriptor(r, "key").get;
if (p && p.isReactWarning) return !1;
}
return r.key !== void 0;
}
function x(r, p) {
function g() {
C || (C = !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)",
p
));
}
g.isReactWarning = !0, Object.defineProperty(r, "key", {
get: g,
configurable: !0
});
}
function F() {
var r = s(this.type);
return k[r] || (k[r] = !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."
)), r = this.props.ref, r !== void 0 ? r : null;
}
function d(r, p, g, N, P, L, H, Y) {
return g = L.ref, r = {
$$typeof: f,
type: r,
key: p,
props: L,
_owner: P
}, (g !== void 0 ? g : null) !== null ? Object.defineProperty(r, "ref", {
enumerable: !1,
get: F
}) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(r, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(r, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: H
}), Object.defineProperty(r, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: Y
}), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
}
function i(r, p, g, N, P, L, H, Y) {
var A = p.children;
if (A !== void 0)
if (N)
if (U(A)) {
for (N = 0; N < A.length; N++)
m(A[N]);
Object.freeze && Object.freeze(A);
} 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 m(A);
if (W.call(p, "key")) {
A = s(r);
var X = Object.keys(p).filter(function(i1) {
return i1 !== "key";
});
N = 0 < X.length ? "{key: someKey, " + X.join(": ..., ") + ": ...}" : "{key: someKey}", v[A + N] || (X = 0 < X.length ? "{" + X.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} />`,
N,
A,
X,
A
), v[A + N] = !0);
}
if (A = null, g !== void 0 && (o(g), A = "" + g), h(p) && (o(p.key), A = "" + p.key), "key" in p) {
g = {};
for (var G in p)
G !== "key" && (g[G] = p[G]);
} else g = p;
return A && x(
g,
typeof r == "function" ? r.displayName || r.name || "Unknown" : r
), d(
r,
A,
L,
P,
n(),
g,
H,
Y
);
}
function m(r) {
typeof r == "object" && r !== null && r.$$typeof === f && r._store && (r._store.validated = 1);
}
var j = A1, f = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), M = Symbol.for("react.fragment"), $ = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), w = Symbol.for("react.consumer"), Z = Symbol.for("react.context"), D = Symbol.for("react.forward_ref"), y = Symbol.for("react.suspense"), z = Symbol.for("react.suspense_list"), O = Symbol.for("react.memo"), V = Symbol.for("react.lazy"), E = Symbol.for("react.activity"), I = Symbol.for("react.client.reference"), T = j.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, W = Object.prototype.hasOwnProperty, U = Array.isArray, B = console.createTask ? console.createTask : function() {
return null;
};
j = {
"react-stack-bottom-frame": function(r) {
return r();
}
};
var C, k = {}, S = j["react-stack-bottom-frame"].bind(
j,
a
)(), u = B(l(a)), v = {};
k0.Fragment = M, k0.jsx = function(r, p, g, N, P) {
var L = 1e4 > T.recentlyCreatedOwnerStacks++;
return i(
r,
p,
g,
!1,
N,
P,
L ? Error("react-stack-top-frame") : S,
L ? B(l(r)) : u
);
}, k0.jsxs = function(r, p, g, N, P) {
var L = 1e4 > T.recentlyCreatedOwnerStacks++;
return i(
r,
p,
g,
!0,
N,
P,
L ? Error("react-stack-top-frame") : S,
L ? B(l(r)) : u
);
};
}()), k0;
}
var h2;
function V2() {
return h2 || (h2 = 1, process.env.NODE_ENV === "production" ? R0.exports = E2() : R0.exports = I2()), R0.exports;
}
var t = V2();
const u2 = (s = "") => `loading-spinner ${s ? `${s}-spin` : ""}`, $0 = (s) => {
if (!s) return;
const c = document.createElement("div"), o = s.getBoundingClientRect();
c.style.position = "absolute", c.style.top = 0, c.style.left = 0, c.style.width = `${o.width}px`, c.style.height = `${o.height}px`, c.style.borderRadius = s.style.borderRadius || "50%", c.style.pointerEvents = "none", c.style.background = "rgba(0, 0, 0, 0.1)", c.style.transform = "scale(1)", c.style.transformOrigin = "center center", c.style.opacity = "1", c.style.transition = "transform 0.3s ease-out, opacity 0.3s ease-out", c.style.zIndex = 9999, s.style.position = s.style.position || "relative", s.appendChild(c), requestAnimationFrame(() => {
c.style.transform = "scale(1.2)", c.style.opacity = "0";
}), setTimeout(() => {
c.remove();
}, 400);
}, c2 = (s) => {
s.style.transition = "transform 0.15s ease-out", s.style.transform = "scale(1.1)", setTimeout(() => {
s.style.transition = "transform 0.1s ease-in", s.style.transform = "scale(0.95)", setTimeout(() => {
s.style.transition = "transform 0.1s ease-in-out", s.style.transform = "scale(1)";
}, 100);
}, 150);
}, P2 = (s, c) => {
if (!document.getElementById(s)) {
const o = document.createElement("style");
o.id = s, o.innerText = c, document.head.appendChild(o);
}
}, V0 = {
colors: {
red: {
1: "#fff1f0",
2: "#ffccc7",
3: "#ffa39e",
4: "#ff7875",
5: "#ff4d4f",
6: "#f5222d",
7: "#cf1322",
8: "#a8071a",
9: "#820014",
10: "#5c0011"
},
rose: {
1: "#fff0f6",
2: "#ffd6e7",
3: "#ffadd2",
4: "#ff85c0",
5: "#f759ab",
6: "#eb2f96",
7: "#c41d7f",
8: "#9e1068",
9: "#780650",
10: "#520339"
},
coral: {
1: "#fff2f0",
2: "#ffd8cc",
3: "#ffb3a3",
4: "#ff8f7a",
5: "#f86f4e",
6: "#eb4d28",
7: "#c7381a",
8: "#a32b13",
9: "#7f1f0d",
10: "#5c1508"
},
orange: {
1: "#fff7e6",
2: "#ffe7ba",
3: "#ffd591",
4: "#ffc069",
5: "#ffa940",
6: "#fa8c16",
7: "#d46b08",
8: "#ad4e00",
9: "#873800",
10: "#612500"
},
volcano: {
1: "#fff2e8",
2: "#ffd8bf",
3: "#ffbb96",
4: "#ff9c6e",
5: "#ff7a45",
6: "#fa541c",
7: "#d4380d",
8: "#ad2102",
9: "#871400",
10: "#610b00"
},
apricot: {
1: "#fff9f0",
2: "#ffe3c2",
3: "#ffce9c",
4: "#ffb875",
5: "#ffa14f",
6: "#f58a2e",
7: "#cc6c19",
8: "#a3560f",
9: "#7a4008",
10: "#522b03"
},
yellow: {
1: "#feffe6",
2: "#ffffb8",
3: "#fffb8f",
4: "#fff566",
5: "#ffec3d",
6: "#fadb14",
7: "#d4b106",
8: "#ad8b00",
9: "#876800",
10: "#614700"
},
gold: {
1: "#fffbe6",
2: "#fff1b8",
3: "#ffe58f",
4: "#ffd666",
5: "#ffc53d",
6: "#faad14",
7: "#d48806",
8: "#ad6800",
9: "#874d00",
10: "#613400"
},
amber: {
1: "#fff8e1",
2: "#ffecb3",
3: "#ffe082",
4: "#ffd54f",
5: "#ffca28",
6: "#ffc107",
7: "#ffa000",
8: "#ff8f00",
9: "#ff6f00",
10: "#e65100"
},
green: {
1: "#f6ffed",
2: "#d9f7be",
3: "#b7eb8f",
4: "#95de64",
5: "#73d13d",
6: "#52c41a",
7: "#389e0d",
8: "#237804",
9: "#135200",
10: "#092b00"
},
lime: {
1: "#fcffe6",
2: "#f4ffb8",
3: "#eaff8f",
4: "#d3f261",
5: "#bae637",
6: "#a0d911",
7: "#7cb305",
8: "#5b8c00",
9: "#3f6600",
10: "#254000"
},
mint: {
1: "#e6fff9",
2: "#b5f5ec",
3: "#87e8de",
4: "#5cdbd3",
5: "#36cfc9",
6: "#13c2c2",
7: "#08979c",
8: "#006d75",
9: "#00474f",
10: "#002329"
},
blue: {
1: "#e6f4ff",
2: "#bae0ff",
3: "#91caff",
4: "#69b1ff",
5: "#4096ff",
6: "#1677ff",
7: "#0958d9",
8: "#003eb3",
9: "#002c8c",
10: "#001d66"
},
sky: {
1: "#f0fbff",
2: "#c2f1ff",
3: "#99e6ff",
4: "#6fdbff",
5: "#46d0ff",
6: "#1ac4ff",
7: "#009edb",
8: "#0079b0",
9: "#005385",
10: "#002e5a"
},
cerulean: {
1: "#e6faff",
2: "#b3ecff",
3: "#80ddff",
4: "#4dcfff",
5: "#1ac0ff",
6: "#00a6e6",
7: "#0088bf",
8: "#006a99",
9: "#004c73",
10: "#002f4d"
},
indigo: {
1: "#f0f5ff",
2: "#d6e4ff",
3: "#adc8ff",
4: "#84a9ff",
5: "#6690ff",
6: "#3366ff",
7: "#254edb",
8: "#1939b7",
9: "#102693",
10: "#091a7a"
},
cobalt: {
1: "#edf6ff",
2: "#cce4ff",
3: "#99c9ff",
4: "#66adff",
5: "#338fff",
6: "#006bff",
7: "#0054cc",
8: "#003e99",
9: "#002966",
10: "#001433"
},
navy: {
1: "#f0f4f8",
2: "#d6deea",
3: "#adc1d8",
4: "#84a3c6",
5: "#5b86b4",
6: "#346aa3",
7: "#245385",
8: "#183d66",
9: "#0f2947",
10: "#081726"
},
purple: {
1: "#f9f0ff",
2: "#efdbff",
3: "#d3adf7",
4: "#b37feb",
5: "#9254de",
6: "#722ed1",
7: "#531dab",
8: "#391085",
9: "#22075e",
10: "#120338"
},
plum: {
1: "#fbeeff",
2: "#e7c7f3",
3: "#d3a0e6",
4: "#bf79d9",
5: "#ab52cc",
6: "#973bb7",
7: "#752e93",
8: "#541f6e",
9: "#39144a",
10: "#1f0a26"
},
orchid: {
1: "#fef4ff",
2: "#f5d9f8",
3: "#ecbef1",
4: "#e2a3ea",
5: "#d988e3",
6: "#d06ddc",
7: "#a856b2",
8: "#803f88",
9: "#58285e",
10: "#301034"
},
forest: {
1: "#f0f7f0",
2: "#cce3cc",
3: "#a6cca6",
4: "#80b380",
5: "#5c995c",
6: "#387f38",
7: "#2d662d",
8: "#224c22",
9: "#173317",
10: "#0c1a0c"
},
sage: {
1: "#f2f4f1",
2: "#dde2db",
3: "#c7cfc4",
4: "#b1bcad",
5: "#9ba996",
6: "#85957f",
7: "#6f7d69",
8: "#596553",
9: "#434d3e",
10: "#2c3428"
},
"warm-gray": {
1: "#fdfcfa",
2: "#f5f2ed",
3: "#e8e3db",
4: "#d5cdc2",
5: "#bfb5a7",
6: "#a69c8d",
7: "#8c8274",
8: "#73685c",
9: "#594f44",
10: "#40362c"
},
"cool-gray": {
1: "#fbfcfd",
2: "#f2f4f7",
3: "#e3e7ed",
4: "#cfd4dd",
5: "#b7bfcc",
6: "#9ea7b8",
7: "#858fa3",
8: "#6b758b",
9: "#515a70",
10: "#373f52"
},
neutral: {
1: "#ffffff",
2: "#f5f5f5",
3: "#e0e0e0",
4: "#c2c2c2",
5: "#a3a3a3",
6: "#858585",
7: "#666666",
8: "#4d4d4d",
9: "#2e2e2e",
10: "#000000"
},
black: {
1: "#ffffff",
2: "#f5f5f5",
3: "#e0e0e0",
4: "#c2c2c2",
5: "#a3a3a3",
6: "#858585",
7: "#666666",
8: "#4d4d4d",
9: "#2e2e2e",
10: "#000000"
},
white: {
1: "#000000",
2: "#2e2e2e",
3: "#4d4d4d",
4: "#666666",
5: "#858585",
6: "#a3a3a3",
7: "#c2c2c2",
8: "#e0e0e0",
9: "#f5f5f5",
10: "#ffffff"
}
},
body: {
backgroundColor: "white-10",
color: "white-2"
},
typography: {
fontSize: {
xs: "0.75rem",
sm: "0.875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem"
},
fontWeight: {
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700
}
},
spacing: {
xs: "0.25rem",
sm: "0.5rem",
md: "1rem",
lg: "1.5rem",
xl: "2rem",
"2xl": "3rem"
},
shadows: {
none: "none",
sm: "0px 0px 4px rgba(0, 0, 0, 0.2)",
md: "0px 0px 8px rgba(0, 0, 0, 0.25)",
lg: "0px 0px 12px rgba(0, 0, 0, 0.3)",
xl: "0px 0px 16px rgba(0, 0, 0, 0.35)"
},
borders: {
radius: {
none: "0",
sm: "0.125rem",
md: "0.25rem",
lg: "0.5rem",
xl: "1rem",
full: "9999px"
},
width: {
thin: "1px",
normal: "2px",
thick: "4px"
},
style: {
solid: "solid",
dashed: "dashed",
dotted: "dotted",
double: "double",
groove: "groove",
ridge: "ridge",
inset: "inset",
outset: "outset",
none: "none"
}
},
shapes: {
square: {
borderRadius: "0",
padding: "10px"
},
circle: {
borderRadius: "50%",
aspectRatio: "1/1",
padding: "10px"
},
rounded: {
borderRadius: "10px",
padding: "10px"
},
capsule: {
borderRadius: "9999px",
padding: "10px"
}
},
components: {
button: {
default: { bg: "white-10", txt: "neutral-9", border: "neutral-3" },
sub: { bg: "neutral-2", txt: "neutral-8", border: "neutral-3" },
disabled: { bg: "neutral-3", txt: "neutral-6", border: "neutral-4" },
primary: { bg: "blue-6", txt: "white-10", border: "blue-7" },
secondary: { bg: "neutral-6", txt: "white-10", border: "neutral-7" },
success: { bg: "forest-6", txt: "white-10", border: "forest-7" },
warning: { bg: "amber-6", txt: "neutral-9", border: "amber-7" },
danger: { bg: "red-6", txt: "white-10", border: "red-7" },
info: { bg: "sky-6", txt: "white-10", border: "sky-7" },
red: { bg: "red-2", txt: "red-8", border: "red-6" },
rose: { bg: "rose-2", txt: "rose-8", border: "rose-6" },
coral: { bg: "coral-2", txt: "coral-8", border: "coral-6" },
orange: { bg: "orange-2", txt: "orange-8", border: "orange-6" },
volcano: { bg: "volcano-2", txt: "volcano-8", border: "volcano-6" },
apricot: { bg: "apricot-2", txt: "apricot-8", border: "apricot-6" },
yellow: { bg: "yellow-2", txt: "yellow-8", border: "yellow-6" },
gold: { bg: "gold-2", txt: "gold-8", border: "gold-6" },
amber: { bg: "amber-2", txt: "amber-8", border: "amber-6" },
green: { bg: "green-2", txt: "green-8", border: "green-6" },
lime: { bg: "lime-2", txt: "lime-8", border: "lime-6" },
mint: { bg: "mint-2", txt: "mint-8", border: "mint-6" },
blue: { bg: "blue-2", txt: "blue-8", border: "blue-6" },
sky: { bg: "sky-2", txt: "sky-8", border: "sky-6" },
cerulean: { bg: "cerulean-2", txt: "cerulean-8", border: "cerulean-6" },
indigo: { bg: "indigo-2", txt: "indigo-8", border: "indigo-6" },
cobalt: { bg: "cobalt-2", txt: "cobalt-8", border: "cobalt-6" },
navy: { bg: "navy-2", txt: "navy-8", border: "navy-6" },
purple: { bg: "purple-2", txt: "purple-8", border: "purple-6" },
plum: { bg: "plum-2", txt: "plum-8", border: "plum-6" },
orchid: { bg: "orchid-2", txt: "orchid-8", border: "orchid-6" },
forest: { bg: "forest-2", txt: "forest-8", border: "forest-6" },
sage: { bg: "sage-2", txt: "sage-8", border: "sage-6" },
"warm-gray": {
bg: "warm-gray-2",
txt: "warm-gray-8",
border: "warm-gray-6"
},
"cool-gray": {
bg: "cool-gray-2",
txt: "cool-gray-8",
border: "cool-gray-6"
},
ghost: { bg: "transparent", txt: "neutral-7", border: "neutral-3" },
text: { bg: "transparent", txt: "neutral-7", border: "transparent" }
},
etc: {
hovered: { bg: "neutral-2", txt: "neutral-8" },
selected: { bg: "sky-1", txt: "sky-8" }
},
input: {
default: { bg: "neutral-1", txt: "neutral-9", border: "neutral-3" },
focus: { bg: "neutral-1", txt: "neutral-9", border: "blue-5" },
error: { bg: "neutral-1", txt: "red-5", border: "red-5" },
disabled: { bg: "neutral-3", txt: "neutral-6", border: "neutral-4" }
},
card: {
default: { bg: "white-10", border: "neutral-3" },
hover: { bg: "white-10", border: "neutral-4", shadow: "md" }
},
breadcrumb: {
separator: { color: "neutral-5" },
text: { color: "neutral-6" },
now: { color: "neutral-9" }
},
badge: {
default: { bg: "neutral-3", txt: "neutral-7" },
primary: { bg: "blue-1", txt: "blue-7" },
success: { bg: "forest-1", txt: "forest-7" },
warning: { bg: "amber-1", txt: "amber-7" },
danger: { bg: "red-1", txt: "red-7" },
info: { bg: "sky-1", txt: "sky-7" }
},
toast: {
success: { bg: "blue-6", txt: "white-10", border: "blue-7" },
warning: { bg: "amber-6", txt: "neutral-9", border: "amber-7" },
danger: { bg: "red-6", txt: "white-10", border: "red-7" },
info: { bg: "sky-6", txt: "white-10", border: "sky-7" }
},
alert: {
default: { bg: "neutral-2", txt: "neutral-8", border: "neutral-3" },
primary: { bg: "blue-1", txt: "blue-8", border: "blue-3" },
success: { bg: "forest-1", txt: "forest-8", border: "forest-3" },
warning: { bg: "amber-1", txt: "amber-8", border: "amber-3" },
danger: { bg: "red-1", txt: "red-8", border: "red-3" },
info: { bg: "sky-1", txt: "sky-8", border: "sky-3" }
},
tag: {
default: { bg: "neutral-2", txt: "neutral-8", border: "neutral-3" },
red: { bg: "red-1", txt: "red-8", border: "red-5" },
rose: { bg: "rose-1", txt: "rose-8", border: "rose-5" },
coral: { bg: "coral-1", txt: "coral-8", border: "coral-5" },
orange: { bg: "orange-1", txt: "orange-8", border: "orange-5" },
volcano: { bg: "volcano-1", txt: "volcano-8", border: "volcano-5" },
apricot: { bg: "apricot-1", txt: "apricot-8", border: "apricot-5" },
yellow: { bg: "yellow-1", txt: "yellow-8", border: "yellow-5" },
gold: { bg: "gold-1", txt: "gold-8", border: "gold-5" },
amber: { bg: "amber-1", txt: "amber-8", border: "amber-5" },
green: { bg: "green-1", txt: "green-8", border: "green-5" },
lime: { bg: "lime-1", txt: "lime-8", border: "lime-5" },
mint: { bg: "mint-1", txt: "mint-8", border: "mint-5" },
blue: { bg: "blue-1", txt: "blue-8", border: "blue-5" },
sky: { bg: "sky-1", txt: "sky-8", border: "sky-5" },
cerulean: { bg: "cerulean-1", txt: "cerulean-8", border: "cerulean-5" },
indigo: { bg: "indigo-1", txt: "indigo-8", border: "indigo-5" },
cobalt: { bg: "cobalt-1", txt: "cobalt-8", border: "cobalt-5" },
navy: { bg: "navy-1", txt: "navy-8", border: "navy-5" },
purple: { bg: "purple-1", txt: "purple-8", border: "purple-5" },
plum: { bg: "plum-1", txt: "plum-8", border: "plum-5" },
orchid: { bg: "orchid-1", txt: "orchid-8", border: "orchid-5" },
forest: { bg: "forest-1", txt: "forest-8", border: "forest-5" },
sage: { bg: "sage-1", txt: "sage-8", border: "sage-5" },
"warm-gray": {
bg: "warm-gray-1",
txt: "warm-gray-8",
border: "warm-gray-5"
},
"cool-gray": {
bg: "cool-gray-1",
txt: "cool-gray-8",
border: "cool-gray-5"
},
neutral: { bg: "neutral-1", txt: "neutral-8", border: "neutral-5" }
}
}
}, W2 = (s) => {
const c = {};
return Object.entries(s).forEach(([o, l]) => {
c[o] = {}, Object.entries(l).forEach(([n, a]) => {
const h = 11 - parseInt(n);
c[o][h] = a;
});
}), c;
}, Y2 = {
...V0,
colors: W2(V0.colors),
body: {
backgroundColor: "black-9",
color: "black-1"
},
shadows: {
none: "none",
sm: "0px 0px 4px rgba(0, 0, 0, 0.4)",
md: "0px 0px 8px rgba(0, 0, 0, 0.5)",
lg: "0px 0px 12px rgba(0, 0, 0, 0.6)",
xl: "0px 0px 16px rgba(0, 0, 0, 0.7)"
}
}, h1 = ({
border: s = !0,
fallback: c = "default",
componentType: o = "button"
} = {}) => {
var F, d;
const l = y1(), n = ((d = (F = l.components) == null ? void 0 : F[o]) == null ? void 0 : d[c]) || {}, a = R(n.bg, l), h = R(n.txt, l), x = s && n.border ? R(n.border, l) : null;
if (o === "breadcrumb") {
const i = R(n.separator, l), m = R(n.text, l), j = R(n.now, l);
return {
separator: i,
text: m,
now: j
};
}
return {
bgColor: a,
txtColor: h,
borColor: x
};
}, U2 = (s) => {
if (!s) return { color: void 0, intensity: void 0 };
const c = s.match(/^(.+)-(\d+)$/);
return c ? { color: c[1], intensity: parseInt(c[2], 10) } : { color: s, intensity: void 0 };
}, R = (s, c) => {
var n;
if (!s) return "";
if (s === "transparent") return "transparent";
if (s.startsWith("#")) return s;
const { color: o, intensity: l } = U2(s);
return (n = c.colors) != null && n[o] ? l ? c.colors[o][l] : c.colors[o][6] : s;
}, D0 = (s, c) => {
if (!s || !s.startsWith("#")) return s;
const o = parseInt(s.slice(1), 16);
let l = o >> 16 & 255, n = o >> 8 & 255, a = o & 255;
l = Math.min(255, Math.round(l + (255 - l) * c / 100)), n = Math.min(255, Math.round(n + (255 - n) * c / 100)), a = Math.min(255, Math.round(a + (255 - a) * c / 100));
const h = (x) => x.toString(16).padStart(2, "0");
return `#${h(l)}${h(n)}${h(a)}`;
}, n3 = (s, c = 1, o) => {
var l;
return (l = o == null ? void 0 : o.colors) != null && l[s] && o.colors[s][c] || s;
}, l1 = (...s) => s.filter(Boolean).join(" "), E1 = (s = "", c) => {
var o;
return (o = c == null ? void 0 : c.shadows) != null && o[s] ? c.shadows[s] : "none";
}, Q1 = (s = "rounded", c) => {
var o;
return ((o = c == null ? void 0 : c.shapes) == null ? void 0 : o[s]) || {
borderRadius: "10px",
paddingLeft: "14px",
paddingRight: "14px"
};
}, g0 = ({ size: s, weight: c, theme: o }) => {
var l, n;
return {
fontSize: ((l = o.typography.fontSize) == null ? void 0 : l[s]) || "1rem",
fontWeight: ((n = o.typography.fontWeight) == null ? void 0 : n[c]) || 400
};
}, o3 = (s) => {
s.style.animation = "none", s.offsetHeight, s.style.animation = "pulse 0.3s ease-in-out";
}, a3 = (s) => {
s.style.animation = "none", s.offsetHeight, s.style.animation = "thumbScale 0.3s ease-in-out";
}, S2 = B2(null), y1 = () => {
const s = H2(S2);
return s || V0;
}, G2 = ({
theme: s = V0,
darkTheme: c = Y2,
isDarkMode: o = !1,
children: l
}) => {
const n = o ? c : s;
return j1(() => {
document.body.style.backgroundColor = R(
n.body.backgroundColor,
n
), document.body.style.color = R(
n.body.color,
n
);
}, [n]), /* @__PURE__ */ t.jsx(S2.Provider, { value: n, children: l });
}, T0 = ({
children: s,
colorType: c = null,
background: o = null,
color: l = null,
onClick: n,
style: a,
className: h,
...x
}) => {
const F = y1(), { bgColor: d, txtColor: i } = h1({
border: !1,
fallback: c
}), m = o ? R(o, F) : d, j = l ? R(l, F) : i, f = (_) => {
n && n(_);
};
return /* @__PURE__ */ t.jsx(
"div",
{
className: l1("sud-div", h),
style: {
color: j,
backgroundColor: m,
...a
},
onClick: f,
...x,
children: s
}
);
}, B0 = /* @__PURE__ */ new Set(), X0 = /* @__PURE__ */ new WeakMap(), X2 = (s, c, o, l) => {
var n;
for (const a of l) {
if (!((n = a.current) != null && n.contains(c))) continue;
let h = o.get(a);
for (; h; ) {
if (h === s) return !0;
h = o.get(h);
}
}
return !1;
}, r1 = ({
children: s,
pretendard: c = "R",
// T, EL, L, R, M, SB, B, Black
gmarket: o,
// Light, Medium, Bold
suite: l,
// L, R, M, SM, B, EB, H
code: n = !1,
fontFamily: a,
size: h = "base",
weight: x = "normal",
as: F = "span",
color: d,
className: i = "",
style: m = {},
...j
}) => {
const f = y1(), _ = F, { fontSize: M, fontWeight: $ } = g0({ size: h, weight: x, theme: f }), b = d ? R(d, f) : void 0, w = a || n && "IntelOneMono-Medium" || o && `GmarketSans${o}` || l && `SUITE-${l}` || c && `Pretendard-${c}`, Z = !w;
return /* @__PURE__ */ t.jsx(
_,
{
className: l1("sud-typography", i),
style: {
fontSize: M,
fontWeight: Z ? $ : void 0,
fontFamily: w,
color: b,
wordBreak: "break-word",
overflowWrap: "anywhere",
...m
},
...j,
children: s
}
);
}, h0 = ({
content: s,
align: c = "center",
borderWeight: o = 1,
borderType: l = "solid",
border: n = !0,
color: a,
borderColor: h,
colorType: x = "default",
width: F = "100%",
height: d = "2em",
vertical: i = !1,
style: m = {},
...j
}) => {
const f = y1(), { txtColor: _, borColor: M } = h1({
border: n,
fallback: x
}), $ = a ? R(a, f) : _, b = h ? R(h, f) : M, w = n && b ? `${o}px ${l} ${b}` : "none", Z = (D) => s ? i ? c === "top" ? { flex: D ? 0 : 1 } : c === "bottom" ? { flex: D ? 1 : 0 } : { flex: 1 } : c === "left" ? { flex: D ? 0 : 1 } : c === "right" ? { flex: D ? 1 : 0 } : { flex: 1 } : { flex: 1 };
return /* @__PURE__ */ t.jsxs(
"div",
{
className: "sud-divider",
role: "separator",
"aria-orientation": i ? "vertical" : "horizontal",
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
width: i ? "auto" : F,
height: i ? d : "auto",
flexDirection: i ? "column" : "row",
margin: i ? "0 1em" : "1em 0",
gap: s ? "10px" : "0",
...m
},
...j,
children: [
/* @__PURE__ */ t.jsx(
"div",
{
className: "sud-divider__line",
style: {
...Z(!0),
[i ? "borderLeft" : "borderTop"]: w,
[i ? "width" : "height"]: 0
}
}
),
s && /* @__PURE__ */ t.jsx(
r1,
{
as: "span",
className: "sud-divider__content",
size: "sm",
pretendard: "SB",
color: $,
style: {
whiteSpace: "nowrap",
display: "flex",
alignItems: "center"
},
children: s
}
),
/* @__PURE__ */ t.jsx(
"div",
{
className: "sud-divider__line",
style: {
...Z(!1),
[i ? "borderLeft" : "borderTop"]: w,
[i ? "width" : "height"]: 0
}
}
)
]
}
);
}, K2 = `
.loading-spinner {
border: 2px solid #f3f3f3;
border-radius: 50%;
display: inline-block;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.elastic-spin {
border: 2px solid #f3f3f3;
border-radius: 50%;
display: inline-block;
animation: elasticSpin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}
@keyframes elasticSpin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.1);
}
100% {
transform: rotate(360deg) scale(1);
}
}
.brush-spin {
border: 2px solid #f3f3f3;
border-radius: 50%;
display: inline-block;
animation: brushSpin 1.5s linear infinite;
}
@keyframes brushSpin {
0% { transform: rotate(0deg); }
25% { transform: rotate(90deg); }
50% { transform: rotate(180deg); }
75% { transform: rotate(180deg); }
80% { transform: rotate(270deg); }
100% { transform: rotate(360deg); }
}
`, J1 = ({
children: s,
colorType: c = "default",
background: o,
color: l,
border: n = !0,
borderColor: a,
borderType: h = "solid",
borderWeight: x = 1,
onClick: F = null,
className: d = "",
icon: i = null,
iconPosition: m = i ? "left" : "",
disabled: j = !1,
loading: f = !1,
loadingText: _ = "",
loadingType: M = "default",
loadingPosition: $ = "right",
shape: b = "rounded",
shadow: w = "sm",
style: Z = {},
ariaLabel: D,
ariaPressed: y,
ariaExpanded: z,
ariaControls: O,
role: V = "button",
size: E
}) => {
const I = y1(), T = x1(), { bgColor: W, txtColor: U, borColor: B } = h1({
border: n,
fallback: j ? "disabled" : c
}), C = o ? R(o, I) : W, k = l ? R(l, I) : U, S = a ? R(a, I) : B, u = n && S ? `${x}px ${h} ${S}` : "none", v = Q1(b, I), r = E1(w, I);
let p = {};
typeof E == "string" && (E === "sm" ? p = { padding: "4px 10px", fontSize: "0.875rem" } : E === "md" ? p = { padding: "6px 16px", fontSize: "1rem" } : E === "lg" && (p = { padding: "10px 20px", fontSize: "1.125rem" })), j1(() => {
P2("sud-button-styles", K2);
}, []);
const g = (P) => {
j || f || ($0(P.currentTarget), F && F(P));
}, N = typeof s == "string" ? /* @__PURE__ */ t.jsx(r1, { className: "sud-button__label", children: s }) : s;
return /* @__PURE__ */ t.jsx(
"button",
{
className: l1(
"sud-button",
j || f ? "" : "sud-hover",
d,
`cursor-${j ? "not-allowed" : "pointer"}`
),
ref: T,
style: {
display: "inline-flex",
flexDirection: "row",
justifyContent: "center",
gap: 8,
alignItems: "center",
background: C,
color: k,
border: u,
boxShadow: c === "text" ? "none" : r,
...v,
...p,
...Z
},
onClick: j ? void 0 : g,
disabled: j || f,
"aria-label": D,
"aria-pressed": y,
"aria-expanded": z,
"aria-controls": O,
role: V,
"aria-disabled": j || f,
children: f ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
$ === "left" && /* @__PURE__ */ t.jsx(
"div",
{
className: l1(
"sud-button__spinner",
u2(M)
),
style: {
borderColor: k,
width: "16px",
height: "16px",
borderTopColor: C
}
}
),
/* @__PURE__ */ t.jsx("div", { className: "sud-button__label", children: _ || N }),
$ === "right" && /* @__PURE__ */ t.jsx(
"div",
{
className: l1(
"sud-button__spinner",
u2(M)
),
style: {
borderColor: k,
width: "16px",
height: "16px",
borderTopColor: C
}
}
)
] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
i && m === "left" && /* @__PURE__ */ t.jsx(
"span",
{
className: "sud-button__icon sud-button__icon--left",
style: {
display: "flex",
justifyContent: "center",
alignItems: "center"
},
children: i
}
),
N && /* @__PURE__ */ t.jsx("div", { className: "sud-button__label", children: N }),
i && m === "right" && /* @__PURE__ */ t.jsx(
"span",
{
className: "sud-button__icon sud-button__icon--right",
style: {
display: "flex",
justifyContent: "center",
alignItems: "center"
},
children: i
}
)
] })
}
);
}, H0 = 8, n0 = 8, _0 = /* @__PURE__ */ new WeakMap(), j0 = ({
children: s,
content: c,
title: o,
arrow: l = !0,
trigger: n = "hover",
placement: a = "bottom",
open: h,
defaultOpen: x = !1,
onOpenChange: F,
closeOnClick: d = !0,
disabled: i = !1,
className: m = "",
divider: j = !1,
background: f,
color: _,
border: M = !0,
borderColor: $,
borderType: b = "solid",
borderWeight: w = 1,
shape: Z = "rounded",
shadow: D = "sm",
colorType: y = "default",
style: z = {},
followTrigger: O = !1,
contentRef: V = null,
parentRef: E = null,
variant: I = "popup",
footer: T = !1,
onCancel: W,
onConfirm: U,
...B
}) => {
const C = y1(), [k, S] = K(x), u = x1(null), v = x1(null), r = V || v, p = x1(null), g = x1({}), [N, P] = K(!1), [L, H] = K({
position: "fixed",
top: "-9999px",
left: "-9999px",
opacity: 0,
pointerEvents: "none",
zIndex: 1e4,
transition: "opacity 0.2s ease"
}), [Y, A] = K(!1), X = h !== void 0, G = X ? h : k;
j1(() => (P(!0), () => P(!1)), []);
const i1 = S1(
(e1) => {
if (X || S(e1), F == null || F(e1), !e1 && (A(!1), r.current)) {
const v1 = _0.get(r.current);
v1 && v1.forEach((C1) => {
var t0, K1;
const _1 = Array.from(B0).find(
(I1) => {
var s0, J;
return ((J = (s0 = I1.current) == null ? void 0 : s0.popupInstance) == null ? void 0 : J.id) === C1;
}
);
(K1 = (t0 = _1 == null ? void 0 : _1.current) == null ? void 0 : t0.popupInstance) != null && K1.hide && _1.current.popupInstance.hide();
});
}
},
[X, F, r]
), n1 = () => {
!i && !G && (r != null && r.current) ? (p.current && (clearTimeout(p.current), p.current = null), i1(!0)) : !i && !G && i1(!0);
}, s1 = () => {
if (!i) {
if (n === "click") {
i1(!1);
return;
}
p.current && clearTimeout(p.current), p.current = setTimeout(() => {
i1(!1);
}, 100);
}
}, Z1 = () => {
!i && i1(!G);
}, q = () => {
U == null || U(), Z1();
}, Q = () => {
W == null || W(), Z1();
};
j1(() => {
if (n !== "click" || !G) return;
const e1 = (v1) => {
var C1, _1;
!((C1 = u.current) != null && C1.contains(v1.target)) && !((_1 = r.current) != null && _1.contains(v1.target)) && s1();
};
return document.addEventListener("click", e1, !0), () => document.removeEventListener("mousedown", e1);
}, [n, G, s1]);
const { bgColor: a1, txtColor: m1, borColor: k1 } = h1({
border: M,
fallback: y
}), w1 = f ? R(f, C) : a1, L1 = _ ? R(_, C) : m1, T1 = $ ? R($, C) : k1, B1 = M && T1 ? `${w}px ${b} ${T1}` : "none", P1 = E1(D, C), W1 = Q1(Z), z1 = S1(() => {
if (!u.current || !r.current) return {};
const e1 = u.current.getBoundingClientRect(), v1 = r.current.getBoundingClientRect(), C1 = window.scrollY || document.documentElement.scrollTop, _1 = window.scrollX || document.documentElement.scrollLeft, t0 = {
position: "fixed",
zIndex: 1e4,
transition: "opacity 0.2s ease"
}, [K1, I1] = a.split("-");
let J = ((w0, c0) => {
switch (w0) {
case "top": {
let Y1 = e1.left + e1.width / 2 + _1, U1 = "translateX(-50%)";
return c0 === "left" ? (Y1 = e1.left + _1, U1 = "none") : c0 === "right" && (Y1 = e1.right + _1 - v1.width, U1 = "none"), {
top: e1.top - v1.height - n0 - H0 + C1,
left: Y1,
transform: U1
};
}
case "bottom": {
let Y1 = e1.left + e1.width / 2 + _1, U1 = "translateX(-50%)";
return c0 === "left" ? (Y1 = e1.left + _1, U1 = "none") : c0 === "right" && (Y1 = e1.right + _1 - v1.width, U1 = "none"), {
top: e1.bottom + n0 + H0 + C1,
left: Y1,
transform: U1
};
}
case "left": {
let Y1 = e1.top + e1.height / 2 + C1, U1 = "translateY(-50%)";
return c0 === "top" ? (Y1 = e1.top + C1, U1 = "none") : c0 === "bottom" && (Y1 = e1.bottom + C1 - v1.height, U1 = "none"), {
top: Y1,
left: e1.left - v1.width - n0 - H0 + _1,
transform: U1
};
}
case "right": {
let Y1 = e1.top + e1.height / 2 + C1, U1 = "translateY(-50%)";
return c0 === "top" ? (Y1 = e1.top + C1, U1 = "none") : c0 === "bottom" && (Y1 = e1.bottom + C1 - v1.height, U1 = "none"), {
top: Y1,
left: e1.right + n0 + H0 + _1,
transform: U1
};
}
default:
return {};
}
})(K1, I1);
const R1 = window.innerWidth, H1 = window.innerHeight;
let $1 = J.left ?? 0, V1 = J.top ?? 0, G1 = v1.width, q1 = v1.height, o0 = !1;
return $1 < 0 ? ($1 = 8, o0 = !0) : $1 + G1 > R1 && ($1 = R1 - G1 - 8, o0 = !0), V1 < 0 ? (V1 = 8, o0 = !0) : V1 + q1 > H1 && (V1 = H1 - q1 - 8, o0 = !0), o0 && (J.transform = void 0), { ...t0, ...J, left: $1, top: V1 };
}, [a]);
d0(() => {
if (G && r.current && u.current && !Y) {
const e1 = z1();
H({
...e1,
opacity: 1,
pointerEvents: "auto"
}), A(!0);
} else G || H((e1) => ({
...e1,
top: "-9999px",
left: "-9999px",
opacity: 0,
pointerEvents: "none"
}));
}, [G, Y, z1]), j1(() => {
if (!G) return;
const e1 = () => {
const v1 = z1();
H((C1) => ({
...C1,
...v1,
opacity: 1,
pointerEvents: "auto"
}));
};
return window.addEventListener("scroll", e1, !0), window.addEventListener("resize", e1), () => {
window.removeEventListener("scroll", e1, !0), window.removeEventListener("resize", e1);
};
}, [G, z1]);
const O1 = S1(
({ type: e1 = "background" }) => {
const v1 = e1 === "border", C1 = T1 && w > 0, _1 = n0 * 2 + (C1 ? w * 2 : 0), t0 = Math.sqrt(w * w * 2), K1 = !v1 && C1 ? t0 : 0, I1 = {
bottom: `linear-gradient(135deg, ${w1} 50%, transparent 50%)`,
top: `linear-gradient(-45deg, ${w1} 50%, transparent 50%)`,
left: `linear-gradient(225deg, ${w1} 50%, transparent 50%)`,
right: `linear-gradient(45deg, ${w1} 50%, transparent 50%)`
}, s0 = {
width: `${_1}px`,
height: `${_1}px`,
position: "fixed",
transform: "rotate(45deg)",
zIndex: v1 ? 1 : 3,
border: v1 ? B1 : void 0,
borderRadius: "2px 0 0 0",
background: v1 ? void 0 : I1[a],
backgroundColor: v1 ? T1 ?? w1 : void 0,
boxShadow: v1 ? P1 : void 0
}, J = {
bottom: {
top: `-${n0 - K1}px`,
left: "50%",
transform: "translateX(-50%) rotate(45deg)"
},
top: {
bottom: `-${n0 - K1}px`,
left: "50%",
transform: "translateX(-50%) rotate(45deg)"
},
right: {
left: `-${n0 - K1}px`,
top: "50%",
transform: "translateY(-50%) rotate(45deg)"
},
left: {
right: `-${n0 - K1}px`,
top: "50%",
transform: "translateY(-50%) rotate(45deg)"
}
};
return { ...s0, ...J[a] };
},
[
a,
w1,
T1,
B1,
w,
P1
]
);
return j1(() => {
if (n !== "hover") return;
const e1 = (v1) => {
var I1, s0;
const C1 = document.elementFromPoint(v1.clientX, v1.clientY), _1 = (I1 = u.current) == null ? void 0 : I1.contains(C1), t0 = (s0 = r.current) == null ? void 0 : s0.contains(C1), K1 = X2(
r,
C1,
X0,
B0
);
if (!G) {
_1 && n1();
return;
}
!_1 && !t0 && !K1 ? p.current || (p.current = setTimeout(() => {
s1();
}, 100)) : (clearTimeout(p.current), p.current = null);
};
return document.addEventListener("pointermove", e1), () => {
document.removeEventListener("pointermove", e1), clearTimeout(p.current);
};
}, [n, G, n1, s1]), j1(() => {
if (n === "hover" && (B0.add(r), E)) {
X0.set(r, E);
const e1 = _0.get(E) || /* @__PURE__ */ new Set();
e1.add(g.current), _0.set(E, e1);
}
return r.current && (r.current.popupInstance = {
show: n1,
hide: s1,
toggle: Z1,
id: g.current,
parentRef: E
}), () => {
if (n === "hover") {
if (B0.delete(r), X0.delete(r), E) {
const e1 = _0.get(E);
e1 && (e1.delete(g.current), e1.size === 0 && _0.delete(E));
}
p.current && (clearTimeout(p.current), p.current = null);
}
};
}, [n, E, n1, s1, Z1]), /* @__PURE__ */ t.jsxs(
"div",
{
className: l1(`sud-${I}`, m),
style: { position: "relative", display: "inline-block", ...z },
...B,
children: [
/* @__PURE__ */ t.jsx(
"div",
{
ref: u,
onClick: n === "click" ? Z1 : void 0,
onContextMenu: n === "contextMenu" ? (e1) => {
e1.preventDefault(), Z1();
} : void 0,
children: s
}
),
N && G && v0(
/* @__PURE__ */ t.jsxs(
"div",
{
ref: r,
style: L,
onClick: (e1) => {
e1.stopPropagation(), d && s1();
},
onMouseEnter: () => {
p.current && (clearTimeout(p.current), p.current = null);
},
onMouseLeave: () => {
n !== "click" && (p.current || (p.current = setTimeout(() => {
s1();
}, 100)));
},
children: [
l && /* @__PURE__ */ t.jsx(
"div",
{
className: "back",
style: O1({ type: "border" })
}
),
/* @__PURE__ */ t.jsxs(
"div",
{
className: `sud-${I}__content`,
style: {
display: "flex",
flexDirection: "column",
gap: "8px",
backgroundColor: w1,
color: L1,
border: B1,
padding: "8px",
width: "max-content",
whiteSpace: "nowrap",
...W1,
boxShadow: P1,
zIndex: 2,
position: "relative"
},
children: [
o && (typeof o == "string" ? /* @__PURE__ */ t.jsx(
r1,
{
as: "span",
pretendard: "B",
size: "lg",
color: _,
style: { whiteSpace: "nowrap" },
children: o
}
) : o),
o && c && j && /* @__PURE__ */ t.jsx(h0, { style: { margin: 0 } }),
typeof c == "function" ? c() : c && (typeof c == "string" ? /* @__PURE__ */ t.jsx(
r1,
{
as: "span",
color: L1,
style: { whiteSpace: "nowrap" },
children: c
}
) : c),
I === "popconfirm" && (T === !0 || T === void 0) ? /* @__PURE__ */ t.jsxs("div", { className: "sud-popconfirm__footer flex flex-row gap-8 item-cen jus-cen", children: [
/* @__PURE__ */ t.jsx(J1, { colorType: "primary", onClick: q, children: "okay" }),
/* @__PURE__ */ t.jsx(J1, { colorType: "danger", onClick: Q, children: "cancel" })
] }) : T === !0 || T !== void 0 ? T : null
]
}
),
l && /* @__PURE__ */ t.jsx(
"div",
{
className: "front",
style: O1({ type: "background" })
}
)
]
}
),
document.body
)
]
}
);
}, P0 = {
xs: 56,
sm: 72,
md: 98,
lg: 104,
xl: 120
}, q2 = {
1: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FSGmbI%2FbtsNspkfnci%2FVVldtkz1m7we0BbpfOvXX0%2Fimg.png",
2: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Ft0zhR%2FbtsNsnzTUXZ%2FPfBZVB4KhKn4wTm7KHFI1k%2Fimg.png",
3: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FSI7A2%2FbtsNsiTcfnV%2F2GeZTFsZRuNd3o5G9G4nQK%2Fimg.png",
4: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FccFiG4%2FbtsNsQ2H17C%2FuU9CgCh6bGjDd6342Xhlck%2Fimg.png",
5: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdd9NJK%2FbtsNv6Li3e6%2FuKfKlCZhMfd7wg0eq7tTc1%2Fimg.png"
}, F0 = ({
src: s,
sample: c = 1,
alt: o = "avatar",
children: l,
size: n = "md",
shape: a = "circle",
colorT