@lobehub/ui 4.3.2 → 4.3.3

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../../src/awesome/BottomGradientButton/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ cx, stylish, css, token }) =>\n  cx(\n    stylish.resetLinkColor,\n    css`\n      overflow: hidden;\n      font-weight: bold;\n      color: ${token.colorTextSecondary};\n      transition: all 0.2s ease-in-out;\n\n      &::before {\n        content: '';\n\n        position: absolute;\n        inset-block-end: 0;\n\n        display: block;\n\n        width: 50%;\n        height: 1px;\n\n        opacity: 0;\n        background-image: linear-gradient(to right, transparent, ${token.gold}, transparent);\n\n        transition: all 0.2s ease-in-out;\n      }\n\n      &:hover {\n        &::before {\n          opacity: 1;\n        }\n      }\n    `,\n  ),\n);\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,UAAI,SAAS,YAAK,YACzDA,KACE,QAAQ,gBACR,KAAG;;;eAGQ,MAAM,mBAAmB;;;;;;;;;;;;;;;mEAe2B,MAAM,KAAK;;;;;;;;;;MAW3E,CACF"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../../src/awesome/BottomGradientButton/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) =>\n  cx(\n    lobeStaticStylish.resetLinkColor,\n    css`\n      overflow: hidden;\n      font-weight: bold;\n      color: ${cssVar.colorTextSecondary};\n      transition: all 0.2s ease-in-out;\n\n      &::before {\n        content: '';\n\n        position: absolute;\n        inset-block-end: 0;\n\n        display: block;\n\n        width: 50%;\n        height: 1px;\n\n        opacity: 0;\n        background-image: linear-gradient(to right, transparent, ${cssVar.gold}, transparent);\n\n        transition: all 0.2s ease-in-out;\n      }\n\n      &:hover {\n        &::before {\n          opacity: 1;\n        }\n      }\n    `,\n  ),\n);\n"],"mappings":";;;;AAIA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAC/C,GACEA,cAAkB,gBAClB,KAAG;;;eAGQC,SAAO,mBAAmB;;;;;;;;;;;;;;;mEAe0BA,SAAO,KAAK;;;;;;;;;;MAW5E,CACF"}

package/es/awesome/Features/FeatureItem.mjs

@@ -6,9 +6,10 @@ import Center_default from "../../Flex/Center.mjs";
 import Icon_default from "../../Icon/Icon.mjs";
 import Text_default from "../../Text/Text.mjs";
 import Img_default from "../../Img/index.mjs";
