@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/awesome/Features/style.mjs

@@ -1,158 +1,57 @@
-import { createStaticStyles } from "antd-style";
+import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
 //#region src/awesome/Features/style.ts
-const prefixCls = "ant";
-const styles = createStaticStyles(({ css, cssVar }) => {
-	const prefix = `${prefixCls}-features`;
-	const coverCls = `${prefix}-cover`;
-	const descCls = `${prefix}-description`;
-	const titleCls = `${prefix}-title`;
-	const imgCls = `${prefix}-img`;
-	const scaleUnit = 20;
-	const genSize = (size) => css`
-    width: ${size}px;
-    height: ${size}px;
-    font-size: ${size * (22 / 24)}px;
-  `;
-	const withTransition = css`
-    transition: all ${cssVar.motionDurationSlow} ${cssVar.motionEaseInOutCirc};
-  `;
-	return {
-		cell: css`
-      overflow: hidden;
-    `,
-		container: css`
-      ${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.colorFillContent};
-        }
-
-        .${imgCls} {
-          ${genSize(100)};
-        }
-
-        .${descCls} {
-          position: absolute;
-          visibility: hidden;
-          opacity: 0;
-        }
-
-        .${titleCls} {
-          font-size: var(--features-title-hover-size, 20px);
-        }
-      }
-    `,
-		containerHasLink: css`
-      ${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.colorFillContent};
-        }
-
-        .${imgCls} {
-          ${genSize(100)};
-        }
-
-        .${descCls} {
-          position: absolute;
-          visibility: hidden;
-          opacity: 0;
-        }
-
-        .${titleCls} {
-          font-size: 14px;
-        }
-      }
-    `,
-		desc: css`
-      ${descCls}
-      ${withTransition}
-      pointer-events: none;
-      color: ${cssVar.colorTextSecondary};
-
-      quotient {
-        position: relative;
-
-        display: block;
-
-        margin-block: 12px;
-        margin-inline: 0;
-        padding-inline-start: 12px;
-
-        color: ${cssVar.colorTextDescription};
-      }
-    `,
-		img: css`
-      ${imgCls}
-      ${withTransition}
-      ${genSize(20)};
-      color: ${cssVar.colorText};
-    `,
-		imgContainer: css`
-      ${coverCls}
-      ${withTransition}
-      ${genSize(24)};
-      padding: 4px;
-      opacity: 0.8;
-      border-radius: ${cssVar.borderRadius};
-    `,
-		link: css`
-      ${withTransition};
-      margin-block-start: 24px;
-    `,
-		title: css`
-      ${titleCls}
-      ${withTransition}
-      pointer-events: none;
-
-      margin-block: 16px;
-      margin-inline: 0;
-
-      font-size: 20px;
-      line-height: ${cssVar.lineHeightHeading3};
-      color: ${cssVar.colorText};
-    `
-	};
-});
+const styles = {
+	cell: {
+		kVQacm: "lbb3r6kr",
+		$$css: true
+	},
+	container: {
+		kmVPX3: "lbggk2y7",
+		kVQacm: "lbb3r6kr",
+		kmkexE: "lbti8zbx",
+		kVAEAm: "lb1n2onr6",
+		kY2c9j: "lb1vjfegm",
+		kZKoxP: "lb8idabb",
+		kskxy: "lbvl751",
+		$$css: true
+	},
+	imgContainer: {
+		kmVPX3: "lbfawy5m",
+		kaIpWk: "lb1sbi92r",
+		kGuDYH: "lb1i1m3gp",
+		kSiTet: "lb1us6l5c",
+		kZKoxP: "lbxk0z11",
+		kzqmXN: "lbvy4d1p",
+		$$css: true
+	},
+	link: {
+		kmkexE: "lbti8zbx",
+		keoZOQ: "lbqui205",
+		$$css: true
+	},
+	title: {
+		kqGvvJ: "lb2i9t41",
+		kUOVxO: "lbrxpjvj",
+		kMwMTN: "lb66ogz0",
+		kGuDYH: "lbwsyq91",
+		kLWn49: "lbfn3y7y",
+		kfzvcC: "lb47corl",
+		$$css: true
+	}
+};
+const childStyles = {
+	desc: {
+		color: cssVar.colorTextSecondary,
+		pointerEvents: "none"
+	},
+	img: {
+		color: cssVar.colorText,
+		fontSize: 20 * (22 / 24),
+		height: 20,
+		width: 20
+	}
+};
 //#endregion
-export { styles };
+export { childStyles, styles };
 
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"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,KAAK,aAAa;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,GAAG;aAC1B,KAAK;cACJ,KAAK;iBACF,QAAQ,KAAK,IAAI;;CAGhC,MAAM,iBAAiB,GAAG;sBACN,OAAO,mBAAmB,GAAG,OAAO,oBAAoB;;CAG5E,OAAO;EACL,MAAM,GAAG;;;EAIT,WAAW,GAAG;QACV,eAAe;;;;;;;;;;;;;;;;;;WAkBZ,SAAS;;sDAEkC,UAAU;;wBAExC,OAAO,iBAAiB;;;WAGrC,OAAO;YACN,QAAQ,GAAG,EAAE;;;WAGd,QAAQ;;;;;;WAMR,SAAS;;;;;EAMhB,kBAAkB,GAAG;QACjB,eAAe;;;;;;;;;;;;;;;;;;WAkBZ,SAAS;;sDAEkC,UAAU;;wBAExC,OAAO,iBAAiB;;;WAGrC,OAAO;YACN,QAAQ,GAAG,EAAE;;;WAGd,QAAQ;;;;;;WAMR,SAAS;;;;;EAKhB,MAAM,GAAG;QACL,QAAQ;QACR,eAAe;;eAER,OAAO,mBAAmB;;;;;;;;;;;iBAWxB,OAAO,qBAAqB;;;EAGzC,KAAK,GAAG;QACJ,OAAO;QACP,eAAe;QACf,QAAQ,EAAE,EAAE;eACL,OAAO,UAAU;;EAG5B,cAAc,GAAG;QACb,SAAS;QACT,eAAe;QACf,QAAQ,EAAE,EAAE;;;uBAGG,OAAO,aAAa;;EAGvC,MAAM,GAAG;QACL,eAAe;;;EAInB,OAAO,GAAG;QACN,SAAS;QACT,eAAe;;;;;;;qBAOF,OAAO,mBAAmB;eAChC,OAAO,UAAU;;CAE9B;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Features/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { CSSProperties } from 'react';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  cell: {\n    overflow: 'hidden',\n  },\n  container: {\n    padding: 24,\n    overflow: 'hidden',\n    transition: `all ${cssVar.motionDurationSlow} ${cssVar.motionEaseInOutCirc}`,\n    position: 'relative',\n    zIndex: 1,\n    height: 228,\n    maxHeight: 228,\n  },\n  imgContainer: {\n    padding: 4,\n    borderRadius: cssVar.borderRadius,\n    fontSize: 22,\n    opacity: 0.8,\n    height: 24,\n    width: 24,\n  },\n  link: {\n    transition: `all ${cssVar.motionDurationSlow} ${cssVar.motionEaseInOutCirc}`,\n    marginBlockStart: 24,\n  },\n  title: {\n    marginBlock: 16,\n    marginInline: 0,\n    color: cssVar.colorText,\n    fontSize: 20,\n    lineHeight: cssVar.lineHeightHeading3,\n    pointerEvents: 'none',\n  },\n});\n\nexport const childStyles = {\n  desc: {\n    color: cssVar.colorTextSecondary,\n    pointerEvents: 'none',\n  },\n  img: {\n    color: cssVar.colorText,\n    fontSize: 20 * (22 / 24),\n    height: 20,\n    width: 20,\n  },\n} satisfies Record<string, CSSProperties>;\n"],"mappings":";;AAIA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAa,cAAc;CACzB,MAAM;EACJ,OAAO,OAAO;EACd,eAAe;CACjB;CACA,KAAK;EACH,OAAO,OAAO;EACd,UAAU,MAAM,KAAK;EACrB,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -5,7 +5,7 @@ import { SpotlightCardProps } from "../SpotlightCard/type.mjs";
 import "../SpotlightCard/index.mjs";
 import { CSSProperties } from "react";
 //#region src/awesome/Features/type.d.ts
