@lobehub/ui 4.3.2 → 4.3.3

package/es/Checkbox/style.mjs

@@ -1,28 +1,27 @@
-import { createStyles } from "antd-style";
-import { readableColor } from "polished";
+import { createStaticStyles } from "antd-style";
 
 //#region src/Checkbox/style.ts
-const useStyles = createStyles(({ css: css$1, token }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		checked: css$1`
-      border-color: ${token.colorPrimary};
-      color: ${readableColor(token.colorPrimary)};
-      background-color: ${token.colorPrimary};
+      border-color: ${cssVar$1.colorPrimary};
+      color: ${cssVar$1.colorBgLayout};
+      background-color: ${cssVar$1.colorPrimary};
     `,
 		disabled: css$1`
       cursor: not-allowed;
 
-      border-color: ${token.colorFill};
+      border-color: ${cssVar$1.colorFill};
 
-      color: ${readableColor(token.colorTextQuaternary)};
+      color: ${cssVar$1.colorText};
 
       opacity: 0.25;
-      background-color: ${token.colorFill};
+      background-color: ${cssVar$1.colorFill};
     `,
 		indeterminate: css$1`
-      border-color: ${token.colorPrimary};
-      color: ${readableColor(token.colorPrimary)};
-      background-color: ${token.colorPrimary};
+      border-color: ${cssVar$1.colorPrimary};
+      color: ${cssVar$1.colorBgLayout};
+      background-color: ${cssVar$1.colorPrimary};
     `,
 		root: css$1`
       cursor: pointer;
@@ -32,5 +31,5 @@ const useStyles = createStyles(({ css: css$1, token }) => {
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/Checkbox/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Checkbox/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\nimport { readableColor } from 'polished';\n\nexport const useStyles = createStyles(({ css, token }) => {\n  return {\n    checked: css`\n      border-color: ${token.colorPrimary};\n      color: ${readableColor(token.colorPrimary)};\n      background-color: ${token.colorPrimary};\n    `,\n    disabled: css`\n      cursor: not-allowed;\n\n      border-color: ${token.colorFill};\n\n      color: ${readableColor(token.colorTextQuaternary)};\n\n      opacity: 0.25;\n      background-color: ${token.colorFill};\n    `,\n    indeterminate: css`\n      border-color: ${token.colorPrimary};\n      color: ${readableColor(token.colorPrimary)};\n      background-color: ${token.colorPrimary};\n    `,\n    root: css`\n      cursor: pointer;\n      display: inline-flex;\n    `,\n  };\n});\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY;AACxD,QAAO;EACL,SAAS,KAAG;sBACM,MAAM,aAAa;eAC1B,cAAc,MAAM,aAAa,CAAC;0BACvB,MAAM,aAAa;;EAEzC,UAAU,KAAG;;;sBAGK,MAAM,UAAU;;eAEvB,cAAc,MAAM,oBAAoB,CAAC;;;0BAG9B,MAAM,UAAU;;EAEtC,eAAe,KAAG;sBACA,MAAM,aAAa;eAC1B,cAAc,MAAM,aAAa,CAAC;0BACvB,MAAM,aAAa;;EAEzC,MAAM,KAAG;;;;EAIV;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/Checkbox/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    checked: css`\n      border-color: ${cssVar.colorPrimary};\n      color: ${cssVar.colorBgLayout};\n      background-color: ${cssVar.colorPrimary};\n    `,\n    disabled: css`\n      cursor: not-allowed;\n\n      border-color: ${cssVar.colorFill};\n\n      color: ${cssVar.colorText};\n\n      opacity: 0.25;\n      background-color: ${cssVar.colorFill};\n    `,\n    indeterminate: css`\n      border-color: ${cssVar.colorPrimary};\n      color: ${cssVar.colorBgLayout};\n      background-color: ${cssVar.colorPrimary};\n    `,\n    root: css`\n      cursor: pointer;\n      display: inline-flex;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,SAAS,KAAG;sBACMA,SAAO,aAAa;eAC3BA,SAAO,cAAc;0BACVA,SAAO,aAAa;;EAE1C,UAAU,KAAG;;;sBAGKA,SAAO,UAAU;;eAExBA,SAAO,UAAU;;;0BAGNA,SAAO,UAAU;;EAEvC,eAAe,KAAG;sBACAA,SAAO,aAAa;eAC3BA,SAAO,cAAc;0BACVA,SAAO,aAAa;;EAE1C,MAAM,KAAG;;;;EAIV;EACD"}

package/es/CodeEditor/CodeEditor.d.mts

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

package/es/CodeEditor/CodeEditor.mjs

@@ -1,30 +1,22 @@
 'use client';
 
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
+import { styles, variants } from "./style.mjs";
 import SyntaxHighlighter_default from "../Highlighter/SyntaxHighlighter/index.mjs";
-import { memo, useMemo } from "react";
+import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
 import useMergeState from "use-merge-value";
-import { cva } from "class-variance-authority";
 
 //#region src/CodeEditor/CodeEditor.tsx
 const CodeEditor = memo(({ autoFocus, classNames, styles: customStyles, defaultValue = "", onChange, placeholder = "", style, className, onValueChange, value, language = "markdown", variant = "borderless", width, height, flex, ref, ...rest }) => {
-	const { styles, cx, theme } = useStyles();
 	const [code, setCode] = useMergeState(defaultValue, {
 		defaultValue,
 		onChange: onValueChange,
 		value
 	});
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: cx(useMemo(() => cva(styles.root, {
-			defaultVariants: { variant: "borderless" },
-			variants: { variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless
-			} }
-		}), [styles])({ variant }), className),
+		className: cx(variants({ variant }), className),
 		flex,
 		height,
 		style,
@@ -37,7 +29,7 @@ const CodeEditor = memo(({ autoFocus, classNames, styles: customStyles, defaultV
 			children: value
 		}) : /* @__PURE__ */ jsx("pre", {
 			className: cx(styles.highlight, classNames?.highlight),
-			style: { color: theme.colorTextDescription },
+			style: { color: cssVar.colorTextDescription },
 			children: placeholder || " "
 		}), /* @__PURE__ */ jsx("textarea", {
 			autoCapitalize: "off",

package/es/CodeEditor/CodeEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.mjs","names":["Flexbox","SyntaxHighlighter"],"sources":["../../src/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { useStyles } from '@/CodeEditor/style';\nimport { Flexbox } from '@/Flex';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\n\nimport { CodeEditorProps } from './type';\n\nconst CodeEditor = memo<CodeEditorProps>(\n  ({\n    autoFocus,\n    classNames,\n    styles: customStyles,\n    defaultValue = '',\n    onChange,\n    placeholder = '',\n    style,\n    className,\n    onValueChange,\n    value,\n    language = 'markdown',\n    variant = 'borderless',\n    width,\n    height,\n    flex,\n    ref,\n    ...rest\n  }) => {\n    const { styles, cx, theme } = useStyles();\n    const [code, setCode] = useMergeState(defaultValue, {\n      defaultValue,\n      onChange: onValueChange,\n      value,\n    });\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            variant: 'borderless',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    return (\n      <Flexbox\n        className={cx(variants({ variant }), className)}\n        flex={flex}\n        height={height}\n        style={style}\n        width={width}\n      >\n        {value ? (\n          <SyntaxHighlighter\n            className={cx(styles.highlight, classNames?.highlight)}\n            language={language}\n            style={customStyles?.highlight}\n            variant={variant}\n          >\n            {value}\n          </SyntaxHighlighter>\n        ) : (\n          <pre\n            className={cx(styles.highlight, classNames?.highlight)}\n            style={{\n              color: theme.colorTextDescription,\n            }}\n          >\n            {placeholder || ' '}\n          </pre>\n        )}\n\n        <textarea\n          autoCapitalize=\"off\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoFocus={autoFocus}\n          className={cx(styles.textarea, classNames?.textarea)}\n          data-gramm={false}\n          onChange={(e) => {\n            onChange?.(e);\n            setCode(e.target.value);\n          }}\n          ref={ref}\n          style={customStyles?.textarea}\n          value={code}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nCodeEditor.displayName = 'CodeEditor';\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,aAAa,MAChB,EACC,WACA,YACA,QAAQ,cACR,eAAe,IACf,UACA,cAAc,IACd,OACA,WACA,eACA,OACA,WAAW,YACX,UAAU,cACV,OACA,QACA,MACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,IAAI,UAAU,WAAW;CACzC,MAAM,CAAC,MAAM,WAAW,cAAc,cAAc;EAClD;EACA,UAAU;EACV;EACD,CAAC;AAqBF,QACE,qBAACA;EACC,WAAW,GArBE,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB,EACf,SAAS,cACV;GAED,UAAU,EACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB,EACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAI0B,EAAE,SAAS,CAAC,EAAE,UAAU;EACzC;EACE;EACD;EACA;aAEN,QACC,oBAACC;GACC,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GAC5C;GACV,OAAO,cAAc;GACZ;aAER;IACiB,GAEpB,oBAAC;GACC,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GACtD,OAAO,EACL,OAAO,MAAM,sBACd;aAEA,eAAe;IACZ,EAGR,oBAAC;GACC,gBAAe;GACf,cAAa;GACb,aAAY;GACD;GACX,WAAW,GAAG,OAAO,UAAU,YAAY,SAAS;GACpD,cAAY;GACZ,WAAW,MAAM;AACf,eAAW,EAAE;AACb,YAAQ,EAAE,OAAO,MAAM;;GAEpB;GACL,OAAO,cAAc;GACrB,OAAO;GACP,GAAI;IACJ;GACM;EAGf;AAED,WAAW,cAAc;AAEzB,yBAAe"}
+{"version":3,"file":"CodeEditor.mjs","names":["Flexbox","SyntaxHighlighter"],"sources":["../../src/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { styles, variants } from '@/CodeEditor/style';\nimport { Flexbox } from '@/Flex';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\n\nimport { CodeEditorProps } from './type';\n\nconst CodeEditor = memo<CodeEditorProps>(\n  ({\n    autoFocus,\n    classNames,\n    styles: customStyles,\n    defaultValue = '',\n    onChange,\n    placeholder = '',\n    style,\n    className,\n    onValueChange,\n    value,\n    language = 'markdown',\n    variant = 'borderless',\n    width,\n    height,\n    flex,\n    ref,\n    ...rest\n  }) => {\n    const [code, setCode] = useMergeState(defaultValue, {\n      defaultValue,\n      onChange: onValueChange,\n      value,\n    });\n\n    return (\n      <Flexbox\n        className={cx(variants({ variant }), className)}\n        flex={flex}\n        height={height}\n        style={style}\n        width={width}\n      >\n        {value ? (\n          <SyntaxHighlighter\n            className={cx(styles.highlight, classNames?.highlight)}\n            language={language}\n            style={customStyles?.highlight}\n            variant={variant}\n          >\n            {value}\n          </SyntaxHighlighter>\n        ) : (\n          <pre\n            className={cx(styles.highlight, classNames?.highlight)}\n            style={{\n              color: cssVar.colorTextDescription,\n            }}\n          >\n            {placeholder || ' '}\n          </pre>\n        )}\n\n        <textarea\n          autoCapitalize=\"off\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoFocus={autoFocus}\n          className={cx(styles.textarea, classNames?.textarea)}\n          data-gramm={false}\n          onChange={(e) => {\n            onChange?.(e);\n            setCode(e.target.value);\n          }}\n          ref={ref}\n          style={customStyles?.textarea}\n          value={code}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nCodeEditor.displayName = 'CodeEditor';\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,aAAa,MAChB,EACC,WACA,YACA,QAAQ,cACR,eAAe,IACf,UACA,cAAc,IACd,OACA,WACA,eACA,OACA,WAAW,YACX,UAAU,cACV,OACA,QACA,MACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,cAAc,cAAc;EAClD;EACA,UAAU;EACV;EACD,CAAC;AAEF,QACE,qBAACA;EACC,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;EACzC;EACE;EACD;EACA;aAEN,QACC,oBAACC;GACC,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GAC5C;GACV,OAAO,cAAc;GACZ;aAER;IACiB,GAEpB,oBAAC;GACC,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GACtD,OAAO,EACL,OAAO,OAAO,sBACf;aAEA,eAAe;IACZ,EAGR,oBAAC;GACC,gBAAe;GACf,cAAa;GACb,aAAY;GACD;GACX,WAAW,GAAG,OAAO,UAAU,YAAY,SAAS;GACpD,cAAY;GACZ,WAAW,MAAM;AACf,eAAW,EAAE;AACb,YAAQ,EAAE,OAAO,MAAM;;GAEpB;GACL,OAAO,cAAc;GACrB,OAAO;GACP,GAAI;IACJ;GACM;EAGf;AAED,WAAW,cAAc;AAEzB,yBAAe"}

package/es/CodeEditor/style.mjs

@@ -1,9 +1,11 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/CodeEditor/style.ts
-const useStyles = createStyles(({ stylish, cx: cx$1, css: css$1, token }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
-		borderless: cx$1(stylish.variantBorderlessWithoutHover, css$1`
+		borderless: cx(staticStylish.variantBorderlessWithoutHover, css$1`
         border-radius: 0;
 
         pre,
@@ -11,11 +13,11 @@ const useStyles = createStyles(({ stylish, cx: cx$1, css: css$1, token }) => {
           padding: 0;
         }
       `),
-		filled: stylish.variantFilledWithoutHover,
+		filled: staticStylish.variantFilledWithoutHover,
 		highlight: css$1`
       pointer-events: none;
     `,
-		outlined: stylish.variantOutlinedWithoutHover,
+		outlined: staticStylish.variantOutlinedWithoutHover,
 		root: css$1`
       position: relative;
 
@@ -23,11 +25,10 @@ const useStyles = createStyles(({ stylish, cx: cx$1, css: css$1, token }) => {
 
       width: 100%;
       height: fit-content;
+      border-radius: ${cssVar$1.borderRadius};
 
       font-size: 12px;
 
-      border-radius: ${token.borderRadius}px;
-
       pre,
       textarea {
         margin: 0;
@@ -39,7 +40,7 @@ const useStyles = createStyles(({ stylish, cx: cx$1, css: css$1, token }) => {
       code {
         overflow: hidden;
 
-        font-family: ${token.fontFamilyCode};
+        font-family: ${cssVar$1.fontFamilyCode};
         font-size: inherit;
         line-height: inherit;
         word-break: inherit;
@@ -60,17 +61,17 @@ const useStyles = createStyles(({ stylish, cx: cx$1, css: css$1, token }) => {
       width: 100%;
       height: 100%;
       padding: 0;
+      border: none;
 
       color: transparent;
       text-align: start;
 
       background: transparent;
-      border: none;
       outline: none;
-      caret-color: ${token.colorText};
+      caret-color: ${cssVar$1.colorText};
 
       &::placeholder {
-        color: ${token.colorTextQuaternary};
+        color: ${cssVar$1.colorTextQuaternary};
       }
 
       &:focus {
@@ -81,7 +82,15 @@ const useStyles = createStyles(({ stylish, cx: cx$1, css: css$1, token }) => {
     `
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: { variant: "borderless" },
+	variants: { variant: {
+		filled: styles.filled,
+		outlined: styles.outlined,
+		borderless: styles.borderless
+	} }
+});
 
 //#endregion
-export { useStyles };
+export { styles, variants };
 //# sourceMappingURL=style.mjs.map

package/es/CodeEditor/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/CodeEditor/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ stylish, cx, css, token }) => {\n  return {\n    borderless: cx(\n      stylish.variantBorderlessWithoutHover,\n      css`\n        border-radius: 0;\n\n        pre,\n        textarea {\n          padding: 0;\n        }\n      `,\n    ),\n    filled: stylish.variantFilledWithoutHover,\n    highlight: css`\n      pointer-events: none;\n    `,\n    outlined: stylish.variantOutlinedWithoutHover,\n    root: css`\n      position: relative;\n\n      overflow: hidden auto;\n\n      width: 100%;\n      height: fit-content;\n\n      font-size: 12px;\n\n      border-radius: ${token.borderRadius}px;\n\n      pre,\n      textarea {\n        margin: 0;\n        padding: 16px;\n      }\n\n      textarea,\n      pre,\n      code {\n        overflow: hidden;\n\n        font-family: ${token.fontFamilyCode};\n        font-size: inherit;\n        line-height: inherit;\n        word-break: inherit;\n        word-wrap: break-word;\n        white-space: pre-wrap;\n      }\n    `,\n    textarea: css`\n      resize: none;\n\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n\n      overflow: hidden;\n\n      box-sizing: border-box;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n\n      color: transparent;\n      text-align: start;\n\n      background: transparent;\n      border: none;\n      outline: none;\n      caret-color: ${token.colorText};\n\n      &::placeholder {\n        color: ${token.colorTextQuaternary};\n      }\n\n      &:focus {\n        border: none;\n        outline: none;\n        box-shadow: none;\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,SAAS,UAAI,YAAK,YAAY;AACrE,QAAO;EACL,YAAYA,KACV,QAAQ,+BACR,KAAG;;;;;;;QAQJ;EACD,QAAQ,QAAQ;EAChB,WAAW,KAAG;;;EAGd,UAAU,QAAQ;EAClB,MAAM,KAAG;;;;;;;;;;uBAUU,MAAM,aAAa;;;;;;;;;;;;;uBAanB,MAAM,eAAe;;;;;;;;EAQxC,UAAU,KAAG;;;;;;;;;;;;;;;;;;;;qBAoBI,MAAM,UAAU;;;iBAGpB,MAAM,oBAAoB;;;;;;;;;EASxC;EACD"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/CodeEditor/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: cx(\n      lobeStaticStylish.variantBorderlessWithoutHover,\n      css`\n        border-radius: 0;\n\n        pre,\n        textarea {\n          padding: 0;\n        }\n      `,\n    ),\n    filled: lobeStaticStylish.variantFilledWithoutHover,\n    highlight: css`\n      pointer-events: none;\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    root: css`\n      position: relative;\n\n      overflow: hidden auto;\n\n      width: 100%;\n      height: fit-content;\n      border-radius: ${cssVar.borderRadius};\n\n      font-size: 12px;\n\n      pre,\n      textarea {\n        margin: 0;\n        padding: 16px;\n      }\n\n      textarea,\n      pre,\n      code {\n        overflow: hidden;\n\n        font-family: ${cssVar.fontFamilyCode};\n        font-size: inherit;\n        line-height: inherit;\n        word-break: inherit;\n        word-wrap: break-word;\n        white-space: pre-wrap;\n      }\n    `,\n    textarea: css`\n      resize: none;\n\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n\n      overflow: hidden;\n\n      box-sizing: border-box;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      border: none;\n\n      color: transparent;\n      text-align: start;\n\n      background: transparent;\n      outline: none;\n      caret-color: ${cssVar.colorText};\n\n      &::placeholder {\n        color: ${cssVar.colorTextQuaternary};\n      }\n\n      &:focus {\n        border: none;\n        outline: none;\n        box-shadow: none;\n      }\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,YAAY,GACVA,cAAkB,+BAClB,KAAG;;;;;;;QAQJ;EACD,QAAQA,cAAkB;EAC1B,WAAW,KAAG;;;EAGd,UAAUA,cAAkB;EAC5B,MAAM,KAAG;;;;;;;uBAOUC,SAAO,aAAa;;;;;;;;;;;;;;;uBAepBA,SAAO,eAAe;;;;;;;;EAQzC,UAAU,KAAG;;;;;;;;;;;;;;;;;;;;qBAoBIA,SAAO,UAAU;;;iBAGrBA,SAAO,oBAAoB;;;;;;;;;EASzC;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,SAAS,cACV;CAED,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,UAAU,OAAO;EACjB,YAAY,OAAO;EACpB,EACF;CAEF,CAAC"}

package/es/Collapse/Collapse.d.mts

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

package/es/Collapse/Collapse.mjs

@@ -2,42 +2,16 @@
 
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Icon_default from "../Icon/Icon.mjs";
-import { DEFAULT_PADDING, getPadding, useStyles } from "./style.mjs";
+import { DEFAULT_PADDING, getPadding, styles, variants } from "./style.mjs";
 import { isValidElement, memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Collapse, ConfigProvider } from "antd";
-import { cva } from "class-variance-authority";
+import { cx, useThemeMode } from "antd-style";
 import { ChevronDown } from "lucide-react";
 
 //#region src/Collapse/Collapse.tsx
 const Collapse$1 = memo(({ style, variant = "filled", gap = 0, className, padding = DEFAULT_PADDING, size, collapsible = true, items, styles: customStyles, classNames, ref, ...rest }) => {
-	const { cx, styles } = useStyles();
-	const variants = useMemo(() => cva(styles.root, {
-		compoundVariants: [{
-			class: styles.gapOutlined,
-			gap: true,
-			variant: "outlined"
-		}],
-		defaultVariants: {
-			collapsible: true,
-			gap: false
-		},
-		variants: {
-			variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless
-			},
-			gap: {
-				false: null,
-				true: styles.gapRoot
-			},
-			collapsible: {
-				false: styles.hideCollapsibleIcon,
-				true: null
-			}
-		}
-	}), [styles]);
+	const { isDarkMode } = useThemeMode();
 	const antdItems = useMemo(() => items.map(({ icon, desc, label, ...itemRest }) => {
 		let content = /* @__PURE__ */ jsx("div", {
 			className: cx(styles.title, !icon && !desc && classNames?.header, classNames?.title),
@@ -85,6 +59,7 @@ const Collapse$1 = memo(({ style, variant = "filled", gap = 0, className, paddin
 			className: cx(variants({
 				collapsible,
 				gap: !!gap,
+				isDarkMode,
 				variant
 			}), className),
 			collapsible: collapsible ? "header" : "icon",

package/es/Collapse/Collapse.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.mjs","names":["Collapse","Flexbox","Icon","AntdCollapse"],"sources":["../../src/Collapse/Collapse.tsx"],"sourcesContent":["'use client';\n\nimport { Collapse as AntdCollapse, ConfigProvider } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\nimport { isValidElement, memo, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { DEFAULT_PADDING, getPadding, useStyles } from './style';\nimport type { CollapseProps } from './type';\n\nconst Collapse = memo<CollapseProps>(\n  ({\n    style,\n    variant = 'filled',\n    gap = 0,\n    className,\n    padding = DEFAULT_PADDING,\n    size,\n    collapsible = true,\n    items,\n    styles: customStyles,\n    classNames,\n    ref,\n    ...rest\n  }) => {\n    const { cx, styles } = useStyles();\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          compoundVariants: [\n            {\n              class: styles.gapOutlined,\n              gap: true,\n              variant: 'outlined',\n            },\n          ],\n          defaultVariants: {\n            collapsible: true,\n            gap: 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            gap: {\n              false: null,\n              true: styles.gapRoot,\n            },\n            collapsible: {\n              false: styles.hideCollapsibleIcon,\n              true: null,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const antdItems = useMemo(\n      () =>\n        items.map(({ icon, desc, label, ...itemRest }) => {\n          let content = (\n            <div\n              className={cx(styles.title, !icon && !desc && classNames?.header, classNames?.title)}\n              style={{\n                ...(!icon && !desc ? customStyles?.header : {}),\n                ...customStyles?.title,\n              }}\n            >\n              {label}\n            </div>\n          );\n\n          if (icon) {\n            content = (\n              <Flexbox\n                className={cx(styles.title, !desc && classNames?.header)}\n                gap={8}\n                horizontal\n                style={desc ? undefined : customStyles?.header}\n              >\n                {isValidElement(icon) ? icon : <Icon icon={icon} size={{ size: '1.1em' }} />}\n                {content}\n              </Flexbox>\n            );\n          }\n\n          if (desc) {\n            content = (\n              <Flexbox className={classNames?.header} style={customStyles?.header}>\n                {content}\n                <div className={cx(styles.desc, classNames?.desc)} style={customStyles?.desc}>\n                  {desc}\n                </div>\n              </Flexbox>\n            );\n          }\n\n          return {\n            label: content,\n            ...itemRest,\n          };\n        }),\n      [items, classNames, customStyles, styles],\n    );\n\n    return (\n      <ConfigProvider\n        theme={{\n          components: {\n            Collapse: {\n              contentPadding: getPadding(typeof padding === 'object' ? padding?.body : padding),\n              headerPadding: getPadding(typeof padding === 'object' ? padding?.header : padding),\n            },\n          },\n        }}\n      >\n        <AntdCollapse\n          className={cx(variants({ collapsible, gap: !!gap, variant }), className)}\n          collapsible={collapsible ? 'header' : 'icon'}\n          expandIcon={({ isActive }) => (\n            <Icon\n              className={styles.icon}\n              icon={ChevronDown}\n              size={16}\n              style={{ rotate: isActive ? undefined : '-90deg' }}\n            />\n          )}\n          ghost\n          items={antdItems}\n          ref={ref}\n          size={size}\n          style={{\n            gap,\n            ...style,\n          }}\n          {...rest}\n        />\n      </ConfigProvider>\n    );\n  },\n);\n\nCollapse.displayName = 'Collapse';\n\nexport default Collapse;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,aAAW,MACd,EACC,OACA,UAAU,UACV,MAAM,GACN,WACA,UAAU,iBACV,MACA,cAAc,MACd,OACA,QAAQ,cACR,YACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;CAElC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,kBAAkB,CAChB;GACE,OAAO,OAAO;GACd,KAAK;GACL,SAAS;GACV,CACF;EACD,iBAAiB;GACf,aAAa;GACb,KAAK;GACN;EAED,UAAU;GACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB;GACD,KAAK;IACH,OAAO;IACP,MAAM,OAAO;IACd;GACD,aAAa;IACX,OAAO,OAAO;IACd,MAAM;IACP;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,YAAY,cAEd,MAAM,KAAK,EAAE,MAAM,MAAM,OAAO,GAAG,eAAe;EAChD,IAAI,UACF,oBAAC;GACC,WAAW,GAAG,OAAO,OAAO,CAAC,QAAQ,CAAC,QAAQ,YAAY,QAAQ,YAAY,MAAM;GACpF,OAAO;IACL,GAAI,CAAC,QAAQ,CAAC,OAAO,cAAc,SAAS,EAAE;IAC9C,GAAG,cAAc;IAClB;aAEA;IACG;AAGR,MAAI,KACF,WACE,qBAACC;GACC,WAAW,GAAG,OAAO,OAAO,CAAC,QAAQ,YAAY,OAAO;GACxD,KAAK;GACL;GACA,OAAO,OAAO,SAAY,cAAc;cAEvC,eAAe,KAAK,GAAG,OAAO,oBAACC;IAAW;IAAM,MAAM,EAAE,MAAM,SAAS;KAAI,EAC3E;IACO;AAId,MAAI,KACF,WACE,qBAACD;GAAQ,WAAW,YAAY;GAAQ,OAAO,cAAc;cAC1D,SACD,oBAAC;IAAI,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;IAAE,OAAO,cAAc;cACrE;KACG;IACE;AAId,SAAO;GACL,OAAO;GACP,GAAG;GACJ;GACD,EACJ;EAAC;EAAO;EAAY;EAAc;EAAO,CAC1C;AAED,QACE,oBAAC;EACC,OAAO,EACL,YAAY,EACV,UAAU;GACR,gBAAgB,WAAW,OAAO,YAAY,WAAW,SAAS,OAAO,QAAQ;GACjF,eAAe,WAAW,OAAO,YAAY,WAAW,SAAS,SAAS,QAAQ;GACnF,EACF,EACF;YAED,oBAACE;GACC,WAAW,GAAG,SAAS;IAAE;IAAa,KAAK,CAAC,CAAC;IAAK;IAAS,CAAC,EAAE,UAAU;GACxE,aAAa,cAAc,WAAW;GACtC,aAAa,EAAE,eACb,oBAACD;IACC,WAAW,OAAO;IAClB,MAAM;IACN,MAAM;IACN,OAAO,EAAE,QAAQ,WAAW,SAAY,UAAU;KAClD;GAEJ;GACA,OAAO;GACF;GACC;GACN,OAAO;IACL;IACA,GAAG;IACJ;GACD,GAAI;IACJ;GACa;EAGtB;AAED,WAAS,cAAc;AAEvB,uBAAeF"}
+{"version":3,"file":"Collapse.mjs","names":["Collapse","Flexbox","Icon","AntdCollapse"],"sources":["../../src/Collapse/Collapse.tsx"],"sourcesContent":["'use client';\n\nimport { Collapse as AntdCollapse, ConfigProvider } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { ChevronDown } from 'lucide-react';\nimport { isValidElement, memo, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { DEFAULT_PADDING, getPadding, styles, variants } from './style';\nimport type { CollapseProps } from './type';\n\nconst Collapse = memo<CollapseProps>(\n  ({\n    style,\n    variant = 'filled',\n    gap = 0,\n    className,\n    padding = DEFAULT_PADDING,\n    size,\n    collapsible = true,\n    items,\n    styles: customStyles,\n    classNames,\n    ref,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n\n    const antdItems = useMemo(\n      () =>\n        items.map(({ icon, desc, label, ...itemRest }) => {\n          let content = (\n            <div\n              className={cx(styles.title, !icon && !desc && classNames?.header, classNames?.title)}\n              style={{\n                ...(!icon && !desc ? customStyles?.header : {}),\n                ...customStyles?.title,\n              }}\n            >\n              {label}\n            </div>\n          );\n\n          if (icon) {\n            content = (\n              <Flexbox\n                className={cx(styles.title, !desc && classNames?.header)}\n                gap={8}\n                horizontal\n                style={desc ? undefined : customStyles?.header}\n              >\n                {isValidElement(icon) ? icon : <Icon icon={icon} size={{ size: '1.1em' }} />}\n                {content}\n              </Flexbox>\n            );\n          }\n\n          if (desc) {\n            content = (\n              <Flexbox className={classNames?.header} style={customStyles?.header}>\n                {content}\n                <div className={cx(styles.desc, classNames?.desc)} style={customStyles?.desc}>\n                  {desc}\n                </div>\n              </Flexbox>\n            );\n          }\n\n          return {\n            label: content,\n            ...itemRest,\n          };\n        }),\n      [items, classNames, customStyles, styles],\n    );\n\n    return (\n      <ConfigProvider\n        theme={{\n          components: {\n            Collapse: {\n              contentPadding: getPadding(typeof padding === 'object' ? padding?.body : padding),\n              headerPadding: getPadding(typeof padding === 'object' ? padding?.header : padding),\n            },\n          },\n        }}\n      >\n        <AntdCollapse\n          className={cx(variants({ collapsible, gap: !!gap, isDarkMode, variant }), className)}\n          collapsible={collapsible ? 'header' : 'icon'}\n          expandIcon={({ isActive }) => (\n            <Icon\n              className={styles.icon}\n              icon={ChevronDown}\n              size={16}\n              style={{ rotate: isActive ? undefined : '-90deg' }}\n            />\n          )}\n          ghost\n          items={antdItems}\n          ref={ref}\n          size={size}\n          style={{\n            gap,\n            ...style,\n          }}\n          {...rest}\n        />\n      </ConfigProvider>\n    );\n  },\n);\n\nCollapse.displayName = 'Collapse';\n\nexport default Collapse;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,aAAW,MACd,EACC,OACA,UAAU,UACV,MAAM,GACN,WACA,UAAU,iBACV,MACA,cAAc,MACd,OACA,QAAQ,cACR,YACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,cAAc;CAErC,MAAM,YAAY,cAEd,MAAM,KAAK,EAAE,MAAM,MAAM,OAAO,GAAG,eAAe;EAChD,IAAI,UACF,oBAAC;GACC,WAAW,GAAG,OAAO,OAAO,CAAC,QAAQ,CAAC,QAAQ,YAAY,QAAQ,YAAY,MAAM;GACpF,OAAO;IACL,GAAI,CAAC,QAAQ,CAAC,OAAO,cAAc,SAAS,EAAE;IAC9C,GAAG,cAAc;IAClB;aAEA;IACG;AAGR,MAAI,KACF,WACE,qBAACC;GACC,WAAW,GAAG,OAAO,OAAO,CAAC,QAAQ,YAAY,OAAO;GACxD,KAAK;GACL;GACA,OAAO,OAAO,SAAY,cAAc;cAEvC,eAAe,KAAK,GAAG,OAAO,oBAACC;IAAW;IAAM,MAAM,EAAE,MAAM,SAAS;KAAI,EAC3E;IACO;AAId,MAAI,KACF,WACE,qBAACD;GAAQ,WAAW,YAAY;GAAQ,OAAO,cAAc;cAC1D,SACD,oBAAC;IAAI,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;IAAE,OAAO,cAAc;cACrE;KACG;IACE;AAId,SAAO;GACL,OAAO;GACP,GAAG;GACJ;GACD,EACJ;EAAC;EAAO;EAAY;EAAc;EAAO,CAC1C;AAED,QACE,oBAAC;EACC,OAAO,EACL,YAAY,EACV,UAAU;GACR,gBAAgB,WAAW,OAAO,YAAY,WAAW,SAAS,OAAO,QAAQ;GACjF,eAAe,WAAW,OAAO,YAAY,WAAW,SAAS,SAAS,QAAQ;GACnF,EACF,EACF;YAED,oBAACE;GACC,WAAW,GAAG,SAAS;IAAE;IAAa,KAAK,CAAC,CAAC;IAAK;IAAY;IAAS,CAAC,EAAE,UAAU;GACpF,aAAa,cAAc,WAAW;GACtC,aAAa,EAAE,eACb,oBAACD;IACC,WAAW,OAAO;IAClB,MAAM;IACN,MAAM;IACN,OAAO,EAAE,QAAQ,WAAW,SAAY,UAAU;KAClD;GAEJ;GACA,OAAO;GACF;GACC;GACN,OAAO;IACL;IACA,GAAG;IACJ;GACD,GAAI;IACJ;GACa;EAGtB;AAED,WAAS,cAAc;AAEvB,uBAAeF"}

package/es/Collapse/style.mjs

@@ -1,9 +1,12 @@
-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/Collapse/style.ts
 const DEFAULT_PADDING = "12px 16px";
 const getPadding = (padding) => !padding && padding !== 0 ? DEFAULT_PADDING : `${typeof padding === "string" ? padding : `${padding}px`} !important`;
-const useStyles = createStyles(({ css: css$1, token, prefixCls, stylish, isDarkMode }) => {
+const prefixCls = "ant";
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		borderless: css$1`
       &.${prefixCls}-collapse {
@@ -20,19 +23,33 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls, stylish, isDarkM
     `,
 		desc: css$1`
       font-size: 12px;
-      color: ${token.colorTextDescription};
+      color: ${cssVar$1.colorTextDescription};
     `,
-		filled: css$1`
+		filledDark: css$1`
       &.${prefixCls}-collapse {
         .${prefixCls}-collapse-item {
-          background: ${isDarkMode ? token.colorFillQuaternary : token.colorFillTertiary};
+          background: ${cssVar$1.colorFillQuaternary};
           .${prefixCls}-collapse-content {
             margin-inline: 3px;
             margin-block-end: 3px;
-            border-radius: ${token.borderRadius}px;
-            ${stylish.variantOutlinedWithoutHover};
-            background: ${isDarkMode ? token.colorFillQuaternary : token.colorBgContainer};
-            ${isDarkMode ? void 0 : stylish.shadow};
+            border-radius: ${cssVar$1.borderRadius};
+            ${staticStylish.variantOutlinedWithoutHover};
+            background: ${cssVar$1.colorFillQuaternary};
+          }
+        }
+      }
+    `,
+		filledLight: css$1`
+      &.${prefixCls}-collapse {
+        .${prefixCls}-collapse-item {
+          background: ${cssVar$1.colorFillTertiary};
+          .${prefixCls}-collapse-content {
+            margin-inline: 3px;
+            margin-block-end: 3px;
+            border-radius: ${cssVar$1.borderRadius};
+            ${staticStylish.variantOutlinedWithoutHover};
+            background: ${cssVar$1.colorBgContainer};
+            ${staticStylish.shadow};
           }
         }
       }
@@ -41,8 +58,8 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls, stylish, isDarkM
       &.${prefixCls}-collapse {
         background: transparent;
         .${prefixCls}-collapse-item {
-          border: 1px solid ${token.colorFillSecondary};
-          background: ${token.colorBgContainer};
+          border: 1px solid ${cssVar$1.colorFillSecondary};
+          background: ${cssVar$1.colorBgContainer};
         }
 
         .${prefixCls}-collapse-item:not(:first-child) {
@@ -60,7 +77,7 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls, stylish, isDarkM
         box-shadow: none;
         .${prefixCls}-collapse-item {
           border: none;
-          border-radius: ${token.borderRadiusLG}px;
+          border-radius: ${cssVar$1.borderRadiusLG};
         }
       }
     `,
@@ -71,21 +88,21 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls, stylish, isDarkM
     `,
 		icon: css$1`
       cursor: pointer;
-      transition: all 100ms ${token.motionEaseOut};
+      transition: all 100ms ${cssVar$1.motionEaseOut};
     `,
 		outlined: css$1`
       &.${prefixCls}-collapse {
-        border: 1px solid ${token.colorFillSecondary};
-        background: ${token.colorBgContainer};
+        border: 1px solid ${cssVar$1.colorFillSecondary};
+        background: ${cssVar$1.colorBgContainer};
         .${prefixCls}-collapse-item .${prefixCls}-collapse-header {
           transition: none;
         }
         .${prefixCls}-collapse-item-active .${prefixCls}-collapse-header {
-          border-block-end: 1px solid ${token.colorFillTertiary};
+          border-block-end: 1px solid ${cssVar$1.colorFillTertiary};
         }
         .${prefixCls}-collapse-item:not(:first-child) {
           .${prefixCls}-collapse-header {
-            border-block-start: 1px solid ${token.colorFillTertiary};
+            border-block-start: 1px solid ${cssVar$1.colorFillTertiary};
           }
         }
       }
@@ -134,7 +151,50 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls, stylish, isDarkM
     `
 	};
 });
+const variants = cva(styles.root, {
+	compoundVariants: [
+		{
+			class: styles.gapOutlined,
+			gap: true,
+			variant: "outlined"
+		},
+		{
+			class: styles.filledDark,
+			isDarkMode: true,
+			variant: "filled"
+		},
+		{
+			class: styles.filledLight,
+			isDarkMode: false,
+			variant: "filled"
+		}
+	],
+	defaultVariants: {
+		collapsible: true,
+		gap: false,
+		isDarkMode: false
+	},
+	variants: {
+		collapsible: {
+			false: styles.hideCollapsibleIcon,
+			true: null
+		},
+		gap: {
+			false: null,
+			true: styles.gapRoot
+		},
+		isDarkMode: {
+			false: null,
+			true: null
+		},
+		variant: {
+			borderless: styles.borderless,
+			filled: null,
+			outlined: styles.outlined
+		}
+	}
+});
 
 //#endregion
-export { DEFAULT_PADDING, getPadding, useStyles };
+export { DEFAULT_PADDING, getPadding, styles, variants };
 //# sourceMappingURL=style.mjs.map

package/es/Collapse/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Collapse/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const DEFAULT_PADDING = '12px 16px';\n\nexport const getPadding = (padding?: number | string) =>\n  !padding && padding !== 0\n    ? DEFAULT_PADDING\n    : `${typeof padding === 'string' ? padding : `${padding}px`} !important`;\n\nexport const useStyles = createStyles(({ css, token, prefixCls, stylish, isDarkMode }) => {\n  return {\n    borderless: css`\n      &.${prefixCls}-collapse {\n        .${prefixCls}-collapse-header {\n          padding-inline: 0;\n        }\n        .${prefixCls}-collapse-content {\n          padding-inline: 0;\n          .${prefixCls}-collapse-content-box {\n            padding-inline: 0;\n          }\n        }\n      }\n    `,\n    desc: css`\n      font-size: 12px;\n      color: ${token.colorTextDescription};\n    `,\n    filled: css`\n      &.${prefixCls}-collapse {\n        .${prefixCls}-collapse-item {\n          background: ${isDarkMode ? token.colorFillQuaternary : token.colorFillTertiary};\n          .${prefixCls}-collapse-content {\n            margin-inline: 3px;\n            margin-block-end: 3px;\n            border-radius: ${token.borderRadius}px;\n            ${stylish.variantOutlinedWithoutHover};\n            background: ${isDarkMode ? token.colorFillQuaternary : token.colorBgContainer};\n            ${isDarkMode ? undefined : stylish.shadow};\n          }\n        }\n      }\n    `,\n    gapOutlined: css`\n      &.${prefixCls}-collapse {\n        background: transparent;\n        .${prefixCls}-collapse-item {\n          border: 1px solid ${token.colorFillSecondary};\n          background: ${token.colorBgContainer};\n        }\n\n        .${prefixCls}-collapse-item:not(:first-child) {\n          .${prefixCls}-collapse-header {\n            border-block-start: none;\n          }\n        }\n      }\n    `,\n    gapRoot: css`\n      &.${prefixCls}-collapse {\n        display: flex;\n        flex-direction: column;\n        border: none;\n        box-shadow: none;\n        .${prefixCls}-collapse-item {\n          border: none;\n          border-radius: ${token.borderRadiusLG}px;\n        }\n      }\n    `,\n    hideCollapsibleIcon: css`\n      .${prefixCls}-collapse-expand-icon {\n        display: none !important;\n      }\n    `,\n    icon: css`\n      cursor: pointer;\n      transition: all 100ms ${token.motionEaseOut};\n    `,\n    outlined: css`\n      &.${prefixCls}-collapse {\n        border: 1px solid ${token.colorFillSecondary};\n        background: ${token.colorBgContainer};\n        .${prefixCls}-collapse-item .${prefixCls}-collapse-header {\n          transition: none;\n        }\n        .${prefixCls}-collapse-item-active .${prefixCls}-collapse-header {\n          border-block-end: 1px solid ${token.colorFillTertiary};\n        }\n        .${prefixCls}-collapse-item:not(:first-child) {\n          .${prefixCls}-collapse-header {\n            border-block-start: 1px solid ${token.colorFillTertiary};\n          }\n        }\n      }\n    `,\n    root: css`\n      &.${prefixCls}-collapse {\n        display: flex;\n        flex-direction: column;\n        background: transparent;\n\n        .${prefixCls}-collapse-header {\n          overflow: hidden;\n          display: flex;\n          flex: none;\n          gap: 0.75em;\n          align-items: flex-start;\n\n          border-radius: 0 !important;\n\n          .${prefixCls}-collapse-header-text {\n            flex: 1;\n          }\n\n          .${prefixCls}-collapse-expand-icon {\n            align-items: center;\n            min-height: 28px;\n            padding: 0;\n          }\n\n          .${prefixCls}-collapse-extra {\n            display: flex;\n            align-items: center;\n            min-height: 28px;\n          }\n        }\n\n        .${prefixCls}-collapse-content {\n          background: transparent;\n        }\n      }\n    `,\n    title: css`\n      font-size: 16px;\n      font-weight: 500;\n      line-height: 28px;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,kBAAkB;AAE/B,MAAa,cAAc,YACzB,CAAC,WAAW,YAAY,IACpB,kBACA,GAAG,OAAO,YAAY,WAAW,UAAU,GAAG,QAAQ,IAAI;AAEhE,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,WAAW,SAAS,iBAAiB;AACxF,QAAO;EACL,YAAY,KAAG;UACT,UAAU;WACT,UAAU;;;WAGV,UAAU;;aAER,UAAU;;;;;;EAMnB,MAAM,KAAG;;eAEE,MAAM,qBAAqB;;EAEtC,QAAQ,KAAG;UACL,UAAU;WACT,UAAU;wBACG,aAAa,MAAM,sBAAsB,MAAM,kBAAkB;aAC5E,UAAU;;;6BAGM,MAAM,aAAa;cAClC,QAAQ,4BAA4B;0BACxB,aAAa,MAAM,sBAAsB,MAAM,iBAAiB;cAC5E,aAAa,SAAY,QAAQ,OAAO;;;;;EAKlD,aAAa,KAAG;UACV,UAAU;;WAET,UAAU;8BACS,MAAM,mBAAmB;wBAC/B,MAAM,iBAAiB;;;WAGpC,UAAU;aACR,UAAU;;;;;;EAMnB,SAAS,KAAG;UACN,UAAU;;;;;WAKT,UAAU;;2BAEM,MAAM,eAAe;;;;EAI5C,qBAAqB,KAAG;SACnB,UAAU;;;;EAIf,MAAM,KAAG;;8BAEiB,MAAM,cAAc;;EAE9C,UAAU,KAAG;UACP,UAAU;4BACQ,MAAM,mBAAmB;sBAC/B,MAAM,iBAAiB;WAClC,UAAU,kBAAkB,UAAU;;;WAGtC,UAAU,yBAAyB,UAAU;wCAChB,MAAM,kBAAkB;;WAErD,UAAU;aACR,UAAU;4CACqB,MAAM,kBAAkB;;;;;EAKhE,MAAM,KAAG;UACH,UAAU;;;;;WAKT,UAAU;;;;;;;;;aASR,UAAU;;;;aAIV,UAAU;;;;;;aAMV,UAAU;;;;;;;WAOZ,UAAU;;;;;EAKjB,OAAO,KAAG;;;;;EAKX;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar","lobeStaticStylish"],"sources":["../../src/Collapse/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const DEFAULT_PADDING = '12px 16px';\n\nexport const getPadding = (padding?: number | string) =>\n  !padding && padding !== 0\n    ? DEFAULT_PADDING\n    : `${typeof padding === 'string' ? padding : `${padding}px`} !important`;\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: css`\n      &.${prefixCls}-collapse {\n        .${prefixCls}-collapse-header {\n          padding-inline: 0;\n        }\n        .${prefixCls}-collapse-content {\n          padding-inline: 0;\n          .${prefixCls}-collapse-content-box {\n            padding-inline: 0;\n          }\n        }\n      }\n    `,\n    desc: css`\n      font-size: 12px;\n      color: ${cssVar.colorTextDescription};\n    `,\n    filledDark: css`\n      &.${prefixCls}-collapse {\n        .${prefixCls}-collapse-item {\n          background: ${cssVar.colorFillQuaternary};\n          .${prefixCls}-collapse-content {\n            margin-inline: 3px;\n            margin-block-end: 3px;\n            border-radius: ${cssVar.borderRadius};\n            ${lobeStaticStylish.variantOutlinedWithoutHover};\n            background: ${cssVar.colorFillQuaternary};\n          }\n        }\n      }\n    `,\n    filledLight: css`\n      &.${prefixCls}-collapse {\n        .${prefixCls}-collapse-item {\n          background: ${cssVar.colorFillTertiary};\n          .${prefixCls}-collapse-content {\n            margin-inline: 3px;\n            margin-block-end: 3px;\n            border-radius: ${cssVar.borderRadius};\n            ${lobeStaticStylish.variantOutlinedWithoutHover};\n            background: ${cssVar.colorBgContainer};\n            ${lobeStaticStylish.shadow};\n          }\n        }\n      }\n    `,\n    gapOutlined: css`\n      &.${prefixCls}-collapse {\n        background: transparent;\n        .${prefixCls}-collapse-item {\n          border: 1px solid ${cssVar.colorFillSecondary};\n          background: ${cssVar.colorBgContainer};\n        }\n\n        .${prefixCls}-collapse-item:not(:first-child) {\n          .${prefixCls}-collapse-header {\n            border-block-start: none;\n          }\n        }\n      }\n    `,\n    gapRoot: css`\n      &.${prefixCls}-collapse {\n        display: flex;\n        flex-direction: column;\n        border: none;\n        box-shadow: none;\n        .${prefixCls}-collapse-item {\n          border: none;\n          border-radius: ${cssVar.borderRadiusLG};\n        }\n      }\n    `,\n    hideCollapsibleIcon: css`\n      .${prefixCls}-collapse-expand-icon {\n        display: none !important;\n      }\n    `,\n    icon: css`\n      cursor: pointer;\n      transition: all 100ms ${cssVar.motionEaseOut};\n    `,\n    outlined: css`\n      &.${prefixCls}-collapse {\n        border: 1px solid ${cssVar.colorFillSecondary};\n        background: ${cssVar.colorBgContainer};\n        .${prefixCls}-collapse-item .${prefixCls}-collapse-header {\n          transition: none;\n        }\n        .${prefixCls}-collapse-item-active .${prefixCls}-collapse-header {\n          border-block-end: 1px solid ${cssVar.colorFillTertiary};\n        }\n        .${prefixCls}-collapse-item:not(:first-child) {\n          .${prefixCls}-collapse-header {\n            border-block-start: 1px solid ${cssVar.colorFillTertiary};\n          }\n        }\n      }\n    `,\n    root: css`\n      &.${prefixCls}-collapse {\n        display: flex;\n        flex-direction: column;\n        background: transparent;\n\n        .${prefixCls}-collapse-header {\n          overflow: hidden;\n          display: flex;\n          flex: none;\n          gap: 0.75em;\n          align-items: flex-start;\n\n          border-radius: 0 !important;\n\n          .${prefixCls}-collapse-header-text {\n            flex: 1;\n          }\n\n          .${prefixCls}-collapse-expand-icon {\n            align-items: center;\n            min-height: 28px;\n            padding: 0;\n          }\n\n          .${prefixCls}-collapse-extra {\n            display: flex;\n            align-items: center;\n            min-height: 28px;\n          }\n        }\n\n        .${prefixCls}-collapse-content {\n          background: transparent;\n        }\n      }\n    `,\n    title: css`\n      font-size: 16px;\n      font-weight: 500;\n      line-height: 28px;\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  compoundVariants: [\n    {\n      class: styles.gapOutlined,\n      gap: true,\n      variant: 'outlined',\n    },\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    collapsible: true,\n    gap: false,\n    isDarkMode: false,\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    collapsible: {\n      false: styles.hideCollapsibleIcon,\n      true: null,\n    },\n    gap: {\n      false: null,\n      true: styles.gapRoot,\n    },\n    isDarkMode: {\n      false: null,\n      true: null,\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,kBAAkB;AAE/B,MAAa,cAAc,YACzB,CAAC,WAAW,YAAY,IACpB,kBACA,GAAG,OAAO,YAAY,WAAW,UAAU,GAAG,QAAQ,IAAI;AAEhE,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,YAAY,KAAG;UACT,UAAU;WACT,UAAU;;;WAGV,UAAU;;aAER,UAAU;;;;;;EAMnB,MAAM,KAAG;;eAEEA,SAAO,qBAAqB;;EAEvC,YAAY,KAAG;UACT,UAAU;WACT,UAAU;wBACGA,SAAO,oBAAoB;aACtC,UAAU;;;6BAGMA,SAAO,aAAa;cACnCC,cAAkB,4BAA4B;0BAClCD,SAAO,oBAAoB;;;;;EAKjD,aAAa,KAAG;UACV,UAAU;WACT,UAAU;wBACGA,SAAO,kBAAkB;aACpC,UAAU;;;6BAGMA,SAAO,aAAa;cACnCC,cAAkB,4BAA4B;0BAClCD,SAAO,iBAAiB;cACpCC,cAAkB,OAAO;;;;;EAKnC,aAAa,KAAG;UACV,UAAU;;WAET,UAAU;8BACSD,SAAO,mBAAmB;wBAChCA,SAAO,iBAAiB;;;WAGrC,UAAU;aACR,UAAU;;;;;;EAMnB,SAAS,KAAG;UACN,UAAU;;;;;WAKT,UAAU;;2BAEMA,SAAO,eAAe;;;;EAI7C,qBAAqB,KAAG;SACnB,UAAU;;;;EAIf,MAAM,KAAG;;8BAEiBA,SAAO,cAAc;;EAE/C,UAAU,KAAG;UACP,UAAU;4BACQA,SAAO,mBAAmB;sBAChCA,SAAO,iBAAiB;WACnC,UAAU,kBAAkB,UAAU;;;WAGtC,UAAU,yBAAyB,UAAU;wCAChBA,SAAO,kBAAkB;;WAEtD,UAAU;aACR,UAAU;4CACqBA,SAAO,kBAAkB;;;;;EAKjE,MAAM,KAAG;UACH,UAAU;;;;;WAKT,UAAU;;;;;;;;;aASR,UAAU;;;;aAIV,UAAU;;;;;;aAMV,UAAU;;;;;;;WAOZ,UAAU;;;;;EAKjB,OAAO,KAAG;;;;;EAKX;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,kBAAkB;EAChB;GACE,OAAO,OAAO;GACd,KAAK;GACL,SAAS;GACV;EACD;GACE,OAAO,OAAO;GACd,YAAY;GACZ,SAAS;GACV;EACD;GACE,OAAO,OAAO;GACd,YAAY;GACZ,SAAS;GACV;EACF;CACD,iBAAiB;EACf,aAAa;EACb,KAAK;EACL,YAAY;EACb;CAED,UAAU;EACR,aAAa;GACX,OAAO,OAAO;GACd,MAAM;GACP;EACD,KAAK;GACH,OAAO;GACP,MAAM,OAAO;GACd;EACD,YAAY;GACV,OAAO;GACP,MAAM;GACP;EACD,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ;GACR,UAAU,OAAO;GAClB;EACF;CAEF,CAAC"}

package/es/ColorSwatches/ColorSwatches.mjs

@@ -4,33 +4,32 @@ import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Center_default from "../Flex/Center.mjs";
 import Icon_default from "../Icon/Icon.mjs";
 import Tooltip_default from "../Tooltip/Tooltip.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ColorPicker } from "antd";
+import { cssVar, cx, useTheme } from "antd-style";
 import useMergeState from "use-merge-value";
-import { CheckIcon } from "lucide-react";
 import { readableColor, rgba } from "polished";
+import { CheckIcon } from "lucide-react";
 import chroma from "chroma-js";
 
 //#region src/ColorSwatches/ColorSwatches.tsx
 const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultValue, value, style, colors, onChange, size = 24, shape = "circle", texts, ref, ...rest }) => {
+	const theme = useTheme();
 	const [active, setActive] = useMergeState(defaultValue, {
 		defaultValue,
 		onChange,
 		value
 	});
-	const { cx, styles, theme } = useStyles(size);
-	const isCustomActive = useMemo(() => active && active !== theme.colorPrimary && !colors.some((c) => c.color === active), [
-		active,
-		colors,
-		theme.colorPrimary
-	]);
+	const cssVariables = useMemo(() => ({ "--color-swatches-size": `${size}px` }), [size]);
+	const isCustomActive = useMemo(() => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active), [active, colors]);
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		gap: 6,
 		horizontal: true,
 		ref,
 		style: {
+			...cssVariables,
 			flexWrap: "wrap",
 			...style
 		},
@@ -38,7 +37,14 @@ const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultV
 		children: [enableColorSwatches && colors.map((c, i) => {
 			const color = c.color || theme.colorPrimary;
 			const isActive = !active && !c.color || color === active;
-			const isTransparent = c.color === "transparent" || chroma(c.color).alpha() === 0;
+			const isTransparent = c.color === "transparent" || c.color && !c.color.startsWith("var(") && (() => {
+				try {
+					return chroma(c.color).alpha() === 0;
+				} catch {
+					return false;
+				}
+			})();
+			const actualColorForReadable = c.color?.startsWith("var(") ? theme.colorPrimary : color;
 			return /* @__PURE__ */ jsx(Tooltip_default, {
 				title: c.title,
 				children: /* @__PURE__ */ jsx(Center_default, {
@@ -46,10 +52,10 @@ const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultV
 					onClick: () => setActive(c.color || void 0),
 					style: {
 						background: isTransparent ? void 0 : color,
-						borderRadius: shape === "circle" ? "50%" : theme.borderRadius
+						borderRadius: shape === "circle" ? "50%" : cssVar.borderRadius
 					},
 					children: isActive && /* @__PURE__ */ jsx(Icon_default, {
-						color: rgba(readableColor(color), .33),
+						color: rgba(readableColor(actualColorForReadable), .33),
 						icon: CheckIcon,
 						size: {
 							size: 14,
@@ -64,18 +70,18 @@ const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultV
 			children: /* @__PURE__ */ jsx(ColorPicker, {
 				arrow: false,
 				className: cx(styles.picker, enableColorSwatches && styles.conic, isCustomActive && styles.active),
-				defaultValue: theme.colorPrimary,
+				defaultValue: cssVar.colorPrimary,
 				disabledAlpha: true,
 				format: "hex",
 				onChangeComplete: (c) => {
-					if (c.toHexString() === theme.colorPrimary) setActive("");
+					if (c.toHexString() === cssVar.colorPrimary) setActive("");
 					else setActive(c.toHexString());
 				},
 				presets: enableColorSwatches ? void 0 : [{
 					colors: colors.map((c) => c.color),
 					label: texts?.presets || "Presets"
 				}],
-				style: { borderRadius: shape === "circle" ? "50%" : theme.borderRadius },
+				style: { borderRadius: shape === "circle" ? "50%" : cssVar.borderRadius },
 				value: enableColorSwatches ? void 0 : active
 			})
 		})]