@lobehub/ui 4.3.2 → 4.3.3

package/es/Select/Select.mjs

@@ -1,34 +1,20 @@
 'use client';
 
 import Icon_default from "../Icon/Icon.mjs";
-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 { Select } from "antd";
-import { cva } from "class-variance-authority";
+import { cx, useThemeMode } from "antd-style";
 import { ChevronDownIcon } from "lucide-react";
 
 //#region src/Select/Select.tsx
 const Input$1 = memo(({ ref, variant, suffixIconProps, suffixIcon, shadow, className, ...rest }) => {
-	const { styles, cx, theme } = useStyles();
+	const { isDarkMode } = useThemeMode();
 	return /* @__PURE__ */ jsx(Select, {
-		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),
 		ref,
 		suffixIcon: /* @__PURE__ */ jsx(Icon_default, {
@@ -40,7 +26,7 @@ const Input$1 = memo(({ ref, variant, suffixIconProps, suffixIcon, shadow, class
 				...suffixIconProps?.style
 			}
 		}),
-		variant: variant || (theme.isDarkMode ? "filled" : "outlined"),
+		variant: variant || (isDarkMode ? "filled" : "outlined"),
 		...rest
 	});
 });

package/es/Select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":["Input","AntSelect","Icon"],"sources":["../../src/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport { Select as AntSelect } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useStyles } from './style';\nimport type { SelectProps } from './type';\n\nconst Input = memo<SelectProps>(\n  ({ ref, variant, suffixIconProps, suffixIcon, 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      <AntSelect\n        className={cx(\n          variants({ shadow, variant: variant || (theme.isDarkMode ? 'filled' : 'outlined') }),\n          className,\n        )}\n        ref={ref}\n        suffixIcon={\n          <Icon\n            icon={suffixIcon || ChevronDownIcon}\n            size={'small'}\n            {...suffixIconProps}\n            style={{\n              pointerEvents: 'none',\n              ...suffixIconProps?.style,\n            }}\n          />\n        }\n        variant={variant || (theme.isDarkMode ? 'filled' : 'outlined')}\n        {...rest}\n      />\n    );\n  },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,UAAQ,MACX,EAAE,KAAK,SAAS,iBAAiB,YAAY,QAAQ,WAAW,GAAG,WAAW;CAC7E,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;EACI;EACL,YACE,oBAACC;GACC,MAAM,cAAc;GACpB,MAAM;GACN,GAAI;GACJ,OAAO;IACL,eAAe;IACf,GAAG,iBAAiB;IACrB;IACD;EAEJ,SAAS,YAAY,MAAM,aAAa,WAAW;EACnD,GAAI;GACJ;EAGP;AAED,QAAM,cAAc;AAEpB,qBAAeF"}
+{"version":3,"file":"Select.mjs","names":["Input","AntSelect","Icon"],"sources":["../../src/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport { Select as AntSelect } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { variants } from './style';\nimport type { SelectProps } from './type';\n\nconst Input = memo<SelectProps>(\n  ({ ref, variant, suffixIconProps, suffixIcon, shadow, className, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n\n    return (\n      <AntSelect\n        className={cx(\n          variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n          className,\n        )}\n        ref={ref}\n        suffixIcon={\n          <Icon\n            icon={suffixIcon || ChevronDownIcon}\n            size={'small'}\n            {...suffixIconProps}\n            style={{\n              pointerEvents: 'none',\n              ...suffixIconProps?.style,\n            }}\n          />\n        }\n        variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n        {...rest}\n      />\n    );\n  },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,UAAQ,MACX,EAAE,KAAK,SAAS,iBAAiB,YAAY,QAAQ,WAAW,GAAG,WAAW;CAC7E,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACC;EACC,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACI;EACL,YACE,oBAACC;GACC,MAAM,cAAc;GACpB,MAAM;GACN,GAAI;GACJ,OAAO;IACL,eAAe;IACf,GAAG,iBAAiB;IACrB;IACD;EAEJ,SAAS,YAAY,aAAa,WAAW;EAC7C,GAAI;GACJ;EAGP;AAED,QAAM,cAAc;AAEpB,qBAAeF"}

package/es/Select/style.mjs

@@ -1,48 +1,65 @@
-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/Select/style.ts
-const useStyles = createStyles(({ prefixCls, token, css: css$1, stylish }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$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`
-      &.${prefixCls}-select {
-        &.${prefixCls}-select-focused {
-          > .${prefixCls}-select-selector {
-            background: ${token.colorFillTertiary} !important;
+      &[class*='ant-select'] {
+        &[class*='ant-select-focused'] {
+          > [class*='ant-select-selector'] {
+            background: ${cssVar$1.colorFillTertiary} !important;
           }
         }
       }
     `,
 		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/Select/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Select/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ prefixCls, token, 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      &.${prefixCls}-select {\n        &.${prefixCls}-select-focused {\n          > .${prefixCls}-select-selector {\n            background: ${token.colorFillTertiary} !important;\n          }\n        }\n      }\n    `,\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,OAAO,YAAK,cAAc;AAC5E,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;UACH,UAAU;YACR,UAAU;eACP,UAAU;0BACC,MAAM,kBAAkB;;;;;EAK9C,QAAQ,KAAG;UACL,UAAU;aACP,UAAU;YACX,QAAQ,OAAO;;;;EAIxB;EACD"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/Select/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: 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      &[class*='ant-select'] {\n        &[class*='ant-select-focused'] {\n          > [class*='ant-select-selector'] {\n            background: ${cssVar.colorFillTertiary} !important;\n          }\n        }\n      }\n    `,\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,YAAK,uBAAa;AAC5D,QAAO;EACL,YAAY,KAAG;;;YAGPA,cAAkB,kBAAkB;;;;EAI5C,QAAQ,KAAG;;;YAGHA,cAAkB,cAAc;;;;EAIxC,UAAU,KAAG;;;YAGLA,cAAkB,gBAAgB;;;;EAI1C,MAAM,KAAG;;;;0BAIaC,SAAO,kBAAkB;;;;;EAK/C,QAAQ,KAAG;;;YAGHD,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/SideNav/SideNav.d.mts

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

package/es/SideNav/SideNav.mjs

@@ -1,13 +1,13 @@
 'use client';
 
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/SideNav/SideNav.tsx
 const SideNav = memo(({ className, avatar, topActions, bottomActions, ...rest }) => {
-	const { styles, cx } = useStyles();
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		align: "center",
 		className: cx(styles, className),

package/es/SideNav/SideNav.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.mjs","names":["Flexbox"],"sources":["../../src/SideNav/SideNav.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from './style';\nimport type { SideNavProps } from './type';\n\nconst SideNav = memo<SideNavProps>(({ className, avatar, topActions, bottomActions, ...rest }) => {\n  const { styles, cx } = useStyles();\n\n  return (\n    <Flexbox\n      align={'center'}\n      className={cx(styles, className)}\n      flex={'none'}\n      justify={'space-between'}\n      {...rest}\n    >\n      <Flexbox align=\"center\" direction=\"vertical\" gap={12}>\n        {avatar}\n        <Flexbox align=\"center\" direction=\"vertical\" gap={8}>\n          {topActions}\n        </Flexbox>\n      </Flexbox>\n      <Flexbox align=\"center\" direction=\"vertical\" gap={4}>\n        {bottomActions}\n      </Flexbox>\n    </Flexbox>\n  );\n});\n\nSideNav.displayName = 'SideNav';\n\nexport default SideNav;\n"],"mappings":";;;;;;;;AASA,MAAM,UAAU,MAAoB,EAAE,WAAW,QAAQ,YAAY,eAAe,GAAG,WAAW;CAChG,MAAM,EAAE,QAAQ,OAAO,WAAW;AAElC,QACE,qBAACA;EACC,OAAO;EACP,WAAW,GAAG,QAAQ,UAAU;EAChC,MAAM;EACN,SAAS;EACT,GAAI;aAEJ,qBAACA;GAAQ,OAAM;GAAS,WAAU;GAAW,KAAK;cAC/C,QACD,oBAACA;IAAQ,OAAM;IAAS,WAAU;IAAW,KAAK;cAC/C;KACO;IACF,EACV,oBAACA;GAAQ,OAAM;GAAS,WAAU;GAAW,KAAK;aAC/C;IACO;GACF;EAEZ;AAEF,QAAQ,cAAc;AAEtB,sBAAe"}
+{"version":3,"file":"SideNav.mjs","names":["Flexbox"],"sources":["../../src/SideNav/SideNav.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { SideNavProps } from './type';\n\nconst SideNav = memo<SideNavProps>(({ className, avatar, topActions, bottomActions, ...rest }) => {\n  return (\n    <Flexbox\n      align={'center'}\n      className={cx(styles, className)}\n      flex={'none'}\n      justify={'space-between'}\n      {...rest}\n    >\n      <Flexbox align=\"center\" direction=\"vertical\" gap={12}>\n        {avatar}\n        <Flexbox align=\"center\" direction=\"vertical\" gap={8}>\n          {topActions}\n        </Flexbox>\n      </Flexbox>\n      <Flexbox align=\"center\" direction=\"vertical\" gap={4}>\n        {bottomActions}\n      </Flexbox>\n    </Flexbox>\n  );\n});\n\nSideNav.displayName = 'SideNav';\n\nexport default SideNav;\n"],"mappings":";;;;;;;;;AAUA,MAAM,UAAU,MAAoB,EAAE,WAAW,QAAQ,YAAY,eAAe,GAAG,WAAW;AAChG,QACE,qBAACA;EACC,OAAO;EACP,WAAW,GAAG,QAAQ,UAAU;EAChC,MAAM;EACN,SAAS;EACT,GAAI;aAEJ,qBAACA;GAAQ,OAAM;GAAS,WAAU;GAAW,KAAK;cAC/C,QACD,oBAACA;IAAQ,OAAM;IAAS,WAAU;IAAW,KAAK;cAC/C;KACO;IACF,EACV,oBAACA;GAAQ,OAAM;GAAS,WAAU;GAAW,KAAK;aAC/C;IACO;GACF;EAEZ;AAEF,QAAQ,cAAc;AAEtB,sBAAe"}

package/es/SideNav/style.mjs

@@ -1,17 +1,17 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/SideNav/style.ts
-const useStyles = createStyles(({ css: css$1, token }) => css$1`
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => css$1`
     width: 58px;
     height: 100%;
     min-height: 640px;
     padding-block: 12px;
     padding-inline: 0;
-    border-inline-end: 1px solid ${token.colorBorderSecondary};
+    border-inline-end: 1px solid ${cssVar$1.colorBorderSecondary};
 
-    background: ${token.colorBgContainer};
+    background: ${cssVar$1.colorBgContainer};
   `);
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/SideNav/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/SideNav/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(\n  ({ css, token }) => css`\n    width: 58px;\n    height: 100%;\n    min-height: 640px;\n    padding-block: 12px;\n    padding-inline: 0;\n    border-inline-end: 1px solid ${token.colorBorderSecondary};\n\n    background: ${token.colorBgContainer};\n  `,\n);\n"],"mappings":";;;AAEA,MAAa,YAAY,cACtB,EAAE,YAAK,YAAY,KAAG;;;;;;mCAMU,MAAM,qBAAqB;;kBAE5C,MAAM,iBAAiB;IAExC"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/SideNav/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(\n  ({ css, cssVar }) => css`\n    width: 58px;\n    height: 100%;\n    min-height: 640px;\n    padding-block: 12px;\n    padding-inline: 0;\n    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n\n    background: ${cssVar.colorBgContainer};\n  `,\n);\n"],"mappings":";;;AAEA,MAAa,SAAS,oBACnB,EAAE,YAAK,uBAAa,KAAG;;;;;;mCAMSA,SAAO,qBAAqB;;kBAE7CA,SAAO,iBAAiB;IAEzC"}

package/es/Skeleton/Skeleton.mjs

@@ -1,15 +1,15 @@
 'use client';
 
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import SkeletonAvatar_default from "./SkeletonAvatar.mjs";
 import SkeletonParagraph_default from "./SkeletonParagraph.mjs";
 import SkeletonTitle_default from "./SkeletonTitle.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/Skeleton/Skeleton.tsx
 const Skeleton = ({ active, avatar = false, title = true, paragraph = true, className, classNames, styles: customStyles, style, width, height, gap = 16, ...rest }) => {
-	const { cx, styles } = useStyles();
 	const showAvatar = Boolean(avatar);
 	const showTitle = Boolean(title);
 	const showParagraph = Boolean(paragraph);

package/es/Skeleton/Skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.mjs","names":["Skeleton: FC<SkeletonProps>","Flexbox","SkeletonAvatar","SkeletonTitle","SkeletonParagraph"],"sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonAvatar from './SkeletonAvatar';\nimport SkeletonParagraph from './SkeletonParagraph';\nimport SkeletonTitle from './SkeletonTitle';\nimport { useStyles } from './style';\nimport type { SkeletonProps } from './type';\n\nconst Skeleton: FC<SkeletonProps> = ({\n  active,\n  avatar = false,\n  title = true,\n  paragraph = true,\n  className,\n  classNames,\n  styles: customStyles,\n  style,\n  width,\n  height,\n  gap = 16,\n  ...rest\n}) => {\n  const { cx, styles } = useStyles();\n  const showAvatar = Boolean(avatar);\n  const showTitle = Boolean(title);\n  const showParagraph = Boolean(paragraph);\n  const avatarProps = typeof avatar === 'object' ? avatar : undefined;\n  const titleProps = typeof title === 'object' ? title : undefined;\n  const paragraphProps = typeof paragraph === 'object' ? paragraph : undefined;\n  const rootStyle = {\n    ...style,\n    ...customStyles?.root,\n    ...(width !== undefined ? { width } : {}),\n    ...(height !== undefined ? { height } : {}),\n  };\n\n  const avatarActive = avatarProps?.active ?? active;\n  const titleActive = titleProps?.active ?? active;\n  const paragraphActive = paragraphProps?.active ?? active;\n\n  return (\n    <Flexbox\n      align={showParagraph ? 'flex-start' : 'center'}\n      className={cx(className, classNames?.root)}\n      gap={gap}\n      horizontal\n      style={rootStyle}\n      width={'100%'}\n      {...rest}\n    >\n      {showAvatar && (\n        <SkeletonAvatar\n          {...avatarProps}\n          active={avatarActive}\n          className={cx(styles.avatar, classNames?.avatar, avatarProps?.className)}\n          style={{\n            ...avatarProps?.style,\n            ...customStyles?.avatar,\n          }}\n        />\n      )}\n      <Flexbox gap={gap} width={'100%'}>\n        {showTitle && (\n          <SkeletonTitle\n            {...titleProps}\n            active={titleActive}\n            className={cx(classNames?.title, titleProps?.className)}\n            style={{\n              ...titleProps?.style,\n              ...customStyles?.title,\n            }}\n          />\n        )}\n        {showParagraph && (\n          <SkeletonParagraph\n            {...paragraphProps}\n            active={paragraphActive}\n            className={cx(classNames?.paragraph, paragraphProps?.className)}\n            style={{\n              ...paragraphProps?.style,\n              ...customStyles?.paragraph,\n            }}\n          />\n        )}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nSkeleton.displayName = 'Skeleton';\n\nexport default Skeleton;\n"],"mappings":";;;;;;;;;;AAYA,MAAMA,YAA+B,EACnC,QACA,SAAS,OACT,QAAQ,MACR,YAAY,MACZ,WACA,YACA,QAAQ,cACR,OACA,OACA,QACA,MAAM,IACN,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;CAClC,MAAM,aAAa,QAAQ,OAAO;CAClC,MAAM,YAAY,QAAQ,MAAM;CAChC,MAAM,gBAAgB,QAAQ,UAAU;CACxC,MAAM,cAAc,OAAO,WAAW,WAAW,SAAS;CAC1D,MAAM,aAAa,OAAO,UAAU,WAAW,QAAQ;CACvD,MAAM,iBAAiB,OAAO,cAAc,WAAW,YAAY;CACnE,MAAM,YAAY;EAChB,GAAG;EACH,GAAG,cAAc;EACjB,GAAI,UAAU,SAAY,EAAE,OAAO,GAAG,EAAE;EACxC,GAAI,WAAW,SAAY,EAAE,QAAQ,GAAG,EAAE;EAC3C;CAED,MAAM,eAAe,aAAa,UAAU;CAC5C,MAAM,cAAc,YAAY,UAAU;CAC1C,MAAM,kBAAkB,gBAAgB,UAAU;AAElD,QACE,qBAACC;EACC,OAAO,gBAAgB,eAAe;EACtC,WAAW,GAAG,WAAW,YAAY,KAAK;EACrC;EACL;EACA,OAAO;EACP,OAAO;EACP,GAAI;aAEH,cACC,oBAACC;GACC,GAAI;GACJ,QAAQ;GACR,WAAW,GAAG,OAAO,QAAQ,YAAY,QAAQ,aAAa,UAAU;GACxE,OAAO;IACL,GAAG,aAAa;IAChB,GAAG,cAAc;IAClB;IACD,EAEJ,qBAACD;GAAa;GAAK,OAAO;cACvB,aACC,oBAACE;IACC,GAAI;IACJ,QAAQ;IACR,WAAW,GAAG,YAAY,OAAO,YAAY,UAAU;IACvD,OAAO;KACL,GAAG,YAAY;KACf,GAAG,cAAc;KAClB;KACD,EAEH,iBACC,oBAACC;IACC,GAAI;IACJ,QAAQ;IACR,WAAW,GAAG,YAAY,WAAW,gBAAgB,UAAU;IAC/D,OAAO;KACL,GAAG,gBAAgB;KACnB,GAAG,cAAc;KAClB;KACD;IAEI;GACF;;AAId,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"Skeleton.mjs","names":["Skeleton: FC<SkeletonProps>","Flexbox","SkeletonAvatar","SkeletonTitle","SkeletonParagraph"],"sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonAvatar from './SkeletonAvatar';\nimport SkeletonParagraph from './SkeletonParagraph';\nimport SkeletonTitle from './SkeletonTitle';\nimport { styles } from './style';\nimport type { SkeletonProps } from './type';\n\nconst Skeleton: FC<SkeletonProps> = ({\n  active,\n  avatar = false,\n  title = true,\n  paragraph = true,\n  className,\n  classNames,\n  styles: customStyles,\n  style,\n  width,\n  height,\n  gap = 16,\n  ...rest\n}) => {\n  const showAvatar = Boolean(avatar);\n  const showTitle = Boolean(title);\n  const showParagraph = Boolean(paragraph);\n  const avatarProps = typeof avatar === 'object' ? avatar : undefined;\n  const titleProps = typeof title === 'object' ? title : undefined;\n  const paragraphProps = typeof paragraph === 'object' ? paragraph : undefined;\n  const rootStyle = {\n    ...style,\n    ...customStyles?.root,\n    ...(width !== undefined ? { width } : {}),\n    ...(height !== undefined ? { height } : {}),\n  };\n\n  const avatarActive = avatarProps?.active ?? active;\n  const titleActive = titleProps?.active ?? active;\n  const paragraphActive = paragraphProps?.active ?? active;\n\n  return (\n    <Flexbox\n      align={showParagraph ? 'flex-start' : 'center'}\n      className={cx(className, classNames?.root)}\n      gap={gap}\n      horizontal\n      style={rootStyle}\n      width={'100%'}\n      {...rest}\n    >\n      {showAvatar && (\n        <SkeletonAvatar\n          {...avatarProps}\n          active={avatarActive}\n          className={cx(styles.avatar, classNames?.avatar, avatarProps?.className)}\n          style={{\n            ...avatarProps?.style,\n            ...customStyles?.avatar,\n          }}\n        />\n      )}\n      <Flexbox gap={gap} width={'100%'}>\n        {showTitle && (\n          <SkeletonTitle\n            {...titleProps}\n            active={titleActive}\n            className={cx(classNames?.title, titleProps?.className)}\n            style={{\n              ...titleProps?.style,\n              ...customStyles?.title,\n            }}\n          />\n        )}\n        {showParagraph && (\n          <SkeletonParagraph\n            {...paragraphProps}\n            active={paragraphActive}\n            className={cx(classNames?.paragraph, paragraphProps?.className)}\n            style={{\n              ...paragraphProps?.style,\n              ...customStyles?.paragraph,\n            }}\n          />\n        )}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nSkeleton.displayName = 'Skeleton';\n\nexport default Skeleton;\n"],"mappings":";;;;;;;;;;;AAaA,MAAMA,YAA+B,EACnC,QACA,SAAS,OACT,QAAQ,MACR,YAAY,MACZ,WACA,YACA,QAAQ,cACR,OACA,OACA,QACA,MAAM,IACN,GAAG,WACC;CACJ,MAAM,aAAa,QAAQ,OAAO;CAClC,MAAM,YAAY,QAAQ,MAAM;CAChC,MAAM,gBAAgB,QAAQ,UAAU;CACxC,MAAM,cAAc,OAAO,WAAW,WAAW,SAAS;CAC1D,MAAM,aAAa,OAAO,UAAU,WAAW,QAAQ;CACvD,MAAM,iBAAiB,OAAO,cAAc,WAAW,YAAY;CACnE,MAAM,YAAY;EAChB,GAAG;EACH,GAAG,cAAc;EACjB,GAAI,UAAU,SAAY,EAAE,OAAO,GAAG,EAAE;EACxC,GAAI,WAAW,SAAY,EAAE,QAAQ,GAAG,EAAE;EAC3C;CAED,MAAM,eAAe,aAAa,UAAU;CAC5C,MAAM,cAAc,YAAY,UAAU;CAC1C,MAAM,kBAAkB,gBAAgB,UAAU;AAElD,QACE,qBAACC;EACC,OAAO,gBAAgB,eAAe;EACtC,WAAW,GAAG,WAAW,YAAY,KAAK;EACrC;EACL;EACA,OAAO;EACP,OAAO;EACP,GAAI;aAEH,cACC,oBAACC;GACC,GAAI;GACJ,QAAQ;GACR,WAAW,GAAG,OAAO,QAAQ,YAAY,QAAQ,aAAa,UAAU;GACxE,OAAO;IACL,GAAG,aAAa;IAChB,GAAG,cAAc;IAClB;IACD,EAEJ,qBAACD;GAAa;GAAK,OAAO;cACvB,aACC,oBAACE;IACC,GAAI;IACJ,QAAQ;IACR,WAAW,GAAG,YAAY,OAAO,YAAY,UAAU;IACvD,OAAO;KACL,GAAG,YAAY;KACf,GAAG,cAAc;KAClB;KACD,EAEH,iBACC,oBAACC;IACC,GAAI;IACJ,QAAQ;IACR,WAAW,GAAG,YAAY,WAAW,gBAAgB,UAAU;IAC/D,OAAO;KACL,GAAG,gBAAgB;KACnB,GAAG,cAAc;KAClB;KACD;IAEI;GACF;;AAId,SAAS,cAAc;AAEvB,uBAAe"}

package/es/Skeleton/SkeletonAvatar.mjs

@@ -1,17 +1,17 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import SkeletonBlock_default from "./SkeletonBlock.mjs";
 import { jsx } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
 
 //#region src/Skeleton/SkeletonAvatar.tsx
 const DEFAULT_SIZE = 40;
 const SkeletonAvatar = ({ active, shape = "square", size, width, height, style, className, ...rest }) => {
-	const { cx, styles, theme } = useStyles();
 	const defaultSize = size ?? DEFAULT_SIZE;
 	const finalWidth = width ?? defaultSize;
 	const finalHeight = height ?? defaultSize;
-	const borderRadius = shape === "circle" ? "50%" : `${theme.borderRadius}px`;
+	const borderRadius = shape === "circle" ? "50%" : cssVar.borderRadius;
 	return /* @__PURE__ */ jsx(SkeletonBlock_default, {
 		active,
 		className: cx(styles.avatar, className),

package/es/Skeleton/SkeletonAvatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonAvatar.mjs","names":["SkeletonAvatar: FC<SkeletonAvatarProps>","SkeletonBlock"],"sources":["../../src/Skeleton/SkeletonAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport { useStyles } from './style';\nimport type { SkeletonAvatarProps } from './type';\n\nconst DEFAULT_SIZE = 40;\n\nconst SkeletonAvatar: FC<SkeletonAvatarProps> = ({\n  active,\n  shape = 'square',\n  size,\n  width,\n  height,\n  style,\n  className,\n  ...rest\n}) => {\n  const { cx, styles, theme } = useStyles();\n  const defaultSize = size ?? DEFAULT_SIZE;\n  const finalWidth = width ?? defaultSize;\n  const finalHeight = height ?? defaultSize;\n  const borderRadius = shape === 'circle' ? '50%' : `${theme.borderRadius}px`;\n\n  return (\n    <SkeletonBlock\n      active={active}\n      className={cx(styles.avatar, className)}\n      height={finalHeight}\n      style={{ borderRadius, ...style }}\n      width={finalWidth}\n      {...rest}\n    />\n  );\n};\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n\nexport default SkeletonAvatar;\n"],"mappings":";;;;;;;AAQA,MAAM,eAAe;AAErB,MAAMA,kBAA2C,EAC/C,QACA,QAAQ,UACR,MACA,OACA,QACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,QAAQ,UAAU,WAAW;CACzC,MAAM,cAAc,QAAQ;CAC5B,MAAM,aAAa,SAAS;CAC5B,MAAM,cAAc,UAAU;CAC9B,MAAM,eAAe,UAAU,WAAW,QAAQ,GAAG,MAAM,aAAa;AAExE,QACE,oBAACC;EACS;EACR,WAAW,GAAG,OAAO,QAAQ,UAAU;EACvC,QAAQ;EACR,OAAO;GAAE;GAAc,GAAG;GAAO;EACjC,OAAO;EACP,GAAI;GACJ;;AAIN,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"SkeletonAvatar.mjs","names":["SkeletonAvatar: FC<SkeletonAvatarProps>","SkeletonBlock"],"sources":["../../src/Skeleton/SkeletonAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport { styles } from './style';\nimport type { SkeletonAvatarProps } from './type';\n\nconst DEFAULT_SIZE = 40;\n\nconst SkeletonAvatar: FC<SkeletonAvatarProps> = ({\n  active,\n  shape = 'square',\n  size,\n  width,\n  height,\n  style,\n  className,\n  ...rest\n}) => {\n  const defaultSize = size ?? DEFAULT_SIZE;\n  const finalWidth = width ?? defaultSize;\n  const finalHeight = height ?? defaultSize;\n  const borderRadius = shape === 'circle' ? '50%' : cssVar.borderRadius;\n\n  return (\n    <SkeletonBlock\n      active={active}\n      className={cx(styles.avatar, className)}\n      height={finalHeight}\n      style={{ borderRadius, ...style }}\n      width={finalWidth}\n      {...rest}\n    />\n  );\n};\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n\nexport default SkeletonAvatar;\n"],"mappings":";;;;;;;;AASA,MAAM,eAAe;AAErB,MAAMA,kBAA2C,EAC/C,QACA,QAAQ,UACR,MACA,OACA,QACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,cAAc,QAAQ;CAC5B,MAAM,aAAa,SAAS;CAC5B,MAAM,cAAc,UAAU;CAC9B,MAAM,eAAe,UAAU,WAAW,QAAQ,OAAO;AAEzD,QACE,oBAACC;EACS;EACR,WAAW,GAAG,OAAO,QAAQ,UAAU;EACvC,QAAQ;EACR,OAAO;GAAE;GAAc,GAAG;GAAO;EACjC,OAAO;EACP,GAAI;GACJ;;AAIN,eAAe,cAAc;AAE7B,6BAAe"}

package/es/Skeleton/SkeletonBlock.mjs

@@ -1,12 +1,12 @@
 'use client';
 
 import Block_default from "../Block/Block.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/Skeleton/SkeletonBlock.tsx
 const SkeletonBlock = ({ width = "100%", height = "1em", active, style, className }) => {
-	const { cx, styles } = useStyles();
 	return /* @__PURE__ */ jsx(Block_default, {
 		className: cx(styles.base, active && styles.active, className),
 		height,

package/es/Skeleton/SkeletonBlock.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonBlock.mjs","names":["SkeletonBlock: FC<SkeletonBlockProps>","Block"],"sources":["../../src/Skeleton/SkeletonBlock.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport Block from '@/Block';\nimport { SkeletonBlockProps } from '@/Skeleton/type';\n\nimport { useStyles } from './style';\n\nconst SkeletonBlock: FC<SkeletonBlockProps> = ({\n  width = '100%',\n  height = '1em',\n  active,\n  style,\n  className,\n}) => {\n  const { cx, styles } = useStyles();\n  return (\n    <Block\n      className={cx(styles.base, active && styles.active, className)}\n      height={height}\n      style={style}\n      variant={'filled'}\n      width={width}\n    />\n  );\n};\n\nSkeletonBlock.displayName = 'SkeletonBlock';\n\nexport default SkeletonBlock;\n"],"mappings":";;;;;;;AASA,MAAMA,iBAAyC,EAC7C,QAAQ,QACR,SAAS,OACT,QACA,OACA,gBACI;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;AAClC,QACE,oBAACC;EACC,WAAW,GAAG,OAAO,MAAM,UAAU,OAAO,QAAQ,UAAU;EACtD;EACD;EACP,SAAS;EACF;GACP;;AAIN,cAAc,cAAc;AAE5B,4BAAe"}
+{"version":3,"file":"SkeletonBlock.mjs","names":["SkeletonBlock: FC<SkeletonBlockProps>","Block"],"sources":["../../src/Skeleton/SkeletonBlock.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport Block from '@/Block';\nimport { SkeletonBlockProps } from '@/Skeleton/type';\n\nimport { styles } from './style';\n\nconst SkeletonBlock: FC<SkeletonBlockProps> = ({\n  width = '100%',\n  height = '1em',\n  active,\n  style,\n  className,\n}) => {\n  return (\n    <Block\n      className={cx(styles.base, active && styles.active, className)}\n      height={height}\n      style={style}\n      variant={'filled'}\n      width={width}\n    />\n  );\n};\n\nSkeletonBlock.displayName = 'SkeletonBlock';\n\nexport default SkeletonBlock;\n"],"mappings":";;;;;;;;AAUA,MAAMA,iBAAyC,EAC7C,QAAQ,QACR,SAAS,OACT,QACA,OACA,gBACI;AACJ,QACE,oBAACC;EACC,WAAW,GAAG,OAAO,MAAM,UAAU,OAAO,QAAQ,UAAU;EACtD;EACD;EACP,SAAS;EACF;GACP;;AAIN,cAAc,cAAc;AAE5B,4BAAe"}

package/es/Skeleton/SkeletonButton.mjs

@@ -1,8 +1,8 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
 import SkeletonBlock_default from "./SkeletonBlock.mjs";
 import { jsx } from "react/jsx-runtime";
+import { cssVar } from "antd-style";
 
 //#region src/Skeleton/SkeletonButton.tsx
 const HEIGHT_MAP = {
@@ -11,21 +11,20 @@ const HEIGHT_MAP = {
 	small: 28
 };
 const SkeletonButton = ({ active, block = false, shape = "default", size = "default", width, height, style, className, ...rest }) => {
-	const { theme } = useStyles();
 	const resolvedSize = size ?? "default";
 	const baseHeight = height ?? HEIGHT_MAP[resolvedSize];
 	const finalWidth = width ?? (block ? "100%" : shape === "circle" ? baseHeight : 80);
 	const RADIUS_MAP = {
-		default: theme.borderRadius,
-		large: theme.borderRadiusLG,
-		small: theme.borderRadiusSM
+		default: cssVar.borderRadius,
+		large: cssVar.borderRadiusLG,
+		small: cssVar.borderRadiusSM
 	};
 	return /* @__PURE__ */ jsx(SkeletonBlock_default, {
 		active,
 		className,
 		height: baseHeight,
 		style: {
-			borderRadius: shape === "circle" ? "50%" : shape === "round" ? `${theme.borderRadius * 2}px` : RADIUS_MAP[resolvedSize],
+			borderRadius: shape === "circle" ? "50%" : shape === "round" ? `calc(${cssVar.borderRadius} * 2)` : RADIUS_MAP[resolvedSize],
 			...style
 		},
 		width: finalWidth,

package/es/Skeleton/SkeletonButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonButton.mjs","names":["HEIGHT_MAP: Record<'large' | 'small' | 'default', number>","SkeletonButton: FC<SkeletonButtonProps>","RADIUS_MAP: Record<'large' | 'small' | 'default', number>","SkeletonBlock"],"sources":["../../src/Skeleton/SkeletonButton.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport { useStyles } from './style';\nimport type { SkeletonButtonProps } from './type';\n\nconst HEIGHT_MAP: Record<'large' | 'small' | 'default', number> = {\n  default: 36,\n  large: 46,\n  small: 28,\n};\n\nconst SkeletonButton: FC<SkeletonButtonProps> = ({\n  active,\n  block = false,\n  shape = 'default',\n  size = 'default',\n  width,\n  height,\n  style,\n  className,\n  ...rest\n}) => {\n  const { theme } = useStyles();\n  const resolvedSize = size ?? 'default';\n  const baseHeight = height ?? HEIGHT_MAP[resolvedSize];\n  const defaultWidth = block ? '100%' : shape === 'circle' ? baseHeight : 80;\n  const finalWidth = width ?? defaultWidth;\n\n  const RADIUS_MAP: Record<'large' | 'small' | 'default', number> = {\n    default: theme.borderRadius,\n    large: theme.borderRadiusLG,\n    small: theme.borderRadiusSM,\n  };\n\n  const borderRadius =\n    shape === 'circle'\n      ? '50%'\n      : shape === 'round'\n        ? `${theme.borderRadius * 2}px`\n        : RADIUS_MAP[resolvedSize];\n\n  return (\n    <SkeletonBlock\n      active={active}\n      className={className}\n      height={baseHeight}\n      style={{ borderRadius, ...style }}\n      width={finalWidth}\n      {...rest}\n    />\n  );\n};\n\nSkeletonButton.displayName = 'SkeletonButton';\n\nexport default SkeletonButton;\n"],"mappings":";;;;;;;AAQA,MAAMA,aAA4D;CAChE,SAAS;CACT,OAAO;CACP,OAAO;CACR;AAED,MAAMC,kBAA2C,EAC/C,QACA,QAAQ,OACR,QAAQ,WACR,OAAO,WACP,OACA,QACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,UAAU,WAAW;CAC7B,MAAM,eAAe,QAAQ;CAC7B,MAAM,aAAa,UAAU,WAAW;CAExC,MAAM,aAAa,UADE,QAAQ,SAAS,UAAU,WAAW,aAAa;CAGxE,MAAMC,aAA4D;EAChE,SAAS,MAAM;EACf,OAAO,MAAM;EACb,OAAO,MAAM;EACd;AASD,QACE,oBAACC;EACS;EACG;EACX,QAAQ;EACR,OAAO;GAAE,cAXX,UAAU,WACN,QACA,UAAU,UACR,GAAG,MAAM,eAAe,EAAE,MAC1B,WAAW;GAOQ,GAAG;GAAO;EACjC,OAAO;EACP,GAAI;GACJ;;AAIN,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"SkeletonButton.mjs","names":["HEIGHT_MAP: Record<'large' | 'small' | 'default', number>","SkeletonButton: FC<SkeletonButtonProps>","RADIUS_MAP: Record<'large' | 'small' | 'default', string>","SkeletonBlock"],"sources":["../../src/Skeleton/SkeletonButton.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } from 'antd-style';\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonButtonProps } from './type';\n\nconst HEIGHT_MAP: Record<'large' | 'small' | 'default', number> = {\n  default: 36,\n  large: 46,\n  small: 28,\n};\n\nconst SkeletonButton: FC<SkeletonButtonProps> = ({\n  active,\n  block = false,\n  shape = 'default',\n  size = 'default',\n  width,\n  height,\n  style,\n  className,\n  ...rest\n}) => {\n  const resolvedSize = size ?? 'default';\n  const baseHeight = height ?? HEIGHT_MAP[resolvedSize];\n  const defaultWidth = block ? '100%' : shape === 'circle' ? baseHeight : 80;\n  const finalWidth = width ?? defaultWidth;\n\n  const RADIUS_MAP: Record<'large' | 'small' | 'default', string> = {\n    default: cssVar.borderRadius,\n    large: cssVar.borderRadiusLG,\n    small: cssVar.borderRadiusSM,\n  };\n\n  const borderRadius =\n    shape === 'circle'\n      ? '50%'\n      : shape === 'round'\n        ? `calc(${cssVar.borderRadius} * 2)`\n        : RADIUS_MAP[resolvedSize];\n\n  return (\n    <SkeletonBlock\n      active={active}\n      className={className}\n      height={baseHeight}\n      style={{ borderRadius, ...style }}\n      width={finalWidth}\n      {...rest}\n    />\n  );\n};\n\nSkeletonButton.displayName = 'SkeletonButton';\n\nexport default SkeletonButton;\n"],"mappings":";;;;;;;AAQA,MAAMA,aAA4D;CAChE,SAAS;CACT,OAAO;CACP,OAAO;CACR;AAED,MAAMC,kBAA2C,EAC/C,QACA,QAAQ,OACR,QAAQ,WACR,OAAO,WACP,OACA,QACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,eAAe,QAAQ;CAC7B,MAAM,aAAa,UAAU,WAAW;CAExC,MAAM,aAAa,UADE,QAAQ,SAAS,UAAU,WAAW,aAAa;CAGxE,MAAMC,aAA4D;EAChE,SAAS,OAAO;EAChB,OAAO,OAAO;EACd,OAAO,OAAO;EACf;AASD,QACE,oBAACC;EACS;EACG;EACX,QAAQ;EACR,OAAO;GAAE,cAXX,UAAU,WACN,QACA,UAAU,UACR,QAAQ,OAAO,aAAa,SAC5B,WAAW;GAOQ,GAAG;GAAO;EACjC,OAAO;EACP,GAAI;GACJ;;AAIN,eAAe,cAAc;AAE7B,6BAAe"}

package/es/Skeleton/SkeletonTags.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
 import SkeletonBlock_default from "./SkeletonBlock.mjs";
 import { jsx } from "react/jsx-runtime";
+import { cssVar, useTheme } from "antd-style";
 
 //#region src/Skeleton/SkeletonTags.tsx
 const DEFAULT_COUNT = 1;
@@ -18,16 +18,16 @@ const DEFAULT_WIDTH_MAP = {
 	small: 36
 };
 const SkeletonTags = ({ active, className, count = DEFAULT_COUNT, gap, height, size = "middle", style, width, ...rest }) => {
-	const { theme } = useStyles();
+	const theme = useTheme();
 	const resolvedGap = gap ?? theme.paddingXS ?? 4;
 	const resolvedCount = Math.max(count, 1);
 	const resolvedHeight = height ?? HEIGHT_MAP[size];
 	const widthList = Array.isArray(width) ? width : null;
 	const defaultWidth = DEFAULT_WIDTH_MAP[size];
 	const RADIUS_MAP = {
-		large: theme.borderRadius,
-		middle: theme.borderRadiusSM,
-		small: theme.borderRadiusXS
+		large: cssVar.borderRadius,
+		middle: cssVar.borderRadiusSM,
+		small: cssVar.borderRadiusXS
 	};
 	const getWidth = (index) => {
 		if (widthList) return widthList[index] ?? widthList.at(-1) ?? defaultWidth;

package/es/Skeleton/SkeletonTags.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonTags.mjs","names":["HEIGHT_MAP: Record<'small' | 'middle' | 'large', number>","DEFAULT_WIDTH_MAP: Record<'small' | 'middle' | 'large', number>","SkeletonTags: FC<SkeletonTagsProps>","RADIUS_MAP: Record<'large' | 'small' | 'middle', number>","Flexbox","SkeletonBlock"],"sources":["../../src/Skeleton/SkeletonTags.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport { useStyles } from './style';\nimport type { SkeletonTagsProps } from './type';\n\nconst DEFAULT_COUNT = 1;\n\nconst HEIGHT_MAP: Record<'small' | 'middle' | 'large', number> = {\n  large: 28,\n  middle: 22,\n  small: 20,\n};\n\nconst DEFAULT_WIDTH_MAP: Record<'small' | 'middle' | 'large', number> = {\n  large: 64,\n  middle: 48,\n  small: 36,\n};\n\nconst SkeletonTags: FC<SkeletonTagsProps> = ({\n  active,\n  className,\n  count = DEFAULT_COUNT,\n  gap,\n  height,\n  size = 'middle',\n  style,\n  width,\n  ...rest\n}) => {\n  const { theme } = useStyles();\n  const resolvedGap = gap ?? theme.paddingXS ?? 4;\n  const resolvedCount = Math.max(count, 1);\n  const resolvedHeight = height ?? HEIGHT_MAP[size];\n  const widthList = Array.isArray(width) ? width : null;\n  const defaultWidth = DEFAULT_WIDTH_MAP[size];\n\n  const RADIUS_MAP: Record<'large' | 'small' | 'middle', number> = {\n    large: theme.borderRadius,\n    middle: theme.borderRadiusSM,\n    small: theme.borderRadiusXS,\n  };\n\n  const getWidth = (index: number) => {\n    if (widthList) return widthList[index] ?? widthList.at(-1) ?? defaultWidth;\n    if (width !== undefined) return width as string | number;\n    return defaultWidth;\n  };\n\n  return (\n    <Flexbox className={className} horizontal style={{ gap: resolvedGap, ...style }} {...rest}>\n      {Array.from({ length: resolvedCount }).map((_, index) => (\n        <SkeletonBlock\n          active={active}\n          height={resolvedHeight}\n          key={index}\n          style={{\n            borderRadius: RADIUS_MAP[size],\n          }}\n          width={getWidth(index)}\n        />\n      ))}\n    </Flexbox>\n  );\n};\n\nSkeletonTags.displayName = 'SkeletonTags';\n\nexport default SkeletonTags;\n"],"mappings":";;;;;;;;AAUA,MAAM,gBAAgB;AAEtB,MAAMA,aAA2D;CAC/D,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAMC,oBAAkE;CACtE,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAMC,gBAAuC,EAC3C,QACA,WACA,QAAQ,eACR,KACA,QACA,OAAO,UACP,OACA,OACA,GAAG,WACC;CACJ,MAAM,EAAE,UAAU,WAAW;CAC7B,MAAM,cAAc,OAAO,MAAM,aAAa;CAC9C,MAAM,gBAAgB,KAAK,IAAI,OAAO,EAAE;CACxC,MAAM,iBAAiB,UAAU,WAAW;CAC5C,MAAM,YAAY,MAAM,QAAQ,MAAM,GAAG,QAAQ;CACjD,MAAM,eAAe,kBAAkB;CAEvC,MAAMC,aAA2D;EAC/D,OAAO,MAAM;EACb,QAAQ,MAAM;EACd,OAAO,MAAM;EACd;CAED,MAAM,YAAY,UAAkB;AAClC,MAAI,UAAW,QAAO,UAAU,UAAU,UAAU,GAAG,GAAG,IAAI;AAC9D,MAAI,UAAU,OAAW,QAAO;AAChC,SAAO;;AAGT,QACE,oBAACC;EAAmB;EAAW;EAAW,OAAO;GAAE,KAAK;GAAa,GAAG;GAAO;EAAE,GAAI;YAClF,MAAM,KAAK,EAAE,QAAQ,eAAe,CAAC,CAAC,KAAK,GAAG,UAC7C,oBAACC;GACS;GACR,QAAQ;GAER,OAAO,EACL,cAAc,WAAW,OAC1B;GACD,OAAO,SAAS,MAAM;KAJjB,MAKL,CACF;GACM;;AAId,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"SkeletonTags.mjs","names":["HEIGHT_MAP: Record<'small' | 'middle' | 'large', number>","DEFAULT_WIDTH_MAP: Record<'small' | 'middle' | 'large', number>","SkeletonTags: FC<SkeletonTagsProps>","RADIUS_MAP: Record<'large' | 'small' | 'middle', string>","Flexbox","SkeletonBlock"],"sources":["../../src/Skeleton/SkeletonTags.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, useTheme } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonTagsProps } from './type';\n\nconst DEFAULT_COUNT = 1;\n\nconst HEIGHT_MAP: Record<'small' | 'middle' | 'large', number> = {\n  large: 28,\n  middle: 22,\n  small: 20,\n};\n\nconst DEFAULT_WIDTH_MAP: Record<'small' | 'middle' | 'large', number> = {\n  large: 64,\n  middle: 48,\n  small: 36,\n};\n\nconst SkeletonTags: FC<SkeletonTagsProps> = ({\n  active,\n  className,\n  count = DEFAULT_COUNT,\n  gap,\n  height,\n  size = 'middle',\n  style,\n  width,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const resolvedGap = gap ?? theme.paddingXS ?? 4;\n  const resolvedCount = Math.max(count, 1);\n  const resolvedHeight = height ?? HEIGHT_MAP[size];\n  const widthList = Array.isArray(width) ? width : null;\n  const defaultWidth = DEFAULT_WIDTH_MAP[size];\n\n  const RADIUS_MAP: Record<'large' | 'small' | 'middle', string> = {\n    large: cssVar.borderRadius,\n    middle: cssVar.borderRadiusSM,\n    small: cssVar.borderRadiusXS,\n  };\n\n  const getWidth = (index: number) => {\n    if (widthList) return widthList[index] ?? widthList.at(-1) ?? defaultWidth;\n    if (width !== undefined) return width as string | number;\n    return defaultWidth;\n  };\n\n  return (\n    <Flexbox className={className} horizontal style={{ gap: resolvedGap, ...style }} {...rest}>\n      {Array.from({ length: resolvedCount }).map((_, index) => (\n        <SkeletonBlock\n          active={active}\n          height={resolvedHeight}\n          key={index}\n          style={{\n            borderRadius: RADIUS_MAP[size],\n          }}\n          width={getWidth(index)}\n        />\n      ))}\n    </Flexbox>\n  );\n};\n\nSkeletonTags.displayName = 'SkeletonTags';\n\nexport default SkeletonTags;\n"],"mappings":";;;;;;;;AAUA,MAAM,gBAAgB;AAEtB,MAAMA,aAA2D;CAC/D,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAMC,oBAAkE;CACtE,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAMC,gBAAuC,EAC3C,QACA,WACA,QAAQ,eACR,KACA,QACA,OAAO,UACP,OACA,OACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,cAAc,OAAO,MAAM,aAAa;CAC9C,MAAM,gBAAgB,KAAK,IAAI,OAAO,EAAE;CACxC,MAAM,iBAAiB,UAAU,WAAW;CAC5C,MAAM,YAAY,MAAM,QAAQ,MAAM,GAAG,QAAQ;CACjD,MAAM,eAAe,kBAAkB;CAEvC,MAAMC,aAA2D;EAC/D,OAAO,OAAO;EACd,QAAQ,OAAO;EACf,OAAO,OAAO;EACf;CAED,MAAM,YAAY,UAAkB;AAClC,MAAI,UAAW,QAAO,UAAU,UAAU,UAAU,GAAG,GAAG,IAAI;AAC9D,MAAI,UAAU,OAAW,QAAO;AAChC,SAAO;;AAGT,QACE,oBAACC;EAAmB;EAAW;EAAW,OAAO;GAAE,KAAK;GAAa,GAAG;GAAO;EAAE,GAAI;YAClF,MAAM,KAAK,EAAE,QAAQ,eAAe,CAAC,CAAC,KAAK,GAAG,UAC7C,oBAACC;GACS;GACR,QAAQ;GAER,OAAO,EACL,cAAc,WAAW,OAC1B;GACD,OAAO,SAAS,MAAM;KAJjB,MAKL,CACF;GACM;;AAId,aAAa,cAAc;AAE3B,2BAAe"}

package/es/Skeleton/SkeletonTitle.mjs

@@ -1,13 +1,13 @@
 'use client';
 
-import { useStyles } from "./style.mjs";
 import SkeletonBlock_default from "./SkeletonBlock.mjs";
 import { jsx } from "react/jsx-runtime";
+import { useTheme } from "antd-style";
 
 //#region src/Skeleton/SkeletonTitle.tsx
 const DEFAULT_FONT_SIZE = 18;
 const SkeletonTitle = ({ active, fontSize, lineHeight, height, width = "60%", style, className, ...rest }) => {
-	const { theme } = useStyles();
+	const theme = useTheme();
 	const baseFontSize = fontSize ?? theme.fontSize ?? DEFAULT_FONT_SIZE;
 	const resolvedLineHeight = lineHeight ?? 1.6;
 	const marginBlock = (height ? height : Math.round(baseFontSize * resolvedLineHeight)) - baseFontSize;

package/es/Skeleton/SkeletonTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonTitle.mjs","names":["SkeletonTitle: FC<SkeletonTitleProps>","SkeletonBlock"],"sources":["../../src/Skeleton/SkeletonTitle.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport { useStyles } from './style';\nimport type { SkeletonTitleProps } from './type';\n\nconst DEFAULT_FONT_SIZE = 18;\n\nconst SkeletonTitle: FC<SkeletonTitleProps> = ({\n  active,\n  fontSize,\n  lineHeight,\n  height,\n  width = '60%',\n  style,\n  className,\n  ...rest\n}) => {\n  const { theme } = useStyles();\n  const baseFontSize = fontSize ?? theme.fontSize ?? DEFAULT_FONT_SIZE;\n  const resolvedLineHeight = lineHeight ?? 1.6;\n  const computedHeight = height ? height : Math.round(baseFontSize * resolvedLineHeight);\n  const marginBlock = computedHeight - baseFontSize;\n\n  return (\n    <SkeletonBlock\n      active={active}\n      className={className}\n      height={Math.round(baseFontSize + marginBlock * 0.5)}\n      style={{\n        marginBlock: Math.round((marginBlock * 0.5) / 2),\n        ...style,\n      }}\n      width={width}\n      {...rest}\n    />\n  );\n};\n\nSkeletonTitle.displayName = 'SkeletonTitle';\n\nexport default SkeletonTitle;\n"],"mappings":";;;;;;;AAQA,MAAM,oBAAoB;AAE1B,MAAMA,iBAAyC,EAC7C,QACA,UACA,YACA,QACA,QAAQ,OACR,OACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,UAAU,WAAW;CAC7B,MAAM,eAAe,YAAY,MAAM,YAAY;CACnD,MAAM,qBAAqB,cAAc;CAEzC,MAAM,eADiB,SAAS,SAAS,KAAK,MAAM,eAAe,mBAAmB,IACjD;AAErC,QACE,oBAACC;EACS;EACG;EACX,QAAQ,KAAK,MAAM,eAAe,cAAc,GAAI;EACpD,OAAO;GACL,aAAa,KAAK,MAAO,cAAc,KAAO,EAAE;GAChD,GAAG;GACJ;EACM;EACP,GAAI;GACJ;;AAIN,cAAc,cAAc;AAE5B,4BAAe"}
+{"version":3,"file":"SkeletonTitle.mjs","names":["SkeletonTitle: FC<SkeletonTitleProps>","SkeletonBlock"],"sources":["../../src/Skeleton/SkeletonTitle.tsx"],"sourcesContent":["'use client';\n\nimport { useTheme } from 'antd-style';\nimport { type FC } from 'react';\n\nimport SkeletonBlock from './SkeletonBlock';\nimport type { SkeletonTitleProps } from './type';\n\nconst DEFAULT_FONT_SIZE = 18;\n\nconst SkeletonTitle: FC<SkeletonTitleProps> = ({\n  active,\n  fontSize,\n  lineHeight,\n  height,\n  width = '60%',\n  style,\n  className,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const baseFontSize = fontSize ?? theme.fontSize ?? DEFAULT_FONT_SIZE;\n  const resolvedLineHeight = lineHeight ?? 1.6;\n  const computedHeight = height ? height : Math.round(baseFontSize * resolvedLineHeight);\n  const marginBlock = computedHeight - baseFontSize;\n\n  return (\n    <SkeletonBlock\n      active={active}\n      className={className}\n      height={Math.round(baseFontSize + marginBlock * 0.5)}\n      style={{\n        marginBlock: Math.round((marginBlock * 0.5) / 2),\n        ...style,\n      }}\n      width={width}\n      {...rest}\n    />\n  );\n};\n\nSkeletonTitle.displayName = 'SkeletonTitle';\n\nexport default SkeletonTitle;\n"],"mappings":";;;;;;;AAQA,MAAM,oBAAoB;AAE1B,MAAMA,iBAAyC,EAC7C,QACA,UACA,YACA,QACA,QAAQ,OACR,OACA,WACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,eAAe,YAAY,MAAM,YAAY;CACnD,MAAM,qBAAqB,cAAc;CAEzC,MAAM,eADiB,SAAS,SAAS,KAAK,MAAM,eAAe,mBAAmB,IACjD;AAErC,QACE,oBAACC;EACS;EACG;EACX,QAAQ,KAAK,MAAM,eAAe,cAAc,GAAI;EACpD,OAAO;GACL,aAAa,KAAK,MAAO,cAAc,KAAO,EAAE;GAChD,GAAG;GACJ;EACM;EACP,GAAI;GACJ;;AAIN,cAAc,cAAc;AAE5B,4BAAe"}

package/es/Skeleton/style.mjs

@@ -1,4 +1,4 @@
-import { createStyles, keyframes } from "antd-style";
+import { createStaticStyles, keyframes } from "antd-style";
 
 //#region src/Skeleton/style.ts
 const shimmer = keyframes`
@@ -12,11 +12,10 @@ const shimmer = keyframes`
     opacity: 1;
   }
 `;
-const useStyles = createStyles(({ css: css$1, token }) => {
-	const spacing = token.paddingXS ?? 8;
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
 		active: css$1`
-      background: ${token.colorFillSecondary};
+      background: ${cssVar$1.colorFillSecondary};
       animation: ${shimmer} 2s linear infinite;
     `,
 		avatar: css$1`
@@ -29,15 +28,15 @@ const useStyles = createStyles(({ css: css$1, token }) => {
 
       overflow: hidden;
 
-      border-radius: ${token.borderRadius}px;
+      border-radius: ${cssVar$1.borderRadius};
 
-      background: ${token.colorFillTertiary};
+      background: ${cssVar$1.colorFillTertiary};
     `,
 		text: css$1`
       display: flex;
       flex: 1;
       flex-direction: column;
-      gap: ${spacing}px;
+      gap: ${cssVar$1.paddingXS};
 
       width: 100%;
     `
@@ -45,5 +44,5 @@ const useStyles = createStyles(({ css: css$1, token }) => {
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/Skeleton/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Skeleton/style.ts"],"sourcesContent":["import { createStyles, keyframes } from 'antd-style';\n\nconst shimmer = keyframes`\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: .5;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nexport const useStyles = createStyles(({ css, token }) => {\n  const spacing = token.paddingXS ?? 8;\n  return {\n    active: css`\n      background: ${token.colorFillSecondary};\n      animation: ${shimmer} 2s linear infinite;\n    `,\n\n    avatar: css`\n      flex-shrink: 0;\n    `,\n\n    base: css`\n      user-select: none;\n\n      position: relative;\n\n      overflow: hidden;\n\n      border-radius: ${token.borderRadius}px;\n\n      background: ${token.colorFillTertiary};\n    `,\n\n    text: css`\n      display: flex;\n      flex: 1;\n      flex-direction: column;\n      gap: ${spacing}px;\n\n      width: 100%;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAM,UAAU,SAAS;;;;;;;;;;;AAYzB,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY;CACxD,MAAM,UAAU,MAAM,aAAa;AACnC,QAAO;EACL,QAAQ,KAAG;oBACK,MAAM,mBAAmB;mBAC1B,QAAQ;;EAGvB,QAAQ,KAAG;;;EAIX,MAAM,KAAG;;;;;;;uBAOU,MAAM,aAAa;;oBAEtB,MAAM,kBAAkB;;EAGxC,MAAM,KAAG;;;;aAIA,QAAQ;;;;EAIlB;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/Skeleton/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst shimmer = keyframes`\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: .5;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    active: css`\n      background: ${cssVar.colorFillSecondary};\n      animation: ${shimmer} 2s linear infinite;\n    `,\n\n    avatar: css`\n      flex-shrink: 0;\n    `,\n\n    base: css`\n      user-select: none;\n\n      position: relative;\n\n      overflow: hidden;\n\n      border-radius: ${cssVar.borderRadius};\n\n      background: ${cssVar.colorFillTertiary};\n    `,\n\n    text: css`\n      display: flex;\n      flex: 1;\n      flex-direction: column;\n      gap: ${cssVar.paddingXS};\n\n      width: 100%;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAM,UAAU,SAAS;;;;;;;;;;;AAYzB,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,QAAQ,KAAG;oBACKA,SAAO,mBAAmB;mBAC3B,QAAQ;;EAGvB,QAAQ,KAAG;;;EAIX,MAAM,KAAG;;;;;;;uBAOUA,SAAO,aAAa;;oBAEvBA,SAAO,kBAAkB;;EAGzC,MAAM,KAAG;;;;aAIAA,SAAO,UAAU;;;;EAI3B;EACD"}

package/es/SliderWithInput/SliderWithInput.d.mts

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

package/es/Snippet/Snippet.mjs

@@ -4,31 +4,12 @@ import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import SyntaxHighlighter_default from "../Highlighter/SyntaxHighlighter/index.mjs";
 import CopyButton_default from "../CopyButton/CopyButton.mjs";
 import Spotlight_default from "../awesome/Spotlight/Spotlight.mjs";
-import { useStyles } from "./style.mjs";
-import { useMemo } from "react";
+import { styles, variants } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { cx } from "antd-style";
 
 //#region src/Snippet/Snippet.tsx
 const Snippet = ({ ref, prefix, language = "tsx", children, copyable = true, variant = "filled", spotlight, shadow, className, ...rest }) => {
-	const { styles, cx } = useStyles();
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: {
-			shadow: false,
-			variant: "filled"
-		},
-		variants: {
-			variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless
-			},
-			shadow: {
-				false: null,
-				true: styles.shadow
-			}
-		}
-	}), [styles]);
 	const tirmedChildren = children.trim();
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		align: "center",

package/es/Snippet/Snippet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Snippet.mjs","names":["Snippet: FC<SnippetProps>","Flexbox","Spotlight","SyntaxHighlighter","CopyButton"],"sources":["../../src/Snippet/Snippet.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { type FC, useMemo } from 'react';\n\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\nimport Spotlight from '@/awesome/Spotlight';\n\nimport { useStyles } from './style';\nimport type { SnippetProps } from './type';\n\nconst Snippet: FC<SnippetProps> = ({\n  ref,\n  prefix,\n  language = 'tsx',\n  children,\n  copyable = true,\n  variant = 'filled',\n  spotlight,\n  shadow,\n  className,\n  ...rest\n}) => {\n  const { styles, cx } = useStyles();\n\n  const variants = useMemo(\n    () =>\n      cva(styles.root, {\n        defaultVariants: {\n          shadow: false,\n          variant: 'filled',\n        },\n        /* eslint-disable sort-keys-fix/sort-keys-fix */\n        variants: {\n          variant: {\n            filled: styles.filled,\n            outlined: styles.outlined,\n            borderless: styles.borderless,\n          },\n          shadow: {\n            false: null,\n            true: styles.shadow,\n          },\n        },\n        /* eslint-enable sort-keys-fix/sort-keys-fix */\n      }),\n    [styles],\n  );\n\n  const tirmedChildren = children.trim();\n\n  return (\n    <Flexbox\n      align={'center'}\n      className={cx(variants({ shadow, variant }), className)}\n      data-code-type=\"highlighter\"\n      gap={8}\n      horizontal\n      ref={ref}\n      {...rest}\n    >\n      {spotlight && <Spotlight />}\n      <SyntaxHighlighter className={styles.hightlight} language={language}>\n        {[prefix, tirmedChildren].filter(Boolean).join(' ')}\n      </SyntaxHighlighter>\n      {copyable && <CopyButton content={tirmedChildren} size={'small'} />}\n    </Flexbox>\n  );\n};\n\nSnippet.displayName = 'Snippet';\n\nexport default Snippet;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,WAA6B,EACjC,KACA,QACA,WAAW,OACX,UACA,WAAW,MACX,UAAU,UACV,WACA,QACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,OAAO,WAAW;CAElC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB;GACf,QAAQ;GACR,SAAS;GACV;EAED,UAAU;GACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB;GACD,QAAQ;IACN,OAAO;IACP,MAAM,OAAO;IACd;GACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,iBAAiB,SAAS,MAAM;AAEtC,QACE,qBAACC;EACC,OAAO;EACP,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS,CAAC,EAAE,UAAU;EACvD,kBAAe;EACf,KAAK;EACL;EACK;EACL,GAAI;;GAEH,aAAa,oBAACC,sBAAY;GAC3B,oBAACC;IAAkB,WAAW,OAAO;IAAsB;cACxD,CAAC,QAAQ,eAAe,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;KACjC;GACnB,YAAY,oBAACC;IAAW,SAAS;IAAgB,MAAM;KAAW;;GAC3D;;AAId,QAAQ,cAAc;AAEtB,sBAAe"}
+{"version":3,"file":"Snippet.mjs","names":["Snippet: FC<SnippetProps>","Flexbox","Spotlight","SyntaxHighlighter","CopyButton"],"sources":["../../src/Snippet/Snippet.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\nimport Spotlight from '@/awesome/Spotlight';\n\nimport { styles, variants } from './style';\nimport type { SnippetProps } from './type';\n\nconst Snippet: FC<SnippetProps> = ({\n  ref,\n  prefix,\n  language = 'tsx',\n  children,\n  copyable = true,\n  variant = 'filled',\n  spotlight,\n  shadow,\n  className,\n  ...rest\n}) => {\n  const tirmedChildren = children.trim();\n\n  return (\n    <Flexbox\n      align={'center'}\n      className={cx(variants({ shadow, variant }), className)}\n      data-code-type=\"highlighter\"\n      gap={8}\n      horizontal\n      ref={ref}\n      {...rest}\n    >\n      {spotlight && <Spotlight />}\n      <SyntaxHighlighter className={styles.hightlight} language={language}>\n        {[prefix, tirmedChildren].filter(Boolean).join(' ')}\n      </SyntaxHighlighter>\n      {copyable && <CopyButton content={tirmedChildren} size={'small'} />}\n    </Flexbox>\n  );\n};\n\nSnippet.displayName = 'Snippet';\n\nexport default Snippet;\n"],"mappings":";;;;;;;;;;;AAaA,MAAMA,WAA6B,EACjC,KACA,QACA,WAAW,OACX,UACA,WAAW,MACX,UAAU,UACV,WACA,QACA,WACA,GAAG,WACC;CACJ,MAAM,iBAAiB,SAAS,MAAM;AAEtC,QACE,qBAACC;EACC,OAAO;EACP,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS,CAAC,EAAE,UAAU;EACvD,kBAAe;EACf,KAAK;EACL;EACK;EACL,GAAI;;GAEH,aAAa,oBAACC,sBAAY;GAC3B,oBAACC;IAAkB,WAAW,OAAO;IAAsB;cACxD,CAAC,QAAQ,eAAe,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;KACjC;GACnB,YAAY,oBAACC;IAAW,SAAS;IAAgB,MAAM;KAAW;;GAC3D;;AAId,QAAQ,cAAc;AAEtB,sBAAe"}