@lax-wp/design-system 0.14.13 → 0.14.14
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/components/forms/md-input/MarkdownPreview.cjs.js +1 -1
- package/dist/components/forms/md-input/MarkdownPreview.cjs.js.map +1 -1
- package/dist/components/forms/md-input/MarkdownPreview.d.ts +1 -0
- package/dist/components/forms/md-input/MarkdownPreview.es.js +8 -5
- package/dist/components/forms/md-input/MarkdownPreview.es.js.map +1 -1
- package/dist/design-system.css +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var O=Object.create;var q=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var G=(l,o,a,u)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of $(o))!F.call(l,t)&&t!==a&&q(l,t,{get:()=>o[t],enumerable:!(u=B(o,t))||u.enumerable});return l};var w=(l,o,a)=>(a=l!=null?O(P(l)):{},G(o||!l||!l.__esModule?q(a,"default",{value:l,enumerable:!0}):a,l));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var O=Object.create;var q=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var G=(l,o,a,u)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of $(o))!F.call(l,t)&&t!==a&&q(l,t,{get:()=>o[t],enumerable:!(u=B(o,t))||u.enumerable});return l};var w=(l,o,a)=>(a=l!=null?O(P(l)):{},G(o||!l||!l.__esModule?q(a,"default",{value:l,enumerable:!0}):a,l));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../_virtual/index.cjs.js"),_=require("react"),M=require("react-markdown"),T=require("remark-gfm"),W=require("rehype-raw"),Z=require("./remarkSplitRestartedLists.cjs.js");;/* empty css */const J=_.lazy(async()=>{const[{Prism:l},{vscDarkPlus:o}]=await Promise.all([import("react-syntax-highlighter"),import("react-syntax-highlighter/dist/esm/styles/prism")]);return{default:({language:u,value:t})=>e.jsx(l,{language:u,style:o,customStyle:{margin:0,padding:"1rem",fontSize:"0.875rem",lineHeight:"1.5",background:"transparent"},wrapLongLines:!0,children:t})}}),j=_.forwardRef(({content:l,className:o,linkTarget:a="_blank",enableSyntaxHighlighting:u=!0,noIndent:t=!1,showMinimalPreview:m=!1,acceptAdvanceContent:r=!0,enableCollapsible:x=!1,collapsedHeight:k=180,expandLabel:v="Show more",collapseLabel:S="Show less",animationDurationMs:N=300},R)=>{const g=_.useRef(null),[p,y]=_.useState(!1),[E,L]=_.useState(0),[z,D]=_.useState(!1);_.useEffect(()=>{if(!x||!g.current)return;const i=g.current,s=()=>{const d=i.scrollHeight;L(d);const h=d>k;D(h),h||y(!1)};s();const n=new ResizeObserver(()=>{s()});return n.observe(i),()=>{n.disconnect()}},[l,x,k]);const c=x&&z,H=c?p?E:k:void 0;return e.jsxs("div",{ref:R,className:"w-full",children:[e.jsxs("div",{className:b(c?"relative overflow-hidden":""),style:c?{maxHeight:`${H}px`,transition:`max-height ${N}ms ease`}:void 0,children:[e.jsx("div",{ref:g,className:b("markdown-preview prose prose-sm dark:prose-invert max-w-none","font-inter font-medium text-sm leading-5",m?"[&_h1]:text-sm [&_h1]:font-medium [&_h1]:my-0 [&_h1]:leading-5 [&_h1]:text-inherit":"[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-1 [&_h1]:leading-7 [&_h1]:text-inherit",m?"[&_h2]:text-sm [&_h2]:font-medium [&_h2]:my-0 [&_h2]:leading-5 [&_h2]:text-inherit":"[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-1 [&_h2]:leading-7 [&_h2]:text-inherit",m?"[&_h3]:text-sm [&_h3]:font-medium [&_h3]:my-0 [&_h3]:leading-5 [&_h3]:text-inherit":"[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-1 [&_h3]:leading-6 [&_h3]:text-inherit","[&_h4]:text-inherit [&_h5]:text-inherit [&_h6]:text-inherit",m?"[&_p]:my-0 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5":"[&_p]:my-1 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5",t?"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0":"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0",t?"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0":"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0","[&_ol+ol]:mt-2 [&_ul+ul]:mt-2 [&_ol+ul]:mt-2 [&_ul+ol]:mt-2","[&_li]:mt-0 [&_li]:mb-0 [&_li]:text-sm [&_li]:font-medium [&_li]:leading-5 [&_li::marker]:text-inherit","[&_li>p]:my-0 [&_li>p]:text-sm [&_li>p]:font-medium [&_li>p]:leading-5",t?"[&_li]:pl-0":"","[&_li:has(input[type='checkbox'])]:list-none",t?"[&_li:has(input[type='checkbox'])]:pl-0 [&_li:has(input[type='checkbox'])]:-ml-4.5":"[&_li:has(input[type='checkbox'])]:-ml-4.5","[&_li>input[type='checkbox']]:mr-2 [&_li>input[type='checkbox']]:w-[11px] [&_li>input[type='checkbox']]:h-[11px]",r?"[&_blockquote]:border-l-4 [&_blockquote]:border-neutral-300 [&_blockquote]:dark:border-neutral-600":"[&_blockquote]:border-0",r&&m?t?"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-0 [&_blockquote]:text-sm [&_blockquote]:font-medium":"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-4 [&_blockquote]:text-sm [&_blockquote]:font-medium":r?t?"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-0":"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-4":"[&_blockquote]:pl-0 [&_blockquote]:py-0 [&_blockquote]:not-italic [&_blockquote]:my-0","[&_a]:text-primary-600 [&_a]:dark:text-primary-400 [&_a]:underline","[&_strong]:font-semibold [&_em]:italic [&_u]:underline [&_del]:line-through",r?"[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-1":"[&_img]:hidden",r?"[&_table]:w-full [&_table]:border-collapse [&_table]:my-1":"[&_table]:block [&_table]:border-0 [&_table]:my-0",r?"[&_th]:border [&_th]:border-neutral-300 [&_th]:dark:border-neutral-600":"[&_th]:border-0",r?"[&_th]:px-3 [&_th]:py-2 [&_th]:bg-neutral-50 [&_th]:dark:bg-neutral-800":"[&_th]:px-0 [&_th]:py-0 [&_th]:bg-transparent",r?"[&_th]:font-semibold [&_th]:text-left":"[&_th]:font-normal [&_th]:inline [&_th]:after:content-['_']",r?"[&_td]:border [&_td]:border-neutral-300 [&_td]:dark:border-neutral-600":"[&_td]:border-0",r?"[&_td]:px-3 [&_td]:py-2":"[&_td]:px-0 [&_td]:py-0 [&_td]:inline [&_td]:after:content-['_']",r?"[&_hr]:my-1 [&_hr]:border-neutral-300 [&_hr]:dark:border-neutral-600":"[&_hr]:hidden","text-[#101828] dark:text-neutral-100",o),children:e.jsx(M,{remarkPlugins:[T,Z.remarkSplitRestartedLists],rehypePlugins:[W],components:{a({children:i,href:s,...n}){return e.jsx("a",{href:s,target:a,rel:a==="_blank"?"noopener noreferrer":void 0,...n,children:i})},img({src:i,alt:s,...n}){return e.jsx("img",{src:i,alt:s,className:"max-w-full h-auto rounded-lg my-3",loading:"lazy",...n})},code({className:i,children:s,...n}){const d=/language-(\w+)/.exec(i||""),h=!i||!d,f=d?d[1]:"text";return!h&&!r?e.jsx("span",{className:"whitespace-pre-wrap text-sm font-medium leading-5",style:{fontFamily:"inherit",fontWeight:"normal"},children:s}):!h&&u&&r?e.jsxs("div",{className:"relative my-3 rounded-lg overflow-hidden",children:[e.jsx("div",{className:"flex items-center justify-between px-4 py-2 bg-[#2D2D2D] dark:bg-[#161B22] border-b border-[#3E3E3E] dark:border-[#21262D]",children:e.jsx("span",{className:"text-xs font-mono text-neutral-400 dark:text-neutral-500 uppercase",children:f})}),e.jsx("div",{className:"bg-[#1E1E1E] dark:bg-[#0D1117]",children:e.jsx(_.Suspense,{fallback:e.jsx("pre",{style:{margin:0,padding:"1rem",fontSize:"0.875rem",lineHeight:"1.5",background:"transparent",whiteSpace:"pre-wrap"},children:String(s).replace(/\n$/,"")}),children:e.jsx(J,{language:f,value:String(s).replace(/\n$/,"")})})})]}):e.jsx("code",{className:b(i,r?"bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-mono text-[#101828] dark:text-neutral-200":"font-inherit text-sm leading-5 font-medium bg-transparent px-0 py-0"),...n,children:s})}},children:l||"*No content to display*"})}),c&&!p&&e.jsx("div",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-white via-white/80 to-transparent dark:from-black-700 dark:via-black-700/80 dark:to-transparent"})]}),c&&e.jsx("div",{className:"mt-2 flex justify-center items-center gap-2",children:e.jsxs("button",{type:"button",onClick:()=>y(i=>!i),className:"inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 font-medium text-sm",children:[p?S:v,e.jsx("span",{className:b("inline-flex transition-transform duration-300",p?"rotate-0":"rotate-180"),children:e.jsx("svg",{width:"8",height:"5",viewBox:"0 0 8 5",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M1.14167 4.19465L3.72833 1.60798L6.315 4.19465C6.575 4.45465 6.995 4.45465 7.255 4.19465C7.515 3.93465 7.515 3.51465 7.255 3.25465L4.195 0.194649C3.935 -0.0653515 3.515 -0.0653515 3.255 0.194649L0.195 3.25465C-0.065 3.51465 -0.065 3.93465 0.195 4.19465C0.455 4.44798 0.881667 4.45465 1.14167 4.19465Z",fill:"currentColor"})})})]})})]})});j.displayName="MarkdownPreview";exports.MarkdownPreview=j;
|
|
2
2
|
//# sourceMappingURL=MarkdownPreview.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownPreview.cjs.js","sources":["../../../../src/components/forms/md-input/MarkdownPreview.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, lazy, Suspense, useEffect, useRef, useState } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\nimport { remarkSplitRestartedLists } from \"./remarkSplitRestartedLists\";\n\n// react-syntax-highlighter is an OPTIONAL peer dependency. Load it (and its\n// Prism theme) lazily via dynamic import so it is only fetched when a highlighted\n// code block is actually rendered. This keeps it out of every consumer's main\n// bundle, lets it tree-shake away entirely when MarkdownPreview is unused, and\n// means consumers that never render markdown code blocks don't need to install\n// it at all (a bare static import would force every consumer to provide it).\nconst LazyCodeBlock = lazy(async () => {\n const [{ Prism }, { vscDarkPlus }] = await Promise.all([\n import(\"react-syntax-highlighter\"),\n import(\"react-syntax-highlighter/dist/esm/styles/prism\"),\n ]);\n const CodeBlock = ({ language, value }: { language: string; value: string }) => (\n <Prism\n language={language}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n style={vscDarkPlus as any}\n customStyle={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n }}\n wrapLongLines\n >\n {value}\n </Prism>\n );\n return { default: CodeBlock };\n});\n\n/**\n * Props for the MarkdownPreview component\n */\nexport interface MarkdownPreviewProps {\n /** Markdown content to display */\n content: string;\n /** Additional CSS classes for the wrapper container */\n className?: string;\n /** Link target behavior: '_blank' for new tab, '_self' for current tab */\n linkTarget?: \"_blank\" | \"_self\";\n /** Whether to show syntax highlighting for code blocks */\n enableSyntaxHighlighting?: boolean;\n /** Whether to remove indentation from lists and align all content to the left */\n noIndent?: boolean;\n /** Whether to display all content with uniform font size/weight (paragraph-like) while keeping formatting */\n showMinimalPreview?: boolean;\n /** Whether to accept and render advanced content (code blocks, blockquotes, tables, images) */\n acceptAdvanceContent?: boolean;\n /** Whether to show an animated Show more/Show less toggle */\n enableCollapsible?: boolean;\n /** Collapsed preview height in pixels when collapsible mode is enabled */\n collapsedHeight?: number;\n /** Label for the expand action */\n expandLabel?: string;\n /** Label for the collapse action */\n collapseLabel?: string;\n /** Expand/collapse animation duration in milliseconds */\n animationDurationMs?: number;\n}\n\n/**\n * MarkdownPreview component displays rendered markdown content.\n *\n * **Supported Markdown Features:**\n * - Headings (H1-H6)\n * - Text formatting (bold, italic, underline, strikethrough)\n * - Lists (bullet and numbered)\n * - Code blocks with syntax highlighting\n * - Inline code\n * - Block quotes\n * - Links with configurable target\n * - Images (responsive)\n * - Tables\n * - Horizontal rules\n *\n * **Features:**\n * - GFM (GitHub Flavored Markdown) support\n * - HTML support via rehype-raw\n * - Syntax highlighting for code blocks\n * - Responsive images\n * - Dark mode support\n * - Configurable link behavior\n * - Optional no-indent mode for aligned content\n * - Minimal preview mode (uniform typography)\n * - Toggle advanced content (code blocks, blockquotes, tables, images)\n *\n * @example\n * ```tsx\n * <MarkdownPreview\n * content=\"# Hello World\\n\\nThis is **bold** text.\"\n * linkTarget=\"_blank\"\n * noIndent={false}\n * showMinimalPreview={false}\n * acceptAdvanceContent={true}\n * />\n * ```\n */\nexport const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(\n (\n {\n content,\n className,\n linkTarget = \"_blank\",\n enableSyntaxHighlighting = true,\n noIndent = false,\n showMinimalPreview = false,\n acceptAdvanceContent = true,\n enableCollapsible = false,\n collapsedHeight = 180,\n expandLabel = \"Show more\",\n collapseLabel = \"Show less\",\n animationDurationMs = 300,\n },\n ref\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n const [contentHeight, setContentHeight] = useState(0);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n useEffect(() => {\n if (!enableCollapsible || !contentRef.current) {\n return;\n }\n\n const element = contentRef.current;\n\n const measureContent = () => {\n const measuredHeight = element.scrollHeight;\n setContentHeight(measuredHeight);\n const hasOverflow = measuredHeight > collapsedHeight;\n setIsOverflowing(hasOverflow);\n if (!hasOverflow) {\n setIsExpanded(false);\n }\n };\n\n measureContent();\n\n const resizeObserver = new ResizeObserver(() => {\n measureContent();\n });\n\n resizeObserver.observe(element);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [content, enableCollapsible, collapsedHeight]);\n\n const showToggle = enableCollapsible && isOverflowing;\n const animatedMaxHeight = showToggle\n ? isExpanded\n ? contentHeight\n : collapsedHeight\n : undefined;\n\n return (\n <div ref={ref} className=\"w-full\">\n <div\n className={cn(showToggle ? \"relative overflow-hidden\" : \"\")}\n style={\n showToggle\n ? {\n maxHeight: `${animatedMaxHeight}px`,\n transition: `max-height ${animationDurationMs}ms ease`,\n }\n : undefined\n }\n >\n <div\n ref={contentRef}\n className={cn(\n \"markdown-preview prose prose-sm dark:prose-invert max-w-none\",\n \"font-inter font-medium text-sm leading-5\",\n showMinimalPreview\n ? \"[&_h1]:text-sm [&_h1]:font-medium [&_h1]:my-0 [&_h1]:leading-5 [&_h1]:text-inherit\"\n : \"[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-1 [&_h1]:leading-7 [&_h1]:text-inherit\",\n showMinimalPreview\n ? \"[&_h2]:text-sm [&_h2]:font-medium [&_h2]:my-0 [&_h2]:leading-5 [&_h2]:text-inherit\"\n : \"[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-1 [&_h2]:leading-7 [&_h2]:text-inherit\",\n showMinimalPreview\n ? \"[&_h3]:text-sm [&_h3]:font-medium [&_h3]:my-0 [&_h3]:leading-5 [&_h3]:text-inherit\"\n : \"[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-1 [&_h3]:leading-6 [&_h3]:text-inherit\",\n \"[&_h4]:text-inherit [&_h5]:text-inherit [&_h6]:text-inherit\",\n showMinimalPreview\n ? \"[&_p]:my-0\"\n : \"[&_p]:my-1 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-6\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\"\n : noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\"\n : noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\",\n // Separate consecutive lists (a blank line in the source starts a new list)\n \"[&_ol+ol]:mt-2 [&_ul+ul]:mt-2 [&_ol+ul]:mt-2 [&_ul+ol]:mt-2\",\n \"[&_li]:mt-0 [&_li]:mb-0 [&_li]:text-sm [&_li]:font-medium [&_li]:leading-5 [&_li::marker]:text-inherit\",\n // Loose lists (any blank line between items) wrap each item's content\n // in a <p>; strip its margins so item spacing matches a tight list\n \"[&_li>p]:my-0 [&_li>p]:text-sm [&_li>p]:font-medium [&_li>p]:leading-5\",\n noIndent ? \"[&_li]:pl-0\" : \"\",\n \"[&_li:has(input[type='checkbox'])]:list-none\",\n noIndent\n ? \"[&_li:has(input[type='checkbox'])]:pl-0 [&_li:has(input[type='checkbox'])]:-ml-4.5\"\n : \"[&_li:has(input[type='checkbox'])]:-ml-4.5\",\n \"[&_li>input[type='checkbox']]:mr-2 [&_li>input[type='checkbox']]:w-[11px] [&_li>input[type='checkbox']]:h-[11px]\",\n acceptAdvanceContent\n ? \"[&_blockquote]:border-l-4 [&_blockquote]:border-neutral-300 [&_blockquote]:dark:border-neutral-600\"\n : \"[&_blockquote]:border-0\",\n acceptAdvanceContent && showMinimalPreview\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-0 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-4 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : acceptAdvanceContent\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-0\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-4\"\n : \"[&_blockquote]:pl-0 [&_blockquote]:py-0 [&_blockquote]:not-italic [&_blockquote]:my-0\",\n \"[&_a]:text-primary-600 [&_a]:dark:text-primary-400 [&_a]:underline\",\n \"[&_strong]:font-semibold [&_em]:italic [&_u]:underline [&_del]:line-through\",\n acceptAdvanceContent\n ? \"[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-1\"\n : \"[&_img]:hidden\",\n acceptAdvanceContent\n ? \"[&_table]:w-full [&_table]:border-collapse [&_table]:my-1\"\n : \"[&_table]:block [&_table]:border-0 [&_table]:my-0\",\n acceptAdvanceContent\n ? \"[&_th]:border [&_th]:border-neutral-300 [&_th]:dark:border-neutral-600\"\n : \"[&_th]:border-0\",\n acceptAdvanceContent\n ? \"[&_th]:px-3 [&_th]:py-2 [&_th]:bg-neutral-50 [&_th]:dark:bg-neutral-800\"\n : \"[&_th]:px-0 [&_th]:py-0 [&_th]:bg-transparent\",\n acceptAdvanceContent\n ? \"[&_th]:font-semibold [&_th]:text-left\"\n : \"[&_th]:font-normal [&_th]:inline [&_th]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_td]:border [&_td]:border-neutral-300 [&_td]:dark:border-neutral-600\"\n : \"[&_td]:border-0\",\n acceptAdvanceContent\n ? \"[&_td]:px-3 [&_td]:py-2\"\n : \"[&_td]:px-0 [&_td]:py-0 [&_td]:inline [&_td]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_hr]:my-1 [&_hr]:border-neutral-300 [&_hr]:dark:border-neutral-600\"\n : \"[&_hr]:hidden\",\n \"text-[#101828] dark:text-neutral-100\",\n className\n )}\n >\n <ReactMarkdown\n remarkPlugins={[remarkGfm, remarkSplitRestartedLists]}\n rehypePlugins={[rehypeRaw]}\n components={{\n a({ children, href, ...props }) {\n return (\n <a\n href={href}\n target={linkTarget}\n rel={\n linkTarget === \"_blank\"\n ? \"noopener noreferrer\"\n : undefined\n }\n {...props}\n >\n {children}\n </a>\n );\n },\n img({ src, alt, ...props }) {\n return (\n <img\n src={src}\n alt={alt}\n className=\"max-w-full h-auto rounded-lg my-3\"\n loading=\"lazy\"\n {...props}\n />\n );\n },\n code({ className, children, ...props }) {\n const match = /language-(\\w+)/.exec(className || \"\");\n const isInline = !className || !match;\n const language = match ? match[1] : \"text\";\n\n if (!isInline && !acceptAdvanceContent) {\n return (\n <span\n className=\"whitespace-pre-wrap text-sm font-medium leading-5\"\n style={{ fontFamily: \"inherit\", fontWeight: \"normal\" }}\n >\n {children}\n </span>\n );\n }\n\n if (\n !isInline &&\n enableSyntaxHighlighting &&\n acceptAdvanceContent\n ) {\n return (\n <div className=\"relative my-3 rounded-lg overflow-hidden\">\n <div className=\"flex items-center justify-between px-4 py-2 bg-[#2D2D2D] dark:bg-[#161B22] border-b border-[#3E3E3E] dark:border-[#21262D]\">\n <span className=\"text-xs font-mono text-neutral-400 dark:text-neutral-500 uppercase\">\n {language}\n </span>\n </div>\n <div className=\"bg-[#1E1E1E] dark:bg-[#0D1117]\">\n <Suspense\n fallback={\n <pre\n style={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n whiteSpace: \"pre-wrap\",\n }}\n >\n {String(children).replace(/\\n$/, \"\")}\n </pre>\n }\n >\n <LazyCodeBlock\n language={language}\n value={String(children).replace(/\\n$/, \"\")}\n />\n </Suspense>\n </div>\n </div>\n );\n }\n\n return (\n <code\n className={cn(\n className,\n acceptAdvanceContent\n ? \"bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-mono text-[#101828] dark:text-neutral-200\"\n : \"font-inherit text-sm leading-5 font-medium bg-transparent px-0 py-0\"\n )}\n {...props}\n >\n {children}\n </code>\n );\n },\n }}\n >\n {content || \"*No content to display*\"}\n </ReactMarkdown>\n </div>\n\n {showToggle && !isExpanded && (\n <div\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-white via-white/80 to-transparent dark:from-black-700 dark:via-black-700/80 dark:to-transparent\"\n />\n )}\n </div>\n\n {showToggle && (\n <div className=\"mt-2 flex justify-center items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded((prev) => !prev)}\n className=\"inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 font-medium text-sm\"\n >\n {isExpanded ? collapseLabel : expandLabel}\n <span\n className={cn(\n \"inline-flex transition-transform duration-300\",\n !isExpanded ? \"rotate-180\" : \"rotate-0\"\n )}\n >\n <svg\n width=\"8\"\n height=\"5\"\n viewBox=\"0 0 8 5\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.14167 4.19465L3.72833 1.60798L6.315 4.19465C6.575 4.45465 6.995 4.45465 7.255 4.19465C7.515 3.93465 7.515 3.51465 7.255 3.25465L4.195 0.194649C3.935 -0.0653515 3.515 -0.0653515 3.255 0.194649L0.195 3.25465C-0.065 3.51465 -0.065 3.93465 0.195 4.19465C0.455 4.44798 0.881667 4.45465 1.14167 4.19465Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </button>\n </div>\n )}\n </div>\n );\n }\n);\n\nMarkdownPreview.displayName = \"MarkdownPreview\";\n"],"names":["LazyCodeBlock","lazy","Prism","vscDarkPlus","language","value","jsx","MarkdownPreview","forwardRef","content","className","linkTarget","enableSyntaxHighlighting","noIndent","showMinimalPreview","acceptAdvanceContent","enableCollapsible","collapsedHeight","expandLabel","collapseLabel","animationDurationMs","ref","contentRef","useRef","isExpanded","setIsExpanded","useState","contentHeight","setContentHeight","isOverflowing","setIsOverflowing","useEffect","element","measureContent","measuredHeight","hasOverflow","resizeObserver","showToggle","animatedMaxHeight","jsxs","cn","ReactMarkdown","remarkGfm","remarkSplitRestartedLists","rehypeRaw","children","href","props","src","alt","match","isInline","Suspense","prev"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MarkdownPreview.cjs.js","sources":["../../../../src/components/forms/md-input/MarkdownPreview.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, lazy, Suspense, useEffect, useRef, useState } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\nimport { remarkSplitRestartedLists } from \"./remarkSplitRestartedLists\";\nimport \"./styles.css\";\n\n// react-syntax-highlighter is an OPTIONAL peer dependency. Load it (and its\n// Prism theme) lazily via dynamic import so it is only fetched when a highlighted\n// code block is actually rendered. This keeps it out of every consumer's main\n// bundle, lets it tree-shake away entirely when MarkdownPreview is unused, and\n// means consumers that never render markdown code blocks don't need to install\n// it at all (a bare static import would force every consumer to provide it).\nconst LazyCodeBlock = lazy(async () => {\n const [{ Prism }, { vscDarkPlus }] = await Promise.all([\n import(\"react-syntax-highlighter\"),\n import(\"react-syntax-highlighter/dist/esm/styles/prism\"),\n ]);\n const CodeBlock = ({ language, value }: { language: string; value: string }) => (\n <Prism\n language={language}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n style={vscDarkPlus as any}\n customStyle={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n }}\n wrapLongLines\n >\n {value}\n </Prism>\n );\n return { default: CodeBlock };\n});\n\n/**\n * Props for the MarkdownPreview component\n */\nexport interface MarkdownPreviewProps {\n /** Markdown content to display */\n content: string;\n /** Additional CSS classes for the wrapper container */\n className?: string;\n /** Link target behavior: '_blank' for new tab, '_self' for current tab */\n linkTarget?: \"_blank\" | \"_self\";\n /** Whether to show syntax highlighting for code blocks */\n enableSyntaxHighlighting?: boolean;\n /** Whether to remove indentation from lists and align all content to the left */\n noIndent?: boolean;\n /** Whether to display all content with uniform font size/weight (paragraph-like) while keeping formatting */\n showMinimalPreview?: boolean;\n /** Whether to accept and render advanced content (code blocks, blockquotes, tables, images) */\n acceptAdvanceContent?: boolean;\n /** Whether to show an animated Show more/Show less toggle */\n enableCollapsible?: boolean;\n /** Collapsed preview height in pixels when collapsible mode is enabled */\n collapsedHeight?: number;\n /** Label for the expand action */\n expandLabel?: string;\n /** Label for the collapse action */\n collapseLabel?: string;\n /** Expand/collapse animation duration in milliseconds */\n animationDurationMs?: number;\n}\n\n/**\n * MarkdownPreview component displays rendered markdown content.\n *\n * **Supported Markdown Features:**\n * - Headings (H1-H6)\n * - Text formatting (bold, italic, underline, strikethrough)\n * - Lists (bullet and numbered)\n * - Code blocks with syntax highlighting\n * - Inline code\n * - Block quotes\n * - Links with configurable target\n * - Images (responsive)\n * - Tables\n * - Horizontal rules\n *\n * **Features:**\n * - GFM (GitHub Flavored Markdown) support\n * - HTML support via rehype-raw\n * - Syntax highlighting for code blocks\n * - Responsive images\n * - Dark mode support\n * - Configurable link behavior\n * - Optional no-indent mode for aligned content\n * - Minimal preview mode (uniform typography)\n * - Toggle advanced content (code blocks, blockquotes, tables, images)\n *\n * @example\n * ```tsx\n * <MarkdownPreview\n * content=\"# Hello World\\n\\nThis is **bold** text.\"\n * linkTarget=\"_blank\"\n * noIndent={false}\n * showMinimalPreview={false}\n * acceptAdvanceContent={true}\n * />\n * ```\n */\nexport const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(\n (\n {\n content,\n className,\n linkTarget = \"_blank\",\n enableSyntaxHighlighting = true,\n noIndent = false,\n showMinimalPreview = false,\n acceptAdvanceContent = true,\n enableCollapsible = false,\n collapsedHeight = 180,\n expandLabel = \"Show more\",\n collapseLabel = \"Show less\",\n animationDurationMs = 300,\n },\n ref\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n const [contentHeight, setContentHeight] = useState(0);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n useEffect(() => {\n if (!enableCollapsible || !contentRef.current) {\n return;\n }\n\n const element = contentRef.current;\n\n const measureContent = () => {\n const measuredHeight = element.scrollHeight;\n setContentHeight(measuredHeight);\n const hasOverflow = measuredHeight > collapsedHeight;\n setIsOverflowing(hasOverflow);\n if (!hasOverflow) {\n setIsExpanded(false);\n }\n };\n\n measureContent();\n\n const resizeObserver = new ResizeObserver(() => {\n measureContent();\n });\n\n resizeObserver.observe(element);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [content, enableCollapsible, collapsedHeight]);\n\n const showToggle = enableCollapsible && isOverflowing;\n const animatedMaxHeight = showToggle\n ? isExpanded\n ? contentHeight\n : collapsedHeight\n : undefined;\n\n return (\n <div ref={ref} className=\"w-full\">\n <div\n className={cn(showToggle ? \"relative overflow-hidden\" : \"\")}\n style={\n showToggle\n ? {\n maxHeight: `${animatedMaxHeight}px`,\n transition: `max-height ${animationDurationMs}ms ease`,\n }\n : undefined\n }\n >\n <div\n ref={contentRef}\n className={cn(\n \"markdown-preview prose prose-sm dark:prose-invert max-w-none\",\n \"font-inter font-medium text-sm leading-5\",\n showMinimalPreview\n ? \"[&_h1]:text-sm [&_h1]:font-medium [&_h1]:my-0 [&_h1]:leading-5 [&_h1]:text-inherit\"\n : \"[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-1 [&_h1]:leading-7 [&_h1]:text-inherit\",\n showMinimalPreview\n ? \"[&_h2]:text-sm [&_h2]:font-medium [&_h2]:my-0 [&_h2]:leading-5 [&_h2]:text-inherit\"\n : \"[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-1 [&_h2]:leading-7 [&_h2]:text-inherit\",\n showMinimalPreview\n ? \"[&_h3]:text-sm [&_h3]:font-medium [&_h3]:my-0 [&_h3]:leading-5 [&_h3]:text-inherit\"\n : \"[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-1 [&_h3]:leading-6 [&_h3]:text-inherit\",\n \"[&_h4]:text-inherit [&_h5]:text-inherit [&_h6]:text-inherit\",\n // Paragraphs share the list items' size/weight/leading — only the\n // block spacing differs between minimal and default preview\n showMinimalPreview\n ? \"[&_p]:my-0 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5\"\n : \"[&_p]:my-1 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\"\n : noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\"\n : noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\",\n // Separate consecutive lists (a blank line in the source starts a new list)\n \"[&_ol+ol]:mt-2 [&_ul+ul]:mt-2 [&_ol+ul]:mt-2 [&_ul+ol]:mt-2\",\n \"[&_li]:mt-0 [&_li]:mb-0 [&_li]:text-sm [&_li]:font-medium [&_li]:leading-5 [&_li::marker]:text-inherit\",\n // Loose lists (any blank line between items) wrap each item's content\n // in a <p>; strip its margins so item spacing matches a tight list\n \"[&_li>p]:my-0 [&_li>p]:text-sm [&_li>p]:font-medium [&_li>p]:leading-5\",\n noIndent ? \"[&_li]:pl-0\" : \"\",\n \"[&_li:has(input[type='checkbox'])]:list-none\",\n noIndent\n ? \"[&_li:has(input[type='checkbox'])]:pl-0 [&_li:has(input[type='checkbox'])]:-ml-4.5\"\n : \"[&_li:has(input[type='checkbox'])]:-ml-4.5\",\n \"[&_li>input[type='checkbox']]:mr-2 [&_li>input[type='checkbox']]:w-[11px] [&_li>input[type='checkbox']]:h-[11px]\",\n acceptAdvanceContent\n ? \"[&_blockquote]:border-l-4 [&_blockquote]:border-neutral-300 [&_blockquote]:dark:border-neutral-600\"\n : \"[&_blockquote]:border-0\",\n acceptAdvanceContent && showMinimalPreview\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-0 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-4 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : acceptAdvanceContent\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-0\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-4\"\n : \"[&_blockquote]:pl-0 [&_blockquote]:py-0 [&_blockquote]:not-italic [&_blockquote]:my-0\",\n \"[&_a]:text-primary-600 [&_a]:dark:text-primary-400 [&_a]:underline\",\n \"[&_strong]:font-semibold [&_em]:italic [&_u]:underline [&_del]:line-through\",\n acceptAdvanceContent\n ? \"[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-1\"\n : \"[&_img]:hidden\",\n acceptAdvanceContent\n ? \"[&_table]:w-full [&_table]:border-collapse [&_table]:my-1\"\n : \"[&_table]:block [&_table]:border-0 [&_table]:my-0\",\n acceptAdvanceContent\n ? \"[&_th]:border [&_th]:border-neutral-300 [&_th]:dark:border-neutral-600\"\n : \"[&_th]:border-0\",\n acceptAdvanceContent\n ? \"[&_th]:px-3 [&_th]:py-2 [&_th]:bg-neutral-50 [&_th]:dark:bg-neutral-800\"\n : \"[&_th]:px-0 [&_th]:py-0 [&_th]:bg-transparent\",\n acceptAdvanceContent\n ? \"[&_th]:font-semibold [&_th]:text-left\"\n : \"[&_th]:font-normal [&_th]:inline [&_th]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_td]:border [&_td]:border-neutral-300 [&_td]:dark:border-neutral-600\"\n : \"[&_td]:border-0\",\n acceptAdvanceContent\n ? \"[&_td]:px-3 [&_td]:py-2\"\n : \"[&_td]:px-0 [&_td]:py-0 [&_td]:inline [&_td]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_hr]:my-1 [&_hr]:border-neutral-300 [&_hr]:dark:border-neutral-600\"\n : \"[&_hr]:hidden\",\n \"text-[#101828] dark:text-neutral-100\",\n className\n )}\n >\n <ReactMarkdown\n remarkPlugins={[remarkGfm, remarkSplitRestartedLists]}\n rehypePlugins={[rehypeRaw]}\n components={{\n a({ children, href, ...props }) {\n return (\n <a\n href={href}\n target={linkTarget}\n rel={\n linkTarget === \"_blank\"\n ? \"noopener noreferrer\"\n : undefined\n }\n {...props}\n >\n {children}\n </a>\n );\n },\n img({ src, alt, ...props }) {\n return (\n <img\n src={src}\n alt={alt}\n className=\"max-w-full h-auto rounded-lg my-3\"\n loading=\"lazy\"\n {...props}\n />\n );\n },\n code({ className, children, ...props }) {\n const match = /language-(\\w+)/.exec(className || \"\");\n const isInline = !className || !match;\n const language = match ? match[1] : \"text\";\n\n if (!isInline && !acceptAdvanceContent) {\n return (\n <span\n className=\"whitespace-pre-wrap text-sm font-medium leading-5\"\n style={{ fontFamily: \"inherit\", fontWeight: \"normal\" }}\n >\n {children}\n </span>\n );\n }\n\n if (\n !isInline &&\n enableSyntaxHighlighting &&\n acceptAdvanceContent\n ) {\n return (\n <div className=\"relative my-3 rounded-lg overflow-hidden\">\n <div className=\"flex items-center justify-between px-4 py-2 bg-[#2D2D2D] dark:bg-[#161B22] border-b border-[#3E3E3E] dark:border-[#21262D]\">\n <span className=\"text-xs font-mono text-neutral-400 dark:text-neutral-500 uppercase\">\n {language}\n </span>\n </div>\n <div className=\"bg-[#1E1E1E] dark:bg-[#0D1117]\">\n <Suspense\n fallback={\n <pre\n style={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n whiteSpace: \"pre-wrap\",\n }}\n >\n {String(children).replace(/\\n$/, \"\")}\n </pre>\n }\n >\n <LazyCodeBlock\n language={language}\n value={String(children).replace(/\\n$/, \"\")}\n />\n </Suspense>\n </div>\n </div>\n );\n }\n\n return (\n <code\n className={cn(\n className,\n acceptAdvanceContent\n ? \"bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-mono text-[#101828] dark:text-neutral-200\"\n : \"font-inherit text-sm leading-5 font-medium bg-transparent px-0 py-0\"\n )}\n {...props}\n >\n {children}\n </code>\n );\n },\n }}\n >\n {content || \"*No content to display*\"}\n </ReactMarkdown>\n </div>\n\n {showToggle && !isExpanded && (\n <div\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-white via-white/80 to-transparent dark:from-black-700 dark:via-black-700/80 dark:to-transparent\"\n />\n )}\n </div>\n\n {showToggle && (\n <div className=\"mt-2 flex justify-center items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded((prev) => !prev)}\n className=\"inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 font-medium text-sm\"\n >\n {isExpanded ? collapseLabel : expandLabel}\n <span\n className={cn(\n \"inline-flex transition-transform duration-300\",\n !isExpanded ? \"rotate-180\" : \"rotate-0\"\n )}\n >\n <svg\n width=\"8\"\n height=\"5\"\n viewBox=\"0 0 8 5\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.14167 4.19465L3.72833 1.60798L6.315 4.19465C6.575 4.45465 6.995 4.45465 7.255 4.19465C7.515 3.93465 7.515 3.51465 7.255 3.25465L4.195 0.194649C3.935 -0.0653515 3.515 -0.0653515 3.255 0.194649L0.195 3.25465C-0.065 3.51465 -0.065 3.93465 0.195 4.19465C0.455 4.44798 0.881667 4.45465 1.14167 4.19465Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </button>\n </div>\n )}\n </div>\n );\n }\n);\n\nMarkdownPreview.displayName = \"MarkdownPreview\";\n"],"names":["LazyCodeBlock","lazy","Prism","vscDarkPlus","language","value","jsx","MarkdownPreview","forwardRef","content","className","linkTarget","enableSyntaxHighlighting","noIndent","showMinimalPreview","acceptAdvanceContent","enableCollapsible","collapsedHeight","expandLabel","collapseLabel","animationDurationMs","ref","contentRef","useRef","isExpanded","setIsExpanded","useState","contentHeight","setContentHeight","isOverflowing","setIsOverflowing","useEffect","element","measureContent","measuredHeight","hasOverflow","resizeObserver","showToggle","animatedMaxHeight","jsxs","cn","ReactMarkdown","remarkGfm","remarkSplitRestartedLists","rehypeRaw","children","href","props","src","alt","match","isInline","Suspense","prev"],"mappings":"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"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { jsxs as d, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import h from "../../../_virtual/index.es.js";
|
|
3
|
-
import { forwardRef as H, useRef as B, useState as
|
|
3
|
+
import { forwardRef as H, useRef as B, useState as g, useEffect as O, Suspense as j, lazy as $ } from "react";
|
|
4
4
|
import F from "react-markdown";
|
|
5
5
|
import G from "remark-gfm";
|
|
6
6
|
import P from "rehype-raw";
|
|
7
7
|
import { remarkSplitRestartedLists as W } from "./remarkSplitRestartedLists.es.js";
|
|
8
|
+
/* empty css */
|
|
8
9
|
const Z = $(async () => {
|
|
9
10
|
const [{ Prism: s }, { vscDarkPlus: c }] = await Promise.all([
|
|
10
11
|
import("react-syntax-highlighter"),
|
|
@@ -41,7 +42,7 @@ const Z = $(async () => {
|
|
|
41
42
|
collapseLabel: N = "Show less",
|
|
42
43
|
animationDurationMs: v = 300
|
|
43
44
|
}, S) => {
|
|
44
|
-
const x = B(null), [u,
|
|
45
|
+
const x = B(null), [u, y] = g(!1), [E, L] = g(0), [z, R] = g(!1);
|
|
45
46
|
O(() => {
|
|
46
47
|
if (!k || !x.current)
|
|
47
48
|
return;
|
|
@@ -49,7 +50,7 @@ const Z = $(async () => {
|
|
|
49
50
|
const _ = l.scrollHeight;
|
|
50
51
|
L(_);
|
|
51
52
|
const m = _ > f;
|
|
52
|
-
R(m), m ||
|
|
53
|
+
R(m), m || y(!1);
|
|
53
54
|
};
|
|
54
55
|
r();
|
|
55
56
|
const i = new ResizeObserver(() => {
|
|
@@ -81,7 +82,9 @@ const Z = $(async () => {
|
|
|
81
82
|
a ? "[&_h2]:text-sm [&_h2]:font-medium [&_h2]:my-0 [&_h2]:leading-5 [&_h2]:text-inherit" : "[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-1 [&_h2]:leading-7 [&_h2]:text-inherit",
|
|
82
83
|
a ? "[&_h3]:text-sm [&_h3]:font-medium [&_h3]:my-0 [&_h3]:leading-5 [&_h3]:text-inherit" : "[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-1 [&_h3]:leading-6 [&_h3]:text-inherit",
|
|
83
84
|
"[&_h4]:text-inherit [&_h5]:text-inherit [&_h6]:text-inherit",
|
|
84
|
-
|
|
85
|
+
// Paragraphs share the list items' size/weight/leading — only the
|
|
86
|
+
// block spacing differs between minimal and default preview
|
|
87
|
+
a ? "[&_p]:my-0 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5" : "[&_p]:my-1 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5",
|
|
85
88
|
o ? "[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0" : "[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0",
|
|
86
89
|
o ? "[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0" : "[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0",
|
|
87
90
|
// Separate consecutive lists (a blank line in the source starts a new list)
|
|
@@ -208,7 +211,7 @@ const Z = $(async () => {
|
|
|
208
211
|
"button",
|
|
209
212
|
{
|
|
210
213
|
type: "button",
|
|
211
|
-
onClick: () =>
|
|
214
|
+
onClick: () => y((l) => !l),
|
|
212
215
|
className: "inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 font-medium text-sm",
|
|
213
216
|
children: [
|
|
214
217
|
u ? N : w,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownPreview.es.js","sources":["../../../../src/components/forms/md-input/MarkdownPreview.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, lazy, Suspense, useEffect, useRef, useState } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\nimport { remarkSplitRestartedLists } from \"./remarkSplitRestartedLists\";\n\n// react-syntax-highlighter is an OPTIONAL peer dependency. Load it (and its\n// Prism theme) lazily via dynamic import so it is only fetched when a highlighted\n// code block is actually rendered. This keeps it out of every consumer's main\n// bundle, lets it tree-shake away entirely when MarkdownPreview is unused, and\n// means consumers that never render markdown code blocks don't need to install\n// it at all (a bare static import would force every consumer to provide it).\nconst LazyCodeBlock = lazy(async () => {\n const [{ Prism }, { vscDarkPlus }] = await Promise.all([\n import(\"react-syntax-highlighter\"),\n import(\"react-syntax-highlighter/dist/esm/styles/prism\"),\n ]);\n const CodeBlock = ({ language, value }: { language: string; value: string }) => (\n <Prism\n language={language}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n style={vscDarkPlus as any}\n customStyle={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n }}\n wrapLongLines\n >\n {value}\n </Prism>\n );\n return { default: CodeBlock };\n});\n\n/**\n * Props for the MarkdownPreview component\n */\nexport interface MarkdownPreviewProps {\n /** Markdown content to display */\n content: string;\n /** Additional CSS classes for the wrapper container */\n className?: string;\n /** Link target behavior: '_blank' for new tab, '_self' for current tab */\n linkTarget?: \"_blank\" | \"_self\";\n /** Whether to show syntax highlighting for code blocks */\n enableSyntaxHighlighting?: boolean;\n /** Whether to remove indentation from lists and align all content to the left */\n noIndent?: boolean;\n /** Whether to display all content with uniform font size/weight (paragraph-like) while keeping formatting */\n showMinimalPreview?: boolean;\n /** Whether to accept and render advanced content (code blocks, blockquotes, tables, images) */\n acceptAdvanceContent?: boolean;\n /** Whether to show an animated Show more/Show less toggle */\n enableCollapsible?: boolean;\n /** Collapsed preview height in pixels when collapsible mode is enabled */\n collapsedHeight?: number;\n /** Label for the expand action */\n expandLabel?: string;\n /** Label for the collapse action */\n collapseLabel?: string;\n /** Expand/collapse animation duration in milliseconds */\n animationDurationMs?: number;\n}\n\n/**\n * MarkdownPreview component displays rendered markdown content.\n *\n * **Supported Markdown Features:**\n * - Headings (H1-H6)\n * - Text formatting (bold, italic, underline, strikethrough)\n * - Lists (bullet and numbered)\n * - Code blocks with syntax highlighting\n * - Inline code\n * - Block quotes\n * - Links with configurable target\n * - Images (responsive)\n * - Tables\n * - Horizontal rules\n *\n * **Features:**\n * - GFM (GitHub Flavored Markdown) support\n * - HTML support via rehype-raw\n * - Syntax highlighting for code blocks\n * - Responsive images\n * - Dark mode support\n * - Configurable link behavior\n * - Optional no-indent mode for aligned content\n * - Minimal preview mode (uniform typography)\n * - Toggle advanced content (code blocks, blockquotes, tables, images)\n *\n * @example\n * ```tsx\n * <MarkdownPreview\n * content=\"# Hello World\\n\\nThis is **bold** text.\"\n * linkTarget=\"_blank\"\n * noIndent={false}\n * showMinimalPreview={false}\n * acceptAdvanceContent={true}\n * />\n * ```\n */\nexport const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(\n (\n {\n content,\n className,\n linkTarget = \"_blank\",\n enableSyntaxHighlighting = true,\n noIndent = false,\n showMinimalPreview = false,\n acceptAdvanceContent = true,\n enableCollapsible = false,\n collapsedHeight = 180,\n expandLabel = \"Show more\",\n collapseLabel = \"Show less\",\n animationDurationMs = 300,\n },\n ref\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n const [contentHeight, setContentHeight] = useState(0);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n useEffect(() => {\n if (!enableCollapsible || !contentRef.current) {\n return;\n }\n\n const element = contentRef.current;\n\n const measureContent = () => {\n const measuredHeight = element.scrollHeight;\n setContentHeight(measuredHeight);\n const hasOverflow = measuredHeight > collapsedHeight;\n setIsOverflowing(hasOverflow);\n if (!hasOverflow) {\n setIsExpanded(false);\n }\n };\n\n measureContent();\n\n const resizeObserver = new ResizeObserver(() => {\n measureContent();\n });\n\n resizeObserver.observe(element);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [content, enableCollapsible, collapsedHeight]);\n\n const showToggle = enableCollapsible && isOverflowing;\n const animatedMaxHeight = showToggle\n ? isExpanded\n ? contentHeight\n : collapsedHeight\n : undefined;\n\n return (\n <div ref={ref} className=\"w-full\">\n <div\n className={cn(showToggle ? \"relative overflow-hidden\" : \"\")}\n style={\n showToggle\n ? {\n maxHeight: `${animatedMaxHeight}px`,\n transition: `max-height ${animationDurationMs}ms ease`,\n }\n : undefined\n }\n >\n <div\n ref={contentRef}\n className={cn(\n \"markdown-preview prose prose-sm dark:prose-invert max-w-none\",\n \"font-inter font-medium text-sm leading-5\",\n showMinimalPreview\n ? \"[&_h1]:text-sm [&_h1]:font-medium [&_h1]:my-0 [&_h1]:leading-5 [&_h1]:text-inherit\"\n : \"[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-1 [&_h1]:leading-7 [&_h1]:text-inherit\",\n showMinimalPreview\n ? \"[&_h2]:text-sm [&_h2]:font-medium [&_h2]:my-0 [&_h2]:leading-5 [&_h2]:text-inherit\"\n : \"[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-1 [&_h2]:leading-7 [&_h2]:text-inherit\",\n showMinimalPreview\n ? \"[&_h3]:text-sm [&_h3]:font-medium [&_h3]:my-0 [&_h3]:leading-5 [&_h3]:text-inherit\"\n : \"[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-1 [&_h3]:leading-6 [&_h3]:text-inherit\",\n \"[&_h4]:text-inherit [&_h5]:text-inherit [&_h6]:text-inherit\",\n showMinimalPreview\n ? \"[&_p]:my-0\"\n : \"[&_p]:my-1 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-6\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\"\n : noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\"\n : noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\",\n // Separate consecutive lists (a blank line in the source starts a new list)\n \"[&_ol+ol]:mt-2 [&_ul+ul]:mt-2 [&_ol+ul]:mt-2 [&_ul+ol]:mt-2\",\n \"[&_li]:mt-0 [&_li]:mb-0 [&_li]:text-sm [&_li]:font-medium [&_li]:leading-5 [&_li::marker]:text-inherit\",\n // Loose lists (any blank line between items) wrap each item's content\n // in a <p>; strip its margins so item spacing matches a tight list\n \"[&_li>p]:my-0 [&_li>p]:text-sm [&_li>p]:font-medium [&_li>p]:leading-5\",\n noIndent ? \"[&_li]:pl-0\" : \"\",\n \"[&_li:has(input[type='checkbox'])]:list-none\",\n noIndent\n ? \"[&_li:has(input[type='checkbox'])]:pl-0 [&_li:has(input[type='checkbox'])]:-ml-4.5\"\n : \"[&_li:has(input[type='checkbox'])]:-ml-4.5\",\n \"[&_li>input[type='checkbox']]:mr-2 [&_li>input[type='checkbox']]:w-[11px] [&_li>input[type='checkbox']]:h-[11px]\",\n acceptAdvanceContent\n ? \"[&_blockquote]:border-l-4 [&_blockquote]:border-neutral-300 [&_blockquote]:dark:border-neutral-600\"\n : \"[&_blockquote]:border-0\",\n acceptAdvanceContent && showMinimalPreview\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-0 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-4 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : acceptAdvanceContent\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-0\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-4\"\n : \"[&_blockquote]:pl-0 [&_blockquote]:py-0 [&_blockquote]:not-italic [&_blockquote]:my-0\",\n \"[&_a]:text-primary-600 [&_a]:dark:text-primary-400 [&_a]:underline\",\n \"[&_strong]:font-semibold [&_em]:italic [&_u]:underline [&_del]:line-through\",\n acceptAdvanceContent\n ? \"[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-1\"\n : \"[&_img]:hidden\",\n acceptAdvanceContent\n ? \"[&_table]:w-full [&_table]:border-collapse [&_table]:my-1\"\n : \"[&_table]:block [&_table]:border-0 [&_table]:my-0\",\n acceptAdvanceContent\n ? \"[&_th]:border [&_th]:border-neutral-300 [&_th]:dark:border-neutral-600\"\n : \"[&_th]:border-0\",\n acceptAdvanceContent\n ? \"[&_th]:px-3 [&_th]:py-2 [&_th]:bg-neutral-50 [&_th]:dark:bg-neutral-800\"\n : \"[&_th]:px-0 [&_th]:py-0 [&_th]:bg-transparent\",\n acceptAdvanceContent\n ? \"[&_th]:font-semibold [&_th]:text-left\"\n : \"[&_th]:font-normal [&_th]:inline [&_th]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_td]:border [&_td]:border-neutral-300 [&_td]:dark:border-neutral-600\"\n : \"[&_td]:border-0\",\n acceptAdvanceContent\n ? \"[&_td]:px-3 [&_td]:py-2\"\n : \"[&_td]:px-0 [&_td]:py-0 [&_td]:inline [&_td]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_hr]:my-1 [&_hr]:border-neutral-300 [&_hr]:dark:border-neutral-600\"\n : \"[&_hr]:hidden\",\n \"text-[#101828] dark:text-neutral-100\",\n className\n )}\n >\n <ReactMarkdown\n remarkPlugins={[remarkGfm, remarkSplitRestartedLists]}\n rehypePlugins={[rehypeRaw]}\n components={{\n a({ children, href, ...props }) {\n return (\n <a\n href={href}\n target={linkTarget}\n rel={\n linkTarget === \"_blank\"\n ? \"noopener noreferrer\"\n : undefined\n }\n {...props}\n >\n {children}\n </a>\n );\n },\n img({ src, alt, ...props }) {\n return (\n <img\n src={src}\n alt={alt}\n className=\"max-w-full h-auto rounded-lg my-3\"\n loading=\"lazy\"\n {...props}\n />\n );\n },\n code({ className, children, ...props }) {\n const match = /language-(\\w+)/.exec(className || \"\");\n const isInline = !className || !match;\n const language = match ? match[1] : \"text\";\n\n if (!isInline && !acceptAdvanceContent) {\n return (\n <span\n className=\"whitespace-pre-wrap text-sm font-medium leading-5\"\n style={{ fontFamily: \"inherit\", fontWeight: \"normal\" }}\n >\n {children}\n </span>\n );\n }\n\n if (\n !isInline &&\n enableSyntaxHighlighting &&\n acceptAdvanceContent\n ) {\n return (\n <div className=\"relative my-3 rounded-lg overflow-hidden\">\n <div className=\"flex items-center justify-between px-4 py-2 bg-[#2D2D2D] dark:bg-[#161B22] border-b border-[#3E3E3E] dark:border-[#21262D]\">\n <span className=\"text-xs font-mono text-neutral-400 dark:text-neutral-500 uppercase\">\n {language}\n </span>\n </div>\n <div className=\"bg-[#1E1E1E] dark:bg-[#0D1117]\">\n <Suspense\n fallback={\n <pre\n style={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n whiteSpace: \"pre-wrap\",\n }}\n >\n {String(children).replace(/\\n$/, \"\")}\n </pre>\n }\n >\n <LazyCodeBlock\n language={language}\n value={String(children).replace(/\\n$/, \"\")}\n />\n </Suspense>\n </div>\n </div>\n );\n }\n\n return (\n <code\n className={cn(\n className,\n acceptAdvanceContent\n ? \"bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-mono text-[#101828] dark:text-neutral-200\"\n : \"font-inherit text-sm leading-5 font-medium bg-transparent px-0 py-0\"\n )}\n {...props}\n >\n {children}\n </code>\n );\n },\n }}\n >\n {content || \"*No content to display*\"}\n </ReactMarkdown>\n </div>\n\n {showToggle && !isExpanded && (\n <div\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-white via-white/80 to-transparent dark:from-black-700 dark:via-black-700/80 dark:to-transparent\"\n />\n )}\n </div>\n\n {showToggle && (\n <div className=\"mt-2 flex justify-center items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded((prev) => !prev)}\n className=\"inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 font-medium text-sm\"\n >\n {isExpanded ? collapseLabel : expandLabel}\n <span\n className={cn(\n \"inline-flex transition-transform duration-300\",\n !isExpanded ? \"rotate-180\" : \"rotate-0\"\n )}\n >\n <svg\n width=\"8\"\n height=\"5\"\n viewBox=\"0 0 8 5\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.14167 4.19465L3.72833 1.60798L6.315 4.19465C6.575 4.45465 6.995 4.45465 7.255 4.19465C7.515 3.93465 7.515 3.51465 7.255 3.25465L4.195 0.194649C3.935 -0.0653515 3.515 -0.0653515 3.255 0.194649L0.195 3.25465C-0.065 3.51465 -0.065 3.93465 0.195 4.19465C0.455 4.44798 0.881667 4.45465 1.14167 4.19465Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </button>\n </div>\n )}\n </div>\n );\n }\n);\n\nMarkdownPreview.displayName = \"MarkdownPreview\";\n"],"names":["LazyCodeBlock","lazy","Prism","vscDarkPlus","language","value","jsx","MarkdownPreview","forwardRef","content","className","linkTarget","enableSyntaxHighlighting","noIndent","showMinimalPreview","acceptAdvanceContent","enableCollapsible","collapsedHeight","expandLabel","collapseLabel","animationDurationMs","ref","contentRef","useRef","isExpanded","setIsExpanded","useState","contentHeight","setContentHeight","isOverflowing","setIsOverflowing","useEffect","element","measureContent","measuredHeight","hasOverflow","resizeObserver","showToggle","animatedMaxHeight","jsxs","cn","ReactMarkdown","remarkGfm","remarkSplitRestartedLists","rehypeRaw","children","href","props","src","alt","match","isInline","Suspense","prev"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MarkdownPreview.es.js","sources":["../../../../src/components/forms/md-input/MarkdownPreview.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, lazy, Suspense, useEffect, useRef, useState } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\nimport { remarkSplitRestartedLists } from \"./remarkSplitRestartedLists\";\nimport \"./styles.css\";\n\n// react-syntax-highlighter is an OPTIONAL peer dependency. Load it (and its\n// Prism theme) lazily via dynamic import so it is only fetched when a highlighted\n// code block is actually rendered. This keeps it out of every consumer's main\n// bundle, lets it tree-shake away entirely when MarkdownPreview is unused, and\n// means consumers that never render markdown code blocks don't need to install\n// it at all (a bare static import would force every consumer to provide it).\nconst LazyCodeBlock = lazy(async () => {\n const [{ Prism }, { vscDarkPlus }] = await Promise.all([\n import(\"react-syntax-highlighter\"),\n import(\"react-syntax-highlighter/dist/esm/styles/prism\"),\n ]);\n const CodeBlock = ({ language, value }: { language: string; value: string }) => (\n <Prism\n language={language}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n style={vscDarkPlus as any}\n customStyle={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n }}\n wrapLongLines\n >\n {value}\n </Prism>\n );\n return { default: CodeBlock };\n});\n\n/**\n * Props for the MarkdownPreview component\n */\nexport interface MarkdownPreviewProps {\n /** Markdown content to display */\n content: string;\n /** Additional CSS classes for the wrapper container */\n className?: string;\n /** Link target behavior: '_blank' for new tab, '_self' for current tab */\n linkTarget?: \"_blank\" | \"_self\";\n /** Whether to show syntax highlighting for code blocks */\n enableSyntaxHighlighting?: boolean;\n /** Whether to remove indentation from lists and align all content to the left */\n noIndent?: boolean;\n /** Whether to display all content with uniform font size/weight (paragraph-like) while keeping formatting */\n showMinimalPreview?: boolean;\n /** Whether to accept and render advanced content (code blocks, blockquotes, tables, images) */\n acceptAdvanceContent?: boolean;\n /** Whether to show an animated Show more/Show less toggle */\n enableCollapsible?: boolean;\n /** Collapsed preview height in pixels when collapsible mode is enabled */\n collapsedHeight?: number;\n /** Label for the expand action */\n expandLabel?: string;\n /** Label for the collapse action */\n collapseLabel?: string;\n /** Expand/collapse animation duration in milliseconds */\n animationDurationMs?: number;\n}\n\n/**\n * MarkdownPreview component displays rendered markdown content.\n *\n * **Supported Markdown Features:**\n * - Headings (H1-H6)\n * - Text formatting (bold, italic, underline, strikethrough)\n * - Lists (bullet and numbered)\n * - Code blocks with syntax highlighting\n * - Inline code\n * - Block quotes\n * - Links with configurable target\n * - Images (responsive)\n * - Tables\n * - Horizontal rules\n *\n * **Features:**\n * - GFM (GitHub Flavored Markdown) support\n * - HTML support via rehype-raw\n * - Syntax highlighting for code blocks\n * - Responsive images\n * - Dark mode support\n * - Configurable link behavior\n * - Optional no-indent mode for aligned content\n * - Minimal preview mode (uniform typography)\n * - Toggle advanced content (code blocks, blockquotes, tables, images)\n *\n * @example\n * ```tsx\n * <MarkdownPreview\n * content=\"# Hello World\\n\\nThis is **bold** text.\"\n * linkTarget=\"_blank\"\n * noIndent={false}\n * showMinimalPreview={false}\n * acceptAdvanceContent={true}\n * />\n * ```\n */\nexport const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(\n (\n {\n content,\n className,\n linkTarget = \"_blank\",\n enableSyntaxHighlighting = true,\n noIndent = false,\n showMinimalPreview = false,\n acceptAdvanceContent = true,\n enableCollapsible = false,\n collapsedHeight = 180,\n expandLabel = \"Show more\",\n collapseLabel = \"Show less\",\n animationDurationMs = 300,\n },\n ref\n ) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n const [contentHeight, setContentHeight] = useState(0);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n useEffect(() => {\n if (!enableCollapsible || !contentRef.current) {\n return;\n }\n\n const element = contentRef.current;\n\n const measureContent = () => {\n const measuredHeight = element.scrollHeight;\n setContentHeight(measuredHeight);\n const hasOverflow = measuredHeight > collapsedHeight;\n setIsOverflowing(hasOverflow);\n if (!hasOverflow) {\n setIsExpanded(false);\n }\n };\n\n measureContent();\n\n const resizeObserver = new ResizeObserver(() => {\n measureContent();\n });\n\n resizeObserver.observe(element);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [content, enableCollapsible, collapsedHeight]);\n\n const showToggle = enableCollapsible && isOverflowing;\n const animatedMaxHeight = showToggle\n ? isExpanded\n ? contentHeight\n : collapsedHeight\n : undefined;\n\n return (\n <div ref={ref} className=\"w-full\">\n <div\n className={cn(showToggle ? \"relative overflow-hidden\" : \"\")}\n style={\n showToggle\n ? {\n maxHeight: `${animatedMaxHeight}px`,\n transition: `max-height ${animationDurationMs}ms ease`,\n }\n : undefined\n }\n >\n <div\n ref={contentRef}\n className={cn(\n \"markdown-preview prose prose-sm dark:prose-invert max-w-none\",\n \"font-inter font-medium text-sm leading-5\",\n showMinimalPreview\n ? \"[&_h1]:text-sm [&_h1]:font-medium [&_h1]:my-0 [&_h1]:leading-5 [&_h1]:text-inherit\"\n : \"[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-1 [&_h1]:leading-7 [&_h1]:text-inherit\",\n showMinimalPreview\n ? \"[&_h2]:text-sm [&_h2]:font-medium [&_h2]:my-0 [&_h2]:leading-5 [&_h2]:text-inherit\"\n : \"[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-1 [&_h2]:leading-7 [&_h2]:text-inherit\",\n showMinimalPreview\n ? \"[&_h3]:text-sm [&_h3]:font-medium [&_h3]:my-0 [&_h3]:leading-5 [&_h3]:text-inherit\"\n : \"[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-1 [&_h3]:leading-6 [&_h3]:text-inherit\",\n \"[&_h4]:text-inherit [&_h5]:text-inherit [&_h6]:text-inherit\",\n // Paragraphs share the list items' size/weight/leading — only the\n // block spacing differs between minimal and default preview\n showMinimalPreview\n ? \"[&_p]:my-0 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5\"\n : \"[&_p]:my-1 [&_p]:text-sm [&_p]:font-medium [&_p]:leading-5\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\"\n : noIndent\n ? \"[&_ul]:list-disc [&_ul]:ml-0 [&_ul]:pl-6 [&_ul]:space-y-0 [&_ul]:my-0\"\n : \"[&_ul]:list-disc [&_ul]:ml-8 [&_ul]:space-y-0 [&_ul]:my-0\",\n showMinimalPreview\n ? noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\"\n : noIndent\n ? \"[&_ol]:list-decimal [&_ol]:ml-0 [&_ol]:pl-6 [&_ol]:space-y-0 [&_ol]:my-0\"\n : \"[&_ol]:list-decimal [&_ol]:ml-8 [&_ol]:space-y-0 [&_ol]:my-0\",\n // Separate consecutive lists (a blank line in the source starts a new list)\n \"[&_ol+ol]:mt-2 [&_ul+ul]:mt-2 [&_ol+ul]:mt-2 [&_ul+ol]:mt-2\",\n \"[&_li]:mt-0 [&_li]:mb-0 [&_li]:text-sm [&_li]:font-medium [&_li]:leading-5 [&_li::marker]:text-inherit\",\n // Loose lists (any blank line between items) wrap each item's content\n // in a <p>; strip its margins so item spacing matches a tight list\n \"[&_li>p]:my-0 [&_li>p]:text-sm [&_li>p]:font-medium [&_li>p]:leading-5\",\n noIndent ? \"[&_li]:pl-0\" : \"\",\n \"[&_li:has(input[type='checkbox'])]:list-none\",\n noIndent\n ? \"[&_li:has(input[type='checkbox'])]:pl-0 [&_li:has(input[type='checkbox'])]:-ml-4.5\"\n : \"[&_li:has(input[type='checkbox'])]:-ml-4.5\",\n \"[&_li>input[type='checkbox']]:mr-2 [&_li>input[type='checkbox']]:w-[11px] [&_li>input[type='checkbox']]:h-[11px]\",\n acceptAdvanceContent\n ? \"[&_blockquote]:border-l-4 [&_blockquote]:border-neutral-300 [&_blockquote]:dark:border-neutral-600\"\n : \"[&_blockquote]:border-0\",\n acceptAdvanceContent && showMinimalPreview\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-0 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-0 [&_blockquote]:leading-5 [&_blockquote]:ml-4 [&_blockquote]:text-sm [&_blockquote]:font-medium\"\n : acceptAdvanceContent\n ? noIndent\n ? \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-0\"\n : \"[&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:italic [&_blockquote]:my-1 [&_blockquote]:leading-6 [&_blockquote]:ml-4\"\n : \"[&_blockquote]:pl-0 [&_blockquote]:py-0 [&_blockquote]:not-italic [&_blockquote]:my-0\",\n \"[&_a]:text-primary-600 [&_a]:dark:text-primary-400 [&_a]:underline\",\n \"[&_strong]:font-semibold [&_em]:italic [&_u]:underline [&_del]:line-through\",\n acceptAdvanceContent\n ? \"[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-1\"\n : \"[&_img]:hidden\",\n acceptAdvanceContent\n ? \"[&_table]:w-full [&_table]:border-collapse [&_table]:my-1\"\n : \"[&_table]:block [&_table]:border-0 [&_table]:my-0\",\n acceptAdvanceContent\n ? \"[&_th]:border [&_th]:border-neutral-300 [&_th]:dark:border-neutral-600\"\n : \"[&_th]:border-0\",\n acceptAdvanceContent\n ? \"[&_th]:px-3 [&_th]:py-2 [&_th]:bg-neutral-50 [&_th]:dark:bg-neutral-800\"\n : \"[&_th]:px-0 [&_th]:py-0 [&_th]:bg-transparent\",\n acceptAdvanceContent\n ? \"[&_th]:font-semibold [&_th]:text-left\"\n : \"[&_th]:font-normal [&_th]:inline [&_th]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_td]:border [&_td]:border-neutral-300 [&_td]:dark:border-neutral-600\"\n : \"[&_td]:border-0\",\n acceptAdvanceContent\n ? \"[&_td]:px-3 [&_td]:py-2\"\n : \"[&_td]:px-0 [&_td]:py-0 [&_td]:inline [&_td]:after:content-['_']\",\n acceptAdvanceContent\n ? \"[&_hr]:my-1 [&_hr]:border-neutral-300 [&_hr]:dark:border-neutral-600\"\n : \"[&_hr]:hidden\",\n \"text-[#101828] dark:text-neutral-100\",\n className\n )}\n >\n <ReactMarkdown\n remarkPlugins={[remarkGfm, remarkSplitRestartedLists]}\n rehypePlugins={[rehypeRaw]}\n components={{\n a({ children, href, ...props }) {\n return (\n <a\n href={href}\n target={linkTarget}\n rel={\n linkTarget === \"_blank\"\n ? \"noopener noreferrer\"\n : undefined\n }\n {...props}\n >\n {children}\n </a>\n );\n },\n img({ src, alt, ...props }) {\n return (\n <img\n src={src}\n alt={alt}\n className=\"max-w-full h-auto rounded-lg my-3\"\n loading=\"lazy\"\n {...props}\n />\n );\n },\n code({ className, children, ...props }) {\n const match = /language-(\\w+)/.exec(className || \"\");\n const isInline = !className || !match;\n const language = match ? match[1] : \"text\";\n\n if (!isInline && !acceptAdvanceContent) {\n return (\n <span\n className=\"whitespace-pre-wrap text-sm font-medium leading-5\"\n style={{ fontFamily: \"inherit\", fontWeight: \"normal\" }}\n >\n {children}\n </span>\n );\n }\n\n if (\n !isInline &&\n enableSyntaxHighlighting &&\n acceptAdvanceContent\n ) {\n return (\n <div className=\"relative my-3 rounded-lg overflow-hidden\">\n <div className=\"flex items-center justify-between px-4 py-2 bg-[#2D2D2D] dark:bg-[#161B22] border-b border-[#3E3E3E] dark:border-[#21262D]\">\n <span className=\"text-xs font-mono text-neutral-400 dark:text-neutral-500 uppercase\">\n {language}\n </span>\n </div>\n <div className=\"bg-[#1E1E1E] dark:bg-[#0D1117]\">\n <Suspense\n fallback={\n <pre\n style={{\n margin: 0,\n padding: \"1rem\",\n fontSize: \"0.875rem\",\n lineHeight: \"1.5\",\n background: \"transparent\",\n whiteSpace: \"pre-wrap\",\n }}\n >\n {String(children).replace(/\\n$/, \"\")}\n </pre>\n }\n >\n <LazyCodeBlock\n language={language}\n value={String(children).replace(/\\n$/, \"\")}\n />\n </Suspense>\n </div>\n </div>\n );\n }\n\n return (\n <code\n className={cn(\n className,\n acceptAdvanceContent\n ? \"bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-mono text-[#101828] dark:text-neutral-200\"\n : \"font-inherit text-sm leading-5 font-medium bg-transparent px-0 py-0\"\n )}\n {...props}\n >\n {children}\n </code>\n );\n },\n }}\n >\n {content || \"*No content to display*\"}\n </ReactMarkdown>\n </div>\n\n {showToggle && !isExpanded && (\n <div\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-white via-white/80 to-transparent dark:from-black-700 dark:via-black-700/80 dark:to-transparent\"\n />\n )}\n </div>\n\n {showToggle && (\n <div className=\"mt-2 flex justify-center items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded((prev) => !prev)}\n className=\"inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 font-medium text-sm\"\n >\n {isExpanded ? collapseLabel : expandLabel}\n <span\n className={cn(\n \"inline-flex transition-transform duration-300\",\n !isExpanded ? \"rotate-180\" : \"rotate-0\"\n )}\n >\n <svg\n width=\"8\"\n height=\"5\"\n viewBox=\"0 0 8 5\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.14167 4.19465L3.72833 1.60798L6.315 4.19465C6.575 4.45465 6.995 4.45465 7.255 4.19465C7.515 3.93465 7.515 3.51465 7.255 3.25465L4.195 0.194649C3.935 -0.0653515 3.515 -0.0653515 3.255 0.194649L0.195 3.25465C-0.065 3.51465 -0.065 3.93465 0.195 4.19465C0.455 4.44798 0.881667 4.45465 1.14167 4.19465Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </button>\n </div>\n )}\n </div>\n );\n }\n);\n\nMarkdownPreview.displayName = \"MarkdownPreview\";\n"],"names":["LazyCodeBlock","lazy","Prism","vscDarkPlus","language","value","jsx","MarkdownPreview","forwardRef","content","className","linkTarget","enableSyntaxHighlighting","noIndent","showMinimalPreview","acceptAdvanceContent","enableCollapsible","collapsedHeight","expandLabel","collapseLabel","animationDurationMs","ref","contentRef","useRef","isExpanded","setIsExpanded","useState","contentHeight","setContentHeight","isOverflowing","setIsOverflowing","useEffect","element","measureContent","measuredHeight","hasOverflow","resizeObserver","showToggle","animatedMaxHeight","jsxs","cn","ReactMarkdown","remarkGfm","remarkSplitRestartedLists","rehypeRaw","children","href","props","src","alt","match","isInline","Suspense","prev"],"mappings":"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"}
|
package/dist/design-system.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--lax-form-focus-border: var(--color-primary-600);--lax-form-focus-shadow: 0 0 0 3px var(--color-primary-100)}.dark{--lax-form-focus-border: var(--color-primary-400);--lax-form-focus-shadow: 0 0 0 3px var(--color-primary-950)}input:where([type=text],[type=email],[type=password],[type=number],[type=search],[type=date],[type=time],[type=datetime-local],[type=url],[type=tel],[type=color]):focus,textarea:focus,select:focus,[contenteditable=true]:focus{outline:none!important;border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.ant-select-focused .ant-select-selector,.ant-picker-focused,.ant-input-affix-wrapper-focused,.ant-input-affix-wrapper:focus-within,.ant-input-number-focused,.ant-input-number:focus-within,.ant-input:focus{outline:none!important;border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.ant-checkbox-input:focus-visible+.ant-checkbox-inner{border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.lax-select__control--is-focused{border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.peer:focus-visible+.lax-toggle-track{border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.lax-form-trigger:focus-visible{outline:none!important;border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.lax-tooltip-body-important-whitespace{white-space:var(--lax-tooltip-white-space, initial)!important;overflow-wrap:break-word!important}.ant-select-selector{padding-left:6px!important}.select-field-emphasis-modified.ant-select .ant-select-selector{background-color:var(--Warning-50, #FFFAEB)!important;border-color:var(--Warning-200, #FEDF89)!important}.select-field-emphasis-modified.ant-select.ant-select-disabled .ant-select-selector{opacity:1!important;background-color:var(--Warning-50, #FFFAEB)!important;border-color:var(--Warning-200, #FEDF89)!important}.select-field-emphasis-deleted.ant-select .ant-select-selector{background-color:var(--Error-50, #FEF2F2)!important;border-color:var(--Error-200, #FECACA)!important}.select-field-emphasis-deleted.ant-select .ant-select-selector .ant-select-selection-item,.select-field-emphasis-deleted.ant-select .ant-select-selector .ant-select-selection-placeholder{color:#475467!important}.select-field-emphasis-deleted.ant-select.ant-select-disabled .ant-select-selector{opacity:1!important;background-color:var(--Error-50, #FEF2F2)!important;border-color:var(--Error-200, #FECACA)!important}.select-field-emphasis-success.ant-select .ant-select-selector{background-color:var(--Success-50, #F0FDF4)!important;border-color:var(--Success-200, #BBF7D0)!important}.select-field-emphasis-success.ant-select .ant-select-selector .ant-select-selection-item{color:#101828!important}.select-field-emphasis-success.ant-select.ant-select-disabled .ant-select-selector{opacity:1!important;background-color:var(--Success-50, #F0FDF4)!important;border-color:var(--Success-200, #BBF7D0)!important}.ant-select-selection-overflow-item-suffix,.ant-select-selection-wrap{min-height:inherit!important}.lax-popper-overlay.ant-popover{z-index:9999}.lax-popper-overlay .ant-popover-inner{background-color:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 10px 30px #9e9e9e4d}.lax-popper-overlay .ant-popover-arrow:before{background-color:#fff;border:1px solid #EAECF0}.dark .lax-popper-overlay .ant-popover-inner{background-color:#1d2939;border-color:#344054;box-shadow:0 10px 30px #10101080}.dark .lax-popper-overlay .ant-popover-arrow:before{background-color:#1d2939;border-color:#344054}.Toastify__toast-container{z-index:100000}.Toastify__toast{min-height:64px;border-radius:4px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.Toastify__toast--success,.Toastify__toast--error,.Toastify__toast--warning,.Toastify__toast--info{background:transparent}.Toastify__toast-body{padding:0;margin:0;color:inherit;font-size:14px;font-weight:500;line-height:1.5}.Toastify__close-button{color:inherit;opacity:.7;align-self:flex-start;background:transparent;border:none;padding:4px;margin:0;transition:opacity .2s ease}.Toastify__close-button:hover{opacity:1}.Toastify__progress-bar{background:linear-gradient(to right,#4caf50,#8bc34a,#cddc39,#ffeb3b,#ffc107,#ff9800,#ff5722)}.Toastify__progress-bar--success{background:#12b76a}.Toastify__progress-bar--error{background:#f04438}.Toastify__progress-bar--warning{background:#f79009}.Toastify__progress-bar--info{background:#016dcf}@media (prefers-color-scheme: dark){.Toastify__toast-container{background:transparent}.Toastify__toast{box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003}}@media screen and (max-width: 640px){.Toastify__toast-container{left:1rem;right:1rem;bottom:1rem;width:auto}.Toastify__toast{margin-bottom:.5rem}}.Toastify__slide-enter--bottom-right,.Toastify__slide-enter--bottom-left,.Toastify__slide-enter--bottom-center{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.Toastify__slide-exit--bottom-right,.Toastify__slide-exit--bottom-left,.Toastify__slide-exit--bottom-center{animation-duration:.2s;animation-timing-function:cubic-bezier(.4,0,1,1)}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}:is(.swiper:not(.swiper-watch-progress),.swiper-watch-progress .swiper-slide-visible) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;transform:translate3d(0,-50%,0)}:is(.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets) .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}:is(.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets).swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}:is(.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets).swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}:is(.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets) .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}:is(.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets).swiper-pagination-bullets-dynamic{left:50%;transform:translate(-50%);white-space:nowrap}:is(.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets).swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}
|
|
1
|
+
:root{--lax-form-focus-border: var(--color-primary-600);--lax-form-focus-shadow: 0 0 0 3px var(--color-primary-100)}.dark{--lax-form-focus-border: var(--color-primary-400);--lax-form-focus-shadow: 0 0 0 3px var(--color-primary-950)}input:where([type=text],[type=email],[type=password],[type=number],[type=search],[type=date],[type=time],[type=datetime-local],[type=url],[type=tel],[type=color]):focus,textarea:focus,select:focus,[contenteditable=true]:focus{outline:none!important;border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.ant-select-focused .ant-select-selector,.ant-picker-focused,.ant-input-affix-wrapper-focused,.ant-input-affix-wrapper:focus-within,.ant-input-number-focused,.ant-input-number:focus-within,.ant-input:focus{outline:none!important;border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.ant-checkbox-input:focus-visible+.ant-checkbox-inner{border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.lax-select__control--is-focused{border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.peer:focus-visible+.lax-toggle-track{border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.lax-form-trigger:focus-visible{outline:none!important;border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.lax-tooltip-body-important-whitespace{white-space:var(--lax-tooltip-white-space, initial)!important;overflow-wrap:break-word!important}.ant-select-selector{padding-left:6px!important}.select-field-emphasis-modified.ant-select .ant-select-selector{background-color:var(--Warning-50, #FFFAEB)!important;border-color:var(--Warning-200, #FEDF89)!important}.select-field-emphasis-modified.ant-select.ant-select-disabled .ant-select-selector{opacity:1!important;background-color:var(--Warning-50, #FFFAEB)!important;border-color:var(--Warning-200, #FEDF89)!important}.select-field-emphasis-deleted.ant-select .ant-select-selector{background-color:var(--Error-50, #FEF2F2)!important;border-color:var(--Error-200, #FECACA)!important}.select-field-emphasis-deleted.ant-select .ant-select-selector .ant-select-selection-item,.select-field-emphasis-deleted.ant-select .ant-select-selector .ant-select-selection-placeholder{color:#475467!important}.select-field-emphasis-deleted.ant-select.ant-select-disabled .ant-select-selector{opacity:1!important;background-color:var(--Error-50, #FEF2F2)!important;border-color:var(--Error-200, #FECACA)!important}.select-field-emphasis-success.ant-select .ant-select-selector{background-color:var(--Success-50, #F0FDF4)!important;border-color:var(--Success-200, #BBF7D0)!important}.select-field-emphasis-success.ant-select .ant-select-selector .ant-select-selection-item{color:#101828!important}.select-field-emphasis-success.ant-select.ant-select-disabled .ant-select-selector{opacity:1!important;background-color:var(--Success-50, #F0FDF4)!important;border-color:var(--Success-200, #BBF7D0)!important}.ant-select-selection-overflow-item-suffix,.ant-select-selection-wrap{min-height:inherit!important}.lax-popper-overlay.ant-popover{z-index:9999}.lax-popper-overlay .ant-popover-inner{background-color:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 10px 30px #9e9e9e4d}.lax-popper-overlay .ant-popover-arrow:before{background-color:#fff;border:1px solid #EAECF0}.dark .lax-popper-overlay .ant-popover-inner{background-color:#1d2939;border-color:#344054;box-shadow:0 10px 30px #10101080}.dark .lax-popper-overlay .ant-popover-arrow:before{background-color:#1d2939;border-color:#344054}.Toastify__toast-container{z-index:100000}.Toastify__toast{min-height:64px;border-radius:4px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.Toastify__toast--success,.Toastify__toast--error,.Toastify__toast--warning,.Toastify__toast--info{background:transparent}.Toastify__toast-body{padding:0;margin:0;color:inherit;font-size:14px;font-weight:500;line-height:1.5}.Toastify__close-button{color:inherit;opacity:.7;align-self:flex-start;background:transparent;border:none;padding:4px;margin:0;transition:opacity .2s ease}.Toastify__close-button:hover{opacity:1}.Toastify__progress-bar{background:linear-gradient(to right,#4caf50,#8bc34a,#cddc39,#ffeb3b,#ffc107,#ff9800,#ff5722)}.Toastify__progress-bar--success{background:#12b76a}.Toastify__progress-bar--error{background:#f04438}.Toastify__progress-bar--warning{background:#f79009}.Toastify__progress-bar--info{background:#016dcf}@media (prefers-color-scheme: dark){.Toastify__toast-container{background:transparent}.Toastify__toast{box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003}}@media screen and (max-width: 640px){.Toastify__toast-container{left:1rem;right:1rem;bottom:1rem;width:auto}.Toastify__toast{margin-bottom:.5rem}}.Toastify__slide-enter--bottom-right,.Toastify__slide-enter--bottom-left,.Toastify__slide-enter--bottom-center{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.Toastify__slide-exit--bottom-right,.Toastify__slide-exit--bottom-left,.Toastify__slide-exit--bottom-center{animation-duration:.2s;animation-timing-function:cubic-bezier(.4,0,1,1)}.markdown-preview p,.markdown-preview li{font-size:inherit;font-weight:inherit;line-height:inherit}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}:is(.swiper:not(.swiper-watch-progress),.swiper-watch-progress .swiper-slide-visible) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;transform:translate3d(0,-50%,0)}:is(.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets) .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}:is(.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets).swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}:is(.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets).swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}:is(.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets) .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}:is(.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets).swiper-pagination-bullets-dynamic{left:50%;transform:translate(-50%);white-space:nowrap}:is(.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets).swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}
|