payload-richtext-tiptap 0.0.82 → 0.0.84

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.
@@ -8,7 +8,7 @@ import { cn } from "../../lib/utils/index.js";
8
8
  import VideoBlockViewClientside from "../VideoBlock/components/VideoBlockViewClientside.js";
9
9
  import { SocialMediaEmbedServerside } from "../SocialMedia/SocialMediaEmbedServerside.js";
10
10
  function checkIfValidLink(link) {
11
- return link?.startsWith("http");
11
+ return typeof link === "string";
12
12
  }
13
13
  export function ContentEmbedSupport({ body }) {
14
14
  const [mounted, setMounted] = useState(false);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.tsx"],"sourcesContent":["\"use client\";\n\nimport { Portal } from \"@radix-ui/react-portal\";\nimport Image from \"next/image.js\";\nimport { useLayoutEffect, useState } from \"react\";\nimport {\n FacebookEmbed,\n InstagramEmbed,\n LinkedInEmbed,\n TikTokEmbed,\n XEmbed,\n YouTubeEmbed,\n} from \"react-social-media-embed\";\nimport { cn } from \"../../lib/utils/index.js\";\nimport VideoBlockViewClientside from \"../VideoBlock/components/VideoBlockViewClientside.js\";\nimport { SocialMediaEmbedServerside } from \"../SocialMedia/SocialMediaEmbedServerside.js\";\n\nfunction checkIfValidLink(link: string) {\n return link?.startsWith(\"http\");\n}\nexport function ContentEmbedSupport({ body }) {\n const [mounted, setMounted] = useState(false);\n useLayoutEffect(() => {\n setMounted(true);\n }, []);\n\n const renderContent = (content) => {\n switch (content.type) {\n case \"twitter\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <XEmbed url={content.attrs.url || \"\"} width={325} />\n </SocialMediaEmbedServerside>\n );\n case \"youtube\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <YouTubeEmbed url={content.attrs.url || \"\"} />\n </SocialMediaEmbedServerside>\n );\n case \"instagram\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <InstagramEmbed\n className=\"max-w-[328px]\"\n url={content.attrs.url || \"\"}\n width={328}\n captioned\n />\n </SocialMediaEmbedServerside>\n );\n case \"tiktok\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <TikTokEmbed\n className=\"max-w-[328px]\"\n url={content.attrs.url || \"\"}\n width={328}\n />\n </SocialMediaEmbedServerside>\n );\n case \"imageBlock\":\n return (\n <div\n className={cn(\"relative object-cover\", {\n \"aspect-video\": !content.attrs.height,\n })}\n style={{\n width: content.attrs.width || \"100%\",\n ...(content.attrs.height ? { height: content.attrs.height } : {}),\n }}\n >\n {/* @ts-ignore */}\n <Image\n src={content.attrs.src}\n alt={content.attrs.caption || \"\"}\n style={{ width: content.attrs.width }}\n fill\n />\n </div>\n );\n case \"videoBlock\":\n // @ts-ignore\n return <VideoBlockViewClientside node={content} />;\n case \"facebook\":\n return (\n <SocialMediaEmbedServerside>\n <FacebookEmbed url={content.attrs.url || \"\"} width={550} />\n </SocialMediaEmbedServerside>\n );\n case \"linkedin\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <LinkedInEmbed\n url={content.attrs.url || \"\"}\n width={325}\n height={570}\n />\n </SocialMediaEmbedServerside>\n );\n\n default:\n return null;\n }\n };\n if (!mounted) return null;\n return (\n <>\n {body.content\n .filter((content) => content?.attrs?.[\"data-id\"])\n .map((content) => {\n return (\n <Portal\n key={`embed-content-${content.attrs[\"data-id\"]}`}\n container={document?.querySelector(\n `[data-id='${content.attrs[\"data-id\"]}']`\n )}\n >\n {renderContent(content)}\n </Portal>\n );\n })}\n </>\n );\n}\n"],"names":["Portal","Image","useLayoutEffect","useState","FacebookEmbed","InstagramEmbed","LinkedInEmbed","TikTokEmbed","XEmbed","YouTubeEmbed","cn","VideoBlockViewClientside","SocialMediaEmbedServerside","checkIfValidLink","link","startsWith","ContentEmbedSupport","body","mounted","setMounted","renderContent","content","type","attrs","url","width","className","captioned","div","height","style","src","alt","caption","fill","node","filter","map","container","document","querySelector"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/serverside/ContentEmbedSupport.tsx"],"sourcesContent":["\"use client\";\n\nimport { Portal } from \"@radix-ui/react-portal\";\nimport Image from \"next/image.js\";\nimport { useLayoutEffect, useState } from \"react\";\nimport {\n FacebookEmbed,\n InstagramEmbed,\n LinkedInEmbed,\n TikTokEmbed,\n XEmbed,\n YouTubeEmbed,\n} from \"react-social-media-embed\";\nimport { cn } from \"../../lib/utils/index.js\";\nimport VideoBlockViewClientside from \"../VideoBlock/components/VideoBlockViewClientside.js\";\nimport { SocialMediaEmbedServerside } from \"../SocialMedia/SocialMediaEmbedServerside.js\";\n\nfunction checkIfValidLink(link: string) {\n return typeof link === \"string\";\n}\nexport function ContentEmbedSupport({ body }) {\n const [mounted, setMounted] = useState(false);\n useLayoutEffect(() => {\n setMounted(true);\n }, []);\n\n const renderContent = (content) => {\n switch (content.type) {\n case \"twitter\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <XEmbed url={content.attrs.url || \"\"} width={325} />\n </SocialMediaEmbedServerside>\n );\n case \"youtube\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <YouTubeEmbed url={content.attrs.url || \"\"} />\n </SocialMediaEmbedServerside>\n );\n case \"instagram\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <InstagramEmbed\n className=\"max-w-[328px]\"\n url={content.attrs.url || \"\"}\n width={328}\n captioned\n />\n </SocialMediaEmbedServerside>\n );\n case \"tiktok\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <TikTokEmbed\n className=\"max-w-[328px]\"\n url={content.attrs.url || \"\"}\n width={328}\n />\n </SocialMediaEmbedServerside>\n );\n case \"imageBlock\":\n return (\n <div\n className={cn(\"relative object-cover\", {\n \"aspect-video\": !content.attrs.height,\n })}\n style={{\n width: content.attrs.width || \"100%\",\n ...(content.attrs.height ? { height: content.attrs.height } : {}),\n }}\n >\n {/* @ts-ignore */}\n <Image\n src={content.attrs.src}\n alt={content.attrs.caption || \"\"}\n style={{ width: content.attrs.width }}\n fill\n />\n </div>\n );\n case \"videoBlock\":\n // @ts-ignore\n return <VideoBlockViewClientside node={content} />;\n case \"facebook\":\n return (\n <SocialMediaEmbedServerside>\n <FacebookEmbed url={content.attrs.url || \"\"} width={550} />\n </SocialMediaEmbedServerside>\n );\n case \"linkedin\":\n if (!checkIfValidLink(content.attrs.url)) {\n return null;\n }\n return (\n <SocialMediaEmbedServerside>\n <LinkedInEmbed\n url={content.attrs.url || \"\"}\n width={325}\n height={570}\n />\n </SocialMediaEmbedServerside>\n );\n\n default:\n return null;\n }\n };\n if (!mounted) return null;\n return (\n <>\n {body.content\n .filter((content) => content?.attrs?.[\"data-id\"])\n .map((content) => {\n return (\n <Portal\n key={`embed-content-${content.attrs[\"data-id\"]}`}\n container={document?.querySelector(\n `[data-id='${content.attrs[\"data-id\"]}']`\n )}\n >\n {renderContent(content)}\n </Portal>\n );\n })}\n </>\n );\n}\n"],"names":["Portal","Image","useLayoutEffect","useState","FacebookEmbed","InstagramEmbed","LinkedInEmbed","TikTokEmbed","XEmbed","YouTubeEmbed","cn","VideoBlockViewClientside","SocialMediaEmbedServerside","checkIfValidLink","link","ContentEmbedSupport","body","mounted","setMounted","renderContent","content","type","attrs","url","width","className","captioned","div","height","style","src","alt","caption","fill","node","filter","map","container","document","querySelector"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"SocialMediaEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/SocialMediaEditorPanel/SocialMediaEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAKrD,MAAM,MAAM,2BAA2B,GAAG;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,+BAG5B,2BAA2B;;;sBAIS,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;sBAOlE,KAAK,CAAC,SAAS;;;CAiBtB,CAAC;AAEF,eAAO,MAAM,sBAAsB,kGAOhC,2BAA2B,sBA6C7B,CAAC"}
