@lobehub/ui 4.3.2 → 4.3.3

package/es/Markdown/style.mjs

@@ -1,19 +1,20 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/Markdown/style.ts
-const useStyles = createStyles(({ css: css$1, token, isDarkMode }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		chat: css$1`
       ol,
       ul {
         > li {
           &::marker {
-            color: ${isDarkMode ? token.cyan9A : token.cyan11A} !important;
+            color: ${cssVar$1.cyan9} !important;
           }
 
           > li {
             &::marker {
-              color: ${token.colorTextSecondary} !important;
+              color: ${cssVar$1.colorTextSecondary} !important;
             }
           }
         }
@@ -34,7 +35,7 @@ const useStyles = createStyles(({ css: css$1, token, isDarkMode }) => {
       .markdown-alert {
         margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);
         padding-inline-start: 1em;
-        border-inline-start: solid 4px ${token.colorBorder};
+        border-inline-start: solid 4px ${cssVar$1.colorBorder};
 
         > p {
           margin-block-start: 0 !important;
@@ -50,23 +51,23 @@ const useStyles = createStyles(({ css: css$1, token, isDarkMode }) => {
       }
 
       .markdown-alert-note {
-        border-inline-start-color: ${token.colorInfo};
+        border-inline-start-color: ${cssVar$1.colorInfo};
       }
 
       .markdown-alert-tip {
-        border-inline-start-color: ${token.colorSuccess};
+        border-inline-start-color: ${cssVar$1.colorSuccess};
       }
 
       .markdown-alert-important {
-        border-inline-start-color: ${token.purple};
+        border-inline-start-color: ${cssVar$1.purple};
       }
 
       .markdown-alert-warning {
-        border-inline-start-color: ${token.colorWarning};
+        border-inline-start-color: ${cssVar$1.colorWarning};
       }
 
       .markdown-alert-caution {
-        border-inline-start-color: ${token.colorError};
+        border-inline-start-color: ${cssVar$1.colorError};
       }
 
       .markdown-alert-title {
@@ -77,28 +78,28 @@ const useStyles = createStyles(({ css: css$1, token, isDarkMode }) => {
       }
 
       .markdown-alert-note .markdown-alert-title {
-        color: ${token.colorInfo};
-        fill: ${token.colorInfo};
+        color: ${cssVar$1.colorInfo};
+        fill: ${cssVar$1.colorInfo};
       }
 
       .markdown-alert-tip .markdown-alert-title {
-        color: ${token.colorSuccess};
-        fill: ${token.colorSuccess};
+        color: ${cssVar$1.colorSuccess};
+        fill: ${cssVar$1.colorSuccess};
       }
 
       .markdown-alert-important .markdown-alert-title {
-        color: ${token.purple};
-        fill: ${token.purple};
+        color: ${cssVar$1.purple};
+        fill: ${cssVar$1.purple};
       }
 
       .markdown-alert-warning .markdown-alert-title {
-        color: ${token.colorWarning};
-        fill: ${token.colorWarning};
+        color: ${cssVar$1.colorWarning};
+        fill: ${cssVar$1.colorWarning};
       }
 
       .markdown-alert-caution .markdown-alert-title {
-        color: ${token.colorError};
-        fill: ${token.colorError};
+        color: ${cssVar$1.colorError};
+        fill: ${cssVar$1.colorError};
       }
 
       /* Style the footnotes section. */
@@ -136,12 +137,12 @@ const useStyles = createStyles(({ css: css$1, token, isDarkMode }) => {
           height: 16px;
           border-radius: 4px;
 
-          font-family: ${token.fontFamilyCode};
+          font-family: ${cssVar$1.fontFamilyCode};
           font-size: 10px;
-          color: ${token.colorTextSecondary} !important;
+          color: ${cssVar$1.colorTextSecondary} !important;
           text-align: center;
 
-          background: ${token.colorFillSecondary};
+          background: ${cssVar$1.colorFillSecondary};
         }
       }
 
@@ -155,7 +156,7 @@ const useStyles = createStyles(({ css: css$1, token, isDarkMode }) => {
 
           width: 0.66em;
           height: 0.66em;
-          border: 1px solid ${token.colorFill};
+          border: 1px solid ${cssVar$1.colorFill};
           border-radius: 50%;
 
           background-color: attr(data-color);
@@ -167,7 +168,7 @@ const useStyles = createStyles(({ css: css$1, token, isDarkMode }) => {
     `,
 		latex: css$1`
       .katex-error {
-        color: ${token.colorTextDescription} !important;
+        color: ${cssVar$1.colorTextDescription} !important;
       }
 
       .katex-html {
@@ -193,7 +194,28 @@ const useStyles = createStyles(({ css: css$1, token, isDarkMode }) => {
     `
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: {
+		enableGfm: true,
+		enableLatex: true,
+		variant: "default"
+	},
+	variants: {
+		variant: {
+			default: null,
+			chat: styles.chat
+		},
+		enableLatex: {
+			true: styles.latex,
+			false: null
+		},
+		enableGfm: {
+			true: styles.gfm,
+			false: null
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { styles, variants };
 //# sourceMappingURL=style.mjs.map

package/es/Markdown/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Markdown/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token, isDarkMode }) => {\n  const cyanColor = isDarkMode ? token.cyan9A : token.cyan11A;\n\n  return {\n    chat: css`\n      ol,\n      ul {\n        > li {\n          &::marker {\n            color: ${cyanColor} !important;\n          }\n\n          > li {\n            &::marker {\n              color: ${token.colorTextSecondary} !important;\n            }\n          }\n        }\n      }\n\n      ul {\n        list-style: unset;\n\n        > li {\n          &::before {\n            content: unset;\n            display: unset;\n          }\n        }\n      }\n    `,\n\n    gfm: css`\n      .markdown-alert {\n        margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n        padding-inline-start: 1em;\n        border-inline-start: solid 4px ${token.colorBorder};\n\n        > p {\n          margin-block-start: 0 !important;\n        }\n      }\n\n      .markdown-alert > :first-child {\n        margin-block-start: 0;\n      }\n\n      .markdown-alert > :last-child {\n        margin-block-end: 0;\n      }\n\n      .markdown-alert-note {\n        border-inline-start-color: ${token.colorInfo};\n      }\n\n      .markdown-alert-tip {\n        border-inline-start-color: ${token.colorSuccess};\n      }\n\n      .markdown-alert-important {\n        border-inline-start-color: ${token.purple};\n      }\n\n      .markdown-alert-warning {\n        border-inline-start-color: ${token.colorWarning};\n      }\n\n      .markdown-alert-caution {\n        border-inline-start-color: ${token.colorError};\n      }\n\n      .markdown-alert-title {\n        display: flex;\n        align-items: center;\n        margin-block-end: 0.5em !important;\n        font-weight: 500;\n      }\n\n      .markdown-alert-note .markdown-alert-title {\n        color: ${token.colorInfo};\n        fill: ${token.colorInfo};\n      }\n\n      .markdown-alert-tip .markdown-alert-title {\n        color: ${token.colorSuccess};\n        fill: ${token.colorSuccess};\n      }\n\n      .markdown-alert-important .markdown-alert-title {\n        color: ${token.purple};\n        fill: ${token.purple};\n      }\n\n      .markdown-alert-warning .markdown-alert-title {\n        color: ${token.colorWarning};\n        fill: ${token.colorWarning};\n      }\n\n      .markdown-alert-caution .markdown-alert-title {\n        color: ${token.colorError};\n        fill: ${token.colorError};\n      }\n\n      /* Style the footnotes section. */\n\n      .octicon {\n        overflow: visible !important;\n        display: inline-block;\n        margin-inline-end: 0.5em;\n        vertical-align: text-bottom;\n      }\n\n      .sr-only {\n        position: absolute;\n\n        overflow: hidden;\n\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        border: 0;\n\n        word-wrap: normal;\n\n        clip: rect(0, 0, 0, 0);\n      }\n\n      sup:has(*[aria-describedby='footnote-label']) {\n        margin-inline: 2px;\n        vertical-align: super !important;\n\n        [data-footnote-ref] {\n          display: inline-block;\n\n          width: 16px;\n          height: 16px;\n          border-radius: 4px;\n\n          font-family: ${token.fontFamilyCode};\n          font-size: 10px;\n          color: ${token.colorTextSecondary} !important;\n          text-align: center;\n\n          background: ${token.colorFillSecondary};\n        }\n      }\n\n      code.color-preview {\n        position: relative;\n        display: inline-flex !important;\n        gap: 0.4em;\n\n        &::after {\n          content: '';\n\n          width: 0.66em;\n          height: 0.66em;\n          border: 1px solid ${token.colorFill};\n          border-radius: 50%;\n\n          background-color: attr(data-color);\n\n          /* Fallback for browsers that don't support attr() in background */\n          background-color: var(--color-preview-color, #000);\n        }\n      }\n    `,\n\n    latex: css`\n      .katex-error {\n        color: ${token.colorTextDescription} !important;\n      }\n\n      .katex-html {\n        overflow: auto hidden;\n        padding: 3px;\n\n        .base {\n          margin-block: 0;\n          margin-inline: auto;\n        }\n\n        .tag {\n          position: relative !important;\n          display: inline-block;\n          padding-inline-start: 0.5rem;\n        }\n      }\n    `,\n    root: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,iBAAiB;AAGpE,QAAO;EACL,MAAM,KAAG;;;;;qBAHO,aAAa,MAAM,SAAS,MAAM,QAQvB;;;;;uBAKR,MAAM,mBAAmB;;;;;;;;;;;;;;;;;EAkB5C,KAAK,KAAG;;;;yCAI6B,MAAM,YAAY;;;;;;;;;;;;;;;;qCAgBtB,MAAM,UAAU;;;;qCAIhB,MAAM,aAAa;;;;qCAInB,MAAM,OAAO;;;;qCAIb,MAAM,aAAa;;;;qCAInB,MAAM,WAAW;;;;;;;;;;;iBAWrC,MAAM,UAAU;gBACjB,MAAM,UAAU;;;;iBAIf,MAAM,aAAa;gBACpB,MAAM,aAAa;;;;iBAIlB,MAAM,OAAO;gBACd,MAAM,OAAO;;;;iBAIZ,MAAM,aAAa;gBACpB,MAAM,aAAa;;;;iBAIlB,MAAM,WAAW;gBAClB,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAsCR,MAAM,eAAe;;mBAE3B,MAAM,mBAAmB;;;wBAGpB,MAAM,mBAAmB;;;;;;;;;;;;;;8BAcnB,MAAM,UAAU;;;;;;;;;;EAW1C,OAAO,KAAG;;iBAEG,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;EAmBxC,MAAM,KAAG;;;;;EAKV;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/Markdown/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    chat: css`\n      ol,\n      ul {\n        > li {\n          &::marker {\n            color: ${cssVar.cyan9} !important;\n          }\n\n          > li {\n            &::marker {\n              color: ${cssVar.colorTextSecondary} !important;\n            }\n          }\n        }\n      }\n\n      ul {\n        list-style: unset;\n\n        > li {\n          &::before {\n            content: unset;\n            display: unset;\n          }\n        }\n      }\n    `,\n\n    gfm: css`\n      .markdown-alert {\n        margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n        padding-inline-start: 1em;\n        border-inline-start: solid 4px ${cssVar.colorBorder};\n\n        > p {\n          margin-block-start: 0 !important;\n        }\n      }\n\n      .markdown-alert > :first-child {\n        margin-block-start: 0;\n      }\n\n      .markdown-alert > :last-child {\n        margin-block-end: 0;\n      }\n\n      .markdown-alert-note {\n        border-inline-start-color: ${cssVar.colorInfo};\n      }\n\n      .markdown-alert-tip {\n        border-inline-start-color: ${cssVar.colorSuccess};\n      }\n\n      .markdown-alert-important {\n        border-inline-start-color: ${cssVar.purple};\n      }\n\n      .markdown-alert-warning {\n        border-inline-start-color: ${cssVar.colorWarning};\n      }\n\n      .markdown-alert-caution {\n        border-inline-start-color: ${cssVar.colorError};\n      }\n\n      .markdown-alert-title {\n        display: flex;\n        align-items: center;\n        margin-block-end: 0.5em !important;\n        font-weight: 500;\n      }\n\n      .markdown-alert-note .markdown-alert-title {\n        color: ${cssVar.colorInfo};\n        fill: ${cssVar.colorInfo};\n      }\n\n      .markdown-alert-tip .markdown-alert-title {\n        color: ${cssVar.colorSuccess};\n        fill: ${cssVar.colorSuccess};\n      }\n\n      .markdown-alert-important .markdown-alert-title {\n        color: ${cssVar.purple};\n        fill: ${cssVar.purple};\n      }\n\n      .markdown-alert-warning .markdown-alert-title {\n        color: ${cssVar.colorWarning};\n        fill: ${cssVar.colorWarning};\n      }\n\n      .markdown-alert-caution .markdown-alert-title {\n        color: ${cssVar.colorError};\n        fill: ${cssVar.colorError};\n      }\n\n      /* Style the footnotes section. */\n\n      .octicon {\n        overflow: visible !important;\n        display: inline-block;\n        margin-inline-end: 0.5em;\n        vertical-align: text-bottom;\n      }\n\n      .sr-only {\n        position: absolute;\n\n        overflow: hidden;\n\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        border: 0;\n\n        word-wrap: normal;\n\n        clip: rect(0, 0, 0, 0);\n      }\n\n      sup:has(*[aria-describedby='footnote-label']) {\n        margin-inline: 2px;\n        vertical-align: super !important;\n\n        [data-footnote-ref] {\n          display: inline-block;\n\n          width: 16px;\n          height: 16px;\n          border-radius: 4px;\n\n          font-family: ${cssVar.fontFamilyCode};\n          font-size: 10px;\n          color: ${cssVar.colorTextSecondary} !important;\n          text-align: center;\n\n          background: ${cssVar.colorFillSecondary};\n        }\n      }\n\n      code.color-preview {\n        position: relative;\n        display: inline-flex !important;\n        gap: 0.4em;\n\n        &::after {\n          content: '';\n\n          width: 0.66em;\n          height: 0.66em;\n          border: 1px solid ${cssVar.colorFill};\n          border-radius: 50%;\n\n          background-color: attr(data-color);\n\n          /* Fallback for browsers that don't support attr() in background */\n          background-color: var(--color-preview-color, #000);\n        }\n      }\n    `,\n\n    latex: css`\n      .katex-error {\n        color: ${cssVar.colorTextDescription} !important;\n      }\n\n      .katex-html {\n        overflow: auto hidden;\n        padding: 3px;\n\n        .base {\n          margin-block: 0;\n          margin-inline: auto;\n        }\n\n        .tag {\n          position: relative !important;\n          display: inline-block;\n          padding-inline-start: 0.5rem;\n        }\n      }\n    `,\n    root: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    enableGfm: true,\n    enableLatex: true,\n    variant: 'default',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      default: null,\n      chat: styles.chat,\n    },\n    enableLatex: {\n      true: styles.latex,\n      false: null,\n    },\n    enableGfm: {\n      true: styles.gfm,\n      false: null,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;AAGA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,MAAM,KAAG;;;;;qBAKQA,SAAO,MAAM;;;;;uBAKXA,SAAO,mBAAmB;;;;;;;;;;;;;;;;;EAkB7C,KAAK,KAAG;;;;yCAI6BA,SAAO,YAAY;;;;;;;;;;;;;;;;qCAgBvBA,SAAO,UAAU;;;;qCAIjBA,SAAO,aAAa;;;;qCAIpBA,SAAO,OAAO;;;;qCAIdA,SAAO,aAAa;;;;qCAIpBA,SAAO,WAAW;;;;;;;;;;;iBAWtCA,SAAO,UAAU;gBAClBA,SAAO,UAAU;;;;iBAIhBA,SAAO,aAAa;gBACrBA,SAAO,aAAa;;;;iBAInBA,SAAO,OAAO;gBACfA,SAAO,OAAO;;;;iBAIbA,SAAO,aAAa;gBACrBA,SAAO,aAAa;;;;iBAInBA,SAAO,WAAW;gBACnBA,SAAO,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAsCTA,SAAO,eAAe;;mBAE5BA,SAAO,mBAAmB;;;wBAGrBA,SAAO,mBAAmB;;;;;;;;;;;;;;8BAcpBA,SAAO,UAAU;;;;;;;;;;EAW3C,OAAO,KAAG;;iBAEGA,SAAO,qBAAqB;;;;;;;;;;;;;;;;;;;EAmBzC,MAAM,KAAG;;;;;EAKV;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,WAAW;EACX,aAAa;EACb,SAAS;EACV;CAED,UAAU;EACR,SAAS;GACP,SAAS;GACT,MAAM,OAAO;GACd;EACD,aAAa;GACX,MAAM,OAAO;GACb,OAAO;GACR;EACD,WAAW;GACT,MAAM,OAAO;GACb,OAAO;GACR;EACF;CAEF,CAAC"}

package/es/MaskShadow/MaskShadow.d.mts

@@ -1,8 +1,8 @@
 import { MaskShadowProps } from "./type.mjs";
-import * as react28 from "react";
+import * as react50 from "react";
 
 //#region src/MaskShadow/MaskShadow.d.ts
-declare const MaskShadow: react28.NamedExoticComponent<MaskShadowProps>;
+declare const MaskShadow: react50.NamedExoticComponent<MaskShadowProps>;
 //#endregion
 export { MaskShadow };
 //# sourceMappingURL=MaskShadow.d.mts.map

package/es/MaskShadow/MaskShadow.mjs

@@ -1,24 +1,20 @@
 'use client';
 
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
+import { variants } from "./style.mjs";
 import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { cx } from "antd-style";
 
 //#region src/MaskShadow/MaskShadow.tsx
 const MaskShadow = memo(({ className, children, position = "bottom", size = 40, ...rest }) => {
-	const { cx, styles } = useStyles(size);
+	const cssVariables = useMemo(() => ({ "--mask-shadow-size": `${size}%` }), [size]);
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
-		className: cx(useMemo(() => cva(styles.root, {
-			defaultVariants: { position: "bottom" },
-			variants: { position: {
-				top: styles.topShadow,
-				bottom: styles.bottomShadow,
-				left: styles.leftShadow,
-				right: styles.rightShadow
-			} }
-		}), [styles])({ position }), className),
+		className: cx(variants({ position }), className),
+		style: {
+			...cssVariables,
+			...rest.style
+		},
 		...rest,
 		children
 	});

package/es/MaskShadow/MaskShadow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MaskShadow.mjs","names":["Flexbox"],"sources":["../../src/MaskShadow/MaskShadow.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from './style';\nimport type { MaskShadowProps } from './type';\n\nconst MaskShadow = memo<MaskShadowProps>(\n  ({ className, children, position = 'bottom', size = 40, ...rest }) => {\n    const { cx, styles } = useStyles(size);\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            position: 'bottom',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            position: {\n              top: styles.topShadow,\n              bottom: styles.bottomShadow,\n              left: styles.leftShadow,\n              right: styles.rightShadow,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    return (\n      <Flexbox className={cx(variants({ position }), className)} {...rest}>\n        {children}\n      </Flexbox>\n    );\n  },\n);\n\nMaskShadow.displayName = 'MaskShadow';\n\nexport default MaskShadow;\n"],"mappings":";;;;;;;;;AAUA,MAAM,aAAa,MAChB,EAAE,WAAW,UAAU,WAAW,UAAU,OAAO,IAAI,GAAG,WAAW;CACpE,MAAM,EAAE,IAAI,WAAW,UAAU,KAAK;AAsBtC,QACE,oBAACA;EAAQ,WAAW,GArBL,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB,EACf,UAAU,UACX;GAED,UAAU,EACR,UAAU;IACR,KAAK,OAAO;IACZ,QAAQ,OAAO;IACf,MAAM,OAAO;IACb,OAAO,OAAO;IACf,EACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAGiC,EAAE,UAAU,CAAC,EAAE,UAAU;EAAE,GAAI;EAC5D;GACO;EAGf;AAED,WAAW,cAAc;AAEzB,yBAAe"}
+{"version":3,"file":"MaskShadow.mjs","names":["Flexbox"],"sources":["../../src/MaskShadow/MaskShadow.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { variants } from './style';\nimport type { MaskShadowProps } from './type';\n\nconst MaskShadow = memo<MaskShadowProps>(\n  ({ className, children, position = 'bottom', size = 40, ...rest }) => {\n    // Convert size prop to CSS variable\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--mask-shadow-size': `${size}%`,\n      }),\n      [size],\n    );\n\n    return (\n      <Flexbox\n        className={cx(variants({ position }), className)}\n        style={{\n          ...cssVariables,\n          ...rest.style,\n        }}\n        {...rest}\n      >\n        {children}\n      </Flexbox>\n    );\n  },\n);\n\nMaskShadow.displayName = 'MaskShadow';\n\nexport default MaskShadow;\n"],"mappings":";;;;;;;;;AAUA,MAAM,aAAa,MAChB,EAAE,WAAW,UAAU,WAAW,UAAU,OAAO,IAAI,GAAG,WAAW;CAEpE,MAAM,eAAe,eACZ,EACL,sBAAsB,GAAG,KAAK,IAC/B,GACD,CAAC,KAAK,CACP;AAED,QACE,oBAACA;EACC,WAAW,GAAG,SAAS,EAAE,UAAU,CAAC,EAAE,UAAU;EAChD,OAAO;GACL,GAAG;GACH,GAAG,KAAK;GACT;EACD,GAAI;EAEH;GACO;EAGf;AAED,WAAW,cAAc;AAEzB,yBAAe"}

package/es/MaskShadow/style.mjs

@@ -1,17 +1,29 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/MaskShadow/style.ts
-const useStyles = createStyles(({ css: css$1 }, size) => {
-	const shadowSize = size + "%";
+const styles = createStaticStyles(({ css: css$1 }) => {
 	return {
 		bottomShadow: css$1`
-      mask-image: linear-gradient(180deg, #000 calc(100% - ${shadowSize}), transparent);
+      mask-image: linear-gradient(
+        180deg,
+        #000 calc(100% - var(--mask-shadow-size, 40%)),
+        transparent
+      );
     `,
 		leftShadow: css$1`
-      mask-image: linear-gradient(270deg, #000 calc(100% - ${shadowSize}), transparent);
+      mask-image: linear-gradient(
+        270deg,
+        #000 calc(100% - var(--mask-shadow-size, 40%)),
+        transparent
+      );
     `,
 		rightShadow: css$1`
-      mask-image: linear-gradient(90deg, #000 calc(100% - ${shadowSize}), transparent);
+      mask-image: linear-gradient(
+        90deg,
+        #000 calc(100% - var(--mask-shadow-size, 40%)),
+        transparent
+      );
     `,
 		root: css$1`
       scrollbar-width: none;
@@ -25,11 +37,24 @@ const useStyles = createStyles(({ css: css$1 }, size) => {
       }
     `,
 		topShadow: css$1`
-      mask-image: linear-gradient(0deg, #000 calc(100% - ${shadowSize}), transparent);
+      mask-image: linear-gradient(
+        0deg,
+        #000 calc(100% - var(--mask-shadow-size, 40%)),
+        transparent
+      );
     `
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: { position: "bottom" },
+	variants: { position: {
+		top: styles.topShadow,
+		bottom: styles.bottomShadow,
+		left: styles.leftShadow,
+		right: styles.rightShadow
+	} }
+});
 
 //#endregion
-export { useStyles };
+export { variants };
 //# sourceMappingURL=style.mjs.map

package/es/MaskShadow/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/MaskShadow/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css }, size: number) => {\n  const shadowSize = size + '%';\n  return {\n    bottomShadow: css`\n      mask-image: linear-gradient(180deg, #000 calc(100% - ${shadowSize}), transparent);\n    `,\n\n    leftShadow: css`\n      mask-image: linear-gradient(270deg, #000 calc(100% - ${shadowSize}), transparent);\n    `,\n\n    rightShadow: css`\n      mask-image: linear-gradient(90deg, #000 calc(100% - ${shadowSize}), transparent);\n    `,\n\n    root: css`\n      scrollbar-width: none;\n      position: relative;\n      overflow: hidden;\n\n      -ms-overflow-style: none;\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    `,\n\n    topShadow: css`\n      mask-image: linear-gradient(0deg, #000 calc(100% - ${shadowSize}), transparent);\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,cAAO,SAAiB;CAC/D,MAAM,aAAa,OAAO;AAC1B,QAAO;EACL,cAAc,KAAG;6DACwC,WAAW;;EAGpE,YAAY,KAAG;6DAC0C,WAAW;;EAGpE,aAAa,KAAG;4DACwC,WAAW;;EAGnE,MAAM,KAAG;;;;;;;;;;;EAYT,WAAW,KAAG;2DACyC,WAAW;;EAEnE;EACD"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/MaskShadow/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    bottomShadow: css`\n      mask-image: linear-gradient(\n        180deg,\n        #000 calc(100% - var(--mask-shadow-size, 40%)),\n        transparent\n      );\n    `,\n\n    leftShadow: css`\n      mask-image: linear-gradient(\n        270deg,\n        #000 calc(100% - var(--mask-shadow-size, 40%)),\n        transparent\n      );\n    `,\n\n    rightShadow: css`\n      mask-image: linear-gradient(\n        90deg,\n        #000 calc(100% - var(--mask-shadow-size, 40%)),\n        transparent\n      );\n    `,\n\n    root: css`\n      scrollbar-width: none;\n      position: relative;\n      overflow: hidden;\n\n      -ms-overflow-style: none;\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    `,\n\n    topShadow: css`\n      mask-image: linear-gradient(\n        0deg,\n        #000 calc(100% - var(--mask-shadow-size, 40%)),\n        transparent\n      );\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    position: 'bottom',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    position: {\n      top: styles.topShadow,\n      bottom: styles.bottomShadow,\n      left: styles.leftShadow,\n      right: styles.rightShadow,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;AAGA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO;EACL,cAAc,KAAG;;;;;;;EAQjB,YAAY,KAAG;;;;;;;EAQf,aAAa,KAAG;;;;;;;EAQhB,MAAM,KAAG;;;;;;;;;;;EAYT,WAAW,KAAG;;;;;;;EAOf;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,UAAU,UACX;CAED,UAAU,EACR,UAAU;EACR,KAAK,OAAO;EACZ,QAAQ,OAAO;EACf,MAAM,OAAO;EACb,OAAO,OAAO;EACf,EACF;CAEF,CAAC"}

package/es/Menu/Menu.d.mts

@@ -1,8 +1,8 @@
 import { MenuProps } from "./type.mjs";
-import * as react31 from "react";
+import * as react49 from "react";
 
 //#region src/Menu/Menu.d.ts
-declare const Menu: react31.NamedExoticComponent<MenuProps<unknown>>;
+declare const Menu: react49.NamedExoticComponent<MenuProps<unknown>>;
 //#endregion
 export { Menu };
 //# sourceMappingURL=Menu.d.mts.map

package/es/Menu/Menu.mjs

@@ -2,37 +2,15 @@
 
 import { IconProvider } from "../Icon/components/IconProvider.mjs";
 import { mapItems } from "./utils.mjs";
-import { useStyles } from "./style.mjs";
+import { variants } from "./style.mjs";
 import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { ConfigProvider, Menu } from "antd";
-import { cva } from "class-variance-authority";
+import { cx, useTheme } from "antd-style";
 
 //#region src/Menu/Menu.tsx
 const Menu$1 = memo(({ compact, shadow, variant = "borderless", className, selectable, iconProps, items, ref, ...rest }) => {
-	const { cx, styles, theme } = useStyles();
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: {
-			compact: false,
-			shadow: false,
-			variant: "borderless"
-		},
-		variants: {
-			variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless
-			},
-			shadow: {
-				false: null,
-				true: styles.shadow
-			},
-			compact: {
-				false: null,
-				true: styles.compact
-			}
-		}
-	}), [styles]);
+	const theme = useTheme();
 	const antdItems = useMemo(() => items.map((item) => mapItems(item)), [items]);
 	return /* @__PURE__ */ jsx(ConfigProvider, {
 		theme: { components: { Menu: {

package/es/Menu/Menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.mjs","names":["Menu","AntdMenu"],"sources":["../../src/Menu/Menu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu as AntdMenu, ConfigProvider } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\n\nimport { IconProvider } from '@/Icon';\nimport { mapItems } from '@/Menu/utils';\n\nimport { useStyles } from './style';\nimport type { MenuProps } from './type';\n\nconst Menu = memo<MenuProps>(\n  ({\n    compact,\n    shadow,\n    variant = 'borderless',\n    className,\n    selectable,\n    iconProps,\n    items,\n    ref,\n    ...rest\n  }) => {\n    const { cx, styles, theme } = useStyles();\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            compact: false,\n            shadow: false,\n            variant: 'borderless',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n            shadow: {\n              false: null,\n              true: styles.shadow,\n            },\n            compact: {\n              false: null,\n              true: styles.compact,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const antdItems = useMemo(() => items.map((item) => mapItems(item)), [items]);\n\n    return (\n      <ConfigProvider\n        theme={{\n          components: {\n            Menu: {\n              controlHeightLG: 36,\n              iconMarginInlineEnd: 8,\n              iconSize: 16,\n              itemActiveBg: theme.isDarkMode ? theme.colorFillQuaternary : theme.colorFillSecondary,\n              itemBorderRadius: theme.borderRadius,\n              itemColor: theme.colorTextSecondary,\n              itemHoverBg: theme.colorFillTertiary,\n              itemMarginBlock: 4,\n              itemMarginInline: 4,\n              itemSelectedBg: theme.colorFillSecondary,\n            },\n          },\n        }}\n      >\n        <IconProvider\n          config={{\n            size: 'small',\n            ...iconProps,\n          }}\n        >\n          <AntdMenu\n            className={cx(variants({ compact, shadow, variant }), className)}\n            inlineIndent={12}\n            items={antdItems}\n            mode=\"vertical\"\n            ref={ref}\n            selectable={selectable}\n            {...rest}\n          />\n        </IconProvider>\n      </ConfigProvider>\n    );\n  },\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,SAAO,MACV,EACC,SACA,QACA,UAAU,cACV,WACA,YACA,WACA,OACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,QAAQ,UAAU,WAAW;CAEzC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB;GACf,SAAS;GACT,QAAQ;GACR,SAAS;GACV;EAED,UAAU;GACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB;GACD,QAAQ;IACN,OAAO;IACP,MAAM,OAAO;IACd;GACD,SAAS;IACP,OAAO;IACP,MAAM,OAAO;IACd;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,YAAY,cAAc,MAAM,KAAK,SAAS,SAAS,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC;AAE7E,QACE,oBAAC;EACC,OAAO,EACL,YAAY,EACV,MAAM;GACJ,iBAAiB;GACjB,qBAAqB;GACrB,UAAU;GACV,cAAc,MAAM,aAAa,MAAM,sBAAsB,MAAM;GACnE,kBAAkB,MAAM;GACxB,WAAW,MAAM;GACjB,aAAa,MAAM;GACnB,iBAAiB;GACjB,kBAAkB;GAClB,gBAAgB,MAAM;GACvB,EACF,EACF;YAED,oBAAC;GACC,QAAQ;IACN,MAAM;IACN,GAAG;IACJ;aAED,oBAACC;IACC,WAAW,GAAG,SAAS;KAAE;KAAS;KAAQ;KAAS,CAAC,EAAE,UAAU;IAChE,cAAc;IACd,OAAO;IACP,MAAK;IACA;IACO;IACZ,GAAI;KACJ;IACW;GACA;EAGtB;AAED,OAAK,cAAc;AAEnB,mBAAeD"}
+{"version":3,"file":"Menu.mjs","names":["Menu","AntdMenu"],"sources":["../../src/Menu/Menu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu as AntdMenu, ConfigProvider } from 'antd';\nimport { cx, useTheme } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport { IconProvider } from '@/Icon';\nimport { mapItems } from '@/Menu/utils';\n\nimport { variants } from './style';\nimport type { MenuProps } from './type';\n\nconst Menu = memo<MenuProps>(\n  ({\n    compact,\n    shadow,\n    variant = 'borderless',\n    className,\n    selectable,\n    iconProps,\n    items,\n    ref,\n    ...rest\n  }) => {\n    const theme = useTheme();\n\n    const antdItems = useMemo(() => items.map((item) => mapItems(item)), [items]);\n\n    return (\n      <ConfigProvider\n        theme={{\n          components: {\n            Menu: {\n              controlHeightLG: 36,\n              iconMarginInlineEnd: 8,\n              iconSize: 16,\n              itemActiveBg: theme.isDarkMode ? theme.colorFillQuaternary : theme.colorFillSecondary,\n              itemBorderRadius: theme.borderRadius,\n              itemColor: theme.colorTextSecondary,\n              itemHoverBg: theme.colorFillTertiary,\n              itemMarginBlock: 4,\n              itemMarginInline: 4,\n              itemSelectedBg: theme.colorFillSecondary,\n            },\n          },\n        }}\n      >\n        <IconProvider\n          config={{\n            size: 'small',\n            ...iconProps,\n          }}\n        >\n          <AntdMenu\n            className={cx(variants({ compact, shadow, variant }), className)}\n            inlineIndent={12}\n            items={antdItems}\n            mode=\"vertical\"\n            ref={ref}\n            selectable={selectable}\n            {...rest}\n          />\n        </IconProvider>\n      </ConfigProvider>\n    );\n  },\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,SAAO,MACV,EACC,SACA,QACA,UAAU,cACV,WACA,YACA,WACA,OACA,KACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CAExB,MAAM,YAAY,cAAc,MAAM,KAAK,SAAS,SAAS,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC;AAE7E,QACE,oBAAC;EACC,OAAO,EACL,YAAY,EACV,MAAM;GACJ,iBAAiB;GACjB,qBAAqB;GACrB,UAAU;GACV,cAAc,MAAM,aAAa,MAAM,sBAAsB,MAAM;GACnE,kBAAkB,MAAM;GACxB,WAAW,MAAM;GACjB,aAAa,MAAM;GACnB,iBAAiB;GACjB,kBAAkB;GAClB,gBAAgB,MAAM;GACvB,EACF,EACF;YAED,oBAAC;GACC,QAAQ;IACN,MAAM;IACN,GAAG;IACJ;aAED,oBAACC;IACC,WAAW,GAAG,SAAS;KAAE;KAAS;KAAQ;KAAS,CAAC,EAAE,UAAU;IAChE,cAAc;IACd,OAAO;IACP,MAAK;IACA;IACO;IACZ,GAAI;KACJ;IACW;GACA;EAGtB;AAED,OAAK,cAAc;AAEnB,mBAAeD"}

package/es/Menu/style.mjs

@@ -1,45 +1,70 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/Menu/style.ts
-const useStyles = createStyles(({ cx: cx$1, css: css$1, token, stylish, prefixCls }) => ({
-	borderless: cx$1(stylish.variantBorderlessWithoutHover, css$1`
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
+	borderless: cx(staticStylish.variantBorderlessWithoutHover, css$1`
       padding: 0;
       border-radius: unset;
     `),
 	compact: css$1`
-    &.${prefixCls}-menu {
-      .${prefixCls}-menu-item-divider {
+    &[class*='ant-menu'] {
+      [class*='ant-menu-item-divider'] {
         margin: 0;
       }
     }
   `,
-	filled: stylish.variantFilledWithoutHover,
-	outlined: stylish.variantOutlinedWithoutHover,
+	filled: staticStylish.variantFilledWithoutHover,
+	outlined: staticStylish.variantOutlinedWithoutHover,
 	root: css$1`
-    &.${prefixCls}-menu {
+    &[class*='ant-menu'] {
       flex: 1;
 
       padding: 4px;
+      border: none !important;
+      border-radius: ${cssVar$1.borderRadiusLG};
 
       background: transparent;
-      border: none !important;
-      border-radius: ${token.borderRadiusLG}px;
 
-      .${prefixCls}-menu-sub.${prefixCls}-menu-inline {
+      [class*='ant-menu-sub'][class*='ant-menu-inline'] {
         background: transparent;
-        > .${prefixCls}-menu-item {
+
+        > [class*='ant-menu-item'] {
           padding-inline-start: 36px !important;
         }
       }
 
-      .${prefixCls}-menu-item-divider {
+      [class*='ant-menu-item-divider'] {
         margin-block: 1em;
       }
     }
   `,
-	shadow: stylish.shadow
+	shadow: staticStylish.shadow
 }));
+const variants = cva(styles.root, {
+	defaultVariants: {
+		compact: false,
+		shadow: false,
+		variant: "borderless"
+	},
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		},
+		compact: {
+			false: null,
+			true: styles.compact
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { variants };
 //# sourceMappingURL=style.mjs.map

package/es/Menu/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/Menu/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ cx, css, token, stylish, prefixCls }) => ({\n  borderless: cx(\n    stylish.variantBorderlessWithoutHover,\n    css`\n      padding: 0;\n      border-radius: unset;\n    `,\n  ),\n  compact: css`\n    &.${prefixCls}-menu {\n      .${prefixCls}-menu-item-divider {\n        margin: 0;\n      }\n    }\n  `,\n  filled: stylish.variantFilledWithoutHover,\n  outlined: stylish.variantOutlinedWithoutHover,\n  root: css`\n    &.${prefixCls}-menu {\n      flex: 1;\n\n      padding: 4px;\n\n      background: transparent;\n      border: none !important;\n      border-radius: ${token.borderRadiusLG}px;\n\n      .${prefixCls}-menu-sub.${prefixCls}-menu-inline {\n        background: transparent;\n        > .${prefixCls}-menu-item {\n          padding-inline-start: 36px !important;\n        }\n      }\n\n      .${prefixCls}-menu-item-divider {\n        margin-block: 1em;\n      }\n    }\n  `,\n  shadow: stylish.shadow,\n}));\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,UAAI,YAAK,OAAO,SAAS,iBAAiB;CACjF,YAAYA,KACV,QAAQ,+BACR,KAAG;;;MAIJ;CACD,SAAS,KAAG;QACN,UAAU;SACT,UAAU;;;;;CAKjB,QAAQ,QAAQ;CAChB,UAAU,QAAQ;CAClB,MAAM,KAAG;QACH,UAAU;;;;;;;uBAOK,MAAM,eAAe;;SAEnC,UAAU,YAAY,UAAU;;aAE5B,UAAU;;;;;SAKd,UAAU;;;;;CAKjB,QAAQ,QAAQ;CACjB,EAAE"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/Menu/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  borderless: cx(\n    lobeStaticStylish.variantBorderlessWithoutHover,\n    css`\n      padding: 0;\n      border-radius: unset;\n    `,\n  ),\n  compact: css`\n    &[class*='ant-menu'] {\n      [class*='ant-menu-item-divider'] {\n        margin: 0;\n      }\n    }\n  `,\n  filled: lobeStaticStylish.variantFilledWithoutHover,\n  outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n  root: css`\n    &[class*='ant-menu'] {\n      flex: 1;\n\n      padding: 4px;\n      border: none !important;\n      border-radius: ${cssVar.borderRadiusLG};\n\n      background: transparent;\n\n      [class*='ant-menu-sub'][class*='ant-menu-inline'] {\n        background: transparent;\n\n        > [class*='ant-menu-item'] {\n          padding-inline-start: 36px !important;\n        }\n      }\n\n      [class*='ant-menu-item-divider'] {\n        margin-block: 1em;\n      }\n    }\n  `,\n  shadow: lobeStaticStylish.shadow,\n}));\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    compact: false,\n    shadow: false,\n    variant: 'borderless',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    compact: {\n      false: null,\n      true: styles.compact,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,YAAY,GACVA,cAAkB,+BAClB,KAAG;;;MAIJ;CACD,SAAS,KAAG;;;;;;;CAOZ,QAAQA,cAAkB;CAC1B,UAAUA,cAAkB;CAC5B,MAAM,KAAG;;;;;;uBAMYC,SAAO,eAAe;;;;;;;;;;;;;;;;;CAiB3C,QAAQD,cAAkB;CAC3B,EAAE;AAEH,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,SAAS;EACT,QAAQ;EACR,SAAS;EACV;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,SAAS;GACP,OAAO;GACP,MAAM,OAAO;GACd;EACF;CAEF,CAAC"}

package/es/Mermaid/FullFeatured.mjs

@@ -5,10 +5,10 @@ import Text_default from "../Text/Text.mjs";
 import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
 import CopyButton_default from "../CopyButton/CopyButton.mjs";
 import MaterialFileTypeIcon_default from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
-import { useStyles } from "../Highlighter/style.mjs";
+import { bodyVariants, headerVariants, variants } from "../Highlighter/style.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { cx } from "antd-style";
 import { ChevronDown, ChevronRight } from "lucide-react";
 
 //#region src/Mermaid/FullFeatured.tsx
@@ -37,44 +37,11 @@ const MermaidHeaderLanguage = memo(({ fileName, language, showLanguage }) => {
 }, (prev, next) => prev.fileName === next.fileName && prev.language === next.language && prev.showLanguage === next.showLanguage);
 const MermaidFullFeatured = memo(({ showLanguage, styles: customStyles, classNames, content, children, className, copyable, actionsRender, style, variant, shadow, language = "mermaid", fileName, defaultExpand = true, ...rest }) => {
 	const [expand, setExpand] = useState(defaultExpand);
-	const { styles, cx } = useStyles("block");
 	const contentRef = useRef(content);
 	useEffect(() => {
 		contentRef.current = content;
 	}, [content]);
 	const getContent = useCallback(() => contentRef.current, []);
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: {
-			shadow: false,
-			variant: "filled"
-		},
-		variants: {
-			variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless
-			},
-			shadow: {
-				false: null,
-				true: styles.shadow
-			}
-		}
-	}), [styles]);
-	const headerVariants = useMemo(() => cva(styles.headerRoot, {
-		defaultVariants: { variant: "filled" },
-		variants: { variant: {
-			filled: cx(styles.headerFilled, styles.headerOutlined),
-			outlined: styles.headerOutlined,
-			borderless: styles.headerBorderless
-		} }
-	}), [styles]);
-	const bodyVariants = useMemo(() => cva(styles.bodyRoot, {
-		defaultVariants: { expand: true },
-		variants: { expand: {
-			false: styles.bodyCollapsed,
-			true: styles.bodyExpand
-		} }
-	}), [styles]);
 	const originalActions = useMemo(() => {
 		if (!copyable) return null;
 		return /* @__PURE__ */ jsx(CopyButton_default, {

package/es/Mermaid/FullFeatured.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FullFeatured.mjs","names":["Flexbox","MaterialFileTypeIcon","Text","CopyButton","ActionIcon"],"sources":["../../src/Mermaid/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { ReactNode, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { useStyles } from '@/Highlighter/style';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\n\nimport { MermaidProps } from './type';\n\nconst MermaidHeaderLanguage = memo(\n  ({\n    fileName,\n    language,\n    showLanguage,\n  }: {\n    fileName?: string;\n    language: string;\n    showLanguage?: boolean;\n  }) => {\n    if (!showLanguage) return null;\n\n    return (\n      <Flexbox\n        align={'center'}\n        className={'languageTitle'}\n        flex={1}\n        gap={4}\n        horizontal\n        justify={'flex-start'}\n        paddingInline={8}\n      >\n        <MaterialFileTypeIcon\n          fallbackUnknownType={false}\n          filename={fileName || language}\n          size={18}\n          type={'file'}\n          variant={'raw'}\n        />\n\n        <Text ellipsis fontSize={13}>\n          {fileName || 'Mermaid'}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.fileName === next.fileName &&\n    prev.language === next.language &&\n    prev.showLanguage === next.showLanguage,\n);\n\nexport interface MermaidFullFeaturedProps extends Omit<MermaidProps, 'children'> {\n  children: ReactNode;\n  content: string;\n}\n\nexport const MermaidFullFeatured = memo<MermaidFullFeaturedProps>(\n  ({\n    showLanguage,\n    styles: customStyles,\n    classNames,\n    content,\n    children,\n    className,\n    copyable,\n    actionsRender,\n    style,\n    variant,\n    shadow,\n    language = 'mermaid',\n    fileName,\n    defaultExpand = true,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const { styles, cx } = useStyles('block');\n    const contentRef = useRef(content);\n\n    useEffect(() => {\n      contentRef.current = content;\n    }, [content]);\n\n    const getContent = useCallback(() => contentRef.current, []);\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            shadow: false,\n            variant: 'filled',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n            shadow: {\n              false: null,\n              true: styles.shadow,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const headerVariants = useMemo(\n      () =>\n        cva(styles.headerRoot, {\n          defaultVariants: {\n            variant: 'filled',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: cx(styles.headerFilled, styles.headerOutlined),\n              outlined: styles.headerOutlined,\n              borderless: styles.headerBorderless,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const bodyVariants = useMemo(\n      () =>\n        cva(styles.bodyRoot, {\n          defaultVariants: {\n            expand: true,\n          },\n          variants: {\n            expand: {\n              false: styles.bodyCollapsed,\n              true: styles.bodyExpand,\n            },\n          },\n        }),\n      [styles],\n    );\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return <CopyButton content={getContent} size={'small'} />;\n    }, [copyable, getContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize: 'small',\n        content,\n        getContent,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, originalActions]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        className={cx(variants({ shadow, variant }), className)}\n        data-code-type=\"mermaid\"\n        style={style}\n        {...rest}\n      >\n        <Flexbox\n          align={'center'}\n          className={cx(headerVariants({ variant }), classNames?.header)}\n          horizontal\n          justify={'space-between'}\n          onClick={handleToggleExpand}\n          style={customStyles?.header}\n        >\n          <MermaidHeaderLanguage\n            fileName={fileName}\n            language={language}\n            showLanguage={showLanguage}\n          />\n          <Flexbox\n            align={'center'}\n            flex={'none'}\n            gap={4}\n            horizontal\n            onClick={(e) => e.stopPropagation()}\n          >\n            <Flexbox align={'center'} className={'panel-actions'} flex={'none'} gap={4} horizontal>\n              {actions}\n            </Flexbox>\n            <ActionIcon\n              icon={expand ? ChevronDown : ChevronRight}\n              onClick={handleToggleExpand}\n              size={'small'}\n            />\n          </Flexbox>\n        </Flexbox>\n        <Flexbox\n          className={cx(bodyVariants({ expand }), classNames?.body)}\n          style={customStyles?.body}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default MermaidFullFeatured;\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,wBAAwB,MAC3B,EACC,UACA,UACA,mBAKI;AACJ,KAAI,CAAC,aAAc,QAAO;AAE1B,QACE,qBAACA;EACC,OAAO;EACP,WAAW;EACX,MAAM;EACN,KAAK;EACL;EACA,SAAS;EACT,eAAe;aAEf,oBAACC;GACC,qBAAqB;GACrB,UAAU,YAAY;GACtB,MAAM;GACN,MAAM;GACN,SAAS;IACT,EAEF,oBAACC;GAAK;GAAS,UAAU;aACtB,YAAY;IACR;GACC;IAGb,MAAM,SACL,KAAK,aAAa,KAAK,YACvB,KAAK,aAAa,KAAK,YACvB,KAAK,iBAAiB,KAAK,aAC9B;AAOD,MAAa,sBAAsB,MAChC,EACC,cACA,QAAQ,cACR,YACA,SACA,UACA,WACA,UACA,eACA,OACA,SACA,QACA,WAAW,WACX,UACA,gBAAgB,MAChB,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,cAAc;CACnD,MAAM,EAAE,QAAQ,OAAO,UAAU,QAAQ;CACzC,MAAM,aAAa,OAAO,QAAQ;AAElC,iBAAgB;AACd,aAAW,UAAU;IACpB,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,kBAAkB,WAAW,SAAS,EAAE,CAAC;CAC5D,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB;GACf,QAAQ;GACR,SAAS;GACV;EAED,UAAU;GACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB;GACD,QAAQ;IACN,OAAO;IACP,MAAM,OAAO;IACd;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,iBAAiB,cAEnB,IAAI,OAAO,YAAY;EACrB,iBAAiB,EACf,SAAS,UACV;EAED,UAAU,EACR,SAAS;GACP,QAAQ,GAAG,OAAO,cAAc,OAAO,eAAe;GACtD,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB,EACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,eAAe,cAEjB,IAAI,OAAO,UAAU;EACnB,iBAAiB,EACf,QAAQ,MACT;EACD,UAAU,EACR,QAAQ;GACN,OAAO,OAAO;GACd,MAAM,OAAO;GACd,EACF;EACF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,kBAAkB,cAAc;AACpC,MAAI,CAAC,SAAU,QAAO;AACtB,SAAO,oBAACC;GAAW,SAAS;GAAY,MAAM;IAAW;IACxD,CAAC,UAAU,WAAW,CAAC;CAE1B,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,cAAe,QAAO;AAC3B,SAAO,cAAc;GACnB,gBAAgB;GAChB;GACA;GACA,cAAc;GACf,CAAC;IACD;EAAC;EAAe;EAAS;EAAY;EAAgB,CAAC;CAEzD,MAAM,qBAAqB,kBAAkB;AAC3C,aAAW,SAAS,CAAC,KAAK;IACzB,EAAE,CAAC;AAEN,QACE,qBAACH;EACC,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS,CAAC,EAAE,UAAU;EACvD,kBAAe;EACR;EACP,GAAI;aAEJ,qBAACA;GACC,OAAO;GACP,WAAW,GAAG,eAAe,EAAE,SAAS,CAAC,EAAE,YAAY,OAAO;GAC9D;GACA,SAAS;GACT,SAAS;GACT,OAAO,cAAc;cAErB,oBAAC;IACW;IACA;IACI;KACd,EACF,qBAACA;IACC,OAAO;IACP,MAAM;IACN,KAAK;IACL;IACA,UAAU,MAAM,EAAE,iBAAiB;eAEnC,oBAACA;KAAQ,OAAO;KAAU,WAAW;KAAiB,MAAM;KAAQ,KAAK;KAAG;eACzE;MACO,EACV,oBAACI;KACC,MAAM,SAAS,cAAc;KAC7B,SAAS;KACT,MAAM;MACN;KACM;IACF,EACV,oBAACJ;GACC,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,EAAE,YAAY,KAAK;GACzD,OAAO,cAAc;GAEpB;IACO;GACF;EAGf;AAED,2BAAe"}
+{"version":3,"file":"FullFeatured.mjs","names":["Flexbox","MaterialFileTypeIcon","Text","CopyButton","ActionIcon"],"sources":["../../src/Mermaid/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { ReactNode, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { bodyVariants, headerVariants, variants } from '@/Highlighter/style';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\n\nimport { MermaidProps } from './type';\n\nconst MermaidHeaderLanguage = memo(\n  ({\n    fileName,\n    language,\n    showLanguage,\n  }: {\n    fileName?: string;\n    language: string;\n    showLanguage?: boolean;\n  }) => {\n    if (!showLanguage) return null;\n\n    return (\n      <Flexbox\n        align={'center'}\n        className={'languageTitle'}\n        flex={1}\n        gap={4}\n        horizontal\n        justify={'flex-start'}\n        paddingInline={8}\n      >\n        <MaterialFileTypeIcon\n          fallbackUnknownType={false}\n          filename={fileName || language}\n          size={18}\n          type={'file'}\n          variant={'raw'}\n        />\n\n        <Text ellipsis fontSize={13}>\n          {fileName || 'Mermaid'}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.fileName === next.fileName &&\n    prev.language === next.language &&\n    prev.showLanguage === next.showLanguage,\n);\n\nexport interface MermaidFullFeaturedProps extends Omit<MermaidProps, 'children'> {\n  children: ReactNode;\n  content: string;\n}\n\nexport const MermaidFullFeatured = memo<MermaidFullFeaturedProps>(\n  ({\n    showLanguage,\n    styles: customStyles,\n    classNames,\n    content,\n    children,\n    className,\n    copyable,\n    actionsRender,\n    style,\n    variant,\n    shadow,\n    language = 'mermaid',\n    fileName,\n    defaultExpand = true,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const contentRef = useRef(content);\n\n    useEffect(() => {\n      contentRef.current = content;\n    }, [content]);\n\n    const getContent = useCallback(() => contentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return <CopyButton content={getContent} size={'small'} />;\n    }, [copyable, getContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize: 'small',\n        content,\n        getContent,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, originalActions]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        className={cx(variants({ shadow, variant }), className)}\n        data-code-type=\"mermaid\"\n        style={style}\n        {...rest}\n      >\n        <Flexbox\n          align={'center'}\n          className={cx(headerVariants({ variant }), classNames?.header)}\n          horizontal\n          justify={'space-between'}\n          onClick={handleToggleExpand}\n          style={customStyles?.header}\n        >\n          <MermaidHeaderLanguage\n            fileName={fileName}\n            language={language}\n            showLanguage={showLanguage}\n          />\n          <Flexbox\n            align={'center'}\n            flex={'none'}\n            gap={4}\n            horizontal\n            onClick={(e) => e.stopPropagation()}\n          >\n            <Flexbox align={'center'} className={'panel-actions'} flex={'none'} gap={4} horizontal>\n              {actions}\n            </Flexbox>\n            <ActionIcon\n              icon={expand ? ChevronDown : ChevronRight}\n              onClick={handleToggleExpand}\n              size={'small'}\n            />\n          </Flexbox>\n        </Flexbox>\n        <Flexbox\n          className={cx(bodyVariants({ expand }), classNames?.body)}\n          style={customStyles?.body}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default MermaidFullFeatured;\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,wBAAwB,MAC3B,EACC,UACA,UACA,mBAKI;AACJ,KAAI,CAAC,aAAc,QAAO;AAE1B,QACE,qBAACA;EACC,OAAO;EACP,WAAW;EACX,MAAM;EACN,KAAK;EACL;EACA,SAAS;EACT,eAAe;aAEf,oBAACC;GACC,qBAAqB;GACrB,UAAU,YAAY;GACtB,MAAM;GACN,MAAM;GACN,SAAS;IACT,EAEF,oBAACC;GAAK;GAAS,UAAU;aACtB,YAAY;IACR;GACC;IAGb,MAAM,SACL,KAAK,aAAa,KAAK,YACvB,KAAK,aAAa,KAAK,YACvB,KAAK,iBAAiB,KAAK,aAC9B;AAOD,MAAa,sBAAsB,MAChC,EACC,cACA,QAAQ,cACR,YACA,SACA,UACA,WACA,UACA,eACA,OACA,SACA,QACA,WAAW,WACX,UACA,gBAAgB,MAChB,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,cAAc;CACnD,MAAM,aAAa,OAAO,QAAQ;AAElC,iBAAgB;AACd,aAAW,UAAU;IACpB,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,kBAAkB,WAAW,SAAS,EAAE,CAAC;CAE5D,MAAM,kBAAkB,cAAc;AACpC,MAAI,CAAC,SAAU,QAAO;AACtB,SAAO,oBAACC;GAAW,SAAS;GAAY,MAAM;IAAW;IACxD,CAAC,UAAU,WAAW,CAAC;CAE1B,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,cAAe,QAAO;AAC3B,SAAO,cAAc;GACnB,gBAAgB;GAChB;GACA;GACA,cAAc;GACf,CAAC;IACD;EAAC;EAAe;EAAS;EAAY;EAAgB,CAAC;CAEzD,MAAM,qBAAqB,kBAAkB;AAC3C,aAAW,SAAS,CAAC,KAAK;IACzB,EAAE,CAAC;AAEN,QACE,qBAACH;EACC,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS,CAAC,EAAE,UAAU;EACvD,kBAAe;EACR;EACP,GAAI;aAEJ,qBAACA;GACC,OAAO;GACP,WAAW,GAAG,eAAe,EAAE,SAAS,CAAC,EAAE,YAAY,OAAO;GAC9D;GACA,SAAS;GACT,SAAS;GACT,OAAO,cAAc;cAErB,oBAAC;IACW;IACA;IACI;KACd,EACF,qBAACA;IACC,OAAO;IACP,MAAM;IACN,KAAK;IACL;IACA,UAAU,MAAM,EAAE,iBAAiB;eAEnC,oBAACA;KAAQ,OAAO;KAAU,WAAW;KAAiB,MAAM;KAAQ,KAAK;KAAG;eACzE;MACO,EACV,oBAACI;KACC,MAAM,SAAS,cAAc;KAC7B,SAAS;KACT,MAAM;MACN;KACM;IACF,EACV,oBAACJ;GACC,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,EAAE,YAAY,KAAK;GACzD,OAAO,cAAc;GAEpB;IACO;GACF;EAGf;AAED,2BAAe"}

package/es/Mermaid/Mermaid.d.mts

@@ -1,8 +1,8 @@
 import { MermaidProps } from "./type.mjs";
-import * as react29 from "react";
+import * as react47 from "react";
 
 //#region src/Mermaid/Mermaid.d.ts
-declare const Mermaid: react29.NamedExoticComponent<MermaidProps>;
+declare const Mermaid: react47.NamedExoticComponent<MermaidProps>;
 //#endregion
 export { Mermaid };
 //# sourceMappingURL=Mermaid.d.mts.map