@lobehub/ui 5.64.2 → 6.0.0-beta.10

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

@@ -1 +1 @@
-{"version":3,"file":"GradientButton.mjs","names":[],"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 '@/base-ui/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        disabled={disabled}\n        size={size}\n        type={disabled ? undefined : 'text'}\n        className={cx(\n          !disabled && (isDarkMode ? styles.buttonDark : styles.buttonLight),\n          className,\n        )}\n        style={{\n          ...cssVariables,\n          ...style,\n        }}\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,aAAa;CAGpC,MAAM,eAAe,cAAsC;EACzD,IAAI,CAAC,QAAQ,UAAU,OAAO,CAAC;EAC/B,IAAI;EACJ,QAAQ,MAAR;GACE,KAAK;IACH,eAAe,OAAO;IACtB;GAEF,KAAK;IACH,eAAe,OAAO;IACtB;GAEF,SACE,eAAe,OAAO;EAG1B;EACA,OAAO,EACL,mCAAmC,aACrC;CACF,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OACE,qBAAC,QAAD;EACY;EACJ;EACN,MAAM,WAAW,KAAA,IAAY;EAC7B,WAAW,GACT,CAAC,aAAa,aAAa,OAAO,aAAa,OAAO,cACtD,SACF;EACA,OAAO;GACL,GAAG;GACH,GAAG;EACL;EACA,GAAI;EAZN,UAAA,CAcG,QAAQ,oBAAC,OAAD,EAAK,WAAW,OAAO,KAAO,CAAA,GACtC,QACK;;AAEZ,CACF;AAEA,eAAe,cAAc"}
+{"version":3,"file":"GradientButton.mjs","names":[],"sources":["../../../src/awesome/GradientButton/GradientButton.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, useMemo } from 'react';\n\nimport { ButtonImpl } from '@/Button/Button';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { useThemeMode } from '@/styles/theme/scope';\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      <ButtonImpl\n        className={className}\n        disabled={disabled}\n        size={size}\n        type={disabled ? undefined : 'text'}\n        xstyle={!disabled && [styles.button, isDarkMode ? styles.buttonDark : styles.buttonLight]}\n        style={{\n          ...cssVariables,\n          ...style,\n        }}\n        {...rest}\n      >\n        {glow && <div {...stylex.props(styles.glow)} />}\n        {children}\n      </ButtonImpl>\n    );\n  },\n);\n\nGradientButton.displayName = 'GradientButton';\n\nexport default GradientButton;\n"],"mappings":";;;;;;;;;AASA,MAAM,iBAAiB,MAA2B,EAChD,OAAO,MACP,UACA,WACA,MACA,UACA,OACA,GAAG,WACC;CACJ,MAAM,EACJ,eACE,aAAa;CAGjB,MAAM,eAAe,cAAsC;EACzD,IAAI,CAAC,QAAQ,UAAU,OAAO,CAAC;EAC/B,IAAI;EACJ,QAAQ,MAAR;GACE,KAAK;IAED,eAAe,OAAO;IACtB;GAEJ,KAAK;IAED,eAAe,OAAO;IACtB;GAEJ,SAEI,eAAe,OAAO;EAG5B;EACA,OAAO,EACL,mCAAmC,aACrC;CACF,GAAG,CAAC,MAAM,QAAQ,CAAC;CACnB,OAAO,qBAAC,YAAD;EAAuB;EAAqB;EAAgB;EAAM,MAAM,WAAW,KAAA,IAAY;EAAQ,QAAQ,CAAC,YAAY,CAAC,OAAO,QAAQ,aAAa,OAAO,aAAa,OAAO,WAAW;EAAG,OAAO;GAC9M,GAAG;GACH,GAAG;EACL;EAAG,GAAI;EAHA,UAAA,CAIA,QAAQ,oBAAC,OAAD,EAAK,GAAI,OAAO,MAAM,OAAO,IAAI,EAAI,CAAA,GAC7C,QACS;;AAClB,CAAC;AACD,eAAe,cAAc"}

package/es/awesome/GradientButton/style.mjs

@@ -1,112 +1,64 @@
-import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
-import { createStaticStyles, cx } from "antd-style";
+import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
 //#region src/awesome/GradientButton/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => {
