@clubmed/trident-ui
Version:
Shared ClubMed React UI components
1,769 lines • 163 kB
JavaScript
import { g as Ht, c as rt } from "../chunks/_commonjsHelpers.js";
import { r as Yt } from "../chunks/plugin.js";
import { COLORS as fr } from "./colors.js";
import { typography as pr } from "./config/typography.js";
import { animationDelay as dr } from "./plugins/animationDelay.js";
import { gridArea as hr } from "./plugins/gridArea.js";
import { hocus as gr } from "./plugins/hocus.js";
import { lineClampSafariFix as mr } from "./plugins/lineClampFix.js";
import { popover as vr } from "./plugins/popover.js";
import { startingStyle as wr } from "./plugins/startingStyle.js";
import { transitionBehavior as br } from "./plugins/transitionBehavior.js";
var Ue, nt;
function Tr() {
if (nt) return Ue;
nt = 1;
var t = /* @__PURE__ */ n(Yt());
function n(b) {
return b && b.__esModule ? b : {
default: b
};
}
return Ue = (0, t.default)(function(e) {
var d = e.matchUtilities, w = e.matchVariant, c = e.theme, g = function(s) {
var l, S, O = (S = (l = s.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)) === null || l === void 0 ? void 0 : l[1]) !== null && S !== void 0 ? S : null;
return O === null ? null : parseFloat(s);
}, r, o = (r = c("containers")) !== null && r !== void 0 ? r : {};
d({
"@container": function(a, s) {
var l = s.modifier;
return {
"container-type": a,
"container-name": l
};
}
}, {
values: {
DEFAULT: "inline-size",
normal: "normal"
},
modifiers: "any"
}), w("@", function() {
var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "", s = (arguments.length > 1 ? arguments[1] : void 0).modifier, l = g(a);
return l !== null ? "@container ".concat(s ?? "", " (min-width: ").concat(a, ")") : [];
}, {
values: o,
sort: function(s, l) {
var S = parseFloat(s.value), O = parseFloat(l.value);
if (S === null || O === null) return 0;
if (S - O !== 0) return S - O;
var i, u = (i = s.modifier) !== null && i !== void 0 ? i : "", f, h = (f = l.modifier) !== null && f !== void 0 ? f : "";
return u === "" && h !== "" ? 1 : u !== "" && h === "" ? -1 : u.localeCompare(h, "en", {
numeric: !0
});
}
});
}, {
theme: {
containers: {
xs: "20rem",
sm: "24rem",
md: "28rem",
lg: "32rem",
xl: "36rem",
"2xl": "42rem",
"3xl": "48rem",
"4xl": "56rem",
"5xl": "64rem",
"6xl": "72rem",
"7xl": "80rem"
}
}
}), Ue;
}
var Sr = Tr();
const _r = /* @__PURE__ */ Ht(Sr);
var We = {}, He = {}, ve = { exports: {} }, it;
function yr() {
if (it) return ve.exports;
it = 1;
var t = String, n = function() {
return { isColorSupported: !1, reset: t, bold: t, dim: t, italic: t, underline: t, inverse: t, hidden: t, strikethrough: t, black: t, red: t, green: t, yellow: t, blue: t, magenta: t, cyan: t, white: t, gray: t, bgBlack: t, bgRed: t, bgGreen: t, bgYellow: t, bgBlue: t, bgMagenta: t, bgCyan: t, bgWhite: t, blackBright: t, redBright: t, greenBright: t, yellowBright: t, blueBright: t, magentaBright: t, cyanBright: t, whiteBright: t, bgBlackBright: t, bgRedBright: t, bgGreenBright: t, bgYellowBright: t, bgBlueBright: t, bgMagentaBright: t, bgCyanBright: t, bgWhiteBright: t };
};
return ve.exports = n(), ve.exports.createColors = n, ve.exports;
}
var ot;
function kr() {
return ot || (ot = 1, (function(t) {
Object.defineProperty(t, "__esModule", {
value: !0
});
function n(r, o) {
for (var a in o) Object.defineProperty(r, a, {
enumerable: !0,
get: o[a]
});
}
n(t, {
dim: function() {
return c;
},
default: function() {
return g;
}
});
const b = /* @__PURE__ */ e(/* @__PURE__ */ yr());
function e(r) {
return r && r.__esModule ? r : {
default: r
};
}
let d = /* @__PURE__ */ new Set();
function w(r, o, a) {
typeof process < "u" && process.env.JEST_WORKER_ID || a && d.has(a) || (a && d.add(a), console.warn(""), o.forEach((s) => console.warn(r, "-", s)));
}
function c(r) {
return b.default.dim(r);
}
const g = {
info(r, o) {
w(b.default.bold(b.default.cyan("info")), ...Array.isArray(r) ? [
r
] : [
o,
r
]);
},
warn(r, o) {
w(b.default.bold(b.default.yellow("warn")), ...Array.isArray(r) ? [
r
] : [
o,
r
]);
},
risk(r, o) {
w(b.default.bold(b.default.magenta("risk")), ...Array.isArray(r) ? [
r
] : [
o,
r
]);
}
};
})(He)), He;
}
var at;
function Er() {
return at || (at = 1, (function(t) {
Object.defineProperty(t, "__esModule", {
value: !0
}), Object.defineProperty(t, "default", {
enumerable: !0,
get: function() {
return d;
}
});
const n = /* @__PURE__ */ b(kr());
function b(w) {
return w && w.__esModule ? w : {
default: w
};
}
function e({ version: w, from: c, to: g }) {
n.default.warn(`${c}-color-renamed`, [
`As of Tailwind CSS ${w}, \`${c}\` has been renamed to \`${g}\`.`,
"Update your configuration file to silence this warning."
]);
}
const d = {
inherit: "inherit",
current: "currentColor",
transparent: "transparent",
black: "#000",
white: "#fff",
slate: {
50: "#f8fafc",
100: "#f1f5f9",
200: "#e2e8f0",
300: "#cbd5e1",
400: "#94a3b8",
500: "#64748b",
600: "#475569",
700: "#334155",
800: "#1e293b",
900: "#0f172a",
950: "#020617"
},
gray: {
50: "#f9fafb",
100: "#f3f4f6",
200: "#e5e7eb",
300: "#d1d5db",
400: "#9ca3af",
500: "#6b7280",
600: "#4b5563",
700: "#374151",
800: "#1f2937",
900: "#111827",
950: "#030712"
},
zinc: {
50: "#fafafa",
100: "#f4f4f5",
200: "#e4e4e7",
300: "#d4d4d8",
400: "#a1a1aa",
500: "#71717a",
600: "#52525b",
700: "#3f3f46",
800: "#27272a",
900: "#18181b",
950: "#09090b"
},
neutral: {
50: "#fafafa",
100: "#f5f5f5",
200: "#e5e5e5",
300: "#d4d4d4",
400: "#a3a3a3",
500: "#737373",
600: "#525252",
700: "#404040",
800: "#262626",
900: "#171717",
950: "#0a0a0a"
},
stone: {
50: "#fafaf9",
100: "#f5f5f4",
200: "#e7e5e4",
300: "#d6d3d1",
400: "#a8a29e",
500: "#78716c",
600: "#57534e",
700: "#44403c",
800: "#292524",
900: "#1c1917",
950: "#0c0a09"
},
red: {
50: "#fef2f2",
100: "#fee2e2",
200: "#fecaca",
300: "#fca5a5",
400: "#f87171",
500: "#ef4444",
600: "#dc2626",
700: "#b91c1c",
800: "#991b1b",
900: "#7f1d1d",
950: "#450a0a"
},
orange: {
50: "#fff7ed",
100: "#ffedd5",
200: "#fed7aa",
300: "#fdba74",
400: "#fb923c",
500: "#f97316",
600: "#ea580c",
700: "#c2410c",
800: "#9a3412",
900: "#7c2d12",
950: "#431407"
},
amber: {
50: "#fffbeb",
100: "#fef3c7",
200: "#fde68a",
300: "#fcd34d",
400: "#fbbf24",
500: "#f59e0b",
600: "#d97706",
700: "#b45309",
800: "#92400e",
900: "#78350f",
950: "#451a03"
},
yellow: {
50: "#fefce8",
100: "#fef9c3",
200: "#fef08a",
300: "#fde047",
400: "#facc15",
500: "#eab308",
600: "#ca8a04",
700: "#a16207",
800: "#854d0e",
900: "#713f12",
950: "#422006"
},
lime: {
50: "#f7fee7",
100: "#ecfccb",
200: "#d9f99d",
300: "#bef264",
400: "#a3e635",
500: "#84cc16",
600: "#65a30d",
700: "#4d7c0f",
800: "#3f6212",
900: "#365314",
950: "#1a2e05"
},
green: {
50: "#f0fdf4",
100: "#dcfce7",
200: "#bbf7d0",
300: "#86efac",
400: "#4ade80",
500: "#22c55e",
600: "#16a34a",
700: "#15803d",
800: "#166534",
900: "#14532d",
950: "#052e16"
},
emerald: {
50: "#ecfdf5",
100: "#d1fae5",
200: "#a7f3d0",
300: "#6ee7b7",
400: "#34d399",
500: "#10b981",
600: "#059669",
700: "#047857",
800: "#065f46",
900: "#064e3b",
950: "#022c22"
},
teal: {
50: "#f0fdfa",
100: "#ccfbf1",
200: "#99f6e4",
300: "#5eead4",
400: "#2dd4bf",
500: "#14b8a6",
600: "#0d9488",
700: "#0f766e",
800: "#115e59",
900: "#134e4a",
950: "#042f2e"
},
cyan: {
50: "#ecfeff",
100: "#cffafe",
200: "#a5f3fc",
300: "#67e8f9",
400: "#22d3ee",
500: "#06b6d4",
600: "#0891b2",
700: "#0e7490",
800: "#155e75",
900: "#164e63",
950: "#083344"
},
sky: {
50: "#f0f9ff",
100: "#e0f2fe",
200: "#bae6fd",
300: "#7dd3fc",
400: "#38bdf8",
500: "#0ea5e9",
600: "#0284c7",
700: "#0369a1",
800: "#075985",
900: "#0c4a6e",
950: "#082f49"
},
blue: {
50: "#eff6ff",
100: "#dbeafe",
200: "#bfdbfe",
300: "#93c5fd",
400: "#60a5fa",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
800: "#1e40af",
900: "#1e3a8a",
950: "#172554"
},
indigo: {
50: "#eef2ff",
100: "#e0e7ff",
200: "#c7d2fe",
300: "#a5b4fc",
400: "#818cf8",
500: "#6366f1",
600: "#4f46e5",
700: "#4338ca",
800: "#3730a3",
900: "#312e81",
950: "#1e1b4b"
},
violet: {
50: "#f5f3ff",
100: "#ede9fe",
200: "#ddd6fe",
300: "#c4b5fd",
400: "#a78bfa",
500: "#8b5cf6",
600: "#7c3aed",
700: "#6d28d9",
800: "#5b21b6",
900: "#4c1d95",
950: "#2e1065"
},
purple: {
50: "#faf5ff",
100: "#f3e8ff",
200: "#e9d5ff",
300: "#d8b4fe",
400: "#c084fc",
500: "#a855f7",
600: "#9333ea",
700: "#7e22ce",
800: "#6b21a8",
900: "#581c87",
950: "#3b0764"
},
fuchsia: {
50: "#fdf4ff",
100: "#fae8ff",
200: "#f5d0fe",
300: "#f0abfc",
400: "#e879f9",
500: "#d946ef",
600: "#c026d3",
700: "#a21caf",
800: "#86198f",
900: "#701a75",
950: "#4a044e"
},
pink: {
50: "#fdf2f8",
100: "#fce7f3",
200: "#fbcfe8",
300: "#f9a8d4",
400: "#f472b6",
500: "#ec4899",
600: "#db2777",
700: "#be185d",
800: "#9d174d",
900: "#831843",
950: "#500724"
},
rose: {
50: "#fff1f2",
100: "#ffe4e6",
200: "#fecdd3",
300: "#fda4af",
400: "#fb7185",
500: "#f43f5e",
600: "#e11d48",
700: "#be123c",
800: "#9f1239",
900: "#881337",
950: "#4c0519"
},
get lightBlue() {
return e({
version: "v2.2",
from: "lightBlue",
to: "sky"
}), this.sky;
},
get warmGray() {
return e({
version: "v3.0",
from: "warmGray",
to: "stone"
}), this.stone;
},
get trueGray() {
return e({
version: "v3.0",
from: "trueGray",
to: "neutral"
}), this.neutral;
},
get coolGray() {
return e({
version: "v3.0",
from: "coolGray",
to: "gray"
}), this.gray;
},
get blueGray() {
return e({
version: "v3.0",
from: "blueGray",
to: "slate"
}), this.slate;
}
};
})(We)), We;
}
var Ye, st;
function Or() {
if (st) return Ye;
st = 1;
let t = Er();
return Ye = (t.__esModule ? t : { default: t }).default, Ye;
}
var Qe, ut;
function Ir() {
if (ut) return Qe;
ut = 1;
const t = Or(), n = (c) => c.toFixed(7).replace(/(\.[0-9]+?)0+$/, "$1").replace(/\.0$/, ""), b = (c) => `${n(c / 16)}rem`, e = (c, g) => `${n(c / g)}em`, d = (c, g) => {
let r = c.replace("#", "");
r = r.length === 3 ? r.replace(/./g, "$&$&") : r;
let o = parseInt(r.substring(0, 2), 16), a = parseInt(r.substring(2, 4), 16), s = parseInt(r.substring(4, 6), 16);
return Number.isNaN(o) || Number.isNaN(a) || Number.isNaN(s) ? `color-mix(in oklab, ${c} ${g}, transparent)` : `rgb(${o} ${a} ${s} / ${g})`;
};
let w = {
sm: {
css: [
{
fontSize: b(14),
lineHeight: n(24 / 14),
p: {
marginTop: e(16, 14),
marginBottom: e(16, 14)
},
'[class~="lead"]': {
fontSize: e(18, 14),
lineHeight: n(28 / 18),
marginTop: e(16, 18),
marginBottom: e(16, 18)
},
blockquote: {
marginTop: e(24, 18),
marginBottom: e(24, 18),
paddingInlineStart: e(20, 18)
},
h1: {
fontSize: e(30, 14),
marginTop: "0",
marginBottom: e(24, 30),
lineHeight: n(36 / 30)
},
h2: {
fontSize: e(20, 14),
marginTop: e(32, 20),
marginBottom: e(16, 20),
lineHeight: n(28 / 20)
},
h3: {
fontSize: e(18, 14),
marginTop: e(28, 18),
marginBottom: e(8, 18),
lineHeight: n(28 / 18)
},
h4: {
marginTop: e(20, 14),
marginBottom: e(8, 14),
lineHeight: n(20 / 14)
},
img: {
marginTop: e(24, 14),
marginBottom: e(24, 14)
},
picture: {
marginTop: e(24, 14),
marginBottom: e(24, 14)
},
"picture > img": {
marginTop: "0",
marginBottom: "0"
},
video: {
marginTop: e(24, 14),
marginBottom: e(24, 14)
},
kbd: {
fontSize: e(12, 14),
borderRadius: b(5),
paddingTop: e(2, 14),
paddingInlineEnd: e(5, 14),
paddingBottom: e(2, 14),
paddingInlineStart: e(5, 14)
},
code: {
fontSize: e(12, 14)
},
"h2 code": {
fontSize: e(18, 20)
},
"h3 code": {
fontSize: e(16, 18)
},
pre: {
fontSize: e(12, 14),
lineHeight: n(20 / 12),
marginTop: e(20, 12),
marginBottom: e(20, 12),
borderRadius: b(4),
paddingTop: e(8, 12),
paddingInlineEnd: e(12, 12),
paddingBottom: e(8, 12),
paddingInlineStart: e(12, 12)
},
ol: {
marginTop: e(16, 14),
marginBottom: e(16, 14),
paddingInlineStart: e(22, 14)
},
ul: {
marginTop: e(16, 14),
marginBottom: e(16, 14),
paddingInlineStart: e(22, 14)
},
li: {
marginTop: e(4, 14),
marginBottom: e(4, 14)
},
"ol > li": {
paddingInlineStart: e(6, 14)
},
"ul > li": {
paddingInlineStart: e(6, 14)
},
"> ul > li p": {
marginTop: e(8, 14),
marginBottom: e(8, 14)
},
"> ul > li > p:first-child": {
marginTop: e(16, 14)
},
"> ul > li > p:last-child": {
marginBottom: e(16, 14)
},
"> ol > li > p:first-child": {
marginTop: e(16, 14)
},
"> ol > li > p:last-child": {
marginBottom: e(16, 14)
},
"ul ul, ul ol, ol ul, ol ol": {
marginTop: e(8, 14),
marginBottom: e(8, 14)
},
dl: {
marginTop: e(16, 14),
marginBottom: e(16, 14)
},
dt: {
marginTop: e(16, 14)
},
dd: {
marginTop: e(4, 14),
paddingInlineStart: e(22, 14)
},
hr: {
marginTop: e(40, 14),
marginBottom: e(40, 14)
},
"hr + *": {
marginTop: "0"
},
"h2 + *": {
marginTop: "0"
},
"h3 + *": {
marginTop: "0"
},
"h4 + *": {
marginTop: "0"
},
table: {
fontSize: e(12, 14),
lineHeight: n(18 / 12)
},
"thead th": {
paddingInlineEnd: e(12, 12),
paddingBottom: e(8, 12),
paddingInlineStart: e(12, 12)
},
"thead th:first-child": {
paddingInlineStart: "0"
},
"thead th:last-child": {
paddingInlineEnd: "0"
},
"tbody td, tfoot td": {
paddingTop: e(8, 12),
paddingInlineEnd: e(12, 12),
paddingBottom: e(8, 12),
paddingInlineStart: e(12, 12)
},
"tbody td:first-child, tfoot td:first-child": {
paddingInlineStart: "0"
},
"tbody td:last-child, tfoot td:last-child": {
paddingInlineEnd: "0"
},
figure: {
marginTop: e(24, 14),
marginBottom: e(24, 14)
},
"figure > *": {
marginTop: "0",
marginBottom: "0"
},
figcaption: {
fontSize: e(12, 14),
lineHeight: n(16 / 12),
marginTop: e(8, 12)
}
},
{
"> :first-child": {
marginTop: "0"
},
"> :last-child": {
marginBottom: "0"
}
}
]
},
base: {
css: [
{
fontSize: b(16),
lineHeight: n(28 / 16),
p: {
marginTop: e(20, 16),
marginBottom: e(20, 16)
},
'[class~="lead"]': {
fontSize: e(20, 16),
lineHeight: n(32 / 20),
marginTop: e(24, 20),
marginBottom: e(24, 20)
},
blockquote: {
marginTop: e(32, 20),
marginBottom: e(32, 20),
paddingInlineStart: e(20, 20)
},
h1: {
fontSize: e(36, 16),
marginTop: "0",
marginBottom: e(32, 36),
lineHeight: n(40 / 36)
},
h2: {
fontSize: e(24, 16),
marginTop: e(48, 24),
marginBottom: e(24, 24),
lineHeight: n(32 / 24)
},
h3: {
fontSize: e(20, 16),
marginTop: e(32, 20),
marginBottom: e(12, 20),
lineHeight: n(32 / 20)
},
h4: {
marginTop: e(24, 16),
marginBottom: e(8, 16),
lineHeight: n(24 / 16)
},
img: {
marginTop: e(32, 16),
marginBottom: e(32, 16)
},
picture: {
marginTop: e(32, 16),
marginBottom: e(32, 16)
},
"picture > img": {
marginTop: "0",
marginBottom: "0"
},
video: {
marginTop: e(32, 16),
marginBottom: e(32, 16)
},
kbd: {
fontSize: e(14, 16),
borderRadius: b(5),
paddingTop: e(3, 16),
paddingInlineEnd: e(6, 16),
paddingBottom: e(3, 16),
paddingInlineStart: e(6, 16)
},
code: {
fontSize: e(14, 16)
},
"h2 code": {
fontSize: e(21, 24)
},
"h3 code": {
fontSize: e(18, 20)
},
pre: {
fontSize: e(14, 16),
lineHeight: n(24 / 14),
marginTop: e(24, 14),
marginBottom: e(24, 14),
borderRadius: b(6),
paddingTop: e(12, 14),
paddingInlineEnd: e(16, 14),
paddingBottom: e(12, 14),
paddingInlineStart: e(16, 14)
},
ol: {
marginTop: e(20, 16),
marginBottom: e(20, 16),
paddingInlineStart: e(26, 16)
},
ul: {
marginTop: e(20, 16),
marginBottom: e(20, 16),
paddingInlineStart: e(26, 16)
},
li: {
marginTop: e(8, 16),
marginBottom: e(8, 16)
},
"ol > li": {
paddingInlineStart: e(6, 16)
},
"ul > li": {
paddingInlineStart: e(6, 16)
},
"> ul > li p": {
marginTop: e(12, 16),
marginBottom: e(12, 16)
},
"> ul > li > p:first-child": {
marginTop: e(20, 16)
},
"> ul > li > p:last-child": {
marginBottom: e(20, 16)
},
"> ol > li > p:first-child": {
marginTop: e(20, 16)
},
"> ol > li > p:last-child": {
marginBottom: e(20, 16)
},
"ul ul, ul ol, ol ul, ol ol": {
marginTop: e(12, 16),
marginBottom: e(12, 16)
},
dl: {
marginTop: e(20, 16),
marginBottom: e(20, 16)
},
dt: {
marginTop: e(20, 16)
},
dd: {
marginTop: e(8, 16),
paddingInlineStart: e(26, 16)
},
hr: {
marginTop: e(48, 16),
marginBottom: e(48, 16)
},
"hr + *": {
marginTop: "0"
},
"h2 + *": {
marginTop: "0"
},
"h3 + *": {
marginTop: "0"
},
"h4 + *": {
marginTop: "0"
},
table: {
fontSize: e(14, 16),
lineHeight: n(24 / 14)
},
"thead th": {
paddingInlineEnd: e(8, 14),
paddingBottom: e(8, 14),
paddingInlineStart: e(8, 14)
},
"thead th:first-child": {
paddingInlineStart: "0"
},
"thead th:last-child": {
paddingInlineEnd: "0"
},
"tbody td, tfoot td": {
paddingTop: e(8, 14),
paddingInlineEnd: e(8, 14),
paddingBottom: e(8, 14),
paddingInlineStart: e(8, 14)
},
"tbody td:first-child, tfoot td:first-child": {
paddingInlineStart: "0"
},
"tbody td:last-child, tfoot td:last-child": {
paddingInlineEnd: "0"
},
figure: {
marginTop: e(32, 16),
marginBottom: e(32, 16)
},
"figure > *": {
marginTop: "0",
marginBottom: "0"
},
figcaption: {
fontSize: e(14, 16),
lineHeight: n(20 / 14),
marginTop: e(12, 14)
}
},
{
"> :first-child": {
marginTop: "0"
},
"> :last-child": {
marginBottom: "0"
}
}
]
},
lg: {
css: [
{
fontSize: b(18),
lineHeight: n(32 / 18),
p: {
marginTop: e(24, 18),
marginBottom: e(24, 18)
},
'[class~="lead"]': {
fontSize: e(22, 18),
lineHeight: n(32 / 22),
marginTop: e(24, 22),
marginBottom: e(24, 22)
},
blockquote: {
marginTop: e(40, 24),
marginBottom: e(40, 24),
paddingInlineStart: e(24, 24)
},
h1: {
fontSize: e(48, 18),
marginTop: "0",
marginBottom: e(40, 48),
lineHeight: n(48 / 48)
},
h2: {
fontSize: e(30, 18),
marginTop: e(56, 30),
marginBottom: e(32, 30),
lineHeight: n(40 / 30)
},
h3: {
fontSize: e(24, 18),
marginTop: e(40, 24),
marginBottom: e(16, 24),
lineHeight: n(36 / 24)
},
h4: {
marginTop: e(32, 18),
marginBottom: e(8, 18),
lineHeight: n(28 / 18)
},
img: {
marginTop: e(32, 18),
marginBottom: e(32, 18)
},
picture: {
marginTop: e(32, 18),
marginBottom: e(32, 18)
},
"picture > img": {
marginTop: "0",
marginBottom: "0"
},
video: {
marginTop: e(32, 18),
marginBottom: e(32, 18)
},
kbd: {
fontSize: e(16, 18),
borderRadius: b(5),
paddingTop: e(4, 18),
paddingInlineEnd: e(8, 18),
paddingBottom: e(4, 18),
paddingInlineStart: e(8, 18)
},
code: {
fontSize: e(16, 18)
},
"h2 code": {
fontSize: e(26, 30)
},
"h3 code": {
fontSize: e(21, 24)
},
pre: {
fontSize: e(16, 18),
lineHeight: n(28 / 16),
marginTop: e(32, 16),
marginBottom: e(32, 16),
borderRadius: b(6),
paddingTop: e(16, 16),
paddingInlineEnd: e(24, 16),
paddingBottom: e(16, 16),
paddingInlineStart: e(24, 16)
},
ol: {
marginTop: e(24, 18),
marginBottom: e(24, 18),
paddingInlineStart: e(28, 18)
},
ul: {
marginTop: e(24, 18),
marginBottom: e(24, 18),
paddingInlineStart: e(28, 18)
},
li: {
marginTop: e(12, 18),
marginBottom: e(12, 18)
},
"ol > li": {
paddingInlineStart: e(8, 18)
},
"ul > li": {
paddingInlineStart: e(8, 18)
},
"> ul > li p": {
marginTop: e(16, 18),
marginBottom: e(16, 18)
},
"> ul > li > p:first-child": {
marginTop: e(24, 18)
},
"> ul > li > p:last-child": {
marginBottom: e(24, 18)
},
"> ol > li > p:first-child": {
marginTop: e(24, 18)
},
"> ol > li > p:last-child": {
marginBottom: e(24, 18)
},
"ul ul, ul ol, ol ul, ol ol": {
marginTop: e(16, 18),
marginBottom: e(16, 18)
},
dl: {
marginTop: e(24, 18),
marginBottom: e(24, 18)
},
dt: {
marginTop: e(24, 18)
},
dd: {
marginTop: e(12, 18),
paddingInlineStart: e(28, 18)
},
hr: {
marginTop: e(56, 18),
marginBottom: e(56, 18)
},
"hr + *": {
marginTop: "0"
},
"h2 + *": {
marginTop: "0"
},
"h3 + *": {
marginTop: "0"
},
"h4 + *": {
marginTop: "0"
},
table: {
fontSize: e(16, 18),
lineHeight: n(24 / 16)
},
"thead th": {
paddingInlineEnd: e(12, 16),
paddingBottom: e(12, 16),
paddingInlineStart: e(12, 16)
},
"thead th:first-child": {
paddingInlineStart: "0"
},
"thead th:last-child": {
paddingInlineEnd: "0"
},
"tbody td, tfoot td": {
paddingTop: e(12, 16),
paddingInlineEnd: e(12, 16),
paddingBottom: e(12, 16),
paddingInlineStart: e(12, 16)
},
"tbody td:first-child, tfoot td:first-child": {
paddingInlineStart: "0"
},
"tbody td:last-child, tfoot td:last-child": {
paddingInlineEnd: "0"
},
figure: {
marginTop: e(32, 18),
marginBottom: e(32, 18)
},
"figure > *": {
marginTop: "0",
marginBottom: "0"
},
figcaption: {
fontSize: e(16, 18),
lineHeight: n(24 / 16),
marginTop: e(16, 16)
}
},
{
"> :first-child": {
marginTop: "0"
},
"> :last-child": {
marginBottom: "0"
}
}
]
},
xl: {
css: [
{
fontSize: b(20),
lineHeight: n(36 / 20),
p: {
marginTop: e(24, 20),
marginBottom: e(24, 20)
},
'[class~="lead"]': {
fontSize: e(24, 20),
lineHeight: n(36 / 24),
marginTop: e(24, 24),
marginBottom: e(24, 24)
},
blockquote: {
marginTop: e(48, 30),
marginBottom: e(48, 30),
paddingInlineStart: e(32, 30)
},
h1: {
fontSize: e(56, 20),
marginTop: "0",
marginBottom: e(48, 56),
lineHeight: n(56 / 56)
},
h2: {
fontSize: e(36, 20),
marginTop: e(56, 36),
marginBottom: e(32, 36),
lineHeight: n(40 / 36)
},
h3: {
fontSize: e(30, 20),
marginTop: e(48, 30),
marginBottom: e(20, 30),
lineHeight: n(40 / 30)
},
h4: {
marginTop: e(36, 20),
marginBottom: e(12, 20),
lineHeight: n(32 / 20)
},
img: {
marginTop: e(40, 20),
marginBottom: e(40, 20)
},
picture: {
marginTop: e(40, 20),
marginBottom: e(40, 20)
},
"picture > img": {
marginTop: "0",
marginBottom: "0"
},
video: {
marginTop: e(40, 20),
marginBottom: e(40, 20)
},
kbd: {
fontSize: e(18, 20),
borderRadius: b(5),
paddingTop: e(5, 20),
paddingInlineEnd: e(8, 20),
paddingBottom: e(5, 20),
paddingInlineStart: e(8, 20)
},
code: {
fontSize: e(18, 20)
},
"h2 code": {
fontSize: e(31, 36)
},
"h3 code": {
fontSize: e(27, 30)
},
pre: {
fontSize: e(18, 20),
lineHeight: n(32 / 18),
marginTop: e(36, 18),
marginBottom: e(36, 18),
borderRadius: b(8),
paddingTop: e(20, 18),
paddingInlineEnd: e(24, 18),
paddingBottom: e(20, 18),
paddingInlineStart: e(24, 18)
},
ol: {
marginTop: e(24, 20),
marginBottom: e(24, 20),
paddingInlineStart: e(32, 20)
},
ul: {
marginTop: e(24, 20),
marginBottom: e(24, 20),
paddingInlineStart: e(32, 20)
},
li: {
marginTop: e(12, 20),
marginBottom: e(12, 20)
},
"ol > li": {
paddingInlineStart: e(8, 20)
},
"ul > li": {
paddingInlineStart: e(8, 20)
},
"> ul > li p": {
marginTop: e(16, 20),
marginBottom: e(16, 20)
},
"> ul > li > p:first-child": {
marginTop: e(24, 20)
},
"> ul > li > p:last-child": {
marginBottom: e(24, 20)
},
"> ol > li > p:first-child": {
marginTop: e(24, 20)
},
"> ol > li > p:last-child": {
marginBottom: e(24, 20)
},
"ul ul, ul ol, ol ul, ol ol": {
marginTop: e(16, 20),
marginBottom: e(16, 20)
},
dl: {
marginTop: e(24, 20),
marginBottom: e(24, 20)
},
dt: {
marginTop: e(24, 20)
},
dd: {
marginTop: e(12, 20),
paddingInlineStart: e(32, 20)
},
hr: {
marginTop: e(56, 20),
marginBottom: e(56, 20)
},
"hr + *": {
marginTop: "0"
},
"h2 + *": {
marginTop: "0"
},
"h3 + *": {
marginTop: "0"
},
"h4 + *": {
marginTop: "0"
},
table: {
fontSize: e(18, 20),
lineHeight: n(28 / 18)
},
"thead th": {
paddingInlineEnd: e(12, 18),
paddingBottom: e(16, 18),
paddingInlineStart: e(12, 18)
},
"thead th:first-child": {
paddingInlineStart: "0"
},
"thead th:last-child": {
paddingInlineEnd: "0"
},
"tbody td, tfoot td": {
paddingTop: e(16, 18),
paddingInlineEnd: e(12, 18),
paddingBottom: e(16, 18),
paddingInlineStart: e(12, 18)
},
"tbody td:first-child, tfoot td:first-child": {
paddingInlineStart: "0"
},
"tbody td:last-child, tfoot td:last-child": {
paddingInlineEnd: "0"
},
figure: {
marginTop: e(40, 20),
marginBottom: e(40, 20)
},
"figure > *": {
marginTop: "0",
marginBottom: "0"
},
figcaption: {
fontSize: e(18, 20),
lineHeight: n(28 / 18),
marginTop: e(18, 18)
}
},
{
"> :first-child": {
marginTop: "0"
},
"> :last-child": {
marginBottom: "0"
}
}
]
},
"2xl": {
css: [
{
fontSize: b(24),
lineHeight: n(40 / 24),
p: {
marginTop: e(32, 24),
marginBottom: e(32, 24)
},
'[class~="lead"]': {
fontSize: e(30, 24),
lineHeight: n(44 / 30),
marginTop: e(32, 30),
marginBottom: e(32, 30)
},
blockquote: {
marginTop: e(64, 36),
marginBottom: e(64, 36),
paddingInlineStart: e(40, 36)
},
h1: {
fontSize: e(64, 24),
marginTop: "0",
marginBottom: e(56, 64),
lineHeight: n(64 / 64)
},
h2: {
fontSize: e(48, 24),
marginTop: e(72, 48),
marginBottom: e(40, 48),
lineHeight: n(52 / 48)
},
h3: {
fontSize: e(36, 24),
marginTop: e(56, 36),
marginBottom: e(24, 36),
lineHeight: n(44 / 36)
},
h4: {
marginTop: e(40, 24),
marginBottom: e(16, 24),
lineHeight: n(36 / 24)
},
img: {
marginTop: e(48, 24),
marginBottom: e(48, 24)
},
picture: {
marginTop: e(48, 24),
marginBottom: e(48, 24)
},
"picture > img": {
marginTop: "0",
marginBottom: "0"
},
video: {
marginTop: e(48, 24),
marginBottom: e(48, 24)
},
kbd: {
fontSize: e(20, 24),
borderRadius: b(6),
paddingTop: e(6, 24),
paddingInlineEnd: e(8, 24),
paddingBottom: e(6, 24),
paddingInlineStart: e(8, 24)
},
code: {
fontSize: e(20, 24)
},
"h2 code": {
fontSize: e(42, 48)
},
"h3 code": {
fontSize: e(32, 36)
},
pre: {
fontSize: e(20, 24),
lineHeight: n(36 / 20),
marginTop: e(40, 20),
marginBottom: e(40, 20),
borderRadius: b(8),
paddingTop: e(24, 20),
paddingInlineEnd: e(32, 20),
paddingBottom: e(24, 20),
paddingInlineStart: e(32, 20)
},
ol: {
marginTop: e(32, 24),
marginBottom: e(32, 24),
paddingInlineStart: e(38, 24)
},
ul: {
marginTop: e(32, 24),
marginBottom: e(32, 24),
paddingInlineStart: e(38, 24)
},
li: {
marginTop: e(12, 24),
marginBottom: e(12, 24)
},
"ol > li": {
paddingInlineStart: e(10, 24)
},
"ul > li": {
paddingInlineStart: e(10, 24)
},
"> ul > li p": {
marginTop: e(20, 24),
marginBottom: e(20, 24)
},
"> ul > li > p:first-child": {
marginTop: e(32, 24)
},
"> ul > li > p:last-child": {
marginBottom: e(32, 24)
},
"> ol > li > p:first-child": {
marginTop: e(32, 24)
},
"> ol > li > p:last-child": {
marginBottom: e(32, 24)
},
"ul ul, ul ol, ol ul, ol ol": {
marginTop: e(16, 24),
marginBottom: e(16, 24)
},
dl: {
marginTop: e(32, 24),
marginBottom: e(32, 24)
},
dt: {
marginTop: e(32, 24)
},
dd: {
marginTop: e(12, 24),
paddingInlineStart: e(38, 24)
},
hr: {
marginTop: e(72, 24),
marginBottom: e(72, 24)
},
"hr + *": {
marginTop: "0"
},
"h2 + *": {
marginTop: "0"
},
"h3 + *": {
marginTop: "0"
},
"h4 + *": {
marginTop: "0"
},
table: {
fontSize: e(20, 24),
lineHeight: n(28 / 20)
},
"thead th": {
paddingInlineEnd: e(12, 20),
paddingBottom: e(16, 20),
paddingInlineStart: e(12, 20)
},
"thead th:first-child": {
paddingInlineStart: "0"
},
"thead th:last-child": {
paddingInlineEnd: "0"
},
"tbody td, tfoot td": {
paddingTop: e(16, 20),
paddingInlineEnd: e(12, 20),
paddingBottom: e(16, 20),
paddingInlineStart: e(12, 20)
},
"tbody td:first-child, tfoot td:first-child": {
paddingInlineStart: "0"
},
"tbody td:last-child, tfoot td:last-child": {
paddingInlineEnd: "0"
},
figure: {
marginTop: e(48, 24),
marginBottom: e(48, 24)
},
"figure > *": {
marginTop: "0",
marginBottom: "0"
},
figcaption: {
fontSize: e(20, 24),
lineHeight: n(32 / 20),
marginTop: e(20, 20)
}
},
{
"> :first-child": {
marginTop: "0"
},
"> :last-child": {
marginBottom: "0"
}
}
]
},
// Gray color themes
slate: {
css: {
"--tw-prose-body": t.slate[700],
"--tw-prose-headings": t.slate[900],
"--tw-prose-lead": t.slate[600],
"--tw-prose-links": t.slate[900],
"--tw-prose-bold": t.slate[900],
"--tw-prose-counters": t.slate[500],
"--tw-prose-bullets": t.slate[300],
"--tw-prose-hr": t.slate[200],
"--tw-prose-quotes": t.slate[900],
"--tw-prose-quote-borders": t.slate[200],
"--tw-prose-captions": t.slate[500],
"--tw-prose-kbd": t.slate[900],
"--tw-prose-kbd-shadows": d(t.slate[900], "10%"),
"--tw-prose-code": t.slate[900],
"--tw-prose-pre-code": t.slate[200],
"--tw-prose-pre-bg": t.slate[800],
"--tw-prose-th-borders": t.slate[300],
"--tw-prose-td-borders": t.slate[200],
"--tw-prose-invert-body": t.slate[300],
"--tw-prose-invert-headings": t.white,
"--tw-prose-invert-lead": t.slate[400],
"--tw-prose-invert-links": t.white,
"--tw-prose-invert-bold": t.white,
"--tw-prose-invert-counters": t.slate[400],
"--tw-prose-invert-bullets": t.slate[600],
"--tw-prose-invert-hr": t.slate[700],
"--tw-prose-invert-quotes": t.slate[100],
"--tw-prose-invert-quote-borders": t.slate[700],
"--tw-prose-invert-captions": t.slate[400],
"--tw-prose-invert-kbd": t.white,
"--tw-prose-invert-kbd-shadows": d(t.white, "10%"),
"--tw-prose-invert-code": t.white,
"--tw-prose-invert-pre-code": t.slate[300],
"--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
"--tw-prose-invert-th-borders": t.slate[600],
"--tw-prose-invert-td-borders": t.slate[700]
}
},
gray: {
css: {
"--tw-prose-body": t.gray[700],
"--tw-prose-headings": t.gray[900],
"--tw-prose-lead": t.gray[600],
"--tw-prose-links": t.gray[900],
"--tw-prose-bold": t.gray[900],
"--tw-prose-counters": t.gray[500],
"--tw-prose-bullets": t.gray[300],
"--tw-prose-hr": t.gray[200],
"--tw-prose-quotes": t.gray[900],
"--tw-prose-quote-borders": t.gray[200],
"--tw-prose-captions": t.gray[500],
"--tw-prose-kbd": t.gray[900],
"--tw-prose-kbd-shadows": d(t.gray[900], "10%"),
"--tw-prose-code": t.gray[900],
"--tw-prose-pre-code": t.gray[200],
"--tw-prose-pre-bg": t.gray[800],
"--tw-prose-th-borders": t.gray[300],
"--tw-prose-td-borders": t.gray[200],
"--tw-prose-invert-body": t.gray[300],
"--tw-prose-invert-headings": t.white,
"--tw-prose-invert-lead": t.gray[400],
"--tw-prose-invert-links": t.white,
"--tw-prose-invert-bold": t.white,
"--tw-prose-invert-counters": t.gray[400],
"--tw-prose-invert-bullets": t.gray[600],
"--tw-prose-invert-hr": t.gray[700],
"--tw-prose-invert-quotes": t.gray[100],
"--tw-prose-invert-quote-borders": t.gray[700],
"--tw-prose-invert-captions": t.gray[400],
"--tw-prose-invert-kbd": t.white,
"--tw-prose-invert-kbd-shadows": d(t.white, "10%"),
"--tw-prose-invert-code": t.white,
"--tw-prose-invert-pre-code": t.gray[300],
"--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
"--tw-prose-invert-th-borders": t.gray[600],
"--tw-prose-invert-td-borders": t.gray[700]
}
},
zinc: {
css: {
"--tw-prose-body": t.zinc[700],
"--tw-prose-headings": t.zinc[900],
"--tw-prose-lead": t.zinc[600],
"--tw-prose-links": t.zinc[900],
"--tw-prose-bold": t.zinc[900],
"--tw-prose-counters": t.zinc[500],
"--tw-prose-bullets": t.zinc[300],
"--tw-prose-hr": t.zinc[200],
"--tw-prose-quotes": t.zinc[900],
"--tw-prose-quote-borders": t.zinc[200],
"--tw-prose-captions": t.zinc[500],
"--tw-prose-kbd": t.zinc[900],
"--tw-prose-kbd-shadows": d(t.zinc[900], "10%"),
"--tw-prose-code": t.zinc[900],
"--tw-prose-pre-code": t.zinc[200],
"--tw-prose-pre-bg": t.zinc[800],
"--tw-prose-th-borders": t.zinc[300],
"--tw-prose-td-borders": t.zinc[200],
"--tw-prose-invert-body": t.zinc[300],
"--tw-prose-invert-headings": t.white,
"--tw-prose-invert-lead": t.zinc[400],
"--tw-prose-invert-links": t.white,
"--tw-prose-invert-bold": t.white,
"--tw-prose-invert-counters": t.zinc[400],
"--tw-prose-invert-bullets": t.zinc[600],
"--tw-prose-invert-hr": t.zinc[700],
"--tw-prose-invert-quotes": t.zinc[100],
"--tw-prose-invert-quote-borders": t.zinc[700],
"--tw-prose-invert-captions": t.zinc[400],
"--tw-prose-invert-kbd": t.white,
"--tw-prose-invert-kbd-shadows": d(t.white, "10%"),
"--tw-prose-invert-code": t.white,
"--tw-prose-invert-pre-code": t.zinc[300],
"--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
"--tw-prose-invert-th-borders": t.zinc[600],
"--tw-prose-invert-td-borders": t.zinc[700]
}
},
neutral: {
css: {
"--tw-prose-body": t.neutral[700],
"--tw-prose-headings": t.neutral[900],
"--tw-prose-lead": t.neutral[600],
"--tw-prose-links": t.neutral[900],
"--tw-prose-bold": t.neutral[900],
"--tw-prose-counters": t.neutral[500],
"--tw-prose-bullets": t.neutral[300],
"--tw-prose-hr": t.neutral[200],
"--tw-prose-quotes": t.neutral[900],
"--tw-prose-quote-borders": t.neutral[200],
"--tw-prose-captions": t.neutral[500],
"--tw-prose-kbd": t.neutral[900],
"--tw-prose-kbd-shadows": d(t.neutral[900], "10%"),
"--tw-prose-code": t.neutral[900],
"--tw-prose-pre-code": t.neutral[200],
"--tw-prose-pre-bg": t.neutral[800],
"--tw-prose-th-borders": t.neutral[300],
"--tw-prose-td-borders": t.neutral[200],
"--tw-prose-invert-body": t.neutral[300],
"--tw-prose-invert-headings": t.white,
"--tw-prose-invert-lead": t.neutral[400],
"--tw-prose-invert-links": t.white,
"--tw-prose-invert-bold": t.white,
"--tw-prose-invert-counters": t.neutral[400],
"--tw-prose-invert-bullets": t.neutral[600],
"--tw-prose-invert-hr": t.neutral[700],
"--tw-prose-invert-quotes": t.neutral[100],
"--tw-prose-invert-quote-borders": t.neutral[700],
"--tw-prose-invert-captions": t.neutral[400],
"--tw-prose-invert-kbd": t.white,
"--tw-prose-invert-kbd-shadows": d(t.white, "10%"),
"--tw-prose-invert-code": t.white,
"--tw-prose-invert-pre-code": t.neutral[300],
"--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
"--tw-prose-invert-th-borders": t.neutral[600],
"--tw-prose-invert-td-borders": t.neutral[700]
}
},
stone: {
css: {
"--tw-prose-body": t.stone[700],
"--tw-prose-headings": t.stone[900],
"--tw-prose-lead": t.stone[600],
"--tw-prose-links": t.stone[900],
"--tw-prose-bold": t.stone[900],
"--tw-prose-counters": t.stone[500],
"--tw-prose-bullets": t.stone[300],
"--tw-prose-hr": t.stone[200],
"--tw-prose-quotes": t.stone[900],
"--tw-prose-quote-borders": t.stone[200],
"--tw-prose-captions": t.stone[500],
"--tw-prose-kbd": t.stone[900],
"--tw-prose-kbd-shadows": d(t.stone[900], "10%"),
"--tw-prose-code": t.stone[900],
"--tw-prose-pre-code": t.stone[200],
"--tw-prose-pre-bg": t.stone[800],
"--tw-prose-th-borders": t.stone[300],
"--tw-prose-td-borders": t.stone[200],
"--tw-prose-invert-body": t.stone[300],
"--tw-prose-invert-headings": t.white,
"--tw-prose-invert-lead": t.stone[400],
"--tw-prose-invert-links": t.white,
"--tw-prose-invert-bold": t.white,
"--tw-prose-invert-counters": t.stone[400],
"--tw-prose-invert-bullets": t.stone[600],
"--tw-prose-invert-hr": t.stone[700],
"--tw-prose-invert-quotes": t.stone[100],
"--tw-prose-invert-quote-borders": t.stone[700],
"--tw-prose-invert-captions": t.stone[400],
"--tw-prose-invert-kbd": t.white,
"--tw-prose-invert-kbd-shadows": d(t.white, "10%"),
"--tw-prose-invert-code": t.white,
"--tw-prose-invert-pre-code": t.stone[300],
"--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
"--tw-prose-invert-th-borders": t.stone[600],
"--tw-prose-invert-td-borders": t.stone[700]
}
},
// Link-only themes (for backward compatibility)
red: {
css: {
"--tw-prose-links": t.red[600],
"--tw-prose-invert-links": t.red[500]
}
},
orange: {
css: {
"--tw-prose-links": t.orange[600],
"--tw-prose-invert-links": t.orange[500]
}
},
amber: {
css: {
"--tw-prose-links": t.amber[600],
"--tw-prose-invert-links": t.amber[500]
}
},
yellow: {
css: {
"--tw-prose-links": t.yellow[600],
"--tw-prose-invert-links": t.yellow[500]
}
},
lime: {
css