@lobehub/ui 6.0.0-beta.4 → 6.0.0-beta.6

package/es/awesome/Giscus/style.mjs

@@ -1,7 +1,7 @@
+import { withAlpha } from "../../utils/colorMath.mjs";
 import { useTheme } from "../../styles/theme/scope.mjs";
 import { safeReadableColor } from "../../utils/safeReadableColor.mjs";
 import { useMemo } from "react";
-import { rgba } from "polished";
 //#region src/awesome/Giscus/style.ts
 const useStyles = () => {
 	const theme = useTheme();
@@ -26,22 +26,22 @@ const useStyles = () => {
       --color-prettylights-syntax-variable: ${colorRed};
       --color-prettylights-syntax-brackethighlighter-unmatched: ${colorRed};
       --color-prettylights-syntax-invalid-illegal-text: ${colorTextSecondary};
-      --color-prettylights-syntax-invalid-illegal-bg: ${rgba(colorRed, .4)};
+      --color-prettylights-syntax-invalid-illegal-bg: ${withAlpha(colorRed, .4)};
       --color-prettylights-syntax-carriage-return-text: ${colorTextSecondary};
-      --color-prettylights-syntax-carriage-return-bg: ${rgba(colorRed, .6)};
+      --color-prettylights-syntax-carriage-return-bg: ${withAlpha(colorRed, .6)};
       --color-prettylights-syntax-string-regexp: ${colorGreen};
       --color-prettylights-syntax-markup-list: ${colorOrange};
       --color-prettylights-syntax-markup-heading: ${colorBlue};
       --color-prettylights-syntax-markup-italic: ${colorTextSecondary};
       --color-prettylights-syntax-markup-bold: ${colorTextSecondary};
       --color-prettylights-syntax-markup-deleted-text: ${colorTextSecondary};
-      --color-prettylights-syntax-markup-deleted-bg: ${rgba(colorRed, .2)};
+      --color-prettylights-syntax-markup-deleted-bg: ${withAlpha(colorRed, .2)};
       --color-prettylights-syntax-markup-inserted-text: ${colorGreen};
-      --color-prettylights-syntax-markup-inserted-bg: ${rgba(colorGreen, .2)};
+      --color-prettylights-syntax-markup-inserted-bg: ${withAlpha(colorGreen, .2)};
       --color-prettylights-syntax-markup-changed-text: ${colorOrange};
-      --color-prettylights-syntax-markup-changed-bg: ${rgba(colorRed, .2)};
+      --color-prettylights-syntax-markup-changed-bg: ${withAlpha(colorRed, .2)};
       --color-prettylights-syntax-markup-ignored-text: ${colorTextSecondary};
-      --color-prettylights-syntax-markup-ignored-bg: ${rgba(colorBlue, .2)};
+      --color-prettylights-syntax-markup-ignored-bg: ${withAlpha(colorBlue, .2)};
       --color-prettylights-syntax-meta-diff-range: ${colorOrange};
       --color-prettylights-syntax-brackethighlighter-angle: ${colorTextSecondary};
       --color-prettylights-syntax-sublimelinter-gutter-mark: ${colorTextTertiary};
@@ -70,8 +70,8 @@ const useStyles = () => {
         ${safeReadableColor(theme.colorPrimary)} 50%,
         transparent
       );
-      --color-btn-primary-disabled-bg: ${rgba(theme.colorPrimary, .5)};
-      --color-btn-primary-disabled-border: ${rgba(theme.colorPrimaryBorder, .5)};
+      --color-btn-primary-disabled-bg: ${withAlpha(theme.colorPrimary, .5)};
+      --color-btn-primary-disabled-border: ${withAlpha(theme.colorPrimaryBorder, .5)};
       --color-action-list-item-default-hover-bg: ${theme.colorFillQuaternary};
       --color-segmented-control-bg: ${theme.colorFillTertiary};
       --color-segmented-control-button-bg: transparent;

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Giscus/style.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useTheme } from '@/styles/theme/scope';\nimport { withAlpha } from '@/utils/colorMath';\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: ${withAlpha(colorRed, 0.4)};\n      --color-prettylights-syntax-carriage-return-text: ${colorTextSecondary};\n      --color-prettylights-syntax-carriage-return-bg: ${withAlpha(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: ${withAlpha(colorRed, 0.2)};\n      --color-prettylights-syntax-markup-inserted-text: ${colorGreen};\n      --color-prettylights-syntax-markup-inserted-bg: ${withAlpha(colorGreen, 0.2)};\n      --color-prettylights-syntax-markup-changed-text: ${colorOrange};\n      --color-prettylights-syntax-markup-changed-bg: ${withAlpha(colorRed, 0.2)};\n      --color-prettylights-syntax-markup-ignored-text: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-ignored-bg: ${withAlpha(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: ${withAlpha(theme.colorPrimary, 0.5)};\n      --color-btn-primary-disabled-border: ${withAlpha(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,UAAU,UAAU,EAAG,EAAE;0DACvB,mBAAmB;wDACrB,UAAU,UAAU,EAAG,EAAE;mDAC9B,WAAW;iDACb,YAAY;oDACT,UAAU;mDACX,mBAAmB;iDACrB,mBAAmB;yDACX,mBAAmB;uDACrB,UAAU,UAAU,EAAG,EAAE;0DACtB,WAAW;wDACb,UAAU,YAAY,EAAG,EAAE;yDAC1B,YAAY;uDACd,UAAU,UAAU,EAAG,EAAE;yDACvB,mBAAmB;uDACrB,UAAU,WAAW,EAAG,EAAE;qDAC5B,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,UAAU,MAAM,cAAc,EAAG,EAAE;6CAC/B,UAAU,MAAM,oBAAoB,EAAG,EAAE;mDACnC,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/Grainient/Grainient.d.mts

@@ -0,0 +1,11 @@
+import { GrainientProps } from "./type.mjs";
+//#region src/awesome/Grainient/Grainient.d.ts
+/**
+ * Animated grainy gradient (WebGL2, no extra dependency). Fills its nearest positioned ancestor,
+ * 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.
+ */
+declare const Grainient: import("react").NamedExoticComponent<GrainientProps>;
+//#endregion
+export { Grainient as default };
+//# sourceMappingURL=Grainient.d.mts.map

package/es/awesome/Grainient/Grainient.mjs

@@ -0,0 +1,314 @@
+"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 * as stylex from "@stylexjs/stylex";
+//#region src/awesome/Grainient/Grainient.tsx
+const VERTEX_SHADER = `#version 300 es
+in vec2 position;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+uniform vec2 iResolution;
+uniform float iTime;
+uniform float uTimeSpeed;
+uniform float uColorBalance;
+uniform float uWarpStrength;
+uniform float uWarpFrequency;
+uniform float uWarpSpeed;
+uniform float uWarpAmplitude;
+uniform float uBlendAngle;
+uniform float uBlendSoftness;
+uniform float uRotationAmount;
+uniform float uNoiseScale;
+uniform float uGrainAmount;
+uniform float uGrainScale;
+uniform float uGrainAnimated;
+uniform float uContrast;
+uniform float uGamma;
+uniform float uSaturation;
+uniform vec2 uCenterOffset;
+uniform float uZoom;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+uniform float uLightMode;
+out vec4 fragColor;
+#define S(a,b,t) smoothstep(a,b,t)
+mat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}
+vec2 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);}
+float 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;}
+void mainImage(out vec4 o, vec2 C){
+  float t=iTime*uTimeSpeed;
+  vec2 uv=C/iResolution.xy;
+  float ratio=iResolution.x/iResolution.y;
+  vec2 tuv=uv-0.5+uCenterOffset;
+  tuv/=max(uZoom,0.001);
+
+  float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);
+  tuv.y*=1.0/ratio;
+  tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));
+  tuv.y*=ratio;
+
+  float frequency=uWarpFrequency;
+  float ws=max(uWarpStrength,0.001);
+  float amplitude=uWarpAmplitude/ws;
+  float warpTime=t*uWarpSpeed;
+  tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;
+  tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);
+
+  vec3 colLav=uColor1;
+  vec3 colOrg=uColor2;
+  vec3 colDark=uColor3;
+  float b=uColorBalance;
+  float s=max(uBlendSoftness,0.0);
+  mat2 blendRot=Rot(radians(uBlendAngle));
+  float blendX=(tuv*blendRot).x;
+  float edge0=-0.3-b-s;
+  float edge1=0.2-b+s;
+  float v0=0.5-b+s;
+  float v1=-0.3-b-s;
+  vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));
+  vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));
+  vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));
+
+  vec2 grainUv=uv*max(uGrainScale,0.001);
+  if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);}
+  float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);
+  col+=(grain-0.5)*uGrainAmount;
+
+  col=(col-0.5)*uContrast+0.5;
+  float luma=dot(col,vec3(0.2126,0.7152,0.0722));
+  col=mix(vec3(luma),col,uSaturation);
+  col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));
+  col=clamp(col,0.0,1.0);
+  if(uLightMode>0.5){
+    float energy=max(max(col.r,col.g),col.b);
+    vec3 hue=col/max(energy,0.001);
+    float chroma=length(col-vec3(dot(col,vec3(0.333333))));
+    float coverage=clamp(0.12+chroma*1.15+energy*0.18,0.0,0.88);
+    col=mix(vec3(1.0),clamp(hue*0.58+col*0.18,0.0,1.0),coverage);
+  }
+
+  o=vec4(col,1.0);
+}
+void main(){
+  vec4 o=vec4(0.0);
+  mainImage(o,gl_FragCoord.xy);
+  fragColor=o;
+}
+`;
+const hexToRgb = (hex) => {
+	let value = hex.trim().replace("#", "");
+	if (value.length === 3) value = [...value].map((c) => c + c).join("");
+	const result = /^([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.exec(value);
+	if (!result) return [
+		1,
+		1,
+		1
+	];
+	return [
+		Number.parseInt(result[1], 16) / 255,
+		Number.parseInt(result[2], 16) / 255,
+		Number.parseInt(result[3], 16) / 255
+	];
+};
+const compile = (gl, type, source) => {
+	const shader = gl.createShader(type);
+	if (!shader) return null;
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+		gl.deleteShader(shader);
+		return null;
+	}
+	return shader;
+};
+/**
+* Animated grainy gradient (WebGL2, no extra dependency). Fills its nearest positioned ancestor,
+* 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, style, ...rest }) => {
+	const containerRef = useRef(null);
+	const drawRef = useRef(null);
+	const uniformsRef = useRef(null);
+	const { isDarkMode } = useThemeMode();
+	const light = lightMode === "auto" ? !isDarkMode : lightMode;
+	useEffect(() => {
+		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
+		});
+		if (!gl) return;
+		container.append(canvas);
+		const vs = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+		const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+		const program = gl.createProgram();
+		if (!vs || !fs || !program) {
+			canvas.remove();
+			return;
+		}
+		gl.attachShader(program, vs);
+		gl.attachShader(program, fs);
+		gl.linkProgram(program);
+		if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+			canvas.remove();
+			return;
+		}
+		gl.useProgram(program);
+		const buffer = gl.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+			-1,
+			-1,
+			3,
+			-1,
+			-1,
+			3
+		]), gl.STATIC_DRAW);
+		const position = gl.getAttribLocation(program, "position");
+		gl.enableVertexAttribArray(position);
+		gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+		const loc = (name) => gl.getUniformLocation(program, name);
+		const uTime = loc("iTime");
+		const uRes = loc("iResolution");
+		const started = performance.now();
+		const draw = () => {
+			gl.uniform1f(uTime, (performance.now() - started) * .001);
+			gl.drawArrays(gl.TRIANGLES, 0, 3);
+		};
+		drawRef.current = draw;
+		uniformsRef.current?.();
+		const setSize = () => {
+			const rect = container.getBoundingClientRect();
+			const dpr = Math.min(window.devicePixelRatio || 1, 2);
+			canvas.width = Math.max(1, Math.floor(rect.width * dpr));
+			canvas.height = Math.max(1, Math.floor(rect.height * dpr));
+			gl.viewport(0, 0, canvas.width, canvas.height);
+			gl.uniform2f(uRes, canvas.width, canvas.height);
+			draw();
+		};
+		const reducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+		let raf = 0;
+		let inView = true;
+		const loop = () => {
+			draw();
+			raf = requestAnimationFrame(loop);
+		};
+		const stop = () => {
+			if (raf) cancelAnimationFrame(raf);
+			raf = 0;
+		};
+		const sync = () => {
+			const run = inView && !document.hidden && !reducedMotion?.matches;
+			if (run && !raf) raf = requestAnimationFrame(loop);
+			if (!run) {
+				stop();
+				draw();
+			}
+		};
+		const resizeObserver = new ResizeObserver(setSize);
+		resizeObserver.observe(container);
+		const intersectionObserver = new IntersectionObserver(([entry]) => {
+			inView = entry.isIntersecting;
+			sync();
+		});
+		intersectionObserver.observe(container);
+		document.addEventListener("visibilitychange", sync);
+		reducedMotion?.addEventListener("change", sync);
+		setSize();
+		sync();
+		return () => {
+			stop();
+			resizeObserver.disconnect();
+			intersectionObserver.disconnect();
+			document.removeEventListener("visibilitychange", sync);
+			reducedMotion?.removeEventListener("change", sync);
+			drawRef.current = null;
+			gl.deleteBuffer(buffer);
+			gl.deleteProgram(program);
+			gl.deleteShader(vs);
+			gl.deleteShader(fs);
+			canvas.remove();
+		};
+	}, []);
+	useEffect(() => {
+		const apply = () => {
+			const gl = (containerRef.current?.querySelector("canvas"))?.getContext("webgl2");
+			if (!gl) return;
+			const program = gl.getParameter(gl.CURRENT_PROGRAM);
+			if (!program) return;
+			const loc = (name) => gl.getUniformLocation(program, name);
+			gl.uniform1f(loc("uTimeSpeed"), timeSpeed);
+			gl.uniform1f(loc("uColorBalance"), colorBalance);
+			gl.uniform1f(loc("uWarpStrength"), warpStrength);
+			gl.uniform1f(loc("uWarpFrequency"), warpFrequency);
+			gl.uniform1f(loc("uWarpSpeed"), warpSpeed);
+			gl.uniform1f(loc("uWarpAmplitude"), warpAmplitude);
+			gl.uniform1f(loc("uBlendAngle"), blendAngle);
+			gl.uniform1f(loc("uBlendSoftness"), blendSoftness);
+			gl.uniform1f(loc("uRotationAmount"), rotationAmount);
+			gl.uniform1f(loc("uNoiseScale"), noiseScale);
+			gl.uniform1f(loc("uGrainAmount"), grainAmount);
+			gl.uniform1f(loc("uGrainScale"), grainScale);
+			gl.uniform1f(loc("uContrast"), contrast);
+			gl.uniform1f(loc("uGamma"), gamma);
+			gl.uniform1f(loc("uSaturation"), saturation);
+			gl.uniform1f(loc("uZoom"), zoom);
+			gl.uniform1f(loc("uGrainAnimated"), grainAnimated ? 1 : 0);
+			gl.uniform1f(loc("uLightMode"), light ? 1 : 0);
+			gl.uniform2f(loc("uCenterOffset"), centerX, centerY);
+			gl.uniform3f(loc("uColor1"), ...hexToRgb(color1));
+			gl.uniform3f(loc("uColor2"), ...hexToRgb(color2));
+			gl.uniform3f(loc("uColor3"), ...hexToRgb(color3));
+			drawRef.current?.();
+		};
+		uniformsRef.current = apply;
+		apply();
+	}, [
+		timeSpeed,
+		colorBalance,
+		warpStrength,
+		warpFrequency,
+		warpSpeed,
+		warpAmplitude,
+		blendAngle,
+		blendSoftness,
+		rotationAmount,
+		noiseScale,
+		grainAmount,
+		grainScale,
+		contrast,
+		gamma,
+		saturation,
+		zoom,
+		centerX,
+		centerY,
+		color1,
+		color2,
+		color3,
+		grainAnimated,
+		light
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		ref: containerRef,
+		...rest,
+		...styleProps(styles.root, className, style)
+	});
+});
+Grainient.displayName = "Grainient";
+//#endregion
+export { Grainient as default, hexToRgb };
+
+//# sourceMappingURL=Grainient.mjs.map

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

@@ -0,0 +1 @@
+{"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/index.d.mts

@@ -0,0 +1,3 @@
+import { GrainientProps } from "./type.mjs";
+import Grainient from "./Grainient.mjs";
+export { type GrainientProps, Grainient as default };

package/es/awesome/Grainient/style.mjs

@@ -0,0 +1,23 @@
+//#region src/awesome/Grainient/style.ts
+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 };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,121 @@
+import { DivProps } from "../../types/index.mjs";
+//#region src/awesome/Grainient/type.d.ts
+export interface GrainientProps extends DivProps {
+  /**
+   * Angle of the color blend, in degrees.
+   * @default 0
+   */
+  blendAngle?: number;
+  /**
+   * Softness of the color edges.
+   * @default 0.05
+   */
+  blendSoftness?: number;
+  /**
+   * Horizontal offset of the field center.
+   * @default 0
+   */
+  centerX?: number;
+  /**
+   * Vertical offset of the field center.
+   * @default 0
+   */
+  centerY?: number;
+  /**
+   * First color stop, as hex.
+   * @default '#FF9FFC'
+   */
+  color1?: string;
+  /**
+   * Second color stop, as hex.
+   * @default '#5227FF'
+   */
+  color2?: string;
+  /**
+   * Third color stop, as hex.
+   * @default '#B497CF'
+   */
+  color3?: string;
+  /**
+   * Shifts the blend toward color1 (negative) or color3 (positive).
+   * @default 0
+   */
+  colorBalance?: number;
+  /**
+   * Output contrast.
+   * @default 1.5
+   */
+  contrast?: number;
+  /**
+   * Output gamma.
+   * @default 1
+   */
+  gamma?: number;
+  /**
+   * Film grain strength. 0 turns it off.
+   * @default 0.1
+   */
+  grainAmount?: number;
+  /**
+   * Animate the grain with time.
+   * @default false
+   */
+  grainAnimated?: boolean;
+  /**
+   * Film grain scale.
+   * @default 2
+   */
+  grainScale?: number;
+  /**
+   * Wash the colors toward white for a light surface. `'auto'` follows the current theme.
+   * @default false
+   */
+  lightMode?: boolean | 'auto';
+  /**
+   * Scale of the rotation noise.
+   * @default 2
+   */
+  noiseScale?: number;
+  /**
+   * Noise-driven rotation, in degrees.
+   * @default 500
+   */
+  rotationAmount?: number;
+  /**
+   * Output saturation.
+   * @default 1
+   */
+  saturation?: number;
+  /**
+   * Animation speed. A still frame is drawn when reduced motion is preferred.
+   * @default 0.25
+   */
+  timeSpeed?: number;
+  /**
+   * Warp amplitude divisor; higher is calmer.
+   * @default 50
+   */
+  warpAmplitude?: number;
+  /**
+   * Frequency of the warp waves.
+   * @default 5
+   */
+  warpFrequency?: number;
+  /**
+   * Speed of the warp waves.
+   * @default 2
+   */
+  warpSpeed?: number;
+  /**
+   * How strongly the field is warped.
+   * @default 1
+   */
+  warpStrength?: number;
+  /**
+   * Zoom of the field.
+   * @default 0.9
+   */
+  zoom?: number;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/GridBackground/GridBackground.mjs

@@ -2,6 +2,7 @@
 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";
@@ -9,7 +10,6 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 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,

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 * as stylex from '@stylexjs/stylex';\nimport { useSize } from 'ahooks';\nimport chroma from 'chroma-js';\nimport { shuffle } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\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"}
+{"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"}