markdown-flow-ui 0.1.81-beta.12 → 0.1.81-beta.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/hast-util-to-jsx-runtime@2.3.6/node_modules/hast-util-to-jsx-runtime/lib/index.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-input@1.8.0_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-input/es/BaseInput.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-textarea@1.10.2_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-textarea/es/ResizableTextArea.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-textarea@1.10.2_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-textarea/es/TextArea.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-textarea@1.10.2_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-textarea/es/index.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-flow@0.1.6/node_modules/remark-flow/dist/remark-custom-variable.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-flow@0.1.6/node_modules/remark-flow/dist/remark-interaction.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/unified@11.0.5/node_modules/unified/lib/index.js +1 -1
- package/dist/_virtual/index3.js +5 -4
- package/dist/_virtual/index3.js.map +1 -1
- package/dist/_virtual/index4.js +4 -5
- package/dist/_virtual/index4.js.map +1 -1
- package/dist/_virtual/index6.js +4 -4
- package/dist/_virtual/index7.js +4 -4
- package/dist/components/ContentRender/ContentRender.js +173 -116
- package/dist/components/ContentRender/ContentRender.js.map +1 -1
- package/dist/components/ContentRender/ContentRender.stories.d.ts +1 -0
- package/dist/components/ContentRender/IframeSandbox.d.ts +7 -0
- package/dist/components/ContentRender/IframeSandbox.js +60 -0
- package/dist/components/ContentRender/IframeSandbox.js.map +1 -0
- package/dist/components/ContentRender/SandboxApp.d.ts +6 -0
- package/dist/components/ContentRender/SandboxApp.js +21 -0
- package/dist/components/ContentRender/SandboxApp.js.map +1 -0
- package/dist/components/ui/inputGroup/textarea.js +1 -1
- package/dist/markdown-flow-ui-lib.css +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import { stringify as w } from "../../../../comma-separated-tokens@2.0.3/node_mo
|
|
|
2
2
|
import { ok as u } from "../../../../devlop@1.1.0/node_modules/devlop/lib/default.js";
|
|
3
3
|
import { svg as m, html as C } from "../../../../property-information@7.1.0/node_modules/property-information/index.js";
|
|
4
4
|
import { stringify as N } from "../../../../space-separated-tokens@2.0.2/node_modules/space-separated-tokens/index.js";
|
|
5
|
-
import S from "../../../../../../../../../_virtual/
|
|
5
|
+
import S from "../../../../../../../../../_virtual/index7.js";
|
|
6
6
|
import { whitespace as j } from "../../../../hast-util-whitespace@3.0.0/node_modules/hast-util-whitespace/lib/index.js";
|
|
7
7
|
import { name as x } from "../../../../estree-util-is-identifier-name@3.0.0/node_modules/estree-util-is-identifier-name/lib/index.js";
|
|
8
8
|
import { VFileMessage as h } from "../../../../vfile-message@4.0.3/node_modules/vfile-message/lib/index.js";
|
|
@@ -2,7 +2,7 @@ import $ from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/hel
|
|
|
2
2
|
import oe from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/extends.js";
|
|
3
3
|
import r from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/defineProperty.js";
|
|
4
4
|
import te from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/typeof.js";
|
|
5
|
-
import d from "../../../../../../../../../_virtual/
|
|
5
|
+
import d from "../../../../../../../../../_virtual/index3.js";
|
|
6
6
|
import l, { useRef as q, cloneElement as ie } from "react";
|
|
7
7
|
import { hasPrefixSuffix as re, hasAddon as de } from "./utils/commonUtils.js";
|
|
8
8
|
var xe = /* @__PURE__ */ l.forwardRef(function(e, z) {
|
|
@@ -4,7 +4,7 @@ import w from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/hel
|
|
|
4
4
|
import J from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/typeof.js";
|
|
5
5
|
import s from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/slicedToArray.js";
|
|
6
6
|
import K from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js";
|
|
7
|
-
import Q from "../../../../../../../../../_virtual/
|
|
7
|
+
import Q from "../../../../../../../../../_virtual/index3.js";
|
|
8
8
|
import ee from "../../../../rc-resize-observer@1.4.3_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-resize-observer/es/index.js";
|
|
9
9
|
import M from "../../../../rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/hooks/useLayoutEffect.js";
|
|
10
10
|
import te from "../../../../rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/hooks/useMergedState.js";
|
|
@@ -4,7 +4,7 @@ import d from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/hel
|
|
|
4
4
|
import Ae from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/toConsumableArray.js";
|
|
5
5
|
import x from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/slicedToArray.js";
|
|
6
6
|
import Fe from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js";
|
|
7
|
-
import h from "../../../../../../../../../_virtual/
|
|
7
|
+
import h from "../../../../../../../../../_virtual/index3.js";
|
|
8
8
|
import Ne from "../../../../rc-input@1.8.0_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-input/es/BaseInput.js";
|
|
9
9
|
import Te from "../../../../rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/hooks/useMergedState.js";
|
|
10
10
|
import o, { useRef as Y, useImperativeHandle as $e, useEffect as Ie } from "react";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import t from "./TextArea.js";
|
|
2
|
-
import "../../../../../../../../../_virtual/
|
|
2
|
+
import "../../../../../../../../../_virtual/index3.js";
|
|
3
3
|
import "../../../../rc-resize-observer@1.4.3_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-resize-observer/es/index.js";
|
|
4
4
|
import "../../../../rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/hooks/useLayoutEffect.js";
|
|
5
5
|
import "react";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __exports as a } from "../../../../../../../../../_virtual/remark-custom-variable.js";
|
|
2
|
-
import g from "../../../../../../../../../_virtual/
|
|
2
|
+
import g from "../../../../../../../../../_virtual/index4.js";
|
|
3
3
|
import { __require as h } from "./interaction-parser.js";
|
|
4
4
|
var m;
|
|
5
5
|
function C() {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __exports as n } from "../../../../../../../../../_virtual/remark-interaction.js";
|
|
2
|
-
import I from "../../../../../../../../../_virtual/
|
|
2
|
+
import I from "../../../../../../../../../_virtual/index4.js";
|
|
3
3
|
import { __require as g } from "./interaction-parser.js";
|
|
4
4
|
var m;
|
|
5
5
|
function k() {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { bail as P } from "../../../../bail@2.0.2/node_modules/bail/index.js";
|
|
2
|
-
import y from "../../../../../../../../../_virtual/
|
|
2
|
+
import y from "../../../../../../../../../_virtual/index6.js";
|
|
3
3
|
import z from "../../../../is-plain-obj@4.1.0/node_modules/is-plain-obj/index.js";
|
|
4
4
|
import { CallableInstance as C } from "./callable-instance.js";
|
|
5
5
|
import { trough as A } from "../../../../trough@2.2.0/node_modules/trough/lib/index.js";
|
package/dist/_virtual/index3.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
|
|
1
|
+
import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
|
|
2
|
+
import { __require as s } from "../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
|
|
3
|
+
var e = s();
|
|
4
|
+
const t = /* @__PURE__ */ r(e);
|
|
4
5
|
export {
|
|
5
|
-
|
|
6
|
+
t as default
|
|
6
7
|
};
|
|
7
8
|
//# sourceMappingURL=index3.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/dist/_virtual/index4.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
const t = /* @__PURE__ */ r(e);
|
|
1
|
+
import { getAugmentedNamespace as e } from "./_commonjsHelpers.js";
|
|
2
|
+
import * as r from "../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/unist-util-visit@5.0.0/node_modules/unist-util-visit/index.js";
|
|
3
|
+
const m = /* @__PURE__ */ e(r);
|
|
5
4
|
export {
|
|
6
|
-
|
|
5
|
+
m as default
|
|
7
6
|
};
|
|
8
7
|
//# sourceMappingURL=index4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
package/dist/_virtual/index6.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { getDefaultExportFromCjs as
|
|
2
|
-
import { __require as
|
|
3
|
-
var t =
|
|
4
|
-
const a = /* @__PURE__ */
|
|
1
|
+
import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
|
|
2
|
+
import { __require as r } from "../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/extend@3.0.2/node_modules/extend/index.js";
|
|
3
|
+
var t = r();
|
|
4
|
+
const a = /* @__PURE__ */ e(t);
|
|
5
5
|
export {
|
|
6
6
|
a as default
|
|
7
7
|
};
|
package/dist/_virtual/index7.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { getDefaultExportFromCjs as
|
|
2
|
-
import { __require as
|
|
3
|
-
var t =
|
|
4
|
-
const a = /* @__PURE__ */
|
|
1
|
+
import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
|
|
2
|
+
import { __require as o } from "../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/style-to-js@1.1.18/node_modules/style-to-js/cjs/index.js";
|
|
3
|
+
var t = o();
|
|
4
|
+
const a = /* @__PURE__ */ r(t);
|
|
5
5
|
export {
|
|
6
6
|
a as default
|
|
7
7
|
};
|
|
@@ -1,118 +1,126 @@
|
|
|
1
1
|
import { j as t } from "../../_virtual/jsx-runtime.js";
|
|
2
2
|
/* empty css */
|
|
3
3
|
/* empty css */
|
|
4
|
-
import
|
|
5
|
-
import
|
|
4
|
+
import D, { useMemo as C, useRef as W, useEffect as R } from "react";
|
|
5
|
+
import I from "../../_virtual/index.js";
|
|
6
6
|
/* empty css */
|
|
7
7
|
/* empty css */
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import { preserveCustomVariableProperties as
|
|
13
|
-
import {
|
|
14
|
-
import { parseMarkdownSegments as
|
|
15
|
-
import { normalizeInlineHtml as
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import
|
|
22
|
-
import
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
8
|
+
import F from "./CodeBlock.js";
|
|
9
|
+
import J from "./plugins/CustomVariable.js";
|
|
10
|
+
import z from "./plugins/MermaidChart.js";
|
|
11
|
+
import O from "./useTypewriterStateMachine.js";
|
|
12
|
+
import { preserveCustomVariableProperties as Q, restoreCustomVariableProperties as X } from "./utils/custom-variable-props.js";
|
|
13
|
+
import { highlightLanguages as M, subsetLanguages as P } from "./utils/highlight-languages.js";
|
|
14
|
+
import { parseMarkdownSegments as Y, mermaidBlockIsComplete as Z } from "./utils/mermaid-parse.js";
|
|
15
|
+
import { normalizeInlineHtml as $ } from "./utils/normalize-inline-html.js";
|
|
16
|
+
import ee from "./IframeSandbox.js";
|
|
17
|
+
import { Markdown as H } from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/react-markdown@10.1.0_@types_react@19.2.2_react@19.0.1/node_modules/react-markdown/lib/index.js";
|
|
18
|
+
import L from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.js";
|
|
19
|
+
import T from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-katex@7.0.1/node_modules/rehype-katex/lib/index.js";
|
|
20
|
+
import V from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rehype-highlight@7.0.2/node_modules/rehype-highlight/lib/index.js";
|
|
21
|
+
import _ from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-gfm@4.0.1/node_modules/remark-gfm/lib/index.js";
|
|
22
|
+
import E from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-math@6.0.0/node_modules/remark-math/lib/index.js";
|
|
23
|
+
import U from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-breaks@4.0.0/node_modules/remark-breaks/lib/index.js";
|
|
24
|
+
const q = (r) => {
|
|
25
|
+
const m = /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)[\s>]/i, a = r.search(m);
|
|
26
|
+
if (a === -1)
|
|
27
|
+
return [{ type: "markdown", value: r }];
|
|
28
|
+
const i = /<\/[a-z][^>]*>\s*\n(?=[^\s<])/gi;
|
|
29
|
+
let c = r.length, o;
|
|
30
|
+
for (; o = i.exec(r); )
|
|
31
|
+
if (!(o.index <= a)) {
|
|
32
|
+
c = o.index + o[0].length - 1;
|
|
33
|
+
break;
|
|
34
|
+
}
|
|
35
|
+
const d = [], u = r.slice(0, a), n = r.slice(a, c), l = r.slice(c);
|
|
36
|
+
return u.trim() && d.push({ type: "markdown", value: u }), d.push({ type: "sandbox", value: n }), l.trim() && d.push(...q(l)), d;
|
|
37
|
+
}, te = ({ svg: r }) => {
|
|
38
|
+
const m = W(null);
|
|
39
|
+
return R(() => {
|
|
40
|
+
const a = m.current;
|
|
41
|
+
if (!a) return;
|
|
42
|
+
const i = a.shadowRoot ?? a.attachShadow({ mode: "open" }), c = "content-render-svg-style";
|
|
43
|
+
let o = i.getElementById(c);
|
|
44
|
+
o || (o = document.createElement("style"), o.id = c, o.textContent = `
|
|
31
45
|
:host { display: block; width: 100%; max-width: 100%; text-align: center; }
|
|
32
46
|
svg { max-width: 100%; height: auto; display: inline-block; }
|
|
33
|
-
`,
|
|
34
|
-
(
|
|
35
|
-
).forEach((
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
const
|
|
39
|
-
if (!
|
|
40
|
-
const
|
|
41
|
-
if (
|
|
42
|
-
const [, ,
|
|
43
|
-
if (!
|
|
44
|
-
|
|
47
|
+
`, i.appendChild(o)), Array.from(i.childNodes).filter(
|
|
48
|
+
(n) => n !== o
|
|
49
|
+
).forEach((n) => i.removeChild(n));
|
|
50
|
+
const u = document.createElement("template");
|
|
51
|
+
u.innerHTML = r, i.append(u.content.cloneNode(!0)), i.querySelectorAll("svg").forEach((n) => {
|
|
52
|
+
const l = n.getAttribute("viewBox");
|
|
53
|
+
if (!l) return;
|
|
54
|
+
const f = l.trim().split(/[\s,]+/).map((v) => Number(v));
|
|
55
|
+
if (f.length !== 4 || f.some(Number.isNaN)) return;
|
|
56
|
+
const [, , x, p] = f, y = n.getAttribute("width"), j = n.getAttribute("height"), k = !!y && y !== "0", b = !!j && j !== "0";
|
|
57
|
+
if (!k && !b) {
|
|
58
|
+
n.style.width = "100%", n.style.height = "auto", !n.style.aspectRatio && p > 0 && (n.style.aspectRatio = `${x} / ${p}`);
|
|
45
59
|
return;
|
|
46
60
|
}
|
|
47
|
-
!
|
|
61
|
+
!k && x > 0 && n.setAttribute("width", `${x}`), !b && p > 0 && n.setAttribute("height", `${p}`);
|
|
48
62
|
});
|
|
49
|
-
}, [
|
|
50
|
-
},
|
|
51
|
-
content:
|
|
52
|
-
customRenderBar:
|
|
53
|
-
onSend:
|
|
54
|
-
typingSpeed:
|
|
55
|
-
enableTypewriter:
|
|
56
|
-
defaultButtonText:
|
|
57
|
-
defaultInputText:
|
|
58
|
-
defaultSelectedValues:
|
|
59
|
-
readonly:
|
|
60
|
-
onTypeFinished:
|
|
61
|
-
confirmButtonText:
|
|
62
|
-
copyButtonText:
|
|
63
|
-
copiedButtonText:
|
|
64
|
-
onClickCustomButtonAfterContent:
|
|
65
|
-
beforeSend:
|
|
63
|
+
}, [r]), /* @__PURE__ */ t.jsx("div", { className: "content-render-svg-scroll", children: /* @__PURE__ */ t.jsx("div", { className: "content-render-svg", ref: m }) });
|
|
64
|
+
}, Se = ({
|
|
65
|
+
content: r,
|
|
66
|
+
customRenderBar: m,
|
|
67
|
+
onSend: a,
|
|
68
|
+
typingSpeed: i = 30,
|
|
69
|
+
enableTypewriter: c = !1,
|
|
70
|
+
defaultButtonText: o,
|
|
71
|
+
defaultInputText: d,
|
|
72
|
+
defaultSelectedValues: u,
|
|
73
|
+
readonly: n = !1,
|
|
74
|
+
onTypeFinished: l,
|
|
75
|
+
confirmButtonText: f,
|
|
76
|
+
copyButtonText: x,
|
|
77
|
+
copiedButtonText: p,
|
|
78
|
+
onClickCustomButtonAfterContent: y,
|
|
79
|
+
beforeSend: j
|
|
66
80
|
// tooltipMinLength,
|
|
67
81
|
}) => {
|
|
68
|
-
const
|
|
69
|
-
() =>
|
|
70
|
-
[
|
|
71
|
-
),
|
|
72
|
-
// processMarkdownText will let code block printf("You win!\n") become printf("You win!<br/>");
|
|
73
|
-
// content: processMarkdownText(content),
|
|
74
|
-
content: j,
|
|
75
|
-
typingSpeed: s,
|
|
76
|
-
disabled: !f
|
|
77
|
-
}), k = {
|
|
82
|
+
const k = C(
|
|
83
|
+
() => $(r),
|
|
84
|
+
[r]
|
|
85
|
+
), b = {
|
|
78
86
|
"custom-button-after-content": ({
|
|
79
87
|
children: e
|
|
80
88
|
}) => /* @__PURE__ */ t.jsx(
|
|
81
89
|
"button",
|
|
82
90
|
{
|
|
83
91
|
className: "content-render-custom-button-after-content",
|
|
84
|
-
onClick:
|
|
92
|
+
onClick: y,
|
|
85
93
|
children: /* @__PURE__ */ t.jsx("span", { className: "content-render-custom-button-after-content-inner", children: e })
|
|
86
94
|
}
|
|
87
95
|
),
|
|
88
96
|
"custom-variable": (e) => /* @__PURE__ */ t.jsx(
|
|
89
|
-
|
|
97
|
+
J,
|
|
90
98
|
{
|
|
91
99
|
...e,
|
|
92
|
-
readonly:
|
|
93
|
-
defaultButtonText:
|
|
94
|
-
defaultInputText:
|
|
95
|
-
defaultSelectedValues:
|
|
96
|
-
onSend:
|
|
97
|
-
beforeSend:
|
|
98
|
-
confirmButtonText:
|
|
100
|
+
readonly: n,
|
|
101
|
+
defaultButtonText: o,
|
|
102
|
+
defaultInputText: d,
|
|
103
|
+
defaultSelectedValues: u,
|
|
104
|
+
onSend: a,
|
|
105
|
+
beforeSend: j,
|
|
106
|
+
confirmButtonText: f
|
|
99
107
|
}
|
|
100
108
|
),
|
|
101
109
|
code: (e) => {
|
|
102
|
-
const { className:
|
|
103
|
-
if (/language-(\w+)/.exec(
|
|
104
|
-
const
|
|
105
|
-
return /* @__PURE__ */ t.jsx(
|
|
110
|
+
const { className: s, children: h, ...A } = e;
|
|
111
|
+
if (/language-(\w+)/.exec(s || "")?.[1] === "mermaid") {
|
|
112
|
+
const B = h?.toString().replace(/\n$/, "") || "", K = Z(r, B);
|
|
113
|
+
return /* @__PURE__ */ t.jsx(z, { chart: B, frozen: K });
|
|
106
114
|
}
|
|
107
|
-
return /* @__PURE__ */ t.jsx("code", { className:
|
|
115
|
+
return /* @__PURE__ */ t.jsx("code", { className: s, ...A, children: h });
|
|
108
116
|
},
|
|
109
117
|
table: ({ ...e }) => /* @__PURE__ */ t.jsx("div", { className: "content-render-table-container", children: /* @__PURE__ */ t.jsx("table", { className: "content-render-table", ...e }) }),
|
|
110
118
|
th: ({ ...e }) => /* @__PURE__ */ t.jsx("th", { className: "content-render-th", ...e }),
|
|
111
119
|
td: ({ ...e }) => /* @__PURE__ */ t.jsx("td", { className: "content-render-td", ...e }),
|
|
112
120
|
tr: ({ ...e }) => /* @__PURE__ */ t.jsx("tr", { className: "content-render-tr", ...e }),
|
|
113
|
-
li: ({ node: e, ...
|
|
114
|
-
const
|
|
115
|
-
return typeof
|
|
121
|
+
li: ({ node: e, ...s }) => {
|
|
122
|
+
const h = e?.properties?.className;
|
|
123
|
+
return typeof h == "string" && h.includes("task-list-item") || Array.isArray(h) && h.includes("task-list-item") ? /* @__PURE__ */ t.jsx("li", { className: "content-render-task-list-item", ...s }) : /* @__PURE__ */ t.jsx("li", { ...s });
|
|
116
124
|
},
|
|
117
125
|
ol: ({ ...e }) => /* @__PURE__ */ t.jsx("ol", { className: "content-render-ol", ...e }),
|
|
118
126
|
ul: ({ ...e }) => /* @__PURE__ */ t.jsx("ul", { className: "content-render-ul", ...e }),
|
|
@@ -125,64 +133,113 @@ const X = ({ svg: n }) => {
|
|
|
125
133
|
...e
|
|
126
134
|
}
|
|
127
135
|
) : /* @__PURE__ */ t.jsx("input", { ...e }),
|
|
128
|
-
a: ({ children: e, ...
|
|
136
|
+
a: ({ children: e, ...s }) => /* @__PURE__ */ t.jsx("a", { target: "_blank", rel: "noopener noreferrer", ...s, children: e }),
|
|
129
137
|
pre: (e) => /* @__PURE__ */ t.jsx(
|
|
130
|
-
|
|
138
|
+
F,
|
|
131
139
|
{
|
|
132
140
|
...e,
|
|
133
|
-
copyButtonText:
|
|
134
|
-
copiedButtonText:
|
|
141
|
+
copyButtonText: x,
|
|
142
|
+
copiedButtonText: p
|
|
135
143
|
}
|
|
136
144
|
)
|
|
137
|
-
}, N =
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
145
|
+
}, { displayContent: N, isComplete: v } = O({
|
|
146
|
+
// processMarkdownText will let code block printf("You win!\n") become printf("You win!<br/>");
|
|
147
|
+
// content: processMarkdownText(content),
|
|
148
|
+
content: k,
|
|
149
|
+
typingSpeed: i,
|
|
150
|
+
disabled: !c
|
|
151
|
+
}), S = C(
|
|
152
|
+
() => q(r),
|
|
153
|
+
[r]
|
|
154
|
+
), g = S.some(
|
|
155
|
+
(e) => e.type === "sandbox"
|
|
156
|
+
), G = C(
|
|
157
|
+
() => Y(N),
|
|
158
|
+
[N]
|
|
159
|
+
), w = W(!1);
|
|
160
|
+
return R(() => {
|
|
161
|
+
g || v && !w.current && (w.current = !0, l?.());
|
|
162
|
+
}, [g, v, l]), R(() => {
|
|
163
|
+
g || (w.current = !1);
|
|
164
|
+
}, [g, r]), g ? /* @__PURE__ */ t.jsx("div", { className: "content-render", children: S.map(
|
|
165
|
+
(e, s) => e.type === "sandbox" ? /* @__PURE__ */ t.jsx(
|
|
166
|
+
ee,
|
|
167
|
+
{
|
|
168
|
+
content: e.value,
|
|
169
|
+
className: "content-render-iframe"
|
|
170
|
+
},
|
|
171
|
+
`sandbox-${s}`
|
|
172
|
+
) : /* @__PURE__ */ t.jsx("div", { className: "markdown-body", children: /* @__PURE__ */ t.jsx(
|
|
173
|
+
H,
|
|
174
|
+
{
|
|
175
|
+
remarkPlugins: [
|
|
176
|
+
_,
|
|
177
|
+
E,
|
|
178
|
+
I,
|
|
179
|
+
[U, { omit: ["table", "code", "listItem"] }]
|
|
180
|
+
],
|
|
181
|
+
rehypePlugins: [
|
|
182
|
+
L,
|
|
183
|
+
T,
|
|
184
|
+
[
|
|
185
|
+
V,
|
|
186
|
+
{
|
|
187
|
+
detect: !0,
|
|
188
|
+
subset: P,
|
|
189
|
+
languages: M
|
|
190
|
+
}
|
|
191
|
+
]
|
|
192
|
+
],
|
|
193
|
+
components: b,
|
|
194
|
+
children: $(e.value)
|
|
195
|
+
}
|
|
196
|
+
) }, `md-${s}`)
|
|
197
|
+
) }) : /* @__PURE__ */ t.jsxs("div", { className: "content-render", children: [
|
|
198
|
+
G.map((e, s) => {
|
|
146
199
|
if (e.type === "text")
|
|
147
|
-
return /* @__PURE__ */ t.jsx(
|
|
148
|
-
|
|
200
|
+
return /* @__PURE__ */ t.jsx("div", { className: "markdown-body", children: /* @__PURE__ */ t.jsx(
|
|
201
|
+
H,
|
|
149
202
|
{
|
|
150
|
-
remarkPlugins: [
|
|
203
|
+
remarkPlugins: [
|
|
204
|
+
_,
|
|
205
|
+
E,
|
|
206
|
+
I,
|
|
207
|
+
U
|
|
208
|
+
],
|
|
151
209
|
rehypePlugins: [
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
210
|
+
Q,
|
|
211
|
+
L,
|
|
212
|
+
X,
|
|
155
213
|
[
|
|
156
|
-
|
|
157
|
-
{ languages:
|
|
214
|
+
V,
|
|
215
|
+
{ languages: M, subset: P }
|
|
158
216
|
],
|
|
159
|
-
|
|
217
|
+
T
|
|
160
218
|
],
|
|
161
|
-
components:
|
|
219
|
+
components: b,
|
|
162
220
|
children: e.value
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
);
|
|
221
|
+
}
|
|
222
|
+
) }, s);
|
|
166
223
|
if (e.type === "mermaid")
|
|
167
224
|
return /* @__PURE__ */ t.jsx(
|
|
168
|
-
|
|
225
|
+
z,
|
|
169
226
|
{
|
|
170
227
|
chart: e.value,
|
|
171
228
|
frozen: !e.complete
|
|
172
229
|
},
|
|
173
|
-
|
|
230
|
+
s
|
|
174
231
|
);
|
|
175
232
|
if (e.type === "svg")
|
|
176
|
-
return /* @__PURE__ */ t.jsx(
|
|
233
|
+
return /* @__PURE__ */ t.jsx(te, { svg: e.value }, s);
|
|
177
234
|
}),
|
|
178
|
-
|
|
179
|
-
content:
|
|
180
|
-
displayContent:
|
|
181
|
-
onSend:
|
|
235
|
+
m && /* @__PURE__ */ t.jsx("div", { className: "content-render-custom-bar", children: D.createElement(m, {
|
|
236
|
+
content: r,
|
|
237
|
+
displayContent: N,
|
|
238
|
+
onSend: a
|
|
182
239
|
}) })
|
|
183
240
|
] });
|
|
184
241
|
};
|
|
185
242
|
export {
|
|
186
|
-
|
|
243
|
+
Se as default
|
|
187
244
|
};
|
|
188
245
|
//# sourceMappingURL=ContentRender.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentRender.js","sources":["../../../src/components/ContentRender/ContentRender.tsx"],"sourcesContent":["import \"highlight.js/styles/github.css\";\nimport \"katex/dist/katex.min.css\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeKatex from \"rehype-katex\";\nimport rehypeRaw from \"rehype-raw\";\nimport remarkBreaks from \"remark-breaks\";\nimport remarkFlow from \"remark-flow\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport { CustomRenderBarProps, OnSendContentParams } from \"../types\";\nimport \"./contentRender.css\";\nimport \"./github-markdown-light.css\";\nimport CodeBlock from \"./CodeBlock\";\nimport CustomButtonInputVariable, {\n ComponentsWithCustomVariable,\n} from \"./plugins/CustomVariable\";\nimport MermaidChart from \"./plugins/MermaidChart\";\nimport useTypewriterStateMachine from \"./useTypewriterStateMachine\";\nimport {\n preserveCustomVariableProperties,\n restoreCustomVariableProperties,\n} from \"./utils/custom-variable-props\";\nimport {\n highlightLanguages,\n subsetLanguages,\n} from \"./utils/highlight-languages\";\n// import { processMarkdownText } from \"./utils/process-markdown\";\nimport {\n parseMarkdownSegments,\n mermaidBlockIsComplete,\n} from \"./utils/mermaid-parse\";\nimport { normalizeInlineHtml } from \"./utils/normalize-inline-html\";\n// Define component Props type\nexport interface ContentRenderProps {\n content: string;\n /**\n+ * Callback invoked when the custom button after content is clicked.\n+ * This button is rendered via the `<custom-button-after-content>` tag in markdown content.\n+ * @example\n+ * ```tsx\n+ * <ContentRender\n+ * content=\"Hello <custom-button-after-content>Ask</custom-button-after-content>\"\n+ * onClickCustomButtonAfterContent={() => console.log('Button clicked')}\n+ * />\n+ * ```\n+ */\n customRenderBar?: CustomRenderBarProps;\n onClickCustomButtonAfterContent?: () => void;\n onSend?: (content: OnSendContentParams) => void;\n typingSpeed?: number;\n enableTypewriter?: boolean;\n defaultButtonText?: string;\n defaultInputText?: string; // Text input by user\n defaultSelectedValues?: string[]; // Default selected values for multi-select\n readonly?: boolean;\n onTypeFinished?: () => void;\n // Multi-select confirm button text (i18n support)\n confirmButtonText?: string;\n // Copy button text (i18n support)\n copyButtonText?: string;\n // Copied state text (i18n support)\n copiedButtonText?: string;\n // Dynamic interaction format for multi-select support\n dynamicInteractionFormat?: string;\n beforeSend?: (param: OnSendContentParams) => boolean;\n // tooltipMinLength?: number; // Control minimum character length for tooltip display, default 10\n}\n\n// Render svg string via Shadow DOM to avoid markdown wrapping\nconst SvgBlockInShadow: React.FC<{ svg: string }> = ({ svg }) => {\n const hostRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const host = hostRef.current;\n if (!host) return;\n const shadowRoot = host.shadowRoot ?? host.attachShadow({ mode: \"open\" });\n const styleId = \"content-render-svg-style\";\n let styleEl = shadowRoot.getElementById(styleId) as HTMLStyleElement | null;\n\n if (!styleEl) {\n styleEl = document.createElement(\"style\");\n styleEl.id = styleId;\n styleEl.textContent = `\n :host { display: block; width: 100%; max-width: 100%; text-align: center; }\n svg { max-width: 100%; height: auto; display: inline-block; }\n `;\n shadowRoot.appendChild(styleEl);\n }\n\n const nodesToRemove = Array.from(shadowRoot.childNodes).filter(\n (node) => node !== styleEl\n );\n nodesToRemove.forEach((node) => shadowRoot.removeChild(node));\n\n const template = document.createElement(\"template\");\n template.innerHTML = svg;\n shadowRoot.append(template.content.cloneNode(true));\n\n shadowRoot.querySelectorAll(\"svg\").forEach((svgEl) => {\n // Derive responsive sizing from viewBox so pure viewBox SVGs stay visible and fluid\n const viewBox = svgEl.getAttribute(\"viewBox\");\n if (!viewBox) return;\n\n const dimensions = viewBox\n .trim()\n .split(/[\\s,]+/)\n .map((value) => Number(value));\n\n if (dimensions.length !== 4 || dimensions.some(Number.isNaN)) return;\n\n const [, , viewBoxWidth, viewBoxHeight] = dimensions;\n const widthAttr = svgEl.getAttribute(\"width\");\n const heightAttr = svgEl.getAttribute(\"height\");\n const hasWidth = !!widthAttr && widthAttr !== \"0\";\n const hasHeight = !!heightAttr && heightAttr !== \"0\";\n const shouldUseResponsiveSize = !hasWidth && !hasHeight;\n\n if (shouldUseResponsiveSize) {\n svgEl.style.width = \"100%\";\n svgEl.style.height = \"auto\";\n if (!svgEl.style.aspectRatio && viewBoxHeight > 0) {\n svgEl.style.aspectRatio = `${viewBoxWidth} / ${viewBoxHeight}`;\n }\n return;\n }\n\n if (!hasWidth && viewBoxWidth > 0) {\n svgEl.setAttribute(\"width\", `${viewBoxWidth}`);\n }\n if (!hasHeight && viewBoxHeight > 0) {\n svgEl.setAttribute(\"height\", `${viewBoxHeight}`);\n }\n });\n }, [svg]);\n\n return (\n <div className=\"content-render-svg-scroll\">\n <div className=\"content-render-svg\" ref={hostRef} />\n </div>\n );\n};\n\n// Extended component interface\ntype CustomComponents = ComponentsWithCustomVariable & {\n \"custom-button-after-content\"?: React.ComponentType<{\n children: React.ReactNode;\n }>;\n};\n\nconst ContentRender: React.FC<ContentRenderProps> = ({\n content,\n customRenderBar,\n onSend,\n typingSpeed = 30,\n enableTypewriter = false,\n defaultButtonText,\n defaultInputText,\n defaultSelectedValues,\n readonly = false,\n onTypeFinished,\n confirmButtonText,\n copyButtonText,\n copiedButtonText,\n onClickCustomButtonAfterContent,\n beforeSend,\n // tooltipMinLength,\n}) => {\n const normalizedContent = useMemo(\n () => normalizeInlineHtml(content),\n [content]\n );\n\n // Use custom Hook to handle typewriter effect\n const { displayContent, isComplete } = useTypewriterStateMachine({\n // processMarkdownText will let code block printf(\"You win!\\n\") become printf(\"You win!<br/>\");\n // content: processMarkdownText(content),\n content: normalizedContent,\n typingSpeed,\n disabled: !enableTypewriter,\n });\n\n const components: CustomComponents = {\n \"custom-button-after-content\": ({\n children,\n }: {\n children: React.ReactNode;\n }) => {\n return (\n <button\n className=\"content-render-custom-button-after-content\"\n onClick={onClickCustomButtonAfterContent}\n >\n <span className=\"content-render-custom-button-after-content-inner\">\n {children}\n </span>\n </button>\n );\n },\n \"custom-variable\": (props) => (\n <CustomButtonInputVariable\n {...props}\n readonly={readonly}\n defaultButtonText={defaultButtonText}\n defaultInputText={defaultInputText}\n defaultSelectedValues={defaultSelectedValues}\n onSend={onSend}\n beforeSend={beforeSend}\n confirmButtonText={confirmButtonText}\n // tooltipMinLength={tooltipMinLength}\n />\n ),\n code: (props) => {\n const { className, children, ...rest } = props as {\n className?: string;\n children?: React.ReactNode;\n };\n const match = /language-(\\w+)/.exec(className || \"\");\n const language = match?.[1];\n if (language === \"mermaid\") {\n const chartContent = children?.toString().replace(/\\n$/, \"\") || \"\";\n const frozen = mermaidBlockIsComplete(content, chartContent);\n return <MermaidChart chart={chartContent} frozen={frozen} />;\n }\n\n return (\n <code className={className} {...rest}>\n {children}\n </code>\n );\n },\n table: ({ ...props }) => (\n <div className=\"content-render-table-container\">\n <table className=\"content-render-table\" {...props} />\n </div>\n ),\n th: ({ ...props }) => <th className=\"content-render-th\" {...props} />,\n td: ({ ...props }) => <td className=\"content-render-td\" {...props} />,\n tr: ({ ...props }) => <tr className=\"content-render-tr\" {...props} />,\n li: ({ node, ...props }) => {\n const className = node?.properties?.className;\n const hasTaskListItem =\n (typeof className === \"string\" &&\n className.includes(\"task-list-item\")) ||\n (Array.isArray(className) && className.includes(\"task-list-item\"));\n if (hasTaskListItem) {\n return <li className=\"content-render-task-list-item\" {...props} />;\n }\n return <li {...props} />;\n },\n ol: ({ ...props }) => <ol className=\"content-render-ol\" {...props} />,\n ul: ({ ...props }) => <ul className=\"content-render-ul\" {...props} />,\n input: ({ ...props }) => {\n if (props.type === \"checkbox\") {\n return (\n <input\n type=\"checkbox\"\n className=\"content-render-checkbox\"\n disabled\n {...props}\n />\n );\n }\n return <input {...props} />;\n },\n a: ({ children, ...props }) => (\n <a target=\"_blank\" rel=\"noopener noreferrer\" {...props}>\n {children}\n </a>\n ),\n pre: (props) => (\n <CodeBlock\n {...props}\n copyButtonText={copyButtonText}\n copiedButtonText={copiedButtonText}\n />\n ),\n };\n\n const hasCompleted = useRef(false);\n\n useEffect(() => {\n if (isComplete && !hasCompleted.current) {\n hasCompleted.current = true; // Mark as completed\n onTypeFinished?.(); // Call the passed callback\n }\n }, [isComplete, onTypeFinished]);\n useEffect(() => {\n hasCompleted.current = false; // Reset completion status when content changes\n }, [content]);\n\n const segments = parseMarkdownSegments(displayContent);\n\n return (\n <div className={`content-render markdown-body`}>\n {segments.map((seg, index) => {\n if (seg.type === \"text\") {\n return (\n <ReactMarkdown\n key={index}\n remarkPlugins={[remarkGfm, remarkMath, remarkFlow, remarkBreaks]}\n rehypePlugins={[\n preserveCustomVariableProperties,\n rehypeRaw,\n restoreCustomVariableProperties,\n [\n rehypeHighlight,\n { languages: highlightLanguages, subset: subsetLanguages },\n ],\n rehypeKatex,\n ]}\n components={components}\n >\n {seg.value}\n </ReactMarkdown>\n );\n }\n\n if (seg.type === \"mermaid\") {\n return (\n <MermaidChart\n key={index}\n chart={seg.value}\n frozen={!seg.complete}\n />\n );\n }\n\n if (seg.type === \"svg\") {\n return <SvgBlockInShadow key={index} svg={seg.value} />;\n }\n })}\n\n {customRenderBar && (\n <div className=\"content-render-custom-bar\">\n {React.createElement(customRenderBar, {\n content,\n displayContent,\n onSend,\n })}\n </div>\n )}\n </div>\n );\n};\n\nexport default ContentRender;\n"],"names":["SvgBlockInShadow","svg","hostRef","useRef","useEffect","host","shadowRoot","styleId","styleEl","node","template","svgEl","viewBox","dimensions","value","viewBoxWidth","viewBoxHeight","widthAttr","heightAttr","hasWidth","hasHeight","jsx","ContentRender","content","customRenderBar","onSend","typingSpeed","enableTypewriter","defaultButtonText","defaultInputText","defaultSelectedValues","readonly","onTypeFinished","confirmButtonText","copyButtonText","copiedButtonText","onClickCustomButtonAfterContent","beforeSend","normalizedContent","useMemo","normalizeInlineHtml","displayContent","isComplete","useTypewriterStateMachine","components","children","props","CustomButtonInputVariable","className","rest","chartContent","frozen","mermaidBlockIsComplete","MermaidChart","CodeBlock","hasCompleted","segments","parseMarkdownSegments","jsxs","seg","index","ReactMarkdown","remarkGfm","remarkMath","remarkFlow","remarkBreaks","preserveCustomVariableProperties","rehypeRaw","restoreCustomVariableProperties","rehypeHighlight","highlightLanguages","subsetLanguages","rehypeKatex","React"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ContentRender.js","sources":["../../../src/components/ContentRender/ContentRender.tsx"],"sourcesContent":["import \"highlight.js/styles/github.css\";\nimport \"katex/dist/katex.min.css\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeKatex from \"rehype-katex\";\nimport rehypeRaw from \"rehype-raw\";\nimport remarkBreaks from \"remark-breaks\";\nimport remarkFlow from \"remark-flow\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport { CustomRenderBarProps, OnSendContentParams } from \"../types\";\nimport \"./contentRender.css\";\nimport \"./github-markdown-light.css\";\nimport CodeBlock from \"./CodeBlock\";\nimport CustomButtonInputVariable, {\n ComponentsWithCustomVariable,\n} from \"./plugins/CustomVariable\";\nimport MermaidChart from \"./plugins/MermaidChart\";\nimport useTypewriterStateMachine from \"./useTypewriterStateMachine\";\nimport {\n preserveCustomVariableProperties,\n restoreCustomVariableProperties,\n} from \"./utils/custom-variable-props\";\nimport {\n highlightLanguages,\n subsetLanguages,\n} from \"./utils/highlight-languages\";\n// import { processMarkdownText } from \"./utils/process-markdown\";\nimport {\n parseMarkdownSegments,\n mermaidBlockIsComplete,\n} from \"./utils/mermaid-parse\";\nimport { normalizeInlineHtml } from \"./utils/normalize-inline-html\";\nimport IframeSandbox from \"./IframeSandbox\";\n\ntype RenderSegment =\n | { type: \"markdown\"; value: string }\n | { type: \"sandbox\"; value: string };\n\nconst splitContentSegments = (raw: string): RenderSegment[] => {\n const startPattern =\n /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)[\\s>]/i;\n\n const startIndex = raw.search(startPattern);\n if (startIndex === -1) {\n return [{ type: \"markdown\", value: raw }];\n }\n\n // Find the end of the HTML block: stop at the first closing tag whose\n // following line does not start with another HTML tag.\n const closingBoundary = /<\\/[a-z][^>]*>\\s*\\n(?=[^\\s<])/gi;\n let blockEnd = raw.length;\n let match: RegExpExecArray | null;\n\n while ((match = closingBoundary.exec(raw))) {\n if (match.index <= startIndex) continue;\n blockEnd = match.index + match[0].length - 1; // end before the newline\n break;\n }\n\n const segments: RenderSegment[] = [];\n const before = raw.slice(0, startIndex);\n const htmlBlock = raw.slice(startIndex, blockEnd);\n const after = raw.slice(blockEnd);\n\n if (before.trim()) {\n segments.push({ type: \"markdown\", value: before });\n }\n\n segments.push({ type: \"sandbox\", value: htmlBlock });\n\n if (after.trim()) {\n segments.push(...splitContentSegments(after));\n }\n\n return segments;\n};\n// Define component Props type\nexport interface ContentRenderProps {\n content: string;\n /**\n+ * Callback invoked when the custom button after content is clicked.\n+ * This button is rendered via the `<custom-button-after-content>` tag in markdown content.\n+ * @example\n+ * ```tsx\n+ * <ContentRender\n+ * content=\"Hello <custom-button-after-content>Ask</custom-button-after-content>\"\n+ * onClickCustomButtonAfterContent={() => console.log('Button clicked')}\n+ * />\n+ * ```\n+ */\n customRenderBar?: CustomRenderBarProps;\n onClickCustomButtonAfterContent?: () => void;\n onSend?: (content: OnSendContentParams) => void;\n typingSpeed?: number;\n enableTypewriter?: boolean;\n defaultButtonText?: string;\n defaultInputText?: string; // Text input by user\n defaultSelectedValues?: string[]; // Default selected values for multi-select\n readonly?: boolean;\n onTypeFinished?: () => void;\n // Multi-select confirm button text (i18n support)\n confirmButtonText?: string;\n // Copy button text (i18n support)\n copyButtonText?: string;\n // Copied state text (i18n support)\n copiedButtonText?: string;\n // Dynamic interaction format for multi-select support\n dynamicInteractionFormat?: string;\n beforeSend?: (param: OnSendContentParams) => boolean;\n // tooltipMinLength?: number; // Control minimum character length for tooltip display, default 10\n}\n\n// Render svg string via Shadow DOM to avoid markdown wrapping\nconst SvgBlockInShadow: React.FC<{ svg: string }> = ({ svg }) => {\n const hostRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const host = hostRef.current;\n if (!host) return;\n const shadowRoot = host.shadowRoot ?? host.attachShadow({ mode: \"open\" });\n const styleId = \"content-render-svg-style\";\n let styleEl = shadowRoot.getElementById(styleId) as HTMLStyleElement | null;\n\n if (!styleEl) {\n styleEl = document.createElement(\"style\");\n styleEl.id = styleId;\n styleEl.textContent = `\n :host { display: block; width: 100%; max-width: 100%; text-align: center; }\n svg { max-width: 100%; height: auto; display: inline-block; }\n `;\n shadowRoot.appendChild(styleEl);\n }\n\n const nodesToRemove = Array.from(shadowRoot.childNodes).filter(\n (node) => node !== styleEl\n );\n nodesToRemove.forEach((node) => shadowRoot.removeChild(node));\n\n const template = document.createElement(\"template\");\n template.innerHTML = svg;\n shadowRoot.append(template.content.cloneNode(true));\n\n shadowRoot.querySelectorAll(\"svg\").forEach((svgEl) => {\n // Derive responsive sizing from viewBox so pure viewBox SVGs stay visible and fluid\n const viewBox = svgEl.getAttribute(\"viewBox\");\n if (!viewBox) return;\n\n const dimensions = viewBox\n .trim()\n .split(/[\\s,]+/)\n .map((value) => Number(value));\n\n if (dimensions.length !== 4 || dimensions.some(Number.isNaN)) return;\n\n const [, , viewBoxWidth, viewBoxHeight] = dimensions;\n const widthAttr = svgEl.getAttribute(\"width\");\n const heightAttr = svgEl.getAttribute(\"height\");\n const hasWidth = !!widthAttr && widthAttr !== \"0\";\n const hasHeight = !!heightAttr && heightAttr !== \"0\";\n const shouldUseResponsiveSize = !hasWidth && !hasHeight;\n\n if (shouldUseResponsiveSize) {\n svgEl.style.width = \"100%\";\n svgEl.style.height = \"auto\";\n if (!svgEl.style.aspectRatio && viewBoxHeight > 0) {\n svgEl.style.aspectRatio = `${viewBoxWidth} / ${viewBoxHeight}`;\n }\n return;\n }\n\n if (!hasWidth && viewBoxWidth > 0) {\n svgEl.setAttribute(\"width\", `${viewBoxWidth}`);\n }\n if (!hasHeight && viewBoxHeight > 0) {\n svgEl.setAttribute(\"height\", `${viewBoxHeight}`);\n }\n });\n }, [svg]);\n\n return (\n <div className=\"content-render-svg-scroll\">\n <div className=\"content-render-svg\" ref={hostRef} />\n </div>\n );\n};\n\n// Extended component interface\ntype CustomComponents = ComponentsWithCustomVariable & {\n \"custom-button-after-content\"?: React.ComponentType<{\n children: React.ReactNode;\n }>;\n};\n\nconst ContentRender: React.FC<ContentRenderProps> = ({\n content,\n customRenderBar,\n onSend,\n typingSpeed = 30,\n enableTypewriter = false,\n defaultButtonText,\n defaultInputText,\n defaultSelectedValues,\n readonly = false,\n onTypeFinished,\n confirmButtonText,\n copyButtonText,\n copiedButtonText,\n onClickCustomButtonAfterContent,\n beforeSend,\n // tooltipMinLength,\n}) => {\n const normalizedContent = useMemo(\n () => normalizeInlineHtml(content),\n [content]\n );\n\n // Use custom Hook to handle typewriter effect\n const components: CustomComponents = {\n \"custom-button-after-content\": ({\n children,\n }: {\n children: React.ReactNode;\n }) => {\n return (\n <button\n className=\"content-render-custom-button-after-content\"\n onClick={onClickCustomButtonAfterContent}\n >\n <span className=\"content-render-custom-button-after-content-inner\">\n {children}\n </span>\n </button>\n );\n },\n \"custom-variable\": (props) => (\n <CustomButtonInputVariable\n {...props}\n readonly={readonly}\n defaultButtonText={defaultButtonText}\n defaultInputText={defaultInputText}\n defaultSelectedValues={defaultSelectedValues}\n onSend={onSend}\n beforeSend={beforeSend}\n confirmButtonText={confirmButtonText}\n // tooltipMinLength={tooltipMinLength}\n />\n ),\n code: (props) => {\n const { className, children, ...rest } = props as {\n className?: string;\n children?: React.ReactNode;\n };\n const match = /language-(\\w+)/.exec(className || \"\");\n const language = match?.[1];\n if (language === \"mermaid\") {\n const chartContent = children?.toString().replace(/\\n$/, \"\") || \"\";\n const frozen = mermaidBlockIsComplete(content, chartContent);\n return <MermaidChart chart={chartContent} frozen={frozen} />;\n }\n\n return (\n <code className={className} {...rest}>\n {children}\n </code>\n );\n },\n table: ({ ...props }) => (\n <div className=\"content-render-table-container\">\n <table className=\"content-render-table\" {...props} />\n </div>\n ),\n th: ({ ...props }) => <th className=\"content-render-th\" {...props} />,\n td: ({ ...props }) => <td className=\"content-render-td\" {...props} />,\n tr: ({ ...props }) => <tr className=\"content-render-tr\" {...props} />,\n li: ({ node, ...props }) => {\n const className = node?.properties?.className;\n const hasTaskListItem =\n (typeof className === \"string\" &&\n className.includes(\"task-list-item\")) ||\n (Array.isArray(className) && className.includes(\"task-list-item\"));\n if (hasTaskListItem) {\n return <li className=\"content-render-task-list-item\" {...props} />;\n }\n return <li {...props} />;\n },\n ol: ({ ...props }) => <ol className=\"content-render-ol\" {...props} />,\n ul: ({ ...props }) => <ul className=\"content-render-ul\" {...props} />,\n input: ({ ...props }) => {\n if (props.type === \"checkbox\") {\n return (\n <input\n type=\"checkbox\"\n className=\"content-render-checkbox\"\n disabled\n {...props}\n />\n );\n }\n return <input {...props} />;\n },\n a: ({ children, ...props }) => (\n <a target=\"_blank\" rel=\"noopener noreferrer\" {...props}>\n {children}\n </a>\n ),\n pre: (props) => (\n <CodeBlock\n {...props}\n copyButtonText={copyButtonText}\n copiedButtonText={copiedButtonText}\n />\n ),\n };\n\n const { displayContent, isComplete } = useTypewriterStateMachine({\n // processMarkdownText will let code block printf(\"You win!\\n\") become printf(\"You win!<br/>\");\n // content: processMarkdownText(content),\n content: normalizedContent,\n typingSpeed,\n disabled: !enableTypewriter,\n });\n\n const renderSegments = useMemo(\n () => splitContentSegments(content),\n [content]\n );\n const hasSandbox = renderSegments.some(\n (segment) => segment.type === \"sandbox\"\n );\n\n const segments = useMemo(\n () => parseMarkdownSegments(displayContent),\n [displayContent]\n );\n\n const hasCompleted = useRef(false);\n\n useEffect(() => {\n if (hasSandbox) return;\n if (isComplete && !hasCompleted.current) {\n hasCompleted.current = true; // Mark as completed\n onTypeFinished?.(); // Call the passed callback\n }\n }, [hasSandbox, isComplete, onTypeFinished]);\n\n useEffect(() => {\n if (hasSandbox) return;\n hasCompleted.current = false; // Reset completion status when content changes\n }, [hasSandbox, content]);\n\n if (hasSandbox) {\n return (\n <div className=\"content-render\">\n {renderSegments.map((segment, idx) =>\n segment.type === \"sandbox\" ? (\n <IframeSandbox\n key={`sandbox-${idx}`}\n content={segment.value}\n className=\"content-render-iframe\"\n />\n ) : (\n <div key={`md-${idx}`} className=\"markdown-body\">\n <ReactMarkdown\n remarkPlugins={[\n remarkGfm,\n remarkMath,\n remarkFlow,\n [remarkBreaks, { omit: [\"table\", \"code\", \"listItem\"] }],\n ]}\n rehypePlugins={[\n rehypeRaw,\n rehypeKatex,\n [\n rehypeHighlight,\n {\n detect: true,\n subset: subsetLanguages,\n languages: highlightLanguages,\n },\n ],\n ]}\n components={components}\n >\n {normalizeInlineHtml(segment.value)}\n </ReactMarkdown>\n </div>\n )\n )}\n </div>\n );\n }\n\n return (\n <div className=\"content-render\">\n {segments.map((seg, index) => {\n if (seg.type === \"text\") {\n return (\n <div key={index} className=\"markdown-body\">\n <ReactMarkdown\n remarkPlugins={[\n remarkGfm,\n remarkMath,\n remarkFlow,\n remarkBreaks,\n ]}\n rehypePlugins={[\n preserveCustomVariableProperties,\n rehypeRaw,\n restoreCustomVariableProperties,\n [\n rehypeHighlight,\n { languages: highlightLanguages, subset: subsetLanguages },\n ],\n rehypeKatex,\n ]}\n components={components}\n >\n {seg.value}\n </ReactMarkdown>\n </div>\n );\n }\n\n if (seg.type === \"mermaid\") {\n return (\n <MermaidChart\n key={index}\n chart={seg.value}\n frozen={!seg.complete}\n />\n );\n }\n\n if (seg.type === \"svg\") {\n return <SvgBlockInShadow key={index} svg={seg.value} />;\n }\n })}\n\n {customRenderBar && (\n <div className=\"content-render-custom-bar\">\n {React.createElement(customRenderBar, {\n content,\n displayContent,\n onSend,\n })}\n </div>\n )}\n </div>\n );\n};\n\nexport default ContentRender;\n"],"names":["splitContentSegments","raw","startPattern","startIndex","closingBoundary","blockEnd","match","segments","before","htmlBlock","after","SvgBlockInShadow","svg","hostRef","useRef","useEffect","host","shadowRoot","styleId","styleEl","node","template","svgEl","viewBox","dimensions","value","viewBoxWidth","viewBoxHeight","widthAttr","heightAttr","hasWidth","hasHeight","jsx","ContentRender","content","customRenderBar","onSend","typingSpeed","enableTypewriter","defaultButtonText","defaultInputText","defaultSelectedValues","readonly","onTypeFinished","confirmButtonText","copyButtonText","copiedButtonText","onClickCustomButtonAfterContent","beforeSend","normalizedContent","useMemo","normalizeInlineHtml","components","children","props","CustomButtonInputVariable","className","rest","chartContent","frozen","mermaidBlockIsComplete","MermaidChart","CodeBlock","displayContent","isComplete","useTypewriterStateMachine","renderSegments","hasSandbox","segment","parseMarkdownSegments","hasCompleted","idx","IframeSandbox","ReactMarkdown","remarkGfm","remarkMath","remarkFlow","remarkBreaks","rehypeRaw","rehypeKatex","rehypeHighlight","subsetLanguages","highlightLanguages","jsxs","seg","index","preserveCustomVariableProperties","restoreCustomVariableProperties","React"],"mappings":"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"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { j as m } from "../../_virtual/jsx-runtime.js";
|
|
2
|
+
import { useRef as u, useState as R, useEffect as v } from "react";
|
|
3
|
+
import { createRoot as H } from "react-dom/client";
|
|
4
|
+
import E from "./SandboxApp.js";
|
|
5
|
+
const B = ({
|
|
6
|
+
content: s,
|
|
7
|
+
className: a
|
|
8
|
+
}) => {
|
|
9
|
+
const n = u(null), e = u(null), [l, h] = R(480);
|
|
10
|
+
return v(() => {
|
|
11
|
+
const c = n.current;
|
|
12
|
+
if (!c) return;
|
|
13
|
+
const t = c.contentDocument;
|
|
14
|
+
if (!t) return;
|
|
15
|
+
t.open(), t.write(`<!DOCTYPE html>
|
|
16
|
+
<html>
|
|
17
|
+
<head>
|
|
18
|
+
<meta charset="utf-8" />
|
|
19
|
+
<style>
|
|
20
|
+
html, body { margin: 0; padding: 0; }
|
|
21
|
+
</style>
|
|
22
|
+
</head>
|
|
23
|
+
<body>
|
|
24
|
+
<div id="root"></div>
|
|
25
|
+
</body>
|
|
26
|
+
</html>`), t.close();
|
|
27
|
+
const o = t.getElementById("root");
|
|
28
|
+
if (!o) return;
|
|
29
|
+
e.current && e.current.unmount();
|
|
30
|
+
const r = H(o);
|
|
31
|
+
e.current = r, r.render(/* @__PURE__ */ m.jsx(E, { html: s }));
|
|
32
|
+
const d = () => {
|
|
33
|
+
if (!n.current || !t.body) return;
|
|
34
|
+
const f = t.body.getBoundingClientRect(), g = t.documentElement?.getBoundingClientRect(), b = f.height, p = g?.height || 0, x = Math.max(b, p), y = Math.max(200, Math.ceil(x));
|
|
35
|
+
h(y);
|
|
36
|
+
};
|
|
37
|
+
d();
|
|
38
|
+
const i = new ResizeObserver(() => d());
|
|
39
|
+
return i.observe(t.body), o && i.observe(o), () => {
|
|
40
|
+
i.disconnect(), r.unmount(), e.current = null;
|
|
41
|
+
};
|
|
42
|
+
}, [s]), /* @__PURE__ */ m.jsx(
|
|
43
|
+
"iframe",
|
|
44
|
+
{
|
|
45
|
+
ref: n,
|
|
46
|
+
sandbox: "allow-scripts allow-same-origin",
|
|
47
|
+
className: a,
|
|
48
|
+
style: {
|
|
49
|
+
width: "100%",
|
|
50
|
+
height: `${l}px`,
|
|
51
|
+
margin: "16px 0"
|
|
52
|
+
},
|
|
53
|
+
title: "HTML Sandbox"
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
export {
|
|
58
|
+
B as default
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=IframeSandbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IframeSandbox.js","sources":["../../../src/components/ContentRender/IframeSandbox.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { createRoot, Root } from \"react-dom/client\";\nimport SandboxApp from \"./SandboxApp\";\n\nexport interface IframeSandboxProps {\n content: string;\n className?: string;\n}\n\nconst IframeSandbox: React.FC<IframeSandboxProps> = ({\n content,\n className,\n}) => {\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const rootRef = useRef<Root | null>(null);\n const [height, setHeight] = useState(480);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n if (!iframe) return undefined;\n\n const doc = iframe.contentDocument;\n if (!doc) return undefined;\n\n doc.open();\n doc.write(`<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <style>\n html, body { margin: 0; padding: 0; }\n </style>\n </head>\n <body>\n <div id=\"root\"></div>\n </body>\n</html>`);\n doc.close();\n\n const rootEl = doc.getElementById(\"root\");\n if (!rootEl) return undefined;\n\n if (rootRef.current) {\n rootRef.current.unmount();\n }\n\n const root = createRoot(rootEl);\n rootRef.current = root;\n root.render(<SandboxApp html={content} />);\n\n const updateHeight = () => {\n if (!iframeRef.current || !doc.body) return;\n const bodyRect = doc.body.getBoundingClientRect();\n const htmlRect = doc.documentElement?.getBoundingClientRect();\n const bodyHeight = bodyRect.height;\n const htmlHeight = htmlRect?.height || 0;\n const contentHeight = Math.max(bodyHeight, htmlHeight);\n const nextHeight = Math.max(200, Math.ceil(contentHeight));\n setHeight(nextHeight);\n };\n\n updateHeight();\n\n const resizeObserver = new ResizeObserver(() => updateHeight());\n resizeObserver.observe(doc.body);\n if (rootEl) {\n resizeObserver.observe(rootEl);\n }\n\n return () => {\n resizeObserver.disconnect();\n root.unmount();\n rootRef.current = null;\n };\n }, [content]);\n\n return (\n <iframe\n ref={iframeRef}\n sandbox=\"allow-scripts allow-same-origin\"\n className={className}\n style={{\n width: \"100%\",\n height: `${height}px`,\n margin: \"16px 0\",\n }}\n title=\"HTML Sandbox\"\n />\n );\n};\n\nexport default IframeSandbox;\n"],"names":["IframeSandbox","content","className","iframeRef","useRef","rootRef","height","setHeight","useState","useEffect","iframe","doc","rootEl","root","createRoot","jsx","SandboxApp","updateHeight","bodyRect","htmlRect","bodyHeight","htmlHeight","contentHeight","nextHeight","resizeObserver"],"mappings":";;;;AASA,MAAMA,IAA8C,CAAC;AAAA,EACnD,SAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAMC,IAAYC,EAA0B,IAAI,GAC1CC,IAAUD,EAAoB,IAAI,GAClC,CAACE,GAAQC,CAAS,IAAIC,EAAS,GAAG;AAExC,SAAAC,EAAU,MAAM;AACd,UAAMC,IAASP,EAAU;AACzB,QAAI,CAACO,EAAQ;AAEb,UAAMC,IAAMD,EAAO;AACnB,QAAI,CAACC,EAAK;AAEV,IAAAA,EAAI,KAAA,GACJA,EAAI,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWN,GACJA,EAAI,MAAA;AAEJ,UAAMC,IAASD,EAAI,eAAe,MAAM;AACxC,QAAI,CAACC,EAAQ;AAEb,IAAIP,EAAQ,WACVA,EAAQ,QAAQ,QAAA;AAGlB,UAAMQ,IAAOC,EAAWF,CAAM;AAC9B,IAAAP,EAAQ,UAAUQ,GAClBA,EAAK,OAAOE,gBAAAA,MAACC,GAAA,EAAW,MAAMf,GAAS,CAAE;AAEzC,UAAMgB,IAAe,MAAM;AACzB,UAAI,CAACd,EAAU,WAAW,CAACQ,EAAI,KAAM;AACrC,YAAMO,IAAWP,EAAI,KAAK,sBAAA,GACpBQ,IAAWR,EAAI,iBAAiB,sBAAA,GAChCS,IAAaF,EAAS,QACtBG,IAAaF,GAAU,UAAU,GACjCG,IAAgB,KAAK,IAAIF,GAAYC,CAAU,GAC/CE,IAAa,KAAK,IAAI,KAAK,KAAK,KAAKD,CAAa,CAAC;AACzD,MAAAf,EAAUgB,CAAU;AAAA,IACtB;AAEA,IAAAN,EAAA;AAEA,UAAMO,IAAiB,IAAI,eAAe,MAAMP,GAAc;AAC9D,WAAAO,EAAe,QAAQb,EAAI,IAAI,GAC3BC,KACFY,EAAe,QAAQZ,CAAM,GAGxB,MAAM;AACX,MAAAY,EAAe,WAAA,GACfX,EAAK,QAAA,GACLR,EAAQ,UAAU;AAAA,IACpB;AAAA,EACF,GAAG,CAACJ,CAAO,CAAC,GAGVc,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKZ;AAAA,MACL,SAAQ;AAAA,MACR,WAAAD;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ,GAAGI,CAAM;AAAA,QACjB,QAAQ;AAAA,MAAA;AAAA,MAEV,OAAM;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { j as s } from "../../_virtual/jsx-runtime.js";
|
|
2
|
+
import { useRef as i, useEffect as u } from "react";
|
|
3
|
+
const p = ({ html: o }) => {
|
|
4
|
+
const c = i(null);
|
|
5
|
+
return u(() => {
|
|
6
|
+
const e = c.current;
|
|
7
|
+
if (!e) return;
|
|
8
|
+
e.innerHTML = "";
|
|
9
|
+
const t = document.createElement("div");
|
|
10
|
+
t.innerHTML = o, t.querySelectorAll("script").forEach((r) => {
|
|
11
|
+
const n = document.createElement("script");
|
|
12
|
+
Array.from(r.attributes).forEach((a) => {
|
|
13
|
+
n.setAttribute(a.name, a.value);
|
|
14
|
+
}), n.textContent = r.textContent, r.replaceWith(n);
|
|
15
|
+
}), e.append(...Array.from(t.childNodes));
|
|
16
|
+
}, [o]), /* @__PURE__ */ s.jsx("div", { ref: c });
|
|
17
|
+
};
|
|
18
|
+
export {
|
|
19
|
+
p as default
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=SandboxApp.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SandboxApp.js","sources":["../../../src/components/ContentRender/SandboxApp.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nexport interface SandboxAppProps {\n html: string;\n}\n\nconst SandboxApp: React.FC<SandboxAppProps> = ({ html }) => {\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n container.innerHTML = \"\";\n const wrapper = document.createElement(\"div\");\n wrapper.innerHTML = html;\n\n // Ensure inline scripts execute by recreating them after injection\n wrapper.querySelectorAll(\"script\").forEach((script) => {\n const replacement = document.createElement(\"script\");\n Array.from(script.attributes).forEach((attr) => {\n replacement.setAttribute(attr.name, attr.value);\n });\n replacement.textContent = script.textContent;\n script.replaceWith(replacement);\n });\n\n container.append(...Array.from(wrapper.childNodes));\n }, [html]);\n\n return <div ref={containerRef} />;\n};\n\nexport default SandboxApp;\n"],"names":["SandboxApp","html","containerRef","useRef","useEffect","container","wrapper","script","replacement","attr","jsx"],"mappings":";;AAMA,MAAMA,IAAwC,CAAC,EAAE,MAAAC,QAAW;AAC1D,QAAMC,IAAeC,EAAuB,IAAI;AAEhD,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAYH,EAAa;AAC/B,QAAI,CAACG,EAAW;AAEhB,IAAAA,EAAU,YAAY;AACtB,UAAMC,IAAU,SAAS,cAAc,KAAK;AAC5C,IAAAA,EAAQ,YAAYL,GAGpBK,EAAQ,iBAAiB,QAAQ,EAAE,QAAQ,CAACC,MAAW;AACrD,YAAMC,IAAc,SAAS,cAAc,QAAQ;AACnD,YAAM,KAAKD,EAAO,UAAU,EAAE,QAAQ,CAACE,MAAS;AAC9C,QAAAD,EAAY,aAAaC,EAAK,MAAMA,EAAK,KAAK;AAAA,MAChD,CAAC,GACDD,EAAY,cAAcD,EAAO,aACjCA,EAAO,YAAYC,CAAW;AAAA,IAChC,CAAC,GAEDH,EAAU,OAAO,GAAG,MAAM,KAAKC,EAAQ,UAAU,CAAC;AAAA,EACpD,GAAG,CAACL,CAAI,CAAC,GAEFS,gBAAAA,EAAAA,IAAC,OAAA,EAAI,KAAKR,EAAA,CAAc;AACjC;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { j as i } from "../../../_virtual/jsx-runtime.js";
|
|
2
2
|
import * as d from "react";
|
|
3
3
|
import n from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-textarea@1.10.2_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-textarea/es/TextArea.js";
|
|
4
|
-
import "../../../_virtual/
|
|
4
|
+
import "../../../_virtual/index3.js";
|
|
5
5
|
import "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-resize-observer@1.4.3_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-resize-observer/es/index.js";
|
|
6
6
|
import "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/hooks/useLayoutEffect.js";
|
|
7
7
|
import "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/raf.js";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-space-x-reverse:0}}}@layer theme{:root,:host{--font-sans:"PingFang SC",system-ui,sans-serif;--font-mono:"JetBrains Mono",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-800:oklch(47.6% .114 61.907);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-spin:spin 1s linear infinite;--aspect-video:16/9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:var(--background);--color-foreground:var(--foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-border:var(--border);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground)}}@layer base{@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:#e2e8f0}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;box-shadow:0 0 0 2px var(--color-primary)}@supports (color:color-mix(in lab, red, red)){:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary)10%,transparent)}}.font-mono{font-feature-settings:"liga" 0,"clig" 0,"calt" 0}}@layer components;@layer utilities{.\@container\/card-header{container:card-header/inline-size}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing)*2)}.top-4{top:calc(var(--spacing)*4)}.top-\[50\%\]{top:50%}.right-2{right:calc(var(--spacing)*2)}.right-4{right:calc(var(--spacing)*4)}.left-3{left:calc(var(--spacing)*3)}.left-\[50\%\]{left:50%}.z-10{z-index:10}.z-50{z-index:50}.order-first{order:-9999}.order-last{order:9999}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.row-start-3{grid-row-start:3}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.my-4{margin-block:calc(var(--spacing)*4)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-\[9px\]{margin-top:9px}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-\[2px\]{margin-bottom:2px}.ml-2{margin-left:calc(var(--spacing)*2)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.list-item{display:list-item}.table{display:table}.aspect-video{aspect-ratio:var(--aspect-video)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.size-8{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8)}.size-9{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}.size-10{width:calc(var(--spacing)*10);height:calc(var(--spacing)*10)}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-48{height:calc(var(--spacing)*48)}.h-auto{height:auto}.h-full{height:100%}.max-h-\[300px\]{max-height:300px}.min-h-\[32px\]{min-height:32px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-12{width:calc(var(--spacing)*12)}.w-24{width:calc(var(--spacing)*24)}.w-72{width:calc(var(--spacing)*72)}.w-\[360px\]{width:360px}.w-\[1024px\]{width:1024px}.w-auto{width:auto}.w-full{width:100%}.max-w-\[500px\]{max-width:500px}.max-w-lg{max-width:var(--container-lg)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\[300px\]{min-width:300px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.cursor-wait{cursor:wait}.resize{resize:both}.resize-none{resize:none}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.auto-rows-min{grid-auto-rows:min-content}.grid-rows-\[20px_1fr_20px\]{grid-template-rows:20px 1fr 20px}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.justify-items-center{justify-items:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-16{gap:calc(var(--spacing)*16)}.gap-\[24px\]{gap:24px}.gap-\[32px\]{gap:32px}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing)*2)}.gap-x-6{column-gap:calc(var(--spacing)*6)}.gap-y-\[9px\]{row-gap:9px}.self-end{align-self:flex-end}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\[calc\(var\(--radius\)-5px\)\]{border-radius:calc(var(--radius) - 5px)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-solid{--tw-border-style:solid;border-style:solid}.border-\[\#e5e5e5\]{border-color:#e5e5e5}.border-black\/\[\.08\]{border-color:#00000014}@supports (color:color-mix(in lab, red, red)){.border-black\/\[\.08\]{border-color:color-mix(in oklab,var(--color-black)8%,transparent)}}.border-blue-600{border-color:var(--color-blue-600)}.border-border{border-color:var(--color-border)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-muted{border-color:var(--color-muted)}.border-neutral-200{border-color:var(--color-neutral-200)}.border-transparent{border-color:#0000}.border-white\/40{border-color:#fff6}@supports (color:color-mix(in lab, red, red)){.border-white\/40{border-color:color-mix(in oklab,var(--color-white)40%,transparent)}}.bg-\[\#111\]{background-color:#111}.bg-\[\#D7D7D7\]{background-color:#d7d7d7}.bg-accent{background-color:var(--color-accent)}.bg-background,.bg-background\/80{background-color:var(--color-background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab,var(--color-background)80%,transparent)}}.bg-black{background-color:var(--color-black)}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab,var(--color-black)20%,transparent)}}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-black\/\[\.05\]{background-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.bg-black\/\[\.05\]{background-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-foreground{background-color:var(--color-foreground)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-muted\/10{background-color:var(--color-muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/10{background-color:color-mix(in oklab,var(--color-muted)10%,transparent)}}.bg-muted\/40{background-color:var(--color-muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab,var(--color-muted)40%,transparent)}}.bg-primary{background-color:var(--color-primary)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab,var(--color-white)90%,transparent)}}.fill-\[\#111\]{fill:#111}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing)*0)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.px-0{padding-inline:calc(var(--spacing)*0)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-3{padding-top:calc(var(--spacing)*3)}.pr-0{padding-right:calc(var(--spacing)*0)}.pr-3{padding-right:calc(var(--spacing)*3)}.pb-3{padding-bottom:calc(var(--spacing)*3)}.pb-20{padding-bottom:calc(var(--spacing)*20)}.pl-3{padding-left:calc(var(--spacing)*3)}.pl-8{padding-left:calc(var(--spacing)*8)}.text-center{text-align:center}.text-left{text-align:left}.font-\[family-name\:var\(--font-geist-mono\)\]{font-family:var(--font-geist-mono)}.font-\[family-name\:var\(--font-geist-sans\)\]{font-family:var(--font-geist-sans)}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-sm\/6{font-size:var(--text-sm);line-height:calc(var(--spacing)*6)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[16px\]{font-size:16px}.leading-5{--tw-leading:calc(var(--spacing)*5);line-height:calc(var(--spacing)*5)}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#0A0A0A\]{color:#0a0a0a}.text-background{color:var(--color-background)}.text-foreground{color:var(--color-foreground)}.text-gray-500{color:var(--color-gray-500)}.text-muted-foreground{color:var(--color-muted-foreground)}.text-neutral-900{color:var(--color-neutral-900)}.text-primary{color:var(--color-primary)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab,var(--color-white)70%,transparent)}}.text-yellow-600{color:var(--color-yellow-600)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-800{color:var(--color-yellow-800)}.italic{font-style:italic}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.05\)\]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--color-background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.group-has-\[\>input\]\/input-group\:pt-2\.5:is(:where(.group\/input-group):has(>input) *){padding-top:calc(var(--spacing)*2.5)}.group-has-\[\>input\]\/input-group\:pb-2\.5:is(:where(.group\/input-group):has(>input) *){padding-bottom:calc(var(--spacing)*2.5)}.group-data-\[disabled\=true\]\/input-group\:opacity-50:is(:where(.group\/input-group)[data-disabled=true] *){opacity:.5}.selection\:bg-primary ::selection{background-color:var(--color-primary)}.selection\:bg-primary::selection{background-color:var(--color-primary)}.selection\:text-primary-foreground ::selection{color:var(--color-primary-foreground)}.selection\:text-primary-foreground::selection{color:var(--color-primary-foreground)}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:h-7::file-selector-button{height:calc(var(--spacing)*7)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\:text-foreground::file-selector-button{color:var(--color-foreground)}.placeholder\:text-\[rgba\(99\,114\,128\,1\)\]::placeholder{color:#637280}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground)}@media (hover:hover){.hover\:border-blue-500:hover{border-color:var(--color-blue-500)}.hover\:border-transparent:hover{border-color:#0000}.hover\:bg-\[\#383838\]:hover{background-color:#383838}.hover\:bg-\[\#f2f2f2\]:hover{background-color:#f2f2f2}.hover\:bg-accent:hover{background-color:var(--color-accent)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-primary\/90:hover{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--color-primary)90%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--color-accent-foreground)}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:underline-offset-4:hover{text-underline-offset:4px}.hover\:opacity-100:hover{opacity:1}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-0:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.has-\[\>\[data-align\=block-end\]\]\:h-auto:has(>[data-align=block-end]){height:auto}.has-\[\>\[data-align\=block-end\]\]\:flex-col:has(>[data-align=block-end]){flex-direction:column}.has-\[\>\[data-align\=block-start\]\]\:h-auto:has(>[data-align=block-start]){height:auto}.has-\[\>\[data-align\=block-start\]\]\:flex-col:has(>[data-align=block-start]){flex-direction:column}.has-\[\>button\]\:mr-\[-0\.45rem\]:has(>button){margin-right:-.45rem}.has-\[\>button\]\:ml-\[-0\.45rem\]:has(>button){margin-left:-.45rem}.has-\[\>kbd\]\:mr-\[-0\.35rem\]:has(>kbd){margin-right:-.35rem}.has-\[\>kbd\]\:ml-\[-0\.35rem\]:has(>kbd){margin-left:-.35rem}.has-\[\>svg\]\:p-0:has(>svg){padding:calc(var(--spacing)*0)}.has-\[\>svg\]\:px-2:has(>svg){padding-inline:calc(var(--spacing)*2)}.has-\[\>svg\]\:px-2\.5:has(>svg){padding-inline:calc(var(--spacing)*2.5)}.has-\[\>svg\]\:px-3:has(>svg){padding-inline:calc(var(--spacing)*3)}.has-\[\>svg\]\:px-4:has(>svg){padding-inline:calc(var(--spacing)*4)}.has-\[\>textarea\]\:h-auto:has(>textarea){height:auto}.data-\[state\=open\]\:bg-accent[data-state=open]{background-color:var(--color-accent)}.data-\[state\=open\]\:text-muted-foreground[data-state=open]{color:var(--color-muted-foreground)}@media (min-width:40rem){.sm\:h-12{height:calc(var(--spacing)*12)}.sm\:w-auto{width:auto}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:justify-end{justify-content:flex-end}:where(.sm\:space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:var(--radius-lg)}.sm\:p-20{padding:calc(var(--spacing)*20)}.sm\:px-5{padding-inline:calc(var(--spacing)*5)}.sm\:text-left{text-align:left}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}@media (min-width:48rem){.md\:w-\[158px\]{width:158px}.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (prefers-color-scheme:dark){.dark\:border-white\/\[\.145\]{border-color:#ffffff25}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/\[\.145\]{border-color:color-mix(in oklab,var(--color-white)14.5%,transparent)}}.dark\:bg-transparent{background-color:#0000}.dark\:bg-white\/\[\.06\]{background-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/\[\.06\]{background-color:color-mix(in oklab,var(--color-white)6%,transparent)}}.dark\:invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}@media (hover:hover){.dark\:hover\:bg-\[\#1a1a1a\]:hover{background-color:#1a1a1a}.dark\:hover\:bg-\[\#ccc\]:hover{background-color:#ccc}.dark\:hover\:bg-accent\/50:hover{background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-accent\/50:hover{background-color:color-mix(in oklab,var(--color-accent)50%,transparent)}}}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\.border-b\]\:pb-3.border-b{padding-bottom:calc(var(--spacing)*3)}.\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--spacing)*6)}.\[\.border-t\]\:pt-3.border-t{padding-top:calc(var(--spacing)*3)}.\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--spacing)*6)}.has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3:has(>[data-align=block-end])>input{padding-top:calc(var(--spacing)*3)}.has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3:has(>[data-align=block-start])>input{padding-bottom:calc(var(--spacing)*3)}.has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-2:has(>[data-align=inline-end])>input{padding-right:calc(var(--spacing)*2)}.has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-2:has(>[data-align=inline-start])>input{padding-left:calc(var(--spacing)*2)}.\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\]>kbd{border-radius:calc(var(--radius) - 5px)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5>svg:not([class*=size-]){width:calc(var(--spacing)*3.5);height:calc(var(--spacing)*3.5)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4>svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.bg-border{background-color:#e2e8f0!important}.section-subtitle{color:#64748bb3;font-size:.75rem;line-height:1}.title-subtitle-container{align-content:flex-start;align-items:baseline;gap:.2rem .4rem;line-height:1.3}.section-title-main{font-size:1.125rem;font-weight:700}.section-title-form{font-size:1rem;font-weight:600;line-height:1.25}}#storybook-root{width:100%}:root{--background:#fff;--foreground:#171717;--primary:#0f63ee;--primary-foreground:#fff;--border:#e2e8f0;--muted:#f8fafc;--muted-foreground:#64748b;--accent:#f5f5f5;--accent-foreground:#0f172a}body{background:var(--background);color:var(--foreground);font-family:PingFang SC,Microsoft YaHei,Source Han Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@keyframes spin{to{transform:rotate(360deg)}}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-space-x-reverse:0}}}@layer theme{:root,:host{--font-sans:"PingFang SC",system-ui,sans-serif;--font-mono:"JetBrains Mono",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-800:oklch(47.6% .114 61.907);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-spin:spin 1s linear infinite;--aspect-video:16/9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:var(--background);--color-foreground:var(--foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-border:var(--border);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground)}}@layer base{@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:#e2e8f0}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;box-shadow:0 0 0 2px var(--color-primary)}@supports (color:color-mix(in lab, red, red)){:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary)10%,transparent)}}.font-mono{font-feature-settings:"liga" 0,"clig" 0,"calt" 0}}@layer components;@layer utilities{.\@container\/card-header{container:card-header/inline-size}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing)*2)}.top-4{top:calc(var(--spacing)*4)}.top-\[50\%\]{top:50%}.right-2{right:calc(var(--spacing)*2)}.right-4{right:calc(var(--spacing)*4)}.left-3{left:calc(var(--spacing)*3)}.left-\[50\%\]{left:50%}.z-10{z-index:10}.z-50{z-index:50}.order-first{order:-9999}.order-last{order:9999}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.row-start-3{grid-row-start:3}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.my-4{margin-block:calc(var(--spacing)*4)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-\[9px\]{margin-top:9px}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-\[2px\]{margin-bottom:2px}.ml-2{margin-left:calc(var(--spacing)*2)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.list-item{display:list-item}.table{display:table}.aspect-video{aspect-ratio:var(--aspect-video)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.size-8{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8)}.size-9{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}.size-10{width:calc(var(--spacing)*10);height:calc(var(--spacing)*10)}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-48{height:calc(var(--spacing)*48)}.h-auto{height:auto}.h-full{height:100%}.max-h-\[300px\]{max-height:300px}.min-h-\[32px\]{min-height:32px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-12{width:calc(var(--spacing)*12)}.w-24{width:calc(var(--spacing)*24)}.w-72{width:calc(var(--spacing)*72)}.w-\[360px\]{width:360px}.w-\[1024px\]{width:1024px}.w-auto{width:auto}.w-full{width:100%}.max-w-\[500px\]{max-width:500px}.max-w-lg{max-width:var(--container-lg)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\[300px\]{min-width:300px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.cursor-wait{cursor:wait}.resize{resize:both}.resize-none{resize:none}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.auto-rows-min{grid-auto-rows:min-content}.grid-rows-\[20px_1fr_20px\]{grid-template-rows:20px 1fr 20px}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.justify-items-center{justify-items:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-16{gap:calc(var(--spacing)*16)}.gap-\[24px\]{gap:24px}.gap-\[32px\]{gap:32px}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing)*2)}.gap-x-6{column-gap:calc(var(--spacing)*6)}.gap-y-\[9px\]{row-gap:9px}.self-end{align-self:flex-end}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\[calc\(var\(--radius\)-5px\)\]{border-radius:calc(var(--radius) - 5px)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-solid{--tw-border-style:solid;border-style:solid}.border-\[\#e5e5e5\]{border-color:#e5e5e5}.border-black\/\[\.08\]{border-color:#00000014}@supports (color:color-mix(in lab, red, red)){.border-black\/\[\.08\]{border-color:color-mix(in oklab,var(--color-black)8%,transparent)}}.border-blue-600{border-color:var(--color-blue-600)}.border-border{border-color:var(--color-border)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-muted{border-color:var(--color-muted)}.border-neutral-200{border-color:var(--color-neutral-200)}.border-transparent{border-color:#0000}.border-white\/40{border-color:#fff6}@supports (color:color-mix(in lab, red, red)){.border-white\/40{border-color:color-mix(in oklab,var(--color-white)40%,transparent)}}.bg-\[\#111\]{background-color:#111}.bg-\[\#D7D7D7\]{background-color:#d7d7d7}.bg-accent{background-color:var(--color-accent)}.bg-background,.bg-background\/80{background-color:var(--color-background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab,var(--color-background)80%,transparent)}}.bg-black{background-color:var(--color-black)}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab,var(--color-black)20%,transparent)}}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-black\/\[\.05\]{background-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.bg-black\/\[\.05\]{background-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-foreground{background-color:var(--color-foreground)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-muted\/10{background-color:var(--color-muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/10{background-color:color-mix(in oklab,var(--color-muted)10%,transparent)}}.bg-muted\/40{background-color:var(--color-muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab,var(--color-muted)40%,transparent)}}.bg-primary{background-color:var(--color-primary)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab,var(--color-white)90%,transparent)}}.fill-\[\#111\]{fill:#111}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing)*0)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.px-0{padding-inline:calc(var(--spacing)*0)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-3{padding-top:calc(var(--spacing)*3)}.pr-0{padding-right:calc(var(--spacing)*0)}.pr-3{padding-right:calc(var(--spacing)*3)}.pb-3{padding-bottom:calc(var(--spacing)*3)}.pb-20{padding-bottom:calc(var(--spacing)*20)}.pl-3{padding-left:calc(var(--spacing)*3)}.pl-8{padding-left:calc(var(--spacing)*8)}.text-center{text-align:center}.text-left{text-align:left}.font-\[family-name\:var\(--font-geist-mono\)\]{font-family:var(--font-geist-mono)}.font-\[family-name\:var\(--font-geist-sans\)\]{font-family:var(--font-geist-sans)}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-sm\/6{font-size:var(--text-sm);line-height:calc(var(--spacing)*6)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[16px\]{font-size:16px}.leading-5{--tw-leading:calc(var(--spacing)*5);line-height:calc(var(--spacing)*5)}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#0A0A0A\]{color:#0a0a0a}.text-background{color:var(--color-background)}.text-foreground{color:var(--color-foreground)}.text-gray-500{color:var(--color-gray-500)}.text-muted-foreground{color:var(--color-muted-foreground)}.text-neutral-900{color:var(--color-neutral-900)}.text-primary{color:var(--color-primary)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab,var(--color-white)70%,transparent)}}.text-yellow-600{color:var(--color-yellow-600)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-800{color:var(--color-yellow-800)}.italic{font-style:italic}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.05\)\]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--color-background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.group-has-\[\>input\]\/input-group\:pt-2\.5:is(:where(.group\/input-group):has(>input) *){padding-top:calc(var(--spacing)*2.5)}.group-has-\[\>input\]\/input-group\:pb-2\.5:is(:where(.group\/input-group):has(>input) *){padding-bottom:calc(var(--spacing)*2.5)}.group-data-\[disabled\=true\]\/input-group\:opacity-50:is(:where(.group\/input-group)[data-disabled=true] *){opacity:.5}.selection\:bg-primary ::selection{background-color:var(--color-primary)}.selection\:bg-primary::selection{background-color:var(--color-primary)}.selection\:text-primary-foreground ::selection{color:var(--color-primary-foreground)}.selection\:text-primary-foreground::selection{color:var(--color-primary-foreground)}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:h-7::file-selector-button{height:calc(var(--spacing)*7)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\:text-foreground::file-selector-button{color:var(--color-foreground)}.placeholder\:text-\[rgba\(99\,114\,128\,1\)\]::placeholder{color:#637280}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground)}@media (hover:hover){.hover\:border-blue-500:hover{border-color:var(--color-blue-500)}.hover\:border-transparent:hover{border-color:#0000}.hover\:bg-\[\#383838\]:hover{background-color:#383838}.hover\:bg-\[\#f2f2f2\]:hover{background-color:#f2f2f2}.hover\:bg-accent:hover{background-color:var(--color-accent)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-primary\/90:hover{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--color-primary)90%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--color-accent-foreground)}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:underline-offset-4:hover{text-underline-offset:4px}.hover\:opacity-100:hover{opacity:1}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-0:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.has-\[\>\[data-align\=block-end\]\]\:h-auto:has(>[data-align=block-end]){height:auto}.has-\[\>\[data-align\=block-end\]\]\:flex-col:has(>[data-align=block-end]){flex-direction:column}.has-\[\>\[data-align\=block-start\]\]\:h-auto:has(>[data-align=block-start]){height:auto}.has-\[\>\[data-align\=block-start\]\]\:flex-col:has(>[data-align=block-start]){flex-direction:column}.has-\[\>button\]\:mr-\[-0\.45rem\]:has(>button){margin-right:-.45rem}.has-\[\>button\]\:ml-\[-0\.45rem\]:has(>button){margin-left:-.45rem}.has-\[\>kbd\]\:mr-\[-0\.35rem\]:has(>kbd){margin-right:-.35rem}.has-\[\>kbd\]\:ml-\[-0\.35rem\]:has(>kbd){margin-left:-.35rem}.has-\[\>svg\]\:p-0:has(>svg){padding:calc(var(--spacing)*0)}.has-\[\>svg\]\:px-2:has(>svg){padding-inline:calc(var(--spacing)*2)}.has-\[\>svg\]\:px-2\.5:has(>svg){padding-inline:calc(var(--spacing)*2.5)}.has-\[\>svg\]\:px-3:has(>svg){padding-inline:calc(var(--spacing)*3)}.has-\[\>svg\]\:px-4:has(>svg){padding-inline:calc(var(--spacing)*4)}.has-\[\>textarea\]\:h-auto:has(>textarea){height:auto}.data-\[state\=open\]\:bg-accent[data-state=open]{background-color:var(--color-accent)}.data-\[state\=open\]\:text-muted-foreground[data-state=open]{color:var(--color-muted-foreground)}@media (min-width:40rem){.sm\:h-12{height:calc(var(--spacing)*12)}.sm\:w-auto{width:auto}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:justify-end{justify-content:flex-end}:where(.sm\:space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:var(--radius-lg)}.sm\:p-20{padding:calc(var(--spacing)*20)}.sm\:px-5{padding-inline:calc(var(--spacing)*5)}.sm\:text-left{text-align:left}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}@media (min-width:48rem){.md\:w-\[158px\]{width:158px}.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (prefers-color-scheme:dark){.dark\:border-white\/\[\.145\]{border-color:#ffffff25}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/\[\.145\]{border-color:color-mix(in oklab,var(--color-white)14.5%,transparent)}}.dark\:bg-transparent{background-color:#0000}.dark\:bg-white\/\[\.06\]{background-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/\[\.06\]{background-color:color-mix(in oklab,var(--color-white)6%,transparent)}}.dark\:invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}@media (hover:hover){.dark\:hover\:bg-\[\#1a1a1a\]:hover{background-color:#1a1a1a}.dark\:hover\:bg-\[\#ccc\]:hover{background-color:#ccc}.dark\:hover\:bg-accent\/50:hover{background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-accent\/50:hover{background-color:color-mix(in oklab,var(--color-accent)50%,transparent)}}}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\.border-b\]\:pb-3.border-b{padding-bottom:calc(var(--spacing)*3)}.\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--spacing)*6)}.\[\.border-t\]\:pt-3.border-t{padding-top:calc(var(--spacing)*3)}.\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--spacing)*6)}.has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3:has(>[data-align=block-end])>input{padding-top:calc(var(--spacing)*3)}.has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3:has(>[data-align=block-start])>input{padding-bottom:calc(var(--spacing)*3)}.has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-2:has(>[data-align=inline-end])>input{padding-right:calc(var(--spacing)*2)}.has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-2:has(>[data-align=inline-start])>input{padding-left:calc(var(--spacing)*2)}.\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\]>kbd{border-radius:calc(var(--radius) - 5px)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5>svg:not([class*=size-]){width:calc(var(--spacing)*3.5);height:calc(var(--spacing)*3.5)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4>svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.bg-border{background-color:#e2e8f0!important}.section-subtitle{color:#64748bb3;font-size:.75rem;line-height:1}.title-subtitle-container{align-content:flex-start;align-items:baseline;gap:.2rem .4rem;line-height:1.3}.section-title-main{font-size:1.125rem;font-weight:700}.section-title-form{font-size:1rem;font-weight:600;line-height:1.25}}#storybook-root{width:100%}:root{--background:#fff;--foreground:#171717;--primary:#0f63ee;--primary-foreground:#fff;--border:#e2e8f0;--muted:#f8fafc;--muted-foreground:#64748b;--accent:#f5f5f5;--accent-foreground:#0f172a}body{background:var(--background);color:var(--foreground);font-family:PingFang SC,Microsoft YaHei,Source Han Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@keyframes spin{to{transform:rotate(360deg)}}
|