-	const borderRadius = "var(--gradient-button-border-radius, var(--ant-border-radius))";
-	return {
-		buttonDark: css`
-      position: relative;
-      z-index: 1;
-      border: none;
-      border-radius: ${borderRadius} !important;
-
-      &::before {
-        ${staticStylish.gradientAnimation}
-        content: '';
-
-        position: absolute;
-        z-index: -2;
-        inset: 0;
-
-        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.colorBgLayout};
-      }
-
-      &:hover {
-        &::after {
-          background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);
-        }
-      }
-
-      &:active {
-        &::after {
-          background: color-mix(in srgb, ${cssVar.colorBgLayout} 85%, transparent);
-        }
-      }
-    `,
-		buttonLight: css`
-      position: relative;
-      z-index: 1;
-      border: none;
-      border-radius: ${borderRadius} !important;
-
-      &::before {
-        ${staticStylish.gradientAnimation}
-        content: '';
-
-        position: absolute;
-        z-index: -2;
-        inset: 0;
-
-        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.colorBgContainer};
-      }
-
-      &:hover {
-        &::after {
-          background: color-mix(in srgb, ${cssVar.colorBgContainer} 95%, transparent);
-        }
-      }
-
-      &:active {
-        &::after {
-          background: color-mix(in srgb, ${cssVar.colorBgContainer} 90%, transparent);
-        }
-      }
-    `,
-		glow: cx(staticStylish.gradientAnimation, css`
-        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);
-      `)
-	};
-});
+`${cssVar.gold}${cssVar.magenta}${cssVar.geekblue}${cssVar.cyan}`;
+const styles = {
+	button: {
+		kVAM5u: "lb181nr7w",
+		kaIpWk: "lb8itt2c",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbfn42iu",
+		kVAEAm: "lb1n2onr6",
+		kY2c9j: "lb1vjfegm",
+		kUfP38: "lb12x7qc6",
+		k5JduY: "lb100rkj9",
+		k3foIR: "lb1n3af7d",
+		kc1e00: "lb1scoo6m",
+		kwXMNM: "lb1j6awrg",
+		kDVEDD: "lbi4xitw",
+		k4zj60: "lb19httdr",
+		kkgrvl: "lb1ix9i1y",
+		kFcpXp: "lbxx281p",
+		kPB484: "lb188t37e",
+		kS191i: "lb1gvgb2w",
+		kQZAMR: "lb1eozw7i",
+		kLmWZc: "lbzuot31",
+		k7EzDT: "lb1t5bk73",
+		kZiNAr: "lbqfgnys",
+		k3DiCg: "lb7ji8rf",
+		k836YN: "lb1w2b1bf",
+		kgeoSG: "lb10tli2e",
+		kEoFBp: "lb1hmns74",
+		kxmVGU: "lbchklzq",
+		$$css: true
+	},
+	buttonDark: {
+		ks3ayO: "lb187o56u lb1akn0p5 lb10obk4h",
+		$$css: true
+	},
+	buttonLight: {
+		ks3ayO: "lb1jurmlm lb1nqxrk8 lb1rtc2l9",
+		$$css: true
+	},
+	glow: {
+		kaIpWk: "lb1pjcqnp",
+		kKxzle: "lb1u8cyq",
+		k44tkh: "lbz5h9r3",
+		ko0y90: "lba4qsjk",
+		kKVMdj: "lb1xfnrba",
+		kyAemX: "lb1debuo4",
+		kKwaWg: "lbqureyv",
+		kgSjnq: "lb1g6ikvs",
+		ku685b: "lb12xnt1u",
+		k87sOh: "lb13vifvy",
+		kLqNvP: "lb1o0tod",
+		kSiTet: "lbbyyjgo",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1fdshc9",
+		kZKoxP: "lb5yr21d",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"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,KAAK,aAAa;CAC5D,MAAM,eAAe;CAErB,OAAO;EACL,YAAY,GAAG;;;;uBAII,aAAa;;;UAG1BA,cAAkB,kBAAkB;;;;;;;yBAOrB,aAAa;;;;;;;;;;;;;8BAaR,aAAa;;sBAErB,OAAO,cAAc;;;;;2CAKA,OAAO,cAAc;;;;;;2CAMrB,OAAO,cAAc;;;;EAI5D,aAAa,GAAG;;;;uBAIG,aAAa;;;UAG1BA,cAAkB,kBAAkB;;;;;;;yBAOrB,aAAa;;;;;;;;;;;;;8BAaR,aAAa;;sBAErB,OAAO,iBAAiB;;;;;2CAKH,OAAO,iBAAiB;;;;;;2CAMxB,OAAO,iBAAiB;;;;EAI/D,MAAM,GACJA,cAAkB,mBAClB,GAAG;;;;;;;;;;;;OAaL;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/GradientButton/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst gradient = stylex.keyframes({\n  '0%': { backgroundPosition: '0% 50%' },\n  '50%': { backgroundPosition: '100% 50%' },\n  '100%': { backgroundPosition: '0% 50%' },\n});\n\nconst borderRadius = 'var(--gradient-button-border-radius, var(--lobe-border-radius))';\nconst gradientImage = `linear-gradient(-45deg, ${cssVar.gold}, ${cssVar.magenta}, ${cssVar.geekblue}, ${cssVar.cyan})`;\nconst hover = ':hover:not(:active)';\n\nexport const styles = stylex.create({\n  button: {\n    'borderColor': 'currentcolor',\n    'borderRadius': borderRadius,\n    'borderStyle': 'none',\n    'borderWidth': 'medium',\n    'position': 'relative',\n    'zIndex': 1,\n    '::after': {\n      borderRadius: `calc(${borderRadius} - 1px)`,\n      content: \"''\",\n      insetBlockStart: 1,\n      insetInlineStart: 1,\n      position: 'absolute',\n      zIndex: -1,\n      height: 'calc(100% - 2px)',\n      width: 'calc(100% - 2px)',\n    },\n    '::before': {\n      inset: 0,\n      borderRadius,\n      animationDelay: '5s',\n      animationDuration: '5s',\n      animationIterationCount: 'infinite',\n      animationName: gradient,\n      animationTimingFunction: 'ease',\n      backgroundImage: gradientImage,\n      backgroundSize: '400% 400%',\n      content: \"''\",\n      position: 'absolute',\n      zIndex: -2,\n    },\n  },\n  buttonDark: {\n    '::after': {\n      backgroundColor: {\n        'default': cssVar.colorBgLayout,\n        [hover]: `color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent)`,\n        ':active': `color-mix(in srgb, ${cssVar.colorBgLayout} 85%, transparent)`,\n      },\n    },\n  },\n  buttonLight: {\n    '::after': {\n      backgroundColor: {\n        'default': cssVar.colorBgContainer,\n        [hover]: `color-mix(in srgb, ${cssVar.colorBgContainer} 95%, transparent)`,\n        ':active': `color-mix(in srgb, ${cssVar.colorBgContainer} 90%, transparent)`,\n      },\n    },\n  },\n  glow: {\n    borderRadius: 'inherit',\n    animationDelay: '5s',\n    animationDuration: '5s',\n    animationIterationCount: 'infinite',\n    animationName: gradient,\n    animationTimingFunction: 'ease',\n    backgroundImage: gradientImage,\n    backgroundSize: '400% 400%',\n    filter: 'blur(0.5em)',\n    insetBlockStart: 0,\n    insetInlineStart: 0,\n    opacity: 0.5,\n    position: 'absolute',\n    zIndex: -2,\n    height: '100%',\n    width: '100%',\n  },\n});\n"],"mappings":";;AAKsB,GAA2B,OAAO,OAAS,OAAO,UAAY,OAAO,WAAa,OAAO;AAE/G,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -1,9 +1,8 @@
-import { ButtonProps } from "../../base-ui/Button/type.mjs";
-import "../../base-ui/Button/index.mjs";
+import { ButtonProps } from "../../Button/type.mjs";
+import "../../Button/index.mjs";
 //#region src/awesome/GradientButton/type.d.ts
-interface GradientButtonProps extends ButtonProps {
+export interface GradientButtonProps extends ButtonProps {
   glow?: boolean;
 }
 //#endregion
-export { GradientButtonProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/Grainient/Grainient.mjs

@@ -1,8 +1,10 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { useThemeMode } from "../../styles/theme/scope.mjs";
 import { styles } from "./style.mjs";
 import { memo, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cx, useThemeMode } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/Grainient/Grainient.tsx
 const VERTEX_SHADER = `#version 300 es
 in vec2 position;
@@ -132,7 +134,7 @@ const compile = (gl, type, source) => {
 * pauses when off-screen or the tab is hidden, and draws one still frame when reduced motion is
 * preferred. Without WebGL2 it renders nothing, so give the parent a fallback background.
 */
-const Grainient = memo(({ timeSpeed = .25, colorBalance = 0, warpStrength = 1, warpFrequency = 5, warpSpeed = 2, warpAmplitude = 50, blendAngle = 0, blendSoftness = .05, rotationAmount = 500, noiseScale = 2, grainAmount = .1, grainScale = 2, contrast = 1.5, gamma = 1, saturation = 1, zoom = .9, centerX = 0, centerY = 0, color1 = "#FF9FFC", color2 = "#5227FF", color3 = "#B497CF", grainAnimated = false, lightMode = false, className, ...rest }) => {
+const Grainient = memo(({ timeSpeed = .25, colorBalance = 0, warpStrength = 1, warpFrequency = 5, warpSpeed = 2, warpAmplitude = 50, blendAngle = 0, blendSoftness = .05, rotationAmount = 500, noiseScale = 2, grainAmount = .1, grainScale = 2, contrast = 1.5, gamma = 1, saturation = 1, zoom = .9, centerX = 0, centerY = 0, color1 = "#FF9FFC", color2 = "#5227FF", color3 = "#B497CF", grainAnimated = false, lightMode = false, className, style, ...rest }) => {
 	const containerRef = useRef(null);
 	const drawRef = useRef(null);
 	const uniformsRef = useRef(null);
@@ -142,6 +144,7 @@ const Grainient = memo(({ timeSpeed = .25, colorBalance = 0, warpStrength = 1, w
 		const container = containerRef.current;
 		if (!container) return;
 		const canvas = document.createElement("canvas");
+		canvas.className = stylex.props(styles.canvas).className ?? "";
 		const gl = canvas.getContext("webgl2", {
 			alpha: true,
 			antialias: false
@@ -299,9 +302,9 @@ const Grainient = memo(({ timeSpeed = .25, colorBalance = 0, warpStrength = 1, w
 	]);
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": true,
-		className: cx(styles.root, className),
 		ref: containerRef,
-		...rest
+		...rest,
+		...styleProps(styles.root, className, style)
 	});
 });
 Grainient.displayName = "Grainient";

package/es/awesome/Grainient/Grainient.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Grainient.mjs","names":[],"sources":["../../../src/awesome/Grainient/Grainient.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo, useEffect, useRef } from 'react';\n\nimport { styles } from './style';\nimport type { GrainientProps } from './type';\n\nconst VERTEX_SHADER = `#version 300 es\nin vec2 position;\nvoid main() {\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n`;\n\nconst FRAGMENT_SHADER = `#version 300 es\nprecision highp float;\nuniform vec2 iResolution;\nuniform float iTime;\nuniform float uTimeSpeed;\nuniform float uColorBalance;\nuniform float uWarpStrength;\nuniform float uWarpFrequency;\nuniform float uWarpSpeed;\nuniform float uWarpAmplitude;\nuniform float uBlendAngle;\nuniform float uBlendSoftness;\nuniform float uRotationAmount;\nuniform float uNoiseScale;\nuniform float uGrainAmount;\nuniform float uGrainScale;\nuniform float uGrainAnimated;\nuniform float uContrast;\nuniform float uGamma;\nuniform float uSaturation;\nuniform vec2 uCenterOffset;\nuniform float uZoom;\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform vec3 uColor3;\nuniform float uLightMode;\nout vec4 fragColor;\n#define S(a,b,t) smoothstep(a,b,t)\nmat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}\nvec2 hash(vec2 p){p=vec2(dot(p,vec2(2127.1,81.17)),dot(p,vec2(1269.5,283.37)));return fract(sin(p)*43758.5453);}\nfloat noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);float n=mix(mix(dot(-1.0+2.0*hash(i+vec2(0.0,0.0)),f-vec2(0.0,0.0)),dot(-1.0+2.0*hash(i+vec2(1.0,0.0)),f-vec2(1.0,0.0)),u.x),mix(dot(-1.0+2.0*hash(i+vec2(0.0,1.0)),f-vec2(0.0,1.0)),dot(-1.0+2.0*hash(i+vec2(1.0,1.0)),f-vec2(1.0,1.0)),u.x),u.y);return 0.5+0.5*n;}\nvoid mainImage(out vec4 o, vec2 C){\n  float t=iTime*uTimeSpeed;\n  vec2 uv=C/iResolution.xy;\n  float ratio=iResolution.x/iResolution.y;\n  vec2 tuv=uv-0.5+uCenterOffset;\n  tuv/=max(uZoom,0.001);\n\n  float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);\n  tuv.y*=1.0/ratio;\n  tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));\n  tuv.y*=ratio;\n\n  float frequency=uWarpFrequency;\n  float ws=max(uWarpStrength,0.001);\n  float amplitude=uWarpAmplitude/ws;\n  float warpTime=t*uWarpSpeed;\n  tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;\n  tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);\n\n  vec3 colLav=uColor1;\n  vec3 colOrg=uColor2;\n  vec3 colDark=uColor3;\n  float b=uColorBalance;\n  float s=max(uBlendSoftness,0.0);\n  mat2 blendRot=Rot(radians(uBlendAngle));\n  float blendX=(tuv*blendRot).x;\n  float edge0=-0.3-b-s;\n  float edge1=0.2-b+s;\n  float v0=0.5-b+s;\n  float v1=-0.3-b-s;\n  vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));\n  vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));\n  vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));\n\n  vec2 grainUv=uv*max(uGrainScale,0.001);\n  if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);}\n  float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);\n  col+=(grain-0.5)*uGrainAmount;\n\n  col=(col-0.5)*uContrast+0.5;\n  float luma=dot(col,vec3(0.2126,0.7152,0.0722));\n  col=mix(vec3(luma),col,uSaturation);\n  col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));\n  col=clamp(col,0.0,1.0);\n  if(uLightMode>0.5){\n    float energy=max(max(col.r,col.g),col.b);\n    vec3 hue=col/max(energy,0.001);\n    float chroma=length(col-vec3(dot(col,vec3(0.333333))));\n    float coverage=clamp(0.12+chroma*1.15+energy*0.18,0.0,0.88);\n    col=mix(vec3(1.0),clamp(hue*0.58+col*0.18,0.0,1.0),coverage);\n  }\n\n  o=vec4(col,1.0);\n}\nvoid main(){\n  vec4 o=vec4(0.0);\n  mainImage(o,gl_FragCoord.xy);\n  fragColor=o;\n}\n`;\n\nexport const hexToRgb = (hex: string): [number, number, number] => {\n  let value = hex.trim().replace('#', '');\n  if (value.length === 3) value = [...value].map((c) => c + c).join('');\n  const result = /^([\\da-f]{2})([\\da-f]{2})([\\da-f]{2})$/i.exec(value);\n  if (!result) return [1, 1, 1];\n  return [\n    Number.parseInt(result[1], 16) / 255,\n    Number.parseInt(result[2], 16) / 255,\n    Number.parseInt(result[3], 16) / 255,\n  ];\n};\n\nconst compile = (gl: WebGL2RenderingContext, type: number, source: string) => {\n  const shader = gl.createShader(type);\n  if (!shader) return null;\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    gl.deleteShader(shader);\n    return null;\n  }\n  return shader;\n};\n\n/**\n * Animated grainy gradient (WebGL2, no extra dependency). Fills its nearest positioned ancestor,\n * pauses when off-screen or the tab is hidden, and draws one still frame when reduced motion is\n * preferred. Without WebGL2 it renders nothing, so give the parent a fallback background.\n */\nconst Grainient = memo<GrainientProps>(\n  ({\n    timeSpeed = 0.25,\n    colorBalance = 0,\n    warpStrength = 1,\n    warpFrequency = 5,\n    warpSpeed = 2,\n    warpAmplitude = 50,\n    blendAngle = 0,\n    blendSoftness = 0.05,\n    rotationAmount = 500,\n    noiseScale = 2,\n    grainAmount = 0.1,\n    grainScale = 2,\n    contrast = 1.5,\n    gamma = 1,\n    saturation = 1,\n    zoom = 0.9,\n    centerX = 0,\n    centerY = 0,\n    color1 = '#FF9FFC',\n    color2 = '#5227FF',\n    color3 = '#B497CF',\n    grainAnimated = false,\n    lightMode = false,\n    className,\n    ...rest\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const drawRef = useRef<(() => void) | null>(null);\n    const uniformsRef = useRef<(() => void) | null>(null);\n    const { isDarkMode } = useThemeMode();\n    const light = lightMode === 'auto' ? !isDarkMode : lightMode;\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const canvas = document.createElement('canvas');\n      const gl = canvas.getContext('webgl2', { alpha: true, antialias: false });\n      if (!gl) return;\n      container.append(canvas);\n\n      const vs = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);\n      const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);\n      const program = gl.createProgram();\n      if (!vs || !fs || !program) {\n        canvas.remove();\n        return;\n      }\n      gl.attachShader(program, vs);\n      gl.attachShader(program, fs);\n      gl.linkProgram(program);\n      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n        canvas.remove();\n        return;\n      }\n      gl.useProgram(program);\n\n      // One triangle that covers the viewport.\n      const buffer = gl.createBuffer();\n      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);\n      const position = gl.getAttribLocation(program, 'position');\n      gl.enableVertexAttribArray(position);\n      gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);\n\n      const loc = (name: string) => gl.getUniformLocation(program, name);\n      const uTime = loc('iTime');\n      const uRes = loc('iResolution');\n      const started = performance.now();\n\n      const draw = () => {\n        gl.uniform1f(uTime, (performance.now() - started) * 0.001);\n        gl.drawArrays(gl.TRIANGLES, 0, 3);\n      };\n      drawRef.current = draw;\n      uniformsRef.current?.();\n\n      const setSize = () => {\n        const rect = container.getBoundingClientRect();\n        const dpr = Math.min(window.devicePixelRatio || 1, 2);\n        canvas.width = Math.max(1, Math.floor(rect.width * dpr));\n        canvas.height = Math.max(1, Math.floor(rect.height * dpr));\n        gl.viewport(0, 0, canvas.width, canvas.height);\n        gl.uniform2f(uRes, canvas.width, canvas.height);\n        draw();\n      };\n\n      const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)');\n      let raf = 0;\n      let inView = true;\n\n      const loop = () => {\n        draw();\n        raf = requestAnimationFrame(loop);\n      };\n      const stop = () => {\n        if (raf) cancelAnimationFrame(raf);\n        raf = 0;\n      };\n      const sync = () => {\n        const run = inView && !document.hidden && !reducedMotion?.matches;\n        if (run && !raf) raf = requestAnimationFrame(loop);\n        if (!run) {\n          stop();\n          draw();\n        }\n      };\n\n      const resizeObserver = new ResizeObserver(setSize);\n      resizeObserver.observe(container);\n      const intersectionObserver = new IntersectionObserver(([entry]) => {\n        inView = entry.isIntersecting;\n        sync();\n      });\n      intersectionObserver.observe(container);\n      document.addEventListener('visibilitychange', sync);\n      reducedMotion?.addEventListener('change', sync);\n      setSize();\n      sync();\n\n      return () => {\n        stop();\n        resizeObserver.disconnect();\n        intersectionObserver.disconnect();\n        document.removeEventListener('visibilitychange', sync);\n        reducedMotion?.removeEventListener('change', sync);\n        drawRef.current = null;\n        gl.deleteBuffer(buffer);\n        gl.deleteProgram(program);\n        gl.deleteShader(vs);\n        gl.deleteShader(fs);\n        canvas.remove();\n      };\n    }, []);\n\n    useEffect(() => {\n      const apply = () => {\n        const canvas = containerRef.current?.querySelector('canvas');\n        const gl = canvas?.getContext('webgl2');\n        if (!gl) return;\n        const program = gl.getParameter(gl.CURRENT_PROGRAM) as WebGLProgram | null;\n        if (!program) return;\n        const loc = (name: string) => gl.getUniformLocation(program, name);\n        gl.uniform1f(loc('uTimeSpeed'), timeSpeed);\n        gl.uniform1f(loc('uColorBalance'), colorBalance);\n        gl.uniform1f(loc('uWarpStrength'), warpStrength);\n        gl.uniform1f(loc('uWarpFrequency'), warpFrequency);\n        gl.uniform1f(loc('uWarpSpeed'), warpSpeed);\n        gl.uniform1f(loc('uWarpAmplitude'), warpAmplitude);\n        gl.uniform1f(loc('uBlendAngle'), blendAngle);\n        gl.uniform1f(loc('uBlendSoftness'), blendSoftness);\n        gl.uniform1f(loc('uRotationAmount'), rotationAmount);\n        gl.uniform1f(loc('uNoiseScale'), noiseScale);\n        gl.uniform1f(loc('uGrainAmount'), grainAmount);\n        gl.uniform1f(loc('uGrainScale'), grainScale);\n        gl.uniform1f(loc('uContrast'), contrast);\n        gl.uniform1f(loc('uGamma'), gamma);\n        gl.uniform1f(loc('uSaturation'), saturation);\n        gl.uniform1f(loc('uZoom'), zoom);\n        gl.uniform1f(loc('uGrainAnimated'), grainAnimated ? 1 : 0);\n        gl.uniform1f(loc('uLightMode'), light ? 1 : 0);\n        gl.uniform2f(loc('uCenterOffset'), centerX, centerY);\n        gl.uniform3f(loc('uColor1'), ...hexToRgb(color1));\n        gl.uniform3f(loc('uColor2'), ...hexToRgb(color2));\n        gl.uniform3f(loc('uColor3'), ...hexToRgb(color3));\n        drawRef.current?.();\n      };\n      uniformsRef.current = apply;\n      apply();\n    }, [\n      timeSpeed,\n      colorBalance,\n      warpStrength,\n      warpFrequency,\n      warpSpeed,\n      warpAmplitude,\n      blendAngle,\n      blendSoftness,\n      rotationAmount,\n      noiseScale,\n      grainAmount,\n      grainScale,\n      contrast,\n      gamma,\n      saturation,\n      zoom,\n      centerX,\n      centerY,\n      color1,\n      color2,\n      color3,\n      grainAnimated,\n      light,\n    ]);\n\n    return <div aria-hidden className={cx(styles.root, className)} ref={containerRef} {...rest} />;\n  },\n);\n\nGrainient.displayName = 'Grainient';\n\nexport default Grainient;\n"],"mappings":"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"}
+{"version":3,"file":"Grainient.mjs","names":[],"sources":["../../../src/awesome/Grainient/Grainient.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, useEffect, useRef } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { styles } from './style';\nimport type { GrainientProps } from './type';\n\nconst VERTEX_SHADER = `#version 300 es\nin vec2 position;\nvoid main() {\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n`;\n\nconst FRAGMENT_SHADER = `#version 300 es\nprecision highp float;\nuniform vec2 iResolution;\nuniform float iTime;\nuniform float uTimeSpeed;\nuniform float uColorBalance;\nuniform float uWarpStrength;\nuniform float uWarpFrequency;\nuniform float uWarpSpeed;\nuniform float uWarpAmplitude;\nuniform float uBlendAngle;\nuniform float uBlendSoftness;\nuniform float uRotationAmount;\nuniform float uNoiseScale;\nuniform float uGrainAmount;\nuniform float uGrainScale;\nuniform float uGrainAnimated;\nuniform float uContrast;\nuniform float uGamma;\nuniform float uSaturation;\nuniform vec2 uCenterOffset;\nuniform float uZoom;\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform vec3 uColor3;\nuniform float uLightMode;\nout vec4 fragColor;\n#define S(a,b,t) smoothstep(a,b,t)\nmat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}\nvec2 hash(vec2 p){p=vec2(dot(p,vec2(2127.1,81.17)),dot(p,vec2(1269.5,283.37)));return fract(sin(p)*43758.5453);}\nfloat noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);float n=mix(mix(dot(-1.0+2.0*hash(i+vec2(0.0,0.0)),f-vec2(0.0,0.0)),dot(-1.0+2.0*hash(i+vec2(1.0,0.0)),f-vec2(1.0,0.0)),u.x),mix(dot(-1.0+2.0*hash(i+vec2(0.0,1.0)),f-vec2(0.0,1.0)),dot(-1.0+2.0*hash(i+vec2(1.0,1.0)),f-vec2(1.0,1.0)),u.x),u.y);return 0.5+0.5*n;}\nvoid mainImage(out vec4 o, vec2 C){\n  float t=iTime*uTimeSpeed;\n  vec2 uv=C/iResolution.xy;\n  float ratio=iResolution.x/iResolution.y;\n  vec2 tuv=uv-0.5+uCenterOffset;\n  tuv/=max(uZoom,0.001);\n\n  float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);\n  tuv.y*=1.0/ratio;\n  tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));\n  tuv.y*=ratio;\n\n  float frequency=uWarpFrequency;\n  float ws=max(uWarpStrength,0.001);\n  float amplitude=uWarpAmplitude/ws;\n  float warpTime=t*uWarpSpeed;\n  tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;\n  tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);\n\n  vec3 colLav=uColor1;\n  vec3 colOrg=uColor2;\n  vec3 colDark=uColor3;\n  float b=uColorBalance;\n  float s=max(uBlendSoftness,0.0);\n  mat2 blendRot=Rot(radians(uBlendAngle));\n  float blendX=(tuv*blendRot).x;\n  float edge0=-0.3-b-s;\n  float edge1=0.2-b+s;\n  float v0=0.5-b+s;\n  float v1=-0.3-b-s;\n  vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));\n  vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));\n  vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));\n\n  vec2 grainUv=uv*max(uGrainScale,0.001);\n  if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);}\n  float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);\n  col+=(grain-0.5)*uGrainAmount;\n\n  col=(col-0.5)*uContrast+0.5;\n  float luma=dot(col,vec3(0.2126,0.7152,0.0722));\n  col=mix(vec3(luma),col,uSaturation);\n  col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));\n  col=clamp(col,0.0,1.0);\n  if(uLightMode>0.5){\n    float energy=max(max(col.r,col.g),col.b);\n    vec3 hue=col/max(energy,0.001);\n    float chroma=length(col-vec3(dot(col,vec3(0.333333))));\n    float coverage=clamp(0.12+chroma*1.15+energy*0.18,0.0,0.88);\n    col=mix(vec3(1.0),clamp(hue*0.58+col*0.18,0.0,1.0),coverage);\n  }\n\n  o=vec4(col,1.0);\n}\nvoid main(){\n  vec4 o=vec4(0.0);\n  mainImage(o,gl_FragCoord.xy);\n  fragColor=o;\n}\n`;\n\nexport const hexToRgb = (hex: string): [number, number, number] => {\n  let value = hex.trim().replace('#', '');\n  if (value.length === 3) value = [...value].map((c) => c + c).join('');\n  const result = /^([\\da-f]{2})([\\da-f]{2})([\\da-f]{2})$/i.exec(value);\n  if (!result) return [1, 1, 1];\n  return [\n    Number.parseInt(result[1], 16) / 255,\n    Number.parseInt(result[2], 16) / 255,\n    Number.parseInt(result[3], 16) / 255,\n  ];\n};\n\nconst compile = (gl: WebGL2RenderingContext, type: number, source: string) => {\n  const shader = gl.createShader(type);\n  if (!shader) return null;\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    gl.deleteShader(shader);\n    return null;\n  }\n  return shader;\n};\n\n/**\n * Animated grainy gradient (WebGL2, no extra dependency). Fills its nearest positioned ancestor,\n * pauses when off-screen or the tab is hidden, and draws one still frame when reduced motion is\n * preferred. Without WebGL2 it renders nothing, so give the parent a fallback background.\n */\nconst Grainient = memo<GrainientProps>(\n  ({\n    timeSpeed = 0.25,\n    colorBalance = 0,\n    warpStrength = 1,\n    warpFrequency = 5,\n    warpSpeed = 2,\n    warpAmplitude = 50,\n    blendAngle = 0,\n    blendSoftness = 0.05,\n    rotationAmount = 500,\n    noiseScale = 2,\n    grainAmount = 0.1,\n    grainScale = 2,\n    contrast = 1.5,\n    gamma = 1,\n    saturation = 1,\n    zoom = 0.9,\n    centerX = 0,\n    centerY = 0,\n    color1 = '#FF9FFC',\n    color2 = '#5227FF',\n    color3 = '#B497CF',\n    grainAnimated = false,\n    lightMode = false,\n    className,\n    style,\n    ...rest\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const drawRef = useRef<(() => void) | null>(null);\n    const uniformsRef = useRef<(() => void) | null>(null);\n    const { isDarkMode } = useThemeMode();\n    const light = lightMode === 'auto' ? !isDarkMode : lightMode;\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const canvas = document.createElement('canvas');\n      canvas.className = stylex.props(styles.canvas).className ?? '';\n      const gl = canvas.getContext('webgl2', { alpha: true, antialias: false });\n      if (!gl) return;\n      container.append(canvas);\n\n      const vs = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);\n      const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);\n      const program = gl.createProgram();\n      if (!vs || !fs || !program) {\n        canvas.remove();\n        return;\n      }\n      gl.attachShader(program, vs);\n      gl.attachShader(program, fs);\n      gl.linkProgram(program);\n      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n        canvas.remove();\n        return;\n      }\n      gl.useProgram(program);\n\n      // One triangle that covers the viewport.\n      const buffer = gl.createBuffer();\n      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);\n      const position = gl.getAttribLocation(program, 'position');\n      gl.enableVertexAttribArray(position);\n      gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);\n\n      const loc = (name: string) => gl.getUniformLocation(program, name);\n      const uTime = loc('iTime');\n      const uRes = loc('iResolution');\n      const started = performance.now();\n\n      const draw = () => {\n        gl.uniform1f(uTime, (performance.now() - started) * 0.001);\n        gl.drawArrays(gl.TRIANGLES, 0, 3);\n      };\n      drawRef.current = draw;\n      uniformsRef.current?.();\n\n      const setSize = () => {\n        const rect = container.getBoundingClientRect();\n        const dpr = Math.min(window.devicePixelRatio || 1, 2);\n        canvas.width = Math.max(1, Math.floor(rect.width * dpr));\n        canvas.height = Math.max(1, Math.floor(rect.height * dpr));\n        gl.viewport(0, 0, canvas.width, canvas.height);\n        gl.uniform2f(uRes, canvas.width, canvas.height);\n        draw();\n      };\n\n      const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)');\n      let raf = 0;\n      let inView = true;\n\n      const loop = () => {\n        draw();\n        raf = requestAnimationFrame(loop);\n      };\n      const stop = () => {\n        if (raf) cancelAnimationFrame(raf);\n        raf = 0;\n      };\n      const sync = () => {\n        const run = inView && !document.hidden && !reducedMotion?.matches;\n        if (run && !raf) raf = requestAnimationFrame(loop);\n        if (!run) {\n          stop();\n          draw();\n        }\n      };\n\n      const resizeObserver = new ResizeObserver(setSize);\n      resizeObserver.observe(container);\n      const intersectionObserver = new IntersectionObserver(([entry]) => {\n        inView = entry.isIntersecting;\n        sync();\n      });\n      intersectionObserver.observe(container);\n      document.addEventListener('visibilitychange', sync);\n      reducedMotion?.addEventListener('change', sync);\n      setSize();\n      sync();\n\n      return () => {\n        stop();\n        resizeObserver.disconnect();\n        intersectionObserver.disconnect();\n        document.removeEventListener('visibilitychange', sync);\n        reducedMotion?.removeEventListener('change', sync);\n        drawRef.current = null;\n        gl.deleteBuffer(buffer);\n        gl.deleteProgram(program);\n        gl.deleteShader(vs);\n        gl.deleteShader(fs);\n        canvas.remove();\n      };\n    }, []);\n\n    useEffect(() => {\n      const apply = () => {\n        const canvas = containerRef.current?.querySelector('canvas');\n        const gl = canvas?.getContext('webgl2');\n        if (!gl) return;\n        const program = gl.getParameter(gl.CURRENT_PROGRAM) as WebGLProgram | null;\n        if (!program) return;\n        const loc = (name: string) => gl.getUniformLocation(program, name);\n        gl.uniform1f(loc('uTimeSpeed'), timeSpeed);\n        gl.uniform1f(loc('uColorBalance'), colorBalance);\n        gl.uniform1f(loc('uWarpStrength'), warpStrength);\n        gl.uniform1f(loc('uWarpFrequency'), warpFrequency);\n        gl.uniform1f(loc('uWarpSpeed'), warpSpeed);\n        gl.uniform1f(loc('uWarpAmplitude'), warpAmplitude);\n        gl.uniform1f(loc('uBlendAngle'), blendAngle);\n        gl.uniform1f(loc('uBlendSoftness'), blendSoftness);\n        gl.uniform1f(loc('uRotationAmount'), rotationAmount);\n        gl.uniform1f(loc('uNoiseScale'), noiseScale);\n        gl.uniform1f(loc('uGrainAmount'), grainAmount);\n        gl.uniform1f(loc('uGrainScale'), grainScale);\n        gl.uniform1f(loc('uContrast'), contrast);\n        gl.uniform1f(loc('uGamma'), gamma);\n        gl.uniform1f(loc('uSaturation'), saturation);\n        gl.uniform1f(loc('uZoom'), zoom);\n        gl.uniform1f(loc('uGrainAnimated'), grainAnimated ? 1 : 0);\n        gl.uniform1f(loc('uLightMode'), light ? 1 : 0);\n        gl.uniform2f(loc('uCenterOffset'), centerX, centerY);\n        gl.uniform3f(loc('uColor1'), ...hexToRgb(color1));\n        gl.uniform3f(loc('uColor2'), ...hexToRgb(color2));\n        gl.uniform3f(loc('uColor3'), ...hexToRgb(color3));\n        drawRef.current?.();\n      };\n      uniformsRef.current = apply;\n      apply();\n    }, [\n      timeSpeed,\n      colorBalance,\n      warpStrength,\n      warpFrequency,\n      warpSpeed,\n      warpAmplitude,\n      blendAngle,\n      blendSoftness,\n      rotationAmount,\n      noiseScale,\n      grainAmount,\n      grainScale,\n      contrast,\n      gamma,\n      saturation,\n      zoom,\n      centerX,\n      centerY,\n      color1,\n      color2,\n      color3,\n      grainAnimated,\n      light,\n    ]);\n\n    return (\n      <div\n        aria-hidden\n        ref={containerRef}\n        {...rest}\n        {...styleProps(styles.root, className, style)}\n      />\n    );\n  },\n);\n\nGrainient.displayName = 'Grainient';\n\nexport default Grainient;\n"],"mappings":"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"}

package/es/awesome/Grainient/style.mjs

@@ -1,24 +1,22 @@
-import { createStaticStyles } from "antd-style";
 //#region src/awesome/Grainient/style.ts
-const styles = createStaticStyles(({ css }) => ({ root: css`
-    pointer-events: none;
-
-    position: absolute;
-    z-index: 0;
-    inset: 0;
-
-    overflow: hidden;
-
-    canvas {
-      position: absolute;
-      inset: 0;
-
-      display: block;
-
-      inline-size: 100%;
-      block-size: 100%;
-    }
-  ` }));
+const styles = {
+	canvas: {
+		kpwlN0: "lb10a8y8t",
+		kZKoxP: "lb5yr21d",
+		k1xSpc: "lb1lliihq",
+		kzqmXN: "lbh8yej3",
+		kVAEAm: "lb10l6tqk",
+		$$css: true
+	},
+	root: {
+		kpwlN0: "lb10a8y8t",
+		kVQacm: "lbb3r6kr",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1ja2u2z",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Grainient/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  root: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n    inset: 0;\n\n    overflow: hidden;\n\n    canvas {\n      position: absolute;\n      inset: 0;\n\n      display: block;\n\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,WAAW,EACrD,MAAM,GAAG;;;;;;;;;;;;;;;;;;IAmBX,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Grainient/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  canvas: {\n    inset: 0,\n    blockSize: '100%',\n    display: 'block',\n    inlineSize: '100%',\n    position: 'absolute',\n  },\n  root: {\n    inset: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 0,\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/awesome/Grainient/type.d.mts

@@ -1,6 +1,6 @@
 import { DivProps } from "../../types/index.mjs";
 //#region src/awesome/Grainient/type.d.ts
-interface GrainientProps extends DivProps {
+export interface GrainientProps extends DivProps {
   /**
    * Angle of the color blend, in degrees.
    * @default 0
@@ -118,5 +118,4 @@ interface GrainientProps extends DivProps {
   zoom?: number;
 }
 //#endregion
-export { GrainientProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/GridBackground/GridBackground.mjs

@@ -1,12 +1,15 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
+import { useTheme } from "../../styles/theme/scope.mjs";
+import { useSize } from "../../hooks/useSize.mjs";
 import Grid from "./components/Grid.mjs";
 import { styles } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { cssVar, cx, useTheme } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 import { shuffle } from "es-toolkit/compat";
 import chroma from "chroma-js";
-import { useSize } from "ahooks";
 //#region src/awesome/GridBackground/GridBackground.tsx
 const initialGroup = [
 	0,
@@ -49,7 +52,7 @@ const GridBackground = memo(({ flip, reverse, showBackground, backgroundColor, r
 		theme.colorBgLayout
 	]);
 	const gridProps = useMemo(() => ({
-		className: reverse ? styles.highlightReverse : styles.highlight,
+		className: stylex.props(styles.highlight, reverse && styles.highlightReverse).className,
 		color: colorFront || cssVar.colorText,
 		strokeWidth
 	}), [
@@ -82,12 +85,11 @@ const GridBackground = memo(({ flip, reverse, showBackground, backgroundColor, r
 		gridProps
 	]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx(styles.container, className),
-		ref,
-		style: flip ? {
+		...styleProps(styles.container, className, flip ? {
 			transform: "scaleY(-1)",
 			...style
-		} : style,
+		} : style),
+		ref,
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx(Grid, {
@@ -97,12 +99,12 @@ const GridBackground = memo(({ flip, reverse, showBackground, backgroundColor, r
 			}),
 			animation && /* @__PURE__ */ jsx(HighlightGrid, {}),
 			showBackground && /* @__PURE__ */ jsx("div", {
-				className: styles.backgroundContainer,
+				...stylex.props(styles.backgroundContainer),
 				style: {
 					...size ? { fontSize: size.width / 80 } : {},
 					...backgroundCssVariables
 				},
-				children: /* @__PURE__ */ jsx("div", { className: styles.background })
+				children: /* @__PURE__ */ jsx("div", { ...stylex.props(styles.backgroundShape) })
 			})
 		]
 	});

package/es/awesome/GridBackground/GridBackground.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridBackground.mjs","names":[],"sources":["../../../src/awesome/GridBackground/GridBackground.tsx"],"sourcesContent":["'use client';\n\nimport { useSize } from 'ahooks';\nimport { cssVar, cx, useTheme } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { shuffle } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport Grid, { type GridProps } from './components/Grid';\nimport { styles } from './style';\nimport type { GridBackgroundProps } from './type';\n\nconst initialGroup = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];\n\nconst GridBackground = memo<GridBackgroundProps>(\n  ({\n    flip,\n    reverse,\n    showBackground,\n    backgroundColor,\n    random,\n    animationDuration = 8,\n    className,\n    colorFront,\n    colorBack,\n    strokeWidth,\n    style,\n    animation,\n    ...rest\n  }) => {\n    const ref = useRef(null);\n    const size = useSize(ref);\n    const theme = useTheme();\n\n    const backgroundCssVariables = useMemo<Record<string, string>>(() => {\n      if (!showBackground) return {} as Record<string, string>;\n\n      const scale = chroma\n        .bezier([theme.colorText, backgroundColor || 'blue', theme.colorBgLayout])\n        .scale()\n        .mode('lch')\n        .correctLightness()\n        .colors(6);\n\n      return {\n        '--grid-background-color-1': scale[1],\n        '--grid-background-color-2': scale[2],\n        '--grid-background-color-3': scale[3],\n        '--grid-background-color-4': scale[4],\n      };\n    }, [showBackground, backgroundColor, theme.colorText, theme.colorBgLayout]);\n\n    const gridProps: GridProps = useMemo(\n      () => ({\n        className: reverse ? styles.highlightReverse : styles.highlight,\n        color: colorFront || cssVar.colorText,\n        strokeWidth,\n      }),\n      [reverse, colorFront, strokeWidth],\n    );\n\n    const [group, setGroup] = useState(random ? initialGroup : undefined);\n    useEffect(() => {\n      setGroup(random ? shuffle(initialGroup) : undefined);\n    }, [random]);\n\n    const HighlightGrid = useCallback(() => {\n      if (!group)\n        return <Grid style={{ '--duration': `${animationDuration}s` } as any} {...gridProps} />;\n\n      return (\n        <>\n          {group.map((item, index) => {\n            return (\n              <Grid\n                key={item}\n                linePick={item}\n                style={\n                  {\n                    '--delay': `${index + Math.random()}s`,\n                    '--duration': `${animationDuration}s`,\n                  } as any\n                }\n                {...gridProps}\n              />\n            );\n          })}\n        </>\n      );\n    }, [group, animationDuration, gridProps]);\n\n    return (\n      <div\n        className={cx(styles.container, className)}\n        ref={ref}\n        style={flip ? { transform: 'scaleY(-1)', ...style } : style}\n        {...rest}\n      >\n        <Grid\n          color={colorBack || cssVar.colorBorder}\n          strokeWidth={strokeWidth}\n          style={{ zIndex: 2 }}\n        />\n        {animation && <HighlightGrid />}\n        {showBackground && (\n          <div\n            className={styles.backgroundContainer}\n            style={{\n              ...(size ? { fontSize: size.width / 80 } : {}),\n              ...backgroundCssVariables,\n            }}\n          >\n            <div className={styles.background} />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nGridBackground.displayName = 'GridBackground';\n\nexport default GridBackground;\n"],"mappings":";;;;;;;;;;AAYA,MAAM,eAAe;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;AAAE;AAEtE,MAAM,iBAAiB,MACpB,EACC,MACA,SACA,gBACA,iBACA,QACA,oBAAoB,GACpB,WACA,YACA,WACA,aACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAO,IAAI;CACvB,MAAM,OAAO,QAAQ,GAAG;CACxB,MAAM,QAAQ,SAAS;CAEvB,MAAM,yBAAyB,cAAsC;EACnE,IAAI,CAAC,gBAAgB,OAAO,CAAC;EAE7B,MAAM,QAAQ,OACX,OAAO;GAAC,MAAM;GAAW,mBAAmB;GAAQ,MAAM;EAAa,CAAC,CAAC,CACzE,MAAM,CAAC,CACP,KAAK,KAAK,CAAC,CACX,iBAAiB,CAAC,CAClB,OAAO,CAAC;EAEX,OAAO;GACL,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;EACrC;CACF,GAAG;EAAC;EAAgB;EAAiB,MAAM;EAAW,MAAM;CAAa,CAAC;CAE1E,MAAM,YAAuB,eACpB;EACL,WAAW,UAAU,OAAO,mBAAmB,OAAO;EACtD,OAAO,cAAc,OAAO;EAC5B;CACF,IACA;EAAC;EAAS;EAAY;CAAW,CACnC;CAEA,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,eAAe,KAAA,CAAS;CACpE,gBAAgB;EACd,SAAS,SAAS,QAAQ,YAAY,IAAI,KAAA,CAAS;CACrD,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,CAAC,OACH,OAAO,oBAAC,MAAD;GAAM,OAAO,EAAE,cAAc,GAAG,kBAAkB,GAAG;GAAU,GAAI;EAAY,CAAA;EAExF,OACE,oBAAA,YAAA,EAAA,UACG,MAAM,KAAK,MAAM,UAAU;GAC1B,OACE,oBAAC,MAAD;IAEE,UAAU;IACV,OACE;KACE,WAAW,GAAG,QAAQ,KAAK,OAAO,EAAE;KACpC,cAAc,GAAG,kBAAkB;IACrC;IAEF,GAAI;GACL,GATM,IASN;EAEL,CAAC,EACD,CAAA;CAEN,GAAG;EAAC;EAAO;EAAmB;CAAS,CAAC;CAExC,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,OAAO,WAAW,SAAS;EACpC;EACL,OAAO,OAAO;GAAE,WAAW;GAAc,GAAG;EAAM,IAAI;EACtD,GAAI;EAJN,UAAA;GAME,oBAAC,MAAD;IACE,OAAO,aAAa,OAAO;IACd;IACb,OAAO,EAAE,QAAQ,EAAE;GACpB,CAAA;GACA,aAAa,oBAAC,eAAD,CAAgB,CAAA;GAC7B,kBACC,oBAAC,OAAD;IACE,WAAW,OAAO;IAClB,OAAO;KACL,GAAI,OAAO,EAAE,UAAU,KAAK,QAAQ,GAAG,IAAI,CAAC;KAC5C,GAAG;IACL;IAEA,UAAA,oBAAC,OAAD,EAAK,WAAW,OAAO,WAAa,CAAA;GACjC,CAAA;EAEJ;;AAET,CACF;AAEA,eAAe,cAAc"}
+{"version":3,"file":"GridBackground.mjs","names":[],"sources":["../../../src/awesome/GridBackground/GridBackground.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport chroma from 'chroma-js';\nimport { shuffle } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useSize } from '@/hooks/useSize';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useTheme } from '@/styles/theme/scope';\n\nimport Grid, { type GridProps } from './components/Grid';\nimport { styles } from './style';\nimport type { GridBackgroundProps } from './type';\n\nconst initialGroup = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];\n\nconst GridBackground = memo<GridBackgroundProps>(\n  ({\n    flip,\n    reverse,\n    showBackground,\n    backgroundColor,\n    random,\n    animationDuration = 8,\n    className,\n    colorFront,\n    colorBack,\n    strokeWidth,\n    style,\n    animation,\n    ...rest\n  }) => {\n    const ref = useRef(null);\n    const size = useSize(ref);\n    const theme = useTheme();\n\n    const backgroundCssVariables = useMemo<Record<string, string>>(() => {\n      if (!showBackground) return {} as Record<string, string>;\n\n      const scale = chroma\n        .bezier([theme.colorText, backgroundColor || 'blue', theme.colorBgLayout])\n        .scale()\n        .mode('lch')\n        .correctLightness()\n        .colors(6);\n\n      return {\n        '--grid-background-color-1': scale[1],\n        '--grid-background-color-2': scale[2],\n        '--grid-background-color-3': scale[3],\n        '--grid-background-color-4': scale[4],\n      };\n    }, [showBackground, backgroundColor, theme.colorText, theme.colorBgLayout]);\n\n    const gridProps: GridProps = useMemo(\n      () => ({\n        className: stylex.props(styles.highlight, reverse && styles.highlightReverse).className,\n        color: colorFront || cssVar.colorText,\n        strokeWidth,\n      }),\n      [reverse, colorFront, strokeWidth],\n    );\n\n    const [group, setGroup] = useState(random ? initialGroup : undefined);\n    useEffect(() => {\n      setGroup(random ? shuffle(initialGroup) : undefined);\n    }, [random]);\n\n    const HighlightGrid = useCallback(() => {\n      if (!group)\n        return <Grid style={{ '--duration': `${animationDuration}s` } as any} {...gridProps} />;\n\n      return (\n        <>\n          {group.map((item, index) => {\n            return (\n              <Grid\n                key={item}\n                linePick={item}\n                style={\n                  {\n                    '--delay': `${index + Math.random()}s`,\n                    '--duration': `${animationDuration}s`,\n                  } as any\n                }\n                {...gridProps}\n              />\n            );\n          })}\n        </>\n      );\n    }, [group, animationDuration, gridProps]);\n\n    return (\n      <div\n        {...styleProps(\n          styles.container,\n          className,\n          flip ? { transform: 'scaleY(-1)', ...style } : style,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <Grid\n          color={colorBack || cssVar.colorBorder}\n          strokeWidth={strokeWidth}\n          style={{ zIndex: 2 }}\n        />\n        {animation && <HighlightGrid />}\n        {showBackground && (\n          <div\n            {...stylex.props(styles.backgroundContainer)}\n            style={{\n              ...(size ? { fontSize: size.width / 80 } : {}),\n              ...backgroundCssVariables,\n            }}\n          >\n            <div {...stylex.props(styles.backgroundShape)} />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nGridBackground.displayName = 'GridBackground';\n\nexport default GridBackground;\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,eAAe;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;AAAE;AACtE,MAAM,iBAAiB,MAA2B,EAChD,MACA,SACA,gBACA,iBACA,QACA,oBAAoB,GACpB,WACA,YACA,WACA,aACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAO,IAAI;CACvB,MAAM,OAAO,QAAQ,GAAG;CACxB,MAAM,QAAQ,SAAS;CACvB,MAAM,yBAAyB,cAAsC;EACnE,IAAI,CAAC,gBAAgB,OAAO,CAAC;EAC7B,MAAM,QAAQ,OAAO,OAAO;GAAC,MAAM;GAAW,mBAAmB;GAAQ,MAAM;EAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC;EAC9I,OAAO;GACL,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;EACrC;CACF,GAAG;EAAC;EAAgB;EAAiB,MAAM;EAAW,MAAM;CAAa,CAAC;CAC1E,MAAM,YAAuB,eAAe;EAC1C,WAAW,OAAO,MAAM,OAAO,WAAW,WAAW,OAAO,gBAAgB,CAAC,CAAC;EAC9E,OAAO,cAAc,OAAO;EAC5B;CACF,IAAI;EAAC;EAAS;EAAY;CAAW,CAAC;CACtC,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,eAAe,KAAA,CAAS;CACpE,gBAAgB;EACd,SAAS,SAAS,QAAQ,YAAY,IAAI,KAAA,CAAS;CACrD,GAAG,CAAC,MAAM,CAAC;CACX,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,CAAC,OAAO,OAAO,oBAAC,MAAD;GAAM,OAAO,EAC9B,cAAc,GAAG,kBAAkB,GACrC;GAAU,GAAI;EAAY,CAAA;EAC1B,OAAO,oBAAA,YAAA,EAAA,UACA,MAAM,KAAK,MAAM,UAAU;GAC9B,OAAO,oBAAC,MAAD;IAAiB,UAAU;IAAM,OAAO;KAC7C,WAAW,GAAG,QAAQ,KAAK,OAAO,EAAE;KACpC,cAAc,GAAG,kBAAkB;IACrC;IAAU,GAAI;GAAY,GAHR,IAGQ;EAC5B,CAAC,EACG,CAAA;CACR,GAAG;EAAC;EAAO;EAAmB;CAAS,CAAC;CACxC,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,WAAW,WAAW,OAAO;GAC7D,WAAW;GACX,GAAG;EACL,IAAI,KAAK;EAAQ;EAAK,GAAI;EAHnB,UAAA;GAID,oBAAC,MAAD;IAAM,OAAO,aAAa,OAAO;IAA0B;IAAa,OAAO,EACjF,QAAQ,EACV;GAAI,CAAA;GACC,aAAa,oBAAC,eAAD,CAAgB,CAAA;GAC7B,kBAAkB,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,mBAAmB;IAAG,OAAO;KAC/E,GAAI,OAAO,EACT,UAAU,KAAK,QAAQ,GACzB,IAAI,CAAC;KACL,GAAG;IACL;IACQ,UAAA,oBAAC,OAAD,EAAK,GAAI,OAAO,MAAM,OAAO,eAAe,EAAI,CAAA;GAC7C,CAAA;EACJ;;AACX,CAAC;AACD,eAAe,cAAc"}

package/es/awesome/GridBackground/GridShowcase.mjs

@@ -1,10 +1,10 @@
 "use client";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { withAlpha } from "../../utils/colorMath.mjs";
+import { useTheme } from "../../styles/theme/scope.mjs";
 import GridBackground from "./GridBackground.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useTheme } from "antd-style";
-import { rgba } from "polished";
 //#region src/awesome/GridBackground/GridShowcase.tsx
 const GridShowcase = memo(({ style, children, backgroundColor = "#001dff", innerProps, ...rest }) => {
 	const theme = useTheme();
@@ -18,8 +18,8 @@ const GridShowcase = memo(({ style, children, backgroundColor = "#001dff", inner
 			/* @__PURE__ */ jsx(GridBackground, {
 				animation: true,
 				flip: true,
-				colorBack: rgba(theme.colorText, .12),
-				colorFront: rgba(theme.colorText, .6)
+				colorBack: withAlpha(theme.colorText, .12),
+				colorFront: withAlpha(theme.colorText, .6)
 			}),
 			/* @__PURE__ */ jsx(FlexBasic_default, {
 				align: "center",
@@ -36,7 +36,7 @@ const GridShowcase = memo(({ style, children, backgroundColor = "#001dff", inner
 				reverse: true,
 				showBackground: true,
 				backgroundColor,
-				colorBack: rgba(theme.colorText, .24),
+				colorBack: withAlpha(theme.colorText, .24),
 				colorFront: theme.colorText,
 				style: { zIndex: 0 }
 			})

package/es/awesome/GridBackground/GridShowcase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridShowcase.mjs","names":["Flexbox"],"sources":["../../../src/awesome/GridBackground/GridShowcase.tsx"],"sourcesContent":["'use client';\n\nimport { useTheme } from 'antd-style';\nimport { rgba } from 'polished';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport GridBackground from './GridBackground';\nimport type { GridShowcaseProps } from './type';\n\nconst GridShowcase = memo<GridShowcaseProps>(\n  ({ style, children, backgroundColor = '#001dff', innerProps, ...rest }) => {\n    const theme = useTheme();\n\n    return (\n      <Flexbox style={{ position: 'relative', ...style }} {...rest}>\n        <GridBackground\n          animation\n          flip\n          colorBack={rgba(theme.colorText, 0.12)}\n          colorFront={rgba(theme.colorText, 0.6)}\n        />\n        <Flexbox align={'center'} {...innerProps} style={{ zIndex: 4, ...innerProps?.style }}>\n          {children}\n        </Flexbox>\n        <GridBackground\n          animation\n          random\n          reverse\n          showBackground\n          backgroundColor={backgroundColor}\n          colorBack={rgba(theme.colorText, 0.24)}\n          colorFront={theme.colorText}\n          style={{ zIndex: 0 }}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nGridShowcase.displayName = 'GridShowcase';\n\nexport default GridShowcase;\n"],"mappings":";;;;;;;;AAWA,MAAM,eAAe,MAClB,EAAE,OAAO,UAAU,kBAAkB,WAAW,YAAY,GAAG,WAAW;CACzE,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAACA,mBAAD;EAAS,OAAO;GAAE,UAAU;GAAY,GAAG;EAAM;EAAG,GAAI;EAAxD,UAAA;GACE,oBAAC,gBAAD;IACE,WAAA;IACA,MAAA;IACA,WAAW,KAAK,MAAM,WAAW,GAAI;IACrC,YAAY,KAAK,MAAM,WAAW,EAAG;GACtC,CAAA;GACD,oBAACA,mBAAD;IAAS,OAAO;IAAU,GAAI;IAAY,OAAO;KAAE,QAAQ;KAAG,GAAG,YAAY;IAAM;IAChF;GACM,CAAA;GACT,oBAAC,gBAAD;IACE,WAAA;IACA,QAAA;IACA,SAAA;IACA,gBAAA;IACiB;IACjB,WAAW,KAAK,MAAM,WAAW,GAAI;IACrC,YAAY,MAAM;IAClB,OAAO,EAAE,QAAQ,EAAE;GACpB,CAAA;EACM;;AAEb,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"GridShowcase.mjs","names":["Flexbox"],"sources":["../../../src/awesome/GridBackground/GridShowcase.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { useTheme } from '@/styles/theme/scope';\nimport { withAlpha } from '@/utils/colorMath';\n\nimport GridBackground from './GridBackground';\nimport type { GridShowcaseProps } from './type';\n\nconst GridShowcase = memo<GridShowcaseProps>(\n  ({ style, children, backgroundColor = '#001dff', innerProps, ...rest }) => {\n    const theme = useTheme();\n\n    return (\n      <Flexbox style={{ position: 'relative', ...style }} {...rest}>\n        <GridBackground\n          animation\n          flip\n          colorBack={withAlpha(theme.colorText, 0.12)}\n          colorFront={withAlpha(theme.colorText, 0.6)}\n        />\n        <Flexbox align={'center'} {...innerProps} style={{ zIndex: 4, ...innerProps?.style }}>\n          {children}\n        </Flexbox>\n        <GridBackground\n          animation\n          random\n          reverse\n          showBackground\n          backgroundColor={backgroundColor}\n          colorBack={withAlpha(theme.colorText, 0.24)}\n          colorFront={theme.colorText}\n          style={{ zIndex: 0 }}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nGridShowcase.displayName = 'GridShowcase';\n\nexport default GridShowcase;\n"],"mappings":";;;;;;;;AAWA,MAAM,eAAe,MAClB,EAAE,OAAO,UAAU,kBAAkB,WAAW,YAAY,GAAG,WAAW;CACzE,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAACA,mBAAD;EAAS,OAAO;GAAE,UAAU;GAAY,GAAG;EAAM;EAAG,GAAI;EAAxD,UAAA;GACE,oBAAC,gBAAD;IACE,WAAA;IACA,MAAA;IACA,WAAW,UAAU,MAAM,WAAW,GAAI;IAC1C,YAAY,UAAU,MAAM,WAAW,EAAG;GAC3C,CAAA;GACD,oBAACA,mBAAD;IAAS,OAAO;IAAU,GAAI;IAAY,OAAO;KAAE,QAAQ;KAAG,GAAG,YAAY;IAAM;IAChF;GACM,CAAA;GACT,oBAAC,gBAAD;IACE,WAAA;IACA,QAAA;IACA,SAAA;IACA,gBAAA;IACiB;IACjB,WAAW,UAAU,MAAM,WAAW,GAAI;IAC1C,YAAY,MAAM;IAClB,OAAO,EAAE,QAAQ,EAAE;GACpB,CAAA;EACM;;AAEb,CACF;AAEA,aAAa,cAAc"}