@lobehub/ui 4.3.2 → 4.3.3

package/es/Tooltip/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Tooltip/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token }) => {\n  return {\n    arrow: css`\n      fill: ${token.colorText};\n    `,\n    content: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      min-height: unset;\n      padding: 8px;\n      border-radius: ${token.borderRadiusSM}px;\n\n      color: ${token.colorBgLayout};\n      word-break: normal;\n\n      background-color: ${token.colorText};\n    `,\n    tooltip: css`\n      pointer-events: none;\n\n      /* Keep the class name for backwards compatibility and user overrides */\n      position: relative;\n      z-index: 114514;\n      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 12%));\n    `,\n    tooltipLayout: css`\n      transition: all 0.2s ease-in-out;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY;AACxD,QAAO;EACL,OAAO,KAAG;cACA,MAAM,UAAU;;EAE1B,SAAS,KAAG;;;;;;;uBAOO,MAAM,eAAe;;eAE7B,MAAM,cAAc;;;0BAGT,MAAM,UAAU;;EAEtC,SAAS,KAAG;;;;;;;;EAQZ,eAAe,KAAG;;;EAGnB;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    arrow: css`\n      fill: ${cssVar.colorText};\n    `,\n    content: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      min-height: unset;\n      padding: 8px;\n      border-radius: ${cssVar.borderRadiusSM};\n\n      color: ${cssVar.colorBgLayout};\n      word-break: normal;\n\n      background-color: ${cssVar.colorTextBase};\n    `,\n    tooltip: css`\n      pointer-events: none;\n\n      /* Keep the class name for backwards compatibility and user overrides */\n      position: relative;\n      z-index: 114514;\n      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 12%));\n    `,\n    tooltipLayout: css`\n      transition: all 0.2s ease-in-out;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,OAAO,KAAG;cACAA,SAAO,UAAU;;EAE3B,SAAS,KAAG;;;;;;;uBAOOA,SAAO,eAAe;;eAE9BA,SAAO,cAAc;;;0BAGVA,SAAO,cAAc;;EAE3C,SAAS,KAAG;;;;;;;;EAQZ,eAAe,KAAG;;;EAGnB;EACD"}

package/es/Video/index.d.mts

@@ -1,7 +1,7 @@
 import { FlexboxProps } from "../Flex/type.mjs";
 import "../Flex/index.mjs";
 import { VideoProps as VideoProps$1 } from "../types/index.mjs";
-import * as react69 from "react";
+import * as react60 from "react";
 import { CSSProperties, Ref } from "react";
 
 //#region src/Video/index.d.ts
@@ -39,7 +39,7 @@ interface VideoProps extends VideoProps$1, Pick<FlexboxProps, 'width' | 'height'
   };
   variant?: 'borderless' | 'filled' | 'outlined';
 }
-declare const Video: react69.NamedExoticComponent<VideoProps>;
+declare const Video: react60.NamedExoticComponent<VideoProps>;
 //#endregion
 export { Video, VideoProps };
 //# sourceMappingURL=index.d.mts.map

package/es/Video/index.mjs

@@ -2,35 +2,34 @@
 
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
-import { useStyles } from "./style.mjs";
+import { styles, variants } from "./style.mjs";
 import { memo, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Skeleton } from "antd";
