@lobehub/ui 4.3.2 → 4.3.3

package/es/GroupAvatar/style.mjs

@@ -1,20 +1,9 @@
 import { SMOOTH_CORNER_MASKS } from "../utils/smoothCorners.mjs";
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/GroupAvatar/style.ts
-const useStyles = createStyles(({ css: css$1 }) => {
-	const baseRoot = css$1`
-    overflow: hidden;
-    flex: none;
-
-    /* Fallback for browsers without mask support */
-    border-radius: 15%;
-
-    /* Apply smooth corners mask with fallback */
-    @supports (mask-image: url('data:image/svg+xml;base64,')) {
-      border-radius: 0;
-    }
-  `;
+const styles = createStaticStyles(({ css: css$1 }) => {
 	const createCornerVariant = (cornerType) => css$1`
     mask-image: url('${SMOOTH_CORNER_MASKS[cornerType]}');
     mask-position: center;
@@ -24,14 +13,36 @@ const useStyles = createStyles(({ css: css$1 }) => {
 	return {
 		circle: createCornerVariant("circle"),
 		ios: createCornerVariant("ios"),
-		root: baseRoot,
+		root: css$1`
+      overflow: hidden;
+      flex: none;
+
+      /* Fallback for browsers without mask support */
+      border-radius: 15%;
+
+      /* Apply smooth corners mask with fallback */
+      @supports (mask-image: url('data:image/svg+xml;base64,')) {
+        border-radius: 0;
+      }
+    `,
 		sharp: createCornerVariant("sharp"),
 		smooth: createCornerVariant("smooth"),
 		square: createCornerVariant("square"),
 		squircle: createCornerVariant("squircle")
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: { cornerShape: "squircle" },
+	variants: { cornerShape: {
+		circle: styles.circle,
+		ios: styles.ios,
+		sharp: styles.sharp,
+		smooth: styles.smooth,
+		square: styles.square,
+		squircle: styles.squircle
+	} }
+});
 
 //#endregion
-export { useStyles };
+export { variants };
 //# sourceMappingURL=style.mjs.map

package/es/GroupAvatar/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/GroupAvatar/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nimport { SMOOTH_CORNER_MASKS } from '@/utils/smoothCorners';\n\nexport const useStyles = createStyles(({ css }) => {\n  const baseRoot = css`\n    overflow: hidden;\n    flex: none;\n\n    /* Fallback for browsers without mask support */\n    border-radius: 15%;\n\n    /* Apply smooth corners mask with fallback */\n    @supports (mask-image: url('data:image/svg+xml;base64,')) {\n      border-radius: 0;\n    }\n  `;\n\n  const createCornerVariant = (cornerType: keyof typeof SMOOTH_CORNER_MASKS) => css`\n    mask-image: url('${SMOOTH_CORNER_MASKS[cornerType]}');\n    mask-position: center;\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n  `;\n\n  return {\n    circle: createCornerVariant('circle'),\n    ios: createCornerVariant('ios'),\n    root: baseRoot,\n    sharp: createCornerVariant('sharp'),\n    smooth: createCornerVariant('smooth'),\n    square: createCornerVariant('square'),\n    squircle: createCornerVariant('squircle'),\n  };\n});\n"],"mappings":";;;;AAIA,MAAa,YAAY,cAAc,EAAE,iBAAU;CACjD,MAAM,WAAW,KAAG;;;;;;;;;;;;CAapB,MAAM,uBAAuB,eAAiD,KAAG;uBAC5D,oBAAoB,YAAY;;;;;AAMrD,QAAO;EACL,QAAQ,oBAAoB,SAAS;EACrC,KAAK,oBAAoB,MAAM;EAC/B,MAAM;EACN,OAAO,oBAAoB,QAAQ;EACnC,QAAQ,oBAAoB,SAAS;EACrC,QAAQ,oBAAoB,SAAS;EACrC,UAAU,oBAAoB,WAAW;EAC1C;EACD"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/GroupAvatar/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { SMOOTH_CORNER_MASKS } from '@/utils/smoothCorners';\n\nexport const styles = createStaticStyles(({ css }) => {\n  const createCornerVariant = (cornerType: keyof typeof SMOOTH_CORNER_MASKS) => css`\n    mask-image: url('${SMOOTH_CORNER_MASKS[cornerType]}');\n    mask-position: center;\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n  `;\n\n  return {\n    circle: createCornerVariant('circle'),\n    ios: createCornerVariant('ios'),\n    root: css`\n      overflow: hidden;\n      flex: none;\n\n      /* Fallback for browsers without mask support */\n      border-radius: 15%;\n\n      /* Apply smooth corners mask with fallback */\n      @supports (mask-image: url('data:image/svg+xml;base64,')) {\n        border-radius: 0;\n      }\n    `,\n    sharp: createCornerVariant('sharp'),\n    smooth: createCornerVariant('smooth'),\n    square: createCornerVariant('square'),\n    squircle: createCornerVariant('squircle'),\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    cornerShape: 'squircle',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    cornerShape: {\n      circle: styles.circle,\n      ios: styles.ios,\n      sharp: styles.sharp,\n      smooth: styles.smooth,\n      square: styles.square,\n      squircle: styles.squircle,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;CACpD,MAAM,uBAAuB,eAAiD,KAAG;uBAC5D,oBAAoB,YAAY;;;;;AAMrD,QAAO;EACL,QAAQ,oBAAoB,SAAS;EACrC,KAAK,oBAAoB,MAAM;EAC/B,MAAM,KAAG;;;;;;;;;;;;EAYT,OAAO,oBAAoB,QAAQ;EACnC,QAAQ,oBAAoB,SAAS;EACrC,QAAQ,oBAAoB,SAAS;EACrC,UAAU,oBAAoB,WAAW;EAC1C;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,aAAa,YACd;CAED,UAAU,EACR,aAAa;EACX,QAAQ,OAAO;EACf,KAAK,OAAO;EACZ,OAAO,OAAO;EACd,QAAQ,OAAO;EACf,QAAQ,OAAO;EACf,UAAU,OAAO;EAClB,EACF;CAEF,CAAC"}

package/es/GuideCard/GuideCard.d.mts

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

package/es/GuideCard/GuideCard.mjs

@@ -3,36 +3,20 @@
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
 import Img_default from "../Img/index.mjs";
-import { useStyles } from "./style.mjs";
-import { memo, useMemo, useState } from "react";
+import { styles, variants } from "./style.mjs";
+import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { cx, useThemeMode } from "antd-style";
 import { X } from "lucide-react";
 
 //#region src/GuideCard/GuideCard.tsx
 const GuideCard = memo(({ cover, onClose, shadow, closable = true, afterClose, alt, className, title, desc, width, styles: customStyles, height, coverProps, variant = "filled", closeIconProps, classNames, ref, ...rest }) => {
 	const [show, setShow] = useState(true);
-	const { cx, styles } = useStyles();
-	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 { isDarkMode } = useThemeMode();
 	if (!show) return null;
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		className: cx(variants({
+			isDarkMode,
 			shadow,
 			variant
 		}), className),

package/es/GuideCard/GuideCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GuideCard.mjs","names":["Flexbox","ActionIcon","Img"],"sources":["../../src/GuideCard/GuideCard.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport { memo, useMemo, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Img from '@/Img';\n\nimport { useStyles } from './style';\nimport type { GuideCardProps } from './type';\n\nconst GuideCard = memo<GuideCardProps>(\n  ({\n    cover,\n    onClose,\n    shadow,\n    closable = true,\n    afterClose,\n    alt,\n    className,\n    title,\n    desc,\n    width,\n    styles: customStyles,\n    height,\n    coverProps,\n    variant = 'filled',\n    closeIconProps,\n    classNames,\n    ref,\n    ...rest\n  }) => {\n    const [show, setShow] = useState(true);\n    const { cx, styles } = useStyles();\n\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    if (!show) return null;\n\n    return (\n      <Flexbox className={cx(variants({ shadow, variant }), className)} ref={ref} {...rest}>\n        {closable && (\n          <ActionIcon\n            size={'small'}\n            {...closeIconProps}\n            className={cx(styles.close, closeIconProps?.className)}\n            icon={X}\n            onClick={(e) => {\n              setShow(false);\n              onClose?.(e);\n              afterClose?.();\n            }}\n          />\n        )}\n        {cover && (\n          <Img\n            alt={alt}\n            className={cx(styles.cover, classNames?.cover)}\n            height={height}\n            src={cover}\n            style={customStyles?.cover}\n            width={width}\n            {...coverProps}\n          />\n        )}\n        <Flexbox\n          className={cx(styles.content, classNames?.content)}\n          gap={8}\n          style={customStyles?.content}\n        >\n          {title && <div className={styles.title}>{title}</div>}\n          {desc && <div className={styles.desc}>{desc}</div>}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nGuideCard.displayName = 'GuideCard';\n\nexport default GuideCard;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,YAAY,MACf,EACC,OACA,SACA,QACA,WAAW,MACX,YACA,KACA,WACA,OACA,MACA,OACA,QAAQ,cACR,QACA,YACA,UAAU,UACV,gBACA,YACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,EAAE,IAAI,WAAW,WAAW;CAElC,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;AAED,KAAI,CAAC,KAAM,QAAO;AAElB,QACE,qBAACA;EAAQ,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS,CAAC,EAAE,UAAU;EAAO;EAAK,GAAI;;GAC7E,YACC,oBAACC;IACC,MAAM;IACN,GAAI;IACJ,WAAW,GAAG,OAAO,OAAO,gBAAgB,UAAU;IACtD,MAAM;IACN,UAAU,MAAM;AACd,aAAQ,MAAM;AACd,eAAU,EAAE;AACZ,mBAAc;;KAEhB;GAEH,SACC,oBAACC;IACM;IACL,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;IACtC;IACR,KAAK;IACL,OAAO,cAAc;IACd;IACP,GAAI;KACJ;GAEJ,qBAACF;IACC,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;IAClD,KAAK;IACL,OAAO,cAAc;eAEpB,SAAS,oBAAC;KAAI,WAAW,OAAO;eAAQ;MAAY,EACpD,QAAQ,oBAAC;KAAI,WAAW,OAAO;eAAO;MAAW;KAC1C;;GACF;EAGf;AAED,UAAU,cAAc;AAExB,wBAAe"}
+{"version":3,"file":"GuideCard.mjs","names":["Flexbox","ActionIcon","Img"],"sources":["../../src/GuideCard/GuideCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Img from '@/Img';\n\nimport { styles, variants } from './style';\nimport type { GuideCardProps } from './type';\n\nconst GuideCard = memo<GuideCardProps>(\n  ({\n    cover,\n    onClose,\n    shadow,\n    closable = true,\n    afterClose,\n    alt,\n    className,\n    title,\n    desc,\n    width,\n    styles: customStyles,\n    height,\n    coverProps,\n    variant = 'filled',\n    closeIconProps,\n    classNames,\n    ref,\n    ...rest\n  }) => {\n    const [show, setShow] = useState(true);\n    const { isDarkMode } = useThemeMode();\n\n    if (!show) return null;\n\n    return (\n      <Flexbox\n        className={cx(variants({ isDarkMode, shadow, variant }), className)}\n        ref={ref}\n        {...rest}\n      >\n        {closable && (\n          <ActionIcon\n            size={'small'}\n            {...closeIconProps}\n            className={cx(styles.close, closeIconProps?.className)}\n            icon={X}\n            onClick={(e) => {\n              setShow(false);\n              onClose?.(e);\n              afterClose?.();\n            }}\n          />\n        )}\n        {cover && (\n          <Img\n            alt={alt}\n            className={cx(styles.cover, classNames?.cover)}\n            height={height}\n            src={cover}\n            style={customStyles?.cover}\n            width={width}\n            {...coverProps}\n          />\n        )}\n        <Flexbox\n          className={cx(styles.content, classNames?.content)}\n          gap={8}\n          style={customStyles?.content}\n        >\n          {title && <div className={styles.title}>{title}</div>}\n          {desc && <div className={styles.desc}>{desc}</div>}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nGuideCard.displayName = 'GuideCard';\n\nexport default GuideCard;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,YAAY,MACf,EACC,OACA,SACA,QACA,WAAW,MACX,YACA,KACA,WACA,OACA,MACA,OACA,QAAQ,cACR,QACA,YACA,UAAU,UACV,gBACA,YACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,EAAE,eAAe,cAAc;AAErC,KAAI,CAAC,KAAM,QAAO;AAElB,QACE,qBAACA;EACC,WAAW,GAAG,SAAS;GAAE;GAAY;GAAQ;GAAS,CAAC,EAAE,UAAU;EAC9D;EACL,GAAI;;GAEH,YACC,oBAACC;IACC,MAAM;IACN,GAAI;IACJ,WAAW,GAAG,OAAO,OAAO,gBAAgB,UAAU;IACtD,MAAM;IACN,UAAU,MAAM;AACd,aAAQ,MAAM;AACd,eAAU,EAAE;AACZ,mBAAc;;KAEhB;GAEH,SACC,oBAACC;IACM;IACL,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;IACtC;IACR,KAAK;IACL,OAAO,cAAc;IACd;IACP,GAAI;KACJ;GAEJ,qBAACF;IACC,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;IAClD,KAAK;IACL,OAAO,cAAc;eAEpB,SAAS,oBAAC;KAAI,WAAW,OAAO;eAAQ;MAAY,EACpD,QAAQ,oBAAC;KAAI,WAAW,OAAO;eAAO;MAAW;KAC1C;;GACF;EAGf;AAED,UAAU,cAAc;AAExB,wBAAe"}

package/es/GuideCard/style.mjs

@@ -1,8 +1,10 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/GuideCard/style.ts
-const useStyles = createStyles(({ cx: cx$1, css: css$1, stylish, token, isDarkMode }) => ({
-	borderless: stylish.variantBorderlessWithoutHover,
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
+	borderless: staticStylish.variantBorderlessWithoutHover,
 	close: css$1`
     position: absolute;
     inset-block-start: 8px;
@@ -15,28 +17,68 @@ const useStyles = createStyles(({ cx: cx$1, css: css$1, stylish, token, isDarkMo
     align-self: center;
   `,
 	desc: css$1`
-    color: ${token.colorTextDescription};
+    color: ${cssVar$1.colorTextDescription};
   `,
-	filled: cx$1(stylish.variantFilledWithoutHover, css$1`
-      background: linear-gradient(
-        to bottom,
-        ${isDarkMode ? token.colorFillTertiary : token.colorFillQuaternary},
-        ${isDarkMode ? token.colorFillQuaternary : token.colorFillTertiary}
-      );
-    `),
-	outlined: stylish.variantOutlinedWithoutHover,
+	filledDark: css$1`
+    ${staticStylish.variantFilledWithoutHover};
+    background: linear-gradient(
+      to bottom,
+      ${cssVar$1.colorFillTertiary},
+      ${cssVar$1.colorFillQuaternary}
+    );
+  `,
+	filledLight: css$1`
+    ${staticStylish.variantFilledWithoutHover};
+    background: linear-gradient(
+      to bottom,
+      ${cssVar$1.colorFillQuaternary},
+      ${cssVar$1.colorFillTertiary}
+    );
+  `,
+	outlined: staticStylish.variantOutlinedWithoutHover,
 	root: css$1`
     position: relative;
     overflow: hidden;
-    border-radius: ${token.borderRadiusLG}px;
+    border-radius: ${cssVar$1.borderRadiusLG};
   `,
-	shadow: stylish.shadow,
+	shadow: staticStylish.shadow,
 	title: css$1`
     font-size: 16px;
     font-weight: bold;
   `
 }));
+const variants = cva(styles.root, {
+	compoundVariants: [{
+		class: styles.filledDark,
+		isDarkMode: true,
+		variant: "filled"
+	}, {
+		class: styles.filledLight,
+		isDarkMode: false,
+		variant: "filled"
+	}],
+	defaultVariants: {
+		isDarkMode: false,
+		shadow: false,
+		variant: "filled"
+	},
+	variants: {
+		isDarkMode: {
+			false: null,
+			true: null
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		},
+		variant: {
+			borderless: styles.borderless,
+			filled: null,
+			outlined: styles.outlined
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { styles, variants };
 //# sourceMappingURL=style.mjs.map

package/es/GuideCard/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/GuideCard/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ cx, css, stylish, token, isDarkMode }) => ({\n  borderless: stylish.variantBorderlessWithoutHover,\n  close: css`\n    position: absolute;\n    inset-block-start: 8px;\n    inset-inline-end: 8px;\n  `,\n  content: css`\n    padding: 16px;\n  `,\n  cover: css`\n    align-self: center;\n  `,\n  desc: css`\n    color: ${token.colorTextDescription};\n  `,\n  filled: cx(\n    stylish.variantFilledWithoutHover,\n    css`\n      background: linear-gradient(\n        to bottom,\n        ${isDarkMode ? token.colorFillTertiary : token.colorFillQuaternary},\n        ${isDarkMode ? token.colorFillQuaternary : token.colorFillTertiary}\n      );\n    `,\n  ),\n  outlined: stylish.variantOutlinedWithoutHover,\n  root: css`\n    position: relative;\n    overflow: hidden;\n    border-radius: ${token.borderRadiusLG}px;\n  `,\n  shadow: stylish.shadow,\n  title: css`\n    font-size: 16px;\n    font-weight: bold;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,UAAI,YAAK,SAAS,OAAO,kBAAkB;CAClF,YAAY,QAAQ;CACpB,OAAO,KAAG;;;;;CAKV,SAAS,KAAG;;;CAGZ,OAAO,KAAG;;;CAGV,MAAM,KAAG;aACE,MAAM,qBAAqB;;CAEtC,QAAQA,KACN,QAAQ,2BACR,KAAG;;;UAGG,aAAa,MAAM,oBAAoB,MAAM,oBAAoB;UACjE,aAAa,MAAM,sBAAsB,MAAM,kBAAkB;;MAGxE;CACD,UAAU,QAAQ;CAClB,MAAM,KAAG;;;qBAGU,MAAM,eAAe;;CAExC,QAAQ,QAAQ;CAChB,OAAO,KAAG;;;;CAIX,EAAE"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/GuideCard/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n  close: css`\n    position: absolute;\n    inset-block-start: 8px;\n    inset-inline-end: 8px;\n  `,\n  content: css`\n    padding: 16px;\n  `,\n  cover: css`\n    align-self: center;\n  `,\n  desc: css`\n    color: ${cssVar.colorTextDescription};\n  `,\n  filledDark: css`\n    ${lobeStaticStylish.variantFilledWithoutHover};\n    background: linear-gradient(\n      to bottom,\n      ${cssVar.colorFillTertiary},\n      ${cssVar.colorFillQuaternary}\n    );\n  `,\n  filledLight: css`\n    ${lobeStaticStylish.variantFilledWithoutHover};\n    background: linear-gradient(\n      to bottom,\n      ${cssVar.colorFillQuaternary},\n      ${cssVar.colorFillTertiary}\n    );\n  `,\n  outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n  root: css`\n    position: relative;\n    overflow: hidden;\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n  shadow: lobeStaticStylish.shadow,\n  title: css`\n    font-size: 16px;\n    font-weight: bold;\n  `,\n}));\n\nexport const variants = cva(styles.root, {\n  compoundVariants: [\n    {\n      class: styles.filledDark,\n      isDarkMode: true,\n      variant: 'filled',\n    },\n    {\n      class: styles.filledLight,\n      isDarkMode: false,\n      variant: 'filled',\n    },\n  ],\n  defaultVariants: {\n    isDarkMode: false,\n    shadow: false,\n    variant: 'filled',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    isDarkMode: {\n      false: null,\n      true: null,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: null,\n      outlined: styles.outlined,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,YAAYA,cAAkB;CAC9B,OAAO,KAAG;;;;;CAKV,SAAS,KAAG;;;CAGZ,OAAO,KAAG;;;CAGV,MAAM,KAAG;aACEC,SAAO,qBAAqB;;CAEvC,YAAY,KAAG;MACXD,cAAkB,0BAA0B;;;QAG1CC,SAAO,kBAAkB;QACzBA,SAAO,oBAAoB;;;CAGjC,aAAa,KAAG;MACZD,cAAkB,0BAA0B;;;QAG1CC,SAAO,oBAAoB;QAC3BA,SAAO,kBAAkB;;;CAG/B,UAAUD,cAAkB;CAC5B,MAAM,KAAG;;;qBAGUC,SAAO,eAAe;;CAEzC,QAAQD,cAAkB;CAC1B,OAAO,KAAG;;;;CAIX,EAAE;AAEH,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,YAAY;EACZ,SAAS;EACV,EACD;EACE,OAAO,OAAO;EACd,YAAY;EACZ,SAAS;EACV,CACF;CACD,iBAAiB;EACf,YAAY;EACZ,QAAQ;EACR,SAAS;EACV;CAED,UAAU;EACR,YAAY;GACV,OAAO;GACP,MAAM;GACP;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ;GACR,UAAU,OAAO;GAClB;EACF;CAEF,CAAC"}

package/es/Header/Header.d.mts

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

package/es/Header/Header.mjs

@@ -1,19 +1,18 @@
 'use client';
 
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useResponsive } from "antd-style";
+import { cx, useResponsive } from "antd-style";
 
 //#region src/Header/Header.tsx
 const Header = memo(({ actionsClassName, navClassName, logoClassName, nav, logo, actions, actionsStyle, logoStyle, navStyle, className, children, ref, ...rest }) => {
 	const { mobile } = useResponsive();
-	const { cx: cx$1, styles } = useStyles();
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
 		align: "center",
 		as: "section",
-		className: cx$1(styles.root, className),
+		className: cx(styles.root, className),
 		distribution: "space-between",
 		horizontal: true,
 		ref,
@@ -29,7 +28,7 @@ const Header = memo(({ actionsClassName, navClassName, logoClassName, nav, logo,
 				children: [nav, children]
 			}),
 			/* @__PURE__ */ jsx(FlexBasic_default, {
-				className: cx$1(styles.left, logoClassName),
+				className: cx(styles.left, logoClassName),
 				horizontal: true,
 				style: {
 					flex: 1,
@@ -48,7 +47,7 @@ const Header = memo(({ actionsClassName, navClassName, logoClassName, nav, logo,
 			})
 		] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx(FlexBasic_default, {
-				className: cx$1(styles.left, logoClassName),
+				className: cx(styles.left, logoClassName),
 				horizontal: true,
 				style: {
 					flex: 0,
@@ -67,7 +66,7 @@ const Header = memo(({ actionsClassName, navClassName, logoClassName, nav, logo,
 				children: [nav, children]
 			}),
 			/* @__PURE__ */ jsxs(FlexBasic_default, {
-				className: cx$1(styles.right, actionsClassName),
+				className: cx(styles.right, actionsClassName),
 				flex: 1,
 				horizontal: true,
 				justify: "space-between",

package/es/Header/Header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.mjs","names":["Flexbox","cx"],"sources":["../../src/Header/Header.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from './style';\nimport type { HeaderProps } from './type';\n\nconst Header = memo<HeaderProps>(\n  ({\n    actionsClassName,\n    navClassName,\n    logoClassName,\n    nav,\n    logo,\n    actions,\n    actionsStyle,\n    logoStyle,\n    navStyle,\n    className,\n    children,\n    ref,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const { cx, styles } = useStyles();\n\n    return (\n      <Flexbox\n        align={'center'}\n        as={'section'}\n        className={cx(styles.root, className)}\n        distribution={'space-between'}\n        horizontal\n        ref={ref}\n        width={'auto'}\n        {...rest}\n      >\n        {mobile ? (\n          <>\n            <Flexbox className={actionsClassName} style={{ flex: 0, ...navStyle }}>\n              {nav}\n              {children}\n            </Flexbox>\n            <Flexbox\n              className={cx(styles.left, logoClassName)}\n              horizontal\n              style={{ flex: 1, overflow: 'hidden', ...logoStyle }}\n            >\n              {logo}\n            </Flexbox>\n            <Flexbox className={actionsClassName} style={{ flex: 0, ...actionsStyle }}>\n              {actions}\n            </Flexbox>\n          </>\n        ) : (\n          <>\n            <Flexbox\n              className={cx(styles.left, logoClassName)}\n              horizontal\n              style={{ flex: 0, ...logoStyle }}\n            >\n              {logo}\n            </Flexbox>\n            <Flexbox\n              className={navClassName}\n              style={{ flex: 1, marginLeft: 48, overflow: 'hidden', ...navStyle }}\n            >\n              {nav}\n              {children}\n            </Flexbox>\n            <Flexbox\n              className={cx(styles.right, actionsClassName)}\n              flex={1}\n              horizontal\n              justify={'space-between'}\n              style={actionsStyle}\n            >\n              <div />\n              <Flexbox align={'center'} gap={8} horizontal>\n                {actions}\n              </Flexbox>\n            </Flexbox>\n          </>\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"mappings":";;;;;;;;;AAUA,MAAM,SAAS,MACZ,EACC,kBACA,cACA,eACA,KACA,MACA,SACA,cACA,WACA,UACA,WACA,UACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,UAAI,WAAW,WAAW;AAElC,QACE,oBAACA;EACC,OAAO;EACP,IAAI;EACJ,WAAWC,KAAG,OAAO,MAAM,UAAU;EACrC,cAAc;EACd;EACK;EACL,OAAO;EACP,GAAI;YAEH,SACC;GACE,qBAACD;IAAQ,WAAW;IAAkB,OAAO;KAAE,MAAM;KAAG,GAAG;KAAU;eAClE,KACA;KACO;GACV,oBAACA;IACC,WAAWC,KAAG,OAAO,MAAM,cAAc;IACzC;IACA,OAAO;KAAE,MAAM;KAAG,UAAU;KAAU,GAAG;KAAW;cAEnD;KACO;GACV,oBAACD;IAAQ,WAAW;IAAkB,OAAO;KAAE,MAAM;KAAG,GAAG;KAAc;cACtE;KACO;MACT,GAEH;GACE,oBAACA;IACC,WAAWC,KAAG,OAAO,MAAM,cAAc;IACzC;IACA,OAAO;KAAE,MAAM;KAAG,GAAG;KAAW;cAE/B;KACO;GACV,qBAACD;IACC,WAAW;IACX,OAAO;KAAE,MAAM;KAAG,YAAY;KAAI,UAAU;KAAU,GAAG;KAAU;eAElE,KACA;KACO;GACV,qBAACA;IACC,WAAWC,KAAG,OAAO,OAAO,iBAAiB;IAC7C,MAAM;IACN;IACA,SAAS;IACT,OAAO;eAEP,oBAAC,UAAM,EACP,oBAACD;KAAQ,OAAO;KAAU,KAAK;KAAG;eAC/B;MACO;KACF;MACT;GAEG;EAGf;AAED,OAAO,cAAc;AAErB,qBAAe"}
+{"version":3,"file":"Header.mjs","names":["Flexbox"],"sources":["../../src/Header/Header.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { HeaderProps } from './type';\n\nconst Header = memo<HeaderProps>(\n  ({\n    actionsClassName,\n    navClassName,\n    logoClassName,\n    nav,\n    logo,\n    actions,\n    actionsStyle,\n    logoStyle,\n    navStyle,\n    className,\n    children,\n    ref,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n\n    return (\n      <Flexbox\n        align={'center'}\n        as={'section'}\n        className={cx(styles.root, className)}\n        distribution={'space-between'}\n        horizontal\n        ref={ref}\n        width={'auto'}\n        {...rest}\n      >\n        {mobile ? (\n          <>\n            <Flexbox className={actionsClassName} style={{ flex: 0, ...navStyle }}>\n              {nav}\n              {children}\n            </Flexbox>\n            <Flexbox\n              className={cx(styles.left, logoClassName)}\n              horizontal\n              style={{ flex: 1, overflow: 'hidden', ...logoStyle }}\n            >\n              {logo}\n            </Flexbox>\n            <Flexbox className={actionsClassName} style={{ flex: 0, ...actionsStyle }}>\n              {actions}\n            </Flexbox>\n          </>\n        ) : (\n          <>\n            <Flexbox\n              className={cx(styles.left, logoClassName)}\n              horizontal\n              style={{ flex: 0, ...logoStyle }}\n            >\n              {logo}\n            </Flexbox>\n            <Flexbox\n              className={navClassName}\n              style={{ flex: 1, marginLeft: 48, overflow: 'hidden', ...navStyle }}\n            >\n              {nav}\n              {children}\n            </Flexbox>\n            <Flexbox\n              className={cx(styles.right, actionsClassName)}\n              flex={1}\n              horizontal\n              justify={'space-between'}\n              style={actionsStyle}\n            >\n              <div />\n              <Flexbox align={'center'} gap={8} horizontal>\n                {actions}\n              </Flexbox>\n            </Flexbox>\n          </>\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"mappings":";;;;;;;;;AAUA,MAAM,SAAS,MACZ,EACC,kBACA,cACA,eACA,KACA,MACA,SACA,cACA,WACA,UACA,WACA,UACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;AAElC,QACE,oBAACA;EACC,OAAO;EACP,IAAI;EACJ,WAAW,GAAG,OAAO,MAAM,UAAU;EACrC,cAAc;EACd;EACK;EACL,OAAO;EACP,GAAI;YAEH,SACC;GACE,qBAACA;IAAQ,WAAW;IAAkB,OAAO;KAAE,MAAM;KAAG,GAAG;KAAU;eAClE,KACA;KACO;GACV,oBAACA;IACC,WAAW,GAAG,OAAO,MAAM,cAAc;IACzC;IACA,OAAO;KAAE,MAAM;KAAG,UAAU;KAAU,GAAG;KAAW;cAEnD;KACO;GACV,oBAACA;IAAQ,WAAW;IAAkB,OAAO;KAAE,MAAM;KAAG,GAAG;KAAc;cACtE;KACO;MACT,GAEH;GACE,oBAACA;IACC,WAAW,GAAG,OAAO,MAAM,cAAc;IACzC;IACA,OAAO;KAAE,MAAM;KAAG,GAAG;KAAW;cAE/B;KACO;GACV,qBAACA;IACC,WAAW;IACX,OAAO;KAAE,MAAM;KAAG,YAAY;KAAI,UAAU;KAAU,GAAG;KAAU;eAElE,KACA;KACO;GACV,qBAACA;IACC,WAAW,GAAG,OAAO,OAAO,iBAAiB;IAC7C,MAAM;IACN;IACA,SAAS;IACT,OAAO;eAEP,oBAAC,UAAM,EACP,oBAACA;KAAQ,OAAO;KAAU,KAAK;KAAG;eAC/B;MACO;KACF;MACT;GAEG;EAGf;AAED,OAAO,cAAc;AAErB,qBAAe"}

package/es/Header/style.mjs

@@ -1,8 +1,7 @@
-import { createStyles } from "antd-style";
-import { rgba } from "polished";
+import { createStaticStyles } from "antd-style";
 
 //#region src/Header/style.ts
-const useStyles = createStyles(({ css: css$1, responsive, token }) => ({
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1, responsive: responsive$1 }) => ({
 	left: css$1`
     z-index: 10;
   `,
@@ -13,14 +12,13 @@ const useStyles = createStyles(({ css: css$1, responsive, token }) => ({
       display: flex;
       align-items: center;
 
-      ${responsive.mobile} {
+      ${responsive$1.sm} {
         justify-content: center;
 
         margin-block: 8px;
         margin-inline: 16px;
         padding-block-start: 24px;
-
-        border-block-start: 1px solid ${token.colorBorder};
+        border-block-start: 1px solid ${cssVar$1.colorBorder};
       }
     }
   `,
@@ -32,11 +30,11 @@ const useStyles = createStyles(({ css: css$1, responsive, token }) => ({
     height: 64px;
     padding-block: 0;
     padding-inline: 24px;
+    border-block-end: 1px solid ${cssVar$1.colorBorderSecondary};
 
-    background-color: ${rgba(token.colorBgLayout, .4)};
-    border-block-end: 1px solid ${token.colorBorderSecondary};
+    background-color: color-mix(in srgb, ${cssVar$1.colorBgLayout} 40%, transparent);
 
-    ${responsive.mobile} {
+    ${responsive$1.sm} {
       padding-block: 0;
       padding-inline: 12px;
     }
@@ -44,5 +42,5 @@ const useStyles = createStyles(({ css: css$1, responsive, token }) => ({
 }));
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/Header/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Header/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\nimport { rgba } from 'polished';\n\nexport const useStyles = createStyles(({ css, responsive, token }) => ({\n  left: css`\n    z-index: 10;\n  `,\n  right: css`\n    z-index: 10;\n\n    &-aside {\n      display: flex;\n      align-items: center;\n\n      ${responsive.mobile} {\n        justify-content: center;\n\n        margin-block: 8px;\n        margin-inline: 16px;\n        padding-block-start: 24px;\n\n        border-block-start: 1px solid ${token.colorBorder};\n      }\n    }\n  `,\n  root: css`\n    grid-area: head;\n    align-self: stretch;\n\n    width: 100%;\n    height: 64px;\n    padding-block: 0;\n    padding-inline: 24px;\n\n    background-color: ${rgba(token.colorBgLayout, 0.4)};\n    border-block-end: 1px solid ${token.colorBorderSecondary};\n\n    ${responsive.mobile} {\n      padding-block: 0;\n      padding-inline: 12px;\n    }\n  `,\n}));\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY,aAAa;CACrE,MAAM,KAAG;;;CAGT,OAAO,KAAG;;;;;;;QAOJ,WAAW,OAAO;;;;;;;wCAOc,MAAM,YAAY;;;;CAIxD,MAAM,KAAG;;;;;;;;;wBASa,KAAK,MAAM,eAAe,GAAI,CAAC;kCACrB,MAAM,qBAAqB;;MAEvD,WAAW,OAAO;;;;;CAKvB,EAAE"}
+{"version":3,"file":"style.mjs","names":["responsive","cssVar"],"sources":["../../src/Header/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  left: css`\n    z-index: 10;\n  `,\n  right: css`\n    z-index: 10;\n\n    &-aside {\n      display: flex;\n      align-items: center;\n\n      ${responsive.sm} {\n        justify-content: center;\n\n        margin-block: 8px;\n        margin-inline: 16px;\n        padding-block-start: 24px;\n        border-block-start: 1px solid ${cssVar.colorBorder};\n      }\n    }\n  `,\n  root: css`\n    grid-area: head;\n    align-self: stretch;\n\n    width: 100%;\n    height: 64px;\n    padding-block: 0;\n    padding-inline: 24px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n\n    background-color: color-mix(in srgb, ${cssVar.colorBgLayout} 40%, transparent);\n\n    ${responsive.sm} {\n      padding-block: 0;\n      padding-inline: 12px;\n    }\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,kBAAQ,gCAAkB;CACzE,MAAM,KAAG;;;CAGT,OAAO,KAAG;;;;;;;QAOJA,aAAW,GAAG;;;;;;wCAMkBC,SAAO,YAAY;;;;CAIzD,MAAM,KAAG;;;;;;;;kCAQuBA,SAAO,qBAAqB;;2CAEnBA,SAAO,cAAc;;MAE1DD,aAAW,GAAG;;;;;CAKnB,EAAE"}

package/es/Highlighter/FullFeatured.mjs

@@ -7,10 +7,10 @@ import { getCodeLanguageDisplayName, getCodeLanguageFilename } from "./const.mjs
 import CopyButton_default from "../CopyButton/CopyButton.mjs";
 import MaterialFileTypeIcon_default from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
 import LangSelect_default from "./LangSelect.mjs";
-import { useStyles } from "./style.mjs";
+import { bodyVariants, headerVariants, variants } from "./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/Highlighter/FullFeatured.tsx
@@ -43,49 +43,11 @@ const HeaderLanguage = memo(({ allowChangeLanguage, displayName, fileName, filet
 }, (prev, next) => prev.allowChangeLanguage === next.allowChangeLanguage && prev.displayName === next.displayName && prev.fileName === next.fileName && prev.filetype === next.filetype && prev.icon === next.icon && prev.language === next.language && prev.setLanguage === next.setLanguage && prev.showLanguage === next.showLanguage);
 const HighlighterFullFeatured = memo(({ content, language, setLanguage, showLanguage, className, classNames, styles: customStyles, style, allowChangeLanguage = false, fileName, icon, actionsRender, copyable, variant, shadow, wrap, defaultExpand = true, children, ...rest }) => {
 	const [expand, setExpand] = useState(defaultExpand);
-	const { styles, cx } = useStyles();
 	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",
-			wrap: false
-		},
-		variants: {
-			variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless
-			},
-			shadow: {
-				false: null,
-				true: styles.shadow
-			},
-			wrap: {
-				false: styles.nowrap,
-				true: null
-			}
-		}
-	}), [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/Highlighter/FullFeatured.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FullFeatured.mjs","names":["LangSelect","Flexbox","MaterialFileTypeIcon","Text","CopyButton","ActionIcon"],"sources":["../../src/Highlighter/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 { getCodeLanguageDisplayName, getCodeLanguageFilename } from '@/Highlighter/const';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\n\nimport LangSelect from './LangSelect';\nimport { useStyles } from './style';\nimport { HighlighterProps } from './type';\n\ninterface HeaderLanguageProps {\n  allowChangeLanguage: boolean;\n  displayName: string;\n  fileName?: string;\n  filetype: string;\n  icon?: ReactNode;\n  language: string;\n  setLanguage?: (language: string) => void;\n  showLanguage?: boolean;\n}\n\nconst HeaderLanguage = memo<HeaderLanguageProps>(\n  ({\n    allowChangeLanguage,\n    displayName,\n    fileName,\n    filetype,\n    icon,\n    language,\n    setLanguage,\n    showLanguage,\n  }) => {\n    if (!showLanguage) return null;\n\n    if (allowChangeLanguage && !fileName)\n      return <LangSelect onSelect={setLanguage} value={language.toLowerCase()} />;\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        {icon || (\n          <MaterialFileTypeIcon\n            fallbackUnknownType={false}\n            filename={filetype}\n            size={18}\n            type={'file'}\n            variant={'raw'}\n          />\n        )}\n        <Text ellipsis fontSize={13}>\n          {displayName}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.allowChangeLanguage === next.allowChangeLanguage &&\n    prev.displayName === next.displayName &&\n    prev.fileName === next.fileName &&\n    prev.filetype === next.filetype &&\n    prev.icon === next.icon &&\n    prev.language === next.language &&\n    prev.setLanguage === next.setLanguage &&\n    prev.showLanguage === next.showLanguage,\n);\n\ninterface HighlighterFullFeaturedProps extends Omit<\n  HighlighterProps,\n  'children' | 'bodyRender' | 'enableTransformer'\n> {\n  content: string;\n  setLanguage?: (language: string) => void;\n}\n\nexport const HighlighterFullFeatured = memo<HighlighterFullFeaturedProps & { children: ReactNode }>(\n  ({\n    content,\n    language,\n    setLanguage,\n    showLanguage,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    allowChangeLanguage = false,\n    fileName,\n    icon,\n    actionsRender,\n    copyable,\n    variant,\n    shadow,\n    wrap,\n    defaultExpand = true,\n    children,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const { styles, cx } = useStyles();\n    const contentRef = useRef(content);\n\n    useEffect(() => {\n      contentRef.current = content;\n    }, [content]);\n\n    const getContent = useCallback(() => contentRef.current, []);\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            shadow: false,\n            variant: 'filled',\n            wrap: false,\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            wrap: {\n              false: styles.nowrap,\n              true: null,\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        language,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, language, originalActions]);\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageDisplayName(language);\n    }, [fileName, language]);\n\n    const filetype = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageFilename(language);\n    }, [fileName, language]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        className={cx(variants({ shadow, variant, wrap }), className)}\n        data-code-type=\"highlighter\"\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          <HeaderLanguage\n            allowChangeLanguage={allowChangeLanguage}\n            displayName={displayName}\n            fileName={fileName}\n            filetype={filetype}\n            icon={icon}\n            language={language}\n            setLanguage={setLanguage}\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 HighlighterFullFeatured;\n"],"mappings":"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"}
+{"version":3,"file":"FullFeatured.mjs","names":["LangSelect","Flexbox","MaterialFileTypeIcon","Text","CopyButton","ActionIcon"],"sources":["../../src/Highlighter/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 { getCodeLanguageDisplayName, getCodeLanguageFilename } from '@/Highlighter/const';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\n\nimport LangSelect from './LangSelect';\nimport { bodyVariants, headerVariants, variants } from './style';\nimport { HighlighterProps } from './type';\n\ninterface HeaderLanguageProps {\n  allowChangeLanguage: boolean;\n  displayName: string;\n  fileName?: string;\n  filetype: string;\n  icon?: ReactNode;\n  language: string;\n  setLanguage?: (language: string) => void;\n  showLanguage?: boolean;\n}\n\nconst HeaderLanguage = memo<HeaderLanguageProps>(\n  ({\n    allowChangeLanguage,\n    displayName,\n    fileName,\n    filetype,\n    icon,\n    language,\n    setLanguage,\n    showLanguage,\n  }) => {\n    if (!showLanguage) return null;\n\n    if (allowChangeLanguage && !fileName)\n      return <LangSelect onSelect={setLanguage} value={language.toLowerCase()} />;\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        {icon || (\n          <MaterialFileTypeIcon\n            fallbackUnknownType={false}\n            filename={filetype}\n            size={18}\n            type={'file'}\n            variant={'raw'}\n          />\n        )}\n        <Text ellipsis fontSize={13}>\n          {displayName}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.allowChangeLanguage === next.allowChangeLanguage &&\n    prev.displayName === next.displayName &&\n    prev.fileName === next.fileName &&\n    prev.filetype === next.filetype &&\n    prev.icon === next.icon &&\n    prev.language === next.language &&\n    prev.setLanguage === next.setLanguage &&\n    prev.showLanguage === next.showLanguage,\n);\n\ninterface HighlighterFullFeaturedProps extends Omit<\n  HighlighterProps,\n  'children' | 'bodyRender' | 'enableTransformer'\n> {\n  content: string;\n  setLanguage?: (language: string) => void;\n}\n\nexport const HighlighterFullFeatured = memo<HighlighterFullFeaturedProps & { children: ReactNode }>(\n  ({\n    content,\n    language,\n    setLanguage,\n    showLanguage,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    allowChangeLanguage = false,\n    fileName,\n    icon,\n    actionsRender,\n    copyable,\n    variant,\n    shadow,\n    wrap,\n    defaultExpand = true,\n    children,\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        language,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, language, originalActions]);\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageDisplayName(language);\n    }, [fileName, language]);\n\n    const filetype = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageFilename(language);\n    }, [fileName, language]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        className={cx(variants({ shadow, variant, wrap }), className)}\n        data-code-type=\"highlighter\"\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          <HeaderLanguage\n            allowChangeLanguage={allowChangeLanguage}\n            displayName={displayName}\n            fileName={fileName}\n            filetype={filetype}\n            icon={icon}\n            language={language}\n            setLanguage={setLanguage}\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 HighlighterFullFeatured;\n"],"mappings":";;;;;;;;;;;;;;;;AA4BA,MAAM,iBAAiB,MACpB,EACC,qBACA,aACA,UACA,UACA,MACA,UACA,aACA,mBACI;AACJ,KAAI,CAAC,aAAc,QAAO;AAE1B,KAAI,uBAAuB,CAAC,SAC1B,QAAO,oBAACA;EAAW,UAAU;EAAa,OAAO,SAAS,aAAa;GAAI;AAE7E,QACE,qBAACC;EACC,OAAO;EACP,WAAW;EACX,MAAM;EACN,KAAK;EACL;EACA,SAAS;EACT,eAAe;aAEd,QACC,oBAACC;GACC,qBAAqB;GACrB,UAAU;GACV,MAAM;GACN,MAAM;GACN,SAAS;IACT,EAEJ,oBAACC;GAAK;GAAS,UAAU;aACtB;IACI;GACC;IAGb,MAAM,SACL,KAAK,wBAAwB,KAAK,uBAClC,KAAK,gBAAgB,KAAK,eAC1B,KAAK,aAAa,KAAK,YACvB,KAAK,aAAa,KAAK,YACvB,KAAK,SAAS,KAAK,QACnB,KAAK,aAAa,KAAK,YACvB,KAAK,gBAAgB,KAAK,eAC1B,KAAK,iBAAiB,KAAK,aAC9B;AAUD,MAAa,0BAA0B,MACpC,EACC,SACA,UACA,aACA,cACA,WACA,YACA,QAAQ,cACR,OACA,sBAAsB,OACtB,UACA,MACA,eACA,UACA,SACA,QACA,MACA,gBAAgB,MAChB,UACA,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;GACA,cAAc;GACf,CAAC;IACD;EAAC;EAAe;EAAS;EAAY;EAAU;EAAgB,CAAC;CAEnE,MAAM,cAAc,cAAc;AAChC,MAAI,SAAU,QAAO;AACrB,SAAO,2BAA2B,SAAS;IAC1C,CAAC,UAAU,SAAS,CAAC;CAExB,MAAM,WAAW,cAAc;AAC7B,MAAI,SAAU,QAAO;AACrB,SAAO,wBAAwB,SAAS;IACvC,CAAC,UAAU,SAAS,CAAC;CAExB,MAAM,qBAAqB,kBAAkB;AAC3C,aAAW,SAAS,CAAC,KAAK;IACzB,EAAE,CAAC;AAEN,QACE,qBAACH;EACC,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS;GAAM,CAAC,EAAE,UAAU;EAC7D,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;IACsB;IACR;IACH;IACA;IACJ;IACI;IACG;IACC;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/Highlighter/Highlighter.d.mts

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

package/es/Highlighter/Highlighter.mjs

@@ -5,38 +5,15 @@ import { getCodeLanguageDisplayName } from "./const.mjs";
 import SyntaxHighlighter_default from "./SyntaxHighlighter/index.mjs";
 import CopyButton_default from "../CopyButton/CopyButton.mjs";
 import Tag_default from "../Tag/Tag.mjs";
-import { useStyles } from "./style.mjs";
+import { styles, variants } from "./style.mjs";
 import FullFeatured_default from "./FullFeatured.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";
 
 //#region src/Highlighter/Highlighter.tsx
 const Highlighter = memo(({ animated, fullFeatured, actionIconSize, children, language = "markdown", className, classNames, styles: customStyles, copyable = true, showLanguage = true, variant = "filled", shadow, wrap, bodyRender, actionsRender, enableTransformer, theme, icon, fileName, allowChangeLanguage, defaultExpand = true, ...rest }) => {
-	const { styles, cx } = useStyles();
 	const [lang, setLang] = useState(language);
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: {
-			shadow: false,
-			variant: "filled",
-			wrap: false
-		},
-		variants: {
-			variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless
-			},
-			shadow: {
-				false: null,
-				true: styles.shadow
-			},
-			wrap: {
-				false: styles.nowrap,
-				true: styles.wrap
-			}
-		}
-	}), [styles]);
 	const tirmedChildren = useMemo(() => {
 		if (children === null || children === void 0) return "";
 		if (typeof children !== "string") {

package/es/Highlighter/Highlighter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Highlighter.mjs","names":["CopyButton","SyntaxHighlighter","FullFeatured","Flexbox","Tag"],"sources":["../../src/Highlighter/Highlighter.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName } from '@/Highlighter/const';\nimport Tag from '@/Tag';\n\nimport FullFeatured from './FullFeatured';\nimport SyntaxHighlighter from './SyntaxHighlighter';\nimport { useStyles } from './style';\nimport type { HighlighterProps } from './type';\n\nexport const Highlighter = memo<HighlighterProps>(\n  ({\n    animated,\n    fullFeatured,\n    actionIconSize,\n    children,\n    language = 'markdown',\n    className,\n    classNames,\n    styles: customStyles,\n    copyable = true,\n    showLanguage = true,\n    variant = 'filled',\n    shadow,\n    wrap,\n    bodyRender,\n    actionsRender,\n    enableTransformer,\n    theme,\n    icon,\n    fileName,\n    allowChangeLanguage,\n    defaultExpand = true,\n    ...rest\n  }) => {\n    const { styles, cx } = useStyles();\n    const [lang, setLang] = useState(language);\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            shadow: false,\n            variant: 'filled',\n            wrap: false,\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            wrap: {\n              false: styles.nowrap,\n              true: styles.wrap,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    // Safely handle children with boundary check\n    const tirmedChildren = useMemo(() => {\n      if (children === null || children === undefined) return '';\n      if (typeof children !== 'string') {\n        console.warn('Highlighter: children should be a string, received:', typeof children);\n        return String(children);\n      }\n      return children.trim();\n    }, [children]);\n\n    const copyContentRef = useRef(tirmedChildren);\n\n    useEffect(() => {\n      copyContentRef.current = tirmedChildren;\n    }, [tirmedChildren]);\n\n    const getCopyContent = useCallback(() => copyContentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return (\n        <CopyButton\n          content={getCopyContent}\n          glass\n          size={actionIconSize || { blockSize: 28, size: 16 }}\n        />\n      );\n    }, [actionIconSize, copyable, getCopyContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize,\n        content: tirmedChildren,\n        getContent: getCopyContent,\n        language: lang,\n        originalNode: originalActions,\n      });\n    }, [actionIconSize, actionsRender, getCopyContent, lang, originalActions, tirmedChildren]);\n\n    const originalBody = useMemo(\n      () => (\n        <SyntaxHighlighter\n          animated={animated}\n          className={classNames?.content}\n          enableTransformer={enableTransformer}\n          language={lang?.toLowerCase()}\n          style={{\n            height: '100%',\n            ...customStyles?.content,\n          }}\n          theme={theme}\n          variant={variant}\n        >\n          {tirmedChildren}\n        </SyntaxHighlighter>\n      ),\n      [\n        animated,\n        enableTransformer,\n        lang,\n        theme,\n        tirmedChildren,\n        variant,\n        customStyles?.content,\n        customStyles?.content,\n      ],\n    );\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageDisplayName(language);\n    }, [fileName, language]);\n\n    const body = useMemo(() => {\n      if (!bodyRender) return originalBody;\n      return bodyRender({ content: tirmedChildren, language: lang, originalNode: originalBody });\n    }, [bodyRender, lang, originalBody, tirmedChildren]);\n\n    if (fullFeatured)\n      return (\n        <FullFeatured\n          actionsRender={actionsRender}\n          allowChangeLanguage={allowChangeLanguage}\n          className={className}\n          classNames={classNames}\n          content={tirmedChildren}\n          copyable={copyable}\n          defaultExpand={defaultExpand}\n          fileName={fileName}\n          icon={icon}\n          language={language}\n          setLanguage={setLang}\n          shadow={shadow}\n          showLanguage={showLanguage}\n          styles={customStyles}\n          variant={variant}\n          wrap={wrap}\n          {...rest}\n        >\n          {body}\n        </FullFeatured>\n      );\n\n    return (\n      <Flexbox\n        className={cx(variants({ shadow, variant, wrap }), className)}\n        data-code-type=\"highlighter\"\n        {...rest}\n      >\n        <Flexbox align={'center'} className={styles.actions} flex={'none'} gap={4} horizontal>\n          {actions}\n        </Flexbox>\n        {showLanguage && language && <Tag className={styles.lang}>{displayName}</Tag>}\n        {body}\n      </Flexbox>\n    );\n  },\n);\n\nHighlighter.displayName = 'Highlighter';\n\nexport default Highlighter;\n"],"mappings":"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"}
+{"version":3,"file":"Highlighter.mjs","names":["CopyButton","SyntaxHighlighter","FullFeatured","Flexbox","Tag"],"sources":["../../src/Highlighter/Highlighter.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName } from '@/Highlighter/const';\nimport Tag from '@/Tag';\n\nimport FullFeatured from './FullFeatured';\nimport SyntaxHighlighter from './SyntaxHighlighter';\nimport { styles, variants } from './style';\nimport type { HighlighterProps } from './type';\n\nexport const Highlighter = memo<HighlighterProps>(\n  ({\n    animated,\n    fullFeatured,\n    actionIconSize,\n    children,\n    language = 'markdown',\n    className,\n    classNames,\n    styles: customStyles,\n    copyable = true,\n    showLanguage = true,\n    variant = 'filled',\n    shadow,\n    wrap,\n    bodyRender,\n    actionsRender,\n    enableTransformer,\n    theme,\n    icon,\n    fileName,\n    allowChangeLanguage,\n    defaultExpand = true,\n    ...rest\n  }) => {\n    const [lang, setLang] = useState(language);\n\n    // Safely handle children with boundary check\n    const tirmedChildren = useMemo(() => {\n      if (children === null || children === undefined) return '';\n      if (typeof children !== 'string') {\n        console.warn('Highlighter: children should be a string, received:', typeof children);\n        return String(children);\n      }\n      return children.trim();\n    }, [children]);\n\n    const copyContentRef = useRef(tirmedChildren);\n\n    useEffect(() => {\n      copyContentRef.current = tirmedChildren;\n    }, [tirmedChildren]);\n\n    const getCopyContent = useCallback(() => copyContentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return (\n        <CopyButton\n          content={getCopyContent}\n          glass\n          size={actionIconSize || { blockSize: 28, size: 16 }}\n        />\n      );\n    }, [actionIconSize, copyable, getCopyContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize,\n        content: tirmedChildren,\n        getContent: getCopyContent,\n        language: lang,\n        originalNode: originalActions,\n      });\n    }, [actionIconSize, actionsRender, getCopyContent, lang, originalActions, tirmedChildren]);\n\n    const originalBody = useMemo(\n      () => (\n        <SyntaxHighlighter\n          animated={animated}\n          className={classNames?.content}\n          enableTransformer={enableTransformer}\n          language={lang?.toLowerCase()}\n          style={{\n            height: '100%',\n            ...customStyles?.content,\n          }}\n          theme={theme}\n          variant={variant}\n        >\n          {tirmedChildren}\n        </SyntaxHighlighter>\n      ),\n      [\n        animated,\n        enableTransformer,\n        lang,\n        theme,\n        tirmedChildren,\n        variant,\n        customStyles?.content,\n        customStyles?.content,\n      ],\n    );\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageDisplayName(language);\n    }, [fileName, language]);\n\n    const body = useMemo(() => {\n      if (!bodyRender) return originalBody;\n      return bodyRender({ content: tirmedChildren, language: lang, originalNode: originalBody });\n    }, [bodyRender, lang, originalBody, tirmedChildren]);\n\n    if (fullFeatured)\n      return (\n        <FullFeatured\n          actionsRender={actionsRender}\n          allowChangeLanguage={allowChangeLanguage}\n          className={className}\n          classNames={classNames}\n          content={tirmedChildren}\n          copyable={copyable}\n          defaultExpand={defaultExpand}\n          fileName={fileName}\n          icon={icon}\n          language={language}\n          setLanguage={setLang}\n          shadow={shadow}\n          showLanguage={showLanguage}\n          styles={customStyles}\n          variant={variant}\n          wrap={wrap}\n          {...rest}\n        >\n          {body}\n        </FullFeatured>\n      );\n\n    return (\n      <Flexbox\n        className={cx(variants({ shadow, variant, wrap }), className)}\n        data-code-type=\"highlighter\"\n        {...rest}\n      >\n        <Flexbox align={'center'} className={styles.actions} flex={'none'} gap={4} horizontal>\n          {actions}\n        </Flexbox>\n        {showLanguage && language && <Tag className={styles.lang}>{displayName}</Tag>}\n        {body}\n      </Flexbox>\n    );\n  },\n);\n\nHighlighter.displayName = 'Highlighter';\n\nexport default Highlighter;\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAa,cAAc,MACxB,EACC,UACA,cACA,gBACA,UACA,WAAW,YACX,WACA,YACA,QAAQ,cACR,WAAW,MACX,eAAe,MACf,UAAU,UACV,QACA,MACA,YACA,eACA,mBACA,OACA,MACA,UACA,qBACA,gBAAgB,MAChB,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,SAAS;CAG1C,MAAM,iBAAiB,cAAc;AACnC,MAAI,aAAa,QAAQ,aAAa,OAAW,QAAO;AACxD,MAAI,OAAO,aAAa,UAAU;AAChC,WAAQ,KAAK,uDAAuD,OAAO,SAAS;AACpF,UAAO,OAAO,SAAS;;AAEzB,SAAO,SAAS,MAAM;IACrB,CAAC,SAAS,CAAC;CAEd,MAAM,iBAAiB,OAAO,eAAe;AAE7C,iBAAgB;AACd,iBAAe,UAAU;IACxB,CAAC,eAAe,CAAC;CAEpB,MAAM,iBAAiB,kBAAkB,eAAe,SAAS,EAAE,CAAC;CAEpE,MAAM,kBAAkB,cAAc;AACpC,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,oBAACA;GACC,SAAS;GACT;GACA,MAAM,kBAAkB;IAAE,WAAW;IAAI,MAAM;IAAI;IACnD;IAEH;EAAC;EAAgB;EAAU;EAAe,CAAC;CAE9C,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,cAAe,QAAO;AAC3B,SAAO,cAAc;GACnB;GACA,SAAS;GACT,YAAY;GACZ,UAAU;GACV,cAAc;GACf,CAAC;IACD;EAAC;EAAgB;EAAe;EAAgB;EAAM;EAAiB;EAAe,CAAC;CAE1F,MAAM,eAAe,cAEjB,oBAACC;EACW;EACV,WAAW,YAAY;EACJ;EACnB,UAAU,MAAM,aAAa;EAC7B,OAAO;GACL,QAAQ;GACR,GAAG,cAAc;GAClB;EACM;EACE;YAER;GACiB,EAEtB;EACE;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd,cAAc;EACf,CACF;CAED,MAAM,cAAc,cAAc;AAChC,MAAI,SAAU,QAAO;AACrB,SAAO,2BAA2B,SAAS;IAC1C,CAAC,UAAU,SAAS,CAAC;CAExB,MAAM,OAAO,cAAc;AACzB,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,WAAW;GAAE,SAAS;GAAgB,UAAU;GAAM,cAAc;GAAc,CAAC;IACzF;EAAC;EAAY;EAAM;EAAc;EAAe,CAAC;AAEpD,KAAI,aACF,QACE,oBAACC;EACgB;EACM;EACV;EACC;EACZ,SAAS;EACC;EACK;EACL;EACJ;EACI;EACV,aAAa;EACL;EACM;EACd,QAAQ;EACC;EACH;EACN,GAAI;YAEH;GACY;AAGnB,QACE,qBAACC;EACC,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS;GAAM,CAAC,EAAE,UAAU;EAC7D,kBAAe;EACf,GAAI;;GAEJ,oBAACA;IAAQ,OAAO;IAAU,WAAW,OAAO;IAAS,MAAM;IAAQ,KAAK;IAAG;cACxE;KACO;GACT,gBAAgB,YAAY,oBAACC;IAAI,WAAW,OAAO;cAAO;KAAkB;GAC5E;;GACO;EAGf;AAED,YAAY,cAAc;AAE1B,0BAAe"}

package/es/Highlighter/SyntaxHighlighter/StaticRenderer.mjs

@@ -12,7 +12,7 @@ const escapeHtml = (str) => str.replaceAll("&", "&amp;").replaceAll("<", "&lt;")
 */
 const StaticRenderer = memo(({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {
 	const safeChildren = children ?? "";
-	const { data } = useHighlight(safeChildren, {
+	const data = useHighlight(safeChildren, {
 		enableTransformer,
 		language,
 		theme

package/es/Highlighter/SyntaxHighlighter/StaticRenderer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StaticRenderer.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/StaticRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { CSSProperties, memo } from 'react';\nimport type { BuiltinTheme } from 'shiki';\n\nimport { useHighlight } from '@/hooks/useHighlight';\n\ninterface StaticRendererProps {\n  children: string;\n  className?: string;\n  enableTransformer?: boolean;\n  fallbackClassName?: string;\n  language: string;\n  style?: CSSProperties;\n  theme?: BuiltinTheme;\n}\n\n// Escape HTML for fallback to prevent XSS\nconst escapeHtml = (str: string) =>\n  str\n    .replaceAll('&', '&amp;')\n    .replaceAll('<', '&lt;')\n    .replaceAll('>', '&gt;')\n    .replaceAll('\"', '&quot;')\n    .replaceAll(\"'\", '&#039;');\n\n/**\n * Static renderer for syntax highlighting without animation\n * Uses useHighlight hook to generate HTML and renders it directly\n */\nconst StaticRenderer = memo<StaticRendererProps>(\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\n    // Safely handle empty or invalid children\n    const safeChildren = children ?? '';\n\n    const { data } = useHighlight(safeChildren, {\n      enableTransformer,\n      language,\n      theme,\n    });\n\n    const hasData = typeof data === 'string' && data.length > 0;\n    const containerClassName = hasData ? className : fallbackClassName;\n\n    return (\n      <div\n        className={containerClassName}\n        dangerouslySetInnerHTML={{\n          __html: data || `<pre><code>${escapeHtml(safeChildren)}</code></pre>`,\n        }}\n        dir=\"ltr\"\n        style={style}\n      />\n    );\n  },\n);\n\nStaticRenderer.displayName = 'StaticRenderer';\n\nexport default StaticRenderer;\n"],"mappings":";;;;;;;AAkBA,MAAM,cAAc,QAClB,IACG,WAAW,KAAK,QAAQ,CACxB,WAAW,KAAK,OAAO,CACvB,WAAW,KAAK,OAAO,CACvB,WAAW,MAAK,SAAS,CACzB,WAAW,KAAK,SAAS;;;;;AAM9B,MAAM,iBAAiB,MACpB,EAAE,UAAU,WAAW,mBAAmB,mBAAmB,UAAU,OAAO,YAAY;CAEzF,MAAM,eAAe,YAAY;CAEjC,MAAM,EAAE,SAAS,aAAa,cAAc;EAC1C;EACA;EACA;EACD,CAAC;AAKF,QACE,oBAAC;EACC,WALY,OAAO,SAAS,YAAY,KAAK,SAAS,IACrB,YAAY;EAK7C,yBAAyB,EACvB,QAAQ,QAAQ,cAAc,WAAW,aAAa,CAAC,gBACxD;EACD,KAAI;EACG;GACP;EAGP;AAED,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"StaticRenderer.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/StaticRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { CSSProperties, memo } from 'react';\nimport type { BuiltinTheme } from 'shiki';\n\nimport { useHighlight } from '@/hooks/useHighlight';\n\ninterface StaticRendererProps {\n  children: string;\n  className?: string;\n  enableTransformer?: boolean;\n  fallbackClassName?: string;\n  language: string;\n  style?: CSSProperties;\n  theme?: BuiltinTheme;\n}\n\n// Escape HTML for fallback to prevent XSS\nconst escapeHtml = (str: string) =>\n  str\n    .replaceAll('&', '&amp;')\n    .replaceAll('<', '&lt;')\n    .replaceAll('>', '&gt;')\n    .replaceAll('\"', '&quot;')\n    .replaceAll(\"'\", '&#039;');\n\n/**\n * Static renderer for syntax highlighting without animation\n * Uses useHighlight hook to generate HTML and renders it directly\n */\nconst StaticRenderer = memo<StaticRendererProps>(\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\n    // Safely handle empty or invalid children\n    const safeChildren = children ?? '';\n\n    const data = useHighlight(safeChildren, {\n      enableTransformer,\n      language,\n      theme,\n    });\n\n    const hasData = typeof data === 'string' && data.length > 0;\n    const containerClassName = hasData ? className : fallbackClassName;\n\n    return (\n      <div\n        className={containerClassName}\n        dangerouslySetInnerHTML={{\n          __html: data || `<pre><code>${escapeHtml(safeChildren)}</code></pre>`,\n        }}\n        dir=\"ltr\"\n        style={style}\n      />\n    );\n  },\n);\n\nStaticRenderer.displayName = 'StaticRenderer';\n\nexport default StaticRenderer;\n"],"mappings":";;;;;;;AAkBA,MAAM,cAAc,QAClB,IACG,WAAW,KAAK,QAAQ,CACxB,WAAW,KAAK,OAAO,CACvB,WAAW,KAAK,OAAO,CACvB,WAAW,MAAK,SAAS,CACzB,WAAW,KAAK,SAAS;;;;;AAM9B,MAAM,iBAAiB,MACpB,EAAE,UAAU,WAAW,mBAAmB,mBAAmB,UAAU,OAAO,YAAY;CAEzF,MAAM,eAAe,YAAY;CAEjC,MAAM,OAAO,aAAa,cAAc;EACtC;EACA;EACA;EACD,CAAC;AAKF,QACE,oBAAC;EACC,WALY,OAAO,SAAS,YAAY,KAAK,SAAS,IACrB,YAAY;EAK7C,yBAAyB,EACvB,QAAQ,QAAQ,cAAc,WAAW,aAAa,CAAC,gBACxD;EACD,KAAI;EACG;GACP;EAGP;AAED,eAAe,cAAc;AAE7B,6BAAe"}