@lobehub/ui 4.3.2 → 4.3.3

package/es/awesome/SpotlightCard/SpotlightCard.d.mts

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

package/es/awesome/SpotlightCard/SpotlightCard.mjs

@@ -1,17 +1,18 @@
 'use client';
 
 import Grid_default from "../../Grid/Grid.mjs";
-import { CHILDREN_CLASSNAME, useStyles } from "./style.mjs";
+import { CHILDREN_CLASSNAME, styles } from "./style.mjs";
 import SpotlightCardItem_default from "./SpotlightCardItem.mjs";
-import { memo, useEffect, useRef } from "react";
+import { memo, useEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/awesome/SpotlightCard/SpotlightCard.tsx
 const SpotlightCard = memo(({ items, renderItem: Content, maxItemWidth, className, columns = 3, gap = "1em", style, size = 800, borderRadius = 12, spotlight = true, ...rest }) => {
-	const { styles, cx } = useStyles({
-		borderRadius,
-		size
-	});
+	const cssVariables = useMemo(() => ({
+		"--spotlight-card-border-radius": `${borderRadius}px`,
+		"--spotlight-card-size": `${size}px`
+	}), [borderRadius, size]);
 	const ref = useRef(null);
 	useEffect(() => {
 		if (!ref.current) return;
@@ -34,7 +35,10 @@ const SpotlightCard = memo(({ items, renderItem: Content, maxItemWidth, classNam
 		maxItemWidth,
 		ref,
 		rows: columns,
-		style,
+		style: {
+			...cssVariables,
+			...style
+		},
 		...rest,
 		children: items.map((item, index) => {
 			return /* @__PURE__ */ jsx(SpotlightCardItem_default, {

package/es/awesome/SpotlightCard/SpotlightCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SpotlightCard.mjs","names":["Grid","SpotlightCardItem"],"sources":["../../../src/awesome/SpotlightCard/SpotlightCard.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useEffect, useRef } from 'react';\n\nimport Grid from '@/Grid';\n\nimport SpotlightCardItem from './SpotlightCardItem';\nimport { CHILDREN_CLASSNAME, useStyles } from './style';\nimport type { SpotlightCardProps } from './type';\n\nconst SpotlightCard = memo<SpotlightCardProps>(\n  ({\n    items,\n    renderItem: Content,\n    maxItemWidth,\n    className,\n    columns = 3,\n    gap = '1em',\n    style,\n    size = 800,\n    borderRadius = 12,\n    spotlight = true,\n    ...rest\n  }) => {\n    const { styles, cx } = useStyles({ borderRadius, size });\n    const ref = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!ref.current) return;\n      if (!spotlight) return;\n      const fn = (e: MouseEvent) => {\n        for (const card of document.querySelectorAll(`.${CHILDREN_CLASSNAME}`)) {\n          const rect = card.getBoundingClientRect(),\n            x = e.clientX - rect.left,\n            y = e.clientY - rect.top;\n\n          (card as HTMLDivElement).style.setProperty('--mouse-x', `${x}px`);\n          (card as HTMLDivElement).style.setProperty('--mouse-y', `${y}px`);\n        }\n      };\n      ref.current.addEventListener('mousemove', fn);\n\n      return () => {\n        ref.current?.removeEventListener('mousemove', fn);\n      };\n    }, []);\n\n    return (\n      <Grid\n        className={cx(styles.container, styles.grid, className)}\n        gap={gap}\n        maxItemWidth={maxItemWidth}\n        ref={ref}\n        rows={columns}\n        style={style}\n        {...rest}\n      >\n        {items.map((item, index) => {\n          return (\n            <SpotlightCardItem\n              borderRadius={borderRadius}\n              className={CHILDREN_CLASSNAME}\n              key={index}\n              size={size}\n            >\n              <Content {...item} />\n            </SpotlightCardItem>\n          );\n        })}\n      </Grid>\n    );\n  },\n);\n\nSpotlightCard.displayName = 'SpotlightCard';\n\nexport default SpotlightCard;\n"],"mappings":";;;;;;;;;AAUA,MAAM,gBAAgB,MACnB,EACC,OACA,YAAY,SACZ,cACA,WACA,UAAU,GACV,MAAM,OACN,OACA,OAAO,KACP,eAAe,IACf,YAAY,MACZ,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,OAAO,UAAU;EAAE;EAAc;EAAM,CAAC;CACxD,MAAM,MAAM,OAAuB,KAAK;AAExC,iBAAgB;AACd,MAAI,CAAC,IAAI,QAAS;AAClB,MAAI,CAAC,UAAW;EAChB,MAAM,MAAM,MAAkB;AAC5B,QAAK,MAAM,QAAQ,SAAS,iBAAiB,IAAI,qBAAqB,EAAE;IACtE,MAAM,OAAO,KAAK,uBAAuB,EACvC,IAAI,EAAE,UAAU,KAAK,MACrB,IAAI,EAAE,UAAU,KAAK;AAEvB,IAAC,KAAwB,MAAM,YAAY,aAAa,GAAG,EAAE,IAAI;AACjE,IAAC,KAAwB,MAAM,YAAY,aAAa,GAAG,EAAE,IAAI;;;AAGrE,MAAI,QAAQ,iBAAiB,aAAa,GAAG;AAE7C,eAAa;AACX,OAAI,SAAS,oBAAoB,aAAa,GAAG;;IAElD,EAAE,CAAC;AAEN,QACE,oBAACA;EACC,WAAW,GAAG,OAAO,WAAW,OAAO,MAAM,UAAU;EAClD;EACS;EACT;EACL,MAAM;EACC;EACP,GAAI;YAEH,MAAM,KAAK,MAAM,UAAU;AAC1B,UACE,oBAACC;IACe;IACd,WAAW;IAEL;cAEN,oBAAC,WAAQ,GAAI,OAAQ;MAHhB,MAIa;IAEtB;GACG;EAGZ;AAED,cAAc,cAAc;AAE5B,4BAAe"}
+{"version":3,"file":"SpotlightCard.mjs","names":["Grid","SpotlightCardItem"],"sources":["../../../src/awesome/SpotlightCard/SpotlightCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useEffect, useMemo, useRef } from 'react';\n\nimport Grid from '@/Grid';\n\nimport SpotlightCardItem from './SpotlightCardItem';\nimport { CHILDREN_CLASSNAME, styles } from './style';\nimport type { SpotlightCardProps } from './type';\n\nconst SpotlightCard = memo<SpotlightCardProps>(\n  ({\n    items,\n    renderItem: Content,\n    maxItemWidth,\n    className,\n    columns = 3,\n    gap = '1em',\n    style,\n    size = 800,\n    borderRadius = 12,\n    spotlight = true,\n    ...rest\n  }) => {\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--spotlight-card-border-radius': `${borderRadius}px`,\n        '--spotlight-card-size': `${size}px`,\n      }),\n      [borderRadius, size],\n    );\n    const ref = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!ref.current) return;\n      if (!spotlight) return;\n      const fn = (e: MouseEvent) => {\n        for (const card of document.querySelectorAll(`.${CHILDREN_CLASSNAME}`)) {\n          const rect = card.getBoundingClientRect(),\n            x = e.clientX - rect.left,\n            y = e.clientY - rect.top;\n\n          (card as HTMLDivElement).style.setProperty('--mouse-x', `${x}px`);\n          (card as HTMLDivElement).style.setProperty('--mouse-y', `${y}px`);\n        }\n      };\n      ref.current.addEventListener('mousemove', fn);\n\n      return () => {\n        ref.current?.removeEventListener('mousemove', fn);\n      };\n    }, []);\n\n    return (\n      <Grid\n        className={cx(styles.container, styles.grid, className)}\n        gap={gap}\n        maxItemWidth={maxItemWidth}\n        ref={ref}\n        rows={columns}\n        style={{\n          ...cssVariables,\n          ...style,\n        }}\n        {...rest}\n      >\n        {items.map((item, index) => {\n          return (\n            <SpotlightCardItem\n              borderRadius={borderRadius}\n              className={CHILDREN_CLASSNAME}\n              key={index}\n              size={size}\n            >\n              <Content {...item} />\n            </SpotlightCardItem>\n          );\n        })}\n      </Grid>\n    );\n  },\n);\n\nSpotlightCard.displayName = 'SpotlightCard';\n\nexport default SpotlightCard;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,gBAAgB,MACnB,EACC,OACA,YAAY,SACZ,cACA,WACA,UAAU,GACV,MAAM,OACN,OACA,OAAO,KACP,eAAe,IACf,YAAY,MACZ,GAAG,WACC;CACJ,MAAM,eAAe,eACZ;EACL,kCAAkC,GAAG,aAAa;EAClD,yBAAyB,GAAG,KAAK;EAClC,GACD,CAAC,cAAc,KAAK,CACrB;CACD,MAAM,MAAM,OAAuB,KAAK;AAExC,iBAAgB;AACd,MAAI,CAAC,IAAI,QAAS;AAClB,MAAI,CAAC,UAAW;EAChB,MAAM,MAAM,MAAkB;AAC5B,QAAK,MAAM,QAAQ,SAAS,iBAAiB,IAAI,qBAAqB,EAAE;IACtE,MAAM,OAAO,KAAK,uBAAuB,EACvC,IAAI,EAAE,UAAU,KAAK,MACrB,IAAI,EAAE,UAAU,KAAK;AAEvB,IAAC,KAAwB,MAAM,YAAY,aAAa,GAAG,EAAE,IAAI;AACjE,IAAC,KAAwB,MAAM,YAAY,aAAa,GAAG,EAAE,IAAI;;;AAGrE,MAAI,QAAQ,iBAAiB,aAAa,GAAG;AAE7C,eAAa;AACX,OAAI,SAAS,oBAAoB,aAAa,GAAG;;IAElD,EAAE,CAAC;AAEN,QACE,oBAACA;EACC,WAAW,GAAG,OAAO,WAAW,OAAO,MAAM,UAAU;EAClD;EACS;EACT;EACL,MAAM;EACN,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,GAAI;YAEH,MAAM,KAAK,MAAM,UAAU;AAC1B,UACE,oBAACC;IACe;IACd,WAAW;IAEL;cAEN,oBAAC,WAAQ,GAAI,OAAQ;MAHhB,MAIa;IAEtB;GACG;EAGZ;AAED,cAAc,cAAc;AAE5B,4BAAe"}

package/es/awesome/SpotlightCard/SpotlightCardItem.mjs

@@ -1,19 +1,22 @@
 'use client';
 
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import { useStyles } from "./style.mjs";
-import { memo } from "react";
+import { styles } from "./style.mjs";
+import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
 
 //#region src/awesome/SpotlightCard/SpotlightCardItem.tsx
 const SpotlightCardItem = memo(({ children, className, style, borderRadius, size, ...rest }) => {
-	const { styles, cx } = useStyles({
-		borderRadius,
-		size
-	});
+	const { isDarkMode } = useThemeMode();
+	const cssVariables = useMemo(() => ({
+		"--spotlight-card-border-radius": `${borderRadius}px`,
+		"--spotlight-card-size": `${size}px`
+	}), [borderRadius, size]);
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
-		className: cx(styles.itemContainer, className),
+		className: cx(isDarkMode ? styles.itemContainerDark : styles.itemContainerLight, className),
 		style: {
+			...cssVariables,
 			borderRadius,
 			...style
 		},

package/es/awesome/SpotlightCard/SpotlightCardItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SpotlightCardItem.mjs","names":["Flexbox"],"sources":["../../../src/awesome/SpotlightCard/SpotlightCardItem.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from './style';\nimport type { SpotlightCardItemProps } from './type';\n\nconst SpotlightCardItem = memo<SpotlightCardItemProps>(\n  ({ children, className, style, borderRadius, size, ...rest }) => {\n    const { styles, cx } = useStyles({ borderRadius, size });\n\n    return (\n      <Flexbox\n        className={cx(styles.itemContainer, className)}\n        style={{ borderRadius, ...style }}\n        {...rest}\n      >\n        <Flexbox className={styles.content}>{children}</Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nSpotlightCardItem.displayName = 'SpotlightCardItem';\n\nexport default SpotlightCardItem;\n"],"mappings":";;;;;;;;AASA,MAAM,oBAAoB,MACvB,EAAE,UAAU,WAAW,OAAO,cAAc,MAAM,GAAG,WAAW;CAC/D,MAAM,EAAE,QAAQ,OAAO,UAAU;EAAE;EAAc;EAAM,CAAC;AAExD,QACE,oBAACA;EACC,WAAW,GAAG,OAAO,eAAe,UAAU;EAC9C,OAAO;GAAE;GAAc,GAAG;GAAO;EACjC,GAAI;YAEJ,oBAACA;GAAQ,WAAW,OAAO;GAAU;IAAmB;GAChD;EAGf;AAED,kBAAkB,cAAc;AAEhC,gCAAe"}
+{"version":3,"file":"SpotlightCardItem.mjs","names":["Flexbox"],"sources":["../../../src/awesome/SpotlightCard/SpotlightCardItem.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { SpotlightCardItemProps } from './type';\n\nconst SpotlightCardItem = memo<SpotlightCardItemProps>(\n  ({ children, className, style, borderRadius, size, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--spotlight-card-border-radius': `${borderRadius}px`,\n        '--spotlight-card-size': `${size}px`,\n      }),\n      [borderRadius, size],\n    );\n\n    return (\n      <Flexbox\n        className={cx(isDarkMode ? styles.itemContainerDark : styles.itemContainerLight, className)}\n        style={{\n          ...cssVariables,\n          borderRadius,\n          ...style,\n        }}\n        {...rest}\n      >\n        <Flexbox className={styles.content}>{children}</Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nSpotlightCardItem.displayName = 'SpotlightCardItem';\n\nexport default SpotlightCardItem;\n"],"mappings":";;;;;;;;;AAUA,MAAM,oBAAoB,MACvB,EAAE,UAAU,WAAW,OAAO,cAAc,MAAM,GAAG,WAAW;CAC/D,MAAM,EAAE,eAAe,cAAc;CAErC,MAAM,eAAe,eACZ;EACL,kCAAkC,GAAG,aAAa;EAClD,yBAAyB,GAAG,KAAK;EAClC,GACD,CAAC,cAAc,KAAK,CACrB;AAED,QACE,oBAACA;EACC,WAAW,GAAG,aAAa,OAAO,oBAAoB,OAAO,oBAAoB,UAAU;EAC3F,OAAO;GACL,GAAG;GACH;GACA,GAAG;GACJ;EACD,GAAI;YAEJ,oBAACA;GAAQ,WAAW,OAAO;GAAU;IAAmB;GAChD;EAGf;AAED,kBAAkB,cAAc;AAEhC,gCAAe"}

package/es/awesome/SpotlightCard/style.mjs

@@ -1,88 +1,140 @@
-import { createStyles } from "antd-style";
-import { rgba } from "polished";
+import { createStaticStyles, responsive } from "antd-style";
 
 //#region src/awesome/SpotlightCard/style.ts
 const CHILDREN_CLASSNAME = "hover-card";
-const useStyles = createStyles(({ css: css$1, responsive, token, isDarkMode }, { size, borderRadius }) => ({
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
 	container: css$1`
-      &:hover > .${CHILDREN_CLASSNAME}::after {
-        opacity: 1;
-      }
-    `,
+    &:hover > .${CHILDREN_CLASSNAME}::after {
+      opacity: 1;
+    }
+  `,
 	content: css$1`
-      z-index: 2;
+    z-index: 2;
 
-      flex-grow: 1;
+    flex-grow: 1;
 
-      height: 100%;
-      margin: 1px;
+    height: 100%;
+    margin: 1px;
+    border-radius: calc(var(--spotlight-card-border-radius, 12px) - 1px);
 
-      background: ${token.colorBgContainer};
-      border-radius: ${borderRadius - 1}px;
-    `,
+    background: ${cssVar$1.colorBgContainer};
+  `,
 	grid: css$1`
-      display: grid;
+    display: grid;
+
+    ${responsive.sm} {
+      display: flex;
+      flex-direction: column;
+    }
+  `,
+	itemContainerDark: css$1`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    width: 100%;
+    border-radius: var(--spotlight-card-border-radius, 12px);
 
-      ${responsive.mobile} {
-        display: flex;
-        flex-direction: column;
-      }
-    `,
-	itemContainer: css$1`
-      cursor: pointer;
+    background: color-mix(in srgb, ${cssVar$1.colorBorderSecondary} 75%, transparent);
 
-      position: relative;
+    &::before,
+    &::after {
+      content: '';
 
-      overflow: hidden;
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
 
       width: 100%;
+      height: 100%;
+      border-radius: inherit;
+
+      opacity: 0;
+
+      transition: opacity 500ms;
+    }
+
+    &::before {
+      pointer-events: none;
+      user-select: none;
+      z-index: 3;
+      background: radial-gradient(
+        var(--spotlight-card-size, 800px) circle at var(--mouse-x) var(--mouse-y),
+        color-mix(in srgb, ${cssVar$1.colorTextBase} 6%, transparent),
+        transparent 40%
+      );
+    }
+
+    &::after {
+      z-index: 1;
+      background: radial-gradient(
+        calc(var(--spotlight-card-size, 800px) * 0.75) circle at var(--mouse-x) var(--mouse-y),
+        color-mix(in srgb, ${cssVar$1.colorTextBase} 40%, transparent),
+        transparent 40%
+      );
+    }
 
-      background: ${rgba(token.colorBorderSecondary, .75)};
-      border-radius: ${borderRadius}px;
-
-      &::before,
-      &::after {
-        content: '';
-
-        position: absolute;
-        inset-block-start: 0;
-        inset-inline-start: 0;
-
-        width: 100%;
-        height: 100%;
-
-        opacity: 0;
-        border-radius: inherit;
-
-        transition: opacity 500ms;
-      }
-
-      &::before {
-        pointer-events: none;
-        user-select: none;
-        z-index: 3;
-        background: radial-gradient(
-          ${size}px circle at var(--mouse-x) var(--mouse-y),
-          ${rgba(token.colorTextBase, isDarkMode ? .06 : .02)},
-          transparent 40%
-        );
-      }
-
-      &::after {
-        z-index: 1;
-        background: radial-gradient(
-          ${size * .75}px circle at var(--mouse-x) var(--mouse-y),
-          ${rgba(token.colorTextBase, isDarkMode ? .4 : .2)},
-          transparent 40%
-        );
-      }
-
-      :hover::before {
-        opacity: 1;
-      }
-    `
+    :hover::before {
+      opacity: 1;
+    }
+  `,
+	itemContainerLight: css$1`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    width: 100%;
+    border-radius: var(--spotlight-card-border-radius, 12px);
+
+    background: color-mix(in srgb, ${cssVar$1.colorBorderSecondary} 75%, transparent);
+
+    &::before,
+    &::after {
+      content: '';
+
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+
+      opacity: 0;
+
+      transition: opacity 500ms;
+    }
+
+    &::before {
+      pointer-events: none;
+      user-select: none;
+      z-index: 3;
+      background: radial-gradient(
+        var(--spotlight-card-size, 800px) circle at var(--mouse-x) var(--mouse-y),
+        color-mix(in srgb, ${cssVar$1.colorTextBase} 2%, transparent),
+        transparent 40%
+      );
+    }
+
+    &::after {
+      z-index: 1;
+      background: radial-gradient(
+        calc(var(--spotlight-card-size, 800px) * 0.75) circle at var(--mouse-x) var(--mouse-y),
+        color-mix(in srgb, ${cssVar$1.colorTextBase} 20%, transparent),
+        transparent 40%
+      );
+    }
+
+    :hover::before {
+      opacity: 1;
+    }
+  `
 }));
 
 //#endregion
-export { CHILDREN_CLASSNAME, useStyles };
+export { CHILDREN_CLASSNAME, styles };
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/SpotlightCard/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\nimport { rgba } from 'polished';\n\nexport const CHILDREN_CLASSNAME = 'hover-card';\n\nexport const useStyles = createStyles(\n  (\n    { css, responsive, token, isDarkMode },\n    { size, borderRadius }: { borderRadius: number; size: number },\n  ) => ({\n    container: css`\n      &:hover > .${CHILDREN_CLASSNAME}::after {\n        opacity: 1;\n      }\n    `,\n\n    content: css`\n      z-index: 2;\n\n      flex-grow: 1;\n\n      height: 100%;\n      margin: 1px;\n\n      background: ${token.colorBgContainer};\n      border-radius: ${borderRadius - 1}px;\n    `,\n    grid: css`\n      display: grid;\n\n      ${responsive.mobile} {\n        display: flex;\n        flex-direction: column;\n      }\n    `,\n    itemContainer: css`\n      cursor: pointer;\n\n      position: relative;\n\n      overflow: hidden;\n\n      width: 100%;\n\n      background: ${rgba(token.colorBorderSecondary, 0.75)};\n      border-radius: ${borderRadius}px;\n\n      &::before,\n      &::after {\n        content: '';\n\n        position: absolute;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n\n        width: 100%;\n        height: 100%;\n\n        opacity: 0;\n        border-radius: inherit;\n\n        transition: opacity 500ms;\n      }\n\n      &::before {\n        pointer-events: none;\n        user-select: none;\n        z-index: 3;\n        background: radial-gradient(\n          ${size}px circle at var(--mouse-x) var(--mouse-y),\n          ${rgba(token.colorTextBase, isDarkMode ? 0.06 : 0.02)},\n          transparent 40%\n        );\n      }\n\n      &::after {\n        z-index: 1;\n        background: radial-gradient(\n          ${size * 0.75}px circle at var(--mouse-x) var(--mouse-y),\n          ${rgba(token.colorTextBase, isDarkMode ? 0.4 : 0.2)},\n          transparent 40%\n        );\n      }\n\n      :hover::before {\n        opacity: 1;\n      }\n    `,\n  }),\n);\n"],"mappings":";;;;AAGA,MAAa,qBAAqB;AAElC,MAAa,YAAY,cAErB,EAAE,YAAK,YAAY,OAAO,cAC1B,EAAE,MAAM,oBACJ;CACJ,WAAW,KAAG;mBACC,mBAAmB;;;;CAKlC,SAAS,KAAG;;;;;;;;oBAQI,MAAM,iBAAiB;uBACpB,eAAe,EAAE;;CAEpC,MAAM,KAAG;;;QAGL,WAAW,OAAO;;;;;CAKtB,eAAe,KAAG;;;;;;;;;oBASF,KAAK,MAAM,sBAAsB,IAAK,CAAC;uBACpC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;YAwBxB,KAAK;YACL,KAAK,MAAM,eAAe,aAAa,MAAO,IAAK,CAAC;;;;;;;;YAQpD,OAAO,IAAK;YACZ,KAAK,MAAM,eAAe,aAAa,KAAM,GAAI,CAAC;;;;;;;;;CAS3D,EACF"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/awesome/SpotlightCard/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\n\nexport const CHILDREN_CLASSNAME = 'hover-card';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  container: css`\n    &:hover > .${CHILDREN_CLASSNAME}::after {\n      opacity: 1;\n    }\n  `,\n\n  content: css`\n    z-index: 2;\n\n    flex-grow: 1;\n\n    height: 100%;\n    margin: 1px;\n    border-radius: calc(var(--spotlight-card-border-radius, 12px) - 1px);\n\n    background: ${cssVar.colorBgContainer};\n  `,\n  grid: css`\n    display: grid;\n\n    ${responsive.sm} {\n      display: flex;\n      flex-direction: column;\n    }\n  `,\n  itemContainerDark: css`\n    cursor: pointer;\n\n    position: relative;\n\n    overflow: hidden;\n\n    width: 100%;\n    border-radius: var(--spotlight-card-border-radius, 12px);\n\n    background: color-mix(in srgb, ${cssVar.colorBorderSecondary} 75%, transparent);\n\n    &::before,\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n\n      opacity: 0;\n\n      transition: opacity 500ms;\n    }\n\n    &::before {\n      pointer-events: none;\n      user-select: none;\n      z-index: 3;\n      background: radial-gradient(\n        var(--spotlight-card-size, 800px) circle at var(--mouse-x) var(--mouse-y),\n        color-mix(in srgb, ${cssVar.colorTextBase} 6%, transparent),\n        transparent 40%\n      );\n    }\n\n    &::after {\n      z-index: 1;\n      background: radial-gradient(\n        calc(var(--spotlight-card-size, 800px) * 0.75) circle at var(--mouse-x) var(--mouse-y),\n        color-mix(in srgb, ${cssVar.colorTextBase} 40%, transparent),\n        transparent 40%\n      );\n    }\n\n    :hover::before {\n      opacity: 1;\n    }\n  `,\n\n  itemContainerLight: css`\n    cursor: pointer;\n\n    position: relative;\n\n    overflow: hidden;\n\n    width: 100%;\n    border-radius: var(--spotlight-card-border-radius, 12px);\n\n    background: color-mix(in srgb, ${cssVar.colorBorderSecondary} 75%, transparent);\n\n    &::before,\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n\n      opacity: 0;\n\n      transition: opacity 500ms;\n    }\n\n    &::before {\n      pointer-events: none;\n      user-select: none;\n      z-index: 3;\n      background: radial-gradient(\n        var(--spotlight-card-size, 800px) circle at var(--mouse-x) var(--mouse-y),\n        color-mix(in srgb, ${cssVar.colorTextBase} 2%, transparent),\n        transparent 40%\n      );\n    }\n\n    &::after {\n      z-index: 1;\n      background: radial-gradient(\n        calc(var(--spotlight-card-size, 800px) * 0.75) circle at var(--mouse-x) var(--mouse-y),\n        color-mix(in srgb, ${cssVar.colorTextBase} 20%, transparent),\n        transparent 40%\n      );\n    }\n\n    :hover::before {\n      opacity: 1;\n    }\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,qBAAqB;AAElC,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,WAAW,KAAG;iBACC,mBAAmB;;;;CAKlC,SAAS,KAAG;;;;;;;;;kBASIA,SAAO,iBAAiB;;CAExC,MAAM,KAAG;;;MAGL,WAAW,GAAG;;;;;CAKlB,mBAAmB,KAAG;;;;;;;;;;qCAUaA,SAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;6BAyBpCA,SAAO,cAAc;;;;;;;;;6BASrBA,SAAO,cAAc;;;;;;;;;CAUhD,oBAAoB,KAAG;;;;;;;;;;qCAUYA,SAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;6BAyBpCA,SAAO,cAAc;;;;;;;;;6BASrBA,SAAO,cAAc;;;;;;;;;CASjD,EAAE"}

package/es/awesome/TypewriterEffect/TypewriterEffect.d.mts

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

package/es/awesome/TypewriterEffect/TypewriterEffect.mjs

@@ -1,14 +1,15 @@
 'use client';
 
 import { useMotionComponent } from "../../MotionProvider/index.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/awesome/TypewriterEffect/TypewriterEffect.tsx
 const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed = 100, initialDelay = 0, pauseDuration = 2e3, deletingSpeed = 50, deletePauseDuration = 0, loop = true, className = "", color, showCursor = true, hideCursorWhileTyping = false, cursorCharacter, cursorClassName = "", cursorColor, cursorBlinkDuration = .8, cursorFade = true, cursorStyle = "pipe", textColors = [], variableSpeed, onSentenceComplete, startOnVisible = false, reverseMode = false, segmentMode = "grapheme", ...props }) => {
 	const Motion = useMotionComponent();
-	const { styles, cx } = useStyles();
+	const cxStyles = cx;
 	const [displayedText, setDisplayedText] = useState("");
 	const [currentCharIndex, setCurrentCharIndex] = useState(0);
 	const [isDeleting, setIsDeleting] = useState(false);
@@ -134,7 +135,7 @@ const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed =
 	const finalCursorColor = getCurrentCursorColor();
 	const characters = splitText(displayedText);
 	return createElement(Component, {
-		className: cx(styles.container, className),
+		className: cxStyles(styles.container, className),
 		ref: containerRef,
 		...props
 	}, /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
@@ -152,7 +153,7 @@ const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed =
 		}, `${currentTextIndex}-${index}`))
 	}), showCursor && (cursorFade ? /* @__PURE__ */ jsx(Motion.span, {
 		animate: { opacity: shouldHideCursor ? 0 : 1 },
-		className: cx(getCursorStyle(), cursorClassName),
+		className: cxStyles(getCursorStyle(), cursorClassName),
 		initial: { opacity: 0 },
 		style: finalCursorColor ? { backgroundColor: finalCursorColor } : void 0,
 		transition: {
@@ -163,7 +164,7 @@ const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed =
 		},
 		children: cursorCharacter
 	}) : /* @__PURE__ */ jsx("span", {
-		className: cx(getCursorStyle(), cursorClassName),
+		className: cxStyles(getCursorStyle(), cursorClassName),
 		style: {
 			backgroundColor: finalCursorColor,
 			opacity: shouldHideCursor ? 0 : 1

package/es/awesome/TypewriterEffect/TypewriterEffect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TypewriterEffect.mjs","names":["timeout: ReturnType<typeof setTimeout>"],"sources":["../../../src/awesome/TypewriterEffect/TypewriterEffect.tsx"],"sourcesContent":["'use client';\n\nimport { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { useStyles } from './style';\nimport type { TypewriterEffectProps } from './type';\n\nconst TypewriterEffect = memo<TypewriterEffectProps>(\n  ({\n    sentences,\n    as: Component = 'div',\n    typingSpeed = 100,\n    initialDelay = 0,\n    pauseDuration = 2000,\n    deletingSpeed = 50,\n    deletePauseDuration = 0,\n    loop = true,\n    className = '',\n    color,\n    showCursor = true,\n    hideCursorWhileTyping = false,\n    cursorCharacter,\n    cursorClassName = '',\n    cursorColor,\n    cursorBlinkDuration = 0.8,\n    cursorFade = true,\n    cursorStyle = 'pipe',\n    textColors = [],\n    variableSpeed,\n    onSentenceComplete,\n    startOnVisible = false,\n    reverseMode = false,\n    segmentMode = 'grapheme',\n    ...props\n  }: TypewriterEffectProps) => {\n    const Motion = useMotionComponent();\n    const { styles, cx } = useStyles();\n    const [displayedText, setDisplayedText] = useState('');\n    const [currentCharIndex, setCurrentCharIndex] = useState(0);\n    const [isDeleting, setIsDeleting] = useState(false);\n    const [currentTextIndex, setCurrentTextIndex] = useState(0);\n    const [isVisible, setIsVisible] = useState(!startOnVisible);\n    const [isDeletePausing, setIsDeletePausing] = useState(false);\n    const containerRef = useRef<HTMLElement>(null);\n\n    const textArray = useMemo(\n      () => (Array.isArray(sentences) ? sentences : [sentences]),\n      [sentences],\n    );\n\n    // Helper function to split text based on segment mode\n    const splitText = useCallback(\n      (text: string): string[] => {\n        // Use Intl.Segmenter if available\n        if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n          const segmenter = new Intl.Segmenter(undefined, { granularity: segmentMode });\n          return Array.from(segmenter.segment(text), (segment) => segment.segment);\n        }\n\n        // Fallback when Intl.Segmenter is not available\n        if (segmentMode === 'word') {\n          // Simple word splitting fallback\n          return text.split(/(\\s+)/).filter(Boolean);\n        }\n\n        // Grapheme fallback\n        return Array.from(text);\n      },\n      [segmentMode],\n    );\n\n    const getRandomSpeed = useCallback(() => {\n      if (!variableSpeed) return typingSpeed;\n      const { min, max } = variableSpeed;\n      return Math.random() * (max - min) + min;\n    }, [variableSpeed, typingSpeed]);\n\n    const getCurrentTextColor = () => {\n      if (textColors.length > 0) {\n        return textColors[currentTextIndex % textColors.length];\n      }\n      return color;\n    };\n\n    const getCurrentCursorColor = () => {\n      return cursorColor || color;\n    };\n\n    useEffect(() => {\n      if (!startOnVisible || !containerRef.current) return;\n\n      const observer = new IntersectionObserver(\n        (entries) => {\n          entries.forEach((entry) => {\n            if (entry.isIntersecting) {\n              setIsVisible(true);\n            }\n          });\n        },\n        { threshold: 0.1 },\n      );\n\n      observer.observe(containerRef.current);\n\n      return () => observer.disconnect();\n    }, [startOnVisible]);\n\n    useEffect(() => {\n      if (!isVisible) return;\n\n      let timeout: ReturnType<typeof setTimeout>;\n\n      const currentText = textArray[currentTextIndex];\n      // Split text based on segment mode\n      const textSegments = splitText(currentText);\n      const processedText = reverseMode ? textSegments.reverse().join('') : currentText;\n\n      // Handle delete pause state\n      if (isDeletePausing) {\n        timeout = setTimeout(() => {\n          setIsDeletePausing(false);\n        }, deletePauseDuration);\n        return () => clearTimeout(timeout);\n      }\n\n      const executeTypingAnimation = () => {\n        if (isDeleting) {\n          if (displayedText === '') {\n            setIsDeleting(false);\n            if (currentTextIndex === textArray.length - 1 && !loop) {\n              return;\n            }\n            if (onSentenceComplete) {\n              onSentenceComplete(textArray[currentTextIndex], currentTextIndex);\n            }\n            setCurrentTextIndex((prev) => (prev + 1) % textArray.length);\n            setCurrentCharIndex(0);\n\n            if (deletePauseDuration > 0) {\n              setIsDeletePausing(true);\n              return;\n            }\n          } else {\n            timeout = setTimeout(() => {\n              setDisplayedText((prev) => {\n                const segments = splitText(prev);\n                return segments.slice(0, -1).join('');\n              });\n            }, deletingSpeed);\n          }\n        } else {\n          const processedSegments = splitText(processedText);\n          if (currentCharIndex < processedSegments.length) {\n            timeout = setTimeout(\n              () => {\n                setDisplayedText((prev) => prev + processedSegments[currentCharIndex]);\n                setCurrentCharIndex((prev) => prev + 1);\n              },\n              variableSpeed ? getRandomSpeed() : typingSpeed,\n            );\n          } else if (textArray.length >= 1) {\n            if (!loop && currentTextIndex === textArray.length - 1) return;\n\n            timeout = setTimeout(() => {\n              setIsDeleting(true);\n            }, pauseDuration);\n          }\n        }\n      };\n\n      if (currentCharIndex === 0 && !isDeleting && displayedText === '') {\n        timeout = setTimeout(executeTypingAnimation, initialDelay);\n      } else {\n        executeTypingAnimation();\n      }\n\n      return () => clearTimeout(timeout);\n    }, [\n      currentCharIndex,\n      displayedText,\n      isDeleting,\n      isDeletePausing,\n      typingSpeed,\n      deletingSpeed,\n      deletePauseDuration,\n      pauseDuration,\n      textArray,\n      currentTextIndex,\n      loop,\n      initialDelay,\n      isVisible,\n      reverseMode,\n      variableSpeed,\n      onSentenceComplete,\n      getRandomSpeed,\n      splitText,\n    ]);\n\n    const getCursorStyle = () => {\n      if (cursorCharacter) return styles.cursorCustom;\n\n      switch (cursorStyle) {\n        case 'block': {\n          return styles.cursorBlock;\n        }\n        case 'dot': {\n          return styles.cursorDot;\n        }\n        case 'underscore': {\n          return styles.cursorUnderscore;\n        }\n        case 'pipe': {\n          return styles.cursor;\n        }\n      }\n    };\n\n    const currentTextLength = splitText(textArray[currentTextIndex]).length;\n    const isTyping = currentCharIndex < currentTextLength && !isDeleting;\n    const isAfterTyping = currentCharIndex === currentTextLength && !isDeleting;\n\n    const shouldHideCursor = (() => {\n      if (hideCursorWhileTyping === true) return true; // 完全隐藏\n      if (hideCursorWhileTyping === 'typing') return isTyping || isDeleting; // 打字和删除时隐藏\n      if (hideCursorWhileTyping === 'afterTyping') return isAfterTyping; // 打字完成后隐藏\n      return false;\n    })();\n\n    const textColor = getCurrentTextColor();\n    const finalCursorColor = getCurrentCursorColor();\n\n    // Split displayed text for animation\n    const characters = splitText(displayedText);\n\n    return createElement(\n      Component,\n      {\n        className: cx(styles.container, className),\n        ref: containerRef,\n        ...props,\n      },\n      <>\n        <span className={styles.text} style={textColor ? { color: textColor } : undefined}>\n          {characters.map((char, index) => (\n            <Motion.span\n              animate={{ opacity: 1 }}\n              initial={{ opacity: 0 }}\n              key={`${currentTextIndex}-${index}`}\n              style={{ display: 'inline-block' }}\n              transition={{\n                duration: typingSpeed / 500,\n                ease: 'easeInOut',\n              }}\n            >\n              {char === ' ' ? '\\u00A0' : char}\n            </Motion.span>\n          ))}\n        </span>\n        {showCursor &&\n          (cursorFade ? (\n            <Motion.span\n              animate={{ opacity: shouldHideCursor ? 0 : 1 }}\n              className={cx(getCursorStyle(), cursorClassName)}\n              initial={{ opacity: 0 }}\n              style={finalCursorColor ? { backgroundColor: finalCursorColor } : undefined}\n              transition={{\n                duration: shouldHideCursor ? 0.2 : cursorBlinkDuration,\n                ease: 'easeInOut',\n                repeat: shouldHideCursor ? 0 : Number.POSITIVE_INFINITY,\n                repeatType: 'reverse',\n              }}\n            >\n              {cursorCharacter}\n            </Motion.span>\n          ) : (\n            <span\n              className={cx(getCursorStyle(), cursorClassName)}\n              style={{\n                backgroundColor: finalCursorColor,\n                opacity: shouldHideCursor ? 0 : 1,\n              }}\n            >\n              {cursorCharacter}\n            </span>\n          ))}\n      </>,\n    );\n  },\n);\n\nTypewriterEffect.displayName = 'TypewriterEffect';\n\nexport default TypewriterEffect;\n"],"mappings":"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"}
+{"version":3,"file":"TypewriterEffect.mjs","names":["timeout: ReturnType<typeof setTimeout>"],"sources":["../../../src/awesome/TypewriterEffect/TypewriterEffect.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { styles } from './style';\nimport type { TypewriterEffectProps } from './type';\n\nconst TypewriterEffect = memo<TypewriterEffectProps>(\n  ({\n    sentences,\n    as: Component = 'div',\n    typingSpeed = 100,\n    initialDelay = 0,\n    pauseDuration = 2000,\n    deletingSpeed = 50,\n    deletePauseDuration = 0,\n    loop = true,\n    className = '',\n    color,\n    showCursor = true,\n    hideCursorWhileTyping = false,\n    cursorCharacter,\n    cursorClassName = '',\n    cursorColor,\n    cursorBlinkDuration = 0.8,\n    cursorFade = true,\n    cursorStyle = 'pipe',\n    textColors = [],\n    variableSpeed,\n    onSentenceComplete,\n    startOnVisible = false,\n    reverseMode = false,\n    segmentMode = 'grapheme',\n    ...props\n  }: TypewriterEffectProps) => {\n    const Motion = useMotionComponent();\n    const cxStyles = cx;\n    const [displayedText, setDisplayedText] = useState('');\n    const [currentCharIndex, setCurrentCharIndex] = useState(0);\n    const [isDeleting, setIsDeleting] = useState(false);\n    const [currentTextIndex, setCurrentTextIndex] = useState(0);\n    const [isVisible, setIsVisible] = useState(!startOnVisible);\n    const [isDeletePausing, setIsDeletePausing] = useState(false);\n    const containerRef = useRef<HTMLElement>(null);\n\n    const textArray = useMemo(\n      () => (Array.isArray(sentences) ? sentences : [sentences]),\n      [sentences],\n    );\n\n    // Helper function to split text based on segment mode\n    const splitText = useCallback(\n      (text: string): string[] => {\n        // Use Intl.Segmenter if available\n        if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n          const segmenter = new Intl.Segmenter(undefined, { granularity: segmentMode });\n          return Array.from(segmenter.segment(text), (segment) => segment.segment);\n        }\n\n        // Fallback when Intl.Segmenter is not available\n        if (segmentMode === 'word') {\n          // Simple word splitting fallback\n          return text.split(/(\\s+)/).filter(Boolean);\n        }\n\n        // Grapheme fallback\n        return Array.from(text);\n      },\n      [segmentMode],\n    );\n\n    const getRandomSpeed = useCallback(() => {\n      if (!variableSpeed) return typingSpeed;\n      const { min, max } = variableSpeed;\n      return Math.random() * (max - min) + min;\n    }, [variableSpeed, typingSpeed]);\n\n    const getCurrentTextColor = () => {\n      if (textColors.length > 0) {\n        return textColors[currentTextIndex % textColors.length];\n      }\n      return color;\n    };\n\n    const getCurrentCursorColor = () => {\n      return cursorColor || color;\n    };\n\n    useEffect(() => {\n      if (!startOnVisible || !containerRef.current) return;\n\n      const observer = new IntersectionObserver(\n        (entries) => {\n          entries.forEach((entry) => {\n            if (entry.isIntersecting) {\n              setIsVisible(true);\n            }\n          });\n        },\n        { threshold: 0.1 },\n      );\n\n      observer.observe(containerRef.current);\n\n      return () => observer.disconnect();\n    }, [startOnVisible]);\n\n    useEffect(() => {\n      if (!isVisible) return;\n\n      let timeout: ReturnType<typeof setTimeout>;\n\n      const currentText = textArray[currentTextIndex];\n      // Split text based on segment mode\n      const textSegments = splitText(currentText);\n      const processedText = reverseMode ? textSegments.reverse().join('') : currentText;\n\n      // Handle delete pause state\n      if (isDeletePausing) {\n        timeout = setTimeout(() => {\n          setIsDeletePausing(false);\n        }, deletePauseDuration);\n        return () => clearTimeout(timeout);\n      }\n\n      const executeTypingAnimation = () => {\n        if (isDeleting) {\n          if (displayedText === '') {\n            setIsDeleting(false);\n            if (currentTextIndex === textArray.length - 1 && !loop) {\n              return;\n            }\n            if (onSentenceComplete) {\n              onSentenceComplete(textArray[currentTextIndex], currentTextIndex);\n            }\n            setCurrentTextIndex((prev) => (prev + 1) % textArray.length);\n            setCurrentCharIndex(0);\n\n            if (deletePauseDuration > 0) {\n              setIsDeletePausing(true);\n              return;\n            }\n          } else {\n            timeout = setTimeout(() => {\n              setDisplayedText((prev) => {\n                const segments = splitText(prev);\n                return segments.slice(0, -1).join('');\n              });\n            }, deletingSpeed);\n          }\n        } else {\n          const processedSegments = splitText(processedText);\n          if (currentCharIndex < processedSegments.length) {\n            timeout = setTimeout(\n              () => {\n                setDisplayedText((prev) => prev + processedSegments[currentCharIndex]);\n                setCurrentCharIndex((prev) => prev + 1);\n              },\n              variableSpeed ? getRandomSpeed() : typingSpeed,\n            );\n          } else if (textArray.length >= 1) {\n            if (!loop && currentTextIndex === textArray.length - 1) return;\n\n            timeout = setTimeout(() => {\n              setIsDeleting(true);\n            }, pauseDuration);\n          }\n        }\n      };\n\n      if (currentCharIndex === 0 && !isDeleting && displayedText === '') {\n        timeout = setTimeout(executeTypingAnimation, initialDelay);\n      } else {\n        executeTypingAnimation();\n      }\n\n      return () => clearTimeout(timeout);\n    }, [\n      currentCharIndex,\n      displayedText,\n      isDeleting,\n      isDeletePausing,\n      typingSpeed,\n      deletingSpeed,\n      deletePauseDuration,\n      pauseDuration,\n      textArray,\n      currentTextIndex,\n      loop,\n      initialDelay,\n      isVisible,\n      reverseMode,\n      variableSpeed,\n      onSentenceComplete,\n      getRandomSpeed,\n      splitText,\n    ]);\n\n    const getCursorStyle = () => {\n      if (cursorCharacter) return styles.cursorCustom;\n\n      switch (cursorStyle) {\n        case 'block': {\n          return styles.cursorBlock;\n        }\n        case 'dot': {\n          return styles.cursorDot;\n        }\n        case 'underscore': {\n          return styles.cursorUnderscore;\n        }\n        case 'pipe': {\n          return styles.cursor;\n        }\n      }\n    };\n\n    const currentTextLength = splitText(textArray[currentTextIndex]).length;\n    const isTyping = currentCharIndex < currentTextLength && !isDeleting;\n    const isAfterTyping = currentCharIndex === currentTextLength && !isDeleting;\n\n    const shouldHideCursor = (() => {\n      if (hideCursorWhileTyping === true) return true; // 完全隐藏\n      if (hideCursorWhileTyping === 'typing') return isTyping || isDeleting; // 打字和删除时隐藏\n      if (hideCursorWhileTyping === 'afterTyping') return isAfterTyping; // 打字完成后隐藏\n      return false;\n    })();\n\n    const textColor = getCurrentTextColor();\n    const finalCursorColor = getCurrentCursorColor();\n\n    // Split displayed text for animation\n    const characters = splitText(displayedText);\n\n    return createElement(\n      Component,\n      {\n        className: cxStyles(styles.container, className),\n        ref: containerRef,\n        ...props,\n      },\n      <>\n        <span className={styles.text} style={textColor ? { color: textColor } : undefined}>\n          {characters.map((char, index) => (\n            <Motion.span\n              animate={{ opacity: 1 }}\n              initial={{ opacity: 0 }}\n              key={`${currentTextIndex}-${index}`}\n              style={{ display: 'inline-block' }}\n              transition={{\n                duration: typingSpeed / 500,\n                ease: 'easeInOut',\n              }}\n            >\n              {char === ' ' ? '\\u00A0' : char}\n            </Motion.span>\n          ))}\n        </span>\n        {showCursor &&\n          (cursorFade ? (\n            <Motion.span\n              animate={{ opacity: shouldHideCursor ? 0 : 1 }}\n              className={cxStyles(getCursorStyle(), cursorClassName)}\n              initial={{ opacity: 0 }}\n              style={finalCursorColor ? { backgroundColor: finalCursorColor } : undefined}\n              transition={{\n                duration: shouldHideCursor ? 0.2 : cursorBlinkDuration,\n                ease: 'easeInOut',\n                repeat: shouldHideCursor ? 0 : Number.POSITIVE_INFINITY,\n                repeatType: 'reverse',\n              }}\n            >\n              {cursorCharacter}\n            </Motion.span>\n          ) : (\n            <span\n              className={cxStyles(getCursorStyle(), cursorClassName)}\n              style={{\n                backgroundColor: finalCursorColor,\n                opacity: shouldHideCursor ? 0 : 1,\n              }}\n            >\n              {cursorCharacter}\n            </span>\n          ))}\n      </>,\n    );\n  },\n);\n\nTypewriterEffect.displayName = 'TypewriterEffect';\n\nexport default TypewriterEffect;\n"],"mappings":"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"}

package/es/awesome/TypewriterEffect/style.mjs

@@ -1,7 +1,7 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/awesome/TypewriterEffect/style.ts
-const useStyles = createStyles(({ css: css$1, token, isDarkMode }) => ({
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
 	container: css$1`
     display: inline-block;
     white-space: pre-wrap;
@@ -18,7 +18,7 @@ const useStyles = createStyles(({ css: css$1, token, isDarkMode }) => ({
     border-radius: 2px;
 
     opacity: 1;
-    background-color: ${token.colorPrimary};
+    background-color: ${cssVar$1.colorPrimary};
   `,
 	cursorBlock: css$1`
     transform: translateY(10%);
@@ -32,7 +32,7 @@ const useStyles = createStyles(({ css: css$1, token, isDarkMode }) => ({
     border-radius: 2px;
 
     opacity: 1;
-    background-color: ${token.colorPrimary};
+    background-color: ${cssVar$1.colorPrimary};
   `,
 	cursorCustom: css$1`
     display: inline-block;
@@ -50,7 +50,7 @@ const useStyles = createStyles(({ css: css$1, token, isDarkMode }) => ({
     border-radius: 50%;
 
     opacity: 1;
-    background-color: ${token.colorPrimary};
+    background-color: ${cssVar$1.colorPrimary};
   `,
 	cursorHidden: css$1`
     display: none;
@@ -67,13 +67,13 @@ const useStyles = createStyles(({ css: css$1, token, isDarkMode }) => ({
     border-radius: 2px;
 
     opacity: 1;
-    background-color: ${token.colorPrimary};
+    background-color: ${cssVar$1.colorPrimary};
   `,
 	text: css$1`
-    color: ${isDarkMode ? token.colorTextLightSolid : token.colorText};
+    color: ${cssVar$1.colorText};
   `
 }));
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/TypewriterEffect/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token, isDarkMode }) => ({\n  container: css`\n    display: inline-block;\n    white-space: pre-wrap;\n  `,\n\n  cursor: css`\n    transform: translateY(10%);\n\n    display: inline-block;\n    align-items: center;\n\n    width: 3px;\n    height: 1em;\n    margin-inline-start: 0.25rem;\n    border-radius: 2px;\n\n    opacity: 1;\n    background-color: ${token.colorPrimary};\n  `,\n\n  cursorBlock: css`\n    transform: translateY(10%);\n\n    display: inline-block;\n    align-items: center;\n\n    width: 0.5em;\n    height: 1em;\n    margin-inline-start: 0.25rem;\n    border-radius: 2px;\n\n    opacity: 1;\n    background-color: ${token.colorPrimary};\n  `,\n\n  cursorCustom: css`\n    display: inline-block;\n    align-items: center;\n    margin-inline-start: 0.25rem;\n    opacity: 1;\n  `,\n\n  cursorDot: css`\n    display: inline-block;\n    align-items: center;\n\n    width: 0.75em;\n    height: 0.75em;\n    margin-inline-start: 0.25rem;\n    border-radius: 50%;\n\n    opacity: 1;\n    background-color: ${token.colorPrimary};\n  `,\n\n  cursorHidden: css`\n    display: none;\n  `,\n\n  cursorUnderscore: css`\n    transform: translateY(0.3em);\n\n    display: inline-block;\n    align-items: center;\n\n    width: 0.6em;\n    height: 0.15em;\n    margin-inline-start: 0.25rem;\n    border-radius: 2px;\n\n    opacity: 1;\n    background-color: ${token.colorPrimary};\n  `,\n\n  text: css`\n    color: ${isDarkMode ? token.colorTextLightSolid : token.colorText};\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,kBAAkB;CACrE,WAAW,KAAG;;;;CAKd,QAAQ,KAAG;;;;;;;;;;;;wBAYW,MAAM,aAAa;;CAGzC,aAAa,KAAG;;;;;;;;;;;;wBAYM,MAAM,aAAa;;CAGzC,cAAc,KAAG;;;;;;CAOjB,WAAW,KAAG;;;;;;;;;;wBAUQ,MAAM,aAAa;;CAGzC,cAAc,KAAG;;;CAIjB,kBAAkB,KAAG;;;;;;;;;;;;wBAYC,MAAM,aAAa;;CAGzC,MAAM,KAAG;aACE,aAAa,MAAM,sBAAsB,MAAM,UAAU;;CAErE,EAAE"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/awesome/TypewriterEffect/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  container: css`\n    display: inline-block;\n    white-space: pre-wrap;\n  `,\n\n  cursor: css`\n    transform: translateY(10%);\n\n    display: inline-block;\n    align-items: center;\n\n    width: 3px;\n    height: 1em;\n    margin-inline-start: 0.25rem;\n    border-radius: 2px;\n\n    opacity: 1;\n    background-color: ${cssVar.colorPrimary};\n  `,\n\n  cursorBlock: css`\n    transform: translateY(10%);\n\n    display: inline-block;\n    align-items: center;\n\n    width: 0.5em;\n    height: 1em;\n    margin-inline-start: 0.25rem;\n    border-radius: 2px;\n\n    opacity: 1;\n    background-color: ${cssVar.colorPrimary};\n  `,\n\n  cursorCustom: css`\n    display: inline-block;\n    align-items: center;\n    margin-inline-start: 0.25rem;\n    opacity: 1;\n  `,\n\n  cursorDot: css`\n    display: inline-block;\n    align-items: center;\n\n    width: 0.75em;\n    height: 0.75em;\n    margin-inline-start: 0.25rem;\n    border-radius: 50%;\n\n    opacity: 1;\n    background-color: ${cssVar.colorPrimary};\n  `,\n\n  cursorHidden: css`\n    display: none;\n  `,\n\n  cursorUnderscore: css`\n    transform: translateY(0.3em);\n\n    display: inline-block;\n    align-items: center;\n\n    width: 0.6em;\n    height: 0.15em;\n    margin-inline-start: 0.25rem;\n    border-radius: 2px;\n\n    opacity: 1;\n    background-color: ${cssVar.colorPrimary};\n  `,\n\n  text: css`\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,WAAW,KAAG;;;;CAKd,QAAQ,KAAG;;;;;;;;;;;;wBAYWA,SAAO,aAAa;;CAG1C,aAAa,KAAG;;;;;;;;;;;;wBAYMA,SAAO,aAAa;;CAG1C,cAAc,KAAG;;;;;;CAOjB,WAAW,KAAG;;;;;;;;;;wBAUQA,SAAO,aAAa;;CAG1C,cAAc,KAAG;;;CAIjB,kBAAkB,KAAG;;;;;;;;;;;;wBAYCA,SAAO,aAAa;;CAG1C,MAAM,KAAG;aACEA,SAAO,UAAU;;CAE7B,EAAE"}

package/es/brand/BrandLoading/{style-Cz42xGgB.css → style-DX648z7a.css}

@@ -32,4 +32,4 @@
 }
 
 
-/*# sourceMappingURL=style-Cz42xGgB.css.map*/
+/*# sourceMappingURL=style-DX648z7a.css.map*/

package/es/brand/BrandLoading/{style-Cz42xGgB.css.map → style-DX648z7a.css.map}

@@ -1 +1 @@
-{"version":3,"file":"style-Cz42xGgB.css","names":[],"sources":["../../../src/brand/BrandLoading/style.css"],"sourcesContent":["@keyframes draw {\n  0% {\n    stroke-dashoffset: 1000;\n  }\n\n  100% {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes fill {\n  30% {\n    fill-opacity: 5%;\n  }\n\n  100% {\n    fill-opacity: 100%;\n  }\n}\n\n.lobe-brand-loading path {\n  fill: currentcolor;\n  fill-opacity: 0%;\n  stroke: currentcolor;\n  stroke-dasharray: 1000;\n  stroke-dashoffset: 1000;\n  stroke-width: 0.25em;\n\n  animation:\n    draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n    fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA"}
+{"version":3,"file":"style-DX648z7a.css","names":[],"sources":["../../../src/brand/BrandLoading/style.css"],"sourcesContent":["@keyframes draw {\n  0% {\n    stroke-dashoffset: 1000;\n  }\n\n  100% {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes fill {\n  30% {\n    fill-opacity: 5%;\n  }\n\n  100% {\n    fill-opacity: 100%;\n  }\n}\n\n.lobe-brand-loading path {\n  fill: currentcolor;\n  fill-opacity: 0%;\n  stroke: currentcolor;\n  stroke-dasharray: 1000;\n  stroke-dashoffset: 1000;\n  stroke-width: 0.25em;\n\n  animation:\n    draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n    fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA"}

package/es/brand/LobeChat/index.d.mts

@@ -1,5 +1,5 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react1 from "react";
+import * as react28 from "react";
 import { ReactNode } from "react";
 
 //#region src/brand/LobeChat/index.d.ts
@@ -8,7 +8,7 @@ interface LobeChatProps extends DivProps {
   size?: number;
   type?: '3d' | 'flat' | 'mono' | 'text' | 'combine';
 }
-declare const LobeChat: react1.NamedExoticComponent<LobeChatProps>;
+declare const LobeChat: react28.NamedExoticComponent<LobeChatProps>;
 //#endregion
 export { LobeChat, LobeChatProps };
 //# sourceMappingURL=index.d.mts.map

package/es/brand/LobeChat/index.mjs

@@ -2,19 +2,17 @@
 
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import LobeChatText_default from "../LobeChatText/index.mjs";
-import { useStyles } from "../LobeHub/style.mjs";
+import { styles } from "../LobeHub/style.mjs";
 import Logo3d_default from "../Logo3d/index.mjs";
 import LogoFlat_default from "../LogoFlat/index.mjs";
-import LogoMono_default from "../LogoMono/index.mjs";
+import { icons_default } from "../LogoMono/index.mjs";
 import Divider_default from "../components/Divider.mjs";
 import { memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useTheme } from "antd-style";
+import { cssVar } from "antd-style";
 
 //#region src/brand/LobeChat/index.tsx
 const LobeChat = memo(({ type = "3d", size = 32, style, extra, className, ...rest }) => {
-	const theme = useTheme();
-	const { styles } = useStyles();
 	let logoComponent;
 	switch (type) {
 		case "3d":
@@ -31,7 +29,7 @@ const LobeChat = memo(({ type = "3d", size = 32, style, extra, className, ...res
 			});
 			break;
 		case "mono":
-			logoComponent = /* @__PURE__ */ jsx(LogoMono_default, {
+			logoComponent = /* @__PURE__ */ jsx(icons_default, {
 				size,
 				style
 			});
@@ -75,7 +73,7 @@ const LobeChat = memo(({ type = "3d", size = 32, style, extra, className, ...res
 			logoComponent,
 			/* @__PURE__ */ jsx(Divider_default, {
 				size: extraSize,
-				style: { color: theme.colorFill }
+				style: { color: cssVar.colorFill }
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: styles.extraTitle,

package/es/brand/LobeChat/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["logoComponent: ReactNode","Logo3d","LogoFlat","LogoMono","LogoText","Flexbox","Divider"],"sources":["../../../src/brand/LobeChat/index.tsx"],"sourcesContent":["'use client';\n\nimport { useTheme } from 'antd-style';\nimport { type ReactNode, memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport LogoText from '@/brand/LobeChatText';\nimport { useStyles } from '@/brand/LobeHub/style';\nimport Logo3d from '@/brand/Logo3d';\nimport LogoFlat from '@/brand/LogoFlat';\nimport LogoMono from '@/brand/LogoMono';\nimport Divider from '@/brand/components/Divider';\nimport { DivProps } from '@/types';\n\nexport interface LobeChatProps extends DivProps {\n  extra?: ReactNode;\n  size?: number;\n  type?: '3d' | 'flat' | 'mono' | 'text' | 'combine';\n}\n\nconst LobeChat = memo<LobeChatProps>(\n  ({ type = '3d', size = 32, style, extra, className, ...rest }) => {\n    const theme = useTheme();\n    const { styles } = useStyles();\n    let logoComponent: ReactNode;\n\n    switch (type) {\n      case '3d': {\n        logoComponent = <Logo3d alt={'LobeChat'} size={size} {...rest} />;\n        break;\n      }\n      case 'flat': {\n        logoComponent = <LogoFlat size={size} style={style} />;\n        break;\n      }\n      case 'mono': {\n        logoComponent = <LogoMono size={size} style={style} />;\n        break;\n      }\n      case 'text': {\n        logoComponent = (\n          <LogoText className={className} size={size} style={style} {...(rest as any)} />\n        );\n        break;\n      }\n      case 'combine': {\n        logoComponent = (\n          <>\n            <Logo3d alt=\"LobeChat\" size={size} />\n            <LogoText size={size} style={{ marginLeft: Math.round(size / 4) }} />\n          </>\n        );\n\n        if (!extra)\n          logoComponent = (\n            <Flexbox align={'center'} className={className} flex={'none'} horizontal style={style}>\n              {logoComponent}\n            </Flexbox>\n          );\n\n        break;\n      }\n    }\n\n    if (!extra) return logoComponent;\n\n    const extraSize = Math.round((size / 3) * 1.9);\n\n    return (\n      <Flexbox\n        align={'center'}\n        className={className}\n        flex={'none'}\n        horizontal\n        style={style}\n        {...rest}\n      >\n        {logoComponent}\n        <Divider size={extraSize} style={{ color: theme.colorFill }} />\n        <div className={styles.extraTitle} style={{ fontSize: extraSize }}>\n          {extra}\n        </div>\n      </Flexbox>\n    );\n  },\n);\n\nLobeChat.displayName = 'LobeChatBrand';\n\nexport default LobeChat;\n"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,WAAW,MACd,EAAE,OAAO,MAAM,OAAO,IAAI,OAAO,OAAO,WAAW,GAAG,WAAW;CAChE,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,WAAW,WAAW;CAC9B,IAAIA;AAEJ,SAAQ,MAAR;EACE,KAAK;AACH,mBAAgB,oBAACC;IAAO,KAAK;IAAkB;IAAM,GAAI;KAAQ;AACjE;EAEF,KAAK;AACH,mBAAgB,oBAACC;IAAe;IAAa;KAAS;AACtD;EAEF,KAAK;AACH,mBAAgB,oBAACC;IAAe;IAAa;KAAS;AACtD;EAEF,KAAK;AACH,mBACE,oBAACC;IAAoB;IAAiB;IAAa;IAAO,GAAK;KAAgB;AAEjF;EAEF,KAAK;AACH,mBACE,8CACE,oBAACH;IAAO,KAAI;IAAiB;KAAQ,EACrC,oBAACG;IAAe;IAAM,OAAO,EAAE,YAAY,KAAK,MAAM,OAAO,EAAE,EAAE;KAAI,IACpE;AAGL,OAAI,CAAC,MACH,iBACE,oBAACC;IAAQ,OAAO;IAAqB;IAAW,MAAM;IAAQ;IAAkB;cAC7E;KACO;AAGd;;AAIJ,KAAI,CAAC,MAAO,QAAO;CAEnB,MAAM,YAAY,KAAK,MAAO,OAAO,IAAK,IAAI;AAE9C,QACE,qBAACA;EACC,OAAO;EACI;EACX,MAAM;EACN;EACO;EACP,GAAI;;GAEH;GACD,oBAACC;IAAQ,MAAM;IAAW,OAAO,EAAE,OAAO,MAAM,WAAW;KAAI;GAC/D,oBAAC;IAAI,WAAW,OAAO;IAAY,OAAO,EAAE,UAAU,WAAW;cAC9D;KACG;;GACE;EAGf;AAED,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"index.mjs","names":["logoComponent: ReactNode","Logo3d","LogoFlat","LogoMono","LogoText","Flexbox","Divider"],"sources":["../../../src/brand/LobeChat/index.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } from 'antd-style';\nimport { type ReactNode, memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport LogoText from '@/brand/LobeChatText';\nimport { styles } from '@/brand/LobeHub/style';\nimport Logo3d from '@/brand/Logo3d';\nimport LogoFlat from '@/brand/LogoFlat';\nimport LogoMono from '@/brand/LogoMono';\nimport Divider from '@/brand/components/Divider';\nimport { DivProps } from '@/types';\n\nexport interface LobeChatProps extends DivProps {\n  extra?: ReactNode;\n  size?: number;\n  type?: '3d' | 'flat' | 'mono' | 'text' | 'combine';\n}\n\nconst LobeChat = memo<LobeChatProps>(\n  ({ type = '3d', size = 32, style, extra, className, ...rest }) => {\n    let logoComponent: ReactNode;\n\n    switch (type) {\n      case '3d': {\n        logoComponent = <Logo3d alt={'LobeChat'} size={size} {...rest} />;\n        break;\n      }\n      case 'flat': {\n        logoComponent = <LogoFlat size={size} style={style} />;\n        break;\n      }\n      case 'mono': {\n        logoComponent = <LogoMono size={size} style={style} />;\n        break;\n      }\n      case 'text': {\n        logoComponent = (\n          <LogoText className={className} size={size} style={style} {...(rest as any)} />\n        );\n        break;\n      }\n      case 'combine': {\n        logoComponent = (\n          <>\n            <Logo3d alt=\"LobeChat\" size={size} />\n            <LogoText size={size} style={{ marginLeft: Math.round(size / 4) }} />\n          </>\n        );\n\n        if (!extra)\n          logoComponent = (\n            <Flexbox align={'center'} className={className} flex={'none'} horizontal style={style}>\n              {logoComponent}\n            </Flexbox>\n          );\n\n        break;\n      }\n    }\n\n    if (!extra) return logoComponent;\n\n    const extraSize = Math.round((size / 3) * 1.9);\n\n    return (\n      <Flexbox\n        align={'center'}\n        className={className}\n        flex={'none'}\n        horizontal\n        style={style}\n        {...rest}\n      >\n        {logoComponent}\n        <Divider size={extraSize} style={{ color: cssVar.colorFill }} />\n        <div className={styles.extraTitle} style={{ fontSize: extraSize }}>\n          {extra}\n        </div>\n      </Flexbox>\n    );\n  },\n);\n\nLobeChat.displayName = 'LobeChatBrand';\n\nexport default LobeChat;\n"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,WAAW,MACd,EAAE,OAAO,MAAM,OAAO,IAAI,OAAO,OAAO,WAAW,GAAG,WAAW;CAChE,IAAIA;AAEJ,SAAQ,MAAR;EACE,KAAK;AACH,mBAAgB,oBAACC;IAAO,KAAK;IAAkB;IAAM,GAAI;KAAQ;AACjE;EAEF,KAAK;AACH,mBAAgB,oBAACC;IAAe;IAAa;KAAS;AACtD;EAEF,KAAK;AACH,mBAAgB,oBAACC;IAAe;IAAa;KAAS;AACtD;EAEF,KAAK;AACH,mBACE,oBAACC;IAAoB;IAAiB;IAAa;IAAO,GAAK;KAAgB;AAEjF;EAEF,KAAK;AACH,mBACE,8CACE,oBAACH;IAAO,KAAI;IAAiB;KAAQ,EACrC,oBAACG;IAAe;IAAM,OAAO,EAAE,YAAY,KAAK,MAAM,OAAO,EAAE,EAAE;KAAI,IACpE;AAGL,OAAI,CAAC,MACH,iBACE,oBAACC;IAAQ,OAAO;IAAqB;IAAW,MAAM;IAAQ;IAAkB;cAC7E;KACO;AAGd;;AAIJ,KAAI,CAAC,MAAO,QAAO;CAEnB,MAAM,YAAY,KAAK,MAAO,OAAO,IAAK,IAAI;AAE9C,QACE,qBAACA;EACC,OAAO;EACI;EACX,MAAM;EACN;EACO;EACP,GAAI;;GAEH;GACD,oBAACC;IAAQ,MAAM;IAAW,OAAO,EAAE,OAAO,OAAO,WAAW;KAAI;GAChE,oBAAC;IAAI,WAAW,OAAO;IAAY,OAAO,EAAE,UAAU,WAAW;cAC9D;KACG;;GACE;EAGf;AAED,SAAS,cAAc;AAEvB,uBAAe"}