-import { cva } from "class-variance-authority";
+import { cssVar, cx } from "antd-style";
 import { PlayIcon } from "lucide-react";
 
 //#region src/Video/index.tsx
 const Video = memo(({ ref, preload = "auto", src, style, classNames, className, maxHeight = "100%", maxWidth = "100%", minHeight, minWidth, onEnded, onPause, onPlay, onPlaying, width, height, onMouseEnter, styles: customStyles, onMouseLeave, preview = true, isLoading, variant = "filled", autoPlay, ...rest }) => {
 	const [isPlaying, setIsPlaying] = useState(false);
 	const [showControls, setShowControls] = useState(false);
-	const { cx, styles, theme } = useStyles({
+	const cssVariables = useMemo(() => {
+		const vars = {};
+		if (maxHeight !== void 0) vars["--video-max-height"] = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+		if (maxWidth !== void 0) vars["--video-max-width"] = typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
+		if (minHeight !== void 0) vars["--video-min-height"] = typeof minHeight === "number" ? `${minHeight}px` : minHeight;
+		if (minWidth !== void 0) vars["--video-min-width"] = typeof minWidth === "number" ? `${minWidth}px` : minWidth;
+		return vars;
+	}, [
 		maxHeight,
 		maxWidth,
 		minHeight,
 		minWidth
-	});
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: { variant: "filled" },
-		variants: { variant: {
-			filled: styles.filled,
-			outlined: styles.outlined,
-			borderless: styles.borderless
-		} }
-	}), [styles]);
+	]);
 	if (isLoading) return /* @__PURE__ */ jsx(Skeleton.Avatar, {
 		active: true,
 		style: {
-			borderRadius: theme.borderRadius,
+			borderRadius: cssVar.borderRadiusLG,
 			height,
 			maxHeight,
 			maxWidth,
@@ -44,6 +43,7 @@ const Video = memo(({ ref, preload = "auto", src, style, classNames, className,
 		height,
 		ref,
 		style: {
+			...cssVariables,
 			...style,
 			...customStyles?.wrapper
 		},

package/es/Video/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox","ActionIcon"],"sources":["../../src/Video/index.tsx"],"sourcesContent":["'use client';\n\nimport { Skeleton } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { PlayIcon } from 'lucide-react';\nimport { type CSSProperties, type Ref, memo, useMemo, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox, FlexboxProps } from '@/Flex';\nimport type { VideoProps as VProps } from '@/types';\n\nimport { useStyles } from './style';\n\nexport interface VideoProps extends VProps, Pick<FlexboxProps, 'width' | 'height'> {\n  autoPlay?: boolean;\n  classNames?: {\n    mask?: string;\n    video?: string;\n    wrapper?: string;\n  };\n  isLoading?: boolean;\n  loop?: boolean;\n  maxHeight?: number | string;\n  maxWidth?: number | string;\n  minHeight?: number | string;\n  minWidth?: number | string;\n  muted?: HTMLVideoElement['muted'];\n  onEnded?: VProps['onEnded'];\n  onMouseEnter?: VProps['onMouseEnter'];\n  onMouseLeave?: VProps['onMouseLeave'];\n  onPause?: VProps['onPause'];\n  onPlay?: VProps['onPlay'];\n  onPlaying?: VProps['onPlaying'];\n  onProgress?: VProps['onProgress'];\n  poster?: string;\n  preload?: HTMLVideoElement['preload'];\n  preview?: boolean;\n  ref?: Ref<HTMLDivElement>;\n  size?: number | string;\n  src: string;\n  styles?: {\n    mask?: CSSProperties;\n    video?: CSSProperties;\n    wrapper?: CSSProperties;\n  };\n  variant?: 'borderless' | 'filled' | 'outlined';\n}\n\nconst Video = memo<VideoProps>(\n  ({\n    ref,\n    preload = 'auto',\n    src,\n    style,\n    classNames,\n    className,\n    maxHeight = '100%',\n    maxWidth = '100%',\n    minHeight,\n    minWidth,\n    onEnded,\n    onPause,\n    onPlay,\n    onPlaying,\n    width,\n    height,\n    onMouseEnter,\n    styles: customStyles,\n    onMouseLeave,\n    preview = true,\n    isLoading,\n    variant = 'filled',\n    autoPlay,\n    ...rest\n  }) => {\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [showControls, setShowControls] = useState(false);\n    const { cx, styles, theme } = useStyles({\n      maxHeight,\n      maxWidth,\n      minHeight,\n      minWidth,\n    });\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\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          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    if (isLoading)\n      return (\n        <Skeleton.Avatar\n          active\n          style={{\n            borderRadius: theme.borderRadius,\n            height,\n            maxHeight,\n            maxWidth,\n            minHeight,\n            minWidth,\n            width,\n          }}\n        />\n      );\n\n    return (\n      <Flexbox\n        className={cx(variants({ variant }), className, classNames?.wrapper)}\n        height={height}\n        ref={ref}\n        style={{\n          ...style,\n          ...customStyles?.wrapper,\n        }}\n        width={width}\n      >\n        {preview && !isPlaying && (\n          <Flexbox\n            align={'center'}\n            className={cx(styles.mask, classNames?.mask)}\n            justify={'center'}\n            style={customStyles?.mask}\n          >\n            <ActionIcon color={'#fff'} icon={PlayIcon} variant={'filled'} />\n          </Flexbox>\n        )}\n        <video\n          autoPlay={autoPlay}\n          className={cx(styles.video, classNames?.video)}\n          controls={showControls}\n          height={height}\n          onEnded={(e) => {\n            setIsPlaying(false);\n            onEnded?.(e);\n          }}\n          onMouseEnter={(e) => {\n            setShowControls(true);\n            onMouseEnter?.(e);\n          }}\n          onMouseLeave={(e) => {\n            setShowControls(false);\n            onMouseLeave?.(e);\n          }}\n          onPause={(e) => {\n            setIsPlaying(false);\n            onPause?.(e);\n          }}\n          onPlay={(e) => {\n            setIsPlaying(true);\n            onPlay?.(e);\n          }}\n          onPlaying={(e) => {\n            setIsPlaying(true);\n            onPlaying?.(e);\n          }}\n          preload={preload}\n          style={{\n            height: 'auto',\n            maxWidth: '100%',\n            ...customStyles?.video,\n          }}\n          width={width}\n          {...rest}\n        >\n          <source src={src} />\n        </video>\n      </Flexbox>\n    );\n  },\n);\n\nVideo.displayName = 'Video';\n\nexport default Video;\n"],"mappings":";;;;;;;;;;;;AAgDA,MAAM,QAAQ,MACX,EACC,KACA,UAAU,QACV,KACA,OACA,YACA,WACA,YAAY,QACZ,WAAW,QACX,WACA,UACA,SACA,SACA,QACA,WACA,OACA,QACA,cACA,QAAQ,cACR,cACA,UAAU,MACV,WACA,UAAU,UACV,UACA,GAAG,WACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAM,EAAE,IAAI,QAAQ,UAAU,UAAU;EACtC;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB,EACf,SAAS,UACV;EAED,UAAU,EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB,EACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;AAED,KAAI,UACF,QACE,oBAAC,SAAS;EACR;EACA,OAAO;GACL,cAAc,MAAM;GACpB;GACA;GACA;GACA;GACA;GACA;GACD;GACD;AAGN,QACE,qBAACA;EACC,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,WAAW,YAAY,QAAQ;EAC5D;EACH;EACL,OAAO;GACL,GAAG;GACH,GAAG,cAAc;GAClB;EACM;aAEN,WAAW,CAAC,aACX,oBAACA;GACC,OAAO;GACP,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;GAC5C,SAAS;GACT,OAAO,cAAc;aAErB,oBAACC;IAAW,OAAO;IAAQ,MAAM;IAAU,SAAS;KAAY;IACxD,EAEZ,oBAAC;GACW;GACV,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;GAC9C,UAAU;GACF;GACR,UAAU,MAAM;AACd,iBAAa,MAAM;AACnB,cAAU,EAAE;;GAEd,eAAe,MAAM;AACnB,oBAAgB,KAAK;AACrB,mBAAe,EAAE;;GAEnB,eAAe,MAAM;AACnB,oBAAgB,MAAM;AACtB,mBAAe,EAAE;;GAEnB,UAAU,MAAM;AACd,iBAAa,MAAM;AACnB,cAAU,EAAE;;GAEd,SAAS,MAAM;AACb,iBAAa,KAAK;AAClB,aAAS,EAAE;;GAEb,YAAY,MAAM;AAChB,iBAAa,KAAK;AAClB,gBAAY,EAAE;;GAEP;GACT,OAAO;IACL,QAAQ;IACR,UAAU;IACV,GAAG,cAAc;IAClB;GACM;GACP,GAAI;aAEJ,oBAAC,YAAY,MAAO;IACd;GACA;EAGf;AAED,MAAM,cAAc;AAEpB,oBAAe"}
+{"version":3,"file":"index.mjs","names":["vars: Record<string, string>","Flexbox","ActionIcon"],"sources":["../../src/Video/index.tsx"],"sourcesContent":["'use client';\n\nimport { Skeleton } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport { PlayIcon } from 'lucide-react';\nimport { type CSSProperties, type Ref, memo, useMemo, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox, FlexboxProps } from '@/Flex';\nimport type { VideoProps as VProps } from '@/types';\n\nimport { styles, variants } from './style';\n\nexport interface VideoProps extends VProps, Pick<FlexboxProps, 'width' | 'height'> {\n  autoPlay?: boolean;\n  classNames?: {\n    mask?: string;\n    video?: string;\n    wrapper?: string;\n  };\n  isLoading?: boolean;\n  loop?: boolean;\n  maxHeight?: number | string;\n  maxWidth?: number | string;\n  minHeight?: number | string;\n  minWidth?: number | string;\n  muted?: HTMLVideoElement['muted'];\n  onEnded?: VProps['onEnded'];\n  onMouseEnter?: VProps['onMouseEnter'];\n  onMouseLeave?: VProps['onMouseLeave'];\n  onPause?: VProps['onPause'];\n  onPlay?: VProps['onPlay'];\n  onPlaying?: VProps['onPlaying'];\n  onProgress?: VProps['onProgress'];\n  poster?: string;\n  preload?: HTMLVideoElement['preload'];\n  preview?: boolean;\n  ref?: Ref<HTMLDivElement>;\n  size?: number | string;\n  src: string;\n  styles?: {\n    mask?: CSSProperties;\n    video?: CSSProperties;\n    wrapper?: CSSProperties;\n  };\n  variant?: 'borderless' | 'filled' | 'outlined';\n}\n\nconst Video = memo<VideoProps>(\n  ({\n    ref,\n    preload = 'auto',\n    src,\n    style,\n    classNames,\n    className,\n    maxHeight = '100%',\n    maxWidth = '100%',\n    minHeight,\n    minWidth,\n    onEnded,\n    onPause,\n    onPlay,\n    onPlaying,\n    width,\n    height,\n    onMouseEnter,\n    styles: customStyles,\n    onMouseLeave,\n    preview = true,\n    isLoading,\n    variant = 'filled',\n    autoPlay,\n    ...rest\n  }) => {\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [showControls, setShowControls] = useState(false);\n\n    // Convert props to CSS variables\n    const cssVariables = useMemo<Record<string, string>>(() => {\n      const vars: Record<string, string> = {};\n      if (maxHeight !== undefined) {\n        vars['--video-max-height'] = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n      }\n      if (maxWidth !== undefined) {\n        vars['--video-max-width'] = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;\n      }\n      if (minHeight !== undefined) {\n        vars['--video-min-height'] = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;\n      }\n      if (minWidth !== undefined) {\n        vars['--video-min-width'] = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;\n      }\n      return vars;\n    }, [maxHeight, maxWidth, minHeight, minWidth]);\n\n    if (isLoading)\n      return (\n        <Skeleton.Avatar\n          active\n          style={{\n            borderRadius: cssVar.borderRadiusLG,\n            height,\n            maxHeight,\n            maxWidth,\n            minHeight,\n            minWidth,\n            width,\n          }}\n        />\n      );\n\n    return (\n      <Flexbox\n        className={cx(variants({ variant }), className, classNames?.wrapper)}\n        height={height}\n        ref={ref}\n        style={{\n          ...cssVariables,\n          ...style,\n          ...customStyles?.wrapper,\n        }}\n        width={width}\n      >\n        {preview && !isPlaying && (\n          <Flexbox\n            align={'center'}\n            className={cx(styles.mask, classNames?.mask)}\n            justify={'center'}\n            style={customStyles?.mask}\n          >\n            <ActionIcon color={'#fff'} icon={PlayIcon} variant={'filled'} />\n          </Flexbox>\n        )}\n        <video\n          autoPlay={autoPlay}\n          className={cx(styles.video, classNames?.video)}\n          controls={showControls}\n          height={height}\n          onEnded={(e) => {\n            setIsPlaying(false);\n            onEnded?.(e);\n          }}\n          onMouseEnter={(e) => {\n            setShowControls(true);\n            onMouseEnter?.(e);\n          }}\n          onMouseLeave={(e) => {\n            setShowControls(false);\n            onMouseLeave?.(e);\n          }}\n          onPause={(e) => {\n            setIsPlaying(false);\n            onPause?.(e);\n          }}\n          onPlay={(e) => {\n            setIsPlaying(true);\n            onPlay?.(e);\n          }}\n          onPlaying={(e) => {\n            setIsPlaying(true);\n            onPlaying?.(e);\n          }}\n          preload={preload}\n          style={{\n            height: 'auto',\n            maxWidth: '100%',\n            ...customStyles?.video,\n          }}\n          width={width}\n          {...rest}\n        >\n          <source src={src} />\n        </video>\n      </Flexbox>\n    );\n  },\n);\n\nVideo.displayName = 'Video';\n\nexport default Video;\n"],"mappings":";;;;;;;;;;;;AAgDA,MAAM,QAAQ,MACX,EACC,KACA,UAAU,QACV,KACA,OACA,YACA,WACA,YAAY,QACZ,WAAW,QACX,WACA,UACA,SACA,SACA,QACA,WACA,OACA,QACA,cACA,QAAQ,cACR,cACA,UAAU,MACV,WACA,UAAU,UACV,UACA,GAAG,WACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CAGvD,MAAM,eAAe,cAAsC;EACzD,MAAMA,OAA+B,EAAE;AACvC,MAAI,cAAc,OAChB,MAAK,wBAAwB,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;AAElF,MAAI,aAAa,OACf,MAAK,uBAAuB,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;AAE/E,MAAI,cAAc,OAChB,MAAK,wBAAwB,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;AAElF,MAAI,aAAa,OACf,MAAK,uBAAuB,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;AAE/E,SAAO;IACN;EAAC;EAAW;EAAU;EAAW;EAAS,CAAC;AAE9C,KAAI,UACF,QACE,oBAAC,SAAS;EACR;EACA,OAAO;GACL,cAAc,OAAO;GACrB;GACA;GACA;GACA;GACA;GACA;GACD;GACD;AAGN,QACE,qBAACC;EACC,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,WAAW,YAAY,QAAQ;EAC5D;EACH;EACL,OAAO;GACL,GAAG;GACH,GAAG;GACH,GAAG,cAAc;GAClB;EACM;aAEN,WAAW,CAAC,aACX,oBAACA;GACC,OAAO;GACP,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;GAC5C,SAAS;GACT,OAAO,cAAc;aAErB,oBAACC;IAAW,OAAO;IAAQ,MAAM;IAAU,SAAS;KAAY;IACxD,EAEZ,oBAAC;GACW;GACV,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;GAC9C,UAAU;GACF;GACR,UAAU,MAAM;AACd,iBAAa,MAAM;AACnB,cAAU,EAAE;;GAEd,eAAe,MAAM;AACnB,oBAAgB,KAAK;AACrB,mBAAe,EAAE;;GAEnB,eAAe,MAAM;AACnB,oBAAgB,MAAM;AACtB,mBAAe,EAAE;;GAEnB,UAAU,MAAM;AACd,iBAAa,MAAM;AACnB,cAAU,EAAE;;GAEd,SAAS,MAAM;AACb,iBAAa,KAAK;AAClB,aAAS,EAAE;;GAEb,YAAY,MAAM;AAChB,iBAAa,KAAK;AAClB,gBAAY,EAAE;;GAEP;GACT,OAAO;IACL,QAAQ;IACR,UAAU;IACV,GAAG,cAAc;IAClB;GACM;GACP,GAAI;aAEJ,oBAAC,YAAY,MAAO;IACd;GACA;EAGf;AAED,MAAM,cAAc;AAEpB,oBAAe"}

package/es/Video/style.mjs

@@ -1,60 +1,67 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/Video/style.ts
-const useStyles = createStyles(({ css: css$1, token, cx: cx$1, stylish }, { maxHeight, maxWidth, minWidth, minHeight } = {}) => {
-	const MAX_HEIGHT = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
-	const MAX_WIDTH = typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
-	const MIN_HEIGHT = typeof minHeight === "number" ? `${minHeight}px` : minHeight;
-	const MIN_WIDTH = typeof minWidth === "number" ? `${minWidth}px` : minWidth;
-	const mask = cx$1(css$1`
-      pointer-events: none;
-
-      position: absolute;
-      z-index: 1;
-      inset: 0;
+const maskHoverCls = "lobe-video-mask";
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
+	const mask = css$1`
+    pointer-events: none;
 
-      width: 100%;
-      height: 100%;
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+
+    width: 100%;
+    height: 100%;
 
-      opacity: 0;
-      background: ${token.colorBgMask};
+    opacity: 0;
+    background: ${cssVar$1.colorBgMask};
 
-      transition: opacity 0.3s;
-    `);
+    transition: opacity 0.2s ease;
+  `;
 	return {
-		borderless: stylish.variantBorderlessWithoutHover,
-		filled: cx$1(stylish.variantOutlinedWithoutHover, stylish.variantFilledWithoutHover),
-		mask,
-		outlined: stylish.variantOutlinedWithoutHover,
+		borderless: staticStylish.variantBorderlessWithoutHover,
+		filled: cx(staticStylish.variantOutlinedWithoutHover, staticStylish.variantFilledWithoutHover),
+		mask: cx(maskHoverCls, mask),
+		outlined: staticStylish.variantOutlinedWithoutHover,
 		root: css$1`
-        position: relative;
+      position: relative;
 
-        overflow: hidden;
+      overflow: hidden;
 
-        width: 100%;
-        min-width: ${MIN_WIDTH};
-        max-width: ${MAX_WIDTH};
-        height: auto;
-        min-height: ${MIN_HEIGHT};
-        max-height: ${MAX_HEIGHT};
-        margin-block: 0 1em;
+      width: 100%;
+      min-width: var(--video-min-width, unset);
+      max-width: var(--video-max-width, 100%);
+      height: auto;
+      min-height: var(--video-min-height, unset);
+      max-height: var(--video-max-height, 100%);
+      margin-block: 0 1em;
+      border-radius: ${cssVar$1.borderRadius};
 
-        background: ${token.colorFillTertiary};
-        border-radius: ${token.borderRadius}px;
+      background: ${cssVar$1.colorFillTertiary};
 
-        &:hover {
-          .${mask} {
-            opacity: 1;
-          }
+      &:hover {
+        [class*='${maskHoverCls}'] {
+          opacity: 1;
         }
-      `,
+      }
+    `,
 		video: css$1`
-        cursor: pointer;
-        width: 100%;
-      `
+      cursor: pointer;
+      width: 100%;
+    `
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: { variant: "filled" },
+	variants: { variant: {
+		filled: styles.filled,
+		outlined: styles.outlined,
+		borderless: styles.borderless
+	} }
+});
 
 //#endregion
-export { useStyles };
+export { styles, variants };
 //# sourceMappingURL=style.mjs.map

package/es/Video/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/Video/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(\n  (\n    { css, token, cx, stylish },\n    {\n      maxHeight,\n      maxWidth,\n      minWidth,\n      minHeight,\n    }: {\n      maxHeight?: number | string;\n      maxWidth?: number | string;\n      minHeight?: number | string;\n      minWidth?: number | string;\n    } = {},\n  ) => {\n    const MAX_HEIGHT = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n    const MAX_WIDTH = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;\n    const MIN_HEIGHT = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;\n    const MIN_WIDTH = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;\n\n    const mask = cx(css`\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 1;\n      inset: 0;\n\n      width: 100%;\n      height: 100%;\n\n      opacity: 0;\n      background: ${token.colorBgMask};\n\n      transition: opacity 0.3s;\n    `);\n\n    return {\n      borderless: stylish.variantBorderlessWithoutHover,\n      filled: cx(stylish.variantOutlinedWithoutHover, stylish.variantFilledWithoutHover),\n      mask,\n      outlined: stylish.variantOutlinedWithoutHover,\n      root: css`\n        position: relative;\n\n        overflow: hidden;\n\n        width: 100%;\n        min-width: ${MIN_WIDTH};\n        max-width: ${MAX_WIDTH};\n        height: auto;\n        min-height: ${MIN_HEIGHT};\n        max-height: ${MAX_HEIGHT};\n        margin-block: 0 1em;\n\n        background: ${token.colorFillTertiary};\n        border-radius: ${token.borderRadius}px;\n\n        &:hover {\n          .${mask} {\n            opacity: 1;\n          }\n        }\n      `,\n      video: css`\n        cursor: pointer;\n        width: 100%;\n      `,\n    };\n  },\n);\n"],"mappings":";;;AAEA,MAAa,YAAY,cAErB,EAAE,YAAK,OAAO,UAAI,WAClB,EACE,WACA,UACA,UACA,cAME,EAAE,KACH;CACH,MAAM,aAAa,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;CACtE,MAAM,YAAY,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;CACnE,MAAM,aAAa,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;CACtE,MAAM,YAAY,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;CAEnE,MAAM,OAAOA,KAAG,KAAG;;;;;;;;;;;oBAWH,MAAM,YAAY;;;MAGhC;AAEF,QAAO;EACL,YAAY,QAAQ;EACpB,QAAQA,KAAG,QAAQ,6BAA6B,QAAQ,0BAA0B;EAClF;EACA,UAAU,QAAQ;EAClB,MAAM,KAAG;;;;;;qBAMM,UAAU;qBACV,UAAU;;sBAET,WAAW;sBACX,WAAW;;;sBAGX,MAAM,kBAAkB;yBACrB,MAAM,aAAa;;;aAG/B,KAAK;;;;;EAKZ,OAAO,KAAG;;;;EAIX;EAEJ"}
+{"version":3,"file":"style.mjs","names":["cssVar","lobeStaticStylish"],"sources":["../../src/Video/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\n// 用于 hover 选择器的类名标识\nexport const maskHoverCls = 'lobe-video-mask';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const mask = css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 1;\n    inset: 0;\n\n    width: 100%;\n    height: 100%;\n\n    opacity: 0;\n    background: ${cssVar.colorBgMask};\n\n    transition: opacity 0.2s ease;\n  `;\n\n  return {\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: cx(\n      lobeStaticStylish.variantOutlinedWithoutHover,\n      lobeStaticStylish.variantFilledWithoutHover,\n    ),\n    mask: cx(maskHoverCls, mask),\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    root: css`\n      position: relative;\n\n      overflow: hidden;\n\n      width: 100%;\n      min-width: var(--video-min-width, unset);\n      max-width: var(--video-max-width, 100%);\n      height: auto;\n      min-height: var(--video-min-height, unset);\n      max-height: var(--video-max-height, 100%);\n      margin-block: 0 1em;\n      border-radius: ${cssVar.borderRadius};\n\n      background: ${cssVar.colorFillTertiary};\n\n      &:hover {\n        [class*='${maskHoverCls}'] {\n          opacity: 1;\n        }\n      }\n    `,\n    video: css`\n      cursor: pointer;\n      width: 100%;\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\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  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAMA,MAAa,eAAe;AAE5B,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;CAC5D,MAAM,OAAO,KAAG;;;;;;;;;;;kBAWAA,SAAO,YAAY;;;;AAKnC,QAAO;EACL,YAAYC,cAAkB;EAC9B,QAAQ,GACNA,cAAkB,6BAClBA,cAAkB,0BACnB;EACD,MAAM,GAAG,cAAc,KAAK;EAC5B,UAAUA,cAAkB;EAC5B,MAAM,KAAG;;;;;;;;;;;;uBAYUD,SAAO,aAAa;;oBAEvBA,SAAO,kBAAkB;;;mBAG1B,aAAa;;;;;EAK5B,OAAO,KAAG;;;;EAIX;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,SAAS,UACV;CAED,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,UAAU,OAAO;EACjB,YAAY,OAAO;EACpB,EACF;CAEF,CAAC"}

package/es/awesome/AuroraBackground/AuroraBackground.d.mts

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

package/es/awesome/AuroraBackground/AuroraBackground.mjs

@@ -1,20 +1,21 @@
 '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, useThemeMode } from "antd-style";
 
 //#region src/awesome/AuroraBackground/AuroraBackground.tsx
 const AuroraBackground = memo(({ ref, classNames, styles: customStyles, children, ...rest }) => {
-	const { cx, styles } = useStyles();
+	const { isDarkMode } = useThemeMode();
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		ref,
 		...rest,
 		children: [/* @__PURE__ */ jsx(FlexBasic_default, {
 			className: cx(styles.wrapper, classNames?.wrapper),
 			style: customStyles?.wrapper,
-			children: /* @__PURE__ */ jsx("div", { className: styles.bg })
+			children: /* @__PURE__ */ jsx("div", { className: isDarkMode ? styles.bgDark : styles.bgLight })
 		}), /* @__PURE__ */ jsx(FlexBasic_default, {
 			className: classNames?.content,
 			flex: 1,

package/es/awesome/AuroraBackground/AuroraBackground.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AuroraBackground.mjs","names":["Flexbox"],"sources":["../../../src/awesome/AuroraBackground/AuroraBackground.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from './style';\nimport type { AuroraBackgroundProps } from './type';\n\nconst AuroraBackground = memo<AuroraBackgroundProps>(\n  ({ ref, classNames, styles: customStyles, children, ...rest }) => {\n    const { cx, styles } = useStyles();\n    return (\n      <Flexbox ref={ref} {...rest}>\n        <Flexbox className={cx(styles.wrapper, classNames?.wrapper)} style={customStyles?.wrapper}>\n          <div className={styles.bg} />\n        </Flexbox>\n        <Flexbox\n          className={classNames?.content}\n          flex={1}\n          style={{ zIndex: 1, ...customStyles?.content }}\n          width={'100%'}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nAuroraBackground.displayName = 'AuroraBackground';\n\nexport default AuroraBackground;\n"],"mappings":";;;;;;;;AASA,MAAM,mBAAmB,MACtB,EAAE,KAAK,YAAY,QAAQ,cAAc,UAAU,GAAG,WAAW;CAChE,MAAM,EAAE,IAAI,WAAW,WAAW;AAClC,QACE,qBAACA;EAAa;EAAK,GAAI;aACrB,oBAACA;GAAQ,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;GAAE,OAAO,cAAc;aAChF,oBAAC,SAAI,WAAW,OAAO,KAAM;IACrB,EACV,oBAACA;GACC,WAAW,YAAY;GACvB,MAAM;GACN,OAAO;IAAE,QAAQ;IAAG,GAAG,cAAc;IAAS;GAC9C,OAAO;GAEN;IACO;GACF;EAGf;AAED,iBAAiB,cAAc;AAE/B,+BAAe"}
+{"version":3,"file":"AuroraBackground.mjs","names":["Flexbox"],"sources":["../../../src/awesome/AuroraBackground/AuroraBackground.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { AuroraBackgroundProps } from './type';\n\nconst AuroraBackground = memo<AuroraBackgroundProps>(\n  ({ ref, classNames, styles: customStyles, children, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n    return (\n      <Flexbox ref={ref} {...rest}>\n        <Flexbox className={cx(styles.wrapper, classNames?.wrapper)} style={customStyles?.wrapper}>\n          <div className={isDarkMode ? styles.bgDark : styles.bgLight} />\n        </Flexbox>\n        <Flexbox\n          className={classNames?.content}\n          flex={1}\n          style={{ zIndex: 1, ...customStyles?.content }}\n          width={'100%'}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nAuroraBackground.displayName = 'AuroraBackground';\n\nexport default AuroraBackground;\n"],"mappings":";;;;;;;;;AAUA,MAAM,mBAAmB,MACtB,EAAE,KAAK,YAAY,QAAQ,cAAc,UAAU,GAAG,WAAW;CAChE,MAAM,EAAE,eAAe,cAAc;AACrC,QACE,qBAACA;EAAa;EAAK,GAAI;aACrB,oBAACA;GAAQ,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;GAAE,OAAO,cAAc;aAChF,oBAAC,SAAI,WAAW,aAAa,OAAO,SAAS,OAAO,UAAW;IACvD,EACV,oBAACA;GACC,WAAW,YAAY;GACvB,MAAM;GACN,OAAO;IAAE,QAAQ;IAAG,GAAG,cAAc;IAAS;GAC9C,OAAO;GAEN;IACO;GACF;EAGf;AAED,iBAAiB,cAAc;AAE/B,+BAAe"}

package/es/awesome/AuroraBackground/style.mjs

@@ -1,8 +1,7 @@
-import { createStyles, keyframes } from "antd-style";
+import { createStaticStyles, keyframes, responsive } from "antd-style";
 
 //#region src/awesome/AuroraBackground/style.ts
-const useStyles = createStyles(({ cx: cx$1, isDarkMode, css: css$1, responsive }) => {
-	const aurora = keyframes`
+const aurora = keyframes`
   0% {
     background-position: 50% 50%, 50% 50%;
   }
@@ -10,95 +9,135 @@ const useStyles = createStyles(({ cx: cx$1, isDarkMode, css: css$1, responsive }
     background-position: 350% 50%, 350% 50%;
   }
 `;
-	const dark = css$1`
-    background-image:
-      repeating-linear-gradient(
-        100deg,
-        rgb(0, 0, 0) 0%,
-        rgb(0, 0, 0) 7%,
-        rgba(0, 0, 0, 0%) 10%,
-        rgba(0, 0, 0, 0%) 12%,
-        rgb(0, 0, 0) 16%
-      ),
-      repeating-linear-gradient(
-        100deg,
-        rgb(59, 130, 246) 10%,
-        rgb(165, 180, 252) 15%,
-        rgb(147, 197, 253) 20%,
-        rgb(221, 214, 254) 25%,
-        rgb(96, 165, 250) 30%
-      );
-  `;
-	const light = css$1`
-    background-image:
-      repeating-linear-gradient(
-        100deg,
-        rgb(255, 255, 255) 0%,
-        rgb(255, 255, 255) 7%,
-        rgba(0, 0, 0, 0%) 10%,
-        rgba(0, 0, 0, 0%) 12%,
-        rgb(255, 255, 255) 16%
-      ),
-      repeating-linear-gradient(
-        100deg,
-        rgb(59, 130, 246) 10%,
-        rgb(165, 180, 252) 15%,
-        rgb(147, 197, 253) 20%,
-        rgb(221, 214, 254) 25%,
-        rgb(96, 165, 250) 30%
-      );
-  `;
-	const background = isDarkMode ? dark : light;
-	return {
-		bg: cx$1(background, css$1`
-        pointer-events: none;
-        will-change: transform;
-
-        position: absolute;
-        inset: -10px;
-
-        max-height: 100vh;
-
-        opacity: ${isDarkMode ? .3 : .6};
-        background-position:
-          50% 50%,
-          50% 50%;
-        background-size: 300%, 200%;
-        filter: blur(10px) invert(${isDarkMode ? 0 : 1});
-
-        animation: ${aurora} 100s linear infinite;
-
-        mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);
-
-        &::after {
-          ${background};
-          position: absolute;
-
-          content: '';
-
-          inset: 0;
-
-          animation: ${aurora} 100s linear infinite;
-
-          mix-blend-mode: difference;
-          background-attachment: fixed;
-          background-size: 200%, 100%;
-        }
-
-        ${responsive.mobile} {
-          transform: scale(2);
-          max-height: 25vh;
-        }
-      `),
-		wrapper: css$1`
+const darkBackground = `
+  background-image:
+    repeating-linear-gradient(
+      100deg,
+      rgb(0, 0, 0) 0%,
+      rgb(0, 0, 0) 7%,
+      rgba(0, 0, 0, 0%) 10%,
+      rgba(0, 0, 0, 0%) 12%,
+      rgb(0, 0, 0) 16%
+    ),
+    repeating-linear-gradient(
+      100deg,
+      rgb(59, 130, 246) 10%,
+      rgb(165, 180, 252) 15%,
+      rgb(147, 197, 253) 20%,
+      rgb(221, 214, 254) 25%,
+      rgb(96, 165, 250) 30%
+    );
+`;
+const lightBackground = `
+  background-image:
+    repeating-linear-gradient(
+      100deg,
+      rgb(255, 255, 255) 0%,
+      rgb(255, 255, 255) 7%,
+      rgba(0, 0, 0, 0%) 10%,
+      rgba(0, 0, 0, 0%) 12%,
+      rgb(255, 255, 255) 16%
+    ),
+    repeating-linear-gradient(
+      100deg,
+      rgb(59, 130, 246) 10%,
+      rgb(165, 180, 252) 15%,
+      rgb(147, 197, 253) 20%,
+      rgb(221, 214, 254) 25%,
+      rgb(96, 165, 250) 30%
+    );
+`;
+const styles = createStaticStyles(({ css: css$1 }) => ({
+	bgDark: css$1`
+    ${darkBackground}
+    pointer-events: none;
+    will-change: transform;
+
+    position: absolute;
+    inset: -10px;
+
+    max-height: 100vh;
+
+    opacity: 0.3;
+    background-position:
+      50% 50%,
+      50% 50%;
+    background-size: 300%, 200%;
+    filter: blur(10px) invert(0);
+
+    animation: ${aurora} 100s linear infinite;
+
+    mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);
+
+    &::after {
+      ${darkBackground}
+      position: absolute;
+
+      content: '';
+
+      inset: 0;
+
+      animation: ${aurora} 100s linear infinite;
+
+      mix-blend-mode: difference;
+      background-attachment: fixed;
+      background-size: 200%, 100%;
+    }
+
+    ${responsive.sm} {
+      transform: scale(2);
+      max-height: 25vh;
+    }
+  `,
+	bgLight: css$1`
+    ${lightBackground}
+    pointer-events: none;
+    will-change: transform;
+
+    position: absolute;
+    inset: -10px;
+
+    max-height: 100vh;
+
+    opacity: 0.6;
+    background-position:
+      50% 50%,
+      50% 50%;
+    background-size: 300%, 200%;
+    filter: blur(10px) invert(1);
+
+    animation: ${aurora} 100s linear infinite;
+
+    mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);
+
+    &::after {
+      ${lightBackground}
       position: absolute;
-      z-index: 0;
+
+      content: '';
+
       inset: 0;
-      overflow: hidden;
-    `
-	};
-});
+
+      animation: ${aurora} 100s linear infinite;
+
+      mix-blend-mode: difference;
+      background-attachment: fixed;
+      background-size: 200%, 100%;
+    }
+
+    ${responsive.sm} {
+      transform: scale(2);
+      max-height: 25vh;
+    }
+  `,
+	wrapper: css$1`
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    overflow: hidden;
+  `
+}));
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/awesome/AuroraBackground/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../../src/awesome/AuroraBackground/style.ts"],"sourcesContent":["import { createStyles, keyframes } from 'antd-style';\n\nexport const useStyles = createStyles(({ cx, isDarkMode, css, responsive }) => {\n  const aurora = keyframes`\n  0% {\n    background-position: 50% 50%, 50% 50%;\n  }\n  100% {\n    background-position: 350% 50%, 350% 50%;\n  }\n`;\n\n  const dark = css`\n    background-image:\n      repeating-linear-gradient(\n        100deg,\n        rgb(0, 0, 0) 0%,\n        rgb(0, 0, 0) 7%,\n        rgba(0, 0, 0, 0%) 10%,\n        rgba(0, 0, 0, 0%) 12%,\n        rgb(0, 0, 0) 16%\n      ),\n      repeating-linear-gradient(\n        100deg,\n        rgb(59, 130, 246) 10%,\n        rgb(165, 180, 252) 15%,\n        rgb(147, 197, 253) 20%,\n        rgb(221, 214, 254) 25%,\n        rgb(96, 165, 250) 30%\n      );\n  `;\n\n  const light = css`\n    background-image:\n      repeating-linear-gradient(\n        100deg,\n        rgb(255, 255, 255) 0%,\n        rgb(255, 255, 255) 7%,\n        rgba(0, 0, 0, 0%) 10%,\n        rgba(0, 0, 0, 0%) 12%,\n        rgb(255, 255, 255) 16%\n      ),\n      repeating-linear-gradient(\n        100deg,\n        rgb(59, 130, 246) 10%,\n        rgb(165, 180, 252) 15%,\n        rgb(147, 197, 253) 20%,\n        rgb(221, 214, 254) 25%,\n        rgb(96, 165, 250) 30%\n      );\n  `;\n\n  const background = isDarkMode ? dark : light;\n\n  return {\n    bg: cx(\n      background,\n      css`\n        pointer-events: none;\n        will-change: transform;\n\n        position: absolute;\n        inset: -10px;\n\n        max-height: 100vh;\n\n        opacity: ${isDarkMode ? 0.3 : 0.6};\n        background-position:\n          50% 50%,\n          50% 50%;\n        background-size: 300%, 200%;\n        filter: blur(10px) invert(${isDarkMode ? 0 : 1});\n\n        animation: ${aurora} 100s linear infinite;\n\n        mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);\n\n        &::after {\n          ${background};\n          position: absolute;\n\n          content: '';\n\n          inset: 0;\n\n          animation: ${aurora} 100s linear infinite;\n\n          mix-blend-mode: difference;\n          background-attachment: fixed;\n          background-size: 200%, 100%;\n        }\n\n        ${responsive.mobile} {\n          transform: scale(2);\n          max-height: 25vh;\n        }\n      `,\n    ),\n    wrapper: css`\n      position: absolute;\n      z-index: 0;\n      inset: 0;\n      overflow: hidden;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,UAAI,YAAY,YAAK,iBAAiB;CAC7E,MAAM,SAAS,SAAS;;;;;;;;CASxB,MAAM,OAAO,KAAG;;;;;;;;;;;;;;;;;;;CAoBhB,MAAM,QAAQ,KAAG;;;;;;;;;;;;;;;;;;;CAoBjB,MAAM,aAAa,aAAa,OAAO;AAEvC,QAAO;EACL,IAAIA,KACF,YACA,KAAG;;;;;;;;;mBASU,aAAa,KAAM,GAAI;;;;;oCAKN,aAAa,IAAI,EAAE;;qBAElC,OAAO;;;;;YAKhB,WAAW;;;;;;;uBAOA,OAAO;;;;;;;UAOpB,WAAW,OAAO;;;;QAKvB;EACD,SAAS,KAAG;;;;;;EAMb;EACD"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/AuroraBackground/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes, responsive } from 'antd-style';\n\nconst aurora = keyframes`\n  0% {\n    background-position: 50% 50%, 50% 50%;\n  }\n  100% {\n    background-position: 350% 50%, 350% 50%;\n  }\n`;\n\nconst darkBackground = `\n  background-image:\n    repeating-linear-gradient(\n      100deg,\n      rgb(0, 0, 0) 0%,\n      rgb(0, 0, 0) 7%,\n      rgba(0, 0, 0, 0%) 10%,\n      rgba(0, 0, 0, 0%) 12%,\n      rgb(0, 0, 0) 16%\n    ),\n    repeating-linear-gradient(\n      100deg,\n      rgb(59, 130, 246) 10%,\n      rgb(165, 180, 252) 15%,\n      rgb(147, 197, 253) 20%,\n      rgb(221, 214, 254) 25%,\n      rgb(96, 165, 250) 30%\n    );\n`;\n\nconst lightBackground = `\n  background-image:\n    repeating-linear-gradient(\n      100deg,\n      rgb(255, 255, 255) 0%,\n      rgb(255, 255, 255) 7%,\n      rgba(0, 0, 0, 0%) 10%,\n      rgba(0, 0, 0, 0%) 12%,\n      rgb(255, 255, 255) 16%\n    ),\n    repeating-linear-gradient(\n      100deg,\n      rgb(59, 130, 246) 10%,\n      rgb(165, 180, 252) 15%,\n      rgb(147, 197, 253) 20%,\n      rgb(221, 214, 254) 25%,\n      rgb(96, 165, 250) 30%\n    );\n`;\n\nexport const styles = createStaticStyles(({ css }) => ({\n  bgDark: css`\n    ${darkBackground}\n    pointer-events: none;\n    will-change: transform;\n\n    position: absolute;\n    inset: -10px;\n\n    max-height: 100vh;\n\n    opacity: 0.3;\n    background-position:\n      50% 50%,\n      50% 50%;\n    background-size: 300%, 200%;\n    filter: blur(10px) invert(0);\n\n    animation: ${aurora} 100s linear infinite;\n\n    mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);\n\n    &::after {\n      ${darkBackground}\n      position: absolute;\n\n      content: '';\n\n      inset: 0;\n\n      animation: ${aurora} 100s linear infinite;\n\n      mix-blend-mode: difference;\n      background-attachment: fixed;\n      background-size: 200%, 100%;\n    }\n\n    ${responsive.sm} {\n      transform: scale(2);\n      max-height: 25vh;\n    }\n  `,\n\n  bgLight: css`\n    ${lightBackground}\n    pointer-events: none;\n    will-change: transform;\n\n    position: absolute;\n    inset: -10px;\n\n    max-height: 100vh;\n\n    opacity: 0.6;\n    background-position:\n      50% 50%,\n      50% 50%;\n    background-size: 300%, 200%;\n    filter: blur(10px) invert(1);\n\n    animation: ${aurora} 100s linear infinite;\n\n    mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);\n\n    &::after {\n      ${lightBackground}\n      position: absolute;\n\n      content: '';\n\n      inset: 0;\n\n      animation: ${aurora} 100s linear infinite;\n\n      mix-blend-mode: difference;\n      background-attachment: fixed;\n      background-size: 200%, 100%;\n    }\n\n    ${responsive.sm} {\n      transform: scale(2);\n      max-height: 25vh;\n    }\n  `,\n\n  wrapper: css`\n    position: absolute;\n    z-index: 0;\n    inset: 0;\n    overflow: hidden;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAM,SAAS,SAAS;;;;;;;;AASxB,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;AAoBvB,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;AAoBxB,MAAa,SAAS,oBAAoB,EAAE,kBAAW;CACrD,QAAQ,KAAG;MACP,eAAe;;;;;;;;;;;;;;;;iBAgBJ,OAAO;;;;;QAKhB,eAAe;;;;;;;mBAOJ,OAAO;;;;;;;MAOpB,WAAW,GAAG;;;;;CAMlB,SAAS,KAAG;MACR,gBAAgB;;;;;;;;;;;;;;;;iBAgBL,OAAO;;;;;QAKhB,gBAAgB;;;;;;;mBAOL,OAAO;;;;;;;MAOpB,WAAW,GAAG;;;;;CAMlB,SAAS,KAAG;;;;;;CAMb,EAAE"}

package/es/awesome/BottomGradientButton/BottomGradientButton.d.mts

@@ -1,9 +1,9 @@
 import { ButtonProps } from "../../Button/type.mjs";
 import "../../Button/index.mjs";
-import * as react107 from "react";
+import * as react115 from "react";
 
 //#region src/awesome/BottomGradientButton/BottomGradientButton.d.ts
-declare const BottomGradientButton: react107.NamedExoticComponent<ButtonProps>;
+declare const BottomGradientButton: react115.NamedExoticComponent<ButtonProps>;
 //#endregion
 export { BottomGradientButton };
 //# sourceMappingURL=BottomGradientButton.d.mts.map

package/es/awesome/BottomGradientButton/BottomGradientButton.mjs

@@ -1,13 +1,13 @@
 'use client';
 
 import Button_default from "../../Button/Button.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/awesome/BottomGradientButton/BottomGradientButton.tsx
 const BottomGradientButton = memo(({ className, children, style, ref, ...rest }) => {
-	const { cx, styles } = useStyles();
 	return /* @__PURE__ */ jsx(Button_default, {
 		className: cx(styles, className),
 		ref,

package/es/awesome/BottomGradientButton/BottomGradientButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomGradientButton.mjs","names":["Button"],"sources":["../../../src/awesome/BottomGradientButton/BottomGradientButton.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport Button from '@/Button';\n\nimport { useStyles } from './style';\nimport type { BottomGradientButtonProps } from './type';\n\nconst BottomGradientButton = memo<BottomGradientButtonProps>(\n  ({ className, children, style, ref, ...rest }) => {\n    const { cx, styles } = useStyles();\n\n    return (\n      <Button\n        className={cx(styles, className)}\n        ref={ref}\n        shape={'round'}\n        style={{\n          paddingInline: 16,\n          width: 'unset',\n          ...style,\n        }}\n        variant={'filled'}\n        {...rest}\n      >\n        {children}\n      </Button>\n    );\n  },\n);\n\nBottomGradientButton.displayName = 'BottomGradientButton';\n\nexport default BottomGradientButton;\n"],"mappings":";;;;;;;;AASA,MAAM,uBAAuB,MAC1B,EAAE,WAAW,UAAU,OAAO,KAAK,GAAG,WAAW;CAChD,MAAM,EAAE,IAAI,WAAW,WAAW;AAElC,QACE,oBAACA;EACC,WAAW,GAAG,QAAQ,UAAU;EAC3B;EACL,OAAO;EACP,OAAO;GACL,eAAe;GACf,OAAO;GACP,GAAG;GACJ;EACD,SAAS;EACT,GAAI;EAEH;GACM;EAGd;AAED,qBAAqB,cAAc;AAEnC,mCAAe"}
+{"version":3,"file":"BottomGradientButton.mjs","names":["Button"],"sources":["../../../src/awesome/BottomGradientButton/BottomGradientButton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport Button from '@/Button';\n\nimport { styles } from './style';\nimport type { BottomGradientButtonProps } from './type';\n\nconst BottomGradientButton = memo<BottomGradientButtonProps>(\n  ({ className, children, style, ref, ...rest }) => {\n    return (\n      <Button\n        className={cx(styles, className)}\n        ref={ref}\n        shape={'round'}\n        style={{\n          paddingInline: 16,\n          width: 'unset',\n          ...style,\n        }}\n        variant={'filled'}\n        {...rest}\n      >\n        {children}\n      </Button>\n    );\n  },\n);\n\nBottomGradientButton.displayName = 'BottomGradientButton';\n\nexport default BottomGradientButton;\n"],"mappings":";;;;;;;;;AAUA,MAAM,uBAAuB,MAC1B,EAAE,WAAW,UAAU,OAAO,KAAK,GAAG,WAAW;AAChD,QACE,oBAACA;EACC,WAAW,GAAG,QAAQ,UAAU;EAC3B;EACL,OAAO;EACP,OAAO;GACL,eAAe;GACf,OAAO;GACP,GAAG;GACJ;EACD,SAAS;EACT,GAAI;EAEH;GACM;EAGd;AAED,qBAAqB,cAAc;AAEnC,mCAAe"}

package/es/awesome/BottomGradientButton/style.mjs

@@ -1,10 +1,11 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx } from "antd-style";
 
 //#region src/awesome/BottomGradientButton/style.ts
-const useStyles = createStyles(({ cx: cx$1, stylish, css: css$1, token }) => cx$1(stylish.resetLinkColor, css$1`
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => cx(staticStylish.resetLinkColor, css$1`
       overflow: hidden;
       font-weight: bold;
-      color: ${token.colorTextSecondary};
+      color: ${cssVar$1.colorTextSecondary};
       transition: all 0.2s ease-in-out;
 
       &::before {
@@ -19,7 +20,7 @@ const useStyles = createStyles(({ cx: cx$1, stylish, css: css$1, token }) => cx$
         height: 1px;
 
         opacity: 0;
-        background-image: linear-gradient(to right, transparent, ${token.gold}, transparent);
+        background-image: linear-gradient(to right, transparent, ${cssVar$1.gold}, transparent);
 
         transition: all 0.2s ease-in-out;
       }
@@ -32,5 +33,5 @@ const useStyles = createStyles(({ cx: cx$1, stylish, css: css$1, token }) => cx$
     `));
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map