paydeuk-payment-modal
Version:
Paydeuk Payment Modal Component
3,846 lines • 114 kB
JavaScript
import * as z from "react";
import Ve, { forwardRef as $e, createElement as ve, useState as ge, useEffect as Ge, useRef as Se, useMemo as he, useCallback as ee } from "react";
import p from "prop-types";
var we = { exports: {} }, ie = {};
/**
* @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 Ae;
function ar() {
if (Ae) return ie;
Ae = 1;
var e = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
function r(s, n, a) {
var l = null;
if (a !== void 0 && (l = "" + a), n.key !== void 0 && (l = "" + n.key), "key" in n) {
a = {};
for (var m in n)
m !== "key" && (a[m] = n[m]);
} else a = n;
return n = a.ref, {
$$typeof: e,
type: s,
key: l,
ref: n !== void 0 ? n : null,
props: a
};
}
return ie.Fragment = t, ie.jsx = r, ie.jsxs = r, ie;
}
var le = {};
/**
* @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 Ce;
function ir() {
return Ce || (Ce = 1, process.env.NODE_ENV !== "production" && function() {
function e(i) {
if (i == null) return null;
if (typeof i == "function")
return i.$$typeof === de ? null : i.displayName || i.name || null;
if (typeof i == "string") return i;
switch (i) {
case j:
return "Fragment";
case P:
return "Profiler";
case _:
return "StrictMode";
case U:
return "Suspense";
case $:
return "SuspenseList";
case q:
return "Activity";
}
if (typeof i == "object")
switch (typeof i.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), i.$$typeof) {
case C:
return "Portal";
case B:
return (i.displayName || "Context") + ".Provider";
case O:
return (i._context.displayName || "Context") + ".Consumer";
case W:
var g = i.render;
return i = i.displayName, i || (i = g.displayName || g.name || "", i = i !== "" ? "ForwardRef(" + i + ")" : "ForwardRef"), i;
case H:
return g = i.displayName || null, g !== null ? g : e(i.type) || "Memo";
case b:
g = i._payload, i = i._init;
try {
return e(i(g));
} catch {
}
}
return null;
}
function t(i) {
return "" + i;
}
function r(i) {
try {
t(i);
var g = !1;
} catch {
g = !0;
}
if (g) {
g = console;
var w = g.error, y = typeof Symbol == "function" && Symbol.toStringTag && i[Symbol.toStringTag] || i.constructor.name || "Object";
return w.call(
g,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
y
), t(i);
}
}
function s(i) {
if (i === j) return "<>";
if (typeof i == "object" && i !== null && i.$$typeof === b)
return "<...>";
try {
var g = e(i);
return g ? "<" + g + ">" : "<...>";
} catch {
return "<...>";
}
}
function n() {
var i = K.A;
return i === null ? null : i.getOwner();
}
function a() {
return Error("react-stack-top-frame");
}
function l(i) {
if (J.call(i, "key")) {
var g = Object.getOwnPropertyDescriptor(i, "key").get;
if (g && g.isReactWarning) return !1;
}
return i.key !== void 0;
}
function m(i, g) {
function w() {
G || (G = !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)",
g
));
}
w.isReactWarning = !0, Object.defineProperty(i, "key", {
get: w,
configurable: !0
});
}
function u() {
var i = e(this.type);
return I[i] || (I[i] = !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."
)), i = this.props.ref, i !== void 0 ? i : null;
}
function h(i, g, w, y, N, T, Q, R) {
return w = T.ref, i = {
$$typeof: M,
type: i,
key: g,
props: T,
_owner: N
}, (w !== void 0 ? w : null) !== null ? Object.defineProperty(i, "ref", {
enumerable: !1,
get: u
}) : Object.defineProperty(i, "ref", { enumerable: !1, value: null }), i._store = {}, Object.defineProperty(i._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(i, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(i, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: Q
}), Object.defineProperty(i, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: R
}), Object.freeze && (Object.freeze(i.props), Object.freeze(i)), i;
}
function v(i, g, w, y, N, T, Q, R) {
var S = g.children;
if (S !== void 0)
if (y)
if (ue(S)) {
for (y = 0; y < S.length; y++)
k(S[y]);
Object.freeze && Object.freeze(S);
} 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 k(S);
if (J.call(g, "key")) {
S = e(i);
var L = Object.keys(g).filter(function(ae) {
return ae !== "key";
});
y = 0 < L.length ? "{key: someKey, " + L.join(": ..., ") + ": ...}" : "{key: someKey}", ne[S + y] || (L = 0 < L.length ? "{" + L.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} />`,
y,
S,
L,
S
), ne[S + y] = !0);
}
if (S = null, w !== void 0 && (r(w), S = "" + w), l(g) && (r(g.key), S = "" + g.key), "key" in g) {
w = {};
for (var Y in g)
Y !== "key" && (w[Y] = g[Y]);
} else w = g;
return S && m(
w,
typeof i == "function" ? i.displayName || i.name || "Unknown" : i
), h(
i,
S,
T,
N,
n(),
w,
Q,
R
);
}
function k(i) {
typeof i == "object" && i !== null && i.$$typeof === M && i._store && (i._store.validated = 1);
}
var E = Ve, M = Symbol.for("react.transitional.element"), C = Symbol.for("react.portal"), j = Symbol.for("react.fragment"), _ = Symbol.for("react.strict_mode"), P = Symbol.for("react.profiler"), O = Symbol.for("react.consumer"), B = Symbol.for("react.context"), W = Symbol.for("react.forward_ref"), U = Symbol.for("react.suspense"), $ = Symbol.for("react.suspense_list"), H = Symbol.for("react.memo"), b = Symbol.for("react.lazy"), q = Symbol.for("react.activity"), de = Symbol.for("react.client.reference"), K = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, J = Object.prototype.hasOwnProperty, ue = Array.isArray, X = console.createTask ? console.createTask : function() {
return null;
};
E = {
"react-stack-bottom-frame": function(i) {
return i();
}
};
var G, I = {}, V = E["react-stack-bottom-frame"].bind(
E,
a
)(), f = X(s(a)), ne = {};
le.Fragment = j, le.jsx = function(i, g, w, y, N) {
var T = 1e4 > K.recentlyCreatedOwnerStacks++;
return v(
i,
g,
w,
!1,
y,
N,
T ? Error("react-stack-top-frame") : V,
T ? X(s(i)) : f
);
}, le.jsxs = function(i, g, w, y, N) {
var T = 1e4 > K.recentlyCreatedOwnerStacks++;
return v(
i,
g,
w,
!0,
y,
N,
T ? Error("react-stack-top-frame") : V,
T ? X(s(i)) : f
);
};
}()), le;
}
process.env.NODE_ENV === "production" ? we.exports = ar() : we.exports = ir();
var o = we.exports;
const Re = Ve.forwardRef((e, t) => /* @__PURE__ */ o.jsx(
"span",
{
ref: t,
className: "sr-only",
...e
}
));
Re.displayName = "VisuallyHidden";
Re.propTypes = {
children: p.node,
className: p.string,
style: p.object
};
/**
* @license lucide-react v0.503.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const lr = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), cr = (e) => e.replace(
/^([A-Z])|[\s-_]+(\w)/g,
(t, r, s) => s ? s.toUpperCase() : r.toLowerCase()
), Pe = (e) => {
const t = cr(e);
return t.charAt(0).toUpperCase() + t.slice(1);
}, Fe = (...e) => e.filter((t, r, s) => !!t && t.trim() !== "" && s.indexOf(t) === r).join(" ").trim(), dr = (e) => {
for (const t in e)
if (t.startsWith("aria-") || t === "role" || t === "title")
return !0;
};
/**
* @license lucide-react v0.503.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
var ur = {
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round"
};
/**
* @license lucide-react v0.503.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const mr = $e(
({
color: e = "currentColor",
size: t = 24,
strokeWidth: r = 2,
absoluteStrokeWidth: s,
className: n = "",
children: a,
iconNode: l,
...m
}, u) => ve(
"svg",
{
ref: u,
...ur,
width: t,
height: t,
stroke: e,
strokeWidth: s ? Number(r) * 24 / Number(t) : r,
className: Fe("lucide", n),
...!a && !dr(m) && { "aria-hidden": "true" },
...m
},
[
...l.map(([h, v]) => ve(h, v)),
...Array.isArray(a) ? a : [a]
]
)
);
/**
* @license lucide-react v0.503.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const te = (e, t) => {
const r = $e(
({ className: s, ...n }, a) => ve(mr, {
ref: a,
iconNode: t,
className: Fe(
`lucide-${lr(Pe(e))}`,
`lucide-${e}`,
s
),
...n
})
);
return r.displayName = Pe(e), r;
};
/**
* @license lucide-react v0.503.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const fr = [
["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
["path", { d: "M19 12H5", key: "x3x0zl" }]
], pr = te("arrow-left", fr);
/**
* @license lucide-react v0.503.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const br = [
["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
], gr = te("circle-alert", br);
/**
* @license lucide-react v0.503.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const hr = [
["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
], xr = te("circle-check-big", hr);
/**
* @license lucide-react v0.503.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const yr = [
["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
["path", { d: "M21 3v5h-5", key: "1q7to0" }],
["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
["path", { d: "M8 16H3v5", key: "1cv678" }]
], vr = te("refresh-cw", yr);
/**
* @license lucide-react v0.503.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const wr = [
["polygon", { points: "19 20 9 12 19 4 19 20", key: "o2sva" }],
["line", { x1: "5", x2: "5", y1: "19", y2: "5", key: "1ocqjk" }]
], kr = te("skip-back", wr);
/**
* @license lucide-react v0.503.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const jr = [
["path", { d: "M7 10v12", key: "1qc93n" }],
[
"path",
{
d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z",
key: "emmmcr"
}
]
], Nr = te("thumbs-up", jr), Rr = `
@font-face {
font-family: '양진체';
src: url('https://fastly.jsdelivr.net/gh/supernovice-lab/font@0.9/yangjin.woff') format('woff');
font-weight: normal;
font-style: normal;
}
`;
function We({ onClick: e, className: t }) {
return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
/* @__PURE__ */ o.jsx("style", { children: Rr }),
/* @__PURE__ */ o.jsxs(
"h1",
{
className: `text-black cursor-pointer ${t}`,
style: { fontFamily: "양진체" },
onClick: e,
children: [
"페이",
/* @__PURE__ */ o.jsx("span", { className: "inline-block ml-1 -rotate-20", children: "득" })
]
}
)
] });
}
We.propTypes = {
onClick: p.func,
className: p.string
};
function Ue({ merchantName: e, productName: t, quantity: r, totalAmount: s }) {
return /* @__PURE__ */ o.jsxs("div", { className: "flex-1 p-6", children: [
/* @__PURE__ */ o.jsx("h2", { className: "text-xl font-bold mb-4", children: "결제 정보" }),
/* @__PURE__ */ o.jsxs("div", { className: "bg-gray-50 rounded-lg p-4", children: [
/* @__PURE__ */ o.jsxs("div", { className: "flex justify-between mb-2", children: [
/* @__PURE__ */ o.jsx("span", { className: "text-gray-600", children: "상점명" }),
/* @__PURE__ */ o.jsx("span", { className: "font-medium", children: e })
] }),
/* @__PURE__ */ o.jsxs("div", { className: "flex justify-between mb-2", children: [
/* @__PURE__ */ o.jsx("span", { className: "text-gray-600", children: "상품명" }),
/* @__PURE__ */ o.jsx("span", { className: "font-medium", children: t })
] }),
/* @__PURE__ */ o.jsxs("div", { className: "flex justify-between mb-2", children: [
/* @__PURE__ */ o.jsx("span", { className: "text-gray-600", children: "수량" }),
/* @__PURE__ */ o.jsxs("span", { className: "font-medium", children: [
r,
"개"
] })
] }),
/* @__PURE__ */ o.jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ o.jsx("span", { className: "text-gray-600", children: "결제 금액" }),
/* @__PURE__ */ o.jsxs("span", { className: "font-bold", children: [
s.toLocaleString(),
"원"
] })
] })
] }),
/* @__PURE__ */ o.jsxs("div", { className: "mt-4 border border-gray-200 rounded-lg p-4", children: [
/* @__PURE__ */ o.jsx("p", { className: "text-sm text-gray-600", children: "테크몰에 3번이나 방문하셨네요!" }),
/* @__PURE__ */ o.jsx("p", { className: "text-sm text-gray-600", children: "최대 혜택을 받을 수 있는 카드를 추천해드릴까요?" }),
/* @__PURE__ */ o.jsx("div", { className: "flex justify-end mt-2", children: /* @__PURE__ */ o.jsx(
"a",
{
href: "https://pc.wooricard.com/dcpc/main.do",
target: "_blank",
rel: "noopener noreferrer",
className: "text-sm text-blue-600 font-medium hover:underline",
children: "카드 추천 받으러 가기 →"
}
) })
] }),
/* @__PURE__ */ o.jsx("div", { className: "mt-4 overflow-hidden", children: /* @__PURE__ */ o.jsx(
"img",
{
src: "/starbucks.png",
alt: "별이 쏟아지는, 스타벅스 현대카드",
className: "w-full h-auto"
}
) })
] });
}
Ue.propTypes = {
merchantName: p.string.isRequired,
productName: p.string.isRequired,
quantity: p.number.isRequired,
totalAmount: p.number.isRequired
};
function Ye({
cards: e,
bestDiscountCard: t,
selectedCard: r,
onCardSelect: s,
onProceedToPayment: n
}) {
return /* @__PURE__ */ o.jsxs("div", { className: "flex-1 p-6", children: [
/* @__PURE__ */ o.jsx("h2", { className: "text-xl font-bold mb-4", children: "결제 카드 선택" }),
/* @__PURE__ */ o.jsxs(
"div",
{
className: `${(r == null ? void 0 : r.id) === t.id ? "bg-blue-100 border-2 border-blue-500" : "bg-white border border-gray-200 hover:border-gray-300"} rounded-lg overflow-hidden mb-4 flex flex-col cursor-pointer`,
onClick: () => s(t),
children: [
/* @__PURE__ */ o.jsxs("div", { className: "flex items-center px-3 pt-3", children: [
/* @__PURE__ */ o.jsx(Nr, { className: "text-green-500 mr-2 size-5" }),
/* @__PURE__ */ o.jsx("span", { className: "text-green-500 text-base font-semibold", children: "최고 혜택 추천 카드" }),
/* @__PURE__ */ o.jsx("span", { className: "ml-auto bg-black text-white text-sm px-3 py-0.5 rounded-full", children: "대표" })
] }),
/* @__PURE__ */ o.jsxs("div", { className: "flex items-center px-3", children: [
/* @__PURE__ */ o.jsx("div", { className: "flex items-center justify-center min-w-[100px] min-h-[100px] mr-3 overflow-hidden", children: /* @__PURE__ */ o.jsx(
"img",
{
src: "/everydiscount.png",
alt: "카드의정석 EVERY DISCOUNT",
className: "h-24 w-auto -rotate-90 object-contain"
}
) }),
/* @__PURE__ */ o.jsxs("div", { children: [
/* @__PURE__ */ o.jsxs("p", { className: "text-lg font-bold whitespace-nowrap overflow-hidden text-ellipsis max-w-[270px]", children: [
t.number,
" ",
t.name
] }),
/* @__PURE__ */ o.jsxs("div", { className: "bg-green-100 text-green-800 text-[10px] font-medium px-2 py-0.5 rounded-full inline-block mt-1", children: [
t.discount,
"% 할인"
] })
] })
] }),
(r == null ? void 0 : r.id) === t.id && /* @__PURE__ */ o.jsx("div", { className: "px-3 pb-3 mt-2", children: /* @__PURE__ */ o.jsx(
"button",
{
onClick: (a) => {
a.stopPropagation(), n();
},
className: "w-full bg-blue-500 hover:bg-blue-600 text-white py-2 text-sm font-medium rounded-lg",
children: "이 카드로 결제하기"
}
) })
]
}
),
e.filter((a) => a.id !== t.id).map((a) => /* @__PURE__ */ o.jsxs(
"div",
{
className: `${(r == null ? void 0 : r.id) === a.id ? "bg-blue-100 border-2 border-blue-500" : "bg-white border border-gray-200 hover:border-gray-300"} rounded-lg mb-3 overflow-hidden cursor-pointer`,
onClick: () => s(a),
children: [
/* @__PURE__ */ o.jsxs("div", { className: "flex px-4 py-2 items-center", children: [
/* @__PURE__ */ o.jsx("div", { className: "flex items-center justify-center min-w-[60px] min-h-[60px] mr-3 overflow-hidden", children: /* @__PURE__ */ o.jsx(
"img",
{
src: a.logo || "/placeholder.svg",
alt: a.name,
className: "h-14 w-auto -rotate-90 object-contain"
}
) }),
/* @__PURE__ */ o.jsxs("div", { className: "flex flex-col justify-center", children: [
/* @__PURE__ */ o.jsxs("p", { className: "text-sm font-medium leading-tight", children: [
a.number,
" ",
a.name
] }),
/* @__PURE__ */ o.jsx("span", { className: "mt-1 bg-gray-100 text-gray-800 text-[10px] font-medium px-2 py-0.5 rounded-full inline-block w-fit", children: a.discount > 0 ? `${a.discount}% 할인` : "할인 없음" })
] })
] }),
(r == null ? void 0 : r.id) === a.id && /* @__PURE__ */ o.jsx("div", { className: "px-3 pb-3", children: /* @__PURE__ */ o.jsx(
"button",
{
onClick: (l) => {
l.stopPropagation(), n();
},
className: "w-full bg-blue-500 hover:bg-blue-600 text-white py-2 text-sm font-medium rounded-lg",
children: "이 카드로 결제하기"
}
) })
]
},
a.id
)),
/* @__PURE__ */ o.jsx("button", { className: "w-full border border-dashed border-gray-300 rounded-lg py-3 mt-2 text-gray-600 hover:bg-gray-50", children: "+ 카드 등록하기" })
] });
}
Ye.propTypes = {
cards: p.arrayOf(
p.shape({
id: p.string.isRequired,
number: p.string.isRequired,
name: p.string.isRequired,
logo: p.string,
discount: p.number.isRequired
})
).isRequired,
bestDiscountCard: p.shape({
id: p.string.isRequired,
number: p.string.isRequired,
name: p.string.isRequired,
logo: p.string,
discount: p.number.isRequired
}).isRequired,
selectedCard: p.shape({
id: p.string.isRequired,
number: p.string.isRequired,
name: p.string.isRequired,
logo: p.string,
discount: p.number.isRequired
}),
onCardSelect: p.func.isRequired,
onProceedToPayment: p.func.isRequired
};
function Te(e, t) {
if (typeof e == "function")
return e(t);
e != null && (e.current = t);
}
function Er(...e) {
return (t) => {
let r = !1;
const s = e.map((n) => {
const a = Te(n, t);
return !r && typeof a == "function" && (r = !0), a;
});
if (r)
return () => {
for (let n = 0; n < s.length; n++) {
const a = s[n];
typeof a == "function" ? a() : Te(e[n], null);
}
};
};
}
// @__NO_SIDE_EFFECTS__
function Sr(e) {
const t = /* @__PURE__ */ Cr(e), r = z.forwardRef((s, n) => {
const { children: a, ...l } = s, m = z.Children.toArray(a), u = m.find(Tr);
if (u) {
const h = u.props.children, v = m.map((k) => k === u ? z.Children.count(h) > 1 ? z.Children.only(null) : z.isValidElement(h) ? h.props.children : null : k);
return /* @__PURE__ */ o.jsx(t, { ...l, ref: n, children: z.isValidElement(h) ? z.cloneElement(h, void 0, v) : null });
}
return /* @__PURE__ */ o.jsx(t, { ...l, ref: n, children: a });
});
return r.displayName = `${e}.Slot`, r;
}
var Ar = /* @__PURE__ */ Sr("Slot");
// @__NO_SIDE_EFFECTS__
function Cr(e) {
const t = z.forwardRef((r, s) => {
const { children: n, ...a } = r;
if (z.isValidElement(n)) {
const l = zr(n), m = _r(a, n.props);
return n.type !== z.Fragment && (m.ref = s ? Er(s, l) : l), z.cloneElement(n, m);
}
return z.Children.count(n) > 1 ? z.Children.only(null) : null;
});
return t.displayName = `${e}.SlotClone`, t;
}
var Pr = Symbol("radix.slottable");
function Tr(e) {
return z.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === Pr;
}
function _r(e, t) {
const r = { ...t };
for (const s in t) {
const n = e[s], a = t[s];
/^on[A-Z]/.test(s) ? n && a ? r[s] = (...m) => {
const u = a(...m);
return n(...m), u;
} : n && (r[s] = n) : s === "style" ? r[s] = { ...n, ...a } : s === "className" && (r[s] = [n, a].filter(Boolean).join(" "));
}
return { ...e, ...r };
}
function zr(e) {
var s, n;
let t = (s = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : s.get, r = t && "isReactWarning" in t && t.isReactWarning;
return r ? e.ref : (t = (n = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : n.get, r = t && "isReactWarning" in t && t.isReactWarning, r ? e.props.ref : e.props.ref || e.ref);
}
function De(e) {
var t, r, s = "";
if (typeof e == "string" || typeof e == "number") s += e;
else if (typeof e == "object") if (Array.isArray(e)) {
var n = e.length;
for (t = 0; t < n; t++) e[t] && (r = De(e[t])) && (s && (s += " "), s += r);
} else for (r in e) e[r] && (s && (s += " "), s += r);
return s;
}
function Be() {
for (var e, t, r = 0, s = "", n = arguments.length; r < n; r++) (e = arguments[r]) && (t = De(e)) && (s && (s += " "), s += t);
return s;
}
const _e = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, ze = Be, Mr = (e, t) => (r) => {
var s;
if ((t == null ? void 0 : t.variants) == null) return ze(e, r == null ? void 0 : r.class, r == null ? void 0 : r.className);
const { variants: n, defaultVariants: a } = t, l = Object.keys(n).map((h) => {
const v = r == null ? void 0 : r[h], k = a == null ? void 0 : a[h];
if (v === null) return null;
const E = _e(v) || _e(k);
return n[h][E];
}), m = r && Object.entries(r).reduce((h, v) => {
let [k, E] = v;
return E === void 0 || (h[k] = E), h;
}, {}), u = t == null || (s = t.compoundVariants) === null || s === void 0 ? void 0 : s.reduce((h, v) => {
let { class: k, className: E, ...M } = v;
return Object.entries(M).every((C) => {
let [j, _] = C;
return Array.isArray(_) ? _.includes({
...a,
...m
}[j]) : {
...a,
...m
}[j] === _;
}) ? [
...h,
k,
E
] : h;
}, []);
return ze(e, l, u, r == null ? void 0 : r.class, r == null ? void 0 : r.className);
}, Ee = "-", Or = (e) => {
const t = qr(e), {
conflictingClassGroups: r,
conflictingClassGroupModifiers: s
} = e;
return {
getClassGroupId: (l) => {
const m = l.split(Ee);
return m[0] === "" && m.length !== 1 && m.shift(), He(m, t) || Ir(l);
},
getConflictingClassGroupIds: (l, m) => {
const u = r[l] || [];
return m && s[l] ? [...u, ...s[l]] : u;
}
};
}, He = (e, t) => {
var l;
if (e.length === 0)
return t.classGroupId;
const r = e[0], s = t.nextPart.get(r), n = s ? He(e.slice(1), s) : void 0;
if (n)
return n;
if (t.validators.length === 0)
return;
const a = e.join(Ee);
return (l = t.validators.find(({
validator: m
}) => m(a))) == null ? void 0 : l.classGroupId;
}, Me = /^\[(.+)\]$/, Ir = (e) => {
if (Me.test(e)) {
const t = Me.exec(e)[1], r = t == null ? void 0 : t.substring(0, t.indexOf(":"));
if (r)
return "arbitrary.." + r;
}
}, qr = (e) => {
const {
theme: t,
classGroups: r
} = e, s = {
nextPart: /* @__PURE__ */ new Map(),
validators: []
};
for (const n in r)
ke(r[n], s, n, t);
return s;
}, ke = (e, t, r, s) => {
e.forEach((n) => {
if (typeof n == "string") {
const a = n === "" ? t : Oe(t, n);
a.classGroupId = r;
return;
}
if (typeof n == "function") {
if (Lr(n)) {
ke(n(s), t, r, s);
return;
}
t.validators.push({
validator: n,
classGroupId: r
});
return;
}
Object.entries(n).forEach(([a, l]) => {
ke(l, Oe(t, a), r, s);
});
});
}, Oe = (e, t) => {
let r = e;
return t.split(Ee).forEach((s) => {
r.nextPart.has(s) || r.nextPart.set(s, {
nextPart: /* @__PURE__ */ new Map(),
validators: []
}), r = r.nextPart.get(s);
}), r;
}, Lr = (e) => e.isThemeGetter, Vr = (e) => {
if (e < 1)
return {
get: () => {
},
set: () => {
}
};
let t = 0, r = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map();
const n = (a, l) => {
r.set(a, l), t++, t > e && (t = 0, s = r, r = /* @__PURE__ */ new Map());
};
return {
get(a) {
let l = r.get(a);
if (l !== void 0)
return l;
if ((l = s.get(a)) !== void 0)
return n(a, l), l;
},
set(a, l) {
r.has(a) ? r.set(a, l) : n(a, l);
}
};
}, je = "!", Ne = ":", $r = Ne.length, Gr = (e) => {
const {
prefix: t,
experimentalParseClassName: r
} = e;
let s = (n) => {
const a = [];
let l = 0, m = 0, u = 0, h;
for (let C = 0; C < n.length; C++) {
let j = n[C];
if (l === 0 && m === 0) {
if (j === Ne) {
a.push(n.slice(u, C)), u = C + $r;
continue;
}
if (j === "/") {
h = C;
continue;
}
}
j === "[" ? l++ : j === "]" ? l-- : j === "(" ? m++ : j === ")" && m--;
}
const v = a.length === 0 ? n : n.substring(u), k = Fr(v), E = k !== v, M = h && h > u ? h - u : void 0;
return {
modifiers: a,
hasImportantModifier: E,
baseClassName: k,
maybePostfixModifierPosition: M
};
};
if (t) {
const n = t + Ne, a = s;
s = (l) => l.startsWith(n) ? a(l.substring(n.length)) : {
isExternal: !0,
modifiers: [],
hasImportantModifier: !1,
baseClassName: l,
maybePostfixModifierPosition: void 0
};
}
if (r) {
const n = s;
s = (a) => r({
className: a,
parseClassName: n
});
}
return s;
}, Fr = (e) => e.endsWith(je) ? e.substring(0, e.length - 1) : e.startsWith(je) ? e.substring(1) : e, Wr = (e) => {
const t = Object.fromEntries(e.orderSensitiveModifiers.map((s) => [s, !0]));
return (s) => {
if (s.length <= 1)
return s;
const n = [];
let a = [];
return s.forEach((l) => {
l[0] === "[" || t[l] ? (n.push(...a.sort(), l), a = []) : a.push(l);
}), n.push(...a.sort()), n;
};
}, Ur = (e) => ({
cache: Vr(e.cacheSize),
parseClassName: Gr(e),
sortModifiers: Wr(e),
...Or(e)
}), Yr = /\s+/, Dr = (e, t) => {
const {
parseClassName: r,
getClassGroupId: s,
getConflictingClassGroupIds: n,
sortModifiers: a
} = t, l = [], m = e.trim().split(Yr);
let u = "";
for (let h = m.length - 1; h >= 0; h -= 1) {
const v = m[h], {
isExternal: k,
modifiers: E,
hasImportantModifier: M,
baseClassName: C,
maybePostfixModifierPosition: j
} = r(v);
if (k) {
u = v + (u.length > 0 ? " " + u : u);
continue;
}
let _ = !!j, P = s(_ ? C.substring(0, j) : C);
if (!P) {
if (!_) {
u = v + (u.length > 0 ? " " + u : u);
continue;
}
if (P = s(C), !P) {
u = v + (u.length > 0 ? " " + u : u);
continue;
}
_ = !1;
}
const O = a(E).join(":"), B = M ? O + je : O, W = B + P;
if (l.includes(W))
continue;
l.push(W);
const U = n(P, _);
for (let $ = 0; $ < U.length; ++$) {
const H = U[$];
l.push(B + H);
}
u = v + (u.length > 0 ? " " + u : u);
}
return u;
};
function Br() {
let e = 0, t, r, s = "";
for (; e < arguments.length; )
(t = arguments[e++]) && (r = Je(t)) && (s && (s += " "), s += r);
return s;
}
const Je = (e) => {
if (typeof e == "string")
return e;
let t, r = "";
for (let s = 0; s < e.length; s++)
e[s] && (t = Je(e[s])) && (r && (r += " "), r += t);
return r;
};
function Hr(e, ...t) {
let r, s, n, a = l;
function l(u) {
const h = t.reduce((v, k) => k(v), e());
return r = Ur(h), s = r.cache.get, n = r.cache.set, a = m, m(u);
}
function m(u) {
const h = s(u);
if (h)
return h;
const v = Dr(u, r);
return n(u, v), v;
}
return function() {
return a(Br.apply(null, arguments));
};
}
const A = (e) => {
const t = (r) => r[e] || [];
return t.isThemeGetter = !0, t;
}, Xe = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, Ze = /^\((?:(\w[\w-]*):)?(.+)\)$/i, Jr = /^\d+\/\d+$/, Xr = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Zr = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Kr = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, Qr = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, et = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, re = (e) => Jr.test(e), x = (e) => !!e && !Number.isNaN(Number(e)), D = (e) => !!e && Number.isInteger(Number(e)), xe = (e) => e.endsWith("%") && x(e.slice(0, -1)), F = (e) => Xr.test(e), rt = () => !0, tt = (e) => (
// `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
// For example, `hsl(0 0% 0%)` would be classified as a length without this check.
// I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
Zr.test(e) && !Kr.test(e)
), Ke = () => !1, ot = (e) => Qr.test(e), st = (e) => et.test(e), nt = (e) => !c(e) && !d(e), at = (e) => oe(e, rr, Ke), c = (e) => Xe.test(e), Z = (e) => oe(e, tr, tt), ye = (e) => oe(e, ut, x), Ie = (e) => oe(e, Qe, Ke), it = (e) => oe(e, er, st), fe = (e) => oe(e, or, ot), d = (e) => Ze.test(e), ce = (e) => se(e, tr), lt = (e) => se(e, mt), qe = (e) => se(e, Qe), ct = (e) => se(e, rr), dt = (e) => se(e, er), pe = (e) => se(e, or, !0), oe = (e, t, r) => {
const s = Xe.exec(e);
return s ? s[1] ? t(s[1]) : r(s[2]) : !1;
}, se = (e, t, r = !1) => {
const s = Ze.exec(e);
return s ? s[1] ? t(s[1]) : r : !1;
}, Qe = (e) => e === "position" || e === "percentage", er = (e) => e === "image" || e === "url", rr = (e) => e === "length" || e === "size" || e === "bg-size", tr = (e) => e === "length", ut = (e) => e === "number", mt = (e) => e === "family-name", or = (e) => e === "shadow", ft = () => {
const e = A("color"), t = A("font"), r = A("text"), s = A("font-weight"), n = A("tracking"), a = A("leading"), l = A("breakpoint"), m = A("container"), u = A("spacing"), h = A("radius"), v = A("shadow"), k = A("inset-shadow"), E = A("text-shadow"), M = A("drop-shadow"), C = A("blur"), j = A("perspective"), _ = A("aspect"), P = A("ease"), O = A("animate"), B = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], W = () => [
"center",
"top",
"bottom",
"left",
"right",
"top-left",
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
"left-top",
"top-right",
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
"right-top",
"bottom-right",
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
"right-bottom",
"bottom-left",
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
"left-bottom"
], U = () => [...W(), d, c], $ = () => ["auto", "hidden", "clip", "visible", "scroll"], H = () => ["auto", "contain", "none"], b = () => [d, c, u], q = () => [re, "full", "auto", ...b()], de = () => [D, "none", "subgrid", d, c], K = () => ["auto", {
span: ["full", D, d, c]
}, D, d, c], J = () => [D, "auto", d, c], ue = () => ["auto", "min", "max", "fr", d, c], X = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], G = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], I = () => ["auto", ...b()], V = () => [re, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...b()], f = () => [e, d, c], ne = () => [...W(), qe, Ie, {
position: [d, c]
}], i = () => ["no-repeat", {
repeat: ["", "x", "y", "space", "round"]
}], g = () => ["auto", "cover", "contain", ct, at, {
size: [d, c]
}], w = () => [xe, ce, Z], y = () => [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
"full",
h,
d,
c
], N = () => ["", x, ce, Z], T = () => ["solid", "dashed", "dotted", "double"], Q = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], R = () => [x, xe, qe, Ie], S = () => [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
C,
d,
c
], L = () => ["none", x, d, c], Y = () => ["none", x, d, c], ae = () => [x, d, c], me = () => [re, "full", ...b()];
return {
cacheSize: 500,
theme: {
animate: ["spin", "ping", "pulse", "bounce"],
aspect: ["video"],
blur: [F],
breakpoint: [F],
color: [rt],
container: [F],
"drop-shadow": [F],
ease: ["in", "out", "in-out"],
font: [nt],
"font-weight": ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
"inset-shadow": [F],
leading: ["none", "tight", "snug", "normal", "relaxed", "loose"],
perspective: ["dramatic", "near", "normal", "midrange", "distant", "none"],
radius: [F],
shadow: [F],
spacing: ["px", x],
text: [F],
"text-shadow": [F],
tracking: ["tighter", "tight", "normal", "wide", "wider", "widest"]
},
classGroups: {
// --------------
// --- Layout ---
// --------------
/**
* Aspect Ratio
* @see https://tailwindcss.com/docs/aspect-ratio
*/
aspect: [{
aspect: ["auto", "square", re, c, d, _]
}],
/**
* Container
* @see https://tailwindcss.com/docs/container
* @deprecated since Tailwind CSS v4.0.0
*/
container: ["container"],
/**
* Columns
* @see https://tailwindcss.com/docs/columns
*/
columns: [{
columns: [x, c, d, m]
}],
/**
* Break After
* @see https://tailwindcss.com/docs/break-after
*/
"break-after": [{
"break-after": B()
}],
/**
* Break Before
* @see https://tailwindcss.com/docs/break-before
*/
"break-before": [{
"break-before": B()
}],
/**
* Break Inside
* @see https://tailwindcss.com/docs/break-inside
*/
"break-inside": [{
"break-inside": ["auto", "avoid", "avoid-page", "avoid-column"]
}],
/**
* Box Decoration Break
* @see https://tailwindcss.com/docs/box-decoration-break
*/
"box-decoration": [{
"box-decoration": ["slice", "clone"]
}],
/**
* Box Sizing
* @see https://tailwindcss.com/docs/box-sizing
*/
box: [{
box: ["border", "content"]
}],
/**
* Display
* @see https://tailwindcss.com/docs/display
*/
display: ["block", "inline-block", "inline", "flex", "inline-flex", "table", "inline-table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row-group", "table-row", "flow-root", "grid", "inline-grid", "contents", "list-item", "hidden"],
/**
* Screen Reader Only
* @see https://tailwindcss.com/docs/display#screen-reader-only
*/
sr: ["sr-only", "not-sr-only"],
/**
* Floats
* @see https://tailwindcss.com/docs/float
*/
float: [{
float: ["right", "left", "none", "start", "end"]
}],
/**
* Clear
* @see https://tailwindcss.com/docs/clear
*/
clear: [{
clear: ["left", "right", "both", "none", "start", "end"]
}],
/**
* Isolation
* @see https://tailwindcss.com/docs/isolation
*/
isolation: ["isolate", "isolation-auto"],
/**
* Object Fit
* @see https://tailwindcss.com/docs/object-fit
*/
"object-fit": [{
object: ["contain", "cover", "fill", "none", "scale-down"]
}],
/**
* Object Position
* @see https://tailwindcss.com/docs/object-position
*/
"object-position": [{
object: U()
}],
/**
* Overflow
* @see https://tailwindcss.com/docs/overflow
*/
overflow: [{
overflow: $()
}],
/**
* Overflow X
* @see https://tailwindcss.com/docs/overflow
*/
"overflow-x": [{
"overflow-x": $()
}],
/**
* Overflow Y
* @see https://tailwindcss.com/docs/overflow
*/
"overflow-y": [{
"overflow-y": $()
}],
/**
* Overscroll Behavior
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
overscroll: [{
overscroll: H()
}],
/**
* Overscroll Behavior X
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
"overscroll-x": [{
"overscroll-x": H()
}],
/**
* Overscroll Behavior Y
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
"overscroll-y": [{
"overscroll-y": H()
}],
/**
* Position
* @see https://tailwindcss.com/docs/position
*/
position: ["static", "fixed", "absolute", "relative", "sticky"],
/**
* Top / Right / Bottom / Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
inset: [{
inset: q()
}],
/**
* Right / Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
"inset-x": [{
"inset-x": q()
}],
/**
* Top / Bottom
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
"inset-y": [{
"inset-y": q()
}],
/**
* Start
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
start: [{
start: q()
}],
/**
* End
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
end: [{
end: q()
}],
/**
* Top
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
top: [{
top: q()
}],
/**
* Right
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
right: [{
right: q()
}],
/**
* Bottom
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
bottom: [{
bottom: q()
}],
/**
* Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
left: [{
left: q()
}],
/**
* Visibility
* @see https://tailwindcss.com/docs/visibility
*/
visibility: ["visible", "invisible", "collapse"],
/**
* Z-Index
* @see https://tailwindcss.com/docs/z-index
*/
z: [{
z: [D, "auto", d, c]
}],
// ------------------------
// --- Flexbox and Grid ---
// ------------------------
/**
* Flex Basis
* @see https://tailwindcss.com/docs/flex-basis
*/
basis: [{
basis: [re, "full", "auto", m, ...b()]
}],
/**
* Flex Direction
* @see https://tailwindcss.com/docs/flex-direction
*/
"flex-direction": [{
flex: ["row", "row-reverse", "col", "col-reverse"]
}],
/**
* Flex Wrap
* @see https://tailwindcss.com/docs/flex-wrap
*/
"flex-wrap": [{
flex: ["nowrap", "wrap", "wrap-reverse"]
}],
/**
* Flex
* @see https://tailwindcss.com/docs/flex
*/
flex: [{
flex: [x, re, "auto", "initial", "none", c]
}],
/**
* Flex Grow
* @see https://tailwindcss.com/docs/flex-grow
*/
grow: [{
grow: ["", x, d, c]
}],
/**
* Flex Shrink
* @see https://tailwindcss.com/docs/flex-shrink
*/
shrink: [{
shrink: ["", x, d, c]
}],
/**
* Order
* @see https://tailwindcss.com/docs/order
*/
order: [{
order: [D, "first", "last", "none", d, c]
}],
/**
* Grid Template Columns
* @see https://tailwindcss.com/docs/grid-template-columns
*/
"grid-cols": [{
"grid-cols": de()
}],
/**
* Grid Column Start / End
* @see https://tailwindcss.com/docs/grid-column
*/
"col-start-end": [{
col: K()
}],
/**
* Grid Column Start
* @see https://tailwindcss.com/docs/grid-column
*/
"col-start": [{
"col-start": J()
}],
/**
* Grid Column End
* @see https://tailwindcss.com/docs/grid-column
*/
"col-end": [{
"col-end": J()
}],
/**
* Grid Template Rows
* @see https://tailwindcss.com/docs/grid-template-rows
*/
"grid-rows": [{
"grid-rows": de()
}],
/**
* Grid Row Start / End
* @see https://tailwindcss.com/docs/grid-row
*/
"row-start-end": [{
row: K()
}],
/**
* Grid Row Start
* @see https://tailwindcss.com/docs/grid-row
*/
"row-start": [{
"row-start": J()
}],
/**
* Grid Row End
* @see https://tailwindcss.com/docs/grid-row
*/
"row-end": [{
"row-end": J()
}],
/**
* Grid Auto Flow
* @see https://tailwindcss.com/docs/grid-auto-flow
*/
"grid-flow": [{
"grid-flow": ["row", "col", "dense", "row-dense", "col-dense"]
}],
/**
* Grid Auto Columns
* @see https://tailwindcss.com/docs/grid-auto-columns
*/
"auto-cols": [{
"auto-cols": ue()
}],
/**
* Grid Auto Rows
* @see https://tailwindcss.com/docs/grid-auto-rows
*/
"auto-rows": [{
"auto-rows": ue()
}],
/**
* Gap
* @see https://tailwindcss.com/docs/gap
*/
gap: [{
gap: b()
}],
/**
* Gap X
* @see https://tailwindcss.com/docs/gap
*/
"gap-x": [{
"gap-x": b()
}],
/**
* Gap Y
* @see https://tailwindcss.com/docs/gap
*/
"gap-y": [{
"gap-y": b()
}],
/**
* Justify Content
* @see https://tailwindcss.com/docs/justify-content
*/
"justify-content": [{
justify: [...X(), "normal"]
}],
/**
* Justify Items
* @see https://tailwindcss.com/docs/justify-items
*/
"justify-items": [{
"justify-items": [...G(), "normal"]
}],
/**
* Justify Self
* @see https://tailwindcss.com/docs/justify-self
*/
"justify-self": [{
"justify-self": ["auto", ...G()]
}],
/**
* Align Content
* @see https://tailwindcss.com/docs/align-content
*/
"align-content": [{
content: ["normal", ...X()]
}],
/**
* Align Items
* @see https://tailwindcss.com/docs/align-items
*/
"align-items": [{
items: [...G(), {
baseline: ["", "last"]
}]
}],
/**
* Align Self
* @see https://tailwindcss.com/docs/align-self
*/
"align-self": [{
self: ["auto", ...G(), {
baseline: ["", "last"]
}]
}],
/**
* Place Content
* @see https://tailwindcss.com/docs/place-content
*/
"place-content": [{
"place-content": X()
}],
/**
* Place Items
* @see https://tailwindcss.com/docs/place-items
*/
"place-items": [{
"place-items": [...G(), "baseline"]
}],
/**
* Place Self
* @see https://tailwindcss.com/docs/place-self
*/
"place-self": [{
"place-self": ["auto", ...G()]
}],
// Spacing
/**
* Padding
* @see https://tailwindcss.com/docs/padding
*/
p: [{
p: b()
}],
/**
* Padding X
* @see https://tailwindcss.com/docs/padding
*/
px: [{
px: b()
}],
/**
* Padding Y
* @see https://tailwindcss.com/docs/padding
*/
py: [{
py: b()
}],
/**
* Padding Start
* @see https://tailwindcss.com/docs/padding
*/
ps: [{
ps: b()
}],
/**
* Padding End
* @see https://tailwindcss.com/docs/padding
*/
pe: [{
pe: b()
}],
/**
* Padding Top
* @see https://tailwindcss.com/docs/padding
*/
pt: [{
pt: b()
}],
/**
* Padding Right
* @see https://tailwindcss.com/docs/padding
*/
pr: [{
pr: b()
}],
/**
* Padding Bottom
* @see https://tailwindcss.com/docs/padding
*/
pb: [{
pb: b()
}],
/**
* Padding Left
* @see https://tailwindcss.com/docs/padding
*/
pl: [{
pl: b()
}],
/**
* Margin
* @see https://tailwindcss.com/docs/margin
*/
m: [{
m: I()
}],
/**
* Margin X
* @see https://tailwindcss.com/docs/margin
*/
mx: [{
mx: I()
}],
/**
* Margin Y
* @see https://tailwindcss.com/docs/margin
*/
my: [{
my: I()
}],
/**
* Margin Start
* @see https://tailwindcss.com/docs/margin
*/
ms: [{
ms: I()
}],
/**
* Margin End
* @see https://tailwindcss.com/docs/margin
*/
me: [{
me: I()
}],
/**
* Margin Top
* @see https://tailwindcss.com/docs/margin
*/
mt: [{
mt: I()
}],
/**
* Margin Right
* @see https://tailwindcss.com/docs/margin
*/
mr: [{
mr: I()
}],
/**
* Margin Bottom
* @see https://tailwindcss.com/docs/margin
*/
mb: [{
mb: I()
}],
/**
* Margin Left
* @see https://tailwindcss.com/docs/margin
*/
ml: [{
ml: I()
}],
/**
* Space Between X
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
"space-x": [{
"space-x": b()
}],
/**
* Space Between X Reverse
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
"space-x-reverse": ["space-x-reverse"],
/**
* Space Between Y
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
"space-y": [{
"space-y": b()
}],
/**
* Space Between Y Reverse
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
"space-y-reverse": ["space-y-reverse"],
// --------------
// --- Sizing ---
// --------------
/**
* Size
* @see https://tailwindcss.com/docs/width#setting-both-width-and-height
*/
size: [{
size: V()
}],
/**
* Width
* @see https://tailwindcss.com/docs/width
*/
w: [{
w: [m, "screen", ...V()]
}],
/**
* Min-Width
* @see https://tailwindcss.com/docs/min-width
*/
"min-w": [{
"min-w": [
m,
"screen",
/** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
"none",
...V()
]
}],
/**
* Max-Width
* @see https://tailwindcss.com/docs/max-width
*/
"max-w": [{
"max-w": [
m,
"screen",
"none",
/** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
"prose",
/** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
{
screen: [l]
},
...V()
]
}],
/**
* Height
* @see https://tailwindcss.com/docs/height
*/
h: [{
h: ["screen", "lh", ...V()]
}],
/**
* Min-Height
* @see https://tailwindcss.com/docs/min-height
*/
"min-h": [{
"min-h": ["screen", "lh", "none", ...V()]
}],
/**
* Max-Height
* @see https://tailwindcss.com/docs/max-height
*/
"max-h": [{
"max-h": ["screen", "lh", ...V()]
}],
// ------------------
// --- Typography ---
// ------------------
/**
* Font Size
* @see https://tailwindcss.com/docs/font-size
*/
"font-size": [{
text: ["base", r, ce, Z]
}],
/**
* Font Smoothing
* @see https://tailwindcss.com/docs/font-smoothing
*/
"font-smoothing": ["antialiased", "subpixel-antialiased"],
/**
* Font Style
* @see https://tailwindcss.com/docs/font-style
*/
"font-style": ["italic", "not-italic"],
/**
* Font Weight
* @see https://tailwindcss.com/docs/font-weight
*/
"font-weight": [{
font: [s, d, ye]
}],
/**
* Font Stretch
* @see https://tailwindcss.com/docs/font-stretch
*/
"font-stretch": [{
"font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", xe, c]
}],
/**
* Font Family
* @see https://tailwindcss.com/docs/font-family
*/
"font-family": [{
font: [lt, c, t]
}],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-normal": ["normal-nums"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-ordinal": ["ordinal"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-slashed-zero": ["slashed-zero"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-figure": ["lining-nums", "oldstyle-nums"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-spacing": ["proportional-nums", "tabular-nums"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
/**
* Letter Spacing
* @see https://tailwindcss.com/docs/letter-spacing
*/
tracking: [{
tracking: [n, d, c]
}],
/**
* Line Clamp
* @see https://tailwindcss.com/docs/line-clamp
*/
"line-clamp": [{
"line-clamp": [x, "none", d, ye]
}],
/**
* Line Height
* @see https://tailwindcss.com/docs/line-height
*/
leading: [{
leading: [
/** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
a,
...b()
]
}],
/**
* List Style Image
* @see https://tailwindcss.com/docs/list-style-image
*/
"list-image": [{
"list-image": ["none", d, c]
}],
/**
* List Style Position
* @see https://tailwindcss.com/docs/list-style-position
*/
"list-style-position": [{
list: ["inside", "outside"]
}],
/**
* List Style Type
* @see https://tailwindcss.com/docs/list-style-type
*/
"list-style-type": [{
list: ["disc", "decimal", "none", d, c]
}],
/**
* Text Alignment
* @see https://tailwindcss.com/docs/text-align
*/
"text-alignment": [{
text: ["left", "center", "right", "justify", "start", "end"]
}],
/**
* Placeholder Color
* @deprecated since Tailwind CSS v3.0.0
* @see https://v3.tailwindcss.com/docs/placeholder-color
*/
"placeholder-color": [{
placeholder: f()
}],
/**
* Text Color
* @see https://tailwindcss.com/docs/text-color
*/
"text-color": [{
text: f()
}],
/**
* Text Decoration
* @see https://tailwindcss.com/docs/text-decoration
*/
"text-decoration": ["underline", "overline", "line-through", "no-underline"],
/**
* Text Decoration Style
* @see https://tailwindcss.com/docs/text-decoration-style
*/
"text-decoration-style": [{
decoration: [...T(), "wavy"]
}],
/**
* Text Decoration Thickness
* @see https://tailwindcss.com/docs/text-decoration-thickness
*/
"text-decoration-thickness": [{
decoration: [x, "from-font", "auto", d, Z]
}],
/**
* Text Decoration Color
* @see https://tailwindcss.com/docs/text-decoration-color
*/
"text-decoration-color": [{
decoration: f()
}],
/**
* Text Underline Offset
* @see https://tailwindcss.com/docs/text-underline-offset
*/
"underline-offset": [{
"underline-offset": [x, "auto", d, c]
}],
/**
* Text Transform
* @see https://tailwindcss.com/docs/text-transform
*/
"text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"],
/**
* Text Overflow
* @see https://tailwindcss.com/docs/text-overflow
*/
"text-overflow": ["truncate", "text-ellipsis", "text-clip"],
/**
* Text Wrap
* @see https://tailwindcss.com/docs/text-wrap
*/
"text-wrap": [{
text: ["wrap", "nowrap", "balance", "pretty"]
}],
/**
* Text Indent
* @see https://tailwindcss.com/docs/text-indent
*/
indent: [{
indent: b()
}],
/**
* Vertical Alignment
* @see https://tailwindcss.com/docs/vertical-align
*/
"vertical-align": [{
align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", d, c]
}],
/**
* Whitespace
* @see https://tailwindcss.com/docs/whitespace
*/
whitespace: [{
whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"]
}],
/**
* Word Break
* @see https://tailwindcss.com/docs/word-break
*/
break: [{
break: ["normal", "words", "all", "keep"]
}],
/**
* Overflow Wrap
* @see https://tailwindcss.com/docs/overflow-wrap
*/
wrap: [{
wrap: ["break-word", "anywhere", "normal"]
}],
/**
* Hyphens
* @see https://tailwindcss.com/docs/hyphens
*/
hyphens: [{
hyphens: ["none", "manual", "auto"]
}],
/**
* Content
* @see https://tailwindcss.com/docs/content
*/
content: [{
content: ["none", d, c]
}],
// -------------------
// --- Backgrounds ---
// -------------------
/**
* Background Attachment
* @see https://tailwindcss.com/docs/background-attachment
*/
"bg-attachment": [{
bg: ["fixed", "local", "scroll"]
}],
/**
* Background Clip
* @see https://tailwindcss.com/docs/background-clip
*/
"bg-clip": [{
"bg-clip": ["border", "padding", "content", "text"]
}],
/**
* Background Origin
* @see https://tailwindcss.com/docs/background-origin
*/
"bg-origin": [{
"bg-origin": ["border", "padding", "content"]
}],
/**
* Background Position
* @see https://tailwindcss.com/docs/background-position
*/
"bg-position": [{
bg: ne()
}],
/**
* Background Repeat
* @see https://tailwindcss.com/docs/background-repeat
*/
"bg-repeat": [{
bg: i()
}],
/**
* Background Size
* @see https://tailwindcss.com/docs/background-size
*/
"bg-size": [{
bg: g()
}],
/**
* Background Image
* @see https://tailwindcss.com/docs/background-image
*/
"bg-image": [{
bg: ["none", {
linear: [{
to: ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
}, D, d, c],
radial: ["", d, c],
conic: [D, d, c]
}, dt, it]
}],
/**
* Background Color
* @see https://tailwindcss.com/docs/background-color
*/
"bg-color": [{
bg: f()
}],
/**
* Gradient Color Stops From Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-from-pos": [{
from: w()
}],
/**
* Gradient Color Stops Via Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-via-pos": [{
via: w()
}],
/**
* Gradient Color Stops To Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-to-pos": [{
to: w()
}],
/**
* Gradient Color Stops From
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-from": [{
from: f()
}],
/**
* Gradient Color Stops Via
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-via": [{
via: f()
}],
/**
* Gradient Color Stops To
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-to": [{
to: f()
}],
// ---------------
// --- Borders ---
// ---------------
/**
* Border Radius
* @see https://tailwindcss.com/docs/border-radius
*/
rounded: [{
rounded: y()
}],
/**
* Border Radius Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-s": [{
"rounded-s": y()
}],
/**
* Border Radius End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-e": [{
"rounded-e": y()
}],
/**
* Border Radius Top
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-t": [{
"rounded-t": y()
}],
/**
* Border Radius Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-r": [{
"rounded-r": y()
}],
/**
* Border Radius Bottom
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-b": [{
"rounded-b": y()
}],
/**
* Border Radius Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-l": [{
"rounded-l": y()
}],
/**
* Border Radius Start Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-ss": [{
"rounded-ss": y()
}],
/**
* Border Radius Start End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-se": [{
"rounded-se": y()
}],
/**
* Border Radius End End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-ee": [{
"rounded-ee": y()
}],
/**
* Border Radius End Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-es": [{
"rounded-es": y()
}],
/**
* Border Radius Top Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-tl": [{
"rounded-tl": y()
}],
/**
* Border Radius Top Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-tr": [{
"rounded-tr": y()
}],
/**
* Border Radius Bottom Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-br": [{
"rounded-br": y()
}],
/**
* Border Radius Bottom Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-bl": [{
"rounded-bl": y()
}],
/**
* Border Width
* @see https://tailwindcss.com/docs/border-width
*/
"border-w": [{
border: N()
}],
/**
* Border Width X
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-x": [{
"border-x": N()
}],
/**
* Border Width Y
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-y": [{
"border-y": N()
}],
/**
* Border Width Start
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-s": [{
"border-s": N()
}],
/**
* Border Width End
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-e": [{
"border-e": N()
}],
/**
* Border Width Top
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-t": [{
"border-t": N()
}],
/**
* Border Width Right
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-r": [{
"border-r": N()
}],
/**
* Border Width Bottom
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-b": [{
"border-b": N()
}],
/**
* Border Width Left
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-l": [{
"border-l": N()
}],
/**
* Divide Width X
* @see https://tailwindcss.com/docs/border-width#between-children
*/
"divide-x": [{
"divide-x": N()
}],
/**
* Divide Width X Reverse
* @see https://tailwindcss.com/docs/border-width#between-children
*/
"divide-x-reverse": ["divide-x-reverse"],
/**
* Divide Width Y
* @see https://tailwindcss.com/docs/border-width#between-children
*/
"divide-y": [{
"divide-y": N()
}],
/**
* Divide Width Y Reverse
* @see https://tailwindcss.com/docs/border-width#between-children
*/
"divide-y-reverse": ["divide-y-reverse"],
/**
* Border Style
* @see https://tailwindcss.com/docs/border-style
*/
"border-style": [{
border: [...T(), "hidden", "none"]
}],
/**
* Divide Style
* @see https://tailwindcss.com/docs/border-style#setting-the-divider-style
*/
"divide-style": [{
divide: [...T(), "hidden", "none"]
}],
/**
* Border Color
* @see https://tailwindcss.com/docs/border-color
*/
"border-color": [{
border: f()
}],
/**
* Border Color X
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-x": [{
"border-x": f()
}],
/**
* Border Color Y
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-y": [{
"border-y": f()
}],
/**
* Border Color S
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-s": [{
"border-s": f()
}],
/**
* Border Color E
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-e": [{
"border-e": f()
}],
/**
* Border Color Top
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-t": [{
"border-t": f()
}],
/**
* Border Color Right
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-r": [{
"border-r": f()
}],
/**
* Border Color Bottom
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-b": [{
"border-b": f()
}],
/**
* Border Color Left
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-l": [{
"border-l": f()
}],
/**
* Divide Color
* @see https://tailwindcss.com/docs/divide-color
*/
"divide-color": [{
divide: f()
}],
/**
* Outline Style
* @see https://tailwindcss.com/docs/outline-style
*/
"outline-style": [{
outline: [...T(), "none", "hidden"]
}],
/**
* Outline Offset
* @see https://tailwindcss.com/docs/outline-offset
*/
"outline-offset": [{
"outline-offset": [x, d, c]
}],
/**
* Outline Width
* @see https://tailwindcss.com/docs/outline-width
*/
"outline-w": [{
outline: ["", x, ce, Z]
}],
/**
* Outline Color
* @see https://tailwindcss.com/docs/outline-color
*/
"outline-color": [{
outline: f()
}],
// ---------------
// --- Effects ---
// ---------------
/**
* Box Shadow
* @see https://tailwindcss.com/docs/box-shadow
*/
shadow: [{
shadow: [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
v,
pe,
fe
]
}],
/**
* Box Shadow Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
*/
"shadow-color": [{
shadow: f()
}],
/**
* Inset Box Shadow
* @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
*/
"inset-shadow": [{
"inset-shadow": ["none", k, pe, fe]
}],
/**
* Inset Box Shadow Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
*/
"inset-shadow-color": [{
"inset-shadow": f()
}],
/**
* Ring Width
* @see https://tailwindcss.com/docs/box-shadow#adding-a-ring
*/
"ring-w": [{
ring: N()
}],
/**
* Ring Width Inset
* @see https://v3.tailwindcss.com/docs/ring-width#inset-rings
* @deprecated since Tailwind CSS v4.0.0
* @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
*/
"ring-w-inset": ["ring-inset"],
/**
* Ring Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
*/
"ring-color": [{
ring: f()
}],
/**
* Ring Offset Width
* @see https://v3.tailwindcss.com/docs/ring-offset-width
* @deprecated since Tailwind CSS v4.0.0
* @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
*/
"ring-offset-w": [{
"ring-offset": [x, Z]
}],
/**
* Ring Offset Color
* @see https://v3.tailwindcss.com/docs/ring-offset-color
* @deprecated since Tailwind CSS v4.0.0
* @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
*/
"ring-offset-color": [{
"ring-offset": f()
}],
/**
* Inset Ring Width
* @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring
*/
"inset-ring-w": [{
"inset-ring": N()
}],
/**
* Inset Ring Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
*/
"inset-ring-color": [{
"inset-ring": f()
}],
/**
* Text Shadow
* @see https://tailwindcss.com/docs/text-shadow
*/
"text-shadow": [{
"text-shadow": ["none", E, pe, fe]
}],
/**
* Text Shadow Color
* @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
*/
"text-shadow-color": [{
"text-shadow": f()
}],
/**
* Opacity
* @see https://tailwindcss.com/docs/opacity
*/
opacity: [{
opacity: [x, d, c]
}],
/**
* Mix Blend Mode
* @see https://tailwindcss.com/docs/mix-blend-mode
*/
"mix-blend": [{
"mix-blend": [...Q(), "plus-darker", "plus-lighter"]
}],
/**
* Background Blend Mode
* @see https://tailwindcss.com/docs/background-blend-mode
*/
"bg-blend": [{
"bg-blend": Q()
}],
/**
* Mask Clip
* @see https://tailwindcss.com/docs/mask-clip
*/
"mask-clip": [{
"mask-clip": ["border", "padding", "content", "fill", "stroke", "view"]
}, "mask-no-clip"],
/**
* Mask Composite
* @see https://tailwindcss.com/docs/mask-composite
*/
"mask-composite": [{
mask: ["add", "subtract", "intersect", "exclude"]
}],
/**
* Mask Image
* @see https://tailwindcss.com/docs/mask-image
*/
"mask-image-linear-pos": [{
"mask-linear": [x]
}],
"mask-image-linear-from-pos": [{
"mask-linear-from": R()
}],
"mask-image-linear-to-pos": [{
"mask-linear-to": R()
}],
"mask-image-linear-from-color": [{
"mask-linear-from": f()
}],
"mask-image-linear-to-color": [{
"mask-linear-to": f()
}],
"mask-image-t-from-pos": [{
"mask-t-from": R()
}],
"mask-image-t-to-pos": [{
"mask-t-to": R()
}],
"mask-image-t-from-color": [{
"mask-t-from": f()
}],
"mask-image-t-to-color": [{
"mask-t-to": f()
}],
"mask-image-r-from-pos": [{
"mask-r-from": R()
}],
"mask-image-r-to-pos": [{
"mask-r-to": R()
}],
"mask-image-r-from-color": [{
"mask-r-from": f()
}],
"mask-image-r-to-color": [{
"mask-r-to": f()
}],
"mask-image-b-from-pos": [{
"mask-b-from": R()
}],
"mask-image-b-to-pos": [{
"mask-b-to": R()
}],
"mask-image-b-from-color": [{
"mask-b-from": f()
}],
"mask-image-b-to-color": [{
"mask-b-to": f()
}],
"mask-image-l-from-pos": [{
"mask-l-from": R()
}],
"mask-image-l-to-pos": [{
"mask-l-to": R()
}],
"mask-image-l-from-color": [{
"mask-l-from": f()
}],
"mask-image-l-to-color": [{
"mask-l-to": f()
}],
"mask-image-x-from-pos": [{
"mask-x-from": R()
}],
"mask-image-x-to-pos": [{
"mask-x-to": R()
}],
"mask-image-x-from-color": [{
"mask-x-from": f()
}],
"mask-image-x-to-color": [{
"mask-x-to": f()
}],
"mask-image-y-from-pos": [{
"mask-y-from": R()
}],
"mask-image-y-to-pos": [{
"mask-y-to": R()
}],
"mask-image-y-from-color": [{
"mask-y-from": f()
}],
"mask-image-y-to-color": [{
"mask-y-to": f()
}],
"mask-image-radial": [{
"mask-radial": [d, c]
}],
"mask-image-radial-from-pos": [{
"mask-radial-from": R()
}],
"mask-image-radial-to-pos": [{
"mask-radial-to": R()
}],
"mask-image-radial-from-color": [{
"mask-radial-from": f()
}],
"mask-image-radial-to-color": [{
"mask-radial-to": f()
}],
"mask-image-radial-shape": [{
"mask-radial": ["circle", "ellipse"]
}],
"mask-image-radial-size": [{
"mask-radial": [{
closest: ["side", "corner"],
farthest: ["side", "corner"]
}]
}],
"mask-image-radial-pos": [{
"mask-radial-at": W()
}],
"mask-image-conic-pos": [{
"mask-conic": [x]
}],
"mask-image-conic-from-pos": [{
"mask-conic-from": R()
}],
"mask-image-conic-to-pos": [{
"mask-conic-to": R()
}],
"mask-image-conic-from-color": [{
"mask-conic-from": f()
}],
"mask-image-conic-to-color": [{
"mask-conic-to": f()
}],
/**
* Mask Mode
* @see https://tailwindcss.com/docs/mask-mode
*/
"mask-mode": [{
mask: ["alpha", "luminance", "match"]
}],
/**
* Mask Origin
* @see https://tailwindcss.com/docs/mask-origin
*/
"mask-origin": [{
"mask-origin": ["border", "padding", "content", "fill", "stroke", "view"]
}],
/**
* Mask Position
* @see https://tailwindcss.com/docs/mask-position
*/
"mask-position": [{
mask: ne()
}],
/**
* Mask Repeat
* @see https://tailwindcss.com/docs/mask-repeat
*/
"mask-repeat": [{
mask: i()
}],
/**
* Mask Size
* @see https://tailwindcss.com/docs/mask-size
*/
"mask-size": [{
mask: g()
}],
/**
* Mask Type
* @see https://tailwindcss.com/docs/mask-type
*/
"mask-type": [{
"mask-type": ["alpha", "luminance"]
}],
/**
* Mask Image
* @see https://tailwindcss.com/docs/mask-image
*/
"mask-image": [{
mask: ["none", d, c]
}],
// ---------------
// --- Filters ---
// ---------------
/**
* Filter
* @see https://tailwindcss.com/docs/filter
*/
filter: [{
filter: [
// Deprecated since Tailwind CSS v3.0.0
"",
"none",
d,
c
]
}],
/**
* Blur
* @see https://tailwindcss.com/docs/blur
*/
blur: [{
blur: S()
}],
/**
* Brightness
* @see https://tailwindcss.com/docs/brightness
*/
brightness: [{
brightness: [x, d, c]
}],
/**
* Contrast
* @see https://tailwindcss.com/docs/contrast
*/
contrast: [{
contrast: [x, d, c]
}],
/**
* Drop Shadow
* @see https://tailwindcss.com/docs/drop-shadow
*/
"drop-shadow": [{
"drop-shadow": [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
M,
pe,
fe
]
}],
/**
* Drop Shadow Color
* @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
*/
"drop-shadow-color": [{
"drop-shadow": f()
}],
/**
* Grayscale
* @see https://tailwindcss.com/docs/grayscale
*/
grayscale: [{
grayscale: ["", x, d, c]
}],
/**
* Hue Rotate
* @see https://tailwindcss.com/docs/hue-rotate
*/
"hue-rotate": [{
"hue-rotate": [x, d, c]
}],
/**
* Invert
* @see https://tailwindcss.com/docs/invert
*/
invert: [{
invert: ["", x, d, c]
}],
/**
* Saturate
* @see https://tailwindcss.com/docs/saturate
*/
saturate: [{
saturate: [x, d, c]
}],
/**
* Sepia
* @see https://tailwindcss.com/docs/sepia
*/
sepia: [{
sepia: ["", x, d, c]
}],
/**
* Backdrop Filter
* @see https://tailwindcss.com/docs/backdrop-filter
*/
"backdrop-filter": [{
"backdrop-filter": [
// Deprecated since Tailwind CSS v3.0.0
"",
"none",
d,
c
]
}],
/**
* Backdrop Blur
* @see https://tailwindcss.com/docs/backdrop-blur
*/
"backdrop-blur": [{
"backdrop-blur": S()
}],
/**
* Backdrop Brightness
* @see https://tailwindcss.com/docs/backdrop-brightness
*/
"backdrop-brightness": [{
"backdrop-brightness": [x, d, c]
}],
/**
* Backdrop Contrast
* @see https://tailwindcss.com/docs/backdrop-contrast
*/
"backdrop-contrast": [{
"backdrop-contrast": [x, d, c]
}],
/**
* Backdrop Grayscale
* @see https://tailwindcss.com/docs/backdrop-grayscale
*/
"backdrop-grayscale": [{
"backdrop-grayscale": ["", x, d, c]
}],
/**
* Backdrop Hue Rotate
* @see https://tailwindcss.com/docs/backdrop-hue-rotate
*/
"backdrop-hue-rotate": [{
"backdrop-hue-rotate": [x, d, c]
}],
/**
* Backdrop Invert
* @see https://tailwindcss.com/docs/backdrop-invert
*/
"backdrop-invert": [{
"backdrop-invert": ["", x, d, c]
}],
/**
* Backdrop Opacity
* @see https://tailwindcss.com/docs/backdrop-opacity
*/
"backdrop-opacity": [{
"backdrop-opacity": [x, d, c]
}],
/**
* Backdrop Saturate
* @see https://tailwindcss.com/docs/backdrop-saturate
*/
"backdrop-saturate": [{
"backdrop-saturate": [x, d, c]
}],
/**
* Backdrop Sepia
* @see https://tailwindcss.com/docs/backdrop-sepia
*/
"backdrop-sepia": [{
"backdrop-sepia": ["", x, d, c]
}],
// --------------
// --- Tables ---
// --------------
/**
* Border Collapse
* @see https://tailwindcss.com/docs/border-collapse
*/
"border-collapse": [{
border: ["collapse", "separate"]
}],
/**
* Border Spacing
* @see https://tailwindcss.com/docs/border-spacing
*/
"border-spacing": [{
"border-spacing": b()
}],
/**
* Border Spacing X
* @see https://tailwindcss.com/docs/border-spacing
*/
"border-spacing-x": [{
"border-spacing-x": b()
}],
/**
* Border Spacing Y
* @see https://tailwindcss.com/docs/border-spacing
*/
"border-spacing-y": [{
"border-spacing-y": b()
}],
/**
* Table Layout
* @see https://tailwindcss.com/docs/table-layout
*/
"table-layout": [{
table: ["auto", "fixed"]
}],
/**
* Caption Side
* @see https://tailwindcss.com/docs/caption-side
*/
caption: [{
caption: ["top", "bottom"]
}],
// ---------------------------------
// --- Transitions and Animation ---
// ---------------------------------
/**
* Transition Property
* @see https://tailwindcss.com/docs/transition-property
*/
transition: [{
transition: ["", "all", "colors", "opacity", "shadow", "transform", "none", d, c]
}],
/**
* Transition Behavior
* @see https://tailwindcss.com/docs/transition-behavior
*/
"transition-behavior": [{
transition: ["normal", "discrete"]
}],
/**
* Transition Duration
* @see https://tailwindcss.com/docs/transition-duration
*/
duration: [{
duration: [x, "initial", d, c]
}],
/**
* Transition Timing Function
* @see https://tailwindcss.com/docs/transition-timing-function
*/
ease: [{
ease: ["linear", "initial", P, d, c]
}],
/**
* Transition Delay
* @see https://tailwindcss.com/docs/transition-delay
*/
delay: [{
delay: [x, d, c]
}],
/**
* Animation
* @see https://tailwindcss.com/docs/animation
*/
animate: [{
animate: ["none", O, d, c]
}],
// ------------------
// --- Transforms ---
// ------------------
/**
* Backface Visibility
* @see https://tailwindcss.com/docs/backface-visibility
*/
backface: [{
backface: ["hidden", "visible"]
}],
/**
* Perspective
* @see https://tailwindcss.com/docs/perspective
*/
perspective: [{
perspective: [j, d, c]
}],
/**
* Perspective Origin
* @see https://tailwindcss.com/docs/perspective-origin
*/
"perspective-origin": [{
"perspective-origin": U()
}],
/**
* Rotate
* @see https://tailwindcss.com/docs/rotate
*/
rotate: [{
rotate: L()
}],
/**
* Rotate X
* @see https://tailwindcss.com/docs/rotate
*/
"rotate-x": [{
"rotate-x": L()
}],
/**
* Rotate Y
* @see https://tailwindcss.com/docs/rotate
*/
"rotate-y": [{
"rotate-y": L()
}],
/**
* Rotate Z
* @see https://tailwindcss.com/docs/rotate
*/
"rotate-z": [{
"rotate-z": L()
}],
/**
* Scale
* @see https://tailwindcss.com/docs/scale
*/
scale: [{
scale: Y()
}],
/**
* Scale X
* @see https://tailwindcss.com/docs/scale
*/
"scale-x": [{
"scale-x": Y()
}],
/**
* Scale Y
* @see https://tailwindcss.com/docs/scale
*/
"scale-y": [{
"scale-y": Y()
}],
/**
* Scale Z
* @see https://tailwindcss.com/docs/scale
*/
"scale-z": [{
"scale-z": Y()
}],
/**
* Scale 3D
* @see https://tailwindcss.com/docs/scale
*/
"scale-3d": ["scale-3d"],
/**
* Skew
* @see https://tailwindcss.com/docs/skew
*/
skew: [{
skew: ae()
}],
/**
* Skew X
* @see https://tailwindcss.com/docs/skew
*/
"skew-x": [{
"skew-x": ae()
}],
/**
* Skew Y
* @see https://tailwindcss.com/docs/skew
*/
"skew-y": [{
"skew-y": ae()
}],
/**
* Transform
* @see https://tailwindcss.com/docs/transform
*/
transform: [{
transform: [d, c, "", "none", "gpu", "cpu"]
}],
/**
* Transform Origin
* @see https://tailwindcss.com/docs/transform-origin
*/
"transform-origin": [{
origin: U()
}],
/**
* Transform Style
* @see https://tailwindcss.com/docs/transform-style
*/
"transform-style": [{
transform: ["3d", "flat"]
}],
/**
* Translate
* @see https://tailwindcss.com/docs/translate
*/
translate: [{
translate: me()
}],
/**
* Translate X
* @see https://tailwindcss.com/docs/translate
*/
"translate-x": [{
"translate-x": me()
}],
/**
* Translate Y
* @see https://tailwindcss.com/docs/translate
*/
"translate-y": [{
"translate-y": me()
}],
/**
* Translate Z
* @see https://tailwindcss.com/docs/translate
*/
"translate-z": [{
"translate-z": me()
}],
/**
* Translate None
* @see https://tailwindcss.com/docs/translate
*/
"translate-none": ["translate-none"],
// ---------------------
// --- Interactivity ---
// ---------------------
/**
* Accent Color
* @see https://tailwindcss.com/docs/accent-color
*/
accent: [{
accent: f()
}],
/**
* Appearance
* @see https://tailwindcss.com/docs/appearance
*/
appearance: [{
appearance: ["none", "auto"]
}],
/**
* Caret Color
* @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
*/
"caret-color": [{
caret: f()
}],
/**
* Color Scheme
* @see https://tailwindcss.com/docs/color-scheme
*/
"color-scheme": [{
scheme: ["normal", "dark", "light", "light-dark", "only-dark", "only-light"]
}],
/**
* Cursor
* @see https://tailwindcss.com/docs/cursor
*/
cursor: [{
cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", d, c]
}],
/**
* Field Sizing
* @see https://tailwindcss.com/docs/field-sizing
*/
"field-sizing": [{
"field-sizing": ["fixed", "content"]
}],
/**
* Pointer Events
* @see https://tailwindcss.com/docs/pointer-events
*/
"pointer-events": [{
"pointer-events": ["auto", "none"]
}],
/**
* Resize
* @see https://tailwindcss.com/docs/resize
*/
resize: [{
resize: ["none", "", "y", "x"]
}],
/**
* Scroll Behavior
* @see https://tailwindcss.com/docs/scroll-behavior
*/
"scroll-behavior": [{
scroll: ["auto", "smooth"]
}],
/**
* Scroll Margin
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-m": [{
"scroll-m": b()
}],
/**
* Scroll Margin X
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mx": [{
"scroll-mx": b()
}],
/**
* Scroll Margin Y
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-my": [{
"scroll-my": b()
}],
/**
* Scroll Margin Start
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-ms": [{
"scroll-ms": b()
}],
/**
* Scroll Margin End
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-me": [{
"scroll-me": b()
}],
/**
* Scroll Margin Top
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mt": [{
"scroll-mt": b()
}],
/**
* Scroll Margin Right
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mr": [{
"scroll-mr": b()
}],
/**
* Scroll Margin Bottom
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mb": [{
"scroll-mb": b()
}],
/**
* Scroll Margin Left
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-ml": [{
"scroll-ml": b()
}],
/**
* Scroll Padding
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-p": [{
"scroll-p": b()
}],
/**
* Scroll Padding X
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-px": [{
"scroll-px": b()
}],
/**
* Scroll Padding Y
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-py": [{
"scroll-py": b()
}],
/**
* Scroll Padding Start
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-ps": [{
"scroll-ps": b()
}],
/**
* Scroll Padding End
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pe": [{
"scroll-pe": b()
}],
/**
* Scroll Padding Top
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pt": [{
"scroll-pt": b()
}],
/**
* Scroll Padding Right
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pr": [{
"scroll-pr": b()
}],
/**
* Scroll Padding Bottom
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pb": [{
"scroll-pb": b()
}],
/**
* Scroll Padding Left
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pl": [{
"scroll-pl": b()
}],
/**
* Scroll Snap Align
* @see https://tailwindcss.com/docs/scroll-snap-align
*/
"snap-align": [{
snap: ["start", "end", "center", "align-none"]
}],
/**
* Scroll Snap Stop
* @see https://tailwindcss.com/docs/scroll-snap-stop
*/
"snap-stop": [{
snap: ["normal", "always"]
}],
/**
* Scroll Snap Type
* @see https://tailwindcss.com/docs/scroll-snap-type
*/
"snap-type": [{
snap: ["none", "x", "y", "both"]
}],
/**
* Scroll Snap Type Strictness
* @see https://tailwindcss.com/docs/scroll-snap-type
*/
"snap-strictness": [{
snap: ["mandatory", "proximity"]
}],
/**
* Touch Action
* @see https://tailwindcss.com/docs/touch-action
*/
touch: [{
touch: ["auto", "none", "manipulation"]
}],
/**
* Touch Action X
* @see https://tailwindcss.com/docs/touch-action
*/
"touch-x": [{
"touch-pan": ["x", "left", "right"]
}],
/**
* Touch Action Y
* @see https://tailwindcss.com/docs/touch-action
*/
"touch-y": [{
"touch-pan": ["y", "up", "down"]
}],
/**
* Touch Action Pinch Zoom
* @see https://tailwindcss.com/docs/touch-action
*/
"touch-pz": ["touch-pinch-zoom"],
/**
* User Select
* @see https://tailwindcss.com/docs/user-select
*/
select: [{
select: ["none", "text", "all", "auto"]
}],
/**
* Will Change
* @see https://tailwindcss.com/docs/will-change
*/
"will-change": [{
"will-change": ["auto", "scroll", "contents", "transform", d, c]
}],
// -----------
// --- SVG ---
// -----------
/**
* Fill
* @see https://tailwindcss.com/docs/fill
*/
fill: [{
fill: ["none", ...f()]
}],
/**
* Stroke Width
* @see https://tailwindcss.com/docs/stroke-width
*/
"stroke-w": [{
stroke: [x, ce, Z, ye]
}],
/**
* Stroke
* @see https://tailwindcss.com/docs/stroke
*/
stroke: [{
stroke: ["none", ...f()]
}],
// ---------------------
// --- Accessibility ---
// ---------------------
/**
* Forced Color Adjust
* @see https://tailwindcss.com/docs/forced-color-adjust
*/
"forced-color-adjust": [{
"forced-color-adjust": ["auto", "none"]
}]
},
conflictingClassGroups: {
overflow: ["overflow-x", "overflow-y"],
overscroll: ["overscroll-x", "overscroll-y"],
inset: ["inset-x", "inset-y", "start", "end", "top", "right", "bottom", "left"],
"inset-x": ["right", "left"],
"inset-y": ["top", "bottom"],
flex: ["basis", "grow", "shrink"],
gap: ["gap-x", "gap-y"],
p: ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"],
px: ["pr", "pl"],
py: ["pt", "pb"],
m: ["mx", "my", "ms", "me", "mt", "mr", "mb", "ml"],
mx: ["mr", "ml"],
my: ["mt", "mb"],
size: ["w", "h"],
"font-size": ["leading"],
"fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
"fvn-ordinal": ["fvn-normal"],
"fvn-slashed-zero": ["fvn-normal"],
"fvn-figure": ["fvn-normal"],
"fvn-spacing": ["fvn-normal"],
"fvn-fraction": ["fvn-normal"],
"line-clamp": ["display", "overflow"],
rounded: ["rounded-s", "rounded-e", "rounded-t", "rounded-r", "rounded-b", "rounded-l", "rounded-ss", "rounded-se", "rounded-ee", "rounded-es", "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl"],
"rounded-s": ["rounded-ss", "rounded-es"],
"rounded-e": ["rounded-se", "rounded-ee"],
"rounded-t": ["rounded-tl", "rounded-tr"],
"rounded-r": ["rounded-tr", "rounded-br"],
"rounded-b": ["rounded-br", "rounded-bl"],
"rounded-l": ["rounded-tl", "rounded-bl"],
"border-spacing": ["border-spacing-x", "border-spacing-y"],
"border-w": ["border-w-x", "border-w-y", "border-w-s", "border-w-e", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
"border-w-x": ["border-w-r", "border-w-l"],
"border-w-y": ["border-w-t", "border-w-b"],
"border-color": ["border-color-x", "border-color-y", "border-color-s", "border-color-e", "border-color-t", "border-color-r", "border-color-b", "border-color-l"],
"border-color-x": ["border-color-r", "border-color-l"],
"border-color-y": ["border-color-t", "border-color-b"],
translate: ["translate-x", "translate-y", "translate-none"],
"translate-none": ["translate", "translate-x", "translate-y", "translate-z"],
"scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
"scroll-mx": ["scroll-mr", "scroll-ml"],
"scroll-my": ["scroll-mt", "scroll-mb"],
"scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
"scroll-px": ["scroll-pr", "scroll-pl"],
"scroll-py": ["scroll-pt", "scroll-pb"],
touch: ["touch-x", "touch-y", "touch-pz"],
"touch-x": ["touch"],
"touch-y": ["touch"],
"touch-pz": ["touch"]
},
conflictingClassGroupModifiers: {
"font-size": ["leading"]
},
orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
};
}, pt = /* @__PURE__ */ Hr(ft);
function bt(...e) {
return pt(Be(e));
}
const gt = Mr(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline"
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
}
);
function be({
className: e,
variant: t,
size: r,
asChild: s = !1,
...n
}) {
const a = s ? Ar : "button";
return /* @__PURE__ */ o.jsx(
a,
{
"data-slot": "button",
className: bt(gt({ variant: t, size: r, className: e })),
...n
}
);
}
function sr({ onNumberClick: e, onDeleteClick: t }) {
const [r, s] = ge([]);
Ge(() => {
n();
}, []);
const n = () => {
const l = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let m = l.length - 1; m > 0; m--) {
const u = Math.floor(Math.random() * (m + 1));
[l[m], l[u]] = [l[u], l[m]];
}
s(l);
}, a = () => {
n();
};
return /* @__PURE__ */ o.jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ o.jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
r.map((l) => /* @__PURE__ */ o.jsx(
be,
{
type: "button",
onClick: () => e(l),
className: "h-16 text-2xl font-medium text-gray-900 hover:bg-gray-50",
variant: "ghost",
children: l
},
l
)),
/* @__PURE__ */ o.jsx(
be,
{
type: "button",
onClick: a,
className: "h-16 text-gray-900 hover:bg-gray-50",
variant: "ghost",
children: /* @__PURE__ */ o.jsx(vr, { className: "size-5" })
}
),
/* @__PURE__ */ o.jsx(
be,
{
type: "button",
onClick: () => e(0),
className: "h-16 text-2xl font-medium bg-white text-gray-900 hover:bg-gray-50",
variant: "ghost",
children: "0"
}
),
/* @__PURE__ */ o.jsx(
be,
{
type: "button",
onClick: t,
className: "h-16 text-gray-900 hover:bg-gray-50",
variant: "ghost",
children: /* @__PURE__ */ o.jsx(kr, { className: "size-5" })
}
)
] }) });
}
sr.propTypes = {
onNumberClick: p.func.isRequired,
onDeleteClick: p.func.isRequired
};
function nr({
selectedCard: e,
password: t,
onClose: r,
onPasswordInput: s,
onPasswordDelete: n
}) {
return /* @__PURE__ */ o.jsxs("div", { className: "absolute inset-0 bg-white z-10 flex flex-col items-center justify-center", children: [
/* @__PURE__ */ o.jsx(
"button",
{
onClick: r,
className: "absolute left-4 top-4 text-gray-500 hover:text-gray-700",
"aria-label": "비밀번호 입력 취소",
children: /* @__PURE__ */ o.jsx(pr, { className: "size-6" })
}
),
/* @__PURE__ */ o.jsxs("div", { className: "mb-6 text-center", children: [
/* @__PURE__ */ o.jsx("h3", { className: "mb-1 text-xl font-bold", children: e.name }),
/* @__PURE__ */ o.jsx("p", { className: "text-sm text-gray-600", children: e.number })
] }),
/* @__PURE__ */ o.jsxs("div", { className: "mb-6", children: [
/* @__PURE__ */ o.jsx("p", { className: "mb-12 text-center text-sm text-gray-600", children: "간편 결제를 위한 6자리 비밀번호를 입력해주세요." }),
/* @__PURE__ */ o.jsx("div", { className: "flex justify-center gap-3", children: [0, 1, 2, 3, 4, 5].map((a) => /* @__PURE__ */ o.jsx("div", { className: "flex items-center justify-center w-6 h-6", children: t.length > a ? /* @__PURE__ */ o.jsx("div", { className: "w-2 h-2 bg-black rounded-full" }) : /* @__PURE__ */ o.jsx("div", { className: "w-6 h-0.5 bg-black" }) }, a)) })
] }),
/* @__PURE__ */ o.jsx("div", { className: "w-64", children: /* @__PURE__ */ o.jsx(sr, { onNumberClick: s, onDeleteClick: n }) })
] });
}
nr.propTypes = {
selectedCard: p.shape({
id: p.string.isRequired,
number: p.string.isRequired,
name: p.string.isRequired,
logo: p.string,
discount: p.number.isRequired
}).isRequired,
password: p.string.isRequired,
onClose: p.func.isRequired,
onPasswordInput: p.func.isRequired,
onPasswordDelete: p.func.isRequired
};
const Le = [
{
id: 1,
name: "카드의정석 EVERY DISCOUNT",
number: "(1234)",
color: "bg-gradient-to-r from-green-600 to-green-700",
logo: "/everydiscount.png",
discount: 10,
benefits: ["온라인 쇼핑몰 10% 할인", "5만원 이상 결제 시 2천원 할인", "해외 직구 무료 배송"]
},
{
id: 2,
name: "현대카드 MX Black Edition2",
number: "(1234)",
color: "bg-gradient-to-r from-orange-300 to-orange-400",
logo: "/hyundaiblack.png",
discount: 5,
benefits: ["프리미엄 서비스 무료 이용", "공항 라운지 무료 이용", "해외 결제 수수료 면제"]
},
{
id: 3,
name: "삼성카드 taptap O",
number: "(1234)",
color: "bg-gradient-to-r from-pink-400 to-pink-500",
logo: "/taptap0.png",
discount: 3,
benefits: ["온라인몰 7% 할인", "생활비 자동이체 할인", "영화 티켓 1+1 혜택"]
},
{
id: 4,
name: "카드의정석 오하CHECK",
number: "(1234)",
color: "bg-gradient-to-r from-gray-800 to-gray-900",
logo: "/ohacheck.png",
discount: 0,
benefits: ["현금 할인", "무이자 할부 최대 12개월", "생일 월 추가 5% 할인"]
}
];
function ht({ paymentInfo: e, onPaymentComplete: t }) {
const r = Se(null);
Se(null), Ge(() => {
r.current && r.current.focus();
}, []);
const s = he(
() => Le.reduce((P, O) => P.discount > O.discount ? P : O),
[]
), [n, a] = ge("select-card"), [l, m] = ge(s), [u, h] = ge(""), v = ee(
(P) => {
if (u.length < 6) {
const O = u + P;
h(O), O.length === 6 && (a("processing"), setTimeout(() => {
a("complete");
}, 2e3));
}
},
[u]
), k = ee(() => {
u.length > 0 && h(u.slice(0, -1));
}, [u]), E = ee((P) => {
m(P);
}, []), M = ee(() => {
l && a("enter-password");
}, [l]), C = ee(() => {
t && (localStorage.setItem("paymentCompleted", "true"), t());
}, [t]), j = he(() => l ? Math.round(e.totalAmount * l.discount / 100) : 0, [l, e.totalAmount]), _ = he(() => e.totalAmount - j, [e.totalAmount, j]);
return ee(() => {
window.close();
}, [n]), /* @__PURE__ */ o.jsxs(
"div",
{
ref: r,
className: `${n === "select-card" ? "sm:max-w-[1000px]" : "sm:max-w-[400px]"} transition-none h-[720px] px-6 pb-6 pt-0 gap-0 border-0 overflow-hidden bg-white`,
role: "dialog",
"aria-modal": "true",
"aria-labelledby": "payment-modal-title",
tabIndex: -1,
children: [
/* @__PURE__ */ o.jsx(Re, { children: /* @__PURE__ */ o.jsx("h2", { id: "payment-modal-title", className: "text-lg leading-none font-semibold sr-only", children: "결제 모달" }) }),
/* @__PURE__ */ o.jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ o.jsx("div", { className: "relative flex items-center justify-center h-16", children: /* @__PURE__ */ o.jsx(We, { className: "text-2xl" }) }),
/* @__PURE__ */ o.jsx("div", { className: "h-px w-19/20 mx-auto bg-gray-200" }),
/* @__PURE__ */ o.jsxs("div", { className: "flex flex-col md:flex-row", children: [
/* @__PURE__ */ o.jsx(
Ue,
{
merchantName: e.merchantName,
productName: e.productName,
quantity: e.quantity,
totalAmount: e.totalAmount
}
),
/* @__PURE__ */ o.jsx(
Ye,
{
cards: Le,
bestDiscountCard: s,
selectedCard: l,
onCardSelect: E,
onProceedToPayment: M
}
)
] }),
n === "enter-password" && l && /* @__PURE__ */ o.jsx(
nr,
{
selectedCard: l,
password: u,
onClose: () => a("select-card"),
onPasswordInput: v,
onPasswordDelete: k
}
),
n === "processing" && /* @__PURE__ */ o.jsxs("div", { className: "absolute inset-0 bg-white z-10 flex flex-col items-center justify-center", children: [
/* @__PURE__ */ o.jsx("div", { className: "mb-4 flex justify-center", children: /* @__PURE__ */ o.jsx("div", { className: "size-12 animate-spin rounded-full border-4 border-gray-200 border-t-blue-600" }) }),
/* @__PURE__ */ o.jsx("h3", { className: "mb-1 text-lg font-medium", children: "결제 처리 중" }),
/* @__PURE__ */ o.jsx("p", { className: "text-sm text-gray-600", children: "잠시만 기다려주세요..." })
] }),
n === "complete" && /* @__PURE__ */ o.jsx("div", { className: "absolute inset-0 bg-white z-10 flex flex-col", children: /* @__PURE__ */ o.jsxs("div", { className: "flex-1 flex flex-col items-center px-6 py-24 max-w-md mx-auto w-full", children: [
/* @__PURE__ */ o.jsx("div", { className: "rounded-full bg-green-100 p-4 mb-4", children: /* @__PURE__ */ o.jsx(xr, { className: "size-8 text-green-500" }) }),
/* @__PURE__ */ o.jsx("h3", { className: "text-xl font-bold mb-1", children: "결제 완료" }),
/* @__PURE__ */ o.jsx("p", { className: "text-gray-600 mb-6 text-center", children: "결제가 성공적으로 완료되었습니다." }),
/* @__PURE__ */ o.jsx("div", { className: "bg-blue-50 rounded-lg p-4 mb-6 w-full text-center", children: /* @__PURE__ */ o.jsx("p", { className: "text-sm text-gray-700", children: "이용해주셔서 감사합니다. 결제 내역은 홈페이지에서 확인하실 수 있습니다." }) }),
/* @__PURE__ */ o.jsxs("div", { className: "bg-gray-100 rounded-lg p-4 w-full mb-6", children: [
/* @__PURE__ */ o.jsxs("div", { className: "flex justify-between py-2", children: [
/* @__PURE__ */ o.jsx("span", { className: "text-gray-700", children: "상점명" }),
/* @__PURE__ */ o.jsx("span", { className: "font-medium text-gray-900", children: e.merchantName })
] }),
/* @__PURE__ */ o.jsxs("div", { className: "flex justify-between py-2", children: [
/* @__PURE__ */ o.jsx("span", { className: "text-gray-700", children: "상품명" }),
/* @__PURE__ */ o.jsx("span", { className: "font-medium text-gray-900", children: e.productName })
] }),
/* @__PURE__ */ o.jsxs("div", { className: "flex justify-between py-2", children: [
/* @__PURE__ */ o.jsx("span", { className: "text-gray-700", children: "수량" }),
/* @__PURE__ */ o.jsxs("span", { className: "font-medium text-gray-900", children: [
e.quantity,
"개"
] })
] }),
/* @__PURE__ */ o.jsxs("div", { className: "flex justify-between py-2", children: [
/* @__PURE__ */ o.jsx("span", { className: "text-gray-700", children: "결제 금액" }),
/* @__PURE__ */ o.jsxs("span", { className: "font-bold text-gray-900", children: [
e.totalAmount.toLocaleString(),
"원"
] })
] }),
/* @__PURE__ */ o.jsxs("div", { className: "flex justify-between py-2", children: [
/* @__PURE__ */ o.jsx("span", { className: "text-gray-700", children: "할인 금액" }),
/* @__PURE__ */ o.jsxs("span", { className: "font-medium text-green-500", children: [
"-",
j.toLocaleString(),
"원"
] })
] }),
/* @__PURE__ */ o.jsxs("div", { className: "flex justify-between py-2 border-t border-gray-200 mt-2 pt-3", children: [
/* @__PURE__ */ o.jsx("span", { className: "text-gray-900 font-bold", children: "최종 결제 금액" }),
/* @__PURE__ */ o.jsxs("span", { className: "font-bold", children: [
_.toLocaleString(),
"원"
] })
] })
] }),
/* @__PURE__ */ o.jsx(
"button",
{
onClick: C,
className: "w-full bg-black hover:bg-gray-800 text-white py-4 font-medium rounded-lg",
"aria-label": "결제 완료 확인",
children: "확인"
}
)
] }) }),
n === "error" && /* @__PURE__ */ o.jsxs("div", { className: "absolute inset-0 bg-white z-10 flex flex-col items-center justify-center", children: [
/* @__PURE__ */ o.jsx("div", { className: "mb-4 flex justify-center", children: /* @__PURE__ */ o.jsx("div", { className: "rounded-full bg-red-100 p-3", children: /* @__PURE__ */ o.jsx(gr, { className: "size-10 text-red-600" }) }) }),
/* @__PURE__ */ o.jsx("h3", { className: "mb-1 text-lg font-medium", children: "결제 실패" }),
/* @__PURE__ */ o.jsx("p", { className: "mb-6 text-sm text-gray-600", children: "결제 처리 중 오류가 발생했습니다." }),
/* @__PURE__ */ o.jsx(
"button",
{
onClick: () => a("select-card"),
className: "px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800",
children: "다시 시도"
}
)
] })
] })
]
}
);
}
ht.propTypes = {
paymentInfo: p.shape({
merchantName: p.string.isRequired,
productName: p.string.isRequired,
quantity: p.number.isRequired,
price: p.number.isRequired,
totalAmount: p.number.isRequired,
orderId: p.string.isRequired
}).isRequired,
onPaymentComplete: p.func
};
export {
ht as P
};
//# sourceMappingURL=payment-modal-DeYpO_p0.mjs.map