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) • 789 kB
JavaScript
import H1, { createContext as D2, useEffect as v1, useContext as B2, useRef as u1, useState as K, useCallback as S1, useLayoutEffect as d0, useMemo as F1, cloneElement as b0, Children as M2, isValidElement as Z2, createElement as x0, useId as C2, forwardRef as W0 } from "react";
import { createPortal as j0 } from "react-dom";
function H2(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 d2;
function A2() {
if (d2) return S0;
d2 = 1;
var s = Symbol.for("react.transitional.element"), c = Symbol.for("react.fragment");
function o(l, n, a) {
var f = null;
if (a !== void 0 && (f = "" + a), n.key !== void 0 && (f = "" + n.key), "key" in n) {
a = {};
for (var g in n)
g !== "key" && (a[g] = n[g]);
} else a = n;
return n = a.ref, {
$$typeof: s,
type: l,
key: f,
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 h2;
function E2() {
return h2 || (h2 = 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 y:
return "Fragment";
case M:
return "Profiler";
case L:
return "StrictMode";
case m:
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 C:
return "Portal";
case _:
return (r.displayName || "Context") + ".Provider";
case w:
return (r._context.displayName || "Context") + ".Consumer";
case D:
var i = r.render;
return r = r.displayName, r || (r = i.displayName || i.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
case T:
return i = r.displayName || null, i !== null ? i : s(r.type) || "Memo";
case V:
i = r._payload, r = r._init;
try {
return s(r(i));
} catch {
}
}
return null;
}
function c(r) {
return "" + r;
}
function o(r) {
try {
c(r);
var i = !1;
} catch {
i = !0;
}
if (i) {
i = console;
var u = i.error, b = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
return u.call(
i,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
b
), c(r);
}
}
function l(r) {
if (r === y) return "<>";
if (typeof r == "object" && r !== null && r.$$typeof === V)
return "<...>";
try {
var i = s(r);
return i ? "<" + i + ">" : "<...>";
} catch {
return "<...>";
}
}
function n() {
var r = $.A;
return r === null ? null : r.getOwner();
}
function a() {
return Error("react-stack-top-frame");
}
function f(r) {
if (U.call(r, "key")) {
var i = Object.getOwnPropertyDescriptor(r, "key").get;
if (i && i.isReactWarning) return !1;
}
return r.key !== void 0;
}
function g(r, i) {
function u() {
S || (S = !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)",
i
));
}
u.isReactWarning = !0, Object.defineProperty(r, "key", {
get: u,
configurable: !0
});
}
function k() {
var r = s(this.type);
return Z[r] || (Z[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 h(r, i, u, b, P, F, H, Y) {
return u = F.ref, r = {
$$typeof: p,
type: r,
key: i,
props: F,
_owner: P
}, (u !== void 0 ? u : null) !== null ? Object.defineProperty(r, "ref", {
enumerable: !1,
get: k
}) : 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 d(r, i, u, b, P, F, H, Y) {
var A = i.children;
if (A !== void 0)
if (b)
if (W(A)) {
for (b = 0; b < A.length; b++)
x(A[b]);
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 x(A);
if (U.call(i, "key")) {
A = s(r);
var G = Object.keys(i).filter(function(n1) {
return n1 !== "key";
});
b = 0 < G.length ? "{key: someKey, " + G.join(": ..., ") + ": ...}" : "{key: someKey}", N[A + b] || (G = 0 < G.length ? "{" + G.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} />`,
b,
A,
G,
A
), N[A + b] = !0);
}
if (A = null, u !== void 0 && (o(u), A = "" + u), f(i) && (o(i.key), A = "" + i.key), "key" in i) {
u = {};
for (var X in i)
X !== "key" && (u[X] = i[X]);
} else u = i;
return A && g(
u,
typeof r == "function" ? r.displayName || r.name || "Unknown" : r
), h(
r,
A,
F,
P,
n(),
u,
H,
Y
);
}
function x(r) {
typeof r == "object" && r !== null && r.$$typeof === p && r._store && (r._store.validated = 1);
}
var v = H1, p = Symbol.for("react.transitional.element"), C = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), L = Symbol.for("react.strict_mode"), M = Symbol.for("react.profiler"), w = Symbol.for("react.consumer"), _ = Symbol.for("react.context"), D = Symbol.for("react.forward_ref"), m = Symbol.for("react.suspense"), z = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), V = Symbol.for("react.lazy"), E = Symbol.for("react.activity"), I = Symbol.for("react.client.reference"), $ = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, U = Object.prototype.hasOwnProperty, W = Array.isArray, B = console.createTask ? console.createTask : function() {
return null;
};
v = {
"react-stack-bottom-frame": function(r) {
return r();
}
};
var S, Z = {}, O = v["react-stack-bottom-frame"].bind(
v,
a
)(), j = B(l(a)), N = {};
k0.Fragment = y, k0.jsx = function(r, i, u, b, P) {
var F = 1e4 > $.recentlyCreatedOwnerStacks++;
return d(
r,
i,
u,
!1,
b,
P,
F ? Error("react-stack-top-frame") : O,
F ? B(l(r)) : j
);
}, k0.jsxs = function(r, i, u, b, P) {
var F = 1e4 > $.recentlyCreatedOwnerStacks++;
return d(
r,
i,
u,
!0,
b,
P,
F ? Error("react-stack-top-frame") : O,
F ? B(l(r)) : j
);
};
}()), k0;
}
var f2;
function I2() {
return f2 || (f2 = 1, process.env.NODE_ENV === "production" ? R0.exports = A2() : R0.exports = E2()), R0.exports;
}
var t = I2();
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);
}, l2 = (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);
}, V2 = (s, c) => {
if (!document.getElementById(s)) {
const o = document.createElement("style");
o.id = s, o.innerText = c, document.head.appendChild(o);
}
}, I0 = {
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" }
}
}
}, P2 = (s) => {
const c = {};
return Object.entries(s).forEach(([o, l]) => {
c[o] = {}, Object.entries(l).forEach(([n, a]) => {
const f = 11 - parseInt(n);
c[o][f] = a;
});
}), c;
}, W2 = {
...I0,
colors: P2(I0.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 k, h;
const l = b1(), n = ((h = (k = l.components) == null ? void 0 : k[o]) == null ? void 0 : h[c]) || {}, a = R(n.bg, l), f = R(n.txt, l), g = s && n.border ? R(n.border, l) : null;
if (o === "breadcrumb") {
const d = R(n.separator, l), x = R(n.text, l), v = R(n.now, l);
return {
separator: d,
text: x,
now: v
};
}
return {
bgColor: a,
txtColor: f,
borColor: g
};
}, Y2 = (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 } = Y2(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 f = (g) => g.toString(16).padStart(2, "0");
return `#${f(l)}${f(n)}${f(a)}`;
}, o3 = (s, c = 1, o) => {
var l;
return (l = o == null ? void 0 : o.colors) != null && l[s] && o.colors[s][c] || s;
}, o1 = (...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
};
}, a3 = (s) => {
s.style.animation = "none", s.offsetHeight, s.style.animation = "pulse 0.3s ease-in-out";
}, i3 = (s) => {
s.style.animation = "none", s.offsetHeight, s.style.animation = "thumbScale 0.3s ease-in-out";
}, w2 = D2(null), b1 = () => {
const s = B2(w2);
return s || I0;
}, U2 = ({
theme: s = I0,
darkTheme: c = W2,
isDarkMode: o = !1,
children: l
}) => {
const n = o ? c : s;
return v1(() => {
document.body.style.backgroundColor = R(
n.body.backgroundColor,
n
), document.body.style.color = R(
n.body.color,
n
);
}, [n]), /* @__PURE__ */ t.jsx(w2.Provider, { value: n, children: l });
}, T0 = ({
children: s,
colorType: c = null,
background: o = null,
color: l = null,
onClick: n,
style: a,
className: f,
...g
}) => {
const k = b1(), { bgColor: h, txtColor: d } = h1({
border: !1,
fallback: c
}), x = o ? R(o, k) : h, v = l ? R(l, k) : d, p = (C) => {
n && n(C);
};
return /* @__PURE__ */ t.jsx(
"div",
{
className: o1("sud-div", f),
style: {
color: v,
backgroundColor: x,
...a
},
onClick: p,
...g,
children: s
}
);
}, B0 = /* @__PURE__ */ new Set(), G0 = /* @__PURE__ */ new WeakMap(), G2 = (s, c, o, l) => {
var n;
for (const a of l) {
if (!((n = a.current) != null && n.contains(c))) continue;
let f = o.get(a);
for (; f; ) {
if (f === s) return !0;
f = o.get(f);
}
}
return !1;
}, c1 = ({
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: f = "base",
weight: g = "normal",
as: k = "span",
color: h,
className: d = "",
style: x = {},
...v
}) => {
const p = b1(), C = k, { fontSize: y, fontWeight: L } = g0({ size: f, weight: g, theme: p }), M = h ? R(h, p) : void 0, w = a || n && "IntelOneMono-Medium" || o && `GmarketSans${o}` || l && `SUITE-${l}` || c && `Pretendard-${c}`, _ = !w;
return /* @__PURE__ */ t.jsx(
C,
{
className: o1("sud-typography", d),
style: {
fontSize: y,
fontWeight: _ ? L : void 0,
fontFamily: w,
color: M,
wordBreak: "break-word",
overflowWrap: "anywhere",
...x
},
...v,
children: s
}
);
}, h0 = ({
className: s,
content: c,
align: o = "center",
borderWeight: l = 1,
borderType: n = "solid",
border: a = !0,
color: f,
borderColor: g,
colorType: k = "default",
width: h = "100%",
height: d = "2em",
vertical: x = !1,
style: v = {},
...p
}) => {
const C = b1(), { txtColor: y, borColor: L } = h1({
border: a,
fallback: k
}), M = f ? R(f, C) : y, w = g ? R(g, C) : L, _ = a && w ? `${l}px ${n} ${w}` : "none", D = (m) => c ? x ? o === "top" ? { flex: m ? 0 : 1 } : o === "bottom" ? { flex: m ? 1 : 0 } : { flex: 1 } : o === "left" ? { flex: m ? 0 : 1 } : o === "right" ? { flex: m ? 1 : 0 } : { flex: 1 } : { flex: 1 };
return /* @__PURE__ */ t.jsxs(
"div",
{
className: o1("sud-divider", s),
role: "separator",
"aria-orientation": x ? "vertical" : "horizontal",
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
width: x ? "auto" : h,
height: x ? d : "auto",
flexDirection: x ? "column" : "row",
margin: x ? "0 1em" : "1em 0",
gap: c ? "10px" : "0",
...v
},
...p,
children: [
/* @__PURE__ */ t.jsx(
"div",
{
className: "sud-divider__line",
style: {
...D(!0),
[x ? "borderLeft" : "borderTop"]: _,
[x ? "width" : "height"]: 0
}
}
),
c && /* @__PURE__ */ t.jsx(
c1,
{
as: "span",
className: "sud-divider__content",
size: "sm",
pretendard: "SB",
color: M,
style: {
whiteSpace: "nowrap",
display: "flex",
alignItems: "center"
},
children: c
}
),
/* @__PURE__ */ t.jsx(
"div",
{
className: "sud-divider__line",
style: {
...D(!1),
[x ? "borderLeft" : "borderTop"]: _,
[x ? "width" : "height"]: 0
}
}
)
]
}
);
}, X2 = `
.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: f = "solid",
borderWeight: g = 1,
onClick: k = null,
className: h = "",
icon: d = null,
iconPosition: x = d ? "left" : "",
disabled: v = !1,
loading: p = !1,
loadingText: C = "",
loadingType: y = "default",
loadingPosition: L = "right",
shape: M = "rounded",
shadow: w = "sm",
style: _ = {},
ariaLabel: D,
ariaPressed: m,
ariaExpanded: z,
ariaControls: T,
role: V = "button",
size: E
}) => {
const I = b1(), $ = u1(), { bgColor: U, txtColor: W, borColor: B } = h1({
border: n,
fallback: v ? "disabled" : c
}), S = o ? R(o, I) : U, Z = l ? R(l, I) : W, O = a ? R(a, I) : B, j = n && O ? `${g}px ${f} ${O}` : "none", N = Q1(M, I), r = E1(w, I);
let i = {};
typeof E == "string" && (E === "sm" ? i = { padding: "4px 10px", fontSize: "0.875rem" } : E === "md" ? i = { padding: "6px 16px", fontSize: "1rem" } : E === "lg" && (i = { padding: "10px 20px", fontSize: "1.125rem" })), v1(() => {
V2("sud-button-styles", X2);
}, []);
const u = (P) => {
v || p || ($0(P.currentTarget), k && k(P));
}, b = typeof s == "string" ? /* @__PURE__ */ t.jsx(c1, { className: "sud-button__label", children: s }) : s;
return /* @__PURE__ */ t.jsx(
"button",
{
className: o1(
"sud-button",
v || p ? "" : "sud-hover",
h,
`cursor-${v ? "not-allowed" : "pointer"}`
),
ref: $,
style: {
display: "inline-flex",
flexDirection: "row",
justifyContent: "center",
gap: 8,
alignItems: "center",
background: S,
color: Z,
border: j,
boxShadow: c === "text" ? "none" : r,
...N,
...i,
..._
},
onClick: v ? void 0 : u,
disabled: v || p,
"aria-label": D,
"aria-pressed": m,
"aria-expanded": z,
"aria-controls": T,
role: V,
"aria-disabled": v || p,
children: p ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
L === "left" && /* @__PURE__ */ t.jsx(
"div",
{
className: o1(
"sud-button__spinner",
u2(y)
),
style: {
borderColor: Z,
width: "16px",
height: "16px",
borderTopColor: S
}
}
),
/* @__PURE__ */ t.jsx("div", { className: "sud-button__label", children: C || b }),
L === "right" && /* @__PURE__ */ t.jsx(
"div",
{
className: o1(
"sud-button__spinner",
u2(y)
),
style: {
borderColor: Z,
width: "16px",
height: "16px",
borderTopColor: S
}
}
)
] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
d && x === "left" && /* @__PURE__ */ t.jsx(
"span",
{
className: "sud-button__icon sud-button__icon--left",
style: {
display: "flex",
justifyContent: "center",
alignItems: "center"
},
children: d
}
),
b && /* @__PURE__ */ t.jsx("div", { className: "sud-button__label", children: b }),
d && x === "right" && /* @__PURE__ */ t.jsx(
"span",
{
className: "sud-button__icon sud-button__icon--right",
style: {
display: "flex",
justifyContent: "center",
alignItems: "center"
},
children: d
}
)
] })
}
);
}, H0 = 8, n0 = 8, _0 = /* @__PURE__ */ new WeakMap(), v0 = ({
children: s,
content: c,
title: o,
arrow: l = !0,
trigger: n = "hover",
placement: a = "bottom",
open: f,
defaultOpen: g = !1,
onOpenChange: k,
closeOnClick: h = !0,
disabled: d = !1,
className: x = "",
divider: v = !1,
background: p,
color: C,
border: y = !0,
borderColor: L,
borderType: M = "solid",
borderWeight: w = 1,
shape: _ = "rounded",
shadow: D = "sm",
colorType: m = "default",
style: z = {},
followTrigger: T = !1,
contentRef: V = null,
parentRef: E = null,
variant: I = "popup",
footer: $ = !1,
onCancel: U,
onConfirm: W,
...B
}) => {
const S = b1(), [Z, O] = K(g), j = u1(null), N = u1(null), r = V || N, i = u1(null), u = u1({}), [b, P] = K(!1), [F, H] = K({
position: "fixed",
top: "-9999px",
left: "-9999px",
opacity: 0,
pointerEvents: "none",
zIndex: 1e4,
transition: "opacity 0.2s ease"
}), [Y, A] = K(!1), G = f !== void 0, X = G ? f : Z;
v1(() => (P(!0), () => P(!1)), []);
const n1 = S1(
(e1) => {
if (G || O(e1), k == null || k(e1), !e1 && (A(!1), r.current)) {
const j1 = _0.get(r.current);
j1 && j1.forEach((w1) => {
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) === w1;
}
);
(K1 = (t0 = _1 == null ? void 0 : _1.current) == null ? void 0 : t0.popupInstance) != null && K1.hide && _1.current.popupInstance.hide();
});
}
},
[G, k, r]
), t1 = () => {
!d && !X && (r != null && r.current) ? (i.current && (clearTimeout(i.current), i.current = null), n1(!0)) : !d && !X && n1(!0);
}, r1 = () => {
if (!d) {
if (n === "click") {
n1(!1);
return;
}
i.current && clearTimeout(i.current), i.current = setTimeout(() => {
n1(!1);
}, 100);
}
}, Z1 = () => {
!d && n1(!X);
}, q = () => {
W == null || W(), Z1();
}, Q = () => {
U == null || U(), Z1();
};
v1(() => {
if (n !== "click" || !X) return;
const e1 = (j1) => {
var w1, _1;
!((w1 = j.current) != null && w1.contains(j1.target)) && !((_1 = r.current) != null && _1.contains(j1.target)) && r1();
};
return document.addEventListener("click", e1, !0), () => document.removeEventListener("mousedown", e1);
}, [n, X, r1]);
const { bgColor: i1, txtColor: m1, borColor: k1 } = h1({
border: y,
fallback: m
}), C1 = p ? R(p, S) : i1, L1 = C ? R(C, S) : m1, T1 = L ? R(L, S) : k1, B1 = y && T1 ? `${w}px ${M} ${T1}` : "none", P1 = E1(D, S), W1 = Q1(_), z1 = S1(() => {
if (!j.current || !r.current) return {};
const e1 = j.current.getBoundingClientRect(), j1 = r.current.getBoundingClientRect(), w1 = 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 = ((C0, c0) => {
switch (C0) {
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 - j1.width, U1 = "none"), {
top: e1.top - j1.height - n0 - H0 + w1,
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 - j1.width, U1 = "none"), {
top: e1.bottom + n0 + H0 + w1,
left: Y1,
transform: U1
};
}
case "left": {
let Y1 = e1.top + e1.height / 2 + w1, U1 = "translateY(-50%)";
return c0 === "top" ? (Y1 = e1.top + w1, U1 = "none") : c0 === "bottom" && (Y1 = e1.bottom + w1 - j1.height, U1 = "none"), {
top: Y1,
left: e1.left - j1.width - n0 - H0 + _1,
transform: U1
};
}
case "right": {
let Y1 = e1.top + e1.height / 2 + w1, U1 = "translateY(-50%)";
return c0 === "top" ? (Y1 = e1.top + w1, U1 = "none") : c0 === "bottom" && (Y1 = e1.bottom + w1 - j1.height, U1 = "none"), {
top: Y1,
left: e1.right + n0 + H0 + _1,
transform: U1
};
}
default:
return {};
}
})(K1, I1);
const R1 = window.innerWidth, A1 = window.innerHeight;
let $1 = J.left ?? 0, V1 = J.top ?? 0, G1 = j1.width, q1 = j1.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 > A1 && (V1 = A1 - q1 - 8, o0 = !0), o0 && (J.transform = void 0), { ...t0, ...J, left: $1, top: V1 };
}, [a]);
d0(() => {
if (X && r.current && j.current && !Y) {
const e1 = z1();
H({
...e1,
opacity: 1,
pointerEvents: "auto"
}), A(!0);
} else X || H((e1) => ({
...e1,
top: "-9999px",
left: "-9999px",
opacity: 0,
pointerEvents: "none"
}));
}, [X, Y, z1]), v1(() => {
if (!X) return;
const e1 = () => {
const j1 = z1();
H((w1) => ({
...w1,
...j1,
opacity: 1,
pointerEvents: "auto"
}));
};
return window.addEventListener("scroll", e1, !0), window.addEventListener("resize", e1), () => {
window.removeEventListener("scroll", e1, !0), window.removeEventListener("resize", e1);
};
}, [X, z1]);
const O1 = S1(
({ type: e1 = "background" }) => {
const j1 = e1 === "border", w1 = T1 && w > 0, _1 = n0 * 2 + (w1 ? w * 2 : 0), t0 = Math.sqrt(w * w * 2), K1 = !j1 && w1 ? t0 : 0, I1 = {
bottom: `linear-gradient(135deg, ${C1} 50%, transparent 50%)`,
top: `linear-gradient(-45deg, ${C1} 50%, transparent 50%)`,
left: `linear-gradient(225deg, ${C1} 50%, transparent 50%)`,
right: `linear-gradient(45deg, ${C1} 50%, transparent 50%)`
}, s0 = {
width: `${_1}px`,
height: `${_1}px`,
position: "fixed",
transform: "rotate(45deg)",
zIndex: j1 ? 1 : 3,
border: j1 ? B1 : void 0,
borderRadius: "2px 0 0 0",
background: j1 ? void 0 : I1[a],
backgroundColor: j1 ? T1 ?? C1 : void 0,
boxShadow: j1 ? 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,
C1,
T1,
B1,
w,
P1
]
);
return v1(() => {
if (n !== "hover") return;
const e1 = (j1) => {
var I1, s0;
const w1 = document.elementFromPoint(j1.clientX, j1.clientY), _1 = (I1 = j.current) == null ? void 0 : I1.contains(w1), t0 = (s0 = r.current) == null ? void 0 : s0.contains(w1), K1 = G2(
r,
w1,
G0,
B0
);
if (!X) {
_1 && t1();
return;
}
!_1 && !t0 && !K1 ? i.current || (i.current = setTimeout(() => {
r1();
}, 100)) : (clearTimeout(i.current), i.current = null);
};
return document.addEventListener("pointermove", e1), () => {
document.removeEventListener("pointermove", e1), clearTimeout(i.current);
};
}, [n, X, t1, r1]), v1(() => {
if (n === "hover" && (B0.add(r), E)) {
G0.set(r, E);
const e1 = _0.get(E) || /* @__PURE__ */ new Set();
e1.add(u.current), _0.set(E, e1);
}
return r.current && (r.current.popupInstance = {
show: t1,
hide: r1,
toggle: Z1,
id: u.current,
parentRef: E
}), () => {
if (n === "hover") {
if (B0.delete(r), G0.delete(r), E) {
const e1 = _0.get(E);
e1 && (e1.delete(u.current), e1.size === 0 && _0.delete(E));
}
i.current && (clearTimeout(i.current), i.current = null);
}
};
}, [n, E, t1, r1, Z1]), /* @__PURE__ */ t.jsxs(
"div",
{
className: o1(`sud-${I}`, x),
style: { position: "relative", display: "inline-block", ...z },
...B,
children: [
/* @__PURE__ */ t.jsx(
"div",
{
ref: j,
onClick: n === "click" ? Z1 : void 0,
onContextMenu: n === "contextMenu" ? (e1) => {
e1.preventDefault(), Z1();
} : void 0,
children: s
}
),
b && X && j0(
/* @__PURE__ */ t.jsxs(
"div",
{
ref: r,
style: F,
onClick: (e1) => {
e1.stopPropagation(), h && r1();
},
onMouseEnter: () => {
i.current && (clearTimeout(i.current), i.current = null);
},
onMouseLeave: () => {
n !== "click" && (i.current || (i.current = setTimeout(() => {
r1();
}, 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: C1,
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(
c1,
{
as: "span",
pretendard: "B",
size: "lg",
color: C,
style: { whiteSpace: "nowrap" },
children: o
}
) : o),
o && c && v && /* @__PURE__ */ t.jsx(h0, { style: { margin: 0 } }),
typeof c == "function" ? c() : c && (typeof c == "string" ? /* @__PURE__ */ t.jsx(
c1,
{
as: "span",
color: L1,
style: { whiteSpace: "nowrap" },
children: c
}
) : c),
I === "popconfirm" && ($ === !0 || $ === 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" })
] }) : $ === !0 || $ !== void 0 ? $ : null
]
}
),
l && /* @__PURE__ */ t.jsx(
"div",
{
className: "front",
style: O1({ type: "background" })
}
)
]
}
),
document.body
)
]
}
);
}, V0 = {
xs: 56,
sm: 72,
md: 98,
lg: 104,
xl: 120
}, K2 = {
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: