@lobehub/ui 4.3.2 → 4.3.3

package/es/Alert/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/Alert/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(\n  (\n    { cx, token, css, prefixCls, stylish },\n    {\n      closable,\n      hasTitle,\n      showIcon,\n    }: { closable?: boolean; hasTitle?: boolean; showIcon?: boolean },\n  ) => {\n    const baseBlockPadding = hasTitle ? 16 : 8;\n    const baseInlinePadding = hasTitle ? 16 : 12;\n    return {\n      banner: css`\n        border: none !important;\n        border-radius: 0 !important;\n      `,\n      borderless: css`\n        padding: 0 !important;\n        border: none !important;\n        background: transparent !important;\n      `,\n      borderlessExtraHeader: css`\n        margin-block-start: ${baseBlockPadding}px;\n        padding-inline: 0;\n      `,\n      colorfulText: css`\n        .${prefixCls}-alert-message,.${prefixCls}-alert-description {\n          color: inherit;\n        }\n      `,\n      expandText: css`\n        padding-inline-end: 12px;\n\n        &:hover {\n          cursor: pointer;\n        }\n      `,\n      extra: css`\n        position: relative;\n\n        overflow: hidden;\n\n        max-width: 100%;\n        border: 1px solid;\n        border-block-start: none;\n        border-end-start-radius: ${token.borderRadiusLG}px;\n        border-end-end-radius: ${token.borderRadiusLG}px;\n      `,\n      extraHeader: css`\n        border-block-start: 1px dashed;\n        border-radius: 0;\n        background: transparent !important;\n      `,\n      filled: css``,\n      glass: stylish.blur,\n      hasExtra: css`\n        border-block-end: none;\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n      `,\n      outlined: css`\n        background: transparent !important;\n      `,\n      root: cx(\n        css`\n          position: relative;\n\n          display: flex;\n          flex-direction: row;\n          gap: ${hasTitle ? 12 : 8}px;\n          align-items: flex-start;\n\n          max-width: 100%;\n          padding-block: ${baseBlockPadding}px;\n          padding-inline: ${showIcon ? baseInlinePadding * 0.75 : baseInlinePadding}px\n            ${closable ? baseInlinePadding * 0.75 : baseInlinePadding}px;\n\n          .${prefixCls}-alert-title {\n            font-weight: ${hasTitle ? 500 : 400};\n            line-height: 24px;\n            color: inherit;\n            word-break: normal;\n          }\n          .${prefixCls}-alert-icon {\n            display: flex;\n            align-items: center;\n            height: 24px;\n            margin: 0;\n          }\n          .${prefixCls}-alert-close-icon {\n            display: flex;\n            align-items: center;\n            height: 24px;\n            margin: 0;\n          }\n        `,\n        hasTitle &&\n          css`\n            .${prefixCls}-alert-description {\n              line-height: 1.5;\n              word-break: normal;\n              opacity: 0.75;\n            }\n          `,\n      ),\n    };\n  },\n);\n"],"mappings":";;;AAEA,MAAa,YAAY,cAErB,EAAE,UAAI,OAAO,YAAK,WAAW,WAC7B,EACE,UACA,UACA,eAEC;CACH,MAAM,mBAAmB,WAAW,KAAK;CACzC,MAAM,oBAAoB,WAAW,KAAK;AAC1C,QAAO;EACL,QAAQ,KAAG;;;;EAIX,YAAY,KAAG;;;;;EAKf,uBAAuB,KAAG;8BACF,iBAAiB;;;EAGzC,cAAc,KAAG;WACZ,UAAU,kBAAkB,UAAU;;;;EAI3C,YAAY,KAAG;;;;;;;EAOf,OAAO,KAAG;;;;;;;;mCAQmB,MAAM,eAAe;iCACvB,MAAM,eAAe;;EAEhD,aAAa,KAAG;;;;;EAKhB,QAAQ,KAAG;EACX,OAAO,QAAQ;EACf,UAAU,KAAG;;;;;EAKb,UAAU,KAAG;;;EAGb,MAAMA,KACJ,KAAG;;;;;iBAKM,WAAW,KAAK,EAAE;;;;2BAIR,iBAAiB;4BAChB,WAAW,oBAAoB,MAAO,kBAAkB;cACtE,WAAW,oBAAoB,MAAO,kBAAkB;;aAEzD,UAAU;2BACI,WAAW,MAAM,IAAI;;;;;aAKnC,UAAU;;;;;;aAMV,UAAU;;;;;;WAOf,YACE,KAAG;eACE,UAAU;;;;;YAMlB;EACF;EAEJ"}
+{"version":3,"file":"style.mjs","names":["cssVar","lobeStaticStylish"],"sources":["../../src/Alert/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    banner: css`\n      border: none !important;\n      border-radius: 0 !important;\n    `,\n    borderless: css`\n      padding: 0 !important;\n      border: none !important;\n      background: transparent !important;\n    `,\n    borderlessExtraHeaderNoTitle: css`\n      margin-block-start: 8px;\n      padding-inline: 0;\n    `,\n    borderlessExtraHeaderWithTitle: css`\n      margin-block-start: 16px;\n      padding-inline: 0;\n    `,\n    colorfulText: css`\n      .${prefixCls}-alert-message,.${prefixCls}-alert-description {\n        color: inherit;\n      }\n    `,\n    expandText: css`\n      padding-inline-end: 12px;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `,\n    extra: css`\n      position: relative;\n\n      overflow: hidden;\n\n      max-width: 100%;\n      border: 1px solid;\n      border-block-start: none;\n      border-end-start-radius: ${cssVar.borderRadiusLG};\n      border-end-end-radius: ${cssVar.borderRadiusLG};\n    `,\n    extraHeader: css`\n      border-block-start: 1px dashed;\n      border-radius: 0;\n      background: transparent !important;\n    `,\n    filled: css``,\n    glass: lobeStaticStylish.blur,\n    hasExtra: css`\n      border-block-end: none;\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    `,\n    outlined: css`\n      background: transparent !important;\n    `,\n    // Root variants based on closable, hasTitle, showIcon combinations\n    rootBase: css`\n      position: relative;\n\n      display: flex;\n      flex-direction: row;\n      align-items: flex-start;\n\n      max-width: 100%;\n\n      .${prefixCls}-alert-icon {\n        display: flex;\n        align-items: center;\n        height: 24px;\n        margin: 0;\n      }\n      .${prefixCls}-alert-close-icon {\n        display: flex;\n        align-items: center;\n        height: 24px;\n        margin: 0;\n      }\n    `,\n    rootNoTitleNoIconNoClosable: css`\n      gap: 8px;\n      padding-block: 8px;\n      padding-inline: 12px;\n\n      .${prefixCls}-alert-title {\n        font-weight: 400;\n        line-height: 24px;\n        color: inherit;\n        word-break: normal;\n      }\n    `,\n    rootNoTitleNoIconWithClosable: css`\n      gap: 8px;\n      padding-block: 8px;\n      padding-inline: 12px 9px;\n\n      .${prefixCls}-alert-title {\n        font-weight: 400;\n        line-height: 24px;\n        color: inherit;\n        word-break: normal;\n      }\n    `,\n    rootNoTitleWithIconNoClosable: css`\n      gap: 8px;\n      padding-block: 8px;\n      padding-inline: 9px 12px;\n\n      .${prefixCls}-alert-title {\n        font-weight: 400;\n        line-height: 24px;\n        color: inherit;\n        word-break: normal;\n      }\n    `,\n    rootNoTitleWithIconWithClosable: css`\n      gap: 8px;\n      padding-block: 8px;\n      padding-inline: 9px;\n\n      .${prefixCls}-alert-title {\n        font-weight: 400;\n        line-height: 24px;\n        color: inherit;\n        word-break: normal;\n      }\n    `,\n    rootWithTitleNoIconNoClosable: css`\n      gap: 12px;\n      padding-block: 16px;\n      padding-inline: 16px;\n\n      .${prefixCls}-alert-title {\n        font-weight: 500;\n        line-height: 24px;\n        color: inherit;\n        word-break: normal;\n      }\n      .${prefixCls}-alert-description {\n        line-height: 1.5;\n        word-break: normal;\n        opacity: 0.75;\n      }\n    `,\n    rootWithTitleNoIconWithClosable: css`\n      gap: 12px;\n      padding-block: 16px;\n      padding-inline: 16px 12px;\n\n      .${prefixCls}-alert-title {\n        font-weight: 500;\n        line-height: 24px;\n        color: inherit;\n        word-break: normal;\n      }\n      .${prefixCls}-alert-description {\n        line-height: 1.5;\n        word-break: normal;\n        opacity: 0.75;\n      }\n    `,\n    rootWithTitleWithIconNoClosable: css`\n      gap: 12px;\n      padding-block: 16px;\n      padding-inline: 12px 16px;\n\n      .${prefixCls}-alert-title {\n        font-weight: 500;\n        line-height: 24px;\n        color: inherit;\n        word-break: normal;\n      }\n      .${prefixCls}-alert-description {\n        line-height: 1.5;\n        word-break: normal;\n        opacity: 0.75;\n      }\n    `,\n    rootWithTitleWithIconWithClosable: css`\n      gap: 12px;\n      padding-block: 16px;\n      padding-inline: 12px;\n\n      .${prefixCls}-alert-title {\n        font-weight: 500;\n        line-height: 24px;\n        color: inherit;\n        word-break: normal;\n      }\n      .${prefixCls}-alert-description {\n        line-height: 1.5;\n        word-break: normal;\n        opacity: 0.75;\n      }\n    `,\n  };\n});\n\nexport const extraVariants = cva(styles.extra, {\n  defaultVariants: {\n    variant: 'filled',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n    banner: {\n      false: null,\n      true: styles.banner,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const rootVariants = cva(styles.rootBase, {\n  compoundVariants: [\n    {\n      class: styles.rootNoTitleNoIconNoClosable,\n      closable: false,\n      hasTitle: false,\n      showIcon: false,\n    },\n    {\n      class: styles.rootNoTitleNoIconWithClosable,\n      closable: true,\n      hasTitle: false,\n      showIcon: false,\n    },\n    {\n      class: styles.rootNoTitleWithIconNoClosable,\n      closable: false,\n      hasTitle: false,\n      showIcon: true,\n    },\n    {\n      class: styles.rootNoTitleWithIconWithClosable,\n      closable: true,\n      hasTitle: false,\n      showIcon: true,\n    },\n    {\n      class: styles.rootWithTitleNoIconNoClosable,\n      closable: false,\n      hasTitle: true,\n      showIcon: false,\n    },\n    {\n      class: styles.rootWithTitleNoIconWithClosable,\n      closable: true,\n      hasTitle: true,\n      showIcon: false,\n    },\n    {\n      class: styles.rootWithTitleWithIconNoClosable,\n      closable: false,\n      hasTitle: true,\n      showIcon: true,\n    },\n    {\n      class: styles.rootWithTitleWithIconWithClosable,\n      closable: true,\n      hasTitle: true,\n      showIcon: true,\n    },\n  ],\n  defaultVariants: {\n    closable: false,\n    colorfulText: true,\n    glass: false,\n    hasTitle: false,\n    showIcon: false,\n    variant: 'filled',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    closable: {\n      false: null,\n      true: null,\n    },\n    colorfulText: {\n      false: null,\n      true: styles.colorfulText,\n    },\n    glass: {\n      false: null,\n      true: styles.glass,\n    },\n    hasTitle: {\n      false: null,\n      true: null,\n    },\n    showIcon: {\n      false: null,\n      true: null,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: styles.filled,\n      outlined: styles.outlined,\n    },\n    hasExtra: {\n      false: null,\n      true: styles.hasExtra,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const extraHeaderVariants = cva(styles.extraHeader, {\n  compoundVariants: [\n    {\n      class: styles.borderlessExtraHeaderNoTitle,\n      hasTitle: false,\n      variant: 'borderless',\n    },\n    {\n      class: styles.borderlessExtraHeaderWithTitle,\n      hasTitle: true,\n      variant: 'borderless',\n    },\n  ],\n  defaultVariants: {\n    hasTitle: false,\n    variant: 'filled',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    hasTitle: {\n      false: null,\n      true: null,\n    },\n    variant: {\n      borderless: null,\n      filled: null,\n      outlined: null,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAKA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,QAAQ,KAAG;;;;EAIX,YAAY,KAAG;;;;;EAKf,8BAA8B,KAAG;;;;EAIjC,gCAAgC,KAAG;;;;EAInC,cAAc,KAAG;SACZ,UAAU,kBAAkB,UAAU;;;;EAI3C,YAAY,KAAG;;;;;;;EAOf,OAAO,KAAG;;;;;;;;iCAQmBA,SAAO,eAAe;+BACxBA,SAAO,eAAe;;EAEjD,aAAa,KAAG;;;;;EAKhB,QAAQ,KAAG;EACX,OAAOC,cAAkB;EACzB,UAAU,KAAG;;;;;EAKb,UAAU,KAAG;;;EAIb,UAAU,KAAG;;;;;;;;;SASR,UAAU;;;;;;SAMV,UAAU;;;;;;;EAOf,6BAA6B,KAAG;;;;;SAK3B,UAAU;;;;;;;EAOf,+BAA+B,KAAG;;;;;SAK7B,UAAU;;;;;;;EAOf,+BAA+B,KAAG;;;;;SAK7B,UAAU;;;;;;;EAOf,iCAAiC,KAAG;;;;;SAK/B,UAAU;;;;;;;EAOf,+BAA+B,KAAG;;;;;SAK7B,UAAU;;;;;;SAMV,UAAU;;;;;;EAMf,iCAAiC,KAAG;;;;;SAK/B,UAAU;;;;;;SAMV,UAAU;;;;;;EAMf,iCAAiC,KAAG;;;;;SAK/B,UAAU;;;;;;SAMV,UAAU;;;;;;EAMf,mCAAmC,KAAG;;;;;SAKjC,UAAU;;;;;;SAMV,UAAU;;;;;;EAMhB;EACD;AAEF,MAAa,gBAAgB,IAAI,OAAO,OAAO;CAC7C,iBAAiB,EACf,SAAS,UACV;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACF;CAEF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,UAAU;CAC/C,kBAAkB;EAChB;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;GACX;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;GACX;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;GACX;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;GACX;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;GACX;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;GACX;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;GACX;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;GACX;EACF;CACD,iBAAiB;EACf,UAAU;EACV,cAAc;EACd,OAAO;EACP,UAAU;EACV,UAAU;EACV,SAAS;EACV;CAED,UAAU;EACR,UAAU;GACR,OAAO;GACP,MAAM;GACP;EACD,cAAc;GACZ,OAAO;GACP,MAAM,OAAO;GACd;EACD,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,UAAU;GACR,OAAO;GACP,MAAM;GACP;EACD,UAAU;GACR,OAAO;GACP,MAAM;GACP;EACD,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;GAClB;EACD,UAAU;GACR,OAAO;GACP,MAAM,OAAO;GACd;EACF;CAEF,CAAC;AAEF,MAAa,sBAAsB,IAAI,OAAO,aAAa;CACzD,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,UAAU;EACV,SAAS;EACV,EACD;EACE,OAAO,OAAO;EACd,UAAU;EACV,SAAS;EACV,CACF;CACD,iBAAiB;EACf,UAAU;EACV,SAAS;EACV;CAED,UAAU;EACR,UAAU;GACR,OAAO;GACP,MAAM;GACP;EACD,SAAS;GACP,YAAY;GACZ,QAAQ;GACR,UAAU;GACX;EACF;CAEF,CAAC"}

package/es/AutoComplete/Select.d.mts

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

package/es/AutoComplete/Select.mjs

@@ -1,34 +1,20 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
-import { memo, useMemo } from "react";
+import { variants } from "./style.mjs";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { AutoComplete } from "antd";
-import { cva } from "class-variance-authority";
+import { cx, useThemeMode } from "antd-style";
 
 //#region src/AutoComplete/Select.tsx
 const AutoComplete$1 = memo(({ variant, shadow, className, ...rest }) => {
-	const { styles, cx, theme } = useStyles();
+	const { isDarkMode } = useThemeMode();
 	return /* @__PURE__ */ jsx(AutoComplete, {
-		className: cx(useMemo(() => cva(styles.root, {
-			defaultVariants: { shadow: false },
-			variants: {
-				variant: {
-					filled: styles.filled,
-					outlined: styles.outlined,
-					borderless: styles.borderless,
-					underlined: null
-				},
-				shadow: {
-					false: null,
-					true: styles.shadow
-				}
-			}
-		}), [styles])({
+		className: cx(variants({
 			shadow,
-			variant: variant || (theme.isDarkMode ? "filled" : "outlined")
+			variant: variant || (isDarkMode ? "filled" : "outlined")
 		}), className),
-		variant: variant || (theme.isDarkMode ? "filled" : "outlined"),
+		variant: variant || (isDarkMode ? "filled" : "outlined"),
 		...rest
 	});
 });

package/es/AutoComplete/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":["AutoComplete","AntAutoComplete"],"sources":["../../src/AutoComplete/Select.tsx"],"sourcesContent":["'use client';\n\nimport { AutoComplete as AntAutoComplete } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\n\nimport { useStyles } from './style';\nimport { AutoCompleteProps } from './type';\n\nconst AutoComplete = memo<AutoCompleteProps>(({ variant, shadow, className, ...rest }) => {\n  const { styles, cx, theme } = useStyles();\n\n  const variants = useMemo(\n    () =>\n      cva(styles.root, {\n        defaultVariants: {\n          shadow: 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            underlined: null,\n          },\n          shadow: {\n            false: null,\n            true: styles.shadow,\n          },\n        },\n        /* eslint-enable sort-keys-fix/sort-keys-fix */\n      }),\n    [styles],\n  );\n\n  return (\n    <AntAutoComplete\n      className={cx(\n        variants({ shadow, variant: variant || (theme.isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      variant={variant || (theme.isDarkMode ? 'filled' : 'outlined')}\n      {...rest}\n    />\n  );\n});\n\nAutoComplete.displayName = 'AutoComplete';\n\nexport default AutoComplete;\n"],"mappings":";;;;;;;;;AASA,MAAMA,iBAAe,MAAyB,EAAE,SAAS,QAAQ,WAAW,GAAG,WAAW;CACxF,MAAM,EAAE,QAAQ,IAAI,UAAU,WAAW;AA0BzC,QACE,oBAACC;EACC,WAAW,GA1BE,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB,EACf,QAAQ,OACT;GAED,UAAU;IACR,SAAS;KACP,QAAQ,OAAO;KACf,UAAU,OAAO;KACjB,YAAY,OAAO;KACnB,YAAY;KACb;IACD,QAAQ;KACN,OAAO;KACP,MAAM,OAAO;KACd;IACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAKc;GAAE;GAAQ,SAAS,YAAY,MAAM,aAAa,WAAW;GAAa,CAAC,EACpF,UACD;EACD,SAAS,YAAY,MAAM,aAAa,WAAW;EACnD,GAAI;GACJ;EAEJ;AAEF,eAAa,cAAc;AAE3B,qBAAeD"}
+{"version":3,"file":"Select.mjs","names":["AutoComplete","AntAutoComplete"],"sources":["../../src/AutoComplete/Select.tsx"],"sourcesContent":["'use client';\n\nimport { AutoComplete as AntAutoComplete } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport { AutoCompleteProps } from './type';\n\nconst AutoComplete = memo<AutoCompleteProps>(({ variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntAutoComplete\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      {...rest}\n    />\n  );\n});\n\nAutoComplete.displayName = 'AutoComplete';\n\nexport default AutoComplete;\n"],"mappings":";;;;;;;;;AASA,MAAMA,iBAAe,MAAyB,EAAE,SAAS,QAAQ,WAAW,GAAG,WAAW;CACxF,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACC;EACC,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACD,SAAS,YAAY,aAAa,WAAW;EAC7C,GAAI;GACJ;EAEJ;AAEF,eAAa,cAAc;AAE3B,qBAAeD"}

package/es/AutoComplete/style.mjs

@@ -1,40 +1,57 @@
-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/AutoComplete/style.ts
-const useStyles = createStyles(({ prefixCls, css: css$1, stylish }) => {
+const styles = createStaticStyles(({ css: css$1 }) => {
 	return {
 		borderless: css$1`
-      &.${prefixCls}-select {
-        > .${prefixCls}-select-selector {
-          ${stylish.variantBorderless}
+      &[class*='ant-select'] {
+        > [class*='ant-select-selector'] {
+          ${staticStylish.variantBorderless}
         }
       }
     `,
 		filled: css$1`
-      &.${prefixCls}-select {
-        > .${prefixCls}-select-selector {
-          ${stylish.variantFilled}
+      &[class*='ant-select'] {
+        > [class*='ant-select-selector'] {
+          ${staticStylish.variantFilled}
         }
       }
     `,
 		outlined: css$1`
-      &.${prefixCls}-select {
-        > .${prefixCls}-select-selector {
-          ${stylish.variantOutlined}
+      &[class*='ant-select'] {
+        > [class*='ant-select-selector'] {
+          ${staticStylish.variantOutlined}
         }
       }
     `,
 		root: css$1``,
 		shadow: css$1`
-      &.${prefixCls}-select {
-        > .${prefixCls}-select-selector {
-          ${stylish.shadow}
+      &[class*='ant-select'] {
+        > [class*='ant-select-selector'] {
+          ${staticStylish.shadow}
         }
       }
     `
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: { shadow: false },
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless,
+			underlined: null
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { variants };
 //# sourceMappingURL=style.mjs.map

package/es/AutoComplete/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/AutoComplete/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ prefixCls, css, stylish }) => {\n  return {\n    borderless: css`\n      &.${prefixCls}-select {\n        > .${prefixCls}-select-selector {\n          ${stylish.variantBorderless}\n        }\n      }\n    `,\n    filled: css`\n      &.${prefixCls}-select {\n        > .${prefixCls}-select-selector {\n          ${stylish.variantFilled}\n        }\n      }\n    `,\n    outlined: css`\n      &.${prefixCls}-select {\n        > .${prefixCls}-select-selector {\n          ${stylish.variantOutlined}\n        }\n      }\n    `,\n    root: css``,\n    shadow: css`\n      &.${prefixCls}-select {\n        > .${prefixCls}-select-selector {\n          ${stylish.shadow}\n        }\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,WAAW,YAAK,cAAc;AACrE,QAAO;EACL,YAAY,KAAG;UACT,UAAU;aACP,UAAU;YACX,QAAQ,kBAAkB;;;;EAIlC,QAAQ,KAAG;UACL,UAAU;aACP,UAAU;YACX,QAAQ,cAAc;;;;EAI9B,UAAU,KAAG;UACP,UAAU;aACP,UAAU;YACX,QAAQ,gBAAgB;;;;EAIhC,MAAM,KAAG;EACT,QAAQ,KAAG;UACL,UAAU;aACP,UAAU;YACX,QAAQ,OAAO;;;;EAIxB;EACD"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/AutoComplete/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    borderless: css`\n      &[class*='ant-select'] {\n        > [class*='ant-select-selector'] {\n          ${lobeStaticStylish.variantBorderless}\n        }\n      }\n    `,\n    filled: css`\n      &[class*='ant-select'] {\n        > [class*='ant-select-selector'] {\n          ${lobeStaticStylish.variantFilled}\n        }\n      }\n    `,\n    outlined: css`\n      &[class*='ant-select'] {\n        > [class*='ant-select-selector'] {\n          ${lobeStaticStylish.variantOutlined}\n        }\n      }\n    `,\n    root: css``,\n    shadow: css`\n      &[class*='ant-select'] {\n        > [class*='ant-select-selector'] {\n          ${lobeStaticStylish.shadow}\n        }\n      }\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    shadow: 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      underlined: null,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO;EACL,YAAY,KAAG;;;YAGPA,cAAkB,kBAAkB;;;;EAI5C,QAAQ,KAAG;;;YAGHA,cAAkB,cAAc;;;;EAIxC,UAAU,KAAG;;;YAGLA,cAAkB,gBAAgB;;;;EAI1C,MAAM,KAAG;EACT,QAAQ,KAAG;;;YAGHA,cAAkB,OAAO;;;;EAIlC;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,QAAQ,OACT;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACnB,YAAY;GACb;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACF;CAEF,CAAC"}

package/es/Avatar/Avatar.mjs

@@ -4,17 +4,18 @@ import Center_default from "../Flex/Center.mjs";
 import Icon_default from "../Icon/Icon.mjs";
 import Img_default from "../Img/index.mjs";
 import FluentEmoji_default from "../FluentEmoji/FluentEmoji.mjs";
-import { useStyles } from "./style.mjs";
+import { styles, variants } from "./style.mjs";
 import { isValidElement, memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar } from "antd";
-import { cva } from "class-variance-authority";
-import { Loader2 } from "lucide-react";
+import { cssVar, cx, useTheme } from "antd-style";
 import { readableColor } from "polished";
+import { Loader2 } from "lucide-react";
 import { getEmoji } from "@lobehub/fluent-emoji";
 
 //#region src/Avatar/Avatar.tsx
 const Avatar$1 = memo(({ bordered, className, avatar, title, animation, borderedColor, size = 48, shape = "square", background, style, unoptimized, alt, variant = "borderless", shadow, loading, sliceText = true, emojiScaleWithBackground = true, ref, ...rest }) => {
+	const theme = useTheme();
 	const isStringAvatar = typeof avatar === "string";
 	const isDefaultAntAvatar = useMemo(() => Boolean(avatar && ([
 		"/",
@@ -26,24 +27,6 @@ const Avatar$1 = memo(({ bordered, className, avatar, title, animation, bordered
 		isStringAvatar,
 		isDefaultAntAvatar
 	]);
-	const { styles, cx, theme } = useStyles();
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: {
-			shadow: false,
-			variant: "borderless"
-		},
-		variants: {
-			variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless
-			},
-			shadow: {
-				false: null,
-				true: styles.shadow
-			}
-		}
-	}), [styles]);
 	const text = String(isDefaultAntAvatar ? title : avatar);
 	const imgAlt = alt || title || "avatar";
 	const defualtAvatar = typeof avatar === "string" ? /* @__PURE__ */ jsx(Img_default, {
@@ -71,6 +54,11 @@ const Avatar$1 = memo(({ bordered, className, avatar, title, animation, bordered
 		unoptimized,
 		emojiScaleWithBackground
 	]);
+	const actualColorForReadable = useMemo(() => {
+		const bgColor = background || theme.colorBorder;
+		if (typeof bgColor === "string" && bgColor.startsWith("var(")) return theme.colorBorder;
+		return bgColor;
+	}, [background, theme.colorBorder]);
 	return /* @__PURE__ */ jsxs(Avatar, {
 		alt: imgAlt,
 		className: cx(variants({
@@ -83,10 +71,10 @@ const Avatar$1 = memo(({ bordered, className, avatar, title, animation, bordered
 		size,
 		src: isDefaultAntAvatar ? defualtAvatar : void 0,
 		style: {
-			background: isDefaultAntAvatar || !!emoji ? background : background || theme.colorBorder,
+			background: isDefaultAntAvatar || !!emoji ? background : background || cssVar.colorBorder,
 			borderRadius: shape === "square" && size && size < 24 ? "33%" : void 0,
-			boxShadow: bordered ? `${theme.colorBgLayout} 0 0 0 2px, ${borderedColor || theme.colorTextTertiary} 0 0 0 4px` : void 0,
-			color: readableColor(background || theme.colorBorder),
+			boxShadow: bordered ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px` : void 0,
+			color: readableColor(actualColorForReadable),
 			cursor: rest?.onClick ? "pointer" : void 0,
 			fontSize: size * (emoji ? .7 : .5),
 			...style

package/es/Avatar/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","names":["Avatar","Img","FluentEmoji","AntAvatar","Center","Icon"],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport { Avatar as AntAvatar } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\nimport { readableColor } from 'polished';\nimport { isValidElement, memo, useMemo } from 'react';\n\nimport { Center } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\n\nimport { useStyles } from './style';\nimport type { AvatarProps } from './type';\n\nconst Avatar = memo<AvatarProps>(\n  ({\n    bordered,\n    className,\n    avatar,\n    title,\n    animation,\n    borderedColor,\n    size = 48,\n    shape = 'square',\n    background,\n    style,\n    unoptimized,\n    alt,\n    variant = 'borderless',\n    shadow,\n    loading,\n    sliceText = true,\n    emojiScaleWithBackground = true,\n    ref,\n    ...rest\n  }) => {\n    const isStringAvatar = typeof avatar === 'string';\n\n    const isDefaultAntAvatar = useMemo(\n      () =>\n        Boolean(\n          avatar &&\n          (['/', 'http', 'data:'].some((index) => isStringAvatar && avatar.startsWith(index)) ||\n            isValidElement(avatar)),\n        ),\n      [avatar, isStringAvatar],\n    );\n\n    const emoji = useMemo(\n      () => avatar && !isDefaultAntAvatar && isStringAvatar && getEmoji(avatar),\n      [avatar, isStringAvatar, isDefaultAntAvatar],\n    );\n\n    const { styles, cx, theme } = useStyles();\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            shadow: false,\n            variant: 'borderless',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n            shadow: {\n              false: null,\n              true: styles.shadow,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const text = String(isDefaultAntAvatar ? title : avatar);\n\n    const imgAlt = alt || title || 'avatar';\n\n    const defualtAvatar =\n      typeof avatar === 'string' ? (\n        <Img\n          alt={imgAlt}\n          height={size}\n          loading={'lazy'}\n          src={avatar}\n          unoptimized={unoptimized}\n          width={size}\n        />\n      ) : (\n        avatar\n      );\n\n    const hasBackground =\n      background &&\n      background !== 'transparent' &&\n      background !== 'rgba(0,0,0,0)' &&\n      background !== null;\n\n    const customAvatar = useMemo(\n      () =>\n        emoji ? (\n          <FluentEmoji\n            emoji={emoji}\n            size={emojiScaleWithBackground ? (hasBackground ? size * 0.85 : size) : size * 0.85}\n            type={animation ? 'anim' : '3d'}\n            unoptimized={unoptimized}\n          />\n        ) : sliceText ? (\n          (text || title)?.toUpperCase().slice(0, 2)\n        ) : (\n          (text || title)?.toUpperCase()\n        ),\n      [\n        animation,\n        emoji,\n        hasBackground,\n        size,\n        sliceText,\n        text,\n        title,\n        unoptimized,\n        emojiScaleWithBackground,\n      ],\n    );\n\n    return (\n      <AntAvatar\n        alt={imgAlt}\n        className={cx(variants({ shadow, variant }), className)}\n        draggable={false}\n        ref={ref}\n        shape={shape}\n        size={size}\n        src={isDefaultAntAvatar ? defualtAvatar : undefined}\n        style={{\n          background: isDefaultAntAvatar || !!emoji ? background : background || theme.colorBorder,\n          borderRadius: shape === 'square' && size && size < 24 ? '33%' : undefined,\n          boxShadow: bordered\n            ? `${theme.colorBgLayout} 0 0 0 2px, ${borderedColor || theme.colorTextTertiary} 0 0 0 4px`\n            : undefined,\n          color: readableColor(background || theme.colorBorder),\n          cursor: rest?.onClick ? 'pointer' : undefined,\n          fontSize: size * (emoji ? 0.7 : 0.5),\n          ...style,\n        }}\n        {...rest}\n      >\n        {loading && (\n          <Center className={styles.loading} height={'100%'} width={'100%'}>\n            <Icon icon={Loader2} spin />\n          </Center>\n        )}\n        {!isDefaultAntAvatar && customAvatar}\n      </AntAvatar>\n    );\n  },\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAMA,WAAS,MACZ,EACC,UACA,WACA,QACA,OACA,WACA,eACA,OAAO,IACP,QAAQ,UACR,YACA,OACA,aACA,KACA,UAAU,cACV,QACA,SACA,YAAY,MACZ,2BAA2B,MAC3B,KACA,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,WAAW;CAEzC,MAAM,qBAAqB,cAEvB,QACE,WACC;EAAC;EAAK;EAAQ;EAAQ,CAAC,MAAM,UAAU,kBAAkB,OAAO,WAAW,MAAM,CAAC,IACjF,eAAe,OAAO,EACzB,EACH,CAAC,QAAQ,eAAe,CACzB;CAED,MAAM,QAAQ,cACN,UAAU,CAAC,sBAAsB,kBAAkB,SAAS,OAAO,EACzE;EAAC;EAAQ;EAAgB;EAAmB,CAC7C;CAED,MAAM,EAAE,QAAQ,IAAI,UAAU,WAAW;CAEzC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB;GACf,QAAQ;GACR,SAAS;GACV;EAED,UAAU;GACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB;GACD,QAAQ;IACN,OAAO;IACP,MAAM,OAAO;IACd;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,OAAO,OAAO,qBAAqB,QAAQ,OAAO;CAExD,MAAM,SAAS,OAAO,SAAS;CAE/B,MAAM,gBACJ,OAAO,WAAW,WAChB,oBAACC;EACC,KAAK;EACL,QAAQ;EACR,SAAS;EACT,KAAK;EACQ;EACb,OAAO;GACP,GAEF;CAGJ,MAAM,gBACJ,cACA,eAAe,iBACf,eAAe,mBACf,eAAe;CAEjB,MAAM,eAAe,cAEjB,QACE,oBAACC;EACQ;EACP,MAAM,2BAA4B,gBAAgB,OAAO,MAAO,OAAQ,OAAO;EAC/E,MAAM,YAAY,SAAS;EACd;GACb,GACA,aACD,QAAQ,QAAQ,aAAa,CAAC,MAAM,GAAG,EAAE,IAEzC,QAAQ,QAAQ,aAAa,EAElC;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAED,QACE,qBAACC;EACC,KAAK;EACL,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS,CAAC,EAAE,UAAU;EACvD,WAAW;EACN;EACE;EACD;EACN,KAAK,qBAAqB,gBAAgB;EAC1C,OAAO;GACL,YAAY,sBAAsB,CAAC,CAAC,QAAQ,aAAa,cAAc,MAAM;GAC7E,cAAc,UAAU,YAAY,QAAQ,OAAO,KAAK,QAAQ;GAChE,WAAW,WACP,GAAG,MAAM,cAAc,cAAc,iBAAiB,MAAM,kBAAkB,cAC9E;GACJ,OAAO,cAAc,cAAc,MAAM,YAAY;GACrD,QAAQ,MAAM,UAAU,YAAY;GACpC,UAAU,QAAQ,QAAQ,KAAM;GAChC,GAAG;GACJ;EACD,GAAI;aAEH,WACC,oBAACC;GAAO,WAAW,OAAO;GAAS,QAAQ;GAAQ,OAAO;aACxD,oBAACC;IAAK,MAAM;IAAS;KAAO;IACrB,EAEV,CAAC,sBAAsB;GACd;EAGjB;AAED,SAAO,cAAc;AAErB,qBAAeL"}
+{"version":3,"file":"Avatar.mjs","names":["Avatar","Img","FluentEmoji","AntAvatar","Center","Icon"],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport { Avatar as AntAvatar } from 'antd';\nimport { cssVar, cx, useTheme } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { readableColor } from 'polished';\nimport { isValidElement, memo, useMemo } from 'react';\n\nimport { Center } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\n\nimport { styles, variants } from './style';\nimport type { AvatarProps } from './type';\n\nconst Avatar = memo<AvatarProps>(\n  ({\n    bordered,\n    className,\n    avatar,\n    title,\n    animation,\n    borderedColor,\n    size = 48,\n    shape = 'square',\n    background,\n    style,\n    unoptimized,\n    alt,\n    variant = 'borderless',\n    shadow,\n    loading,\n    sliceText = true,\n    emojiScaleWithBackground = true,\n    ref,\n    ...rest\n  }) => {\n    const theme = useTheme();\n    const isStringAvatar = typeof avatar === 'string';\n\n    const isDefaultAntAvatar = useMemo(\n      () =>\n        Boolean(\n          avatar &&\n          (['/', 'http', 'data:'].some((index) => isStringAvatar && avatar.startsWith(index)) ||\n            isValidElement(avatar)),\n        ),\n      [avatar, isStringAvatar],\n    );\n\n    const emoji = useMemo(\n      () => avatar && !isDefaultAntAvatar && isStringAvatar && getEmoji(avatar),\n      [avatar, isStringAvatar, isDefaultAntAvatar],\n    );\n\n    const text = String(isDefaultAntAvatar ? title : avatar);\n\n    const imgAlt = alt || title || 'avatar';\n\n    const defualtAvatar =\n      typeof avatar === 'string' ? (\n        <Img\n          alt={imgAlt}\n          height={size}\n          loading={'lazy'}\n          src={avatar}\n          unoptimized={unoptimized}\n          width={size}\n        />\n      ) : (\n        avatar\n      );\n\n    const hasBackground =\n      background &&\n      background !== 'transparent' &&\n      background !== 'rgba(0,0,0,0)' &&\n      background !== null;\n\n    const customAvatar = useMemo(\n      () =>\n        emoji ? (\n          <FluentEmoji\n            emoji={emoji}\n            size={emojiScaleWithBackground ? (hasBackground ? size * 0.85 : size) : size * 0.85}\n            type={animation ? 'anim' : '3d'}\n            unoptimized={unoptimized}\n          />\n        ) : sliceText ? (\n          (text || title)?.toUpperCase().slice(0, 2)\n        ) : (\n          (text || title)?.toUpperCase()\n        ),\n      [\n        animation,\n        emoji,\n        hasBackground,\n        size,\n        sliceText,\n        text,\n        title,\n        unoptimized,\n        emojiScaleWithBackground,\n      ],\n    );\n\n    // Get actual color value for readableColor (CSS variables can't be parsed)\n    const actualColorForReadable = useMemo(() => {\n      const bgColor = background || theme.colorBorder;\n      // If background is a CSS variable, use theme.colorBorder as fallback\n      if (typeof bgColor === 'string' && bgColor.startsWith('var(')) {\n        return theme.colorBorder;\n      }\n      return bgColor;\n    }, [background, theme.colorBorder]);\n\n    return (\n      <AntAvatar\n        alt={imgAlt}\n        className={cx(variants({ shadow, variant }), className)}\n        draggable={false}\n        ref={ref}\n        shape={shape}\n        size={size}\n        src={isDefaultAntAvatar ? defualtAvatar : undefined}\n        style={{\n          background: isDefaultAntAvatar || !!emoji ? background : background || cssVar.colorBorder,\n          borderRadius: shape === 'square' && size && size < 24 ? '33%' : undefined,\n          boxShadow: bordered\n            ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px`\n            : undefined,\n          color: readableColor(actualColorForReadable),\n          cursor: rest?.onClick ? 'pointer' : undefined,\n          fontSize: size * (emoji ? 0.7 : 0.5),\n          ...style,\n        }}\n        {...rest}\n      >\n        {loading && (\n          <Center className={styles.loading} height={'100%'} width={'100%'}>\n            <Icon icon={Loader2} spin />\n          </Center>\n        )}\n        {!isDefaultAntAvatar && customAvatar}\n      </AntAvatar>\n    );\n  },\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAMA,WAAS,MACZ,EACC,UACA,WACA,QACA,OACA,WACA,eACA,OAAO,IACP,QAAQ,UACR,YACA,OACA,aACA,KACA,UAAU,cACV,QACA,SACA,YAAY,MACZ,2BAA2B,MAC3B,KACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,iBAAiB,OAAO,WAAW;CAEzC,MAAM,qBAAqB,cAEvB,QACE,WACC;EAAC;EAAK;EAAQ;EAAQ,CAAC,MAAM,UAAU,kBAAkB,OAAO,WAAW,MAAM,CAAC,IACjF,eAAe,OAAO,EACzB,EACH,CAAC,QAAQ,eAAe,CACzB;CAED,MAAM,QAAQ,cACN,UAAU,CAAC,sBAAsB,kBAAkB,SAAS,OAAO,EACzE;EAAC;EAAQ;EAAgB;EAAmB,CAC7C;CAED,MAAM,OAAO,OAAO,qBAAqB,QAAQ,OAAO;CAExD,MAAM,SAAS,OAAO,SAAS;CAE/B,MAAM,gBACJ,OAAO,WAAW,WAChB,oBAACC;EACC,KAAK;EACL,QAAQ;EACR,SAAS;EACT,KAAK;EACQ;EACb,OAAO;GACP,GAEF;CAGJ,MAAM,gBACJ,cACA,eAAe,iBACf,eAAe,mBACf,eAAe;CAEjB,MAAM,eAAe,cAEjB,QACE,oBAACC;EACQ;EACP,MAAM,2BAA4B,gBAAgB,OAAO,MAAO,OAAQ,OAAO;EAC/E,MAAM,YAAY,SAAS;EACd;GACb,GACA,aACD,QAAQ,QAAQ,aAAa,CAAC,MAAM,GAAG,EAAE,IAEzC,QAAQ,QAAQ,aAAa,EAElC;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,yBAAyB,cAAc;EAC3C,MAAM,UAAU,cAAc,MAAM;AAEpC,MAAI,OAAO,YAAY,YAAY,QAAQ,WAAW,OAAO,CAC3D,QAAO,MAAM;AAEf,SAAO;IACN,CAAC,YAAY,MAAM,YAAY,CAAC;AAEnC,QACE,qBAACC;EACC,KAAK;EACL,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS,CAAC,EAAE,UAAU;EACvD,WAAW;EACN;EACE;EACD;EACN,KAAK,qBAAqB,gBAAgB;EAC1C,OAAO;GACL,YAAY,sBAAsB,CAAC,CAAC,QAAQ,aAAa,cAAc,OAAO;GAC9E,cAAc,UAAU,YAAY,QAAQ,OAAO,KAAK,QAAQ;GAChE,WAAW,WACP,GAAG,OAAO,cAAc,cAAc,iBAAiB,OAAO,kBAAkB,cAChF;GACJ,OAAO,cAAc,uBAAuB;GAC5C,QAAQ,MAAM,UAAU,YAAY;GACpC,UAAU,QAAQ,QAAQ,KAAM;GAChC,GAAG;GACJ;EACD,GAAI;aAEH,WACC,oBAACC;GAAO,WAAW,OAAO;GAAS,QAAQ;GAAQ,OAAO;aACxD,oBAACC;IAAK,MAAM;IAAS;KAAO;IACrB,EAEV,CAAC,sBAAsB;GACd;EAGjB;AAED,SAAO,cAAc;AAErB,qBAAeL"}

package/es/Avatar/AvatarGroup/index.d.mts

@@ -1,8 +1,8 @@
 import { AvatarGroupProps } from "../type.mjs";
-import * as react18 from "react";
+import * as react39 from "react";
 
 //#region src/Avatar/AvatarGroup/index.d.ts
-declare const AvatarGroup: react18.NamedExoticComponent<AvatarGroupProps>;
+declare const AvatarGroup: react39.NamedExoticComponent<AvatarGroupProps>;
 //#endregion
 export { AvatarGroup };
 //# sourceMappingURL=index.d.mts.map

package/es/Avatar/AvatarGroup/index.mjs

@@ -2,13 +2,13 @@
 
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Avatar_default from "../Avatar.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
 
 //#region src/Avatar/AvatarGroup/index.tsx
 const AvatarGroup = memo(({ items, max, gap, variant = "borderless", bordered, shadow, size = 48, background, animation, draggable, classNames, shape, styles: customStyles, onClick, ref, zIndexReverse, ...rest }) => {
-	const { cx, styles, theme } = useStyles();
 	const avatars = max ? items.slice(0, max) : items;
 	const restAvatars = items.slice(max, items.length);
 	const gapValue = gap ?? Math.floor(-size / 4);
@@ -48,7 +48,7 @@ const AvatarGroup = memo(({ items, max, gap, variant = "borderless", bordered, s
 		}), max && restAvatars.length > 0 && /* @__PURE__ */ jsx(Avatar_default, {
 			...avatarProps,
 			avatar: `+${restAvatars.length}`,
-			background: theme.colorText,
+			background: cssVar.colorText,
 			className: cx(styles.avatar, styles.count, classNames?.count),
 			sliceText: false,
 			style: {

package/es/Avatar/AvatarGroup/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox","Avatar"],"sources":["../../../src/Avatar/AvatarGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport Avatar from '../Avatar';\nimport type { AvatarGroupProps } from '../type';\nimport { useStyles } from './style';\n\nconst AvatarGroup = memo<AvatarGroupProps>(\n  ({\n    items,\n    max,\n    gap,\n    variant = 'borderless',\n    bordered,\n    shadow,\n    size = 48,\n    background,\n    animation,\n    draggable,\n    classNames,\n    shape,\n    styles: customStyles,\n    onClick,\n    ref,\n    zIndexReverse,\n    ...rest\n  }) => {\n    const { cx, styles, theme } = useStyles();\n    const avatars = max ? items.slice(0, max) : items;\n    const restAvatars = items.slice(max, items.length);\n    const gapValue = gap ?? Math.floor(-size / 4);\n\n    const avatarProps = {\n      animation,\n      background,\n      bordered,\n      draggable,\n      shadow,\n      shape,\n      size,\n      variant,\n    };\n\n    return (\n      <Flexbox\n        gap={gap}\n        horizontal\n        ref={ref}\n        style={{\n          position: 'relative',\n        }}\n        {...rest}\n      >\n        {avatars.map((avatar, index) => {\n          const {\n            key,\n            style: avatarStyle,\n            className: avatarClassName,\n            ...restAvatarProps\n          } = avatar;\n          return (\n            <Avatar\n              className={cx(classNames?.avatar, avatarClassName, styles.avatar)}\n              key={key}\n              onClick={() => onClick?.({ item: avatar, key })}\n              style={{\n                marginLeft: index === 0 ? 0 : gapValue,\n                zIndex: zIndexReverse ? items.length - index : index,\n                ...customStyles?.avatar,\n                ...avatarStyle,\n              }}\n              {...avatarProps}\n              {...restAvatarProps}\n            />\n          );\n        })}\n        {max && restAvatars.length > 0 && (\n          <Avatar\n            {...avatarProps}\n            avatar={`+${restAvatars.length}`}\n            background={theme.colorText}\n            className={cx(styles.avatar, styles.count, classNames?.count)}\n            sliceText={false}\n            style={{\n              marginLeft: gapValue,\n              zIndex: zIndexReverse ? 0 : avatars.length,\n              ...customStyles?.count,\n            }}\n          />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport default AvatarGroup;\n"],"mappings":";;;;;;;;;AAUA,MAAM,cAAc,MACjB,EACC,OACA,KACA,KACA,UAAU,cACV,UACA,QACA,OAAO,IACP,YACA,WACA,WACA,YACA,OACA,QAAQ,cACR,SACA,KACA,eACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,QAAQ,UAAU,WAAW;CACzC,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG;CAC5C,MAAM,cAAc,MAAM,MAAM,KAAK,MAAM,OAAO;CAClD,MAAM,WAAW,OAAO,KAAK,MAAM,CAAC,OAAO,EAAE;CAE7C,MAAM,cAAc;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAED,QACE,qBAACA;EACM;EACL;EACK;EACL,OAAO,EACL,UAAU,YACX;EACD,GAAI;aAEH,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,EACJ,KACA,OAAO,aACP,WAAW,iBACX,GAAG,oBACD;AACJ,UACE,oBAACC;IACC,WAAW,GAAG,YAAY,QAAQ,iBAAiB,OAAO,OAAO;IAEjE,eAAe,UAAU;KAAE,MAAM;KAAQ;KAAK,CAAC;IAC/C,OAAO;KACL,YAAY,UAAU,IAAI,IAAI;KAC9B,QAAQ,gBAAgB,MAAM,SAAS,QAAQ;KAC/C,GAAG,cAAc;KACjB,GAAG;KACJ;IACD,GAAI;IACJ,GAAI;MATC,IAUL;IAEJ,EACD,OAAO,YAAY,SAAS,KAC3B,oBAACA;GACC,GAAI;GACJ,QAAQ,IAAI,YAAY;GACxB,YAAY,MAAM;GAClB,WAAW,GAAG,OAAO,QAAQ,OAAO,OAAO,YAAY,MAAM;GAC7D,WAAW;GACX,OAAO;IACL,YAAY;IACZ,QAAQ,gBAAgB,IAAI,QAAQ;IACpC,GAAG,cAAc;IAClB;IACD;GAEI;EAGf;AAED,YAAY,cAAc;AAE1B,0BAAe"}
+{"version":3,"file":"index.mjs","names":["Flexbox","Avatar"],"sources":["../../../src/Avatar/AvatarGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport Avatar from '../Avatar';\nimport type { AvatarGroupProps } from '../type';\nimport { styles } from './style';\n\nconst AvatarGroup = memo<AvatarGroupProps>(\n  ({\n    items,\n    max,\n    gap,\n    variant = 'borderless',\n    bordered,\n    shadow,\n    size = 48,\n    background,\n    animation,\n    draggable,\n    classNames,\n    shape,\n    styles: customStyles,\n    onClick,\n    ref,\n    zIndexReverse,\n    ...rest\n  }) => {\n    const avatars = max ? items.slice(0, max) : items;\n    const restAvatars = items.slice(max, items.length);\n    const gapValue = gap ?? Math.floor(-size / 4);\n\n    const avatarProps = {\n      animation,\n      background,\n      bordered,\n      draggable,\n      shadow,\n      shape,\n      size,\n      variant,\n    };\n\n    return (\n      <Flexbox\n        gap={gap}\n        horizontal\n        ref={ref}\n        style={{\n          position: 'relative',\n        }}\n        {...rest}\n      >\n        {avatars.map((avatar, index) => {\n          const {\n            key,\n            style: avatarStyle,\n            className: avatarClassName,\n            ...restAvatarProps\n          } = avatar;\n          return (\n            <Avatar\n              className={cx(classNames?.avatar, avatarClassName, styles.avatar)}\n              key={key}\n              onClick={() => onClick?.({ item: avatar, key })}\n              style={{\n                marginLeft: index === 0 ? 0 : gapValue,\n                zIndex: zIndexReverse ? items.length - index : index,\n                ...customStyles?.avatar,\n                ...avatarStyle,\n              }}\n              {...avatarProps}\n              {...restAvatarProps}\n            />\n          );\n        })}\n        {max && restAvatars.length > 0 && (\n          <Avatar\n            {...avatarProps}\n            avatar={`+${restAvatars.length}`}\n            background={cssVar.colorText}\n            className={cx(styles.avatar, styles.count, classNames?.count)}\n            sliceText={false}\n            style={{\n              marginLeft: gapValue,\n              zIndex: zIndexReverse ? 0 : avatars.length,\n              ...customStyles?.count,\n            }}\n          />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport default AvatarGroup;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,cAAc,MACjB,EACC,OACA,KACA,KACA,UAAU,cACV,UACA,QACA,OAAO,IACP,YACA,WACA,WACA,YACA,OACA,QAAQ,cACR,SACA,KACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG;CAC5C,MAAM,cAAc,MAAM,MAAM,KAAK,MAAM,OAAO;CAClD,MAAM,WAAW,OAAO,KAAK,MAAM,CAAC,OAAO,EAAE;CAE7C,MAAM,cAAc;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAED,QACE,qBAACA;EACM;EACL;EACK;EACL,OAAO,EACL,UAAU,YACX;EACD,GAAI;aAEH,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,EACJ,KACA,OAAO,aACP,WAAW,iBACX,GAAG,oBACD;AACJ,UACE,oBAACC;IACC,WAAW,GAAG,YAAY,QAAQ,iBAAiB,OAAO,OAAO;IAEjE,eAAe,UAAU;KAAE,MAAM;KAAQ;KAAK,CAAC;IAC/C,OAAO;KACL,YAAY,UAAU,IAAI,IAAI;KAC9B,QAAQ,gBAAgB,MAAM,SAAS,QAAQ;KAC/C,GAAG,cAAc;KACjB,GAAG;KACJ;IACD,GAAI;IACJ,GAAI;MATC,IAUL;IAEJ,EACD,OAAO,YAAY,SAAS,KAC3B,oBAACA;GACC,GAAI;GACJ,QAAQ,IAAI,YAAY;GACxB,YAAY,OAAO;GACnB,WAAW,GAAG,OAAO,QAAQ,OAAO,OAAO,YAAY,MAAM;GAC7D,WAAW;GACX,OAAO;IACL,YAAY;IACZ,QAAQ,gBAAgB,IAAI,QAAQ;IACpC,GAAG,cAAc;IAClB;IACD;GAEI;EAGf;AAED,YAAY,cAAc;AAE1B,0BAAe"}

package/es/Avatar/AvatarGroup/style.mjs

@@ -1,21 +1,22 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/Avatar/AvatarGroup/style.ts
-const useStyles = createStyles(({ css: css$1, token, prefixCls }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		avatar: css$1`
-      box-shadow: 0 0 0 2px ${token.colorBgLayout};
+      box-shadow: 0 0 0 2px ${cssVar$1.colorBgLayout};
 
       &:hover {
         transform: translateY(-10%);
       }
     `,
 		count: css$1`
-      &.${prefixCls}-avatar {
-        background: ${token.colorText};
-        > .${prefixCls}-avatar-string {
+      &[class*='ant-avatar'] {
+        background: ${cssVar$1.colorText};
+
+        > [class*='ant-avatar-string'] {
           transform: scale(0.8) !important;
-          color: ${token.colorBgLayout};
+          color: ${cssVar$1.colorBgLayout};
         }
       }
     `
@@ -23,5 +24,5 @@ const useStyles = createStyles(({ css: css$1, token, prefixCls }) => {
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/Avatar/AvatarGroup/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/Avatar/AvatarGroup/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token, prefixCls }) => {\n  return {\n    avatar: css`\n      box-shadow: 0 0 0 2px ${token.colorBgLayout};\n\n      &:hover {\n        transform: translateY(-10%);\n      }\n    `,\n    count: css`\n      &.${prefixCls}-avatar {\n        background: ${token.colorText};\n        > .${prefixCls}-avatar-string {\n          transform: scale(0.8) !important;\n          color: ${token.colorBgLayout};\n        }\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,gBAAgB;AACnE,QAAO;EACL,QAAQ,KAAG;8BACe,MAAM,cAAc;;;;;;EAM9C,OAAO,KAAG;UACJ,UAAU;sBACE,MAAM,UAAU;aACzB,UAAU;;mBAEJ,MAAM,cAAc;;;;EAIpC;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/Avatar/AvatarGroup/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    avatar: css`\n      box-shadow: 0 0 0 2px ${cssVar.colorBgLayout};\n\n      &:hover {\n        transform: translateY(-10%);\n      }\n    `,\n    count: css`\n      &[class*='ant-avatar'] {\n        background: ${cssVar.colorText};\n\n        > [class*='ant-avatar-string'] {\n          transform: scale(0.8) !important;\n          color: ${cssVar.colorBgLayout};\n        }\n      }\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,QAAQ,KAAG;8BACeA,SAAO,cAAc;;;;;;EAM/C,OAAO,KAAG;;sBAEQA,SAAO,UAAU;;;;mBAIpBA,SAAO,cAAc;;;;EAIrC;EACD"}

package/es/Avatar/style.mjs

@@ -1,20 +1,23 @@
-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/Avatar/style.ts
-const useStyles = createStyles(({ stylish, css: css$1, token, prefixCls }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
-		borderless: stylish.variantBorderlessWithoutHover,
-		filled: stylish.variantFilledWithoutHover,
+		borderless: staticStylish.variantBorderlessWithoutHover,
+		filled: staticStylish.variantFilledWithoutHover,
 		loading: css$1`
       position: absolute;
       color: #fff;
-      background: ${token.colorBgMask};
+      background: ${cssVar$1.colorBgMask};
     `,
-		outlined: stylish.variantOutlinedWithoutHover,
+		outlined: staticStylish.variantOutlinedWithoutHover,
 		root: css$1`
       flex: none;
       background: transparent;
-      &.${prefixCls}-avatar {
+
+      &[class*='ant-avatar'] {
         user-select: none;
 
         overflow: hidden;
@@ -24,7 +27,7 @@ const useStyles = createStyles(({ stylish, css: css$1, token, prefixCls }) => {
 
         border: none;
 
-        .${prefixCls}-avatar-string {
+        [class*='ant-avatar-string'] {
           transform: none !important;
 
           overflow: hidden;
@@ -43,10 +46,27 @@ const useStyles = createStyles(({ stylish, css: css$1, token, prefixCls }) => {
         }
       }
     `,
-		shadow: stylish.shadow
+		shadow: staticStylish.shadow
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: {
+		shadow: false,
+		variant: "borderless"
+	},
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { styles, variants };
 //# sourceMappingURL=style.mjs.map

package/es/Avatar/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Avatar/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ stylish, css, token, prefixCls }) => {\n  return {\n    borderless: stylish.variantBorderlessWithoutHover,\n    filled: stylish.variantFilledWithoutHover,\n    loading: css`\n      position: absolute;\n      color: #fff;\n      background: ${token.colorBgMask};\n    `,\n    outlined: stylish.variantOutlinedWithoutHover,\n    root: css`\n      flex: none;\n      background: transparent;\n      &.${prefixCls}-avatar {\n        user-select: none;\n\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        border: none;\n\n        .${prefixCls}-avatar-string {\n          transform: none !important;\n\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          width: 100%;\n          height: 100%;\n          padding: 0;\n\n          font-size: inherit;\n          font-weight: bolder;\n          line-height: 1;\n          color: inherit;\n        }\n      }\n    `,\n    shadow: stylish.shadow,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,SAAS,YAAK,OAAO,gBAAgB;AAC5E,QAAO;EACL,YAAY,QAAQ;EACpB,QAAQ,QAAQ;EAChB,SAAS,KAAG;;;oBAGI,MAAM,YAAY;;EAElC,UAAU,QAAQ;EAClB,MAAM,KAAG;;;UAGH,UAAU;;;;;;;;;;WAUT,UAAU;;;;;;;;;;;;;;;;;;;EAmBjB,QAAQ,QAAQ;EACjB;EACD"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/Avatar/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: lobeStaticStylish.variantFilledWithoutHover,\n    loading: css`\n      position: absolute;\n      color: #fff;\n      background: ${cssVar.colorBgMask};\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    root: css`\n      flex: none;\n      background: transparent;\n\n      &[class*='ant-avatar'] {\n        user-select: none;\n\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        border: none;\n\n        [class*='ant-avatar-string'] {\n          transform: none !important;\n\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          width: 100%;\n          height: 100%;\n          padding: 0;\n\n          font-size: inherit;\n          font-weight: bolder;\n          line-height: 1;\n          color: inherit;\n        }\n      }\n    `,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    shadow: false,\n    variant: 'borderless',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,YAAYA,cAAkB;EAC9B,QAAQA,cAAkB;EAC1B,SAAS,KAAG;;;oBAGIC,SAAO,YAAY;;EAEnC,UAAUD,cAAkB;EAC5B,MAAM,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCT,QAAQA,cAAkB;EAC3B;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,QAAQ;EACR,SAAS;EACV;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACF;CAEF,CAAC"}

package/es/Block/Block.mjs

@@ -1,59 +1,14 @@
 'use client';
 
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
-import { useMemo } from "react";
+import { variants } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { cx } from "antd-style";
 
 //#region src/Block/Block.tsx
 const Block = ({ className, variant = "filled", shadow, glass, children, clickable, ref, ...rest }) => {
-	const { cx, styles } = useStyles();
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
-		className: cx(useMemo(() => cva(styles.root, {
-			compoundVariants: [
-				{
-					class: styles.clickableBorderless,
-					clickable: true,
-					variant: "borderless"
-				},
-				{
-					class: styles.clickableFilled,
-					clickable: true,
-					variant: "filled"
-				},
-				{
-					class: styles.clickableOutlined,
-					clickable: true,
-					variant: "outlined"
-				}
-			],
-			defaultVariants: {
-				clickable: false,
-				glass: false,
-				shadow: false,
-				variant: "filled"
-			},
-			variants: {
-				variant: {
-					filled: styles.filled,
-					outlined: styles.outlined,
-					borderless: styles.borderless
-				},
-				clickable: {
-					false: null,
-					true: styles.clickableRoot
-				},
-				glass: {
-					false: null,
-					true: styles.glass
-				},
-				shadow: {
-					false: null,
-					true: styles.shadow
-				}
-			}
-		}), [styles])({
+		className: cx(variants({
 			clickable,
 			glass,
 			shadow,

package/es/Block/Block.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Block.mjs","names":["Block: FC<BlockProps>","Flexbox"],"sources":["../../src/Block/Block.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { type FC, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from './style';\nimport type { BlockProps } from './type';\n\nconst Block: FC<BlockProps> = ({\n  className,\n  variant = 'filled',\n  shadow,\n  glass,\n  children,\n  clickable,\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.clickableBorderless,\n            clickable: true,\n            variant: 'borderless',\n          },\n          {\n            class: styles.clickableFilled,\n            clickable: true,\n            variant: 'filled',\n          },\n          {\n            class: styles.clickableOutlined,\n            clickable: true,\n            variant: 'outlined',\n          },\n        ],\n        defaultVariants: {\n          clickable: false,\n          glass: false,\n          shadow: false,\n          variant: 'filled',\n        },\n        /* eslint-disable sort-keys-fix/sort-keys-fix */\n        variants: {\n          variant: {\n            filled: styles.filled,\n            outlined: styles.outlined,\n            borderless: styles.borderless,\n          },\n          clickable: {\n            false: null,\n            true: styles.clickableRoot,\n          },\n          glass: {\n            false: null,\n            true: styles.glass,\n          },\n          shadow: {\n            false: null,\n            true: styles.shadow,\n          },\n        },\n        /* eslint-enable sort-keys-fix/sort-keys-fix */\n      }),\n    [styles],\n  );\n\n  return (\n    <Flexbox\n      className={cx(variants({ clickable, glass, shadow, variant }), className)}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nBlock.displayName = 'Block';\n\nexport default Block;\n"],"mappings":";;;;;;;;;AAUA,MAAMA,SAAyB,EAC7B,WACA,UAAU,UACV,QACA,OACA,UACA,WACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;AAqDlC,QACE,oBAACC;EACC,WAAW,GArDE,cAEb,IAAI,OAAO,MAAM;GACf,kBAAkB;IAChB;KACE,OAAO,OAAO;KACd,WAAW;KACX,SAAS;KACV;IACD;KACE,OAAO,OAAO;KACd,WAAW;KACX,SAAS;KACV;IACD;KACE,OAAO,OAAO;KACd,WAAW;KACX,SAAS;KACV;IACF;GACD,iBAAiB;IACf,WAAW;IACX,OAAO;IACP,QAAQ;IACR,SAAS;IACV;GAED,UAAU;IACR,SAAS;KACP,QAAQ,OAAO;KACf,UAAU,OAAO;KACjB,YAAY,OAAO;KACpB;IACD,WAAW;KACT,OAAO;KACP,MAAM,OAAO;KACd;IACD,OAAO;KACL,OAAO;KACP,MAAM,OAAO;KACd;IACD,QAAQ;KACN,OAAO;KACP,MAAM,OAAO;KACd;IACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAI0B;GAAE;GAAW;GAAO;GAAQ;GAAS,CAAC,EAAE,UAAU;EACpE;EACL,GAAI;EAEH;GACO;;AAId,MAAM,cAAc;AAEpB,oBAAe"}
+{"version":3,"file":"Block.mjs","names":["Block: FC<BlockProps>","Flexbox"],"sources":["../../src/Block/Block.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { variants } from './style';\nimport type { BlockProps } from './type';\n\nconst Block: FC<BlockProps> = ({\n  className,\n  variant = 'filled',\n  shadow,\n  glass,\n  children,\n  clickable,\n  ref,\n  ...rest\n}) => {\n  return (\n    <Flexbox\n      className={cx(variants({ clickable, glass, shadow, variant }), className)}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nBlock.displayName = 'Block';\n\nexport default Block;\n"],"mappings":";;;;;;;;AAUA,MAAMA,SAAyB,EAC7B,WACA,UAAU,UACV,QACA,OACA,UACA,WACA,KACA,GAAG,WACC;AACJ,QACE,oBAACC;EACC,WAAW,GAAG,SAAS;GAAE;GAAW;GAAO;GAAQ;GAAS,CAAC,EAAE,UAAU;EACpE;EACL,GAAI;EAEH;GACO;;AAId,MAAM,cAAc;AAEpB,oBAAe"}