@lobehub/ui 4.3.2 → 4.3.3

package/es/Text/Text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.mjs","names":["Text: FC<TextProps>","Tooltip"],"sources":["../../src/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { type FC, useMemo } from 'react';\n\nimport Tooltip from '@/Tooltip';\n\nimport { useStyles } from './styles';\nimport type { TextProps } from './type';\n\nconst Text: FC<TextProps> = ({\n  as: Container = 'div',\n  align,\n  className,\n  children,\n  style,\n  type,\n  disabled,\n  strong,\n  italic,\n  underline,\n  delete: deleteStyle,\n  fontSize,\n  mark,\n  code,\n  color,\n  weight,\n  ellipsis,\n  ...rest\n}) => {\n  const { styles, cx } = useStyles();\n\n  const variants = useMemo(\n    () =>\n      cva(styles.text, {\n        defaultVariants: {},\n        variants: {\n          as: {\n            h1: styles.h1,\n            h2: styles.h2,\n            h3: styles.h3,\n            h4: styles.h4,\n            h5: styles.h5,\n            p: styles.p,\n          },\n          code: {\n            true: styles.code,\n          },\n          delete: {\n            true: styles.delete,\n          },\n          disabled: {\n            true: styles.disabled,\n          },\n          ellipsis: {\n            multi: styles.ellipsisMulti,\n            true: styles.ellipsis,\n          },\n          italic: {\n            true: styles.italic,\n          },\n          mark: {\n            true: styles.mark,\n          },\n          strong: {\n            true: styles.strong,\n          },\n          type: {\n            danger: styles.danger,\n            info: styles.info,\n            secondary: styles.secondary,\n            success: styles.success,\n            warning: styles.warning,\n          },\n          underline: {\n            true: styles.underline,\n          },\n        },\n      }),\n    [styles],\n  );\n\n  const textStyle = {\n    ...(color && { color }),\n    ...(weight && { fontWeight: weight }),\n    ...(typeof ellipsis === 'object' &&\n      ellipsis.rows && {\n        WebkitLineClamp: ellipsis.rows,\n      }),\n    ...(fontSize && { fontSize }),\n    ...(align && { textAlign: align }),\n    ...style,\n  };\n\n  const content = (\n    <Container\n      className={cx(\n        variants({\n          as: ['h1', 'h2', 'h3', 'h4', 'h5', 'p'].includes(Container as string)\n            ? (Container as any)\n            : undefined,\n          code,\n          delete: deleteStyle,\n          disabled,\n          ellipsis: ellipsis\n            ? typeof ellipsis === 'object' && ellipsis.rows\n              ? 'multi'\n              : true\n            : undefined,\n          italic,\n          mark,\n          strong,\n          type,\n          underline,\n        }),\n        className,\n      )}\n      style={textStyle}\n      {...rest}\n    >\n      {children}\n    </Container>\n  );\n\n  // 处理带有 tooltip 的省略\n  if (ellipsis && typeof ellipsis === 'object' && ellipsis.tooltip) {\n    const title = typeof ellipsis.tooltip === 'string' ? ellipsis.tooltip : children;\n    if (typeof ellipsis.tooltip === 'object')\n      return (\n        <Tooltip {...ellipsis.tooltip} title={ellipsis.tooltip?.title || title}>\n          {content}\n        </Tooltip>\n      );\n    return <Tooltip title={title}>{content}</Tooltip>;\n  }\n\n  return content;\n};\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"mappings":";;;;;;;;;AAUA,MAAMA,QAAuB,EAC3B,IAAI,YAAY,OAChB,OACA,WACA,UACA,OACA,MACA,UACA,QACA,QACA,WACA,QAAQ,aACR,UACA,MACA,MACA,OACA,QACA,UACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,OAAO,WAAW;CAElC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB,EAAE;EACnB,UAAU;GACR,IAAI;IACF,IAAI,OAAO;IACX,IAAI,OAAO;IACX,IAAI,OAAO;IACX,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG,OAAO;IACX;GACD,MAAM,EACJ,MAAM,OAAO,MACd;GACD,QAAQ,EACN,MAAM,OAAO,QACd;GACD,UAAU,EACR,MAAM,OAAO,UACd;GACD,UAAU;IACR,OAAO,OAAO;IACd,MAAM,OAAO;IACd;GACD,QAAQ,EACN,MAAM,OAAO,QACd;GACD,MAAM,EACJ,MAAM,OAAO,MACd;GACD,QAAQ,EACN,MAAM,OAAO,QACd;GACD,MAAM;IACJ,QAAQ,OAAO;IACf,MAAM,OAAO;IACb,WAAW,OAAO;IAClB,SAAS,OAAO;IAChB,SAAS,OAAO;IACjB;GACD,WAAW,EACT,MAAM,OAAO,WACd;GACF;EACF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,YAAY;EAChB,GAAI,SAAS,EAAE,OAAO;EACtB,GAAI,UAAU,EAAE,YAAY,QAAQ;EACpC,GAAI,OAAO,aAAa,YACtB,SAAS,QAAQ,EACf,iBAAiB,SAAS,MAC3B;EACH,GAAI,YAAY,EAAE,UAAU;EAC5B,GAAI,SAAS,EAAE,WAAW,OAAO;EACjC,GAAG;EACJ;CAED,MAAM,UACJ,oBAAC;EACC,WAAW,GACT,SAAS;GACP,IAAI;IAAC;IAAM;IAAM;IAAM;IAAM;IAAM;IAAI,CAAC,SAAS,UAAoB,GAChE,YACD;GACJ;GACA,QAAQ;GACR;GACA,UAAU,WACN,OAAO,aAAa,YAAY,SAAS,OACvC,UACA,OACF;GACJ;GACA;GACA;GACA;GACA;GACD,CAAC,EACF,UACD;EACD,OAAO;EACP,GAAI;EAEH;GACS;AAId,KAAI,YAAY,OAAO,aAAa,YAAY,SAAS,SAAS;EAChE,MAAM,QAAQ,OAAO,SAAS,YAAY,WAAW,SAAS,UAAU;AACxE,MAAI,OAAO,SAAS,YAAY,SAC9B,QACE,oBAACC;GAAQ,GAAI,SAAS;GAAS,OAAO,SAAS,SAAS,SAAS;aAC9D;IACO;AAEd,SAAO,oBAACA;GAAe;aAAQ;IAAkB;;AAGnD,QAAO;;AAGT,KAAK,cAAc;AAEnB,mBAAe"}
+{"version":3,"file":"Text.mjs","names":["Text: FC<TextProps>","Tooltip"],"sources":["../../src/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport Tooltip from '@/Tooltip';\n\nimport { variants } from './styles';\nimport type { TextProps } from './type';\n\nconst Text: FC<TextProps> = ({\n  as: Container = 'div',\n  align,\n  className,\n  children,\n  style,\n  type,\n  disabled,\n  strong,\n  italic,\n  underline,\n  delete: deleteStyle,\n  fontSize,\n  mark,\n  code,\n  color,\n  weight,\n  ellipsis,\n  ...rest\n}) => {\n  const textStyle = {\n    ...(color && { color }),\n    ...(weight && { fontWeight: weight }),\n    ...(typeof ellipsis === 'object' &&\n      ellipsis.rows && {\n        WebkitLineClamp: ellipsis.rows,\n      }),\n    ...(fontSize && { fontSize }),\n    ...(align && { textAlign: align }),\n    ...style,\n  };\n\n  const content = (\n    <Container\n      className={cx(\n        variants({\n          as: ['h1', 'h2', 'h3', 'h4', 'h5', 'p'].includes(Container as string)\n            ? (Container as any)\n            : undefined,\n          code,\n          delete: deleteStyle,\n          disabled,\n          ellipsis: ellipsis\n            ? typeof ellipsis === 'object' && ellipsis.rows\n              ? 'multi'\n              : true\n            : undefined,\n          italic,\n          mark,\n          strong,\n          type,\n          underline,\n        }),\n        className,\n      )}\n      style={textStyle}\n      {...rest}\n    >\n      {children}\n    </Container>\n  );\n\n  // 处理带有 tooltip 的省略\n  if (ellipsis && typeof ellipsis === 'object' && ellipsis.tooltip) {\n    const title = typeof ellipsis.tooltip === 'string' ? ellipsis.tooltip : children;\n    if (typeof ellipsis.tooltip === 'object')\n      return (\n        <Tooltip {...ellipsis.tooltip} title={ellipsis.tooltip?.title || title}>\n          {content}\n        </Tooltip>\n      );\n    return <Tooltip title={title}>{content}</Tooltip>;\n  }\n\n  return content;\n};\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"mappings":";;;;;;;;AAUA,MAAMA,QAAuB,EAC3B,IAAI,YAAY,OAChB,OACA,WACA,UACA,OACA,MACA,UACA,QACA,QACA,WACA,QAAQ,aACR,UACA,MACA,MACA,OACA,QACA,UACA,GAAG,WACC;CACJ,MAAM,YAAY;EAChB,GAAI,SAAS,EAAE,OAAO;EACtB,GAAI,UAAU,EAAE,YAAY,QAAQ;EACpC,GAAI,OAAO,aAAa,YACtB,SAAS,QAAQ,EACf,iBAAiB,SAAS,MAC3B;EACH,GAAI,YAAY,EAAE,UAAU;EAC5B,GAAI,SAAS,EAAE,WAAW,OAAO;EACjC,GAAG;EACJ;CAED,MAAM,UACJ,oBAAC;EACC,WAAW,GACT,SAAS;GACP,IAAI;IAAC;IAAM;IAAM;IAAM;IAAM;IAAM;IAAI,CAAC,SAAS,UAAoB,GAChE,YACD;GACJ;GACA,QAAQ;GACR;GACA,UAAU,WACN,OAAO,aAAa,YAAY,SAAS,OACvC,UACA,OACF;GACJ;GACA;GACA;GACA;GACA;GACD,CAAC,EACF,UACD;EACD,OAAO;EACP,GAAI;EAEH;GACS;AAId,KAAI,YAAY,OAAO,aAAa,YAAY,SAAS,SAAS;EAChE,MAAM,QAAQ,OAAO,SAAS,YAAY,WAAW,SAAS,UAAU;AACxE,MAAI,OAAO,SAAS,YAAY,SAC9B,QACE,oBAACC;GAAQ,GAAI,SAAS;GAAS,OAAO,SAAS,SAAS,SAAS;aAC9D;IACO;AAEd,SAAO,oBAACA;GAAe;aAAQ;IAAkB;;AAGnD,QAAO;;AAGT,KAAK,cAAc;AAEnB,mBAAe"}

package/es/Text/styles.mjs

@@ -1,19 +1,20 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/Text/styles.ts
-const useStyles = createStyles(({ css: css$1, token }) => ({
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
 	code: css$1`
-    font-family: ${token.fontFamilyCode};
+    font-family: ${cssVar$1.fontFamilyCode};
   `,
 	danger: css$1`
-    color: ${token.colorError};
+    color: ${cssVar$1.colorError};
   `,
 	delete: css$1`
     text-decoration: line-through;
   `,
 	disabled: css$1`
     cursor: not-allowed;
-    color: ${token.colorTextDisabled};
+    color: ${cssVar$1.colorTextDisabled};
   `,
 	ellipsis: css$1`
     overflow: hidden;
@@ -27,63 +28,94 @@ const useStyles = createStyles(({ css: css$1, token }) => ({
     text-overflow: ellipsis;
   `,
 	h1: css$1`
-    font-size: calc(${token.fontSize}px * 2.5);
+    font-size: calc(${cssVar$1.fontSize} * 2.5);
     font-weight: bold;
     line-height: 1.25;
   `,
 	h2: css$1`
-    font-size: calc(${token.fontSize}px * 2);
+    font-size: calc(${cssVar$1.fontSize} * 2);
     font-weight: bold;
     line-height: 1.25;
   `,
 	h3: css$1`
-    font-size: calc(${token.fontSize}px * 1.5);
+    font-size: calc(${cssVar$1.fontSize} * 1.5);
     font-weight: bold;
     line-height: 1.25;
   `,
 	h4: css$1`
-    font-size: calc(${token.fontSize}px * 1.25);
+    font-size: calc(${cssVar$1.fontSize} * 1.25);
     font-weight: bold;
     line-height: 1.25;
   `,
 	h5: css$1`
-    font-size: ${token.fontSize}px;
+    font-size: ${cssVar$1.fontSize};
     font-weight: bold;
     line-height: 1.25;
   `,
 	info: css$1`
-    color: ${token.colorInfo};
+    color: ${cssVar$1.colorInfo};
   `,
 	italic: css$1`
     font-style: italic;
   `,
 	mark: css$1`
     color: #000;
-    background-color: ${token.yellow};
+    background-color: ${cssVar$1.yellow};
   `,
 	p: css$1`
     margin-block: 0;
   `,
 	secondary: css$1`
-    color: ${token.colorTextDescription};
+    color: ${cssVar$1.colorTextDescription};
   `,
 	strong: css$1`
     font-weight: bold;
   `,
 	success: css$1`
-    color: ${token.colorSuccess};
+    color: ${cssVar$1.colorSuccess};
   `,
 	text: css$1`
-    color: ${token.colorText};
+    color: ${cssVar$1.colorText};
   `,
 	underline: css$1`
     text-decoration: underline;
   `,
 	warning: css$1`
-    color: ${token.colorWarning};
+    color: ${cssVar$1.colorWarning};
   `
 }));
+const variants = cva(styles.text, {
+	defaultVariants: {},
+	variants: {
+		as: {
+			h1: styles.h1,
+			h2: styles.h2,
+			h3: styles.h3,
+			h4: styles.h4,
+			h5: styles.h5,
+			p: styles.p
+		},
+		code: { true: styles.code },
+		delete: { true: styles.delete },
+		disabled: { true: styles.disabled },
+		ellipsis: {
+			multi: styles.ellipsisMulti,
+			true: styles.ellipsis
+		},
+		italic: { true: styles.italic },
+		mark: { true: styles.mark },
+		strong: { true: styles.strong },
+		type: {
+			danger: styles.danger,
+			info: styles.info,
+			secondary: styles.secondary,
+			success: styles.success,
+			warning: styles.warning
+		},
+		underline: { true: styles.underline }
+	}
+});
 
 //#endregion
-export { useStyles };
+export { variants };
 //# sourceMappingURL=styles.mjs.map

package/es/Text/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","names":[],"sources":["../../src/Text/styles.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token }) => ({\n  code: css`\n    font-family: ${token.fontFamilyCode};\n  `,\n  danger: css`\n    color: ${token.colorError};\n  `,\n  delete: css`\n    text-decoration: line-through;\n  `,\n  disabled: css`\n    cursor: not-allowed;\n    color: ${token.colorTextDisabled};\n  `,\n  ellipsis: css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  ellipsisMulti: css`\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n  `,\n  // Heading styles\n  h1: css`\n    font-size: calc(${token.fontSize}px * 2.5);\n    font-weight: bold;\n    line-height: 1.25;\n  `,\n\n  h2: css`\n    font-size: calc(${token.fontSize}px * 2);\n    font-weight: bold;\n    line-height: 1.25;\n  `,\n\n  h3: css`\n    font-size: calc(${token.fontSize}px * 1.5);\n    font-weight: bold;\n    line-height: 1.25;\n  `,\n\n  h4: css`\n    font-size: calc(${token.fontSize}px * 1.25);\n    font-weight: bold;\n    line-height: 1.25;\n  `,\n\n  h5: css`\n    font-size: ${token.fontSize}px;\n    font-weight: bold;\n    line-height: 1.25;\n  `,\n  info: css`\n    color: ${token.colorInfo};\n  `,\n\n  italic: css`\n    font-style: italic;\n  `,\n\n  mark: css`\n    color: #000;\n    background-color: ${token.yellow};\n  `,\n\n  p: css`\n    margin-block: 0;\n  `,\n\n  secondary: css`\n    color: ${token.colorTextDescription};\n  `,\n\n  strong: css`\n    font-weight: bold;\n  `,\n  success: css`\n    color: ${token.colorSuccess};\n  `,\n  text: css`\n    color: ${token.colorText};\n  `,\n  underline: css`\n    text-decoration: underline;\n  `,\n  warning: css`\n    color: ${token.colorWarning};\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,aAAa;CACzD,MAAM,KAAG;mBACQ,MAAM,eAAe;;CAEtC,QAAQ,KAAG;aACA,MAAM,WAAW;;CAE5B,QAAQ,KAAG;;;CAGX,UAAU,KAAG;;aAEF,MAAM,kBAAkB;;CAEnC,UAAU,KAAG;;;;;CAKb,eAAe,KAAG;;;;;;CAOlB,IAAI,KAAG;sBACa,MAAM,SAAS;;;;CAKnC,IAAI,KAAG;sBACa,MAAM,SAAS;;;;CAKnC,IAAI,KAAG;sBACa,MAAM,SAAS;;;;CAKnC,IAAI,KAAG;sBACa,MAAM,SAAS;;;;CAKnC,IAAI,KAAG;iBACQ,MAAM,SAAS;;;;CAI9B,MAAM,KAAG;aACE,MAAM,UAAU;;CAG3B,QAAQ,KAAG;;;CAIX,MAAM,KAAG;;wBAEa,MAAM,OAAO;;CAGnC,GAAG,KAAG;;;CAIN,WAAW,KAAG;aACH,MAAM,qBAAqB;;CAGtC,QAAQ,KAAG;;;CAGX,SAAS,KAAG;aACD,MAAM,aAAa;;CAE9B,MAAM,KAAG;aACE,MAAM,UAAU;;CAE3B,WAAW,KAAG;;;CAGd,SAAS,KAAG;aACD,MAAM,aAAa;;CAE/B,EAAE"}
+{"version":3,"file":"styles.mjs","names":["cssVar"],"sources":["../../src/Text/styles.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  code: css`\n    font-family: ${cssVar.fontFamilyCode};\n  `,\n  danger: css`\n    color: ${cssVar.colorError};\n  `,\n  delete: css`\n    text-decoration: line-through;\n  `,\n  disabled: css`\n    cursor: not-allowed;\n    color: ${cssVar.colorTextDisabled};\n  `,\n  ellipsis: css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  ellipsisMulti: css`\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n  `,\n  // Heading styles\n  h1: css`\n    font-size: calc(${cssVar.fontSize} * 2.5);\n    font-weight: bold;\n    line-height: 1.25;\n  `,\n\n  h2: css`\n    font-size: calc(${cssVar.fontSize} * 2);\n    font-weight: bold;\n    line-height: 1.25;\n  `,\n\n  h3: css`\n    font-size: calc(${cssVar.fontSize} * 1.5);\n    font-weight: bold;\n    line-height: 1.25;\n  `,\n\n  h4: css`\n    font-size: calc(${cssVar.fontSize} * 1.25);\n    font-weight: bold;\n    line-height: 1.25;\n  `,\n\n  h5: css`\n    font-size: ${cssVar.fontSize};\n    font-weight: bold;\n    line-height: 1.25;\n  `,\n  info: css`\n    color: ${cssVar.colorInfo};\n  `,\n\n  italic: css`\n    font-style: italic;\n  `,\n\n  mark: css`\n    color: #000;\n    background-color: ${cssVar.yellow};\n  `,\n\n  p: css`\n    margin-block: 0;\n  `,\n\n  secondary: css`\n    color: ${cssVar.colorTextDescription};\n  `,\n\n  strong: css`\n    font-weight: bold;\n  `,\n  success: css`\n    color: ${cssVar.colorSuccess};\n  `,\n  text: css`\n    color: ${cssVar.colorText};\n  `,\n  underline: css`\n    text-decoration: underline;\n  `,\n  warning: css`\n    color: ${cssVar.colorWarning};\n  `,\n}));\n\nexport const variants = cva(styles.text, {\n  defaultVariants: {},\n  variants: {\n    as: {\n      h1: styles.h1,\n      h2: styles.h2,\n      h3: styles.h3,\n      h4: styles.h4,\n      h5: styles.h5,\n      p: styles.p,\n    },\n    code: {\n      true: styles.code,\n    },\n    delete: {\n      true: styles.delete,\n    },\n    disabled: {\n      true: styles.disabled,\n    },\n    ellipsis: {\n      multi: styles.ellipsisMulti,\n      true: styles.ellipsis,\n    },\n    italic: {\n      true: styles.italic,\n    },\n    mark: {\n      true: styles.mark,\n    },\n    strong: {\n      true: styles.strong,\n    },\n    type: {\n      danger: styles.danger,\n      info: styles.info,\n      secondary: styles.secondary,\n      success: styles.success,\n      warning: styles.warning,\n    },\n    underline: {\n      true: styles.underline,\n    },\n  },\n});\n"],"mappings":";;;;AAGA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,MAAM,KAAG;mBACQA,SAAO,eAAe;;CAEvC,QAAQ,KAAG;aACAA,SAAO,WAAW;;CAE7B,QAAQ,KAAG;;;CAGX,UAAU,KAAG;;aAEFA,SAAO,kBAAkB;;CAEpC,UAAU,KAAG;;;;;CAKb,eAAe,KAAG;;;;;;CAOlB,IAAI,KAAG;sBACaA,SAAO,SAAS;;;;CAKpC,IAAI,KAAG;sBACaA,SAAO,SAAS;;;;CAKpC,IAAI,KAAG;sBACaA,SAAO,SAAS;;;;CAKpC,IAAI,KAAG;sBACaA,SAAO,SAAS;;;;CAKpC,IAAI,KAAG;iBACQA,SAAO,SAAS;;;;CAI/B,MAAM,KAAG;aACEA,SAAO,UAAU;;CAG5B,QAAQ,KAAG;;;CAIX,MAAM,KAAG;;wBAEaA,SAAO,OAAO;;CAGpC,GAAG,KAAG;;;CAIN,WAAW,KAAG;aACHA,SAAO,qBAAqB;;CAGvC,QAAQ,KAAG;;;CAGX,SAAS,KAAG;aACDA,SAAO,aAAa;;CAE/B,MAAM,KAAG;aACEA,SAAO,UAAU;;CAE5B,WAAW,KAAG;;;CAGd,SAAS,KAAG;aACDA,SAAO,aAAa;;CAEhC,EAAE;AAEH,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EAAE;CACnB,UAAU;EACR,IAAI;GACF,IAAI,OAAO;GACX,IAAI,OAAO;GACX,IAAI,OAAO;GACX,IAAI,OAAO;GACX,IAAI,OAAO;GACX,GAAG,OAAO;GACX;EACD,MAAM,EACJ,MAAM,OAAO,MACd;EACD,QAAQ,EACN,MAAM,OAAO,QACd;EACD,UAAU,EACR,MAAM,OAAO,UACd;EACD,UAAU;GACR,OAAO,OAAO;GACd,MAAM,OAAO;GACd;EACD,QAAQ,EACN,MAAM,OAAO,QACd;EACD,MAAM,EACJ,MAAM,OAAO,MACd;EACD,QAAQ,EACN,MAAM,OAAO,QACd;EACD,MAAM;GACJ,QAAQ,OAAO;GACf,MAAM,OAAO;GACb,WAAW,OAAO;GAClB,SAAS,OAAO;GAChB,SAAS,OAAO;GACjB;EACD,WAAW,EACT,MAAM,OAAO,WACd;EACF;CACF,CAAC"}

package/es/ThemeProvider/ConfigProvider.mjs

@@ -3,33 +3,32 @@
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { ConfigProvider } from "antd";
-import { useTheme } from "antd-style";
+import { cssVar } from "antd-style";
 
 //#region src/ThemeProvider/ConfigProvider.tsx
 const ConfigProvider$1 = memo(({ children }) => {
-	const theme = useTheme();
 	return /* @__PURE__ */ jsx(ConfigProvider, {
 		theme: { components: {
 			Button: { contentFontSizeSM: 12 },
 			DatePicker: {
-				activeBorderColor: theme.colorBorder,
-				hoverBorderColor: theme.colorBorder
+				activeBorderColor: cssVar.colorBorder,
+				hoverBorderColor: cssVar.colorBorder
 			},
 			Input: {
-				activeBorderColor: theme.colorBorder,
-				hoverBorderColor: theme.colorBorder
+				activeBorderColor: cssVar.colorBorder,
+				hoverBorderColor: cssVar.colorBorder
 			},
 			InputNumber: {
-				activeBorderColor: theme.colorBorder,
-				hoverBorderColor: theme.colorBorder
+				activeBorderColor: cssVar.colorBorder,
+				hoverBorderColor: cssVar.colorBorder
 			},
 			Mentions: {
-				activeBorderColor: theme.colorBorder,
-				hoverBorderColor: theme.colorBorder
+				activeBorderColor: cssVar.colorBorder,
+				hoverBorderColor: cssVar.colorBorder
 			},
 			Select: {
-				activeBorderColor: theme.colorBorder,
-				hoverBorderColor: theme.colorBorder
+				activeBorderColor: cssVar.colorBorder,
+				hoverBorderColor: cssVar.colorBorder
 			}
 		} },
 		children

package/es/ThemeProvider/ConfigProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigProvider.mjs","names":["ConfigProvider","AntdConfigProvider"],"sources":["../../src/ThemeProvider/ConfigProvider.tsx"],"sourcesContent":["'use client';\n\nimport { ConfigProvider as AntdConfigProvider } from 'antd';\nimport { useTheme } from 'antd-style';\nimport { PropsWithChildren, memo } from 'react';\n\nconst ConfigProvider = memo<PropsWithChildren>(({ children }) => {\n  const theme = useTheme();\n  return (\n    <AntdConfigProvider\n      theme={{\n        components: {\n          Button: {\n            contentFontSizeSM: 12,\n          },\n          DatePicker: {\n            activeBorderColor: theme.colorBorder,\n            hoverBorderColor: theme.colorBorder,\n          },\n          Input: {\n            activeBorderColor: theme.colorBorder,\n            hoverBorderColor: theme.colorBorder,\n          },\n          InputNumber: {\n            activeBorderColor: theme.colorBorder,\n            hoverBorderColor: theme.colorBorder,\n          },\n          Mentions: {\n            activeBorderColor: theme.colorBorder,\n            hoverBorderColor: theme.colorBorder,\n          },\n          Select: {\n            activeBorderColor: theme.colorBorder,\n            hoverBorderColor: theme.colorBorder,\n          },\n        },\n      }}\n    >\n      {children}\n    </AntdConfigProvider>\n  );\n});\n\nexport default ConfigProvider;\n"],"mappings":";;;;;;;;AAMA,MAAMA,mBAAiB,MAAyB,EAAE,eAAe;CAC/D,MAAM,QAAQ,UAAU;AACxB,QACE,oBAACC;EACC,OAAO,EACL,YAAY;GACV,QAAQ,EACN,mBAAmB,IACpB;GACD,YAAY;IACV,mBAAmB,MAAM;IACzB,kBAAkB,MAAM;IACzB;GACD,OAAO;IACL,mBAAmB,MAAM;IACzB,kBAAkB,MAAM;IACzB;GACD,aAAa;IACX,mBAAmB,MAAM;IACzB,kBAAkB,MAAM;IACzB;GACD,UAAU;IACR,mBAAmB,MAAM;IACzB,kBAAkB,MAAM;IACzB;GACD,QAAQ;IACN,mBAAmB,MAAM;IACzB,kBAAkB,MAAM;IACzB;GACF,EACF;EAEA;GACkB;EAEvB;AAEF,6BAAeD"}
+{"version":3,"file":"ConfigProvider.mjs","names":["ConfigProvider","AntdConfigProvider"],"sources":["../../src/ThemeProvider/ConfigProvider.tsx"],"sourcesContent":["'use client';\n\nimport { ConfigProvider as AntdConfigProvider } from 'antd';\nimport { cssVar } from 'antd-style';\nimport { PropsWithChildren, memo } from 'react';\n\nconst ConfigProvider = memo<PropsWithChildren>(({ children }) => {\n  return (\n    <AntdConfigProvider\n      theme={{\n        components: {\n          Button: {\n            contentFontSizeSM: 12,\n          },\n          DatePicker: {\n            activeBorderColor: cssVar.colorBorder,\n            hoverBorderColor: cssVar.colorBorder,\n          },\n          Input: {\n            activeBorderColor: cssVar.colorBorder,\n            hoverBorderColor: cssVar.colorBorder,\n          },\n          InputNumber: {\n            activeBorderColor: cssVar.colorBorder,\n            hoverBorderColor: cssVar.colorBorder,\n          },\n          Mentions: {\n            activeBorderColor: cssVar.colorBorder,\n            hoverBorderColor: cssVar.colorBorder,\n          },\n          Select: {\n            activeBorderColor: cssVar.colorBorder,\n            hoverBorderColor: cssVar.colorBorder,\n          },\n        },\n      }}\n    >\n      {children}\n    </AntdConfigProvider>\n  );\n});\n\nexport default ConfigProvider;\n"],"mappings":";;;;;;;;AAMA,MAAMA,mBAAiB,MAAyB,EAAE,eAAe;AAC/D,QACE,oBAACC;EACC,OAAO,EACL,YAAY;GACV,QAAQ,EACN,mBAAmB,IACpB;GACD,YAAY;IACV,mBAAmB,OAAO;IAC1B,kBAAkB,OAAO;IAC1B;GACD,OAAO;IACL,mBAAmB,OAAO;IAC1B,kBAAkB,OAAO;IAC1B;GACD,aAAa;IACX,mBAAmB,OAAO;IAC1B,kBAAkB,OAAO;IAC1B;GACD,UAAU;IACR,mBAAmB,OAAO;IAC1B,kBAAkB,OAAO;IAC1B;GACD,QAAQ;IACN,mBAAmB,OAAO;IAC1B,kBAAkB,OAAO;IAC1B;GACF,EACF;EAEA;GACkB;EAEvB;AAEF,6BAAeD"}

package/es/ThemeProvider/ThemeProvider.d.mts

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

package/es/ThemeProvider/ThemeProvider.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { useCdnFn } from "../ConfigProvider/index.mjs";
-import FontLoader_default from "../FontLoader/index.mjs";
 import { generateCustomStylish } from "../styles/theme/customStylish.mjs";
 import { generateCustomToken } from "../styles/theme/customToken.mjs";
+import FontLoader_default from "../FontLoader/index.mjs";
 import { createLobeAntdTheme } from "../styles/theme/antdTheme.mjs";
 import ConfigProvider_default from "./ConfigProvider.mjs";
 import GlobalStyle_default from "./GlobalStyle/index.mjs";

package/es/Toc/Toc.d.mts

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

package/es/Toc/Toc.mjs

@@ -1,18 +1,19 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { mapItems } from "./utils.mjs";
 import TocMobile_default from "./TocMobile.mjs";
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Anchor } from "antd";
+import { cx } from "antd-style";
 
 //#region src/Toc/Toc.tsx
 const Toc = memo(({ activeKey, items, getContainer, isMobile, headerHeight = 64, tocWidth = 176 }) => {
-	const { styles, cx } = useStyles({
-		headerHeight,
-		tocWidth
-	});
+	const cssVariables = useMemo(() => ({
+		"--toc-header-height": `${headerHeight}px`,
+		"--toc-width": `${tocWidth}px`
+	}), [headerHeight, tocWidth]);
 	if (isMobile) return /* @__PURE__ */ jsx(TocMobile_default, {
 		activeKey,
 		getContainer,
@@ -21,6 +22,7 @@ const Toc = memo(({ activeKey, items, getContainer, isMobile, headerHeight = 64,
 	});
 	return /* @__PURE__ */ jsxs("section", {
 		className: cx(styles.container, styles.anchor),
+		style: cssVariables,
 		children: [/* @__PURE__ */ jsx("h4", { children: "Table of Contents" }), /* @__PURE__ */ jsx(Anchor, {
 			getContainer,
 			items: mapItems(items),

package/es/Toc/Toc.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toc.mjs","names":["TocMobile"],"sources":["../../src/Toc/Toc.tsx"],"sourcesContent":["'use client';\n\nimport { Anchor } from 'antd';\nimport { memo } from 'react';\n\nimport { default as TocMobile } from './TocMobile';\nimport { useStyles } from './style';\nimport type { TocProps } from './type';\nimport { mapItems } from './utils';\n\nconst Toc = memo<TocProps>(\n  ({ activeKey, items, getContainer, isMobile, headerHeight = 64, tocWidth = 176 }) => {\n    const { styles, cx } = useStyles({ headerHeight, tocWidth });\n\n    if (isMobile)\n      return (\n        <TocMobile\n          activeKey={activeKey}\n          getContainer={getContainer}\n          headerHeight={headerHeight}\n          items={items}\n        />\n      );\n\n    return (\n      <section className={cx(styles.container, styles.anchor)}>\n        <h4>Table of Contents</h4>\n        <Anchor\n          getContainer={getContainer}\n          items={mapItems(items)}\n          targetOffset={headerHeight + 12}\n        />\n      </section>\n    );\n  },\n);\n\nToc.displayName = 'Toc';\n\nexport default Toc;\n"],"mappings":";;;;;;;;;;AAUA,MAAM,MAAM,MACT,EAAE,WAAW,OAAO,cAAc,UAAU,eAAe,IAAI,WAAW,UAAU;CACnF,MAAM,EAAE,QAAQ,OAAO,UAAU;EAAE;EAAc;EAAU,CAAC;AAE5D,KAAI,SACF,QACE,oBAACA;EACY;EACG;EACA;EACP;GACP;AAGN,QACE,qBAAC;EAAQ,WAAW,GAAG,OAAO,WAAW,OAAO,OAAO;aACrD,oBAAC,kBAAG,sBAAsB,EAC1B,oBAAC;GACe;GACd,OAAO,SAAS,MAAM;GACtB,cAAc,eAAe;IAC7B;GACM;EAGf;AAED,IAAI,cAAc;AAElB,kBAAe"}
+{"version":3,"file":"Toc.mjs","names":["TocMobile"],"sources":["../../src/Toc/Toc.tsx"],"sourcesContent":["'use client';\n\nimport { Anchor } from 'antd';\nimport { cx } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport { default as TocMobile } from './TocMobile';\nimport { styles } from './style';\nimport type { TocProps } from './type';\nimport { mapItems } from './utils';\n\nconst Toc = memo<TocProps>(\n  ({ activeKey, items, getContainer, isMobile, headerHeight = 64, tocWidth = 176 }) => {\n    // Convert props to CSS variables\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--toc-header-height': `${headerHeight}px`,\n        '--toc-width': `${tocWidth}px`,\n      }),\n      [headerHeight, tocWidth],\n    );\n\n    if (isMobile)\n      return (\n        <TocMobile\n          activeKey={activeKey}\n          getContainer={getContainer}\n          headerHeight={headerHeight}\n          items={items}\n        />\n      );\n\n    return (\n      <section className={cx(styles.container, styles.anchor)} style={cssVariables}>\n        <h4>Table of Contents</h4>\n        <Anchor\n          getContainer={getContainer}\n          items={mapItems(items)}\n          targetOffset={headerHeight + 12}\n        />\n      </section>\n    );\n  },\n);\n\nToc.displayName = 'Toc';\n\nexport default Toc;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,MAAM,MACT,EAAE,WAAW,OAAO,cAAc,UAAU,eAAe,IAAI,WAAW,UAAU;CAEnF,MAAM,eAAe,eACZ;EACL,uBAAuB,GAAG,aAAa;EACvC,eAAe,GAAG,SAAS;EAC5B,GACD,CAAC,cAAc,SAAS,CACzB;AAED,KAAI,SACF,QACE,oBAACA;EACY;EACG;EACA;EACP;GACP;AAGN,QACE,qBAAC;EAAQ,WAAW,GAAG,OAAO,WAAW,OAAO,OAAO;EAAE,OAAO;aAC9D,oBAAC,kBAAG,sBAAsB,EAC1B,oBAAC;GACe;GACd,OAAO,SAAS,MAAM;GACtB,cAAc,eAAe;IAC7B;GACM;EAGf;AAED,IAAI,cAAc;AAElB,kBAAe"}

package/es/Toc/TocMobile.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { mapItems } from "./utils.mjs";
 import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -15,10 +15,6 @@ const TocMobile = memo(({ items, activeKey, onChange, getContainer, headerHeight
 		onChange,
 		value: activeKey
 	});
-	const { styles } = useStyles({
-		headerHeight,
-		tocWidth
-	});
 	const activeAnchor = items.find((item) => item.id === activeLink);
 	const tocItems = useMemo(() => mapItems(items), [items]);
 	return /* @__PURE__ */ jsx(ConfigProvider, {

package/es/Toc/TocMobile.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TocMobile.mjs","names":["useControlledState","ActionIcon"],"sources":["../../src/Toc/TocMobile.tsx"],"sourcesContent":["'use client';\n\nimport { Anchor, Collapse, ConfigProvider } from 'antd';\nimport { PanelTopClose, PanelTopOpen } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\n\nimport { useStyles } from './style';\nimport type { TocMobileProps } from './type';\nimport { mapItems } from './utils';\n\nconst TocMobile = memo<TocMobileProps>(\n  ({ items, activeKey, onChange, getContainer, headerHeight = 64, tocWidth = 176 }) => {\n    const [activeLink, setActiveLink] = useControlledState<string>('', {\n      onChange,\n      value: activeKey,\n    });\n    const { styles } = useStyles({ headerHeight, tocWidth });\n\n    const activeAnchor = items.find((item) => item.id === activeLink);\n\n    const tocItems = useMemo(() => mapItems(items), [items]);\n\n    return (\n      <ConfigProvider theme={{ token: { fontSize: 12, sizeStep: 3 } }}>\n        <section className={styles.mobileCtn}>\n          <Collapse\n            className={styles.expand}\n            expandIcon={({ isActive }) => (\n              <ActionIcon icon={isActive ? PanelTopClose : PanelTopOpen} size={'small'} />\n            )}\n            expandIconPlacement={'end'}\n            ghost\n          >\n            <Collapse.Panel\n              forceRender\n              header={activeAnchor ? activeAnchor.title : 'TOC'}\n              key={'toc'}\n            >\n              <ConfigProvider theme={{ token: { fontSize: 14, sizeStep: 4 } }}>\n                <Anchor\n                  getContainer={getContainer}\n                  items={tocItems}\n                  onChange={(currentLink) => {\n                    setActiveLink(currentLink.replace('#', ''));\n                  }}\n                  targetOffset={headerHeight + 48}\n                />\n              </ConfigProvider>\n            </Collapse.Panel>\n          </Collapse>\n        </section>\n      </ConfigProvider>\n    );\n  },\n);\n\nTocMobile.displayName = 'TocMobile';\n\nexport default TocMobile;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,YAAY,MACf,EAAE,OAAO,WAAW,UAAU,cAAc,eAAe,IAAI,WAAW,UAAU;CACnF,MAAM,CAAC,YAAY,iBAAiBA,cAA2B,IAAI;EACjE;EACA,OAAO;EACR,CAAC;CACF,MAAM,EAAE,WAAW,UAAU;EAAE;EAAc;EAAU,CAAC;CAExD,MAAM,eAAe,MAAM,MAAM,SAAS,KAAK,OAAO,WAAW;CAEjE,MAAM,WAAW,cAAc,SAAS,MAAM,EAAE,CAAC,MAAM,CAAC;AAExD,QACE,oBAAC;EAAe,OAAO,EAAE,OAAO;GAAE,UAAU;GAAI,UAAU;GAAG,EAAE;YAC7D,oBAAC;GAAQ,WAAW,OAAO;aACzB,oBAAC;IACC,WAAW,OAAO;IAClB,aAAa,EAAE,eACb,oBAACC;KAAW,MAAM,WAAW,gBAAgB;KAAc,MAAM;MAAW;IAE9E,qBAAqB;IACrB;cAEA,oBAAC,SAAS;KACR;KACA,QAAQ,eAAe,aAAa,QAAQ;eAG5C,oBAAC;MAAe,OAAO,EAAE,OAAO;OAAE,UAAU;OAAI,UAAU;OAAG,EAAE;gBAC7D,oBAAC;OACe;OACd,OAAO;OACP,WAAW,gBAAgB;AACzB,sBAAc,YAAY,QAAQ,KAAK,GAAG,CAAC;;OAE7C,cAAc,eAAe;QAC7B;OACa;OAXZ,MAYU;KACR;IACH;GACK;EAGtB;AAED,UAAU,cAAc;AAExB,wBAAe"}
+{"version":3,"file":"TocMobile.mjs","names":["useControlledState","ActionIcon"],"sources":["../../src/Toc/TocMobile.tsx"],"sourcesContent":["'use client';\n\nimport { Anchor, Collapse, ConfigProvider } from 'antd';\nimport { PanelTopClose, PanelTopOpen } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\n\nimport { styles } from './style';\nimport type { TocMobileProps } from './type';\nimport { mapItems } from './utils';\n\nconst TocMobile = memo<TocMobileProps>(\n  ({ items, activeKey, onChange, getContainer, headerHeight = 64, tocWidth = 176 }) => {\n    // tocWidth is part of the interface but not used in this component\n    void tocWidth;\n    const [activeLink, setActiveLink] = useControlledState<string>('', {\n      onChange,\n      value: activeKey,\n    });\n\n    const activeAnchor = items.find((item) => item.id === activeLink);\n\n    const tocItems = useMemo(() => mapItems(items), [items]);\n\n    return (\n      <ConfigProvider theme={{ token: { fontSize: 12, sizeStep: 3 } }}>\n        <section className={styles.mobileCtn}>\n          <Collapse\n            className={styles.expand}\n            expandIcon={({ isActive }) => (\n              <ActionIcon icon={isActive ? PanelTopClose : PanelTopOpen} size={'small'} />\n            )}\n            expandIconPlacement={'end'}\n            ghost\n          >\n            <Collapse.Panel\n              forceRender\n              header={activeAnchor ? activeAnchor.title : 'TOC'}\n              key={'toc'}\n            >\n              <ConfigProvider theme={{ token: { fontSize: 14, sizeStep: 4 } }}>\n                <Anchor\n                  getContainer={getContainer}\n                  items={tocItems}\n                  onChange={(currentLink) => {\n                    setActiveLink(currentLink.replace('#', ''));\n                  }}\n                  targetOffset={headerHeight + 48}\n                />\n              </ConfigProvider>\n            </Collapse.Panel>\n          </Collapse>\n        </section>\n      </ConfigProvider>\n    );\n  },\n);\n\nTocMobile.displayName = 'TocMobile';\n\nexport default TocMobile;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,YAAY,MACf,EAAE,OAAO,WAAW,UAAU,cAAc,eAAe,IAAI,WAAW,UAAU;CAGnF,MAAM,CAAC,YAAY,iBAAiBA,cAA2B,IAAI;EACjE;EACA,OAAO;EACR,CAAC;CAEF,MAAM,eAAe,MAAM,MAAM,SAAS,KAAK,OAAO,WAAW;CAEjE,MAAM,WAAW,cAAc,SAAS,MAAM,EAAE,CAAC,MAAM,CAAC;AAExD,QACE,oBAAC;EAAe,OAAO,EAAE,OAAO;GAAE,UAAU;GAAI,UAAU;GAAG,EAAE;YAC7D,oBAAC;GAAQ,WAAW,OAAO;aACzB,oBAAC;IACC,WAAW,OAAO;IAClB,aAAa,EAAE,eACb,oBAACC;KAAW,MAAM,WAAW,gBAAgB;KAAc,MAAM;MAAW;IAE9E,qBAAqB;IACrB;cAEA,oBAAC,SAAS;KACR;KACA,QAAQ,eAAe,aAAa,QAAQ;eAG5C,oBAAC;MAAe,OAAO,EAAE,OAAO;OAAE,UAAU;OAAI,UAAU;OAAG,EAAE;gBAC7D,oBAAC;OACe;OACd,OAAO;OACP,WAAW,gBAAgB;AACzB,sBAAc,YAAY,QAAQ,KAAK,GAAG,CAAC;;OAE7C,cAAc,eAAe;QAC7B;OACa;OAXZ,MAYU;KACR;IACH;GACK;EAGtB;AAED,UAAU,cAAc;AAExB,wBAAe"}

package/es/Toc/style.mjs

@@ -1,72 +1,72 @@
-import { createStyles } from "antd-style";
-import { rgba } from "polished";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx, responsive } from "antd-style";
 
 //#region src/Toc/style.ts
-const useStyles = createStyles(({ token, stylish, responsive, cx: cx$1, css: css$1, prefixCls }, { tocWidth, headerHeight }) => {
+const prefixCls = "ant";
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
-		anchor: cx$1(stylish.blur, css$1`
-          overflow: hidden auto;
-          max-height: 60dvh !important;
-        `),
+		anchor: cx(staticStylish.blur, css$1`
+        overflow: hidden auto;
+        max-height: 60dvh !important;
+      `),
 		container: css$1`
-        position: sticky;
-        inset-block-start: ${headerHeight + 64}px;
+      position: sticky;
+      inset-block-start: calc(var(--toc-header-height, 64px) + 64px);
 
-        overscroll-behavior: contain;
-        grid-area: toc;
+      overscroll-behavior: contain;
+      grid-area: toc;
 
-        width: ${tocWidth}px;
-        margin-inline-end: 24px;
+      width: var(--toc-width, 176px);
+      margin-inline-end: 24px;
+      border-radius: 3px;
 
-        border-radius: 3px;
+      -webkit-overflow-scrolling: touch;
 
-        -webkit-overflow-scrolling: touch;
-
-        ${responsive.mobile} {
-          position: relative;
-          inset-inline-start: 0;
-          width: 100%;
-          margin-block-start: 0;
-        }
+      ${responsive.sm} {
+        position: relative;
+        inset-inline-start: 0;
+        width: 100%;
+        margin-block-start: 0;
+      }
 
-        > h4 {
-          margin-block: 0 8px;
-          margin-inline: 0;
+      > h4 {
+        margin-block: 0 8px;
+        margin-inline: 0;
 
-          font-size: 12px;
-          line-height: 1;
-          color: ${token.colorTextDescription};
-        }
-      `,
-		expand: cx$1(stylish.blur, css$1`
-          width: 100%;
+        font-size: 12px;
+        line-height: 1;
+        color: ${cssVar$1.colorTextDescription};
+      }
+    `,
+		expand: cx(staticStylish.blur, css$1`
+        width: 100%;
+        border-block-end: 1px solid ${cssVar$1.colorSplit};
+        border-radius: 0;
 
-          background-color: ${rgba(token.colorBgLayout, .5)};
-          border-block-end: 1px solid ${token.colorSplit};
-          border-radius: 0;
-          box-shadow: ${token.boxShadowSecondary};
+        background-color: color-mix(in srgb, ${cssVar$1.colorBgLayout} 50%, transparent);
+        box-shadow: ${cssVar$1.boxShadowSecondary};
 
-          .${prefixCls}-collapse-content {
-            overflow: auto;
-          }
+        .${prefixCls}-collapse-content {
+          overflow: auto;
+        }
 
-          .${prefixCls}-collapse-header {
-            z-index: 10;
-            padding-block: 8px !important;
-            padding-inline: 16px 8px !important;
-          }
-        `),
+        .${prefixCls}-collapse-header {
+          z-index: 10;
+          padding-block: 8px !important;
+          padding-inline: 16px 8px !important;
+        }
+      `),
 		mobileCtn: css$1`
-        width: 100%;
-        height: ${36}px;
+      width: 100%;
+      height: ${36}px;
 
-        .${prefixCls}-collapse-expand-icon {
-          color: ${token.colorTextQuaternary};
-        }
-      `
+      .${prefixCls}-collapse-expand-icon {
+        color: ${cssVar$1.colorTextQuaternary};
+      }
+    `
 	};
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/Toc/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/Toc/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\nimport { rgba } from 'polished';\n\nexport const useStyles = createStyles(\n  (\n    { token, stylish, responsive, cx, css, prefixCls },\n    { tocWidth, headerHeight }: { headerHeight: number; tocWidth: number },\n  ) => {\n    const fixHeight = 36;\n\n    return {\n      anchor: cx(\n        stylish.blur,\n        css`\n          overflow: hidden auto;\n          max-height: 60dvh !important;\n        `,\n      ),\n      container: css`\n        position: sticky;\n        inset-block-start: ${headerHeight + 64}px;\n\n        overscroll-behavior: contain;\n        grid-area: toc;\n\n        width: ${tocWidth}px;\n        margin-inline-end: 24px;\n\n        border-radius: 3px;\n\n        -webkit-overflow-scrolling: touch;\n\n        ${responsive.mobile} {\n          position: relative;\n          inset-inline-start: 0;\n          width: 100%;\n          margin-block-start: 0;\n        }\n\n        > h4 {\n          margin-block: 0 8px;\n          margin-inline: 0;\n\n          font-size: 12px;\n          line-height: 1;\n          color: ${token.colorTextDescription};\n        }\n      `,\n      expand: cx(\n        stylish.blur,\n        css`\n          width: 100%;\n\n          background-color: ${rgba(token.colorBgLayout, 0.5)};\n          border-block-end: 1px solid ${token.colorSplit};\n          border-radius: 0;\n          box-shadow: ${token.boxShadowSecondary};\n\n          .${prefixCls}-collapse-content {\n            overflow: auto;\n          }\n\n          .${prefixCls}-collapse-header {\n            z-index: 10;\n            padding-block: 8px !important;\n            padding-inline: 16px 8px !important;\n          }\n        `,\n      ),\n      mobileCtn: css`\n        width: 100%;\n        height: ${fixHeight}px;\n\n        .${prefixCls}-collapse-expand-icon {\n          color: ${token.colorTextQuaternary};\n        }\n      `,\n    };\n  },\n);\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAErB,EAAE,OAAO,SAAS,YAAY,UAAI,YAAK,aACvC,EAAE,UAAU,mBACT;AAGH,QAAO;EACL,QAAQA,KACN,QAAQ,MACR,KAAG;;;UAIJ;EACD,WAAW,KAAG;;6BAES,eAAe,GAAG;;;;;iBAK9B,SAAS;;;;;;;UAOhB,WAAW,OAAO;;;;;;;;;;;;;mBAaT,MAAM,qBAAqB;;;EAGxC,QAAQA,KACN,QAAQ,MACR,KAAG;;;8BAGmB,KAAK,MAAM,eAAe,GAAI,CAAC;wCACrB,MAAM,WAAW;;wBAEjC,MAAM,mBAAmB;;aAEpC,UAAU;;;;aAIV,UAAU;;;;;UAMhB;EACD,WAAW,KAAG;;kBA7DE,GA+DM;;WAEjB,UAAU;mBACF,MAAM,oBAAoB;;;EAGxC;EAEJ"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/Toc/style.ts"],"sourcesContent":["import { createStaticStyles, cx, responsive } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const fixHeight = 36;\n\n  return {\n    anchor: cx(\n      lobeStaticStylish.blur,\n      css`\n        overflow: hidden auto;\n        max-height: 60dvh !important;\n      `,\n    ),\n    container: css`\n      position: sticky;\n      inset-block-start: calc(var(--toc-header-height, 64px) + 64px);\n\n      overscroll-behavior: contain;\n      grid-area: toc;\n\n      width: var(--toc-width, 176px);\n      margin-inline-end: 24px;\n      border-radius: 3px;\n\n      -webkit-overflow-scrolling: touch;\n\n      ${responsive.sm} {\n        position: relative;\n        inset-inline-start: 0;\n        width: 100%;\n        margin-block-start: 0;\n      }\n\n      > h4 {\n        margin-block: 0 8px;\n        margin-inline: 0;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ${cssVar.colorTextDescription};\n      }\n    `,\n    expand: cx(\n      lobeStaticStylish.blur,\n      css`\n        width: 100%;\n        border-block-end: 1px solid ${cssVar.colorSplit};\n        border-radius: 0;\n\n        background-color: color-mix(in srgb, ${cssVar.colorBgLayout} 50%, transparent);\n        box-shadow: ${cssVar.boxShadowSecondary};\n\n        .${prefixCls}-collapse-content {\n          overflow: auto;\n        }\n\n        .${prefixCls}-collapse-header {\n          z-index: 10;\n          padding-block: 8px !important;\n          padding-inline: 16px 8px !important;\n        }\n      `,\n    ),\n    mobileCtn: css`\n      width: 100%;\n      height: ${fixHeight}px;\n\n      .${prefixCls}-collapse-expand-icon {\n        color: ${cssVar.colorTextQuaternary};\n      }\n    `,\n  };\n});\n"],"mappings":";;;;AAIA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAG5D,QAAO;EACL,QAAQ,GACNA,cAAkB,MAClB,KAAG;;;QAIJ;EACD,WAAW,KAAG;;;;;;;;;;;;;QAaV,WAAW,GAAG;;;;;;;;;;;;;iBAaLC,SAAO,qBAAqB;;;EAGzC,QAAQ,GACND,cAAkB,MAClB,KAAG;;sCAE6BC,SAAO,WAAW;;;+CAGTA,SAAO,cAAc;sBAC9CA,SAAO,mBAAmB;;WAErC,UAAU;;;;WAIV,UAAU;;;;;QAMhB;EACD,WAAW,KAAG;;gBA5DE,GA8DM;;SAEjB,UAAU;iBACFA,SAAO,oBAAoB;;;EAGzC;EACD"}

package/es/Tooltip/TooltipFloating.mjs

@@ -3,16 +3,16 @@
 import { useMotionComponent } from "../MotionProvider/index.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Hotkey_default from "../Hotkey/Hotkey.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import React, { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 import { AnimatePresence } from "motion/react";
 import { FloatingArrow } from "@floating-ui/react";
 import { useDebounce } from "ahooks";
 
 //#region src/Tooltip/TooltipFloating.tsx
 const TooltipFloating = ({ open, title, placement, floatingStyles, setFloating, floatingProps, arrow: arrow$1, arrowRef, context, hotkey, hotkeyProps, className, classNames, styles: styleProps, zIndex }) => {
-	const { styles, cx } = useStyles();
 	const transformOrigin = useMemo(() => {
 		switch (String(placement || "top").split("-")[0]) {
 			case "top": return "bottom center";

package/es/Tooltip/TooltipFloating.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipFloating.mjs","names":["Flexbox","Hotkey","arrow"],"sources":["../../src/Tooltip/TooltipFloating.tsx"],"sourcesContent":["'use client';\n\nimport type { FloatingContext, Placement } from '@floating-ui/react';\nimport { FloatingArrow } from '@floating-ui/react';\nimport { useDebounce } from 'ahooks';\nimport { AnimatePresence } from 'motion/react';\nimport type { CSSProperties, ReactNode, RefObject } from 'react';\nimport React, { useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Hotkey from '@/Hotkey';\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { useStyles } from './style';\nimport type { TooltipProps } from './type';\n\ntype TooltipFloatingProps = {\n  arrow?: boolean;\n  arrowRef?: RefObject<SVGSVGElement | null>;\n\n  className?: TooltipProps['className'];\n  classNames?: TooltipProps['classNames'];\n  context?: FloatingContext;\n\n  floatingProps?: Record<string, any>;\n  floatingStyles: CSSProperties;\n\n  hotkey?: TooltipProps['hotkey'];\n  hotkeyProps?: TooltipProps['hotkeyProps'];\n\n  open: boolean;\n  placement?: Placement;\n\n  setFloating: (node: HTMLElement | null) => void;\n  styles?: TooltipProps['styles'];\n  title?: ReactNode;\n  zIndex?: TooltipProps['zIndex'];\n};\n\nconst TooltipFloating = ({\n  open,\n  title,\n  placement,\n  floatingStyles,\n  setFloating,\n  floatingProps,\n  arrow,\n  arrowRef,\n  context,\n  hotkey,\n  hotkeyProps,\n\n  className,\n  classNames,\n  styles: styleProps,\n  zIndex,\n}: TooltipFloatingProps) => {\n  const { styles, cx } = useStyles();\n\n  const transformOrigin = useMemo(() => {\n    const basePlacement = String(placement || 'top').split('-')[0];\n    switch (basePlacement) {\n      case 'top': {\n        return 'bottom center';\n      }\n      case 'bottom': {\n        return 'top center';\n      }\n      case 'left': {\n        return 'center right';\n      }\n      case 'right': {\n        return 'center left';\n      }\n      default: {\n        return 'center';\n      }\n    }\n  }, [placement]);\n\n  const hasTransform = useDebounce(Boolean(floatingStyles?.transform), {\n    leading: false,\n    wait: 16,\n  });\n\n  const Motion = useMotionComponent();\n  return (\n    <AnimatePresence>\n      {open && title && (\n        <div\n          className={cx(\n            styles.tooltip,\n            hasTransform && styles.tooltipLayout,\n            classNames?.container,\n            classNames?.root,\n            className,\n          )}\n          key=\"tooltip\"\n          ref={setFloating as any}\n          role=\"tooltip\"\n          style={\n            styleProps?.root\n              ? {\n                  ...floatingStyles,\n                  zIndex,\n                  ...styleProps.container,\n                  ...styleProps.root,\n                }\n              : {\n                  ...floatingStyles,\n                  zIndex,\n                  ...styleProps?.container,\n                }\n          }\n          {...floatingProps}\n        >\n          <Motion.div\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.98 }}\n            initial={{ opacity: 0, scale: 0.96 }}\n            style={{ transformOrigin }}\n            transition={{ duration: 0.12, ease: [0.4, 0, 0.2, 1] }}\n          >\n            <div className={cx(styles.content, classNames?.content)} style={styleProps?.content}>\n              {hotkey ? (\n                <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>\n                  <span>{title}</span>\n                  <Hotkey inverseTheme keys={hotkey} {...hotkeyProps} />\n                </Flexbox>\n              ) : (\n                title\n              )}\n            </div>\n            {arrow && context && (\n              <FloatingArrow\n                className={cx(styles.arrow, classNames?.arrow)}\n                context={context}\n                height={6}\n                ref={arrowRef as any}\n                style={styleProps?.arrow}\n                width={12}\n              />\n            )}\n          </Motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport default TooltipFloating;\n"],"mappings":";;;;;;;;;;;;;AAuCA,MAAM,mBAAmB,EACvB,MACA,OACA,WACA,gBACA,aACA,eACA,gBACA,UACA,SACA,QACA,aAEA,WACA,YACA,QAAQ,YACR,aAC0B;CAC1B,MAAM,EAAE,QAAQ,OAAO,WAAW;CAElC,MAAM,kBAAkB,cAAc;AAEpC,UADsB,OAAO,aAAa,MAAM,CAAC,MAAM,IAAI,CAAC,IAC5D;GACE,KAAK,MACH,QAAO;GAET,KAAK,SACH,QAAO;GAET,KAAK,OACH,QAAO;GAET,KAAK,QACH,QAAO;GAET,QACE,QAAO;;IAGV,CAAC,UAAU,CAAC;CAEf,MAAM,eAAe,YAAY,QAAQ,gBAAgB,UAAU,EAAE;EACnE,SAAS;EACT,MAAM;EACP,CAAC;CAEF,MAAM,SAAS,oBAAoB;AACnC,QACE,oBAAC,6BACE,QAAQ,SACP,oBAAC;EACC,WAAW,GACT,OAAO,SACP,gBAAgB,OAAO,eACvB,YAAY,WACZ,YAAY,MACZ,UACD;EAED,KAAK;EACL,MAAK;EACL,OACE,YAAY,OACR;GACE,GAAG;GACH;GACA,GAAG,WAAW;GACd,GAAG,WAAW;GACf,GACD;GACE,GAAG;GACH;GACA,GAAG,YAAY;GAChB;EAEP,GAAI;YAEJ,qBAAC,OAAO;GACN,SAAS;IAAE,SAAS;IAAG,OAAO;IAAG;GACjC,MAAM;IAAE,SAAS;IAAG,OAAO;IAAM;GACjC,SAAS;IAAE,SAAS;IAAG,OAAO;IAAM;GACpC,OAAO,EAAE,iBAAiB;GAC1B,YAAY;IAAE,UAAU;IAAM,MAAM;KAAC;KAAK;KAAG;KAAK;KAAE;IAAE;cAEtD,oBAAC;IAAI,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;IAAE,OAAO,YAAY;cACzE,SACC,qBAACA;KAAQ,OAAO;KAAU,KAAK;KAAG;KAAW,SAAS;gBACpD,oBAAC,oBAAM,QAAa,EACpB,oBAACC;MAAO;MAAa,MAAM;MAAQ,GAAI;OAAe;MAC9C,GAEV;KAEE,EACLC,WAAS,WACR,oBAAC;IACC,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;IACrC;IACT,QAAQ;IACR,KAAK;IACL,OAAO,YAAY;IACnB,OAAO;KACP;IAEO;IA9CT,UA+CA,GAEQ;;AAItB,8BAAe"}
+{"version":3,"file":"TooltipFloating.mjs","names":["Flexbox","Hotkey","arrow"],"sources":["../../src/Tooltip/TooltipFloating.tsx"],"sourcesContent":["'use client';\n\nimport type { FloatingContext, Placement } from '@floating-ui/react';\nimport { FloatingArrow } from '@floating-ui/react';\nimport { useDebounce } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { AnimatePresence } from 'motion/react';\nimport type { CSSProperties, ReactNode, RefObject } from 'react';\nimport React, { useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Hotkey from '@/Hotkey';\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { styles } from './style';\nimport type { TooltipProps } from './type';\n\ntype TooltipFloatingProps = {\n  arrow?: boolean;\n  arrowRef?: RefObject<SVGSVGElement | null>;\n\n  className?: TooltipProps['className'];\n  classNames?: TooltipProps['classNames'];\n  context?: FloatingContext;\n\n  floatingProps?: Record<string, any>;\n  floatingStyles: CSSProperties;\n\n  hotkey?: TooltipProps['hotkey'];\n  hotkeyProps?: TooltipProps['hotkeyProps'];\n\n  open: boolean;\n  placement?: Placement;\n\n  setFloating: (node: HTMLElement | null) => void;\n  styles?: TooltipProps['styles'];\n  title?: ReactNode;\n  zIndex?: TooltipProps['zIndex'];\n};\n\nconst TooltipFloating = ({\n  open,\n  title,\n  placement,\n  floatingStyles,\n  setFloating,\n  floatingProps,\n  arrow,\n  arrowRef,\n  context,\n  hotkey,\n  hotkeyProps,\n\n  className,\n  classNames,\n  styles: styleProps,\n  zIndex,\n}: TooltipFloatingProps) => {\n  const transformOrigin = useMemo(() => {\n    const basePlacement = String(placement || 'top').split('-')[0];\n    switch (basePlacement) {\n      case 'top': {\n        return 'bottom center';\n      }\n      case 'bottom': {\n        return 'top center';\n      }\n      case 'left': {\n        return 'center right';\n      }\n      case 'right': {\n        return 'center left';\n      }\n      default: {\n        return 'center';\n      }\n    }\n  }, [placement]);\n\n  const hasTransform = useDebounce(Boolean(floatingStyles?.transform), {\n    leading: false,\n    wait: 16,\n  });\n\n  const Motion = useMotionComponent();\n  return (\n    <AnimatePresence>\n      {open && title && (\n        <div\n          className={cx(\n            styles.tooltip,\n            hasTransform && styles.tooltipLayout,\n            classNames?.container,\n            classNames?.root,\n            className,\n          )}\n          key=\"tooltip\"\n          ref={setFloating as any}\n          role=\"tooltip\"\n          style={\n            styleProps?.root\n              ? {\n                  ...floatingStyles,\n                  zIndex,\n                  ...styleProps.container,\n                  ...styleProps.root,\n                }\n              : {\n                  ...floatingStyles,\n                  zIndex,\n                  ...styleProps?.container,\n                }\n          }\n          {...floatingProps}\n        >\n          <Motion.div\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.98 }}\n            initial={{ opacity: 0, scale: 0.96 }}\n            style={{ transformOrigin }}\n            transition={{ duration: 0.12, ease: [0.4, 0, 0.2, 1] }}\n          >\n            <div className={cx(styles.content, classNames?.content)} style={styleProps?.content}>\n              {hotkey ? (\n                <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>\n                  <span>{title}</span>\n                  <Hotkey inverseTheme keys={hotkey} {...hotkeyProps} />\n                </Flexbox>\n              ) : (\n                title\n              )}\n            </div>\n            {arrow && context && (\n              <FloatingArrow\n                className={cx(styles.arrow, classNames?.arrow)}\n                context={context}\n                height={6}\n                ref={arrowRef as any}\n                style={styleProps?.arrow}\n                width={12}\n              />\n            )}\n          </Motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport default TooltipFloating;\n"],"mappings":";;;;;;;;;;;;;;AAwCA,MAAM,mBAAmB,EACvB,MACA,OACA,WACA,gBACA,aACA,eACA,gBACA,UACA,SACA,QACA,aAEA,WACA,YACA,QAAQ,YACR,aAC0B;CAC1B,MAAM,kBAAkB,cAAc;AAEpC,UADsB,OAAO,aAAa,MAAM,CAAC,MAAM,IAAI,CAAC,IAC5D;GACE,KAAK,MACH,QAAO;GAET,KAAK,SACH,QAAO;GAET,KAAK,OACH,QAAO;GAET,KAAK,QACH,QAAO;GAET,QACE,QAAO;;IAGV,CAAC,UAAU,CAAC;CAEf,MAAM,eAAe,YAAY,QAAQ,gBAAgB,UAAU,EAAE;EACnE,SAAS;EACT,MAAM;EACP,CAAC;CAEF,MAAM,SAAS,oBAAoB;AACnC,QACE,oBAAC,6BACE,QAAQ,SACP,oBAAC;EACC,WAAW,GACT,OAAO,SACP,gBAAgB,OAAO,eACvB,YAAY,WACZ,YAAY,MACZ,UACD;EAED,KAAK;EACL,MAAK;EACL,OACE,YAAY,OACR;GACE,GAAG;GACH;GACA,GAAG,WAAW;GACd,GAAG,WAAW;GACf,GACD;GACE,GAAG;GACH;GACA,GAAG,YAAY;GAChB;EAEP,GAAI;YAEJ,qBAAC,OAAO;GACN,SAAS;IAAE,SAAS;IAAG,OAAO;IAAG;GACjC,MAAM;IAAE,SAAS;IAAG,OAAO;IAAM;GACjC,SAAS;IAAE,SAAS;IAAG,OAAO;IAAM;GACpC,OAAO,EAAE,iBAAiB;GAC1B,YAAY;IAAE,UAAU;IAAM,MAAM;KAAC;KAAK;KAAG;KAAK;KAAE;IAAE;cAEtD,oBAAC;IAAI,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;IAAE,OAAO,YAAY;cACzE,SACC,qBAACA;KAAQ,OAAO;KAAU,KAAK;KAAG;KAAW,SAAS;gBACpD,oBAAC,oBAAM,QAAa,EACpB,oBAACC;MAAO;MAAa,MAAM;MAAQ,GAAI;OAAe;MAC9C,GAEV;KAEE,EACLC,WAAS,WACR,oBAAC;IACC,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;IACrC;IACT,QAAQ;IACR,KAAK;IACL,OAAO,YAAY;IACnB,OAAO;KACP;IAEO;IA9CT,UA+CA,GAEQ;;AAItB,8BAAe"}

package/es/Tooltip/TooltipPortal.mjs

@@ -1,6 +1,8 @@
 'use client';
 
+import ThemeProvider_default from "../ThemeProvider/ThemeProvider.mjs";
 import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 
 //#region src/Tooltip/TooltipPortal.tsx
@@ -28,7 +30,7 @@ const TooltipPortal = ({ children, root }) => {
 	});
 	if (!container && typeof document !== "undefined") setContainer(getOrCreateContainer(document.body));
 	if (!container) return null;
-	return createPortal(children, container);
+	return createPortal(/* @__PURE__ */ jsx(ThemeProvider_default, { children }), container);
 };
 var TooltipPortal_default = TooltipPortal;
 

package/es/Tooltip/TooltipPortal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipPortal.mjs","names":[],"sources":["../../src/Tooltip/TooltipPortal.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\nimport { createPortal } from 'react-dom';\n\ntype TooltipPortalProps = {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | null;\n};\n\nconst PORTAL_ATTR = 'data-lobe-ui-tooltip-portal';\n\n// Reuse one portal container per root (document.body by default).\nconst containerMap = new WeakMap<object, HTMLElement>();\n\nconst getOrCreateContainer = (root: HTMLElement | ShadowRoot): HTMLElement => {\n  const cached = containerMap.get(root);\n  if (cached && cached.isConnected) return cached;\n\n  const el = document.createElement('div');\n  el.setAttribute(PORTAL_ATTR, 'true');\n  root.append(el);\n  containerMap.set(root, el);\n  return el;\n};\n\nconst resolveRoot = (root?: HTMLElement | ShadowRoot | null): HTMLElement | ShadowRoot | null => {\n  if (root) return root;\n  if (typeof document === 'undefined') return null;\n  return document.body;\n};\n\nconst TooltipPortal = ({ children, root }: TooltipPortalProps) => {\n  const [container, setContainer] = useState<HTMLElement | null>(() => {\n    const resolved = resolveRoot(root);\n    if (!resolved) return null;\n    return getOrCreateContainer(resolved);\n  });\n\n  if (!container && typeof document !== 'undefined') {\n    setContainer(getOrCreateContainer(document.body));\n  }\n\n  if (!container) return null;\n  return createPortal(children, container);\n};\n\nexport default TooltipPortal;\n"],"mappings":";;;;;;AAWA,MAAM,cAAc;AAGpB,MAAM,+BAAe,IAAI,SAA8B;AAEvD,MAAM,wBAAwB,SAAgD;CAC5E,MAAM,SAAS,aAAa,IAAI,KAAK;AACrC,KAAI,UAAU,OAAO,YAAa,QAAO;CAEzC,MAAM,KAAK,SAAS,cAAc,MAAM;AACxC,IAAG,aAAa,aAAa,OAAO;AACpC,MAAK,OAAO,GAAG;AACf,cAAa,IAAI,MAAM,GAAG;AAC1B,QAAO;;AAGT,MAAM,eAAe,SAA4E;AAC/F,KAAI,KAAM,QAAO;AACjB,KAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAO,SAAS;;AAGlB,MAAM,iBAAiB,EAAE,UAAU,WAA+B;CAChE,MAAM,CAAC,WAAW,gBAAgB,eAAmC;EACnE,MAAM,WAAW,YAAY,KAAK;AAClC,MAAI,CAAC,SAAU,QAAO;AACtB,SAAO,qBAAqB,SAAS;GACrC;AAEF,KAAI,CAAC,aAAa,OAAO,aAAa,YACpC,cAAa,qBAAqB,SAAS,KAAK,CAAC;AAGnD,KAAI,CAAC,UAAW,QAAO;AACvB,QAAO,aAAa,UAAU,UAAU;;AAG1C,4BAAe"}
+{"version":3,"file":"TooltipPortal.mjs","names":["ThemeProvider"],"sources":["../../src/Tooltip/TooltipPortal.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport ThemeProvider from '@/ThemeProvider';\n\ntype TooltipPortalProps = {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | null;\n};\n\nconst PORTAL_ATTR = 'data-lobe-ui-tooltip-portal';\n\n// Reuse one portal container per root (document.body by default).\nconst containerMap = new WeakMap<object, HTMLElement>();\n\nconst getOrCreateContainer = (root: HTMLElement | ShadowRoot): HTMLElement => {\n  const cached = containerMap.get(root);\n  if (cached && cached.isConnected) return cached;\n\n  const el = document.createElement('div');\n  el.setAttribute(PORTAL_ATTR, 'true');\n  root.append(el);\n  containerMap.set(root, el);\n  return el;\n};\n\nconst resolveRoot = (root?: HTMLElement | ShadowRoot | null): HTMLElement | ShadowRoot | null => {\n  if (root) return root;\n  if (typeof document === 'undefined') return null;\n  return document.body;\n};\n\nconst TooltipPortal = ({ children, root }: TooltipPortalProps) => {\n  const [container, setContainer] = useState<HTMLElement | null>(() => {\n    const resolved = resolveRoot(root);\n    if (!resolved) return null;\n    return getOrCreateContainer(resolved);\n  });\n\n  if (!container && typeof document !== 'undefined') {\n    setContainer(getOrCreateContainer(document.body));\n  }\n\n  if (!container) return null;\n  return createPortal(<ThemeProvider>{children}</ThemeProvider>, container);\n};\n\nexport default TooltipPortal;\n"],"mappings":";;;;;;;;AAaA,MAAM,cAAc;AAGpB,MAAM,+BAAe,IAAI,SAA8B;AAEvD,MAAM,wBAAwB,SAAgD;CAC5E,MAAM,SAAS,aAAa,IAAI,KAAK;AACrC,KAAI,UAAU,OAAO,YAAa,QAAO;CAEzC,MAAM,KAAK,SAAS,cAAc,MAAM;AACxC,IAAG,aAAa,aAAa,OAAO;AACpC,MAAK,OAAO,GAAG;AACf,cAAa,IAAI,MAAM,GAAG;AAC1B,QAAO;;AAGT,MAAM,eAAe,SAA4E;AAC/F,KAAI,KAAM,QAAO;AACjB,KAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAO,SAAS;;AAGlB,MAAM,iBAAiB,EAAE,UAAU,WAA+B;CAChE,MAAM,CAAC,WAAW,gBAAgB,eAAmC;EACnE,MAAM,WAAW,YAAY,KAAK;AAClC,MAAI,CAAC,SAAU,QAAO;AACtB,SAAO,qBAAqB,SAAS;GACrC;AAEF,KAAI,CAAC,aAAa,OAAO,aAAa,YACpC,cAAa,qBAAqB,SAAS,KAAK,CAAC;AAGnD,KAAI,CAAC,UAAW,QAAO;AACvB,QAAO,aAAa,oBAACA,yBAAe,WAAyB,EAAE,UAAU;;AAG3E,4BAAe"}

package/es/Tooltip/style.mjs

@@ -1,10 +1,10 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/Tooltip/style.ts
-const useStyles = createStyles(({ css: css$1, token }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		arrow: css$1`
-      fill: ${token.colorText};
+      fill: ${cssVar$1.colorText};
     `,
 		content: css$1`
       display: flex;
@@ -13,12 +13,12 @@ const useStyles = createStyles(({ css: css$1, token }) => {
 
       min-height: unset;
       padding: 8px;
-      border-radius: ${token.borderRadiusSM}px;
+      border-radius: ${cssVar$1.borderRadiusSM};
 
-      color: ${token.colorBgLayout};
+      color: ${cssVar$1.colorBgLayout};
       word-break: normal;
 
-      background-color: ${token.colorText};
+      background-color: ${cssVar$1.colorTextBase};
     `,
 		tooltip: css$1`
       pointer-events: none;
@@ -35,5 +35,5 @@ const useStyles = createStyles(({ css: css$1, token }) => {
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map