1
+ {"version":3,"file":"SocialMediaEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/SocialMediaEditorPanel/SocialMediaEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAKrD,MAAM,MAAM,2BAA2B,GAAG;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,+BAG5B,2BAA2B;;;sBAIS,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;sBAOlE,KAAK,CAAC,SAAS;;;CAiBtB,CAAC;AAEF,eAAO,MAAM,sBAAsB,kGAOhC,2BAA2B,sBAiD7B,CAAC"}
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import React, { useCallback, useState } from "react";
3
3
  import { Button } from "../../ui/Button/Button.js";
4
4
  import { Surface } from "../../ui/Surface.js";
5
- import { CheckboxField } from "@payloadcms/ui";
5
+ import { CheckboxInput } from "@payloadcms/ui";
6
6
  export const useLinkEditorState = ({ initialSrc, onSetLink })=>{
7
7
  const [url, setUrl] = useState(initialSrc || "");
8
8
  const [isInline, setIsInline] = useState(false);
@@ -52,6 +52,25 @@ export const SocialMediaEditorPanel = ({ onSetLink, initialOpenInNewTab, initial
52
52
  onChange: state.onChange
53
53
  })
54
54
  }),
55
+ /*#__PURE__*/ _jsx("hr", {
56
+ className: "w-full py-3"
57
+ }),
58
+ /*#__PURE__*/ _jsxs("label", {
59
+ className: "flex w-full items-center",
60
+ children: [
61
+ /*#__PURE__*/ _jsx(CheckboxInput, {
62
+ className: "border border-solid border-slate-700",
63
+ checked: state.isInline,
64
+ onToggle: ()=>{
65
+ state.setIsInline((p)=>!p);
66
+ }
67
+ }),
68
+ /*#__PURE__*/ _jsx("span", {
69
+ className: "ml-2 cursor-pointer",
70
+ children: "Place embed inline"
71
+ })
72
+ ]
73
+ }),
55
74
  /*#__PURE__*/ _jsx(Button, {
56
75
  variant: "primary",
57
76
  buttonSize: "medium",
@@ -65,13 +84,6 @@ export const SocialMediaEditorPanel = ({ onSetLink, initialOpenInNewTab, initial
65
84
  /*#__PURE__*/ _jsx("span", {
66
85
  className: "mt-1 mb-0 text-sm",
67
86
  children: descriptionText
68
- }),
69
- /*#__PURE__*/ _jsx(CheckboxField, {
70
- label: "Inline Embed",
71
- checked: state.isInline,
72
- onChange: ()=>{
73
- state.setIsInline((p)=>!p);
74
- }
75
87
  })
76
88
  ]
77
89
  })
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/SocialMediaEditorPanel/SocialMediaEditorPanel.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { Button } from \"../../ui/Button/Button.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { CheckboxField, CheckboxInput } from \"@payloadcms/ui\";\n\nexport type SocialMediaEditorPanelProps = {\n initialSrc?: string;\n initialOpenInNewTab?: boolean;\n onSetLink: (src: string, className?: boolean) => void;\n placeholderText: string;\n buttonText: string;\n descriptionText: string;\n};\n\nexport const useLinkEditorState = ({\n initialSrc,\n onSetLink,\n}: SocialMediaEditorPanelProps) => {\n const [url, setUrl] = useState(initialSrc || \"\");\n const [isInline, setIsInline] = useState(false);\n\n const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n setUrl(event.target.value);\n }, []);\n\n // const isValidUrl = useMemo(() => /^(\\S+):(\\/\\/)?\\S+$/.test(url), [url]);\n\n const handleSubmit = useCallback(\n (e: React.FormEvent) => {\n e.preventDefault();\n // if (isValidUrl) {\n onSetLink(url, isInline);\n // }\n },\n [url, onSetLink, isInline]\n );\n\n return {\n url,\n setUrl,\n onChange,\n handleSubmit,\n isInline,\n setIsInline,\n };\n};\n\nexport const SocialMediaEditorPanel = ({\n onSetLink,\n initialOpenInNewTab,\n initialSrc,\n placeholderText,\n buttonText,\n descriptionText,\n}: SocialMediaEditorPanelProps) => {\n const state = useLinkEditorState({\n onSetLink,\n initialOpenInNewTab,\n initialSrc,\n placeholderText,\n buttonText,\n descriptionText,\n });\n\n return (\n <Surface className=\"p-2\">\n <div className=\"flex flex-col items-center gap-2 p-1\">\n <label className=\"flex items-center gap-2 p-2 rounded-lg bg-neutral-100 dark:bg-neutral-900 cursor-text w-full\">\n {/* <Icon icon={Link} className=\"flex-none text-black dark:text-white\" /> */}\n <input\n className=\"flex-1 bg-transparent outline-none min-w-[276px] text-black text-sm dark:text-white\"\n placeholder={placeholderText}\n value={state.url}\n onChange={state.onChange}\n />\n </label>\n <Button\n variant=\"primary\"\n buttonSize=\"medium\"\n className=\"w-full m-2\"\n type=\"button\"\n onClick={(e) => {\n state.handleSubmit(e);\n }}\n // disabled={!state.isValidUrl}\n >\n {buttonText}\n </Button>\n <span className=\"mt-1 mb-0 text-sm\">{descriptionText}</span>\n <CheckboxField\n label=\"Inline Embed\"\n checked={state.isInline}\n onChange={() => {\n state.setIsInline((p) => !p);\n }}\n />\n </div>\n </Surface>\n );\n};\n"],"names":["React","useCallback","useState","Button","Surface","CheckboxField","useLinkEditorState","initialSrc","onSetLink","url","setUrl","isInline","setIsInline","onChange","event","target","value","handleSubmit","e","preventDefault","SocialMediaEditorPanel","initialOpenInNewTab","placeholderText","buttonText","descriptionText","state","className","div","label","input","placeholder","variant","buttonSize","type","onClick","span","checked","p"],"mappings":";AAAA,OAAOA,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AACrD,SAASC,MAAM,QAAQ,4BAA4B;AACnD,SAASC,OAAO,QAAQ,sBAAsB;AAC9C,SAASC,aAAa,QAAuB,iBAAiB;AAW9D,OAAO,MAAMC,qBAAqB,CAAC,EACjCC,UAAU,EACVC,SAAS,EACmB;IAC5B,MAAM,CAACC,KAAKC,OAAO,GAAGR,SAASK,cAAc;IAC7C,MAAM,CAACI,UAAUC,YAAY,GAAGV,SAAS;IAEzC,MAAMW,WAAWZ,YAAY,CAACa;QAC5BJ,OAAOI,MAAMC,MAAM,CAACC,KAAK;IAC3B,GAAG,EAAE;IAEL,2EAA2E;IAE3E,MAAMC,eAAehB,YACnB,CAACiB;QACCA,EAAEC,cAAc;QAChB,oBAAoB;QACpBX,UAAUC,KAAKE;IACf,IAAI;IACN,GACA;QAACF;QAAKD;QAAWG;KAAS;IAG5B,OAAO;QACLF;QACAC;QACAG;QACAI;QACAN;QACAC;IACF;AACF,EAAE;AAEF,OAAO,MAAMQ,yBAAyB,CAAC,EACrCZ,SAAS,EACTa,mBAAmB,EACnBd,UAAU,EACVe,eAAe,EACfC,UAAU,EACVC,eAAe,EACa;IAC5B,MAAMC,QAAQnB,mBAAmB;QAC/BE;QACAa;QACAd;QACAe;QACAC;QACAC;IACF;IAEA,qBACE,KAACpB;QAAQsB,WAAU;kBACjB,cAAA,MAACC;YAAID,WAAU;;8BACb,KAACE;oBAAMF,WAAU;8BAEf,cAAA,KAACG;wBACCH,WAAU;wBACVI,aAAaR;wBACbN,OAAOS,MAAMhB,GAAG;wBAChBI,UAAUY,MAAMZ,QAAQ;;;8BAG5B,KAACV;oBACC4B,SAAQ;oBACRC,YAAW;oBACXN,WAAU;oBACVO,MAAK;oBACLC,SAAS,CAAChB;wBACRO,MAAMR,YAAY,CAACC;oBACrB;8BAGCK;;8BAEH,KAACY;oBAAKT,WAAU;8BAAqBF;;8BACrC,KAACnB;oBACCuB,OAAM;oBACNQ,SAASX,MAAMd,QAAQ;oBACvBE,UAAU;wBACRY,MAAMb,WAAW,CAAC,CAACyB,IAAM,CAACA;oBAC5B;;;;;AAKV,EAAE"}
1
+ {"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/SocialMediaEditorPanel/SocialMediaEditorPanel.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { Button } from \"../../ui/Button/Button.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { CheckboxInput } from \"@payloadcms/ui\";\n\nexport type SocialMediaEditorPanelProps = {\n initialSrc?: string;\n initialOpenInNewTab?: boolean;\n onSetLink: (src: string, className?: boolean) => void;\n placeholderText: string;\n buttonText: string;\n descriptionText: string;\n};\n\nexport const useLinkEditorState = ({\n initialSrc,\n onSetLink,\n}: SocialMediaEditorPanelProps) => {\n const [url, setUrl] = useState(initialSrc || \"\");\n const [isInline, setIsInline] = useState(false);\n\n const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n setUrl(event.target.value);\n }, []);\n\n // const isValidUrl = useMemo(() => /^(\\S+):(\\/\\/)?\\S+$/.test(url), [url]);\n\n const handleSubmit = useCallback(\n (e: React.FormEvent) => {\n e.preventDefault();\n // if (isValidUrl) {\n onSetLink(url, isInline);\n // }\n },\n [url, onSetLink, isInline]\n );\n\n return {\n url,\n setUrl,\n onChange,\n handleSubmit,\n isInline,\n setIsInline,\n };\n};\n\nexport const SocialMediaEditorPanel = ({\n onSetLink,\n initialOpenInNewTab,\n initialSrc,\n placeholderText,\n buttonText,\n descriptionText,\n}: SocialMediaEditorPanelProps) => {\n const state = useLinkEditorState({\n onSetLink,\n initialOpenInNewTab,\n initialSrc,\n placeholderText,\n buttonText,\n descriptionText,\n });\n\n return (\n <Surface className=\"p-2\">\n <div className=\"flex flex-col items-center gap-2 p-1\">\n <label className=\"flex items-center gap-2 p-2 rounded-lg bg-neutral-100 dark:bg-neutral-900 cursor-text w-full\">\n {/* <Icon icon={Link} className=\"flex-none text-black dark:text-white\" /> */}\n <input\n className=\"flex-1 bg-transparent outline-none min-w-[276px] text-black text-sm dark:text-white\"\n placeholder={placeholderText}\n value={state.url}\n onChange={state.onChange}\n />\n </label>\n <hr className=\"w-full py-3\" />\n <label className=\"flex w-full items-center\">\n <CheckboxInput\n className=\"border border-solid border-slate-700\"\n checked={state.isInline}\n onToggle={() => {\n state.setIsInline((p) => !p);\n }}\n />\n <span className=\"ml-2 cursor-pointer\">Place embed inline</span>\n </label>\n <Button\n variant=\"primary\"\n buttonSize=\"medium\"\n className=\"w-full m-2\"\n type=\"button\"\n onClick={(e) => {\n state.handleSubmit(e);\n }}\n // disabled={!state.isValidUrl}\n >\n {buttonText}\n </Button>\n <span className=\"mt-1 mb-0 text-sm\">{descriptionText}</span>\n </div>\n </Surface>\n );\n};\n"],"names":["React","useCallback","useState","Button","Surface","CheckboxInput","useLinkEditorState","initialSrc","onSetLink","url","setUrl","isInline","setIsInline","onChange","event","target","value","handleSubmit","e","preventDefault","SocialMediaEditorPanel","initialOpenInNewTab","placeholderText","buttonText","descriptionText","state","className","div","label","input","placeholder","hr","checked","onToggle","p","span","variant","buttonSize","type","onClick"],"mappings":";AAAA,OAAOA,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AACrD,SAASC,MAAM,QAAQ,4BAA4B;AACnD,SAASC,OAAO,QAAQ,sBAAsB;AAC9C,SAASC,aAAa,QAAQ,iBAAiB;AAW/C,OAAO,MAAMC,qBAAqB,CAAC,EACjCC,UAAU,EACVC,SAAS,EACmB;IAC5B,MAAM,CAACC,KAAKC,OAAO,GAAGR,SAASK,cAAc;IAC7C,MAAM,CAACI,UAAUC,YAAY,GAAGV,SAAS;IAEzC,MAAMW,WAAWZ,YAAY,CAACa;QAC5BJ,OAAOI,MAAMC,MAAM,CAACC,KAAK;IAC3B,GAAG,EAAE;IAEL,2EAA2E;IAE3E,MAAMC,eAAehB,YACnB,CAACiB;QACCA,EAAEC,cAAc;QAChB,oBAAoB;QACpBX,UAAUC,KAAKE;IACf,IAAI;IACN,GACA;QAACF;QAAKD;QAAWG;KAAS;IAG5B,OAAO;QACLF;QACAC;QACAG;QACAI;QACAN;QACAC;IACF;AACF,EAAE;AAEF,OAAO,MAAMQ,yBAAyB,CAAC,EACrCZ,SAAS,EACTa,mBAAmB,EACnBd,UAAU,EACVe,eAAe,EACfC,UAAU,EACVC,eAAe,EACa;IAC5B,MAAMC,QAAQnB,mBAAmB;QAC/BE;QACAa;QACAd;QACAe;QACAC;QACAC;IACF;IAEA,qBACE,KAACpB;QAAQsB,WAAU;kBACjB,cAAA,MAACC;YAAID,WAAU;;8BACb,KAACE;oBAAMF,WAAU;8BAEf,cAAA,KAACG;wBACCH,WAAU;wBACVI,aAAaR;wBACbN,OAAOS,MAAMhB,GAAG;wBAChBI,UAAUY,MAAMZ,QAAQ;;;8BAG5B,KAACkB;oBAAGL,WAAU;;8BACd,MAACE;oBAAMF,WAAU;;sCACf,KAACrB;4BACCqB,WAAU;4BACVM,SAASP,MAAMd,QAAQ;4BACvBsB,UAAU;gCACRR,MAAMb,WAAW,CAAC,CAACsB,IAAM,CAACA;4BAC5B;;sCAEF,KAACC;4BAAKT,WAAU;sCAAsB;;;;8BAExC,KAACvB;oBACCiC,SAAQ;oBACRC,YAAW;oBACXX,WAAU;oBACVY,MAAK;oBACLC,SAAS,CAACrB;wBACRO,MAAMR,YAAY,CAACC;oBACrB;8BAGCK;;8BAEH,KAACY;oBAAKT,WAAU;8BAAqBF;;;;;AAI7C,EAAE"}
@@ -2168,6 +2168,10 @@ select {
2168
2168
  border-top-width: 1px;
2169
2169
  }
2170
2170
 
2171
+ .border-solid {
2172
+ border-style: solid;
2173
+ }
2174
+
2171
2175
  .border-black {
2172
2176
  --tw-border-opacity: 1;
2173
2177
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
@@ -2196,6 +2200,11 @@ select {
2196
2200
  border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
2197
2201
  }
2198
2202
 
2203
+ .border-slate-700 {
2204
+ --tw-border-opacity: 1;
2205
+ border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
2206
+ }
2207
+
2199
2208
  .border-transparent {
2200
2209
  border-color: transparent;
2201
2210
  }
@@ -2406,6 +2415,11 @@ select {
2406
2415
  padding-bottom: 0.5rem;
2407
2416
  }
2408
2417
 
2418
+ .py-3 {
2419
+ padding-top: 0.75rem;
2420
+ padding-bottom: 0.75rem;
2421
+ }
2422
+
2409
2423
  .py-4 {
2410
2424
  padding-top: 1rem;
2411
2425
  padding-bottom: 1rem;