-import { useStyles } from "./style.mjs";
-import { memo } from "react";
+import { styles } from "./style.mjs";
+import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/awesome/Features/FeatureItem.tsx
 const Image = memo(({ image, className, title, style }) => {
@@ -25,13 +26,15 @@ const Image = memo(({ image, className, title, style }) => {
 });
 const Item = memo(({ style, className, row, column, description, image, title, link, icon, imageStyle, openExternal, ...rest }) => {
 	const rowNumber = row || 7;
-	const { styles, cx } = useStyles({
-		hasLink: Boolean(link),
-		rowNum: rowNumber
-	});
+	const hasLink = Boolean(link);
+	const cssVariables = useMemo(() => ({
+		"--features-row-num": String(rowNumber),
+		"--features-title-hover-size": hasLink ? "14px" : "20px"
+	}), [rowNumber, hasLink]);
 	return /* @__PURE__ */ jsx("div", {
-		className: cx(styles.container, className),
+		className: cx(hasLink ? styles.containerHasLink : styles.container, className),
 		style: {
+			...cssVariables,
 			gridColumn: `span ${column || 1}`,
 			gridRow: `span ${rowNumber}`,
 			...style

package/es/awesome/Features/FeatureItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureItem.mjs","names":["Img","Center","Icon","Flexbox","Text","A"],"sources":["../../../src/awesome/Features/FeatureItem.tsx"],"sourcesContent":["'use client';\n\nimport { CSSProperties, memo } from 'react';\n\nimport A from '@/A';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport Text from '@/Text';\n\nimport { useStyles } from './style';\nimport type { FeatureItemProps } from './type';\n\nconst Image = memo<{ className?: string; image: string; style?: CSSProperties; title: string }>(\n  ({ image, className, title, style }) => {\n    return image.startsWith('http') ? (\n      <Img alt={title} className={className} src={image} style={style} />\n    ) : (\n      <Center className={className} style={style}>\n        {image}\n      </Center>\n    );\n  },\n);\n\nconst Item = memo<FeatureItemProps>(\n  ({\n    style,\n    className,\n    row,\n    column,\n    description,\n    image,\n    title,\n    link,\n    icon,\n    imageStyle,\n    openExternal,\n    ...rest\n  }) => {\n    const rowNumber = row || 7;\n    const { styles, cx } = useStyles({ hasLink: Boolean(link), rowNum: rowNumber });\n\n    return (\n      <div\n        className={cx(styles.container, className)}\n        style={{\n          gridColumn: `span ${column || 1}`,\n          gridRow: `span ${rowNumber}`,\n          ...style,\n        }}\n        {...rest}\n      >\n        <div className={styles.cell}>\n          {image ||\n            (icon && (\n              <Center className={styles.imgContainer} style={imageStyle}>\n                {icon && <Icon className={styles.img} icon={icon} />}\n                {image && <Image className={styles.img} image={image} title={title} />}\n              </Center>\n            ))}\n          {title && (\n            <Flexbox align={'center'} as={'h3'} className={styles.title} gap={8} horizontal>\n              {title}\n            </Flexbox>\n          )}\n          {description && (\n            <Text\n              className={styles.desc}\n              ellipsis={{\n                rows: 4,\n              }}\n            >\n              {description}\n            </Text>\n          )}\n          {link && (\n            <div className={styles.link}>\n              <A href={link} rel=\"noreferrer\" target={openExternal ? '_blank' : undefined}>\n                Read More\n              </A>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nItem.displayName = 'FeatureItem';\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,QAAQ,MACX,EAAE,OAAO,WAAW,OAAO,YAAY;AACtC,QAAO,MAAM,WAAW,OAAO,GAC7B,oBAACA;EAAI,KAAK;EAAkB;EAAW,KAAK;EAAc;GAAS,GAEnE,oBAACC;EAAkB;EAAkB;YAClC;GACM;EAGd;AAED,MAAM,OAAO,MACV,EACC,OACA,WACA,KACA,QACA,aACA,OACA,OACA,MACA,MACA,YACA,cACA,GAAG,WACC;CACJ,MAAM,YAAY,OAAO;CACzB,MAAM,EAAE,QAAQ,OAAO,UAAU;EAAE,SAAS,QAAQ,KAAK;EAAE,QAAQ;EAAW,CAAC;AAE/E,QACE,oBAAC;EACC,WAAW,GAAG,OAAO,WAAW,UAAU;EAC1C,OAAO;GACL,YAAY,QAAQ,UAAU;GAC9B,SAAS,QAAQ;GACjB,GAAG;GACJ;EACD,GAAI;YAEJ,qBAAC;GAAI,WAAW,OAAO;;IACpB,SACE,QACC,qBAACA;KAAO,WAAW,OAAO;KAAc,OAAO;gBAC5C,QAAQ,oBAACC;MAAK,WAAW,OAAO;MAAW;OAAQ,EACnD,SAAS,oBAAC;MAAM,WAAW,OAAO;MAAY;MAAc;OAAS;MAC/D;IAEZ,SACC,oBAACC;KAAQ,OAAO;KAAU,IAAI;KAAM,WAAW,OAAO;KAAO,KAAK;KAAG;eAClE;MACO;IAEX,eACC,oBAACC;KACC,WAAW,OAAO;KAClB,UAAU,EACR,MAAM,GACP;eAEA;MACI;IAER,QACC,oBAAC;KAAI,WAAW,OAAO;eACrB,oBAACC;MAAE,MAAM;MAAM,KAAI;MAAa,QAAQ,eAAe,WAAW;gBAAW;OAEzE;MACA;;IAEJ;GACF;EAGX;AAED,KAAK,cAAc;AAEnB,0BAAe"}
+{"version":3,"file":"FeatureItem.mjs","names":["Img","Center","Icon","Flexbox","Text","A"],"sources":["../../../src/awesome/Features/FeatureItem.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { CSSProperties, memo, useMemo } from 'react';\n\nimport A from '@/A';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { FeatureItemProps } from './type';\n\nconst Image = memo<{ className?: string; image: string; style?: CSSProperties; title: string }>(\n  ({ image, className, title, style }) => {\n    return image.startsWith('http') ? (\n      <Img alt={title} className={className} src={image} style={style} />\n    ) : (\n      <Center className={className} style={style}>\n        {image}\n      </Center>\n    );\n  },\n);\n\nconst Item = memo<FeatureItemProps>(\n  ({\n    style,\n    className,\n    row,\n    column,\n    description,\n    image,\n    title,\n    link,\n    icon,\n    imageStyle,\n    openExternal,\n    ...rest\n  }) => {\n    const rowNumber = row || 7;\n    const hasLink = Boolean(link);\n\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--features-row-num': String(rowNumber),\n        '--features-title-hover-size': hasLink ? '14px' : '20px',\n      }),\n      [rowNumber, hasLink],\n    );\n\n    return (\n      <div\n        className={cx(hasLink ? styles.containerHasLink : styles.container, className)}\n        style={{\n          ...cssVariables,\n          gridColumn: `span ${column || 1}`,\n          gridRow: `span ${rowNumber}`,\n          ...style,\n        }}\n        {...rest}\n      >\n        <div className={styles.cell}>\n          {image ||\n            (icon && (\n              <Center className={styles.imgContainer} style={imageStyle}>\n                {icon && <Icon className={styles.img} icon={icon} />}\n                {image && <Image className={styles.img} image={image} title={title} />}\n              </Center>\n            ))}\n          {title && (\n            <Flexbox align={'center'} as={'h3'} className={styles.title} gap={8} horizontal>\n              {title}\n            </Flexbox>\n          )}\n          {description && (\n            <Text\n              className={styles.desc}\n              ellipsis={{\n                rows: 4,\n              }}\n            >\n              {description}\n            </Text>\n          )}\n          {link && (\n            <div className={styles.link}>\n              <A href={link} rel=\"noreferrer\" target={openExternal ? '_blank' : undefined}>\n                Read More\n              </A>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nItem.displayName = 'FeatureItem';\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,QAAQ,MACX,EAAE,OAAO,WAAW,OAAO,YAAY;AACtC,QAAO,MAAM,WAAW,OAAO,GAC7B,oBAACA;EAAI,KAAK;EAAkB;EAAW,KAAK;EAAc;GAAS,GAEnE,oBAACC;EAAkB;EAAkB;YAClC;GACM;EAGd;AAED,MAAM,OAAO,MACV,EACC,OACA,WACA,KACA,QACA,aACA,OACA,OACA,MACA,MACA,YACA,cACA,GAAG,WACC;CACJ,MAAM,YAAY,OAAO;CACzB,MAAM,UAAU,QAAQ,KAAK;CAE7B,MAAM,eAAe,eACZ;EACL,sBAAsB,OAAO,UAAU;EACvC,+BAA+B,UAAU,SAAS;EACnD,GACD,CAAC,WAAW,QAAQ,CACrB;AAED,QACE,oBAAC;EACC,WAAW,GAAG,UAAU,OAAO,mBAAmB,OAAO,WAAW,UAAU;EAC9E,OAAO;GACL,GAAG;GACH,YAAY,QAAQ,UAAU;GAC9B,SAAS,QAAQ;GACjB,GAAG;GACJ;EACD,GAAI;YAEJ,qBAAC;GAAI,WAAW,OAAO;;IACpB,SACE,QACC,qBAACA;KAAO,WAAW,OAAO;KAAc,OAAO;gBAC5C,QAAQ,oBAACC;MAAK,WAAW,OAAO;MAAW;OAAQ,EACnD,SAAS,oBAAC;MAAM,WAAW,OAAO;MAAY;MAAc;OAAS;MAC/D;IAEZ,SACC,oBAACC;KAAQ,OAAO;KAAU,IAAI;KAAM,WAAW,OAAO;KAAO,KAAK;KAAG;eAClE;MACO;IAEX,eACC,oBAACC;KACC,WAAW,OAAO;KAClB,UAAU,EACR,MAAM,GACP;eAEA;MACI;IAER,QACC,oBAAC;KAAI,WAAW,OAAO;eACrB,oBAACC;MAAE,MAAM;MAAM,KAAI;MAAa,QAAQ,eAAe,WAAW;gBAAW;OAEzE;MACA;;IAEJ;GACF;EAGX;AAED,KAAK,cAAc;AAEnB,0BAAe"}

package/es/awesome/Features/Features.d.mts

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

package/es/awesome/Features/style.mjs

@@ -1,7 +1,8 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/awesome/Features/style.ts
-const useStyles = createStyles(({ token, prefixCls, css: css$1, cx: cx$1 }, { rowNum, hasLink }) => {
+const prefixCls = "ant";
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	const prefix = `${prefixCls}-features`;
 	const coverCls = `${prefix}-cover`;
 	const descCls = `${prefix}-description`;
@@ -9,100 +10,150 @@ const useStyles = createStyles(({ token, prefixCls, css: css$1, cx: cx$1 }, { ro
 	const imgCls = `${prefix}-img`;
 	const scaleUnit = 20;
 	const genSize = (size) => css$1`
-      width: ${size}px;
-      height: ${size}px;
-      font-size: ${size * (22 / 24)}px;
-    `;
+    width: ${size}px;
+    height: ${size}px;
+    font-size: ${size * (22 / 24)}px;
+  `;
 	const withTransition = css$1`
-      transition: all ${token.motionDurationSlow} ${token.motionEaseInOutCirc};
-    `;
+    transition: all ${cssVar$1.motionDurationSlow} ${cssVar$1.motionEaseInOutCirc};
+  `;
 	return {
 		cell: css$1`
-        overflow: hidden;
-      `,
-		container: cx$1(withTransition, css$1`
-          position: relative;
-          z-index: 1;
-
-          overflow: hidden;
-
-          height: 228px;
-          max-height: 228px;
-          padding: 24px;
-
-          p {
-            font-size: 16px;
-            line-height: 1.2;
-            text-align: start;
-            word-break: break-word;
-          }
-
-          &:hover {
-            .${coverCls} {
-              width: 100%;
-              height: ${scaleUnit * rowNum}px;
-              padding: 0;
-              background: ${token.colorFillContent};
-            }
-
-            .${imgCls} {
-              ${genSize(100)};
-            }
-
-            .${descCls} {
-              position: absolute;
-              visibility: hidden;
-              opacity: 0;
-            }
-
-            .${titleCls} {
-              font-size: ${hasLink ? 14 : 20}px;
-            }
-          }
-        `),
-		desc: cx$1(descCls, withTransition, css$1`
-          pointer-events: none;
-          color: ${token.colorTextSecondary};
-
-          quotient {
-            position: relative;
-
-            display: block;
-
-            margin-block: 12px;
-            margin-inline: 0;
-            padding-inline-start: 12px;
-
-            color: ${token.colorTextDescription};
-          }
-        `),
-		img: cx$1(imgCls, withTransition, css$1`
-          ${genSize(20)};
-          color: ${token.colorText};
-        `),
-		imgContainer: cx$1(coverCls, withTransition, css$1`
-          ${genSize(24)};
-          padding: 4px;
-          opacity: 0.8;
-          border-radius: ${token.borderRadius}px;
-        `),
+      overflow: hidden;
+    `,
+		container: css$1`
+      ${withTransition}
+      position: relative;
+      z-index: 1;
+
+      overflow: hidden;
+
+      height: 228px;
+      max-height: 228px;
+      padding: 24px;
+
+      p {
+        font-size: 16px;
+        line-height: 1.2;
+        text-align: start;
+        word-break: break-word;
+      }
+
+      &:hover {
+        .${coverCls} {
+          width: 100%;
+          height: calc(var(--features-row-num, 7) * ${scaleUnit}px);
+          padding: 0;
+          background: ${cssVar$1.colorFillContent};
+        }
+
+        .${imgCls} {
+          ${genSize(100)};
+        }
+
+        .${descCls} {
+          position: absolute;
+          visibility: hidden;
+          opacity: 0;
+        }
+
+        .${titleCls} {
+          font-size: var(--features-title-hover-size, 20px);
+        }
+      }
+    `,
+		containerHasLink: css$1`
+      ${withTransition}
+      position: relative;
+      z-index: 1;
+
+      overflow: hidden;
+
+      height: 228px;
+      max-height: 228px;
+      padding: 24px;
+
+      p {
+        font-size: 16px;
+        line-height: 1.2;
+        text-align: start;
+        word-break: break-word;
+      }
+
+      &:hover {
+        .${coverCls} {
+          width: 100%;
+          height: calc(var(--features-row-num, 7) * ${scaleUnit}px);
+          padding: 0;
+          background: ${cssVar$1.colorFillContent};
+        }
+
+        .${imgCls} {
+          ${genSize(100)};
+        }
+
+        .${descCls} {
+          position: absolute;
+          visibility: hidden;
+          opacity: 0;
+        }
+
+        .${titleCls} {
+          font-size: 14px;
+        }
+      }
+    `,
+		desc: css$1`
+      ${descCls}
+      ${withTransition}
+      pointer-events: none;
+      color: ${cssVar$1.colorTextSecondary};
+
+      quotient {
+        position: relative;
+
+        display: block;
+
+        margin-block: 12px;
+        margin-inline: 0;
+        padding-inline-start: 12px;
+
+        color: ${cssVar$1.colorTextDescription};
+      }
+    `,
+		img: css$1`
+      ${imgCls}
+      ${withTransition}
+      ${genSize(20)};
+      color: ${cssVar$1.colorText};
+    `,
+		imgContainer: css$1`
+      ${coverCls}
+      ${withTransition}
+      ${genSize(24)};
+      padding: 4px;
+      opacity: 0.8;
+      border-radius: ${cssVar$1.borderRadius};
+    `,
 		link: css$1`
-        ${withTransition};
-        margin-block-start: 24px;
-      `,
-		title: cx$1(titleCls, withTransition, css$1`
-          pointer-events: none;
-
-          margin-block: 16px;
-          margin-inline: 0;
-
-          font-size: 20px;
-          line-height: ${token.lineHeightHeading3};
-          color: ${token.colorText};
-        `)
+      ${withTransition};
+      margin-block-start: 24px;
+    `,
+		title: css$1`
+      ${titleCls}
+      ${withTransition}
+      pointer-events: none;
+
+      margin-block: 16px;
+      margin-inline: 0;
+
+      font-size: 20px;
+      line-height: ${cssVar$1.lineHeightHeading3};
+      color: ${cssVar$1.colorText};
+    `
 	};
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../../src/awesome/Features/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(\n  ({ token, prefixCls, css, cx }, { rowNum, hasLink }: { hasLink?: boolean; rowNum: number }) => {\n    const prefix = `${prefixCls}-features`;\n    const coverCls = `${prefix}-cover`;\n    const descCls = `${prefix}-description`;\n    const titleCls = `${prefix}-title`;\n    const imgCls = `${prefix}-img`;\n\n    const scaleUnit = 20;\n\n    const genSize = (size: number) => css`\n      width: ${size}px;\n      height: ${size}px;\n      font-size: ${size * (22 / 24)}px;\n    `;\n\n    const withTransition = css`\n      transition: all ${token.motionDurationSlow} ${token.motionEaseInOutCirc};\n    `;\n\n    return {\n      cell: css`\n        overflow: hidden;\n      `,\n\n      container: cx(\n        withTransition,\n        css`\n          position: relative;\n          z-index: 1;\n\n          overflow: hidden;\n\n          height: 228px;\n          max-height: 228px;\n          padding: 24px;\n\n          p {\n            font-size: 16px;\n            line-height: 1.2;\n            text-align: start;\n            word-break: break-word;\n          }\n\n          &:hover {\n            .${coverCls} {\n              width: 100%;\n              height: ${scaleUnit * rowNum}px;\n              padding: 0;\n              background: ${token.colorFillContent};\n            }\n\n            .${imgCls} {\n              ${genSize(100)};\n            }\n\n            .${descCls} {\n              position: absolute;\n              visibility: hidden;\n              opacity: 0;\n            }\n\n            .${titleCls} {\n              font-size: ${hasLink ? 14 : 20}px;\n            }\n          }\n        `,\n      ),\n      desc: cx(\n        descCls,\n        withTransition,\n        css`\n          pointer-events: none;\n          color: ${token.colorTextSecondary};\n\n          quotient {\n            position: relative;\n\n            display: block;\n\n            margin-block: 12px;\n            margin-inline: 0;\n            padding-inline-start: 12px;\n\n            color: ${token.colorTextDescription};\n          }\n        `,\n      ),\n      img: cx(\n        imgCls,\n        withTransition,\n        css`\n          ${genSize(20)};\n          color: ${token.colorText};\n        `,\n      ),\n\n      imgContainer: cx(\n        coverCls,\n        withTransition,\n        css`\n          ${genSize(24)};\n          padding: 4px;\n          opacity: 0.8;\n          border-radius: ${token.borderRadius}px;\n        `,\n      ),\n\n      link: css`\n        ${withTransition};\n        margin-block-start: 24px;\n      `,\n\n      title: cx(\n        titleCls,\n        withTransition,\n        css`\n          pointer-events: none;\n\n          margin-block: 16px;\n          margin-inline: 0;\n\n          font-size: 20px;\n          line-height: ${token.lineHeightHeading3};\n          color: ${token.colorText};\n        `,\n      ),\n    };\n  },\n);\n"],"mappings":";;;AAEA,MAAa,YAAY,cACtB,EAAE,OAAO,WAAW,YAAK,YAAM,EAAE,QAAQ,cAAqD;CAC7F,MAAM,SAAS,GAAG,UAAU;CAC5B,MAAM,WAAW,GAAG,OAAO;CAC3B,MAAM,UAAU,GAAG,OAAO;CAC1B,MAAM,WAAW,GAAG,OAAO;CAC3B,MAAM,SAAS,GAAG,OAAO;CAEzB,MAAM,YAAY;CAElB,MAAM,WAAW,SAAiB,KAAG;eAC1B,KAAK;gBACJ,KAAK;mBACF,QAAQ,KAAK,IAAI;;CAGhC,MAAM,iBAAiB,KAAG;wBACN,MAAM,mBAAmB,GAAG,MAAM,oBAAoB;;AAG1E,QAAO;EACL,MAAM,KAAG;;;EAIT,WAAWA,KACT,gBACA,KAAG;;;;;;;;;;;;;;;;;;eAkBI,SAAS;;wBAEA,YAAY,OAAO;;4BAEf,MAAM,iBAAiB;;;eAGpC,OAAO;gBACN,QAAQ,IAAI,CAAC;;;eAGd,QAAQ;;;;;;eAMR,SAAS;2BACG,UAAU,KAAK,GAAG;;;UAItC;EACD,MAAMA,KACJ,SACA,gBACA,KAAG;;mBAEQ,MAAM,mBAAmB;;;;;;;;;;;qBAWvB,MAAM,qBAAqB;;UAGzC;EACD,KAAKA,KACH,QACA,gBACA,KAAG;YACC,QAAQ,GAAG,CAAC;mBACL,MAAM,UAAU;UAE5B;EAED,cAAcA,KACZ,UACA,gBACA,KAAG;YACC,QAAQ,GAAG,CAAC;;;2BAGG,MAAM,aAAa;UAEvC;EAED,MAAM,KAAG;UACL,eAAe;;;EAInB,OAAOA,KACL,UACA,gBACA,KAAG;;;;;;;yBAOc,MAAM,mBAAmB;mBAC/B,MAAM,UAAU;UAE5B;EACF;EAEJ"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/awesome/Features/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const prefix = `${prefixCls}-features`;\n  const coverCls = `${prefix}-cover`;\n  const descCls = `${prefix}-description`;\n  const titleCls = `${prefix}-title`;\n  const imgCls = `${prefix}-img`;\n\n  const scaleUnit = 20;\n\n  const genSize = (size: number) => css`\n    width: ${size}px;\n    height: ${size}px;\n    font-size: ${size * (22 / 24)}px;\n  `;\n\n  const withTransition = css`\n    transition: all ${cssVar.motionDurationSlow} ${cssVar.motionEaseInOutCirc};\n  `;\n\n  return {\n    cell: css`\n      overflow: hidden;\n    `,\n\n    container: css`\n      ${withTransition}\n      position: relative;\n      z-index: 1;\n\n      overflow: hidden;\n\n      height: 228px;\n      max-height: 228px;\n      padding: 24px;\n\n      p {\n        font-size: 16px;\n        line-height: 1.2;\n        text-align: start;\n        word-break: break-word;\n      }\n\n      &:hover {\n        .${coverCls} {\n          width: 100%;\n          height: calc(var(--features-row-num, 7) * ${scaleUnit}px);\n          padding: 0;\n          background: ${cssVar.colorFillContent};\n        }\n\n        .${imgCls} {\n          ${genSize(100)};\n        }\n\n        .${descCls} {\n          position: absolute;\n          visibility: hidden;\n          opacity: 0;\n        }\n\n        .${titleCls} {\n          font-size: var(--features-title-hover-size, 20px);\n        }\n      }\n    `,\n\n    containerHasLink: css`\n      ${withTransition}\n      position: relative;\n      z-index: 1;\n\n      overflow: hidden;\n\n      height: 228px;\n      max-height: 228px;\n      padding: 24px;\n\n      p {\n        font-size: 16px;\n        line-height: 1.2;\n        text-align: start;\n        word-break: break-word;\n      }\n\n      &:hover {\n        .${coverCls} {\n          width: 100%;\n          height: calc(var(--features-row-num, 7) * ${scaleUnit}px);\n          padding: 0;\n          background: ${cssVar.colorFillContent};\n        }\n\n        .${imgCls} {\n          ${genSize(100)};\n        }\n\n        .${descCls} {\n          position: absolute;\n          visibility: hidden;\n          opacity: 0;\n        }\n\n        .${titleCls} {\n          font-size: 14px;\n        }\n      }\n    `,\n    desc: css`\n      ${descCls}\n      ${withTransition}\n      pointer-events: none;\n      color: ${cssVar.colorTextSecondary};\n\n      quotient {\n        position: relative;\n\n        display: block;\n\n        margin-block: 12px;\n        margin-inline: 0;\n        padding-inline-start: 12px;\n\n        color: ${cssVar.colorTextDescription};\n      }\n    `,\n    img: css`\n      ${imgCls}\n      ${withTransition}\n      ${genSize(20)};\n      color: ${cssVar.colorText};\n    `,\n\n    imgContainer: css`\n      ${coverCls}\n      ${withTransition}\n      ${genSize(24)};\n      padding: 4px;\n      opacity: 0.8;\n      border-radius: ${cssVar.borderRadius};\n    `,\n\n    link: css`\n      ${withTransition};\n      margin-block-start: 24px;\n    `,\n\n    title: css`\n      ${titleCls}\n      ${withTransition}\n      pointer-events: none;\n\n      margin-block: 16px;\n      margin-inline: 0;\n\n      font-size: 20px;\n      line-height: ${cssVar.lineHeightHeading3};\n      color: ${cssVar.colorText};\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;CAC5D,MAAM,SAAS,GAAG,UAAU;CAC5B,MAAM,WAAW,GAAG,OAAO;CAC3B,MAAM,UAAU,GAAG,OAAO;CAC1B,MAAM,WAAW,GAAG,OAAO;CAC3B,MAAM,SAAS,GAAG,OAAO;CAEzB,MAAM,YAAY;CAElB,MAAM,WAAW,SAAiB,KAAG;aAC1B,KAAK;cACJ,KAAK;iBACF,QAAQ,KAAK,IAAI;;CAGhC,MAAM,iBAAiB,KAAG;sBACNA,SAAO,mBAAmB,GAAGA,SAAO,oBAAoB;;AAG5E,QAAO;EACL,MAAM,KAAG;;;EAIT,WAAW,KAAG;QACV,eAAe;;;;;;;;;;;;;;;;;;WAkBZ,SAAS;;sDAEkC,UAAU;;wBAExCA,SAAO,iBAAiB;;;WAGrC,OAAO;YACN,QAAQ,IAAI,CAAC;;;WAGd,QAAQ;;;;;;WAMR,SAAS;;;;;EAMhB,kBAAkB,KAAG;QACjB,eAAe;;;;;;;;;;;;;;;;;;WAkBZ,SAAS;;sDAEkC,UAAU;;wBAExCA,SAAO,iBAAiB;;;WAGrC,OAAO;YACN,QAAQ,IAAI,CAAC;;;WAGd,QAAQ;;;;;;WAMR,SAAS;;;;;EAKhB,MAAM,KAAG;QACL,QAAQ;QACR,eAAe;;eAERA,SAAO,mBAAmB;;;;;;;;;;;iBAWxBA,SAAO,qBAAqB;;;EAGzC,KAAK,KAAG;QACJ,OAAO;QACP,eAAe;QACf,QAAQ,GAAG,CAAC;eACLA,SAAO,UAAU;;EAG5B,cAAc,KAAG;QACb,SAAS;QACT,eAAe;QACf,QAAQ,GAAG,CAAC;;;uBAGGA,SAAO,aAAa;;EAGvC,MAAM,KAAG;QACL,eAAe;;;EAInB,OAAO,KAAG;QACN,SAAS;QACT,eAAe;;;;;;;qBAOFA,SAAO,mBAAmB;eAChCA,SAAO,UAAU;;EAE7B;EACD"}

package/es/awesome/Giscus/Giscus.d.mts

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

package/es/awesome/GradientButton/GradientButton.d.mts

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

package/es/awesome/GradientButton/GradientButton.mjs

@@ -1,17 +1,38 @@
 'use client';
 
 import Button_default from "../../Button/Button.mjs";
-import { useStyles } from "./style.mjs";
-import { memo } from "react";
+import { styles } from "./style.mjs";
+import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx, useThemeMode } from "antd-style";
 
 //#region src/awesome/GradientButton/GradientButton.tsx
-const GradientButton = memo(({ glow = true, children, className, size, disabled, ...rest }) => {
-	const { styles, cx } = useStyles(size);
+const GradientButton = memo(({ glow = true, children, className, size, disabled, style, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
+	const cssVariables = useMemo(() => {
+		if (!size || disabled) return {};
+		let borderRadius;
+		switch (size) {
+			case "large":
+				borderRadius = cssVar.borderRadiusLG;
+				break;
+			case "small":
+				borderRadius = cssVar.borderRadiusSM;
+				break;
+			default:
+				borderRadius = cssVar.borderRadius;
+				break;
+		}
+		return { "--gradient-button-border-radius": borderRadius };
+	}, [size, disabled]);
 	return /* @__PURE__ */ jsxs(Button_default, {
-		className: cx(!disabled && styles.button, className),
+		className: cx(!disabled && (isDarkMode ? styles.buttonDark : styles.buttonLight), className),
 		disabled,
 		size,
+		style: {
+			...cssVariables,
+			...style
+		},
 		variant: disabled ? void 0 : "text",
 		...rest,
 		children: [glow && /* @__PURE__ */ jsx("div", { className: styles.glow }), children]

package/es/awesome/GradientButton/GradientButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GradientButton.mjs","names":["Button"],"sources":["../../../src/awesome/GradientButton/GradientButton.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport Button from '@/Button';\n\nimport { useStyles } from './style';\nimport type { GradientButtonProps } from './type';\n\nconst GradientButton = memo<GradientButtonProps>(\n  ({ glow = true, children, className, size, disabled, ...rest }) => {\n    const { styles, cx } = useStyles(size);\n\n    return (\n      <Button\n        className={cx(!disabled && styles.button, className)}\n        disabled={disabled}\n        size={size}\n        variant={disabled ? undefined : 'text'}\n        {...rest}\n      >\n        {glow && <div className={styles.glow} />}\n        {children}\n      </Button>\n    );\n  },\n);\n\nGradientButton.displayName = 'GradientButton';\n\nexport default GradientButton;\n"],"mappings":";;;;;;;;AASA,MAAM,iBAAiB,MACpB,EAAE,OAAO,MAAM,UAAU,WAAW,MAAM,UAAU,GAAG,WAAW;CACjE,MAAM,EAAE,QAAQ,OAAO,UAAU,KAAK;AAEtC,QACE,qBAACA;EACC,WAAW,GAAG,CAAC,YAAY,OAAO,QAAQ,UAAU;EAC1C;EACJ;EACN,SAAS,WAAW,SAAY;EAChC,GAAI;aAEH,QAAQ,oBAAC,SAAI,WAAW,OAAO,OAAQ,EACvC;GACM;EAGd;AAED,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"GradientButton.mjs","names":["borderRadius: string","Button"],"sources":["../../../src/awesome/GradientButton/GradientButton.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx, useThemeMode } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport Button from '@/Button';\n\nimport { styles } from './style';\nimport type { GradientButtonProps } from './type';\n\nconst GradientButton = memo<GradientButtonProps>(\n  ({ glow = true, children, className, size, disabled, style, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n\n    // Convert size prop to CSS variable for borderRadius\n    const cssVariables = useMemo<Record<string, string>>(() => {\n      if (!size || disabled) return {} as Record<string, string>;\n      let borderRadius: string;\n      switch (size) {\n        case 'large': {\n          borderRadius = cssVar.borderRadiusLG;\n          break;\n        }\n        case 'small': {\n          borderRadius = cssVar.borderRadiusSM;\n          break;\n        }\n        default: {\n          borderRadius = cssVar.borderRadius;\n          break;\n        }\n      }\n      return {\n        '--gradient-button-border-radius': borderRadius,\n      };\n    }, [size, disabled]);\n\n    return (\n      <Button\n        className={cx(\n          !disabled && (isDarkMode ? styles.buttonDark : styles.buttonLight),\n          className,\n        )}\n        disabled={disabled}\n        size={size}\n        style={{\n          ...cssVariables,\n          ...style,\n        }}\n        variant={disabled ? undefined : 'text'}\n        {...rest}\n      >\n        {glow && <div className={styles.glow} />}\n        {children}\n      </Button>\n    );\n  },\n);\n\nGradientButton.displayName = 'GradientButton';\n\nexport default GradientButton;\n"],"mappings":";;;;;;;;;AAUA,MAAM,iBAAiB,MACpB,EAAE,OAAO,MAAM,UAAU,WAAW,MAAM,UAAU,OAAO,GAAG,WAAW;CACxE,MAAM,EAAE,eAAe,cAAc;CAGrC,MAAM,eAAe,cAAsC;AACzD,MAAI,CAAC,QAAQ,SAAU,QAAO,EAAE;EAChC,IAAIA;AACJ,UAAQ,MAAR;GACE,KAAK;AACH,mBAAe,OAAO;AACtB;GAEF,KAAK;AACH,mBAAe,OAAO;AACtB;GAEF;AACE,mBAAe,OAAO;AACtB;;AAGJ,SAAO,EACL,mCAAmC,cACpC;IACA,CAAC,MAAM,SAAS,CAAC;AAEpB,QACE,qBAACC;EACC,WAAW,GACT,CAAC,aAAa,aAAa,OAAO,aAAa,OAAO,cACtD,UACD;EACS;EACJ;EACN,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,SAAS,WAAW,SAAY;EAChC,GAAI;aAEH,QAAQ,oBAAC,SAAI,WAAW,OAAO,OAAQ,EACvC;GACM;EAGd;AAED,eAAe,cAAc;AAE7B,6BAAe"}

package/es/awesome/GradientButton/style.mjs

@@ -1,84 +1,114 @@
-import { createStyles } from "antd-style";
-import { rgba } from "polished";
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx } from "antd-style";
 
 //#region src/awesome/GradientButton/style.ts
-const useStyles = createStyles(({ isDarkMode, cx: cx$1, css: css$1, token, stylish }, size) => {
-	let radius;
-	switch (size) {
-		case "large":
-			radius = token.borderRadiusLG;
-			break;
-		case "middle":
-			radius = token.borderRadius;
-			break;
-		case "small":
-			radius = token.borderRadiusSM;
-			break;
-		default:
-			radius = token.borderRadius;
-			break;
-	}
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
+	const borderRadius = "var(--gradient-button-border-radius, var(--ant-border-radius))";
 	return {
-		button: css$1`
-        position: relative;
-        z-index: 1;
-        border: none;
-        border-radius: ${radius}px !important;
+		buttonDark: css$1`
+      position: relative;
+      z-index: 1;
+      border: none;
+      border-radius: ${borderRadius} !important;
 
-        &::before {
-          ${stylish.gradientAnimation}
-          content: '';
+      &::before {
+        ${staticStylish.gradientAnimation}
+        content: '';
 
-          position: absolute;
-          z-index: -2;
-          inset: 0;
+        position: absolute;
+        z-index: -2;
+        inset: 0;
 
-          border-radius: ${radius}px;
+        border-radius: ${borderRadius};
+      }
+
+      &::after {
+        content: '';
+
+        position: absolute;
+        z-index: -1;
+        inset-block-start: 1px;
+        inset-inline-start: 1px;
+
+        width: calc(100% - 2px);
+        height: calc(100% - 2px);
+        border-radius: calc(${borderRadius} - 1px);
+
+        background: ${cssVar$1.colorBgLayout};
+      }
+
+      &:hover {
+        &::after {
+          background: color-mix(in srgb, ${cssVar$1.colorBgLayout} 90%, transparent);
         }
+      }
 
+      &:active {
         &::after {
-          content: '';
+          background: color-mix(in srgb, ${cssVar$1.colorBgLayout} 85%, transparent);
+        }
+      }
+    `,
+		buttonLight: css$1`
+      position: relative;
+      z-index: 1;
+      border: none;
+      border-radius: ${borderRadius} !important;
 
-          position: absolute;
-          z-index: -1;
-          inset-block-start: 1px;
-          inset-inline-start: 1px;
+      &::before {
+        ${staticStylish.gradientAnimation}
+        content: '';
 
-          width: calc(100% - 2px);
-          height: calc(100% - 2px);
+        position: absolute;
+        z-index: -2;
+        inset: 0;
 
-          background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
-          border-radius: ${radius - 1}px;
-        }
+        border-radius: ${borderRadius};
+      }
 
-        &:hover {
-          &::after {
-            background: ${rgba(isDarkMode ? token.colorBgLayout : token.colorBgContainer, isDarkMode ? .9 : .95)};
-          }
+      &::after {
+        content: '';
+
+        position: absolute;
+        z-index: -1;
+        inset-block-start: 1px;
+        inset-inline-start: 1px;
+
+        width: calc(100% - 2px);
+        height: calc(100% - 2px);
+        border-radius: calc(${borderRadius} - 1px);
+
+        background: ${cssVar$1.colorBgContainer};
+      }
+
+      &:hover {
+        &::after {
+          background: color-mix(in srgb, ${cssVar$1.colorBgContainer} 95%, transparent);
         }
+      }
 
-        &:active {
-          &::after {
-            background: ${rgba(isDarkMode ? token.colorBgLayout : token.colorBgContainer, isDarkMode ? .85 : .9)};
-          }
+      &:active {
+        &::after {
+          background: color-mix(in srgb, ${cssVar$1.colorBgContainer} 90%, transparent);
         }
-      `,
-		glow: cx$1(stylish.gradientAnimation, css$1`
-          position: absolute;
-          z-index: -2;
-          inset-block-start: 0;
-          inset-inline-start: 0;
-
-          width: 100%;
-          height: 100%;
-
-          opacity: 0.5;
-          filter: blur(0.5em);
-          border-radius: inherit;
-        `)
+      }
+    `,
+		glow: cx(staticStylish.gradientAnimation, css$1`
+        position: absolute;
+        z-index: -2;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+
+        opacity: 0.5;
+        filter: blur(0.5em);
+      `)
 	};
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["radius: number","cx"],"sources":["../../../src/awesome/GradientButton/style.ts"],"sourcesContent":["import type { ButtonProps } from 'antd';\nimport { createStyles } from 'antd-style';\nimport { rgba } from 'polished';\n\nexport const useStyles = createStyles(\n  ({ isDarkMode, cx, css, token, stylish }, size: ButtonProps['size']) => {\n    let radius: number;\n    switch (size) {\n      case 'large': {\n        radius = token.borderRadiusLG;\n        break;\n      }\n      case 'middle': {\n        radius = token.borderRadius;\n        break;\n      }\n      case 'small': {\n        radius = token.borderRadiusSM;\n        break;\n      }\n      default: {\n        radius = token.borderRadius;\n        break;\n      }\n    }\n\n    return {\n      button: css`\n        position: relative;\n        z-index: 1;\n        border: none;\n        border-radius: ${radius}px !important;\n\n        &::before {\n          ${stylish.gradientAnimation}\n          content: '';\n\n          position: absolute;\n          z-index: -2;\n          inset: 0;\n\n          border-radius: ${radius}px;\n        }\n\n        &::after {\n          content: '';\n\n          position: absolute;\n          z-index: -1;\n          inset-block-start: 1px;\n          inset-inline-start: 1px;\n\n          width: calc(100% - 2px);\n          height: calc(100% - 2px);\n\n          background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};\n          border-radius: ${radius - 1}px;\n        }\n\n        &:hover {\n          &::after {\n            background: ${rgba(\n              isDarkMode ? token.colorBgLayout : token.colorBgContainer,\n              isDarkMode ? 0.9 : 0.95,\n            )};\n          }\n        }\n\n        &:active {\n          &::after {\n            background: ${rgba(\n              isDarkMode ? token.colorBgLayout : token.colorBgContainer,\n              isDarkMode ? 0.85 : 0.9,\n            )};\n          }\n        }\n      `,\n      glow: cx(\n        stylish.gradientAnimation,\n        css`\n          position: absolute;\n          z-index: -2;\n          inset-block-start: 0;\n          inset-inline-start: 0;\n\n          width: 100%;\n          height: 100%;\n\n          opacity: 0.5;\n          filter: blur(0.5em);\n          border-radius: inherit;\n        `,\n      ),\n    };\n  },\n);\n"],"mappings":";;;;AAIA,MAAa,YAAY,cACtB,EAAE,YAAY,UAAI,YAAK,OAAO,WAAW,SAA8B;CACtE,IAAIA;AACJ,SAAQ,MAAR;EACE,KAAK;AACH,YAAS,MAAM;AACf;EAEF,KAAK;AACH,YAAS,MAAM;AACf;EAEF,KAAK;AACH,YAAS,MAAM;AACf;EAEF;AACE,YAAS,MAAM;AACf;;AAIJ,QAAO;EACL,QAAQ,KAAG;;;;yBAIQ,OAAO;;;YAGpB,QAAQ,kBAAkB;;;;;;;2BAOX,OAAO;;;;;;;;;;;;;;wBAcV,aAAa,MAAM,gBAAgB,MAAM,iBAAiB;2BACvD,SAAS,EAAE;;;;;0BAKZ,KACZ,aAAa,MAAM,gBAAgB,MAAM,kBACzC,aAAa,KAAM,IACpB,CAAC;;;;;;0BAMY,KACZ,aAAa,MAAM,gBAAgB,MAAM,kBACzC,aAAa,MAAO,GACrB,CAAC;;;;EAIR,MAAMC,KACJ,QAAQ,mBACR,KAAG;;;;;;;;;;;;UAaJ;EACF;EAEJ"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../../src/awesome/GradientButton/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const borderRadius = 'var(--gradient-button-border-radius, var(--ant-border-radius))';\n\n  return {\n    buttonDark: css`\n      position: relative;\n      z-index: 1;\n      border: none;\n      border-radius: ${borderRadius} !important;\n\n      &::before {\n        ${lobeStaticStylish.gradientAnimation}\n        content: '';\n\n        position: absolute;\n        z-index: -2;\n        inset: 0;\n\n        border-radius: ${borderRadius};\n      }\n\n      &::after {\n        content: '';\n\n        position: absolute;\n        z-index: -1;\n        inset-block-start: 1px;\n        inset-inline-start: 1px;\n\n        width: calc(100% - 2px);\n        height: calc(100% - 2px);\n        border-radius: calc(${borderRadius} - 1px);\n\n        background: ${cssVar.colorBgLayout};\n      }\n\n      &:hover {\n        &::after {\n          background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);\n        }\n      }\n\n      &:active {\n        &::after {\n          background: color-mix(in srgb, ${cssVar.colorBgLayout} 85%, transparent);\n        }\n      }\n    `,\n    buttonLight: css`\n      position: relative;\n      z-index: 1;\n      border: none;\n      border-radius: ${borderRadius} !important;\n\n      &::before {\n        ${lobeStaticStylish.gradientAnimation}\n        content: '';\n\n        position: absolute;\n        z-index: -2;\n        inset: 0;\n\n        border-radius: ${borderRadius};\n      }\n\n      &::after {\n        content: '';\n\n        position: absolute;\n        z-index: -1;\n        inset-block-start: 1px;\n        inset-inline-start: 1px;\n\n        width: calc(100% - 2px);\n        height: calc(100% - 2px);\n        border-radius: calc(${borderRadius} - 1px);\n\n        background: ${cssVar.colorBgContainer};\n      }\n\n      &:hover {\n        &::after {\n          background: color-mix(in srgb, ${cssVar.colorBgContainer} 95%, transparent);\n        }\n      }\n\n      &:active {\n        &::after {\n          background: color-mix(in srgb, ${cssVar.colorBgContainer} 90%, transparent);\n        }\n      }\n    `,\n    glow: cx(\n      lobeStaticStylish.gradientAnimation,\n      css`\n        position: absolute;\n        z-index: -2;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n\n        opacity: 0.5;\n        filter: blur(0.5em);\n      `,\n    ),\n  };\n});\n"],"mappings":";;;;AAIA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;CAC5D,MAAM,eAAe;AAErB,QAAO;EACL,YAAY,KAAG;;;;uBAII,aAAa;;;UAG1BA,cAAkB,kBAAkB;;;;;;;yBAOrB,aAAa;;;;;;;;;;;;;8BAaR,aAAa;;sBAErBC,SAAO,cAAc;;;;;2CAKAA,SAAO,cAAc;;;;;;2CAMrBA,SAAO,cAAc;;;;EAI5D,aAAa,KAAG;;;;uBAIG,aAAa;;;UAG1BD,cAAkB,kBAAkB;;;;;;;yBAOrB,aAAa;;;;;;;;;;;;;8BAaR,aAAa;;sBAErBC,SAAO,iBAAiB;;;;;2CAKHA,SAAO,iBAAiB;;;;;;2CAMxBA,SAAO,iBAAiB;;;;EAI/D,MAAM,GACJD,cAAkB,mBAClB,KAAG;;;;;;;;;;;;QAaJ;EACF;EACD"}