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

package/es/awesome/LogoMarquee/LogoMarquee.mjs

@@ -5,7 +5,7 @@ import { logoMarqueeMarker } from "./marker.stylex.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/LogoMarquee/LogoMarquee.tsx
 const Track = ({ hidden, iconOnly, iconSize, items }) => /* @__PURE__ */ jsx("div", {
@@ -42,7 +42,7 @@ const LogoMarquee = memo(({ caption, className, duration = 28, gap = 36, iconOnl
 				items
 			})]
 		}), caption && /* @__PURE__ */ jsx("p", {
-			className: clsx("lobe-logo-marquee-caption", stylex.props(styles.caption).className),
+			className: clsx$1("lobe-logo-marquee-caption", stylex.props(styles.caption).className),
 			children: caption
 		})]
 	});

package/es/awesome/LogoMarquee/LogoMarquee.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LogoMarquee.mjs","names":[],"sources":["../../../src/awesome/LogoMarquee/LogoMarquee.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { type CSSProperties, memo } from 'react';\n\nimport { renderLandingIcon } from '@/awesome/landingIcon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { logoMarqueeMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { LogoMarqueeProps } from './type';\n\nconst Track = ({\n  hidden,\n  iconOnly,\n  iconSize,\n  items,\n}: Pick<LogoMarqueeProps, 'iconOnly' | 'items'> & { hidden?: boolean; iconSize: number }) => (\n  <div aria-hidden={hidden || undefined} {...stylex.props(styles.track)}>\n    {items.map(({ icon, label }) => (\n      <span key={label} title={iconOnly ? label : undefined} {...stylex.props(styles.item)}>\n        {renderLandingIcon(icon, iconSize)}\n        {!iconOnly && label}\n      </span>\n    ))}\n  </div>\n);\n\nconst LogoMarquee = memo<LogoMarqueeProps>(\n  ({\n    caption,\n    className,\n    duration = 28,\n    gap = 36,\n    iconOnly = false,\n    iconSize = 18,\n    items,\n    maxWidth = 640,\n    style,\n    ...rest\n  }) => {\n    const variables = {\n      '--logo-marquee-duration': `${duration}s`,\n      '--logo-marquee-gap': `${gap}px`,\n      '--logo-marquee-max-width': typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\n    } as CSSProperties;\n\n    return (\n      <div {...styleProps(styles.root, className, { ...variables, ...style })} {...rest}>\n        <div {...stylex.props(logoMarqueeMarker, styles.viewport)}>\n          <Track iconOnly={iconOnly} iconSize={iconSize} items={items} />\n          <Track hidden iconOnly={iconOnly} iconSize={iconSize} items={items} />\n        </div>\n        {caption && (\n          <p className={clsx('lobe-logo-marquee-caption', stylex.props(styles.caption).className)}>\n            {caption}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nLogoMarquee.displayName = 'LogoMarquee';\n\nexport default LogoMarquee;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAS,EACb,QACA,UACA,UACA,YAII,oBAAC,OAAD;CAAK,eAAa,UAAU,KAAA;CAAW,GAAI,OAAO,MAAM,OAAO,KAAK;CACrE,UAAA,MAAM,KAAK,EACZ,MACA,YACI,qBAAC,QAAD;EAAkB,OAAO,WAAW,QAAQ,KAAA;EAAW,GAAI,OAAO,MAAM,OAAO,IAAI;EAAnF,UAAA,CACC,kBAAkB,MAAM,QAAQ,GAChC,CAAC,YAAY,KACV;CAHO,GAAA,KAGP,CAAC;AACN,CAAA;AACP,MAAM,cAAc,MAAwB,EAC1C,SACA,WACA,WAAW,IACX,MAAM,IACN,WAAW,OACX,WAAW,IACX,OACA,WAAW,KACX,OACA,GAAG,WACC;CACJ,MAAM,YAAY;EAChB,2BAA2B,GAAG,SAAS;EACvC,sBAAsB,GAAG,IAAI;EAC7B,4BAA4B,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;CAC/E;CACA,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,MAAM,WAAW;GACjD,GAAG;GACH,GAAG;EACL,CAAC;EAAG,GAAI;EAHD,UAAA,CAID,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,mBAAmB,OAAO,QAAQ;GAAxD,UAAA,CACE,oBAAC,OAAD;IAAiB;IAAoB;IAAiB;GAAQ,CAAA,GAC9D,oBAAC,OAAD;IAAO,QAAA;IAAiB;IAAoB;IAAiB;GAAQ,CAAA,CAClE;EACJ,CAAA,GAAA,WAAW,oBAAC,KAAD;GAAG,WAAW,KAAK,6BAA6B,OAAO,MAAM,OAAO,OAAO,CAAC,CAAC,SAAS;GAC7F,UAAA;EACA,CAAA,CACF;;AACX,CAAC;AACD,YAAY,cAAc"}
+{"version":3,"file":"LogoMarquee.mjs","names":["clsx"],"sources":["../../../src/awesome/LogoMarquee/LogoMarquee.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { type CSSProperties, memo } from 'react';\n\nimport { renderLandingIcon } from '@/awesome/landingIcon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { logoMarqueeMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { LogoMarqueeProps } from './type';\n\nconst Track = ({\n  hidden,\n  iconOnly,\n  iconSize,\n  items,\n}: Pick<LogoMarqueeProps, 'iconOnly' | 'items'> & { hidden?: boolean; iconSize: number }) => (\n  <div aria-hidden={hidden || undefined} {...stylex.props(styles.track)}>\n    {items.map(({ icon, label }) => (\n      <span key={label} title={iconOnly ? label : undefined} {...stylex.props(styles.item)}>\n        {renderLandingIcon(icon, iconSize)}\n        {!iconOnly && label}\n      </span>\n    ))}\n  </div>\n);\n\nconst LogoMarquee = memo<LogoMarqueeProps>(\n  ({\n    caption,\n    className,\n    duration = 28,\n    gap = 36,\n    iconOnly = false,\n    iconSize = 18,\n    items,\n    maxWidth = 640,\n    style,\n    ...rest\n  }) => {\n    const variables = {\n      '--logo-marquee-duration': `${duration}s`,\n      '--logo-marquee-gap': `${gap}px`,\n      '--logo-marquee-max-width': typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\n    } as CSSProperties;\n\n    return (\n      <div {...styleProps(styles.root, className, { ...variables, ...style })} {...rest}>\n        <div {...stylex.props(logoMarqueeMarker, styles.viewport)}>\n          <Track iconOnly={iconOnly} iconSize={iconSize} items={items} />\n          <Track hidden iconOnly={iconOnly} iconSize={iconSize} items={items} />\n        </div>\n        {caption && (\n          <p className={clsx('lobe-logo-marquee-caption', stylex.props(styles.caption).className)}>\n            {caption}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nLogoMarquee.displayName = 'LogoMarquee';\n\nexport default LogoMarquee;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAS,EACb,QACA,UACA,UACA,YAII,oBAAC,OAAD;CAAK,eAAa,UAAU,KAAA;CAAW,GAAI,OAAO,MAAM,OAAO,KAAK;CACrE,UAAA,MAAM,KAAK,EACZ,MACA,YACI,qBAAC,QAAD;EAAkB,OAAO,WAAW,QAAQ,KAAA;EAAW,GAAI,OAAO,MAAM,OAAO,IAAI;EAAnF,UAAA,CACC,kBAAkB,MAAM,QAAQ,GAChC,CAAC,YAAY,KACV;CAHO,GAAA,KAGP,CAAC;AACN,CAAA;AACP,MAAM,cAAc,MAAwB,EAC1C,SACA,WACA,WAAW,IACX,MAAM,IACN,WAAW,OACX,WAAW,IACX,OACA,WAAW,KACX,OACA,GAAG,WACC;CACJ,MAAM,YAAY;EAChB,2BAA2B,GAAG,SAAS;EACvC,sBAAsB,GAAG,IAAI;EAC7B,4BAA4B,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;CAC/E;CACA,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,MAAM,WAAW;GACjD,GAAG;GACH,GAAG;EACL,CAAC;EAAG,GAAI;EAHD,UAAA,CAID,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,mBAAmB,OAAO,QAAQ;GAAxD,UAAA,CACE,oBAAC,OAAD;IAAiB;IAAoB;IAAiB;GAAQ,CAAA,GAC9D,oBAAC,OAAD;IAAO,QAAA;IAAiB;IAAoB;IAAiB;GAAQ,CAAA,CAClE;EACJ,CAAA,GAAA,WAAW,oBAAC,KAAD;GAAG,WAAWA,OAAK,6BAA6B,OAAO,MAAM,OAAO,OAAO,CAAC,CAAC,SAAS;GAC7F,UAAA;EACA,CAAA,CACF;;AACX,CAAC;AACD,YAAY,cAAc"}

package/es/awesome/TypewriterEffect/TypewriterEffect.mjs

@@ -3,7 +3,7 @@ import { useMotionComponent } from "../../MotionProvider/index.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 clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#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 }) => {
@@ -134,7 +134,7 @@ const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed =
 	const finalCursorColor = getCurrentCursorColor();
 	const characters = splitText(displayedText);
 	return createElement(Component, {
-		className: clsx(stylex.props(styles.container).className, className),
+		className: clsx$1(stylex.props(styles.container).className, className),
 		ref: containerRef,
 		...props
 	}, /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
@@ -152,7 +152,7 @@ const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed =
 		}, `${currentTextIndex}-${index}`))
 	}), showCursor && (cursorFade ? /* @__PURE__ */ jsx(Motion.span, {
 		animate: { opacity: shouldHideCursor ? 0 : 1 },
-		className: clsx(stylex.props(getCursorStyle()).className, cursorClassName),
+		className: clsx$1(stylex.props(getCursorStyle()).className, cursorClassName),
 		initial: { opacity: 0 },
 		style: finalCursorColor ? { backgroundColor: finalCursorColor } : void 0,
 		transition: {
@@ -163,7 +163,7 @@ const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed =
 		},
 		children: cursorCharacter
 	}) : /* @__PURE__ */ jsx("span", {
-		className: clsx(stylex.props(getCursorStyle()).className, cursorClassName),
+		className: clsx$1(stylex.props(getCursorStyle()).className, cursorClassName),
 		style: {
 			backgroundColor: finalCursorColor,
 			opacity: shouldHideCursor ? 0 : 1

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

@@ -1 +1 @@
-{"version":3,"file":"TypewriterEffect.mjs","names":[],"sources":["../../../src/awesome/TypewriterEffect/TypewriterEffect.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\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 [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: clsx(stylex.props(styles.container).className, className),\n        ref: containerRef,\n        ...props,\n      },\n      <>\n        <span {...stylex.props(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={clsx(stylex.props(getCursorStyle()).className, 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={clsx(stylex.props(getCursorStyle()).className, 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":";;;;;;;;AAQA,MAAM,mBAAmB,MAA6B,EACpD,WACA,IAAI,YAAY,OAChB,cAAc,KACd,eAAe,GACf,gBAAgB,KAChB,gBAAgB,IAChB,sBAAsB,GACtB,OAAO,MACP,YAAY,IACZ,OACA,aAAa,MACb,wBAAwB,OACxB,iBACA,kBAAkB,IAClB,aACA,sBAAsB,IACtB,aAAa,MACb,cAAc,QACd,aAAa,CAAC,GACd,eACA,oBACA,iBAAiB,OACjB,cAAc,OACd,cAAc,YACd,GAAG,YACwB;CAC3B,MAAM,SAAS,mBAAmB;CAClC,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;CACrD,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,CAAC;CAC1D,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,CAAC;CAC1D,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,cAAc;CAC1D,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,KAAK;CAC5D,MAAM,eAAe,OAAoB,IAAI;CAC7C,MAAM,YAAY,cAAc,MAAM,QAAQ,SAAS,IAAI,YAAY,CAAC,SAAS,GAAG,CAAC,SAAS,CAAC;CAG/F,MAAM,YAAY,aAAa,SAA2B;EAExD,IAAI,OAAO,SAAS,eAAe,eAAe,MAAM;GACtD,MAAM,YAAY,IAAI,KAAK,UAAU,KAAA,GAAW,EAC9C,aAAa,YACf,CAAC;GACD,OAAO,MAAM,KAAK,UAAU,QAAQ,IAAI,IAAG,YAAW,QAAQ,OAAO;EACvE;EAGA,IAAI,gBAAgB,QAElB,OAAO,KAAK,MAAM,OAAO,CAAC,CAAC,OAAO,OAAO;EAI3C,OAAO,MAAM,KAAK,IAAI;CACxB,GAAG,CAAC,WAAW,CAAC;CAChB,MAAM,iBAAiB,kBAAkB;EACvC,IAAI,CAAC,eAAe,OAAO;EAC3B,MAAM,EACJ,KACA,QACE;EACJ,OAAO,KAAK,OAAO,KAAK,MAAM,OAAO;CACvC,GAAG,CAAC,eAAe,WAAW,CAAC;CAC/B,MAAM,4BAA4B;EAChC,IAAI,WAAW,SAAS,GACtB,OAAO,WAAW,mBAAmB,WAAW;EAElD,OAAO;CACT;CACA,MAAM,8BAA8B;EAClC,OAAO,eAAe;CACxB;CACA,gBAAgB;EACd,IAAI,CAAC,kBAAkB,CAAC,aAAa,SAAS;EAC9C,MAAM,WAAW,IAAI,sBAAqB,YAAW;GACnD,QAAQ,SAAQ,UAAS;IACvB,IAAI,MAAM,gBACR,aAAa,IAAI;GAErB,CAAC;EACH,GAAG,EACD,WAAW,GACb,CAAC;EACD,SAAS,QAAQ,aAAa,OAAO;EACrC,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,cAAc,CAAC;CACnB,gBAAgB;EACd,IAAI,CAAC,WAAW;EAChB,IAAI;EACJ,MAAM,cAAc,UAAU;EAE9B,MAAM,eAAe,UAAU,WAAW;EAC1C,MAAM,gBAAgB,cAAc,aAAa,QAAQ,CAAC,CAAC,KAAK,EAAE,IAAI;EAGtE,IAAI,iBAAiB;GACnB,UAAU,iBAAiB;IACzB,mBAAmB,KAAK;GAC1B,GAAG,mBAAmB;GACtB,aAAa,aAAa,OAAO;EACnC;EACA,MAAM,+BAA+B;GACnC,IAAI,YAAY;IACd,IAAI,kBAAkB,IAAI;KACxB,cAAc,KAAK;KACnB,IAAI,qBAAqB,UAAU,SAAS,KAAK,CAAC,MAChD;KAEF,IAAI,oBACF,mBAAmB,UAAU,mBAAmB,gBAAgB;KAElE,qBAAoB,UAAS,OAAO,KAAK,UAAU,MAAM;KACzD,oBAAoB,CAAC;KACrB,IAAI,sBAAsB,GAAG;MAC3B,mBAAmB,IAAI;MACvB;KACF;IACF,OACE,UAAU,iBAAiB;KACzB,kBAAiB,SAAQ;MAEvB,OADiB,UAAU,IACb,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,KAAK,EAAE;KACtC,CAAC;IACH,GAAG,aAAa;GAEpB,OAAO;IACL,MAAM,oBAAoB,UAAU,aAAa;IACjD,IAAI,mBAAmB,kBAAkB,QACvC,UAAU,iBAAiB;KACzB,kBAAiB,SAAQ,OAAO,kBAAkB,iBAAiB;KACnE,qBAAoB,SAAQ,OAAO,CAAC;IACtC,GAAG,gBAAgB,eAAe,IAAI,WAAW;SAC5C,IAAI,UAAU,UAAU,GAAG;KAChC,IAAI,CAAC,QAAQ,qBAAqB,UAAU,SAAS,GAAG;KACxD,UAAU,iBAAiB;MACzB,cAAc,IAAI;KACpB,GAAG,aAAa;IAClB;GACF;EACF;EACA,IAAI,qBAAqB,KAAK,CAAC,cAAc,kBAAkB,IAC7D,UAAU,WAAW,wBAAwB,YAAY;OAEzD,uBAAuB;EAEzB,aAAa,aAAa,OAAO;CACnC,GAAG;EAAC;EAAkB;EAAe;EAAY;EAAiB;EAAa;EAAe;EAAqB;EAAe;EAAW;EAAkB;EAAM;EAAc;EAAW;EAAa;EAAe;EAAoB;EAAgB;CAAS,CAAC;CACxQ,MAAM,uBAAuB;EAC3B,IAAI,iBAAiB,OAAO,OAAO;EACnC,QAAQ,aAAR;GACE,KAAK,SAED,OAAO,OAAO;GAElB,KAAK,OAED,OAAO,OAAO;GAElB,KAAK,cAED,OAAO,OAAO;GAElB,KAAK,QAED,OAAO,OAAO;EAEpB;CACF;CACA,MAAM,oBAAoB,UAAU,UAAU,iBAAiB,CAAC,CAAC;CACjE,MAAM,WAAW,mBAAmB,qBAAqB,CAAC;CAC1D,MAAM,gBAAgB,qBAAqB,qBAAqB,CAAC;CACjE,MAAM,0BAA0B;EAC9B,IAAI,0BAA0B,MAAM,OAAO;EAC3C,IAAI,0BAA0B,UAAU,OAAO,YAAY;EAC3D,IAAI,0BAA0B,eAAe,OAAO;EACpD,OAAO;CACT,EAAA,CAAG;CACH,MAAM,YAAY,oBAAoB;CACtC,MAAM,mBAAmB,sBAAsB;CAG/C,MAAM,aAAa,UAAU,aAAa;CAC1C,OAAO,cAAc,WAAW;EAC9B,WAAW,KAAK,OAAO,MAAM,OAAO,SAAS,CAAC,CAAC,WAAW,SAAS;EACnE,KAAK;EACL,GAAG;CACL,GAAG,qBAAA,YAAA,EAAA,UAAA,CACG,oBAAC,QAAD;EAAM,GAAI,OAAO,MAAM,OAAO,IAAI;EAAG,OAAO,YAAY,EAC1D,OAAO,UACT,IAAI,KAAA;EACG,UAAA,WAAW,KAAK,MAAM,UAAU,oBAAC,OAAO,MAAR;GAAa,SAAS,EACzD,SAAS,EACX;GAAG,SAAS,EACV,SAAS,EACX;GAAwC,OAAO,EAC7C,SAAS,eACX;GAAG,YAAY;IACb,UAAU,cAAc;IACxB,MAAM;GACR;GACS,UAAA,SAAS,MAAM,SAAW;EAChB,GAPX,GAAG,iBAAiB,GAAG,OAOZ,CAAC;CACZ,CAAA,GACL,eAAe,aAAa,oBAAC,OAAO,MAAR;EAAa,SAAS,EACrD,SAAS,mBAAmB,IAAI,EAClC;EAAG,WAAW,KAAK,OAAO,MAAM,eAAe,CAAC,CAAC,CAAC,WAAW,eAAe;EAAG,SAAS,EACtF,SAAS,EACX;EAAG,OAAO,mBAAmB,EAC3B,iBAAiB,iBACnB,IAAI,KAAA;EAAW,YAAY;GACzB,UAAU,mBAAmB,KAAM;GACnC,MAAM;GACN,QAAQ,mBAAmB,IAAI,OAAO;GACtC,YAAY;EACd;EACW,UAAA;CACU,CAAA,IAAI,oBAAC,QAAD;EAAM,WAAW,KAAK,OAAO,MAAM,eAAe,CAAC,CAAC,CAAC,WAAW,eAAe;EAAG,OAAO;GAChH,iBAAiB;GACjB,SAAS,mBAAmB,IAAI;EAClC;EACW,UAAA;CACG,CAAA,EACV,EAAA,CAAA,CAAC;AACT,CAAC;AACD,iBAAiB,cAAc"}
+{"version":3,"file":"TypewriterEffect.mjs","names":["clsx"],"sources":["../../../src/awesome/TypewriterEffect/TypewriterEffect.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\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 [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: clsx(stylex.props(styles.container).className, className),\n        ref: containerRef,\n        ...props,\n      },\n      <>\n        <span {...stylex.props(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={clsx(stylex.props(getCursorStyle()).className, 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={clsx(stylex.props(getCursorStyle()).className, 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/landingActions.mjs

@@ -4,7 +4,7 @@ import { isExternalHref, renderLandingLink } from "./landingLink.mjs";
 import BottomGradientButton from "./BottomGradientButton/BottomGradientButton.mjs";
 import { Fragment } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/awesome/landingActions.tsx
 const styles = {
 	group: {
@@ -27,7 +27,7 @@ const LandingActions = ({ actions, className, onNavigate, renderLink, size = "la
 		styles.group,
 		size === "small" ? styles.groupSmall : styles.groupLarge,
 		xstyle
-	], clsx("lobe-landing-actions", className)),
+	], clsx$1("lobe-landing-actions", className)),
 	"data-size": size,
 	children: actions.map(({ external, href, icon, iconPlacement = "start", label, primary }) => {
 		const iconNode = icon && /* @__PURE__ */ jsx(Icon, {

package/es/awesome/landingActions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"landingActions.mjs","names":[],"sources":["../../src/awesome/landingActions.tsx"],"sourcesContent":["import './landingActions.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Fragment, type ReactNode } from 'react';\n\nimport BottomGradientButton from '@/awesome/BottomGradientButton';\nimport { isExternalHref, type LandingLinkRender, renderLandingLink } from '@/awesome/landingLink';\nimport Icon, { type IconProps } from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nexport interface LandingAction {\n  /** Opens in a new tab. Inferred from absolute URLs when omitted. */\n  external?: boolean;\n  href: string;\n  icon?: IconProps['icon'];\n  /** Places the icon after the label, e.g. for an arrow. */\n  iconPlacement?: 'start' | 'end';\n  label: ReactNode;\n  /** The primary action is a filled pill; others render as BottomGradientButton. */\n  primary?: boolean;\n}\n\nconst styles = stylex.create({\n  action: {\n    gap: 8,\n    borderColor: 'transparent',\n    borderRadius: 999,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    paddingBlock: 0,\n    paddingInline: 22,\n    transition: 'filter 140ms ease, transform 90ms ease',\n    alignItems: 'center',\n    backgroundColor: cssVar.colorText,\n    color: cssVar.colorBgContainer,\n    display: 'inline-flex',\n    filter: { 'default': null, ':hover': 'brightness(1.06)' },\n    fontSize: cssVar.fontSize,\n    fontWeight: 600,\n    justifyContent: 'center',\n    minBlockSize: 44,\n    textDecoration: 'none',\n    transform: { 'default': null, ':active': 'scale(0.97)' },\n    whiteSpace: 'nowrap',\n  },\n  actionSmall: {\n    gap: 6,\n    paddingInline: 14,\n    fontSize: cssVar.fontSizeSM,\n    minBlockSize: 34,\n  },\n  group: {\n    gap: 12,\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  groupLarge: {\n    alignSelf: { default: null, [media.mobile]: 'stretch' },\n  },\n  groupSmall: {\n    gap: 8,\n  },\n});\n\nexport type LandingNavigate = (href: string) => void;\n\nexport interface LandingActionsProps {\n  actions: LandingAction[];\n  className?: string;\n  /** Client-side navigation for internal non-primary actions, which render as buttons with an href. */\n  onNavigate?: LandingNavigate;\n  renderLink?: LandingLinkRender;\n  size?: 'large' | 'small';\n  xstyle?: Parameters<typeof styleProps>[0];\n}\n\nexport const LandingActions = ({\n  actions,\n  className,\n  onNavigate,\n  renderLink,\n  size = 'large',\n  xstyle,\n}: LandingActionsProps) => (\n  <div\n    {...styleProps(\n      [styles.group, size === 'small' ? styles.groupSmall : styles.groupLarge, xstyle],\n      clsx('lobe-landing-actions', className),\n    )}\n    data-size={size}\n  >\n    {actions.map(({ external, href, icon, iconPlacement = 'start', label, primary }) => {\n      const iconNode = icon && <Icon icon={icon} size={size === 'small' ? 14 : 16} />;\n      if (!primary) {\n        const isExternal = external ?? isExternalHref(href);\n        return (\n          <BottomGradientButton\n            href={href}\n            icon={iconNode}\n            iconPosition={iconPlacement}\n            key={href}\n            rel={isExternal ? 'noreferrer' : undefined}\n            size={size === 'small' ? 'middle' : 'large'}\n            target={isExternal ? '_blank' : undefined}\n            onClick={\n              !isExternal && onNavigate\n                ? (event) => {\n                    event.preventDefault();\n                    onNavigate(href);\n                  }\n                : undefined\n            }\n          >\n            {label}\n          </BottomGradientButton>\n        );\n      }\n      return (\n        <Fragment key={href}>\n          {renderLandingLink(renderLink, {\n            children: (\n              <>\n                {iconPlacement === 'start' && iconNode}\n                {label}\n                {iconPlacement === 'end' && iconNode}\n              </>\n            ),\n            className: stylex.props(styles.action, size === 'small' && styles.actionSmall)\n              .className,\n            external,\n            href,\n          })}\n        </Fragment>\n      );\n    })}\n  </div>\n);\n"],"mappings":";;;;;;;;AAuBA,MAAM,SAAS;CACb,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;AACF;AAWA,MAAa,kBAAkB,EAC7B,SACA,WACA,YACA,YACA,OAAO,SACP,aACyB,oBAAC,OAAD;CAAK,GAAI,WAAW;EAAC,OAAO;EAAO,SAAS,UAAU,OAAO,aAAa,OAAO;EAAY;CAAM,GAAG,KAAK,wBAAwB,SAAS,CAAC;CAAG,aAAW;CACjL,UAAA,QAAQ,KAAK,EACd,UACA,MACA,MACA,gBAAgB,SAChB,OACA,cACI;EACJ,MAAM,WAAW,QAAQ,oBAAC,MAAD;GAAY;GAAM,MAAM,SAAS,UAAU,KAAK;EAAK,CAAA;EAC9E,IAAI,CAAC,SAAS;GACZ,MAAM,aAAa,YAAY,eAAe,IAAI;GAClD,OAAO,oBAAC,sBAAD;IAA4B;IAAM,MAAM;IAAU,cAAc;IAA0B,KAAK,aAAa,eAAe,KAAA;IAAW,MAAM,SAAS,UAAU,WAAW;IAAS,QAAQ,aAAa,WAAW,KAAA;IAAW,SAAS,CAAC,cAAc,cAAa,UAAS;KACjR,MAAM,eAAe;KACrB,WAAW,IAAI;IACjB,IAAI,KAAA;IACG,UAAA;GACmB,GALiE,IAKjE;EAC5B;EACA,OAAO,oBAAC,UAAD,EAAA,UACA,kBAAkB,YAAY;GACjC,UAAU,qBAAA,YAAA,EAAA,UAAA;IACD,kBAAkB,WAAW;IAC7B;IACA,kBAAkB,SAAS;GAC5B,EAAA,CAAA;GACR,WAAW;IACT,GAAG,EACD,WAAW,8LACb;IACA,GAAG,EACD,WAAW,6LACb;GACF,EAAE,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;GAC7B;GACA;EACF,CAAC,EACW,GAlBQ,IAkBR;CAChB,CAAC;AACI,CAAA"}
+{"version":3,"file":"landingActions.mjs","names":["clsx"],"sources":["../../src/awesome/landingActions.tsx"],"sourcesContent":["import './landingActions.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Fragment, type ReactNode } from 'react';\n\nimport BottomGradientButton from '@/awesome/BottomGradientButton';\nimport { isExternalHref, type LandingLinkRender, renderLandingLink } from '@/awesome/landingLink';\nimport Icon, { type IconProps } from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nexport interface LandingAction {\n  /** Opens in a new tab. Inferred from absolute URLs when omitted. */\n  external?: boolean;\n  href: string;\n  icon?: IconProps['icon'];\n  /** Places the icon after the label, e.g. for an arrow. */\n  iconPlacement?: 'start' | 'end';\n  label: ReactNode;\n  /** The primary action is a filled pill; others render as BottomGradientButton. */\n  primary?: boolean;\n}\n\nconst styles = stylex.create({\n  action: {\n    gap: 8,\n    borderColor: 'transparent',\n    borderRadius: 999,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    paddingBlock: 0,\n    paddingInline: 22,\n    transition: 'filter 140ms ease, transform 90ms ease',\n    alignItems: 'center',\n    backgroundColor: cssVar.colorText,\n    color: cssVar.colorBgContainer,\n    display: 'inline-flex',\n    filter: { 'default': null, ':hover': 'brightness(1.06)' },\n    fontSize: cssVar.fontSize,\n    fontWeight: 600,\n    justifyContent: 'center',\n    minBlockSize: 44,\n    textDecoration: 'none',\n    transform: { 'default': null, ':active': 'scale(0.97)' },\n    whiteSpace: 'nowrap',\n  },\n  actionSmall: {\n    gap: 6,\n    paddingInline: 14,\n    fontSize: cssVar.fontSizeSM,\n    minBlockSize: 34,\n  },\n  group: {\n    gap: 12,\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  groupLarge: {\n    alignSelf: { default: null, [media.mobile]: 'stretch' },\n  },\n  groupSmall: {\n    gap: 8,\n  },\n});\n\nexport type LandingNavigate = (href: string) => void;\n\nexport interface LandingActionsProps {\n  actions: LandingAction[];\n  className?: string;\n  /** Client-side navigation for internal non-primary actions, which render as buttons with an href. */\n  onNavigate?: LandingNavigate;\n  renderLink?: LandingLinkRender;\n  size?: 'large' | 'small';\n  xstyle?: Parameters<typeof styleProps>[0];\n}\n\nexport const LandingActions = ({\n  actions,\n  className,\n  onNavigate,\n  renderLink,\n  size = 'large',\n  xstyle,\n}: LandingActionsProps) => (\n  <div\n    {...styleProps(\n      [styles.group, size === 'small' ? styles.groupSmall : styles.groupLarge, xstyle],\n      clsx('lobe-landing-actions', className),\n    )}\n    data-size={size}\n  >\n    {actions.map(({ external, href, icon, iconPlacement = 'start', label, primary }) => {\n      const iconNode = icon && <Icon icon={icon} size={size === 'small' ? 14 : 16} />;\n      if (!primary) {\n        const isExternal = external ?? isExternalHref(href);\n        return (\n          <BottomGradientButton\n            href={href}\n            icon={iconNode}\n            iconPosition={iconPlacement}\n            key={href}\n            rel={isExternal ? 'noreferrer' : undefined}\n            size={size === 'small' ? 'middle' : 'large'}\n            target={isExternal ? '_blank' : undefined}\n            onClick={\n              !isExternal && onNavigate\n                ? (event) => {\n                    event.preventDefault();\n                    onNavigate(href);\n                  }\n                : undefined\n            }\n          >\n            {label}\n          </BottomGradientButton>\n        );\n      }\n      return (\n        <Fragment key={href}>\n          {renderLandingLink(renderLink, {\n            children: (\n              <>\n                {iconPlacement === 'start' && iconNode}\n                {label}\n                {iconPlacement === 'end' && iconNode}\n              </>\n            ),\n            className: stylex.props(styles.action, size === 'small' && styles.actionSmall)\n              .className,\n            external,\n            href,\n          })}\n        </Fragment>\n      );\n    })}\n  </div>\n);\n"],"mappings":";;;;;;;;AAuBA,MAAM,SAAS;CACb,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;AACF;AAWA,MAAa,kBAAkB,EAC7B,SACA,WACA,YACA,YACA,OAAO,SACP,aACyB,oBAAC,OAAD;CAAK,GAAI,WAAW;EAAC,OAAO;EAAO,SAAS,UAAU,OAAO,aAAa,OAAO;EAAY;CAAM,GAAGA,OAAK,wBAAwB,SAAS,CAAC;CAAG,aAAW;CACjL,UAAA,QAAQ,KAAK,EACd,UACA,MACA,MACA,gBAAgB,SAChB,OACA,cACI;EACJ,MAAM,WAAW,QAAQ,oBAAC,MAAD;GAAY;GAAM,MAAM,SAAS,UAAU,KAAK;EAAK,CAAA;EAC9E,IAAI,CAAC,SAAS;GACZ,MAAM,aAAa,YAAY,eAAe,IAAI;GAClD,OAAO,oBAAC,sBAAD;IAA4B;IAAM,MAAM;IAAU,cAAc;IAA0B,KAAK,aAAa,eAAe,KAAA;IAAW,MAAM,SAAS,UAAU,WAAW;IAAS,QAAQ,aAAa,WAAW,KAAA;IAAW,SAAS,CAAC,cAAc,cAAa,UAAS;KACjR,MAAM,eAAe;KACrB,WAAW,IAAI;IACjB,IAAI,KAAA;IACG,UAAA;GACmB,GALiE,IAKjE;EAC5B;EACA,OAAO,oBAAC,UAAD,EAAA,UACA,kBAAkB,YAAY;GACjC,UAAU,qBAAA,YAAA,EAAA,UAAA;IACD,kBAAkB,WAAW;IAC7B;IACA,kBAAkB,SAAS;GAC5B,EAAA,CAAA;GACR,WAAW;IACT,GAAG,EACD,WAAW,8LACb;IACA,GAAG,EACD,WAAW,6LACb;GACF,EAAE,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;GAC7B;GACA;EACF,CAAC,EACW,GAlBQ,IAkBR;CAChB,CAAC;AACI,CAAA"}

package/es/chat/ChatItem/ChatItem.mjs

@@ -13,7 +13,7 @@ import MessageContent from "./components/MessageContent.mjs";
 import Title from "./components/Title.mjs";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/chat/ChatItem/ChatItem.tsx
 const MOBILE_AVATAR_SIZE = 32;
@@ -45,7 +45,7 @@ const ChatItem = memo(({ avatarAddon, onAvatarClick, avatarProps, actions, class
 		return () => observer.disconnect();
 	}, [variant, actionsWrapWidth]);
 	const isDocs = variant === "docs";
-	const containerClassName = styleProps([styles.container, isDocs && styles.containerDocs], clsx("lobe-chat-item", isDocs ? "lobe-chat-item-docs" : "lobe-chat-item-bubble", className)).className;
+	const containerClassName = styleProps([styles.container, isDocs && styles.containerDocs], clsx$1("lobe-chat-item", isDocs ? "lobe-chat-item-docs" : "lobe-chat-item-bubble", className)).className;
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		className: containerClassName,
 		direction: placement === "left" ? "horizontal" : "horizontal-reverse",

package/es/chat/ChatItem/ChatItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatItem.mjs","names":["chatMessages","Flexbox"],"sources":["../../../src/chat/ChatItem/ChatItem.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport chatMessages from '@/i18n/resources/en/chat';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport Actions from './components/Actions';\nimport Avatar from './components/Avatar';\nimport BorderSpacing from './components/BorderSpacing';\nimport ErrorContent from './components/ErrorContent';\nimport MessageContent from './components/MessageContent';\nimport Title from './components/Title';\nimport { styles } from './style';\nimport type { ChatItemProps } from './type';\n\nconst MOBILE_AVATAR_SIZE = 32;\n\nconst ChatItem = memo<ChatItemProps>(\n  ({\n    avatarAddon,\n    onAvatarClick,\n    avatarProps,\n    actions,\n    className,\n    primary,\n    loading,\n    message,\n    placeholderMessage,\n    placement = 'left',\n    variant = 'bubble',\n    avatar,\n    error,\n    showTitle,\n    time,\n    editing,\n    onChange,\n    onEditingChange,\n    messageExtra,\n    renderMessage,\n    text,\n    errorMessage,\n    onDoubleClick,\n    fontSize,\n    aboveMessage,\n    belowMessage,\n    markdownProps,\n    actionsWrapWidth = 54,\n    showAvatar = true,\n    titleAddon,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const { t } = useTranslation(chatMessages);\n\n    const avatarSize = mobile ? MOBILE_AVATAR_SIZE : avatarProps?.size || 40;\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--chat-item-avatar-size': `${avatarSize}px`,\n      }),\n      [avatarSize],\n    );\n\n    const hasTime = Boolean(time);\n    const placeholderText = placeholderMessage ?? t('chat.placeholder');\n    const avatarAlt = avatarProps?.alt || avatar.title || t('chat.avatar');\n\n    // 在 ChatItem 组件中添加\n    const contentRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [layoutMode, setLayoutMode] = useState<'horizontal' | 'vertical'>(\n      variant === 'bubble' ? 'horizontal' : 'vertical',\n    );\n\n    // 使用 ResizeObserver 监控内容和容器尺寸\n    useEffect(() => {\n      if (variant === 'docs') {\n        setLayoutMode('vertical');\n        return;\n      }\n\n      if (!contentRef.current || !containerRef.current) return;\n\n      const observer = new ResizeObserver(() => {\n        if (!contentRef.current || !containerRef.current) return;\n\n        const containerWidth = containerRef.current.clientWidth;\n        const contentWidth = contentRef.current.scrollWidth; // 使用scrollWidth获取实际内容宽度\n\n        // 预留给Actions的最小空间 (根据实际Actions大小调整)\n\n        // 只有当内容宽度 + Actions最小宽度 > 容器宽度时才切换布局\n        setLayoutMode(contentWidth + actionsWrapWidth > containerWidth ? 'vertical' : 'horizontal');\n      });\n\n      observer.observe(contentRef.current);\n      observer.observe(containerRef.current);\n\n      return () => observer.disconnect();\n    }, [variant, actionsWrapWidth]);\n\n    const isDocs = variant === 'docs';\n    const containerClassName = styleProps(\n      [styles.container, isDocs && styles.containerDocs],\n      clsx('lobe-chat-item', isDocs ? 'lobe-chat-item-docs' : 'lobe-chat-item-bubble', className),\n    ).className;\n\n    return (\n      <Flexbox\n        className={containerClassName}\n        direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}\n        gap={mobile ? 6 : 12}\n        style={cssVariables}\n        width={'100%'}\n        {...rest}\n      >\n        {showAvatar && (\n          <Avatar\n            {...avatarProps}\n            addon={avatarAddon}\n            alt={avatarAlt}\n            avatar={avatar}\n            loading={loading}\n            placement={placement}\n            size={avatarSize}\n            style={{\n              marginTop: showTitle ? -12 : 6,\n              ...avatarProps?.style,\n            }}\n            onClick={onAvatarClick}\n          />\n        )}\n        <Flexbox\n          align={placement === 'left' ? 'flex-start' : 'flex-end'}\n          ref={containerRef}\n          width={editing ? '100%' : undefined}\n          {...stylex.props(styles.messageBox, styles.messageContainer, hasTime && styles.withTime)}\n        >\n          <Title\n            avatar={avatar}\n            placement={placement}\n            showTitle={showTitle}\n            time={time}\n            titleAddon={titleAddon}\n          />\n          {aboveMessage}\n          <Flexbox\n            align={placement === 'left' ? 'flex-start' : 'flex-end'}\n            data-layout={layoutMode}\n            gap={8}\n            width={editing ? '100%' : undefined}\n            {...stylex.props(styles.messageBox, styles.messageContent)}\n            direction={\n              layoutMode === 'horizontal'\n                ? placement === 'left'\n                  ? 'horizontal'\n                  : 'horizontal-reverse'\n                : 'vertical'\n            }\n          >\n            <Flexbox ref={contentRef} width={'100%'}>\n              {error && (message === placeholderText || !message) ? (\n                <ErrorContent error={error} message={errorMessage} placement={placement} />\n              ) : (\n                <MessageContent\n                  editing={editing}\n                  fontSize={fontSize}\n                  markdownProps={markdownProps}\n                  message={message}\n                  placement={placement}\n                  primary={primary}\n                  renderMessage={renderMessage}\n                  text={text}\n                  variant={variant}\n                  messageExtra={\n                    <>\n                      {error && (\n                        <ErrorContent error={error} message={errorMessage} placement={placement} />\n                      )}\n                      {messageExtra}\n                    </>\n                  }\n                  onChange={onChange}\n                  onDoubleClick={onDoubleClick}\n                  onEditingChange={onEditingChange}\n                />\n              )}\n            </Flexbox>\n            {actions && (\n              <Actions\n                actions={actions}\n                editing={editing}\n                placement={placement}\n                variant={variant}\n              />\n            )}\n          </Flexbox>\n          {belowMessage}\n        </Flexbox>\n        {mobile && variant === 'bubble' && showAvatar && (\n          <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nexport default ChatItem;\n\nexport type { ChatItemProps } from './type';\n"],"mappings":"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"}
+{"version":3,"file":"ChatItem.mjs","names":["chatMessages","clsx","Flexbox"],"sources":["../../../src/chat/ChatItem/ChatItem.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport chatMessages from '@/i18n/resources/en/chat';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport Actions from './components/Actions';\nimport Avatar from './components/Avatar';\nimport BorderSpacing from './components/BorderSpacing';\nimport ErrorContent from './components/ErrorContent';\nimport MessageContent from './components/MessageContent';\nimport Title from './components/Title';\nimport { styles } from './style';\nimport type { ChatItemProps } from './type';\n\nconst MOBILE_AVATAR_SIZE = 32;\n\nconst ChatItem = memo<ChatItemProps>(\n  ({\n    avatarAddon,\n    onAvatarClick,\n    avatarProps,\n    actions,\n    className,\n    primary,\n    loading,\n    message,\n    placeholderMessage,\n    placement = 'left',\n    variant = 'bubble',\n    avatar,\n    error,\n    showTitle,\n    time,\n    editing,\n    onChange,\n    onEditingChange,\n    messageExtra,\n    renderMessage,\n    text,\n    errorMessage,\n    onDoubleClick,\n    fontSize,\n    aboveMessage,\n    belowMessage,\n    markdownProps,\n    actionsWrapWidth = 54,\n    showAvatar = true,\n    titleAddon,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const { t } = useTranslation(chatMessages);\n\n    const avatarSize = mobile ? MOBILE_AVATAR_SIZE : avatarProps?.size || 40;\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--chat-item-avatar-size': `${avatarSize}px`,\n      }),\n      [avatarSize],\n    );\n\n    const hasTime = Boolean(time);\n    const placeholderText = placeholderMessage ?? t('chat.placeholder');\n    const avatarAlt = avatarProps?.alt || avatar.title || t('chat.avatar');\n\n    // 在 ChatItem 组件中添加\n    const contentRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [layoutMode, setLayoutMode] = useState<'horizontal' | 'vertical'>(\n      variant === 'bubble' ? 'horizontal' : 'vertical',\n    );\n\n    // 使用 ResizeObserver 监控内容和容器尺寸\n    useEffect(() => {\n      if (variant === 'docs') {\n        setLayoutMode('vertical');\n        return;\n      }\n\n      if (!contentRef.current || !containerRef.current) return;\n\n      const observer = new ResizeObserver(() => {\n        if (!contentRef.current || !containerRef.current) return;\n\n        const containerWidth = containerRef.current.clientWidth;\n        const contentWidth = contentRef.current.scrollWidth; // 使用scrollWidth获取实际内容宽度\n\n        // 预留给Actions的最小空间 (根据实际Actions大小调整)\n\n        // 只有当内容宽度 + Actions最小宽度 > 容器宽度时才切换布局\n        setLayoutMode(contentWidth + actionsWrapWidth > containerWidth ? 'vertical' : 'horizontal');\n      });\n\n      observer.observe(contentRef.current);\n      observer.observe(containerRef.current);\n\n      return () => observer.disconnect();\n    }, [variant, actionsWrapWidth]);\n\n    const isDocs = variant === 'docs';\n    const containerClassName = styleProps(\n      [styles.container, isDocs && styles.containerDocs],\n      clsx('lobe-chat-item', isDocs ? 'lobe-chat-item-docs' : 'lobe-chat-item-bubble', className),\n    ).className;\n\n    return (\n      <Flexbox\n        className={containerClassName}\n        direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}\n        gap={mobile ? 6 : 12}\n        style={cssVariables}\n        width={'100%'}\n        {...rest}\n      >\n        {showAvatar && (\n          <Avatar\n            {...avatarProps}\n            addon={avatarAddon}\n            alt={avatarAlt}\n            avatar={avatar}\n            loading={loading}\n            placement={placement}\n            size={avatarSize}\n            style={{\n              marginTop: showTitle ? -12 : 6,\n              ...avatarProps?.style,\n            }}\n            onClick={onAvatarClick}\n          />\n        )}\n        <Flexbox\n          align={placement === 'left' ? 'flex-start' : 'flex-end'}\n          ref={containerRef}\n          width={editing ? '100%' : undefined}\n          {...stylex.props(styles.messageBox, styles.messageContainer, hasTime && styles.withTime)}\n        >\n          <Title\n            avatar={avatar}\n            placement={placement}\n            showTitle={showTitle}\n            time={time}\n            titleAddon={titleAddon}\n          />\n          {aboveMessage}\n          <Flexbox\n            align={placement === 'left' ? 'flex-start' : 'flex-end'}\n            data-layout={layoutMode}\n            gap={8}\n            width={editing ? '100%' : undefined}\n            {...stylex.props(styles.messageBox, styles.messageContent)}\n            direction={\n              layoutMode === 'horizontal'\n                ? placement === 'left'\n                  ? 'horizontal'\n                  : 'horizontal-reverse'\n                : 'vertical'\n            }\n          >\n            <Flexbox ref={contentRef} width={'100%'}>\n              {error && (message === placeholderText || !message) ? (\n                <ErrorContent error={error} message={errorMessage} placement={placement} />\n              ) : (\n                <MessageContent\n                  editing={editing}\n                  fontSize={fontSize}\n                  markdownProps={markdownProps}\n                  message={message}\n                  placement={placement}\n                  primary={primary}\n                  renderMessage={renderMessage}\n                  text={text}\n                  variant={variant}\n                  messageExtra={\n                    <>\n                      {error && (\n                        <ErrorContent error={error} message={errorMessage} placement={placement} />\n                      )}\n                      {messageExtra}\n                    </>\n                  }\n                  onChange={onChange}\n                  onDoubleClick={onDoubleClick}\n                  onEditingChange={onEditingChange}\n                />\n              )}\n            </Flexbox>\n            {actions && (\n              <Actions\n                actions={actions}\n                editing={editing}\n                placement={placement}\n                variant={variant}\n              />\n            )}\n          </Flexbox>\n          {belowMessage}\n        </Flexbox>\n        {mobile && variant === 'bubble' && showAvatar && (\n          <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nexport default ChatItem;\n\nexport type { ChatItemProps } from './type';\n"],"mappings":"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"}

package/es/chat/EditableMessage/EditableMessage.mjs

@@ -5,7 +5,7 @@ import MessageInput from "../MessageInput/MessageInput.mjs";
 import MessageModal from "../MessageModal/MessageModal.mjs";
 import { memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/chat/EditableMessage/EditableMessage.tsx
 const EditableMessage = memo(({ value, onChange, classNames = {}, onEditingChange, editing, openModal, onOpenChange, placeholder, showEditWhenEmpty = false, styles: customStyles, className, style, height, variant, editButtonSize, text, fullFeaturedCodeBlock, model, fontSize, language = "markdown", markdownProps }) => {
 	const [isEdit, setTyping] = useControlledState(false, {
@@ -19,7 +19,7 @@ const EditableMessage = memo(({ value, onChange, classNames = {}, onEditingChang
 	const isAutoSize = height === "auto";
 	const input = /* @__PURE__ */ jsx(MessageInput, {
 		shortcut: true,
-		className: clsx(className, classNames?.input),
+		className: clsx$1(className, classNames?.input),
 		classNames,
 		defaultValue: value,
 		editButtonSize,
@@ -41,7 +41,7 @@ const EditableMessage = memo(({ value, onChange, classNames = {}, onEditingChang
 	});
 	if (!value && showEditWhenEmpty) return input;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [!expand && isEdit ? input : /* @__PURE__ */ jsx(Markdown, {
-		className: clsx(className, classNames?.markdown),
+		className: clsx$1(className, classNames?.markdown),
 		fontSize,
 		fullFeaturedCodeBlock,
 		variant: "chat",

package/es/chat/EditableMessage/EditableMessage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableMessage.mjs","names":[],"sources":["../../../src/chat/EditableMessage/EditableMessage.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport MessageInput from '@/chat/MessageInput';\nimport MessageModal from '@/chat/MessageModal';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport Markdown from '@/Markdown';\n\nimport { type EditableMessageProps } from './type';\n\nconst EditableMessage = memo<EditableMessageProps>(\n  ({\n    value,\n    onChange,\n    classNames = {},\n    onEditingChange,\n    editing,\n    openModal,\n    onOpenChange,\n    placeholder,\n    showEditWhenEmpty = false,\n    styles: customStyles,\n    className,\n    style,\n    height,\n    variant,\n    editButtonSize,\n    text,\n    fullFeaturedCodeBlock,\n    model,\n    fontSize,\n    language = 'markdown',\n    markdownProps,\n  }) => {\n    const [isEdit, setTyping] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    const [expand, setExpand] = useControlledState<boolean>(false, {\n      onChange: onOpenChange,\n      value: openModal,\n    });\n\n    const isAutoSize = height === 'auto';\n\n    const input = (\n      <MessageInput\n        shortcut\n        className={clsx(className, classNames?.input)}\n        classNames={classNames}\n        defaultValue={value}\n        editButtonSize={editButtonSize}\n        height={height}\n        language={language}\n        placeholder={placeholder}\n        styles={customStyles}\n        text={text}\n        variant={variant}\n        style={{\n          ...style,\n          ...customStyles?.input,\n        }}\n        onCancel={() => setTyping(false)}\n        onConfirm={(text) => {\n          onChange?.(text);\n          setTyping(false);\n        }}\n      />\n    );\n\n    if (!value && showEditWhenEmpty) return input;\n\n    return (\n      <>\n        {!expand && isEdit ? (\n          input\n        ) : (\n          <Markdown\n            className={clsx(className, classNames?.markdown)}\n            fontSize={fontSize}\n            fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n            variant={'chat'}\n            style={{\n              height: isAutoSize ? 'unset' : height,\n              ...style,\n              ...customStyles?.markdown,\n            }}\n            {...markdownProps}\n          >\n            {value || placeholder || ''}\n          </Markdown>\n        )}\n        {expand && (\n          <MessageModal\n            editing={isEdit}\n            extra={model?.extra}\n            footer={model?.footer}\n            height={height}\n            language={language}\n            open={expand}\n            placeholder={placeholder}\n            text={text}\n            value={value}\n            onChange={onChange}\n            onEditingChange={setTyping}\n            onOpenChange={(e) => {\n              setExpand(e);\n              setTyping(false);\n            }}\n          />\n        )}\n      </>\n    );\n  },\n);\n\nEditableMessage.displayName = 'EditableMessage';\n\nexport default EditableMessage;\n"],"mappings":";;;;;;;;;AAYA,MAAM,kBAAkB,MACrB,EACC,OACA,UACA,aAAa,CAAC,GACd,iBACA,SACA,WACA,cACA,aACA,oBAAoB,OACpB,QAAQ,cACR,WACA,OACA,QACA,SACA,gBACA,MACA,uBACA,OACA,UACA,WAAW,YACX,oBACI;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;CACT,CAAC;CAED,MAAM,CAAC,QAAQ,aAAa,mBAA4B,OAAO;EAC7D,UAAU;EACV,OAAO;CACT,CAAC;CAED,MAAM,aAAa,WAAW;CAE9B,MAAM,QACJ,oBAAC,cAAD;EACE,UAAA;EACA,WAAW,KAAK,WAAW,YAAY,KAAK;EAChC;EACZ,cAAc;EACE;EACR;EACE;EACG;EACb,QAAQ;EACF;EACG;EACT,OAAO;GACL,GAAG;GACH,GAAG,cAAc;EACnB;EACA,gBAAgB,UAAU,KAAK;EAC/B,YAAY,SAAS;GACnB,WAAW,IAAI;GACf,UAAU,KAAK;EACjB;CACD,CAAA;CAGH,IAAI,CAAC,SAAS,mBAAmB,OAAO;CAExC,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,CAAC,UAAU,SACV,QAEA,oBAAC,UAAD;EACE,WAAW,KAAK,WAAW,YAAY,QAAQ;EACrC;EACa;EACvB,SAAS;EACT,OAAO;GACL,QAAQ,aAAa,UAAU;GAC/B,GAAG;GACH,GAAG,cAAc;EACnB;EACA,GAAI;EAEH,UAAA,SAAS,eAAe;CACjB,CAAA,GAEX,UACC,oBAAC,cAAD;EACE,SAAS;EACT,OAAO,OAAO;EACd,QAAQ,OAAO;EACP;EACE;EACV,MAAM;EACO;EACP;EACC;EACG;EACV,iBAAiB;EACjB,eAAe,MAAM;GACnB,UAAU,CAAC;GACX,UAAU,KAAK;EACjB;CACD,CAAA,CAEH,EAAA,CAAA;AAEN,CACF;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"EditableMessage.mjs","names":["clsx"],"sources":["../../../src/chat/EditableMessage/EditableMessage.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport MessageInput from '@/chat/MessageInput';\nimport MessageModal from '@/chat/MessageModal';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport Markdown from '@/Markdown';\n\nimport { type EditableMessageProps } from './type';\n\nconst EditableMessage = memo<EditableMessageProps>(\n  ({\n    value,\n    onChange,\n    classNames = {},\n    onEditingChange,\n    editing,\n    openModal,\n    onOpenChange,\n    placeholder,\n    showEditWhenEmpty = false,\n    styles: customStyles,\n    className,\n    style,\n    height,\n    variant,\n    editButtonSize,\n    text,\n    fullFeaturedCodeBlock,\n    model,\n    fontSize,\n    language = 'markdown',\n    markdownProps,\n  }) => {\n    const [isEdit, setTyping] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    const [expand, setExpand] = useControlledState<boolean>(false, {\n      onChange: onOpenChange,\n      value: openModal,\n    });\n\n    const isAutoSize = height === 'auto';\n\n    const input = (\n      <MessageInput\n        shortcut\n        className={clsx(className, classNames?.input)}\n        classNames={classNames}\n        defaultValue={value}\n        editButtonSize={editButtonSize}\n        height={height}\n        language={language}\n        placeholder={placeholder}\n        styles={customStyles}\n        text={text}\n        variant={variant}\n        style={{\n          ...style,\n          ...customStyles?.input,\n        }}\n        onCancel={() => setTyping(false)}\n        onConfirm={(text) => {\n          onChange?.(text);\n          setTyping(false);\n        }}\n      />\n    );\n\n    if (!value && showEditWhenEmpty) return input;\n\n    return (\n      <>\n        {!expand && isEdit ? (\n          input\n        ) : (\n          <Markdown\n            className={clsx(className, classNames?.markdown)}\n            fontSize={fontSize}\n            fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n            variant={'chat'}\n            style={{\n              height: isAutoSize ? 'unset' : height,\n              ...style,\n              ...customStyles?.markdown,\n            }}\n            {...markdownProps}\n          >\n            {value || placeholder || ''}\n          </Markdown>\n        )}\n        {expand && (\n          <MessageModal\n            editing={isEdit}\n            extra={model?.extra}\n            footer={model?.footer}\n            height={height}\n            language={language}\n            open={expand}\n            placeholder={placeholder}\n            text={text}\n            value={value}\n            onChange={onChange}\n            onEditingChange={setTyping}\n            onOpenChange={(e) => {\n              setExpand(e);\n              setTyping(false);\n            }}\n          />\n        )}\n      </>\n    );\n  },\n);\n\nEditableMessage.displayName = 'EditableMessage';\n\nexport default EditableMessage;\n"],"mappings":";;;;;;;;;AAYA,MAAM,kBAAkB,MACrB,EACC,OACA,UACA,aAAa,CAAC,GACd,iBACA,SACA,WACA,cACA,aACA,oBAAoB,OACpB,QAAQ,cACR,WACA,OACA,QACA,SACA,gBACA,MACA,uBACA,OACA,UACA,WAAW,YACX,oBACI;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;CACT,CAAC;CAED,MAAM,CAAC,QAAQ,aAAa,mBAA4B,OAAO;EAC7D,UAAU;EACV,OAAO;CACT,CAAC;CAED,MAAM,aAAa,WAAW;CAE9B,MAAM,QACJ,oBAAC,cAAD;EACE,UAAA;EACA,WAAWA,OAAK,WAAW,YAAY,KAAK;EAChC;EACZ,cAAc;EACE;EACR;EACE;EACG;EACb,QAAQ;EACF;EACG;EACT,OAAO;GACL,GAAG;GACH,GAAG,cAAc;EACnB;EACA,gBAAgB,UAAU,KAAK;EAC/B,YAAY,SAAS;GACnB,WAAW,IAAI;GACf,UAAU,KAAK;EACjB;CACD,CAAA;CAGH,IAAI,CAAC,SAAS,mBAAmB,OAAO;CAExC,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,CAAC,UAAU,SACV,QAEA,oBAAC,UAAD;EACE,WAAWA,OAAK,WAAW,YAAY,QAAQ;EACrC;EACa;EACvB,SAAS;EACT,OAAO;GACL,QAAQ,aAAa,UAAU;GAC/B,GAAG;GACH,GAAG,cAAc;EACnB;EACA,GAAI;EAEH,UAAA,SAAS,eAAe;CACjB,CAAA,GAEX,UACC,oBAAC,cAAD;EACE,SAAS;EACT,OAAO,OAAO;EACd,QAAQ,OAAO;EACP;EACE;EACV,MAAM;EACO;EACP;EACC;EACG;EACV,iBAAiB;EACjB,eAAe,MAAM;GACnB,UAAU,CAAC;GACX,UAAU,KAAK;EACjB;CACD,CAAA,CAEH,EAAA,CAAA;AAEN,CACF;AAEA,gBAAgB,cAAc"}

package/es/chat/EditableMessageList/EditableMessageList.mjs

@@ -3,8 +3,8 @@ import Button from "../../Button/Button.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
 import { useTranslation } from "../../i18n/useTranslation.mjs";
-import ControlInput from "../../EditableText/ControlInput.mjs";
 import Select from "../../Select/Select.mjs";
+import ControlInput from "../../EditableText/ControlInput.mjs";
 import editableMessage_default from "../../i18n/resources/en/editableMessage.mjs";
 import { messagesReducer } from "./messageReducer.mjs";
 import { memo, useEffect, useReducer } from "react";

package/es/chat/MessageInput/MessageInput.mjs

@@ -10,7 +10,7 @@ import CodeEditor from "../../CodeEditor/CodeEditor.mjs";
 import { styles, textAreaStyle } from "./style.mjs";
 import { memo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { useHotkeys } from "react-hotkeys-hook";
 //#region src/chat/MessageInput/MessageInput.tsx
 const MessageInput = memo(({ text, variant = "borderless", onCancel, defaultValue, onConfirm, renderButtons, placeholder, styles: customStyles, style, editButtonSize = "middle", classNames, shortcut, language = "markdown", ...rest }) => {
@@ -49,7 +49,7 @@ const MessageInput = memo(({ text, variant = "borderless", onCancel, defaultValu
 		...rest,
 		children: [mobile ? /* @__PURE__ */ jsx(TextArea_default, {
 			autoSize: true,
-			className: clsx(styles, classNames?.editor),
+			className: clsx$1(styles, classNames?.editor),
 			placeholder,
 			style: {
 				...textAreaStyle,
@@ -60,7 +60,7 @@ const MessageInput = memo(({ text, variant = "borderless", onCancel, defaultValu
 			onBlur: (e) => setValue(e.target.value),
 			onChange: (e) => setValue(e.target.value)
 		}) : /* @__PURE__ */ jsx(CodeEditor, {
-			className: clsx(styles, classNames?.editor),
+			className: clsx$1(styles, classNames?.editor),
 			classNames,
 			language,
 			placeholder,

package/es/chat/MessageInput/MessageInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.mjs","names":["Flexbox","TextArea"],"sources":["../../../src/chat/MessageInput/MessageInput.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\n\nimport Button from '@/Button';\nimport CodeEditor from '@/CodeEditor';\nimport { Flexbox } from '@/Flex';\nimport { KeyMapEnum } from '@/Hotkey/const';\nimport { combineKeys } from '@/Hotkey/utils';\nimport { TextArea } from '@/Input';\nimport { useResponsive } from '@/styles/theme/scope';\nimport Tooltip from '@/Tooltip';\n\nimport { styles, textAreaStyle } from './style';\nimport type { MessageInputProps } from './type';\n\nconst MessageInput = memo<MessageInputProps>(\n  ({\n    text,\n    variant = 'borderless',\n    onCancel,\n    defaultValue,\n    onConfirm,\n    renderButtons,\n    placeholder,\n    styles: customStyles,\n    style,\n    editButtonSize = 'middle',\n    classNames,\n    shortcut,\n    language = 'markdown',\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const [temporaryValue, setValue] = useState<string>(defaultValue || '');\n    const confirmHotkey = combineKeys([KeyMapEnum.Mod, KeyMapEnum.Enter]);\n    const confirmText = text?.confirm || 'Confirm';\n    const cancelHotkey = combineKeys([KeyMapEnum.Esc]);\n    const cancelText = text?.cancel || 'Cancel';\n\n    const handleConfirm = () => onConfirm?.(temporaryValue);\n    const handleCancel = () => onCancel?.();\n\n    useHotkeys(confirmHotkey, handleConfirm, {\n      enableOnFormTags: true,\n      enabled: shortcut,\n      preventDefault: true,\n    });\n\n    const confirmButton = (\n      <Button size={editButtonSize} type=\"primary\" onClick={handleConfirm}>\n        {confirmText}\n      </Button>\n    );\n\n    const cancllButton = (\n      <Button size={editButtonSize} type={'fill'} onClick={handleCancel}>\n        {text?.cancel || 'Cancel'}\n      </Button>\n    );\n\n    return (\n      <Flexbox gap={16} style={{ flex: 1, width: '100%', ...style }} {...rest}>\n        {mobile ? (\n          <TextArea\n            autoSize\n            className={clsx(styles, classNames?.editor)}\n            placeholder={placeholder}\n            style={{ ...textAreaStyle, ...customStyles?.editor }}\n            value={temporaryValue}\n            variant={variant}\n            onBlur={(e) => setValue(e.target.value)}\n            onChange={(e) => setValue(e.target.value)}\n          />\n        ) : (\n          <CodeEditor\n            className={clsx(styles, classNames?.editor)}\n            classNames={classNames}\n            language={language}\n            placeholder={placeholder}\n            style={customStyles?.editor}\n            styles={customStyles}\n            value={temporaryValue}\n            variant={variant}\n            onBlur={(e) => setValue(e.target.value)}\n            onValueChange={(e) => setValue(e)}\n          />\n        )}\n        <Flexbox direction={'horizontal-reverse'} gap={8}>\n          {renderButtons ? (\n            renderButtons(temporaryValue).map((buttonProps, index) => (\n              <Button key={index} size={editButtonSize} {...buttonProps} />\n            ))\n          ) : (\n            <>\n              {shortcut ? (\n                <Tooltip hotkey={confirmHotkey} title={confirmText}>\n                  {confirmButton}\n                </Tooltip>\n              ) : (\n                confirmButton\n              )}\n              {shortcut ? (\n                <Tooltip hotkey={cancelHotkey} title={cancelText}>\n                  {cancllButton}\n                </Tooltip>\n              ) : (\n                cancllButton\n              )}\n            </>\n          )}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default MessageInput;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,eAAe,MAClB,EACC,MACA,UAAU,cACV,UACA,cACA,WACA,eACA,aACA,QAAQ,cACR,OACA,iBAAiB,UACjB,YACA,UACA,WAAW,YACX,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,cAAc;CACjC,MAAM,CAAC,gBAAgB,YAAY,SAAiB,gBAAgB,EAAE;CACtE,MAAM,gBAAgB,YAAY,CAAC,WAAW,KAAK,WAAW,KAAK,CAAC;CACpE,MAAM,cAAc,MAAM,WAAW;CACrC,MAAM,eAAe,YAAY,CAAC,WAAW,GAAG,CAAC;CACjD,MAAM,aAAa,MAAM,UAAU;CAEnC,MAAM,sBAAsB,YAAY,cAAc;CACtD,MAAM,qBAAqB,WAAW;CAEtC,WAAW,eAAe,eAAe;EACvC,kBAAkB;EAClB,SAAS;EACT,gBAAgB;CAClB,CAAC;CAED,MAAM,gBACJ,oBAAC,QAAD;EAAQ,MAAM;EAAgB,MAAK;EAAU,SAAS;EACnD,UAAA;CACK,CAAA;CAGV,MAAM,eACJ,oBAAC,QAAD;EAAQ,MAAM;EAAgB,MAAM;EAAQ,SAAS;EAClD,UAAA,MAAM,UAAU;CACX,CAAA;CAGV,OACE,qBAACA,mBAAD;EAAS,KAAK;EAAI,OAAO;GAAE,MAAM;GAAG,OAAO;GAAQ,GAAG;EAAM;EAAG,GAAI;EAAnE,UAAA,CACG,SACC,oBAACC,kBAAD;GACE,UAAA;GACA,WAAW,KAAK,QAAQ,YAAY,MAAM;GAC7B;GACb,OAAO;IAAE,GAAG;IAAe,GAAG,cAAc;GAAO;GACnD,OAAO;GACE;GACT,SAAS,MAAM,SAAS,EAAE,OAAO,KAAK;GACtC,WAAW,MAAM,SAAS,EAAE,OAAO,KAAK;EACzC,CAAA,IAED,oBAAC,YAAD;GACE,WAAW,KAAK,QAAQ,YAAY,MAAM;GAC9B;GACF;GACG;GACb,OAAO,cAAc;GACrB,QAAQ;GACR,OAAO;GACE;GACT,SAAS,MAAM,SAAS,EAAE,OAAO,KAAK;GACtC,gBAAgB,MAAM,SAAS,CAAC;EACjC,CAAA,GAEH,oBAACD,mBAAD;GAAS,WAAW;GAAsB,KAAK;GAC5C,UAAA,gBACC,cAAc,cAAc,CAAC,CAAC,KAAK,aAAa,UAC9C,oBAAC,QAAD;IAAoB,MAAM;IAAgB,GAAI;GAAc,GAA/C,KAA+C,CAC7D,IAED,qBAAA,YAAA,EAAA,UAAA,CACG,WACC,oBAAC,SAAD;IAAS,QAAQ;IAAe,OAAO;IACpC,UAAA;GACM,CAAA,IAET,eAED,WACC,oBAAC,SAAD;IAAS,QAAQ;IAAc,OAAO;IACnC,UAAA;GACM,CAAA,IAET,YAEF,EAAA,CAAA;EAEG,CAAA,CACF;;AAEb,CACF"}
+{"version":3,"file":"MessageInput.mjs","names":["Flexbox","TextArea","clsx"],"sources":["../../../src/chat/MessageInput/MessageInput.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\n\nimport Button from '@/Button';\nimport CodeEditor from '@/CodeEditor';\nimport { Flexbox } from '@/Flex';\nimport { KeyMapEnum } from '@/Hotkey/const';\nimport { combineKeys } from '@/Hotkey/utils';\nimport { TextArea } from '@/Input';\nimport { useResponsive } from '@/styles/theme/scope';\nimport Tooltip from '@/Tooltip';\n\nimport { styles, textAreaStyle } from './style';\nimport type { MessageInputProps } from './type';\n\nconst MessageInput = memo<MessageInputProps>(\n  ({\n    text,\n    variant = 'borderless',\n    onCancel,\n    defaultValue,\n    onConfirm,\n    renderButtons,\n    placeholder,\n    styles: customStyles,\n    style,\n    editButtonSize = 'middle',\n    classNames,\n    shortcut,\n    language = 'markdown',\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const [temporaryValue, setValue] = useState<string>(defaultValue || '');\n    const confirmHotkey = combineKeys([KeyMapEnum.Mod, KeyMapEnum.Enter]);\n    const confirmText = text?.confirm || 'Confirm';\n    const cancelHotkey = combineKeys([KeyMapEnum.Esc]);\n    const cancelText = text?.cancel || 'Cancel';\n\n    const handleConfirm = () => onConfirm?.(temporaryValue);\n    const handleCancel = () => onCancel?.();\n\n    useHotkeys(confirmHotkey, handleConfirm, {\n      enableOnFormTags: true,\n      enabled: shortcut,\n      preventDefault: true,\n    });\n\n    const confirmButton = (\n      <Button size={editButtonSize} type=\"primary\" onClick={handleConfirm}>\n        {confirmText}\n      </Button>\n    );\n\n    const cancllButton = (\n      <Button size={editButtonSize} type={'fill'} onClick={handleCancel}>\n        {text?.cancel || 'Cancel'}\n      </Button>\n    );\n\n    return (\n      <Flexbox gap={16} style={{ flex: 1, width: '100%', ...style }} {...rest}>\n        {mobile ? (\n          <TextArea\n            autoSize\n            className={clsx(styles, classNames?.editor)}\n            placeholder={placeholder}\n            style={{ ...textAreaStyle, ...customStyles?.editor }}\n            value={temporaryValue}\n            variant={variant}\n            onBlur={(e) => setValue(e.target.value)}\n            onChange={(e) => setValue(e.target.value)}\n          />\n        ) : (\n          <CodeEditor\n            className={clsx(styles, classNames?.editor)}\n            classNames={classNames}\n            language={language}\n            placeholder={placeholder}\n            style={customStyles?.editor}\n            styles={customStyles}\n            value={temporaryValue}\n            variant={variant}\n            onBlur={(e) => setValue(e.target.value)}\n            onValueChange={(e) => setValue(e)}\n          />\n        )}\n        <Flexbox direction={'horizontal-reverse'} gap={8}>\n          {renderButtons ? (\n            renderButtons(temporaryValue).map((buttonProps, index) => (\n              <Button key={index} size={editButtonSize} {...buttonProps} />\n            ))\n          ) : (\n            <>\n              {shortcut ? (\n                <Tooltip hotkey={confirmHotkey} title={confirmText}>\n                  {confirmButton}\n                </Tooltip>\n              ) : (\n                confirmButton\n              )}\n              {shortcut ? (\n                <Tooltip hotkey={cancelHotkey} title={cancelText}>\n                  {cancllButton}\n                </Tooltip>\n              ) : (\n                cancllButton\n              )}\n            </>\n          )}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default MessageInput;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,eAAe,MAClB,EACC,MACA,UAAU,cACV,UACA,cACA,WACA,eACA,aACA,QAAQ,cACR,OACA,iBAAiB,UACjB,YACA,UACA,WAAW,YACX,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,cAAc;CACjC,MAAM,CAAC,gBAAgB,YAAY,SAAiB,gBAAgB,EAAE;CACtE,MAAM,gBAAgB,YAAY,CAAC,WAAW,KAAK,WAAW,KAAK,CAAC;CACpE,MAAM,cAAc,MAAM,WAAW;CACrC,MAAM,eAAe,YAAY,CAAC,WAAW,GAAG,CAAC;CACjD,MAAM,aAAa,MAAM,UAAU;CAEnC,MAAM,sBAAsB,YAAY,cAAc;CACtD,MAAM,qBAAqB,WAAW;CAEtC,WAAW,eAAe,eAAe;EACvC,kBAAkB;EAClB,SAAS;EACT,gBAAgB;CAClB,CAAC;CAED,MAAM,gBACJ,oBAAC,QAAD;EAAQ,MAAM;EAAgB,MAAK;EAAU,SAAS;EACnD,UAAA;CACK,CAAA;CAGV,MAAM,eACJ,oBAAC,QAAD;EAAQ,MAAM;EAAgB,MAAM;EAAQ,SAAS;EAClD,UAAA,MAAM,UAAU;CACX,CAAA;CAGV,OACE,qBAACA,mBAAD;EAAS,KAAK;EAAI,OAAO;GAAE,MAAM;GAAG,OAAO;GAAQ,GAAG;EAAM;EAAG,GAAI;EAAnE,UAAA,CACG,SACC,oBAACC,kBAAD;GACE,UAAA;GACA,WAAWC,OAAK,QAAQ,YAAY,MAAM;GAC7B;GACb,OAAO;IAAE,GAAG;IAAe,GAAG,cAAc;GAAO;GACnD,OAAO;GACE;GACT,SAAS,MAAM,SAAS,EAAE,OAAO,KAAK;GACtC,WAAW,MAAM,SAAS,EAAE,OAAO,KAAK;EACzC,CAAA,IAED,oBAAC,YAAD;GACE,WAAWA,OAAK,QAAQ,YAAY,MAAM;GAC9B;GACF;GACG;GACb,OAAO,cAAc;GACrB,QAAQ;GACR,OAAO;GACE;GACT,SAAS,MAAM,SAAS,EAAE,OAAO,KAAK;GACtC,gBAAgB,MAAM,SAAS,CAAC;EACjC,CAAA,GAEH,oBAACF,mBAAD;GAAS,WAAW;GAAsB,KAAK;GAC5C,UAAA,gBACC,cAAc,cAAc,CAAC,CAAC,KAAK,aAAa,UAC9C,oBAAC,QAAD;IAAoB,MAAM;IAAgB,GAAI;GAAc,GAA/C,KAA+C,CAC7D,IAED,qBAAA,YAAA,EAAA,UAAA,CACG,WACC,oBAAC,SAAD;IAAS,QAAQ;IAAe,OAAO;IACpC,UAAA;GACM,CAAA,IAET,eAED,WACC,oBAAC,SAAD;IAAS,QAAQ;IAAc,OAAO;IACnC,UAAA;GACM,CAAA,IAET,YAEF,EAAA,CAAA;EAEG,CAAA,CACF;;AAEb,CACF"}

package/es/dashboard/AuthLayout/AuthLayout.mjs

@@ -2,11 +2,11 @@
 import { styleProps } from "../../styles/stylex/props.mjs";
 import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { useThemeMode } from "../../styles/theme/scope.mjs";
 import Text from "../../Text/Text.mjs";
 import Skeleton from "../../Skeleton/index.mjs";
 import { styles } from "./style.mjs";
 import AuthLayoutAside from "./Aside.mjs";
-import { useSurfaceCardStyles } from "../Surface/link.mjs";
 import { isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
@@ -42,7 +42,7 @@ const FormSkeleton = () => /* @__PURE__ */ jsxs(FlexBasic_default, {
 	]
 });
 function AuthLayout({ alert, aside, background = "plain", brand, card = true, children, className, description, footer, loading, logo, style, title, tools, variant = "default", ...rest }) {
-	const cardStyles = useSurfaceCardStyles();
+	const { isDarkMode } = useThemeMode();
 	const split = Boolean(aside);
 	const art = isValidElement(background) ? background : null;
 	const heading = title === void 0 || title === null ? null : typeof title === "string" ? /* @__PURE__ */ jsx(Text, {
@@ -72,7 +72,11 @@ function AuthLayout({ alert, aside, background = "plain", brand, card = true, ch
 	return /* @__PURE__ */ jsxs("div", {
 		"data-auth-layout": "",
 		...rest,
-		...styleProps([styles.page, background === "grid" && styles.grid], className, style),
+		...styleProps([
+			styles.page,
+			background === "grid" && styles.grid,
+			background === "grid" && isDarkMode && styles.gridDark
+		], className, style),
 		children: [
 			art ? /* @__PURE__ */ jsx("div", {
 				...stylex.props(styles.backdrop),
@@ -89,7 +93,7 @@ function AuthLayout({ alert, aside, background = "plain", brand, card = true, ch
 				...stylex.props(styles.main),
 				children: card ? /* @__PURE__ */ jsx("div", {
 					"data-auth-card": "",
-					...stylex.props(styles.lift, split && styles.liftSplit, cardStyles, variant === "elevated" && styles.elevated),
+					...stylex.props(styles.lift, split && styles.liftSplit, variant === "elevated" && styles.elevated),
 					children: /* @__PURE__ */ jsxs("div", {
 						...stylex.props(styles.frame, split && styles.split),
 						children: [/* @__PURE__ */ jsxs("div", {

package/es/dashboard/AuthLayout/AuthLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AuthLayout.mjs","names":["Flexbox","Aside"],"sources":["../../../src/dashboard/AuthLayout/AuthLayout.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { isValidElement } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Skeleton from '@/Skeleton';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\n\nimport { useSurfaceCardStyles } from '../Surface/link';\nimport Aside from './Aside';\nimport { styles } from './style';\nimport type { AuthLayoutProps } from './type';\n\nconst titleStyle = {\n  fontSize: cssVar.fontSizeHeading3,\n  lineHeight: cssVar.lineHeightHeading3,\n  margin: 0,\n};\nconst descriptionStyle = { color: cssVar.colorTextSecondary, lineHeight: 1.6 };\n\nconst FormSkeleton = () => (\n  <Flexbox aria-hidden gap={12}>\n    <Skeleton height={36} radius={8} width=\"100%\" />\n    <Skeleton height={36} radius={8} width=\"100%\" />\n    <Skeleton height={36} radius={8} width=\"100%\" />\n  </Flexbox>\n);\n\nfunction AuthLayout({\n  alert,\n  aside,\n  background = 'plain',\n  brand,\n  card = true,\n  children,\n  className,\n  description,\n  footer,\n  loading,\n  logo,\n  style,\n  title,\n  tools,\n  variant = 'default',\n  ...rest\n}: AuthLayoutProps) {\n  const cardStyles = useSurfaceCardStyles();\n  const split = Boolean(aside);\n  const art = isValidElement(background) ? background : null;\n  const heading =\n    title === undefined || title === null ? null : typeof title === 'string' ? (\n      <Text as=\"h1\" style={titleStyle} weight=\"bold\">\n        {title}\n      </Text>\n    ) : (\n      <div {...stylex.props(styles.titleNode)}>{title}</div>\n    );\n  const intro =\n    logo || heading || description ? (\n      <Flexbox gap={8}>\n        {logo ? <div {...stylex.props(styles.logo)}>{logo}</div> : null}\n        {heading}\n        {description ? (\n          <Text style={descriptionStyle} type=\"secondary\">\n            {description}\n          </Text>\n        ) : null}\n      </Flexbox>\n    ) : null;\n\n  return (\n    <div\n      data-auth-layout=\"\"\n      {...rest}\n      {...styleProps([styles.page, background === 'grid' && styles.grid], className, style)}\n    >\n      {art ? <div {...stylex.props(styles.backdrop)}>{art}</div> : null}\n      <header {...stylex.props(styles.header)}>\n        {brand}\n        {tools ? <div {...stylex.props(styles.tools)}>{tools}</div> : null}\n      </header>\n      <main {...stylex.props(styles.main)}>\n        {card ? (\n          <div\n            data-auth-card=\"\"\n            {...stylex.props(\n              styles.lift,\n              split && styles.liftSplit,\n              cardStyles,\n              variant === 'elevated' && styles.elevated,\n            )}\n          >\n            <div {...stylex.props(styles.frame, split && styles.split)}>\n              <div {...stylex.props(styles.form, split && styles.formSplit)}>\n                {intro}\n                {alert}\n                {loading ? <FormSkeleton /> : children}\n                {footer ? (\n                  <div {...styleProps(styles.footer, 'lobe-auth-layout-footer')}>{footer}</div>\n                ) : null}\n              </div>\n              {aside ? <div {...stylex.props(styles.aside)}>{aside}</div> : null}\n            </div>\n          </div>\n        ) : (\n          children\n        )}\n      </main>\n    </div>\n  );\n}\n\nAuthLayout.displayName = 'AuthLayout';\nAuthLayout.Aside = Aside;\n\nexport default AuthLayout;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,aAAa;CACjB,UAAU,OAAO;CACjB,YAAY,OAAO;CACnB,QAAQ;AACV;AACA,MAAM,mBAAmB;CACvB,OAAO,OAAO;CACd,YAAY;AACd;AACA,MAAM,qBAAqB,qBAACA,mBAAD;CAAS,eAAA;CAAY,KAAK;CAA1B,UAAA;EACvB,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;EAC/C,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;EAC/C,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;CACxC;;AACX,SAAS,WAAW,EAClB,OACA,OACA,aAAa,SACb,OACA,OAAO,MACP,UACA,WACA,aACA,QACA,SACA,MACA,OACA,OACA,OACA,UAAU,WACV,GAAG,QACe;CAClB,MAAM,aAAa,qBAAqB;CACxC,MAAM,QAAQ,QAAQ,KAAK;CAC3B,MAAM,MAAM,eAAe,UAAU,IAAI,aAAa;CACtD,MAAM,UAAU,UAAU,KAAA,KAAa,UAAU,OAAO,OAAO,OAAO,UAAU,WAAW,oBAAC,MAAD;EAAM,IAAG;EAAK,OAAO;EAAY,QAAO;EAC5H,UAAA;CACG,CAAA,IAAI,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,SAAS;EAAI,UAAA;CAAW,CAAA;CACnE,MAAM,QAAQ,QAAQ,WAAW,cAAc,qBAACA,mBAAD;EAAS,KAAK;EAAd,UAAA;GACxC,OAAO,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,IAAI;IAAI,UAAA;GAAU,CAAA,IAAI;GAC1D;GACA,cAAc,oBAAC,MAAD;IAAM,OAAO;IAAkB,MAAK;IAC9C,UAAA;GACG,CAAA,IAAI;EACL;CAAI,CAAA,IAAA;CACjB,OAAO,qBAAC,OAAD;EAAK,oBAAiB;EAAG,GAAI;EAAM,GAAI,WAAW,CAAC,OAAO,MAAM,eAAe,UAAU,OAAO,IAAI,GAAG,WAAW,KAAK;EAAvH,UAAA;GACF,MAAM,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,QAAQ;IAAI,UAAA;GAAS,CAAA,IAAI;GAC7D,qBAAC,UAAD;IAAQ,GAAI,OAAO,MAAM,OAAO,MAAM;IAAtC,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;KAAK,GAAI,OAAO,MAAM,OAAO,KAAK;KAAI,UAAA;IAAW,CAAA,IAAI,IACxD;;GACR,oBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,IAAI;IAC/B,UAAA,OAAO,oBAAC,OAAD;KAAK,kBAAe;KAAG,GAAI,OAAO,MAAM,OAAO,MAAM,SAAS,OAAO,WAAW,YAAY,YAAY,cAAc,OAAO,QAAQ;KACzI,UAAA,qBAAC,OAAD;MAAK,GAAI,OAAO,MAAM,OAAO,OAAO,SAAS,OAAO,KAAK;MAAzD,UAAA,CACE,qBAAC,OAAD;OAAK,GAAI,OAAO,MAAM,OAAO,MAAM,SAAS,OAAO,SAAS;OAA5D,UAAA;QACG;QACA;QACA,UAAU,oBAAC,cAAD,CAAe,CAAA,IAAI;QAC7B,SAAS,oBAAC,OAAD;SAAK,GAAI,WAAW,OAAO,QAAQ,yBAAyB;SAAI,UAAA;QAAY,CAAA,IAAI;OACvF;MACJ,CAAA,GAAA,QAAQ,oBAAC,OAAD;OAAK,GAAI,OAAO,MAAM,OAAO,KAAK;OAAI,UAAA;MAAW,CAAA,IAAI,IAC3D;;IACF,CAAA,IAAI;GACP,CAAA;EACH;;AACT;AACA,WAAW,cAAc;AACzB,WAAW,QAAQC"}
+{"version":3,"file":"AuthLayout.mjs","names":["Flexbox","Aside"],"sources":["../../../src/dashboard/AuthLayout/AuthLayout.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { isValidElement } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Skeleton from '@/Skeleton';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport Text from '@/Text';\n\nimport Aside from './Aside';\nimport { styles } from './style';\nimport type { AuthLayoutProps } from './type';\n\nconst titleStyle = {\n  fontSize: cssVar.fontSizeHeading3,\n  lineHeight: cssVar.lineHeightHeading3,\n  margin: 0,\n};\nconst descriptionStyle = { color: cssVar.colorTextSecondary, lineHeight: 1.6 };\n\nconst FormSkeleton = () => (\n  <Flexbox aria-hidden gap={12}>\n    <Skeleton height={36} radius={8} width=\"100%\" />\n    <Skeleton height={36} radius={8} width=\"100%\" />\n    <Skeleton height={36} radius={8} width=\"100%\" />\n  </Flexbox>\n);\n\nfunction AuthLayout({\n  alert,\n  aside,\n  background = 'plain',\n  brand,\n  card = true,\n  children,\n  className,\n  description,\n  footer,\n  loading,\n  logo,\n  style,\n  title,\n  tools,\n  variant = 'default',\n  ...rest\n}: AuthLayoutProps) {\n  const { isDarkMode } = useThemeMode();\n  const split = Boolean(aside);\n  const art = isValidElement(background) ? background : null;\n  const heading =\n    title === undefined || title === null ? null : typeof title === 'string' ? (\n      <Text as=\"h1\" style={titleStyle} weight=\"bold\">\n        {title}\n      </Text>\n    ) : (\n      <div {...stylex.props(styles.titleNode)}>{title}</div>\n    );\n  const intro =\n    logo || heading || description ? (\n      <Flexbox gap={8}>\n        {logo ? <div {...stylex.props(styles.logo)}>{logo}</div> : null}\n        {heading}\n        {description ? (\n          <Text style={descriptionStyle} type=\"secondary\">\n            {description}\n          </Text>\n        ) : null}\n      </Flexbox>\n    ) : null;\n\n  return (\n    <div\n      data-auth-layout=\"\"\n      {...rest}\n      {...styleProps(\n        [\n          styles.page,\n          background === 'grid' && styles.grid,\n          background === 'grid' && isDarkMode && styles.gridDark,\n        ],\n        className,\n        style,\n      )}\n    >\n      {art ? <div {...stylex.props(styles.backdrop)}>{art}</div> : null}\n      <header {...stylex.props(styles.header)}>\n        {brand}\n        {tools ? <div {...stylex.props(styles.tools)}>{tools}</div> : null}\n      </header>\n      <main {...stylex.props(styles.main)}>\n        {card ? (\n          <div\n            data-auth-card=\"\"\n            {...stylex.props(\n              styles.lift,\n              split && styles.liftSplit,\n              variant === 'elevated' && styles.elevated,\n            )}\n          >\n            <div {...stylex.props(styles.frame, split && styles.split)}>\n              <div {...stylex.props(styles.form, split && styles.formSplit)}>\n                {intro}\n                {alert}\n                {loading ? <FormSkeleton /> : children}\n                {footer ? (\n                  <div {...styleProps(styles.footer, 'lobe-auth-layout-footer')}>{footer}</div>\n                ) : null}\n              </div>\n              {aside ? <div {...stylex.props(styles.aside)}>{aside}</div> : null}\n            </div>\n          </div>\n        ) : (\n          children\n        )}\n      </main>\n    </div>\n  );\n}\n\nAuthLayout.displayName = 'AuthLayout';\nAuthLayout.Aside = Aside;\n\nexport default AuthLayout;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,aAAa;CACjB,UAAU,OAAO;CACjB,YAAY,OAAO;CACnB,QAAQ;AACV;AACA,MAAM,mBAAmB;CACvB,OAAO,OAAO;CACd,YAAY;AACd;AACA,MAAM,qBAAqB,qBAACA,mBAAD;CAAS,eAAA;CAAY,KAAK;CAA1B,UAAA;EACvB,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;EAC/C,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;EAC/C,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;CACxC;;AACX,SAAS,WAAW,EAClB,OACA,OACA,aAAa,SACb,OACA,OAAO,MACP,UACA,WACA,aACA,QACA,SACA,MACA,OACA,OACA,OACA,UAAU,WACV,GAAG,QACe;CAClB,MAAM,EACJ,eACE,aAAa;CACjB,MAAM,QAAQ,QAAQ,KAAK;CAC3B,MAAM,MAAM,eAAe,UAAU,IAAI,aAAa;CACtD,MAAM,UAAU,UAAU,KAAA,KAAa,UAAU,OAAO,OAAO,OAAO,UAAU,WAAW,oBAAC,MAAD;EAAM,IAAG;EAAK,OAAO;EAAY,QAAO;EAC5H,UAAA;CACG,CAAA,IAAI,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,SAAS;EAAI,UAAA;CAAW,CAAA;CACnE,MAAM,QAAQ,QAAQ,WAAW,cAAc,qBAACA,mBAAD;EAAS,KAAK;EAAd,UAAA;GACxC,OAAO,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,IAAI;IAAI,UAAA;GAAU,CAAA,IAAI;GAC1D;GACA,cAAc,oBAAC,MAAD;IAAM,OAAO;IAAkB,MAAK;IAC9C,UAAA;GACG,CAAA,IAAI;EACL;CAAI,CAAA,IAAA;CACjB,OAAO,qBAAC,OAAD;EAAK,oBAAiB;EAAG,GAAI;EAAM,GAAI,WAAW;GAAC,OAAO;GAAM,eAAe,UAAU,OAAO;GAAM,eAAe,UAAU,cAAc,OAAO;EAAQ,GAAG,WAAW,KAAK;EAA/K,UAAA;GACF,MAAM,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,QAAQ;IAAI,UAAA;GAAS,CAAA,IAAI;GAC7D,qBAAC,UAAD;IAAQ,GAAI,OAAO,MAAM,OAAO,MAAM;IAAtC,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;KAAK,GAAI,OAAO,MAAM,OAAO,KAAK;KAAI,UAAA;IAAW,CAAA,IAAI,IACxD;;GACR,oBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,IAAI;IAC/B,UAAA,OAAO,oBAAC,OAAD;KAAK,kBAAe;KAAG,GAAI,OAAO,MAAM,OAAO,MAAM,SAAS,OAAO,WAAW,YAAY,cAAc,OAAO,QAAQ;KAC7H,UAAA,qBAAC,OAAD;MAAK,GAAI,OAAO,MAAM,OAAO,OAAO,SAAS,OAAO,KAAK;MAAzD,UAAA,CACE,qBAAC,OAAD;OAAK,GAAI,OAAO,MAAM,OAAO,MAAM,SAAS,OAAO,SAAS;OAA5D,UAAA;QACG;QACA;QACA,UAAU,oBAAC,cAAD,CAAe,CAAA,IAAI;QAC7B,SAAS,oBAAC,OAAD;SAAK,GAAI,WAAW,OAAO,QAAQ,yBAAyB;SAAI,UAAA;QAAY,CAAA,IAAI;OACvF;MACJ,CAAA,GAAA,QAAQ,oBAAC,OAAD;OAAK,GAAI,OAAO,MAAM,OAAO,KAAK;OAAI,UAAA;MAAW,CAAA,IAAI,IAC3D;;IACF,CAAA,IAAI;GACP,CAAA;EACH;;AACT;AACA,WAAW,cAAc;AACzB,WAAW,QAAQC"}

package/es/dashboard/AuthLayout/style.mjs

@@ -49,7 +49,7 @@ const styles = {
 	},
 	asidePlate: {
 		kpwlN0: "lb10a8y8t",
-		kWkggS: "lbxy8123",
+		kWkggS: "lb6yijhg",
 		kVAEAm: "lb10l6tqk",
 		$$css: true
 	},
@@ -109,12 +109,17 @@ const styles = {
 		$$css: true
 	},
 	grid: {
+		"--lobe-auth-grid-line": "lb13b9b4k",
 		k1YJky: "lbkuq44j",
-		kWkggS: "lbzyoshe",
-		kKwaWg: "lbo5mpd0",
+		kWkggS: "lb41ilrr",
+		kKwaWg: "lb3x8p3i",
 		kgSjnq: "lblpqoug",
 		$$css: true
 	},
+	gridDark: {
+		"--lobe-auth-grid-line": "lbp4pl1z",
+		$$css: true
+	},
 	header: {
 		kUk6DE: "lb1okw0bk",
 		kOIVth: "lb1v2ro7d",
@@ -128,6 +133,12 @@ const styles = {
 		$$css: true
 	},
 	lift: {
+		kVAM5u: "lbqnr5ac",
+		kaIpWk: "lb1ndkxwp",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kWkggS: "lb6yijhg",
+		kGVxlE: "lb3b5rli",
 		k1xSpc: "lb78zum5",
 		kzqmXN: "lb1nyppsm",
 		kVAEAm: "lb1n2onr6",

package/es/dashboard/AuthLayout/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/AuthLayout/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nexport const styles = stylex.create({\n  aside: {\n    flex: 'none',\n    backgroundColor: cssVar.colorFillSecondary,\n    boxSizing: 'border-box',\n    display: { default: null, [media.laptop]: 'none' },\n    inlineSize: '50%',\n    maxInlineSize: '50%',\n    minInlineSize: 0,\n    position: 'relative',\n  },\n  asideCopy: {\n    gap: 8,\n    insetInline: 40,\n    display: 'flex',\n    flexDirection: 'column',\n    insetBlockEnd: 64,\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 2,\n  },\n  asideKicker: {\n    margin: 0,\n    color: '#fff',\n    fontSize: cssVar.fontSize,\n    lineHeight: 1.4,\n    opacity: 0.82,\n  },\n  asideLine: {\n    margin: 0,\n    color: '#fff',\n    fontSize: cssVar.fontSizeHeading2,\n    fontWeight: 600,\n    letterSpacing: '-0.02em',\n    lineHeight: 1.25,\n  },\n  asidePanel: {\n    inset: 8,\n    borderRadius: 20,\n    overflow: 'hidden',\n    backgroundImage: 'linear-gradient(165deg, #ff9ffc 0%, #5227ff 46%, #b497cf 100%)',\n    position: 'absolute',\n  },\n  asidePlate: {\n    inset: 0,\n    backgroundColor: `var(--lobe-surface-bg-solid, ${cssVar.colorBgContainer})`,\n    position: 'absolute',\n  },\n  asideScrim: {\n    insetInline: 0,\n    backgroundImage: 'linear-gradient(to top, rgb(24 10 48 / 42%), transparent)',\n    blockSize: '58%',\n    insetBlockEnd: 0,\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 1,\n  },\n  backdrop: {\n    inset: 0,\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 0,\n  },\n  elevated: {\n    borderRadius: 28,\n  },\n  footer: {\n    margin: 0,\n    color: cssVar.colorTextSecondary,\n    fontSize: cssVar.fontSizeSM,\n    lineHeight: 1.6,\n  },\n  form: {\n    flex: 'none',\n    gap: 24,\n    paddingBlock: { default: 40, [media.laptop]: 28 },\n    paddingInline: { default: 36, [media.laptop]: 24 },\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    inlineSize: '100%',\n    justifyContent: 'center',\n    minInlineSize: 0,\n  },\n  formSplit: {\n    inlineSize: { default: '50%', [media.laptop]: '100%' },\n    maxInlineSize: { default: '50%', [media.laptop]: '100%' },\n  },\n  frame: {\n    borderRadius: 'inherit',\n    flex: 'none',\n    overflow: 'hidden',\n    display: 'flex',\n    inlineSize: '100%',\n    minInlineSize: 0,\n  },\n  grid: {\n    backgroundPosition: '-1px -1px',\n    backgroundColor: `color-mix(in srgb, ${cssVar.colorBgLayout}, ${cssVar.colorBgElevated} 70%)`,\n    backgroundImage: `linear-gradient(color-mix(in srgb, ${cssVar.colorText} 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, ${cssVar.colorText} 5%, transparent) 1px, transparent 1px)`,\n    backgroundSize: '32px 32px',\n  },\n  header: {\n    flex: 'none',\n    gap: 12,\n    paddingInline: 16,\n    alignItems: 'center',\n    blockSize: 56,\n    display: 'flex',\n    justifyContent: 'space-between',\n    position: 'relative',\n    zIndex: 1,\n  },\n  lift: {\n    display: 'flex',\n    inlineSize: 'min(440px, 100%)',\n    position: 'relative',\n  },\n  liftSplit: {\n    inlineSize: { default: 'min(880px, 100%)', [media.laptop]: 'min(440px, 100%)' },\n  },\n  logo: {\n    display: 'flex',\n    marginBlockEnd: 8,\n  },\n  main: {\n    flex: '1',\n    paddingInline: 16,\n    placeItems: 'center',\n    display: 'grid',\n    paddingBlockEnd: '48px',\n    paddingBlockStart: '24px',\n    position: 'relative',\n    zIndex: 1,\n  },\n  page: {\n    flex: '1',\n    overflow: 'auto',\n    backgroundColor: cssVar.colorBgLayout,\n    blockSize: '100%',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    inlineSize: '100%',\n    minBlockSize: '100dvh',\n    position: 'relative',\n  },\n  split: {\n    minBlockSize: { default: 520, [media.laptop]: 0 },\n  },\n  titleNode: {\n    display: 'flex',\n    minInlineSize: 0,\n  },\n  tools: {\n    gap: 6,\n    alignItems: 'center',\n    display: 'flex',\n    marginInlineStart: 'auto',\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,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,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/AuthLayout/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nexport const styles = stylex.create({\n  aside: {\n    flex: 'none',\n    backgroundColor: cssVar.colorFillSecondary,\n    boxSizing: 'border-box',\n    display: { default: null, [media.laptop]: 'none' },\n    inlineSize: '50%',\n    maxInlineSize: '50%',\n    minInlineSize: 0,\n    position: 'relative',\n  },\n  asideCopy: {\n    gap: 8,\n    insetInline: 40,\n    display: 'flex',\n    flexDirection: 'column',\n    insetBlockEnd: 64,\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 2,\n  },\n  asideKicker: {\n    margin: 0,\n    color: '#fff',\n    fontSize: cssVar.fontSize,\n    lineHeight: 1.4,\n    opacity: 0.82,\n  },\n  asideLine: {\n    margin: 0,\n    color: '#fff',\n    fontSize: cssVar.fontSizeHeading2,\n    fontWeight: 600,\n    letterSpacing: '-0.02em',\n    lineHeight: 1.25,\n  },\n  asidePanel: {\n    inset: 8,\n    borderRadius: 20,\n    overflow: 'hidden',\n    backgroundImage: 'linear-gradient(165deg, #ff9ffc 0%, #5227ff 46%, #b497cf 100%)',\n    position: 'absolute',\n  },\n  asidePlate: {\n    inset: 0,\n    backgroundColor: cssVar.colorBgContainer,\n    position: 'absolute',\n  },\n  asideScrim: {\n    insetInline: 0,\n    backgroundImage: 'linear-gradient(to top, rgb(24 10 48 / 42%), transparent)',\n    blockSize: '58%',\n    insetBlockEnd: 0,\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 1,\n  },\n  backdrop: {\n    inset: 0,\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 0,\n  },\n  elevated: {\n    borderRadius: 28,\n  },\n  footer: {\n    margin: 0,\n    color: cssVar.colorTextSecondary,\n    fontSize: cssVar.fontSizeSM,\n    lineHeight: 1.6,\n  },\n  form: {\n    flex: 'none',\n    gap: 24,\n    paddingBlock: { default: 40, [media.laptop]: 28 },\n    paddingInline: { default: 36, [media.laptop]: 24 },\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    inlineSize: '100%',\n    justifyContent: 'center',\n    minInlineSize: 0,\n  },\n  formSplit: {\n    inlineSize: { default: '50%', [media.laptop]: '100%' },\n    maxInlineSize: { default: '50%', [media.laptop]: '100%' },\n  },\n  frame: {\n    borderRadius: 'inherit',\n    flex: 'none',\n    overflow: 'hidden',\n    display: 'flex',\n    inlineSize: '100%',\n    minInlineSize: 0,\n  },\n  grid: {\n    '--lobe-auth-grid-line': `color-mix(in srgb, ${cssVar.colorText} 5%, transparent)`,\n    'backgroundPosition': '-1px -1px',\n    'backgroundColor': cssVar.colorBgLayout,\n    'backgroundImage':\n      'linear-gradient(var(--lobe-auth-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--lobe-auth-grid-line) 1px, transparent 1px)',\n    'backgroundSize': '32px 32px',\n  },\n  gridDark: {\n    '--lobe-auth-grid-line': cssVar.colorBorderSecondary,\n  },\n  header: {\n    flex: 'none',\n    gap: 12,\n    paddingInline: 16,\n    alignItems: 'center',\n    blockSize: 56,\n    display: 'flex',\n    justifyContent: 'space-between',\n    position: 'relative',\n    zIndex: 1,\n  },\n  lift: {\n    borderColor: cssVar.colorBorder,\n    borderRadius: cssVar.borderRadiusLG,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: 'rgb(0 0 0 / 4%) 0 1px 2px 0',\n    display: 'flex',\n    inlineSize: 'min(440px, 100%)',\n    position: 'relative',\n  },\n  liftSplit: {\n    inlineSize: { default: 'min(880px, 100%)', [media.laptop]: 'min(440px, 100%)' },\n  },\n  logo: {\n    display: 'flex',\n    marginBlockEnd: 8,\n  },\n  main: {\n    flex: '1',\n    paddingInline: 16,\n    placeItems: 'center',\n    display: 'grid',\n    paddingBlockEnd: '48px',\n    paddingBlockStart: '24px',\n    position: 'relative',\n    zIndex: 1,\n  },\n  page: {\n    flex: '1',\n    overflow: 'auto',\n    backgroundColor: cssVar.colorBgLayout,\n    blockSize: '100%',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    inlineSize: '100%',\n    minBlockSize: '100dvh',\n    position: 'relative',\n  },\n  split: {\n    minBlockSize: { default: 520, [media.laptop]: 0 },\n  },\n  titleNode: {\n    display: 'flex',\n    minInlineSize: 0,\n  },\n  tools: {\n    gap: 6,\n    alignItems: 'center',\n    display: 'flex',\n    marginInlineStart: 'auto',\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,yBAAyB;EACzB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,yBAAyB;EACzB,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,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,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,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,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/dashboard/AuthTools/AuthLocaleSwitch.mjs

@@ -3,7 +3,7 @@ import Icon from "../../Icon/Icon.mjs";
 import Select from "../../Select/Select.mjs";
 import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { GlobeIcon } from "lucide-react";
 //#region src/dashboard/AuthTools/AuthLocaleSwitch.tsx
@@ -11,7 +11,7 @@ import { GlobeIcon } from "lucide-react";
 function AuthLocaleSwitch({ "aria-label": ariaLabel = "Language", className, onChange, options, style, value }) {
 	return /* @__PURE__ */ jsx(Select, {
 		"aria-label": ariaLabel,
-		className: clsx("lobe-auth-locale-switch", className),
+		className: clsx$1("lobe-auth-locale-switch", className),
 		options,
 		prefix: /* @__PURE__ */ jsx(Icon, {
 			icon: GlobeIcon,

package/es/dashboard/AuthTools/AuthLocaleSwitch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AuthLocaleSwitch.mjs","names":[],"sources":["../../../src/dashboard/AuthTools/AuthLocaleSwitch.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { GlobeIcon } from 'lucide-react';\n\nimport Icon from '@/Icon';\nimport Select from '@/Select';\n\nimport { styles } from './style';\nimport type { AuthLocaleSwitchProps } from './type';\n\n/** Pill language select for auth corner tools. Controlled; pass your locale list. */\nfunction AuthLocaleSwitch({\n  'aria-label': ariaLabel = 'Language',\n  className,\n  onChange,\n  options,\n  style,\n  value,\n}: AuthLocaleSwitchProps) {\n  return (\n    <Select\n      aria-label={ariaLabel}\n      className={clsx('lobe-auth-locale-switch', className)}\n      options={options}\n      prefix={<Icon icon={GlobeIcon} {...stylex.props(styles.localeIcon)} />}\n      size=\"small\"\n      style={style}\n      value={value}\n      variant=\"outlined\"\n      onChange={(next: unknown) => {\n        if (typeof next === 'string') onChange?.(next);\n      }}\n    />\n  );\n}\n\nAuthLocaleSwitch.displayName = 'AuthLocaleSwitch';\n\nexport default AuthLocaleSwitch;\n"],"mappings":";;;;;;;;;;AAYA,SAAS,iBAAiB,EACxB,cAAc,YAAY,YAC1B,WACA,UACA,SACA,OACA,SACwB;CACxB,OAAO,oBAAC,QAAD;EAAQ,cAAY;EAAW,WAAW,KAAK,2BAA2B,SAAS;EAAY;EAAS,QAAQ,oBAAC,MAAD;GAAM,MAAM;GAAW,GAAI,OAAO,MAAM,OAAO,UAAU;EAAI,CAAA;EAAG,MAAK;EAAe;EAAc;EAAO,SAAQ;EAAW,WAAW,SAAkB;GAC9Q,IAAI,OAAO,SAAS,UAAU,WAAW,IAAI;EAC/C;CAAI,CAAA;AACN;AACA,iBAAiB,cAAc"}
+{"version":3,"file":"AuthLocaleSwitch.mjs","names":["clsx"],"sources":["../../../src/dashboard/AuthTools/AuthLocaleSwitch.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { GlobeIcon } from 'lucide-react';\n\nimport Icon from '@/Icon';\nimport Select from '@/Select';\n\nimport { styles } from './style';\nimport type { AuthLocaleSwitchProps } from './type';\n\n/** Pill language select for auth corner tools. Controlled; pass your locale list. */\nfunction AuthLocaleSwitch({\n  'aria-label': ariaLabel = 'Language',\n  className,\n  onChange,\n  options,\n  style,\n  value,\n}: AuthLocaleSwitchProps) {\n  return (\n    <Select\n      aria-label={ariaLabel}\n      className={clsx('lobe-auth-locale-switch', className)}\n      options={options}\n      prefix={<Icon icon={GlobeIcon} {...stylex.props(styles.localeIcon)} />}\n      size=\"small\"\n      style={style}\n      value={value}\n      variant=\"outlined\"\n      onChange={(next: unknown) => {\n        if (typeof next === 'string') onChange?.(next);\n      }}\n    />\n  );\n}\n\nAuthLocaleSwitch.displayName = 'AuthLocaleSwitch';\n\nexport default AuthLocaleSwitch;\n"],"mappings":";;;;;;;;;;AAYA,SAAS,iBAAiB,EACxB,cAAc,YAAY,YAC1B,WACA,UACA,SACA,OACA,SACwB;CACxB,OAAO,oBAAC,QAAD;EAAQ,cAAY;EAAW,WAAWA,OAAK,2BAA2B,SAAS;EAAY;EAAS,QAAQ,oBAAC,MAAD;GAAM,MAAM;GAAW,GAAI,OAAO,MAAM,OAAO,UAAU;EAAI,CAAA;EAAG,MAAK;EAAe;EAAc;EAAO,SAAQ;EAAW,WAAW,SAAkB;GAC9Q,IAAI,OAAO,SAAS,UAAU,WAAW,IAAI;EAC/C;CAAI,CAAA;AACN;AACA,iBAAiB,cAAc"}

package/es/dashboard/AuthTools/AuthThemeSwitch.mjs

@@ -3,7 +3,7 @@ import Icon from "../../Icon/Icon.mjs";
 import Segmented from "../../Segmented/Segmented.mjs";
 import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { Monitor, Moon, Sun } from "lucide-react";
 //#region src/dashboard/AuthTools/AuthThemeSwitch.tsx
@@ -33,7 +33,7 @@ function AuthThemeSwitch({ className, labels, onChange, style, value = "auto" })
 		...labels
 	};
 	return /* @__PURE__ */ jsx(Segmented, {
-		className: clsx("lobe-auth-theme-switch", className),
+		className: clsx$1("lobe-auth-theme-switch", className),
 		size: "small",
 		style,
 		value,