-interface FeatureItemType {
+export interface FeatureItemType {
   column?: number;
   description?: string;
   hero?: boolean;
@@ -18,7 +18,7 @@ interface FeatureItemType {
   row?: number;
   title: string;
 }
-interface FeaturesProps extends DivProps {
+export interface FeaturesProps extends DivProps {
   columns?: SpotlightCardProps['columns'];
   gap?: SpotlightCardProps['gap'];
   itemClassName?: string;
@@ -27,5 +27,4 @@ interface FeaturesProps extends DivProps {
   maxWidth?: number;
 }
 //#endregion
-export { FeatureItemType, FeaturesProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/FluidGradient/FluidGradient.mjs

@@ -1,9 +1,11 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { useThemeMode } from "../../styles/theme/scope.mjs";
 import { LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT } from "../landingTokens.mjs";
 import { styles } from "./style.mjs";
 import { memo, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cx, useThemeMode } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/FluidGradient/FluidGradient.tsx
 const VERTEX_SHADER = `#version 300 es
 in vec2 aPos;
@@ -274,16 +276,18 @@ const FluidGradient = memo(({ className, colors, intensity = .45, speed = 1, sty
 	}, [canvasEpoch]);
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": true,
-		className: cx(styles.root, className),
 		"data-ready": ready ? "" : void 0,
-		style: {
+		...styleProps(styles.root, className, {
 			"--fluid-stop-a": palette[0],
 			"--fluid-stop-b": palette[1],
 			"--fluid-stop-c": palette[2],
 			...style
-		},
+		}),
 		...rest,
-		children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef }, canvasEpoch)
+		children: /* @__PURE__ */ jsx("canvas", {
+			ref: canvasRef,
+			...stylex.props(styles.canvas, ready && styles.canvasReady)
+		}, canvasEpoch)
 	});
 });
 FluidGradient.displayName = "FluidGradient";

package/es/awesome/FluidGradient/FluidGradient.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FluidGradient.mjs","names":[],"sources":["../../../src/awesome/FluidGradient/FluidGradient.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { type CSSProperties, memo, useEffect, useRef, useState } from 'react';\n\nimport { LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT } from '@/awesome/landingTokens';\n\nimport { styles } from './style';\nimport type { FluidGradientProps } from './type';\n\nconst VERTEX_SHADER = `#version 300 es\nin vec2 aPos;\nvoid main() {\n  gl_Position = vec4(aPos, 0.0, 1.0);\n}`;\n\nconst FRAGMENT_SHADER = `#version 300 es\nprecision highp float;\n\nuniform vec2 uRes;\nuniform float uTime;\nuniform vec3 uStopA;\nuniform vec3 uStopB;\nuniform vec3 uStopC;\nuniform float uIntensity;\n\nout vec4 fragColor;\n\nfloat hash(vec2 p) {\n  p = fract(p * vec2(234.34, 435.345));\n  p += dot(p, p + 34.23);\n  return fract(p.x * p.y);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);\n}\n\nfloat fbm(vec2 p) {\n  float value = 0.0;\n  float amplitude = 0.5;\n  for (int i = 0; i < 4; i++) {\n    value += amplitude * noise(p);\n    p = mat2(0.8, 0.6, -0.6, 0.8) * p * 2.0 + vec2(3.7, 1.3);\n    amplitude *= 0.5;\n  }\n  return value;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / uRes;\n  vec2 p = vec2(uv.x * uRes.x / uRes.y, uv.y);\n\n  float t = uTime * 0.05;\n\n  vec2 q = vec2(fbm(p * 1.4 + t * 0.35), fbm(p * 1.4 - t * 0.28 + 5.2));\n  vec2 r = vec2(\n    fbm(p * 1.4 + 2.6 * q + vec2(1.7, 9.2) + t * 0.18),\n    fbm(p * 1.4 + 2.6 * q + vec2(8.3, 2.8) - t * 0.12)\n  );\n  float field = fbm(p * 1.4 + 2.6 * r);\n\n  vec3 color = mix(uStopA, uStopB, clamp(field * field * 2.4, 0.0, 1.0));\n  color = mix(color, uStopC, clamp(dot(q, vec2(0.7)) - 0.25, 0.0, 1.0));\n\n  float fade = smoothstep(0.02, 0.85, uv.y);\n  float alpha = fade * fade * uIntensity * smoothstep(0.14, 0.66, field);\n\n  fragColor = vec4(color * alpha, alpha);\n}`;\n\nconst hexToRgb = (hex: string): [number, number, number] => {\n  const value = hex.replace('#', '');\n  const full =\n    value.length === 3\n      ? value\n          .split('')\n          .map((char) => char + char)\n          .join('')\n      : value.slice(0, 6);\n  const channel = (offset: number) => Number.parseInt(full.slice(offset, offset + 2), 16) / 255;\n  return [channel(0), channel(2), channel(4)];\n};\n\nconst FluidGradient = memo<FluidGradientProps>(\n  ({ className, colors, intensity = 0.45, speed = 1, style, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const [ready, setReady] = useState(false);\n    const [canvasEpoch, setCanvasEpoch] = useState(0);\n    const palette = colors ?? (isDarkMode ? LANDING_PALETTE_DARK : LANDING_PALETTE_LIGHT);\n    const paletteRef = useRef({ colors: palette, intensity });\n    const speedRef = useRef(speed);\n    const repaintRef = useRef<(() => void) | undefined>(undefined);\n\n    useEffect(() => {\n      paletteRef.current = { colors: palette, intensity };\n      speedRef.current = speed;\n      repaintRef.current?.();\n    }, [palette[0], palette[1], palette[2], intensity, speed]);\n\n    useEffect(() => {\n      const canvas = canvasRef.current;\n      if (!canvas) return undefined;\n\n      const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n      let frameId = 0;\n      let inView = true;\n      let readySent = false;\n      let drawFrame: ((seconds: number) => void) | null = null;\n      let refreshPalette: (() => void) | null = null;\n      let sizeAndDraw: (() => boolean) | null = null;\n      let destroyResources: ((lose: boolean) => void) | null = null;\n\n      const buildResources = () => {\n        const gl = canvas.getContext('webgl2', {\n          alpha: true,\n          antialias: false,\n          depth: false,\n          stencil: false,\n          powerPreference: 'low-power',\n        });\n        if (!gl) return false;\n\n        const compileShader = (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        const vertexShader = compileShader(gl.VERTEX_SHADER, VERTEX_SHADER);\n        const fragmentShader = compileShader(gl.FRAGMENT_SHADER, FRAGMENT_SHADER);\n        if (!vertexShader || !fragmentShader) return false;\n\n        const program = gl.createProgram();\n        if (!program) return false;\n        gl.attachShader(program, vertexShader);\n        gl.attachShader(program, fragmentShader);\n        gl.linkProgram(program);\n        gl.deleteShader(vertexShader);\n        gl.deleteShader(fragmentShader);\n        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n          gl.deleteProgram(program);\n          return false;\n        }\n        gl.useProgram(program);\n\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, 'aPos');\n        gl.enableVertexAttribArray(position);\n        gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);\n\n        const timeLocation = gl.getUniformLocation(program, 'uTime');\n        const stopLocations = ['uStopA', 'uStopB', 'uStopC'].map((name) =>\n          gl.getUniformLocation(program, name),\n        );\n\n        const intensityLocation = gl.getUniformLocation(program, 'uIntensity');\n\n        refreshPalette = () => {\n          const { colors: stops, intensity: peak } = paletteRef.current;\n          stops.map(hexToRgb).forEach((stop, index) => {\n            const location = stopLocations[index];\n            if (location) gl.uniform3f(location, stop[0], stop[1], stop[2]);\n          });\n          gl.uniform1f(intensityLocation, peak);\n        };\n        refreshPalette();\n\n        drawFrame = (seconds: number) => {\n          gl.uniform1f(timeLocation, seconds * speedRef.current);\n          gl.drawArrays(gl.TRIANGLES, 0, 3);\n          if (!readySent) {\n            readySent = true;\n            setReady(true);\n          }\n        };\n\n        sizeAndDraw = () => {\n          const dpr = Math.min(window.devicePixelRatio || 1, 1.5);\n          const width = Math.max(1, Math.round(canvas.clientWidth * dpr));\n          const height = Math.max(1, Math.round(canvas.clientHeight * dpr));\n          if (canvas.width !== width || canvas.height !== height) {\n            canvas.width = width;\n            canvas.height = height;\n            gl.viewport(0, 0, width, height);\n          }\n          return canvas.clientWidth > 0 && drawFrame !== null;\n        };\n\n        destroyResources = (lose: boolean) => {\n          gl.deleteBuffer(buffer);\n          gl.deleteProgram(program);\n          drawFrame = null;\n          refreshPalette = null;\n          sizeAndDraw = null;\n          destroyResources = null;\n          if (lose) gl.getExtension('WEBGL_lose_context')?.loseContext();\n        };\n\n        return true;\n      };\n\n      if (!buildResources()) return undefined;\n\n      const renderOnce = () => {\n        if (!sizeAndDraw?.()) return;\n        drawFrame?.(performance.now() / 1000);\n      };\n\n      const syncLoop = (milliseconds: number) => {\n        frameId = requestAnimationFrame(syncLoop);\n        if (sizeAndDraw?.()) drawFrame?.(milliseconds / 1000);\n      };\n\n      const updateLoop = () => {\n        const shouldAnimate =\n          inView && !document.hidden && !reducedMotion.matches && drawFrame !== null;\n\n        if (shouldAnimate) {\n          if (frameId === 0) frameId = requestAnimationFrame(syncLoop);\n          return;\n        }\n\n        if (frameId !== 0) {\n          cancelAnimationFrame(frameId);\n          frameId = 0;\n        }\n\n        if (!document.hidden) renderOnce();\n      };\n\n      const resizeObserver = new ResizeObserver(() => {\n        if (frameId === 0) renderOnce();\n      });\n      resizeObserver.observe(canvas);\n\n      const intersectionObserver = new IntersectionObserver(([entry]) => {\n        inView = entry.isIntersecting;\n        updateLoop();\n      });\n      intersectionObserver.observe(canvas);\n\n      const handleVisibilityChange = () => updateLoop();\n      document.addEventListener('visibilitychange', handleVisibilityChange);\n\n      const handleMotionPreferenceChange = () => updateLoop();\n      reducedMotion.addEventListener('change', handleMotionPreferenceChange);\n\n      repaintRef.current = () => {\n        refreshPalette?.();\n        if (frameId === 0) renderOnce();\n      };\n\n      const handleContextLost = (event: Event) => {\n        event.preventDefault();\n        if (frameId !== 0) {\n          cancelAnimationFrame(frameId);\n          frameId = 0;\n        }\n        setCanvasEpoch((value) => value + 1);\n      };\n      canvas.addEventListener('webglcontextlost', handleContextLost);\n\n      updateLoop();\n\n      return () => {\n        if (frameId !== 0) cancelAnimationFrame(frameId);\n        frameId = 0;\n        resizeObserver.disconnect();\n        intersectionObserver.disconnect();\n        repaintRef.current = undefined;\n        document.removeEventListener('visibilitychange', handleVisibilityChange);\n        reducedMotion.removeEventListener('change', handleMotionPreferenceChange);\n        canvas.removeEventListener('webglcontextlost', handleContextLost);\n        if (!canvas.isConnected) destroyResources?.(true);\n        else destroyResources?.(false);\n      };\n    }, [canvasEpoch]);\n\n    return (\n      <div\n        aria-hidden\n        className={cx(styles.root, className)}\n        data-ready={ready ? '' : undefined}\n        style={\n          {\n            '--fluid-stop-a': palette[0],\n            '--fluid-stop-b': palette[1],\n            '--fluid-stop-c': palette[2],\n            ...style,\n          } as CSSProperties\n        }\n        {...rest}\n      >\n        <canvas key={canvasEpoch} ref={canvasRef} />\n      </div>\n    );\n  },\n);\n\nFluidGradient.displayName = 'FluidGradient';\n\nexport default FluidGradient;\n"],"mappings":"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"}
+{"version":3,"file":"FluidGradient.mjs","names":[],"sources":["../../../src/awesome/FluidGradient/FluidGradient.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { type CSSProperties, memo, useEffect, useRef, useState } from 'react';\n\nimport { LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT } from '@/awesome/landingTokens';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { styles } from './style';\nimport type { FluidGradientProps } from './type';\n\nconst VERTEX_SHADER = `#version 300 es\nin vec2 aPos;\nvoid main() {\n  gl_Position = vec4(aPos, 0.0, 1.0);\n}`;\n\nconst FRAGMENT_SHADER = `#version 300 es\nprecision highp float;\n\nuniform vec2 uRes;\nuniform float uTime;\nuniform vec3 uStopA;\nuniform vec3 uStopB;\nuniform vec3 uStopC;\nuniform float uIntensity;\n\nout vec4 fragColor;\n\nfloat hash(vec2 p) {\n  p = fract(p * vec2(234.34, 435.345));\n  p += dot(p, p + 34.23);\n  return fract(p.x * p.y);\n}\n\nfloat noise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);\n}\n\nfloat fbm(vec2 p) {\n  float value = 0.0;\n  float amplitude = 0.5;\n  for (int i = 0; i < 4; i++) {\n    value += amplitude * noise(p);\n    p = mat2(0.8, 0.6, -0.6, 0.8) * p * 2.0 + vec2(3.7, 1.3);\n    amplitude *= 0.5;\n  }\n  return value;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / uRes;\n  vec2 p = vec2(uv.x * uRes.x / uRes.y, uv.y);\n\n  float t = uTime * 0.05;\n\n  vec2 q = vec2(fbm(p * 1.4 + t * 0.35), fbm(p * 1.4 - t * 0.28 + 5.2));\n  vec2 r = vec2(\n    fbm(p * 1.4 + 2.6 * q + vec2(1.7, 9.2) + t * 0.18),\n    fbm(p * 1.4 + 2.6 * q + vec2(8.3, 2.8) - t * 0.12)\n  );\n  float field = fbm(p * 1.4 + 2.6 * r);\n\n  vec3 color = mix(uStopA, uStopB, clamp(field * field * 2.4, 0.0, 1.0));\n  color = mix(color, uStopC, clamp(dot(q, vec2(0.7)) - 0.25, 0.0, 1.0));\n\n  float fade = smoothstep(0.02, 0.85, uv.y);\n  float alpha = fade * fade * uIntensity * smoothstep(0.14, 0.66, field);\n\n  fragColor = vec4(color * alpha, alpha);\n}`;\n\nconst hexToRgb = (hex: string): [number, number, number] => {\n  const value = hex.replace('#', '');\n  const full =\n    value.length === 3\n      ? value\n          .split('')\n          .map((char) => char + char)\n          .join('')\n      : value.slice(0, 6);\n  const channel = (offset: number) => Number.parseInt(full.slice(offset, offset + 2), 16) / 255;\n  return [channel(0), channel(2), channel(4)];\n};\n\nconst FluidGradient = memo<FluidGradientProps>(\n  ({ className, colors, intensity = 0.45, speed = 1, style, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const [ready, setReady] = useState(false);\n    const [canvasEpoch, setCanvasEpoch] = useState(0);\n    const palette = colors ?? (isDarkMode ? LANDING_PALETTE_DARK : LANDING_PALETTE_LIGHT);\n    const paletteRef = useRef({ colors: palette, intensity });\n    const speedRef = useRef(speed);\n    const repaintRef = useRef<(() => void) | undefined>(undefined);\n\n    useEffect(() => {\n      paletteRef.current = { colors: palette, intensity };\n      speedRef.current = speed;\n      repaintRef.current?.();\n    }, [palette[0], palette[1], palette[2], intensity, speed]);\n\n    useEffect(() => {\n      const canvas = canvasRef.current;\n      if (!canvas) return undefined;\n\n      const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n      let frameId = 0;\n      let inView = true;\n      let readySent = false;\n      let drawFrame: ((seconds: number) => void) | null = null;\n      let refreshPalette: (() => void) | null = null;\n      let sizeAndDraw: (() => boolean) | null = null;\n      let destroyResources: ((lose: boolean) => void) | null = null;\n\n      const buildResources = () => {\n        const gl = canvas.getContext('webgl2', {\n          alpha: true,\n          antialias: false,\n          depth: false,\n          stencil: false,\n          powerPreference: 'low-power',\n        });\n        if (!gl) return false;\n\n        const compileShader = (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        const vertexShader = compileShader(gl.VERTEX_SHADER, VERTEX_SHADER);\n        const fragmentShader = compileShader(gl.FRAGMENT_SHADER, FRAGMENT_SHADER);\n        if (!vertexShader || !fragmentShader) return false;\n\n        const program = gl.createProgram();\n        if (!program) return false;\n        gl.attachShader(program, vertexShader);\n        gl.attachShader(program, fragmentShader);\n        gl.linkProgram(program);\n        gl.deleteShader(vertexShader);\n        gl.deleteShader(fragmentShader);\n        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n          gl.deleteProgram(program);\n          return false;\n        }\n        gl.useProgram(program);\n\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, 'aPos');\n        gl.enableVertexAttribArray(position);\n        gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);\n\n        const timeLocation = gl.getUniformLocation(program, 'uTime');\n        const stopLocations = ['uStopA', 'uStopB', 'uStopC'].map((name) =>\n          gl.getUniformLocation(program, name),\n        );\n\n        const intensityLocation = gl.getUniformLocation(program, 'uIntensity');\n\n        refreshPalette = () => {\n          const { colors: stops, intensity: peak } = paletteRef.current;\n          stops.map(hexToRgb).forEach((stop, index) => {\n            const location = stopLocations[index];\n            if (location) gl.uniform3f(location, stop[0], stop[1], stop[2]);\n          });\n          gl.uniform1f(intensityLocation, peak);\n        };\n        refreshPalette();\n\n        drawFrame = (seconds: number) => {\n          gl.uniform1f(timeLocation, seconds * speedRef.current);\n          gl.drawArrays(gl.TRIANGLES, 0, 3);\n          if (!readySent) {\n            readySent = true;\n            setReady(true);\n          }\n        };\n\n        sizeAndDraw = () => {\n          const dpr = Math.min(window.devicePixelRatio || 1, 1.5);\n          const width = Math.max(1, Math.round(canvas.clientWidth * dpr));\n          const height = Math.max(1, Math.round(canvas.clientHeight * dpr));\n          if (canvas.width !== width || canvas.height !== height) {\n            canvas.width = width;\n            canvas.height = height;\n            gl.viewport(0, 0, width, height);\n          }\n          return canvas.clientWidth > 0 && drawFrame !== null;\n        };\n\n        destroyResources = (lose: boolean) => {\n          gl.deleteBuffer(buffer);\n          gl.deleteProgram(program);\n          drawFrame = null;\n          refreshPalette = null;\n          sizeAndDraw = null;\n          destroyResources = null;\n          if (lose) gl.getExtension('WEBGL_lose_context')?.loseContext();\n        };\n\n        return true;\n      };\n\n      if (!buildResources()) return undefined;\n\n      const renderOnce = () => {\n        if (!sizeAndDraw?.()) return;\n        drawFrame?.(performance.now() / 1000);\n      };\n\n      const syncLoop = (milliseconds: number) => {\n        frameId = requestAnimationFrame(syncLoop);\n        if (sizeAndDraw?.()) drawFrame?.(milliseconds / 1000);\n      };\n\n      const updateLoop = () => {\n        const shouldAnimate =\n          inView && !document.hidden && !reducedMotion.matches && drawFrame !== null;\n\n        if (shouldAnimate) {\n          if (frameId === 0) frameId = requestAnimationFrame(syncLoop);\n          return;\n        }\n\n        if (frameId !== 0) {\n          cancelAnimationFrame(frameId);\n          frameId = 0;\n        }\n\n        if (!document.hidden) renderOnce();\n      };\n\n      const resizeObserver = new ResizeObserver(() => {\n        if (frameId === 0) renderOnce();\n      });\n      resizeObserver.observe(canvas);\n\n      const intersectionObserver = new IntersectionObserver(([entry]) => {\n        inView = entry.isIntersecting;\n        updateLoop();\n      });\n      intersectionObserver.observe(canvas);\n\n      const handleVisibilityChange = () => updateLoop();\n      document.addEventListener('visibilitychange', handleVisibilityChange);\n\n      const handleMotionPreferenceChange = () => updateLoop();\n      reducedMotion.addEventListener('change', handleMotionPreferenceChange);\n\n      repaintRef.current = () => {\n        refreshPalette?.();\n        if (frameId === 0) renderOnce();\n      };\n\n      const handleContextLost = (event: Event) => {\n        event.preventDefault();\n        if (frameId !== 0) {\n          cancelAnimationFrame(frameId);\n          frameId = 0;\n        }\n        setCanvasEpoch((value) => value + 1);\n      };\n      canvas.addEventListener('webglcontextlost', handleContextLost);\n\n      updateLoop();\n\n      return () => {\n        if (frameId !== 0) cancelAnimationFrame(frameId);\n        frameId = 0;\n        resizeObserver.disconnect();\n        intersectionObserver.disconnect();\n        repaintRef.current = undefined;\n        document.removeEventListener('visibilitychange', handleVisibilityChange);\n        reducedMotion.removeEventListener('change', handleMotionPreferenceChange);\n        canvas.removeEventListener('webglcontextlost', handleContextLost);\n        if (!canvas.isConnected) destroyResources?.(true);\n        else destroyResources?.(false);\n      };\n    }, [canvasEpoch]);\n\n    return (\n      <div\n        aria-hidden\n        data-ready={ready ? '' : undefined}\n        {...styleProps(styles.root, className, {\n          '--fluid-stop-a': palette[0],\n          '--fluid-stop-b': palette[1],\n          '--fluid-stop-c': palette[2],\n          ...style,\n        } as CSSProperties)}\n        {...rest}\n      >\n        <canvas\n          key={canvasEpoch}\n          ref={canvasRef}\n          {...stylex.props(styles.canvas, ready && styles.canvasReady)}\n        />\n      </div>\n    );\n  },\n);\n\nFluidGradient.displayName = 'FluidGradient';\n\nexport default FluidGradient;\n"],"mappings":"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"}

package/es/awesome/FluidGradient/style.mjs

@@ -1,51 +1,27 @@
-import { createStaticStyles } from "antd-style";
 //#region src/awesome/FluidGradient/style.ts
-const styles = createStaticStyles(({ css }) => ({ root: css`
-    pointer-events: none;
-
-    position: absolute;
-    z-index: 0;
-    inset: 0;
-
-    /* Soft CSS fallback so the hero never flashes empty white while WebGL boots. */
-    background:
-      radial-gradient(
-        ellipse 80% 55% at 50% 0%,
-        color-mix(in srgb, var(--fluid-stop-a, #7c5cff) 28%, transparent),
-        transparent 70%
-      ),
-      radial-gradient(
-        ellipse 60% 45% at 85% 20%,
-        color-mix(in srgb, var(--fluid-stop-b, #d6549e) 22%, transparent),
-        transparent 65%
-      ),
-      radial-gradient(
-        ellipse 55% 40% at 15% 30%,
-        color-mix(in srgb, var(--fluid-stop-c, #f0885f) 18%, transparent),
-        transparent 60%
-      );
-
-    canvas {
-      display: block;
-
-      inline-size: 100%;
-      block-size: 100%;
-
-      opacity: 0;
-
-      transition: opacity 700ms ease;
-    }
-
-    &[data-ready] canvas {
-      opacity: 1;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      canvas {
-        transition-duration: 0.01ms;
-      }
-    }
-  ` }));
+const styles = {
+	canvas: {
+		kmkexE: "lblt59hw",
+		kZKoxP: "lb5yr21d",
+		k1xSpc: "lb1lliihq",
+		kzqmXN: "lbh8yej3",
+		kSiTet: "lbg01cxk",
+		kIyJzY: "lbsagj69",
+		$$css: true
+	},
+	canvasReady: {
+		kSiTet: "lb1hc1fzr",
+		$$css: true
+	},
+	root: {
+		kpwlN0: "lb10a8y8t",
+		kKwaWg: "lb1fr0wrz",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1ja2u2z",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/FluidGradient/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    /* Soft CSS fallback so the hero never flashes empty white while WebGL boots. */\n    background:\n      radial-gradient(\n        ellipse 80% 55% at 50% 0%,\n        color-mix(in srgb, var(--fluid-stop-a, #7c5cff) 28%, transparent),\n        transparent 70%\n      ),\n      radial-gradient(\n        ellipse 60% 45% at 85% 20%,\n        color-mix(in srgb, var(--fluid-stop-b, #d6549e) 22%, transparent),\n        transparent 65%\n      ),\n      radial-gradient(\n        ellipse 55% 40% at 15% 30%,\n        color-mix(in srgb, var(--fluid-stop-c, #f0885f) 18%, transparent),\n        transparent 60%\n      );\n\n    canvas {\n      display: block;\n\n      inline-size: 100%;\n      block-size: 100%;\n\n      opacity: 0;\n\n      transition: opacity 700ms ease;\n    }\n\n    &[data-ready] canvas {\n      opacity: 1;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      canvas {\n        transition-duration: 0.01ms;\n      }\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,WAAW,EACrD,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8CX,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/FluidGradient/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  canvas: {\n    transition: 'opacity 700ms ease',\n    blockSize: '100%',\n    display: 'block',\n    inlineSize: '100%',\n    opacity: 0,\n    transitionDuration: { 'default': null, '@media (prefers-reduced-motion: reduce)': '0.01ms' },\n  },\n  canvasReady: {\n    opacity: 1,\n  },\n  root: {\n    inset: 0,\n    /* Soft CSS fallback so the hero never flashes empty white while WebGL boots. */\n    backgroundImage:\n      'radial-gradient(ellipse 80% 55% at 50% 0%, color-mix(in srgb, var(--fluid-stop-a, #7c5cff) 28%, transparent), transparent 70%), radial-gradient(ellipse 60% 45% at 85% 20%, color-mix(in srgb, var(--fluid-stop-b, #d6549e) 22%, transparent), transparent 65%), radial-gradient(ellipse 55% 40% at 15% 30%, color-mix(in srgb, var(--fluid-stop-c, #f0885f) 18%, transparent), transparent 60%)',\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,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -1,7 +1,7 @@
 import { DivProps } from "../../types/index.mjs";
 import { LandingPalette } from "../landingTokens.mjs";
 //#region src/awesome/FluidGradient/type.d.ts
-interface FluidGradientProps extends DivProps {
+export interface FluidGradientProps extends DivProps {
   /**
    * Three color stops blended by the shader. Defaults to the landing palette for the current theme.
    */
@@ -18,5 +18,4 @@ interface FluidGradientProps extends DivProps {
   speed?: number;
 }
 //#endregion
-export { FluidGradientProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/Giscus/style.mjs

@@ -1,6 +1,6 @@
+import { useTheme } from "../../styles/theme/scope.mjs";
 import { safeReadableColor } from "../../utils/safeReadableColor.mjs";
 import { useMemo } from "react";
-import { css, useTheme } from "antd-style";
 import { rgba } from "polished";
 //#region src/awesome/Giscus/style.ts
 const useStyles = () => {
@@ -14,7 +14,7 @@ const useStyles = () => {
 	const colorBlue = theme.colorInfo;
 	const loaderContainer = theme.isDarkMode ? "https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg" : "https://github.com/images/modules/pulls/progressive-disclosure-line.svg";
 	const loadingImage = theme.isDarkMode ? "https://github.githubassets.com/images/mona-loading-dark.gif" : "https://github.githubassets.com/images/mona-loading-default.gif";
-	const { styles } = css`
+	const styles = `
     main {
       --color-prettylights-syntax-comment: ${colorTextTertiary};
       --color-prettylights-syntax-constant: ${colorGreen};

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Giscus/style.ts"],"sourcesContent":["import { css, useTheme } from 'antd-style';\nimport { rgba } from 'polished';\nimport { useMemo } from 'react';\n\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nexport const useStyles = () => {\n  const theme = useTheme();\n  const colorText = theme.colorText;\n  const colorTextSecondary = theme.colorTextSecondary;\n  const colorTextTertiary = theme.colorTextTertiary;\n  const colorRed = theme.colorError;\n  const colorOrange = theme.colorWarning;\n  const colorGreen = theme.colorSuccess;\n  const colorBlue = theme.colorInfo;\n  const loaderContainer = theme.isDarkMode\n    ? 'https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg'\n    : 'https://github.com/images/modules/pulls/progressive-disclosure-line.svg';\n  const loadingImage = theme.isDarkMode\n    ? 'https://github.githubassets.com/images/mona-loading-dark.gif'\n    : 'https://github.githubassets.com/images/mona-loading-default.gif';\n  const { styles } = css`\n    main {\n      --color-prettylights-syntax-comment: ${colorTextTertiary};\n      --color-prettylights-syntax-constant: ${colorGreen};\n      --color-prettylights-syntax-entity: ${colorOrange};\n      --color-prettylights-syntax-storage-modifier-import: ${colorRed};\n      --color-prettylights-syntax-entity-tag: ${colorBlue};\n      --color-prettylights-syntax-keyword: ${colorBlue};\n      --color-prettylights-syntax-string: ${colorGreen};\n      --color-prettylights-syntax-variable: ${colorRed};\n      --color-prettylights-syntax-brackethighlighter-unmatched: ${colorRed};\n      --color-prettylights-syntax-invalid-illegal-text: ${colorTextSecondary};\n      --color-prettylights-syntax-invalid-illegal-bg: ${rgba(colorRed, 0.4)};\n      --color-prettylights-syntax-carriage-return-text: ${colorTextSecondary};\n      --color-prettylights-syntax-carriage-return-bg: ${rgba(colorRed, 0.6)};\n      --color-prettylights-syntax-string-regexp: ${colorGreen};\n      --color-prettylights-syntax-markup-list: ${colorOrange};\n      --color-prettylights-syntax-markup-heading: ${colorBlue};\n      --color-prettylights-syntax-markup-italic: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-bold: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-deleted-text: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-deleted-bg: ${rgba(colorRed, 0.2)};\n      --color-prettylights-syntax-markup-inserted-text: ${colorGreen};\n      --color-prettylights-syntax-markup-inserted-bg: ${rgba(colorGreen, 0.2)};\n      --color-prettylights-syntax-markup-changed-text: ${colorOrange};\n      --color-prettylights-syntax-markup-changed-bg: ${rgba(colorRed, 0.2)};\n      --color-prettylights-syntax-markup-ignored-text: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-ignored-bg: ${rgba(colorBlue, 0.2)};\n      --color-prettylights-syntax-meta-diff-range: ${colorOrange};\n      --color-prettylights-syntax-brackethighlighter-angle: ${colorTextSecondary};\n      --color-prettylights-syntax-sublimelinter-gutter-mark: ${colorTextTertiary};\n      --color-prettylights-syntax-constant-other-reference-link: ${colorBlue};\n      --color-btn-text: ${theme.colorText};\n      --color-btn-bg: ${theme.colorFillTertiary};\n      --color-btn-border: ${theme.colorBorderSecondary};\n      --color-btn-shadow: 0 0 transparent;\n      --color-btn-inset-shadow: 0 0 transparent;\n      --color-btn-hover-bg: ${theme.colorFillSecondary};\n      --color-btn-hover-border: ${theme.colorBorder};\n      --color-btn-active-bg: ${theme.colorFillSecondary};\n      --color-btn-active-border: ${theme.colorBorder};\n      --color-btn-selected-bg: ${theme.colorFillSecondary};\n      --color-btn-primary-text: ${safeReadableColor(theme.colorPrimary)};\n      --color-btn-primary-bg: ${theme.colorPrimary};\n      --color-btn-primary-border: ${theme.colorPrimaryBorder};\n      --color-btn-primary-shadow: 0 0 transparent;\n      --color-btn-primary-inset-shadow: 0 0 transparent;\n      --color-btn-primary-hover-bg: ${theme.colorPrimaryHover};\n      --color-btn-primary-hover-border: ${theme.colorPrimaryBorderHover};\n      --color-btn-primary-selected-bg: ${theme.colorPrimaryActive};\n      --color-btn-primary-selected-shadow: 0 0 transparent;\n      --color-btn-primary-disabled-text: color-mix(\n        in srgb,\n        ${safeReadableColor(theme.colorPrimary)} 50%,\n        transparent\n      );\n      --color-btn-primary-disabled-bg: ${rgba(theme.colorPrimary, 0.5)};\n      --color-btn-primary-disabled-border: ${rgba(theme.colorPrimaryBorder, 0.5)};\n      --color-action-list-item-default-hover-bg: ${theme.colorFillQuaternary};\n      --color-segmented-control-bg: ${theme.colorFillTertiary};\n      --color-segmented-control-button-bg: transparent;\n      --color-segmented-control-button-selected-border: ${theme.colorBorder};\n      --color-fg-default: ${theme.colorText};\n      --color-fg-muted: ${theme.colorTextSecondary};\n      --color-fg-subtle: ${theme.colorTextQuaternary};\n      --color-canvas-default: transparent;\n      --color-canvas-overlay: ${theme.colorBgElevated};\n      --color-canvas-inset: transparent;\n      --color-canvas-subtle: ${theme.colorFillQuaternary};\n      --color-border-default: ${theme.colorBorder};\n      --color-border-muted: ${theme.colorBorderSecondary};\n      --color-neutral-muted: ${theme.colorFillQuaternary};\n      --color-neutral-subtle: ${theme.colorFillTertiary};\n      --color-accent-fg: ${theme.colorInfo};\n      --color-accent-emphasis: ${theme.colorInfoBorderHover};\n      --color-accent-muted: ${theme.colorInfoBorder};\n      --color-accent-subtle: ${theme.colorInfoBg};\n      --color-success-fg: ${theme.colorSuccess};\n      --color-attention-fg: ${theme.colorWarning};\n      --color-attention-muted: ${theme.colorWarningBorder};\n      --color-attention-subtle: ${theme.colorWarningBg};\n      --color-danger-fg: ${theme.colorError};\n      --color-danger-muted: ${theme.colorErrorBorder};\n      --color-danger-subtle: ${theme.colorErrorBg};\n      --color-primer-shadow-inset: 0 0 transparent;\n      --color-scale-gray-7: ${theme.colorBgContainer};\n      --color-scale-blue-8: ${theme.colorInfoBg};\n      --color-social-reaction-bg-hover: ${theme.colorFillSecondary};\n      --color-social-reaction-bg-reacted-hover: ${theme.colorInfoBgHover};\n\n      .markdown pre {\n        color: ${colorText};\n      }\n\n      .pagination-loader-container {\n        background-image: url(${loaderContainer});\n      }\n\n      .gsc-pagination-button {\n        background-color: var(--color-btn-bg);\n      }\n\n      .gsc-reactions-popover {\n        width: 170px;\n\n        > .m-2 {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 8px;\n        }\n      }\n\n      .gsc-emoji-button.has-reacted {\n        border-color: ${theme.colorInfoBorderHover};\n        border-radius: ${theme.borderRadius}px;\n      }\n\n      .gsc-loading-image {\n        background-image: url(${loadingImage});\n      }\n    }\n  `;\n\n  return useMemo(() => `data:text/css;base64,${btoa(styles)}`, [styles]);\n};\n\nexport const formatLang = (lang: string) => {\n  if (['zh_CN', 'zh_TW'].includes(lang)) {\n    return lang.replace('_', '-');\n  } else if (lang === 'zh_HK') {\n    return 'zh-TW';\n  } else {\n    return lang.split('_')[0];\n  }\n};\n"],"mappings":";;;;;AAMA,MAAa,kBAAkB;CAC7B,MAAM,QAAQ,SAAS;CACvB,MAAM,YAAY,MAAM;CACxB,MAAM,qBAAqB,MAAM;CACjC,MAAM,oBAAoB,MAAM;CAChC,MAAM,WAAW,MAAM;CACvB,MAAM,cAAc,MAAM;CAC1B,MAAM,aAAa,MAAM;CACzB,MAAM,YAAY,MAAM;CACxB,MAAM,kBAAkB,MAAM,aAC1B,iFACA;CACJ,MAAM,eAAe,MAAM,aACvB,iEACA;CACJ,MAAM,EAAE,WAAW,GAAG;;6CAEqB,kBAAkB;8CACjB,WAAW;4CACb,YAAY;6DACK,SAAS;gDACtB,UAAU;6CACb,UAAU;4CACX,WAAW;8CACT,SAAS;kEACW,SAAS;0DACjB,mBAAmB;wDACrB,KAAK,UAAU,EAAG,EAAE;0DAClB,mBAAmB;wDACrB,KAAK,UAAU,EAAG,EAAE;mDACzB,WAAW;iDACb,YAAY;oDACT,UAAU;mDACX,mBAAmB;iDACrB,mBAAmB;yDACX,mBAAmB;uDACrB,KAAK,UAAU,EAAG,EAAE;0DACjB,WAAW;wDACb,KAAK,YAAY,EAAG,EAAE;yDACrB,YAAY;uDACd,KAAK,UAAU,EAAG,EAAE;yDAClB,mBAAmB;uDACrB,KAAK,WAAW,EAAG,EAAE;qDACvB,YAAY;8DACH,mBAAmB;+DAClB,kBAAkB;mEACd,UAAU;0BACnD,MAAM,UAAU;wBAClB,MAAM,kBAAkB;4BACpB,MAAM,qBAAqB;;;8BAGzB,MAAM,mBAAmB;kCACrB,MAAM,YAAY;+BACrB,MAAM,mBAAmB;mCACrB,MAAM,YAAY;iCACpB,MAAM,mBAAmB;kCACxB,kBAAkB,MAAM,YAAY,EAAE;gCACxC,MAAM,aAAa;oCACf,MAAM,mBAAmB;;;sCAGvB,MAAM,kBAAkB;0CACpB,MAAM,wBAAwB;yCAC/B,MAAM,mBAAmB;;;;UAIxD,kBAAkB,MAAM,YAAY,EAAE;;;yCAGP,KAAK,MAAM,cAAc,EAAG,EAAE;6CAC1B,KAAK,MAAM,oBAAoB,EAAG,EAAE;mDAC9B,MAAM,oBAAoB;sCACvC,MAAM,kBAAkB;;0DAEJ,MAAM,YAAY;4BAChD,MAAM,UAAU;0BAClB,MAAM,mBAAmB;2BACxB,MAAM,oBAAoB;;gCAErB,MAAM,gBAAgB;;+BAEvB,MAAM,oBAAoB;gCACzB,MAAM,YAAY;8BACpB,MAAM,qBAAqB;+BAC1B,MAAM,oBAAoB;gCACzB,MAAM,kBAAkB;2BAC7B,MAAM,UAAU;iCACV,MAAM,qBAAqB;8BAC9B,MAAM,gBAAgB;+BACrB,MAAM,YAAY;4BACrB,MAAM,aAAa;8BACjB,MAAM,aAAa;iCAChB,MAAM,mBAAmB;kCACxB,MAAM,eAAe;2BAC5B,MAAM,WAAW;8BACd,MAAM,iBAAiB;+BACtB,MAAM,aAAa;;8BAEpB,MAAM,iBAAiB;8BACvB,MAAM,YAAY;0CACN,MAAM,mBAAmB;kDACjB,MAAM,iBAAiB;;;iBAGxD,UAAU;;;;gCAIK,gBAAgB;;;;;;;;;;;;;;;;;;wBAkBxB,MAAM,qBAAqB;yBAC1B,MAAM,aAAa;;;;gCAIZ,aAAa;;;;CAK3C,OAAO,cAAc,wBAAwB,KAAK,MAAM,KAAK,CAAC,MAAM,CAAC;AACvE;AAEA,MAAa,cAAc,SAAiB;CAC1C,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,IAAI,GAClC,OAAO,KAAK,QAAQ,KAAK,GAAG;MACvB,IAAI,SAAS,SAClB,OAAO;MAEP,OAAO,KAAK,MAAM,GAAG,CAAC,CAAC;AAE3B"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Giscus/style.ts"],"sourcesContent":["import { rgba } from 'polished';\nimport { useMemo } from 'react';\n\nimport { useTheme } from '@/styles/theme/scope';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nexport const useStyles = () => {\n  const theme = useTheme();\n  const colorText = theme.colorText;\n  const colorTextSecondary = theme.colorTextSecondary;\n  const colorTextTertiary = theme.colorTextTertiary;\n  const colorRed = theme.colorError;\n  const colorOrange = theme.colorWarning;\n  const colorGreen = theme.colorSuccess;\n  const colorBlue = theme.colorInfo;\n  const loaderContainer = theme.isDarkMode\n    ? 'https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg'\n    : 'https://github.com/images/modules/pulls/progressive-disclosure-line.svg';\n  const loadingImage = theme.isDarkMode\n    ? 'https://github.githubassets.com/images/mona-loading-dark.gif'\n    : 'https://github.githubassets.com/images/mona-loading-default.gif';\n  const styles = `\n    main {\n      --color-prettylights-syntax-comment: ${colorTextTertiary};\n      --color-prettylights-syntax-constant: ${colorGreen};\n      --color-prettylights-syntax-entity: ${colorOrange};\n      --color-prettylights-syntax-storage-modifier-import: ${colorRed};\n      --color-prettylights-syntax-entity-tag: ${colorBlue};\n      --color-prettylights-syntax-keyword: ${colorBlue};\n      --color-prettylights-syntax-string: ${colorGreen};\n      --color-prettylights-syntax-variable: ${colorRed};\n      --color-prettylights-syntax-brackethighlighter-unmatched: ${colorRed};\n      --color-prettylights-syntax-invalid-illegal-text: ${colorTextSecondary};\n      --color-prettylights-syntax-invalid-illegal-bg: ${rgba(colorRed, 0.4)};\n      --color-prettylights-syntax-carriage-return-text: ${colorTextSecondary};\n      --color-prettylights-syntax-carriage-return-bg: ${rgba(colorRed, 0.6)};\n      --color-prettylights-syntax-string-regexp: ${colorGreen};\n      --color-prettylights-syntax-markup-list: ${colorOrange};\n      --color-prettylights-syntax-markup-heading: ${colorBlue};\n      --color-prettylights-syntax-markup-italic: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-bold: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-deleted-text: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-deleted-bg: ${rgba(colorRed, 0.2)};\n      --color-prettylights-syntax-markup-inserted-text: ${colorGreen};\n      --color-prettylights-syntax-markup-inserted-bg: ${rgba(colorGreen, 0.2)};\n      --color-prettylights-syntax-markup-changed-text: ${colorOrange};\n      --color-prettylights-syntax-markup-changed-bg: ${rgba(colorRed, 0.2)};\n      --color-prettylights-syntax-markup-ignored-text: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-ignored-bg: ${rgba(colorBlue, 0.2)};\n      --color-prettylights-syntax-meta-diff-range: ${colorOrange};\n      --color-prettylights-syntax-brackethighlighter-angle: ${colorTextSecondary};\n      --color-prettylights-syntax-sublimelinter-gutter-mark: ${colorTextTertiary};\n      --color-prettylights-syntax-constant-other-reference-link: ${colorBlue};\n      --color-btn-text: ${theme.colorText};\n      --color-btn-bg: ${theme.colorFillTertiary};\n      --color-btn-border: ${theme.colorBorderSecondary};\n      --color-btn-shadow: 0 0 transparent;\n      --color-btn-inset-shadow: 0 0 transparent;\n      --color-btn-hover-bg: ${theme.colorFillSecondary};\n      --color-btn-hover-border: ${theme.colorBorder};\n      --color-btn-active-bg: ${theme.colorFillSecondary};\n      --color-btn-active-border: ${theme.colorBorder};\n      --color-btn-selected-bg: ${theme.colorFillSecondary};\n      --color-btn-primary-text: ${safeReadableColor(theme.colorPrimary)};\n      --color-btn-primary-bg: ${theme.colorPrimary};\n      --color-btn-primary-border: ${theme.colorPrimaryBorder};\n      --color-btn-primary-shadow: 0 0 transparent;\n      --color-btn-primary-inset-shadow: 0 0 transparent;\n      --color-btn-primary-hover-bg: ${theme.colorPrimaryHover};\n      --color-btn-primary-hover-border: ${theme.colorPrimaryBorderHover};\n      --color-btn-primary-selected-bg: ${theme.colorPrimaryActive};\n      --color-btn-primary-selected-shadow: 0 0 transparent;\n      --color-btn-primary-disabled-text: color-mix(\n        in srgb,\n        ${safeReadableColor(theme.colorPrimary)} 50%,\n        transparent\n      );\n      --color-btn-primary-disabled-bg: ${rgba(theme.colorPrimary, 0.5)};\n      --color-btn-primary-disabled-border: ${rgba(theme.colorPrimaryBorder, 0.5)};\n      --color-action-list-item-default-hover-bg: ${theme.colorFillQuaternary};\n      --color-segmented-control-bg: ${theme.colorFillTertiary};\n      --color-segmented-control-button-bg: transparent;\n      --color-segmented-control-button-selected-border: ${theme.colorBorder};\n      --color-fg-default: ${theme.colorText};\n      --color-fg-muted: ${theme.colorTextSecondary};\n      --color-fg-subtle: ${theme.colorTextQuaternary};\n      --color-canvas-default: transparent;\n      --color-canvas-overlay: ${theme.colorBgElevated};\n      --color-canvas-inset: transparent;\n      --color-canvas-subtle: ${theme.colorFillQuaternary};\n      --color-border-default: ${theme.colorBorder};\n      --color-border-muted: ${theme.colorBorderSecondary};\n      --color-neutral-muted: ${theme.colorFillQuaternary};\n      --color-neutral-subtle: ${theme.colorFillTertiary};\n      --color-accent-fg: ${theme.colorInfo};\n      --color-accent-emphasis: ${theme.colorInfoBorderHover};\n      --color-accent-muted: ${theme.colorInfoBorder};\n      --color-accent-subtle: ${theme.colorInfoBg};\n      --color-success-fg: ${theme.colorSuccess};\n      --color-attention-fg: ${theme.colorWarning};\n      --color-attention-muted: ${theme.colorWarningBorder};\n      --color-attention-subtle: ${theme.colorWarningBg};\n      --color-danger-fg: ${theme.colorError};\n      --color-danger-muted: ${theme.colorErrorBorder};\n      --color-danger-subtle: ${theme.colorErrorBg};\n      --color-primer-shadow-inset: 0 0 transparent;\n      --color-scale-gray-7: ${theme.colorBgContainer};\n      --color-scale-blue-8: ${theme.colorInfoBg};\n      --color-social-reaction-bg-hover: ${theme.colorFillSecondary};\n      --color-social-reaction-bg-reacted-hover: ${theme.colorInfoBgHover};\n\n      .markdown pre {\n        color: ${colorText};\n      }\n\n      .pagination-loader-container {\n        background-image: url(${loaderContainer});\n      }\n\n      .gsc-pagination-button {\n        background-color: var(--color-btn-bg);\n      }\n\n      .gsc-reactions-popover {\n        width: 170px;\n\n        > .m-2 {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 8px;\n        }\n      }\n\n      .gsc-emoji-button.has-reacted {\n        border-color: ${theme.colorInfoBorderHover};\n        border-radius: ${theme.borderRadius}px;\n      }\n\n      .gsc-loading-image {\n        background-image: url(${loadingImage});\n      }\n    }\n  `;\n\n  return useMemo(() => `data:text/css;base64,${btoa(styles)}`, [styles]);\n};\n\nexport const formatLang = (lang: string) => {\n  if (['zh_CN', 'zh_TW'].includes(lang)) {\n    return lang.replace('_', '-');\n  } else if (lang === 'zh_HK') {\n    return 'zh-TW';\n  } else {\n    return lang.split('_')[0];\n  }\n};\n"],"mappings":";;;;;AAMA,MAAa,kBAAkB;CAC7B,MAAM,QAAQ,SAAS;CACvB,MAAM,YAAY,MAAM;CACxB,MAAM,qBAAqB,MAAM;CACjC,MAAM,oBAAoB,MAAM;CAChC,MAAM,WAAW,MAAM;CACvB,MAAM,cAAc,MAAM;CAC1B,MAAM,aAAa,MAAM;CACzB,MAAM,YAAY,MAAM;CACxB,MAAM,kBAAkB,MAAM,aAC1B,iFACA;CACJ,MAAM,eAAe,MAAM,aACvB,iEACA;CACJ,MAAM,SAAS;;6CAE4B,kBAAkB;8CACjB,WAAW;4CACb,YAAY;6DACK,SAAS;gDACtB,UAAU;6CACb,UAAU;4CACX,WAAW;8CACT,SAAS;kEACW,SAAS;0DACjB,mBAAmB;wDACrB,KAAK,UAAU,EAAG,EAAE;0DAClB,mBAAmB;wDACrB,KAAK,UAAU,EAAG,EAAE;mDACzB,WAAW;iDACb,YAAY;oDACT,UAAU;mDACX,mBAAmB;iDACrB,mBAAmB;yDACX,mBAAmB;uDACrB,KAAK,UAAU,EAAG,EAAE;0DACjB,WAAW;wDACb,KAAK,YAAY,EAAG,EAAE;yDACrB,YAAY;uDACd,KAAK,UAAU,EAAG,EAAE;yDAClB,mBAAmB;uDACrB,KAAK,WAAW,EAAG,EAAE;qDACvB,YAAY;8DACH,mBAAmB;+DAClB,kBAAkB;mEACd,UAAU;0BACnD,MAAM,UAAU;wBAClB,MAAM,kBAAkB;4BACpB,MAAM,qBAAqB;;;8BAGzB,MAAM,mBAAmB;kCACrB,MAAM,YAAY;+BACrB,MAAM,mBAAmB;mCACrB,MAAM,YAAY;iCACpB,MAAM,mBAAmB;kCACxB,kBAAkB,MAAM,YAAY,EAAE;gCACxC,MAAM,aAAa;oCACf,MAAM,mBAAmB;;;sCAGvB,MAAM,kBAAkB;0CACpB,MAAM,wBAAwB;yCAC/B,MAAM,mBAAmB;;;;UAIxD,kBAAkB,MAAM,YAAY,EAAE;;;yCAGP,KAAK,MAAM,cAAc,EAAG,EAAE;6CAC1B,KAAK,MAAM,oBAAoB,EAAG,EAAE;mDAC9B,MAAM,oBAAoB;sCACvC,MAAM,kBAAkB;;0DAEJ,MAAM,YAAY;4BAChD,MAAM,UAAU;0BAClB,MAAM,mBAAmB;2BACxB,MAAM,oBAAoB;;gCAErB,MAAM,gBAAgB;;+BAEvB,MAAM,oBAAoB;gCACzB,MAAM,YAAY;8BACpB,MAAM,qBAAqB;+BAC1B,MAAM,oBAAoB;gCACzB,MAAM,kBAAkB;2BAC7B,MAAM,UAAU;iCACV,MAAM,qBAAqB;8BAC9B,MAAM,gBAAgB;+BACrB,MAAM,YAAY;4BACrB,MAAM,aAAa;8BACjB,MAAM,aAAa;iCAChB,MAAM,mBAAmB;kCACxB,MAAM,eAAe;2BAC5B,MAAM,WAAW;8BACd,MAAM,iBAAiB;+BACtB,MAAM,aAAa;;8BAEpB,MAAM,iBAAiB;8BACvB,MAAM,YAAY;0CACN,MAAM,mBAAmB;kDACjB,MAAM,iBAAiB;;;iBAGxD,UAAU;;;;gCAIK,gBAAgB;;;;;;;;;;;;;;;;;;wBAkBxB,MAAM,qBAAqB;yBAC1B,MAAM,aAAa;;;;gCAIZ,aAAa;;;;CAK3C,OAAO,cAAc,wBAAwB,KAAK,MAAM,KAAK,CAAC,MAAM,CAAC;AACvE;AAEA,MAAa,cAAc,SAAiB;CAC1C,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,IAAI,GAClC,OAAO,KAAK,QAAQ,KAAK,GAAG;MACvB,IAAI,SAAS,SAClB,OAAO;MAEP,OAAO,KAAK,MAAM,GAAG,CAAC,CAAC;AAE3B"}

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

@@ -1,10 +1,9 @@
 import { CSSProperties, ComponentProps } from "react";
 import GiscusComponent from "@giscus/react";
 //#region src/awesome/Giscus/type.d.ts
-interface GiscusProps extends ComponentProps<typeof GiscusComponent> {
+export interface GiscusProps extends ComponentProps<typeof GiscusComponent> {
   className?: string;
   style?: CSSProperties;
 }
 //#endregion
-export { GiscusProps };
 //# sourceMappingURL=type.d.mts.map

package/es/awesome/GradientButton/GradientButton.mjs

@@ -1,9 +1,11 @@
 "use client";
-import Button from "../../base-ui/Button/Button.mjs";
+import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
+import { ButtonImpl } from "../../Button/Button.mjs";
+import { useThemeMode } from "../../styles/theme/scope.mjs";
 import { styles } from "./style.mjs";
 import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cssVar, cx, useThemeMode } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/GradientButton/GradientButton.tsx
 const GradientButton = memo(({ glow = true, children, className, size, disabled, style, ...rest }) => {
 	const { isDarkMode } = useThemeMode();
@@ -21,17 +23,18 @@ const GradientButton = memo(({ glow = true, children, className, size, disabled,
 		}
 		return { "--gradient-button-border-radius": borderRadius };
 	}, [size, disabled]);
-	return /* @__PURE__ */ jsxs(Button, {
+	return /* @__PURE__ */ jsxs(ButtonImpl, {
+		className,
 		disabled,
 		size,
 		type: disabled ? void 0 : "text",
-		className: cx(!disabled && (isDarkMode ? styles.buttonDark : styles.buttonLight), className),
+		xstyle: !disabled && [styles.button, isDarkMode ? styles.buttonDark : styles.buttonLight],
 		style: {
 			...cssVariables,
 			...style
 		},
 		...rest,
-		children: [glow && /* @__PURE__ */ jsx("div", { className: styles.glow }), children]
+		children: [glow && /* @__PURE__ */ jsx("div", { ...stylex.props(styles.glow) }), children]
 	});
 });
 GradientButton.displayName = "GradientButton";

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"}