@lobehub/ui 5.42.6 → 5.42.8

package/README.md

@@ -119,31 +119,34 @@ import hotkeyMessages from '@lobehub/ui/i18n/resources/hotkey';
 
 ### ConfigProvider (Motion)
 
-You must pass a motion component via `ConfigProvider`.
-If your app uses `LazyMotion`, pass `m`:
+You must pass a motion component via `ConfigProvider`, and `ConfigProvider` must wrap `ThemeProvider` — never the other way round. `ThemeProvider` renders the antd `App` that hosts the static `notification` / `modal` holders and reads the CDN config for its webfonts, so both need the contexts from `ConfigProvider` above them.
 
 ```tsx
-import { ConfigProvider } from '@lobehub/ui';
+import { ConfigProvider, ThemeProvider } from '@lobehub/ui';
 import { motion } from 'motion/react';
 
 export default () => (
   <ConfigProvider motion={motion}>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </ConfigProvider>
 );
 ```
 
-If your app uses `LazyMotion`:
+If your app uses `LazyMotion`, pass `m`:
 
 ```tsx
-import { ConfigProvider } from '@lobehub/ui';
+import { ConfigProvider, ThemeProvider } from '@lobehub/ui';
 import { LazyMotion, domAnimation } from 'motion/react';
 import * as m from 'motion/react-m';
 
 export default () => (
   <LazyMotion features={domAnimation}>
     <ConfigProvider motion={m}>
-      <App />
+      <ThemeProvider>
+        <App />
+      </ThemeProvider>
     </ConfigProvider>
   </LazyMotion>
 );

package/es/Image/viewer/ImageViewer.mjs

@@ -1,5 +1,4 @@
 "use client";
-import { MotionComponent } from "../../MotionProvider/index.mjs";
 import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
 import { useLayerZIndex } from "../../base-ui/zIndex/useLayerZIndex.mjs";
 import { styles } from "../style.mjs";
@@ -13,9 +12,8 @@ import { readNatural, useGalleryNav } from "./useGalleryNav.mjs";
 import { useRefitTransition } from "./useRefitTransition.mjs";
 import { useZoomPan } from "./useZoomPan.mjs";
 import ViewerChrome from "./ViewerChrome.mjs";
-import { memo, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion } from "motion/react";
 import { useMergeRefs } from "react-merge-refs";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/Image/viewer/ImageViewer.tsx
@@ -27,8 +25,7 @@ const prefersReducedMotion = () => window.matchMedia?.("(prefers-reduced-motion:
 const ImageViewer = memo(({ entries, index, openerFocusElement, token }) => {
 	const openerEntry = entries[index];
 	const appElement = useAppElement();
-	const motionComponent = use(MotionComponent);
-	const [animated] = useState(() => !!motionComponent && !prefersReducedMotion());
+	const [animated] = useState(() => !prefersReducedMotion());
 	const { ref: layerRef, zIndex } = useLayerZIndex("modal");
 	const [currentIndex, setCurrentIndex] = useState(index);
 	const currentEntry = entries[currentIndex];
@@ -205,80 +202,77 @@ const ImageViewer = memo(({ entries, index, openerFocusElement, token }) => {
 	useEffect(() => () => {
 		if (!openerEntry.element.isConnected) endClosePreview(token);
 	}, [openerEntry, token]);
-	return /* @__PURE__ */ jsx(MotionComponent, {
-		value: motionComponent ?? motion,
-		children: /* @__PURE__ */ jsx(Dialog.Root, {
-			modal: true,
-			open: true,
-			onOpenChange: handleDialogOpenChange,
-			children: /* @__PURE__ */ jsxs(Dialog.Portal, {
-				container: appElement ?? void 0,
-				children: [
-					/* @__PURE__ */ jsx(Dialog.Backdrop, {
-						forceRender: true,
-						className: styles.viewerBackdrop,
-						ref: backdropRef,
-						style: zIndex === void 0 ? void 0 : { zIndex },
-						onClick: gestures.onSurfaceClick
-					}),
-					/* @__PURE__ */ jsxs(Dialog.Popup, {
-						"aria-label": currentEntry.element.alt || void 0,
-						className: styles.viewerPopup,
-						finalFocus,
-						initialFocus: popupNodeRef,
-						ref: popupRef,
-						style: zIndex === void 0 ? void 0 : { zIndex: zIndex + 1 },
-						tabIndex: -1,
-						onClick: gestures.onSurfaceClick,
-						onPointerCancel: gestures.onPointerFinish,
-						onPointerDown: gestures.onPointerDown,
-						onPointerMove: gestures.onPointerMove,
-						onPointerUp: gestures.onPointerFinish,
-						children: [/* @__PURE__ */ jsx("img", {
-							alt: currentEntry.element.alt,
-							className: styles.viewerImage,
-							ref: imageRef,
-							src: source,
-							style: {
-								cursor: gestures.cursor,
-								height: imageRect.height,
-								left: imageRect.x,
-								top: imageRect.y,
-								width: imageRect.width
-							},
-							onClick: gestures.onImageClick,
-							onDoubleClick: gestures.onImageDoubleClick,
-							onLoad: handleLoad
-						}), /* @__PURE__ */ jsx(ViewerChrome, {
-							canZoomIn,
-							canZoomOut,
-							chromeRef,
-							current: currentIndex,
-							fitRect,
-							flipHorizontal,
-							flipVertical,
-							hasNext,
-							hasPrev,
-							natural,
-							next,
-							prev,
-							rotateLeft,
-							rotateRight,
-							rotation,
-							scale,
-							source,
-							toggleActualSize,
-							toolbarAddon: currentEntry.options.toolbarAddon,
-							total: entries.length,
-							zoomIn,
-							zoomOut,
-							onClose: handleClose,
-							onDownload: currentEntry.options.onDownload
-						})]
-					}),
-					/* @__PURE__ */ jsx(ToastHost, { root: appElement ?? void 0 })
-				]
-			})
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		modal: true,
+		open: true,
+		onOpenChange: handleDialogOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, {
+			container: appElement ?? void 0,
+			children: [
+				/* @__PURE__ */ jsx(Dialog.Backdrop, {
+					forceRender: true,
+					className: styles.viewerBackdrop,
+					ref: backdropRef,
+					style: zIndex === void 0 ? void 0 : { zIndex },
+					onClick: gestures.onSurfaceClick
+				}),
+				/* @__PURE__ */ jsxs(Dialog.Popup, {
+					"aria-label": currentEntry.element.alt || void 0,
+					className: styles.viewerPopup,
+					finalFocus,
+					initialFocus: popupNodeRef,
+					ref: popupRef,
+					style: zIndex === void 0 ? void 0 : { zIndex: zIndex + 1 },
+					tabIndex: -1,
+					onClick: gestures.onSurfaceClick,
+					onPointerCancel: gestures.onPointerFinish,
+					onPointerDown: gestures.onPointerDown,
+					onPointerMove: gestures.onPointerMove,
+					onPointerUp: gestures.onPointerFinish,
+					children: [/* @__PURE__ */ jsx("img", {
+						alt: currentEntry.element.alt,
+						className: styles.viewerImage,
+						ref: imageRef,
+						src: source,
+						style: {
+							cursor: gestures.cursor,
+							height: imageRect.height,
+							left: imageRect.x,
+							top: imageRect.y,
+							width: imageRect.width
+						},
+						onClick: gestures.onImageClick,
+						onDoubleClick: gestures.onImageDoubleClick,
+						onLoad: handleLoad
+					}), /* @__PURE__ */ jsx(ViewerChrome, {
+						canZoomIn,
+						canZoomOut,
+						chromeRef,
+						current: currentIndex,
+						fitRect,
+						flipHorizontal,
+						flipVertical,
+						hasNext,
+						hasPrev,
+						natural,
+						next,
+						prev,
+						rotateLeft,
+						rotateRight,
+						rotation,
+						scale,
+						source,
+						toggleActualSize,
+						toolbarAddon: currentEntry.options.toolbarAddon,
+						total: entries.length,
+						zoomIn,
+						zoomOut,
+						onClose: handleClose,
+						onDownload: currentEntry.options.onDownload
+					})]
+				}),
+				/* @__PURE__ */ jsx(ToastHost, { root: appElement ?? void 0 })
+			]
 		})
 	});
 });

package/es/Image/viewer/ImageViewer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageViewer.mjs","names":[],"sources":["../../../src/Image/viewer/ImageViewer.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog, type DialogRootProps } from '@base-ui/react/dialog';\nimport { motion } from 'motion/react';\nimport {\n  memo,\n  type SyntheticEvent,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport { ToastHost } from '@/base-ui/Toast';\nimport { useLayerZIndex } from '@/base-ui/zIndex';\nimport { MotionComponent } from '@/MotionProvider';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { styles } from '../style';\nimport { computeFit, type Size, unrotatedRect } from './geometry';\nimport { beginClosePreview, endClosePreview, type PreviewEntry } from './registry';\nimport { useFinalFocus } from './useFinalFocus';\nimport { useFlipTransition } from './useFlipTransition';\nimport { readNatural, useGalleryNav } from './useGalleryNav';\nimport { useRefitTransition } from './useRefitTransition';\nimport { useViewerGestures } from './useViewerGestures';\nimport { useZoomPan } from './useZoomPan';\nimport ViewerChrome from './ViewerChrome';\n\nexport interface ImageViewerProps {\n  entries: PreviewEntry[];\n  index: number;\n  openerFocusElement: HTMLElement | null;\n  token: number;\n}\n\nconst readViewport = (): Size => ({ height: window.innerHeight, width: window.innerWidth });\n\nconst prefersReducedMotion = () =>\n  window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n\nconst ImageViewer = memo<ImageViewerProps>(({ entries, index, openerFocusElement, token }) => {\n  const openerEntry = entries[index];\n  const appElement = useAppElement();\n  const motionComponent = use(MotionComponent);\n  const [animated] = useState(() => !!motionComponent && !prefersReducedMotion());\n\n  const { ref: layerRef, zIndex } = useLayerZIndex<HTMLDivElement>('modal');\n\n  const [currentIndex, setCurrentIndex] = useState(index);\n  const currentEntry = entries[currentIndex];\n  const currentEntryRef = useRef(currentEntry);\n  currentEntryRef.current = currentEntry;\n\n  const [source, setSource] = useState(openerEntry.src);\n  const [natural, setNatural] = useState<Size>(() => readNatural(openerEntry.element));\n  const [viewport, setViewport] = useState<Size>(readViewport);\n\n  const closeRef = useRef<(() => void) | null>(null);\n  const requestClose = useCallback(() => closeRef.current?.(), []);\n\n  // useZoomPan needs to gate its wheel/toolbar entry points on close-in-flight,\n  // but that state only exists once useFlipTransition (below) has run — and it\n  // needs useZoomPan's own transform values first. Break the cycle with a\n  // stable indirection: the ref is repointed at the real isClosing once it's\n  // available, written directly during render like the other *Ref fields here.\n  const isClosingIndirectRef = useRef<() => boolean>(() => false);\n  const isClosingIndirect = useCallback(() => isClosingIndirectRef.current(), []);\n\n  const isTransitioningIndirectRef = useRef<() => boolean>(() => true);\n  const isTransitioningIndirect = useCallback(() => isTransitioningIndirectRef.current(), []);\n\n  const fillViewport = Boolean(\n    currentEntry.previewSrc && currentEntry.previewSrc !== currentEntry.src,\n  );\n\n  const {\n    canZoomIn,\n    canZoomOut,\n    dragBy,\n    dragEnd,\n    escIntent,\n    flipHorizontal,\n    flipVertical,\n    flipX,\n    flipY,\n    getInitialScale,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    reset,\n    resetCloseTracking,\n    rotate,\n    rotateLeft,\n    rotateRight,\n    rotation,\n    scale,\n    setNatural: syncZoomNatural,\n    setViewport: syncZoomViewport,\n    toggleActualSize,\n    x,\n    y,\n    zoomIn,\n    zoomOut,\n  } = useZoomPan({\n    autoZoomThreshold: currentEntry.options.autoZoomThreshold,\n    defaultZoom: currentEntry.options.defaultZoom,\n    fillViewport,\n    isClosing: isClosingIndirect,\n    isTransitioning: isTransitioningIndirect,\n    maxScale: currentEntry.options.maxScale,\n    natural,\n    onCloseRequest: requestClose,\n    viewport,\n  });\n\n  const fitRect = useMemo(\n    () => computeFit(natural, viewport, rotation, fillViewport),\n    [natural, viewport, rotation, fillViewport],\n  );\n  const fitRectRef = useRef(fitRect);\n  fitRectRef.current = fitRect;\n  const getFitRect = useCallback(() => fitRectRef.current, []);\n\n  const imageRect = useMemo(() => unrotatedRect(fitRect, rotation), [fitRect, rotation]);\n\n  const viewportRef = useRef(viewport);\n  viewportRef.current = viewport;\n  const getViewportWidth = useCallback(() => viewportRef.current.width, []);\n\n  const getCloseSource = useCallback(() => currentEntryRef.current.element, []);\n\n  const transform = useMemo(\n    () => ({ flipX, flipY, rotate, scale, x, y }),\n    [flipX, flipY, rotate, scale, x, y],\n  );\n  const handleClosed = useCallback(() => endClosePreview(token), [token]);\n\n  const {\n    backdropRef,\n    chromeRef,\n    close,\n    imageRef: flipImageRef,\n    isClosing,\n    isTransitioning,\n    switchTo,\n  } = useFlipTransition({\n    animated,\n    getCloseSource,\n    getFitRect,\n    getInitialScale,\n    getViewportWidth,\n    onClosed: handleClosed,\n    source: openerEntry.element,\n    transform,\n  });\n  isClosingIndirectRef.current = isClosing;\n  isTransitioningIndirectRef.current = isTransitioning;\n\n  useRefitTransition({\n    animated,\n    fillViewport,\n    isTransitioning,\n    natural,\n    rotation,\n    scale,\n    viewport,\n    x,\n    y,\n  });\n  const finalFocus = useFinalFocus(openerFocusElement);\n\n  const isCleanRef = useRef(isClean);\n  isCleanRef.current = isClean;\n\n  const handleClose = useCallback(() => {\n    beginClosePreview(token);\n    close({ fade: !isCleanRef.current });\n  }, [close, token]);\n  closeRef.current = handleClose;\n\n  const handleDialogOpenChange = useCallback<NonNullable<DialogRootProps['onOpenChange']>>(\n    (open, eventDetails) => {\n      if (open) return;\n      // Base UI fires this on every Esc regardless of whether we're already\n      // mid-close (our Dialog.Root's open prop never actually flips to\n      // false), so without this guard a second Esc during the close window\n      // reads escIntent() off the close spring's mid-flight scale, decides\n      // 'reset', and cancels the close animation out from under itself.\n      if (isClosing()) return;\n      if (eventDetails.reason === 'escape-key' && escIntent() === 'reset') {\n        eventDetails.cancel();\n        reset();\n        return;\n      }\n      handleClose();\n    },\n    [escIntent, handleClose, isClosing, reset],\n  );\n\n  const gestures = useViewerGestures({\n    dragBy,\n    dragEnd,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    onClose: handleClose,\n    reset,\n    zoomIn,\n    zoomOut,\n  });\n\n  const { hasNext, hasPrev, next, prev } = useGalleryNav({\n    cancelPendingClose: gestures.cancelPendingClose,\n    currentIndex,\n    entries,\n    flipX,\n    flipY,\n    getInitialScale,\n    resetCloseTracking,\n    rotate,\n    scale,\n    setCurrentIndex,\n    setNatural,\n    setSource,\n    switchTo,\n    syncZoomNatural,\n    x,\n    y,\n  });\n\n  const popupNodeRef = useRef<HTMLDivElement | null>(null);\n  const popupRef = useMergeRefs<HTMLDivElement>([layerRef, gestures.popupRef, popupNodeRef]);\n  const imageRef = useMergeRefs<HTMLImageElement>([flipImageRef, gestures.imageRef]);\n\n  const handleLoad = useCallback(\n    (event: SyntheticEvent<HTMLImageElement>) => {\n      const loaded = event.currentTarget;\n      if (!loaded.naturalWidth || !loaded.naturalHeight) return;\n      const next = { height: loaded.naturalHeight, width: loaded.naturalWidth };\n      setNatural((prev) =>\n        prev.width === next.width && prev.height === next.height ? prev : next,\n      );\n      syncZoomNatural(next);\n    },\n    [syncZoomNatural],\n  );\n\n  useEffect(() => {\n    const handleResize = () => {\n      const next = readViewport();\n      setViewport(next);\n      syncZoomViewport(next);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [syncZoomViewport]);\n\n  useEffect(() => {\n    const { previewSrc, src } = currentEntry;\n    if (!previewSrc || previewSrc === src) return;\n    let cancelled = false;\n    const loader = new window.Image();\n    const handleLoaded = () => {\n      if (!cancelled) setSource(previewSrc);\n    };\n    loader.addEventListener('load', handleLoaded);\n    loader.src = previewSrc;\n    return () => {\n      cancelled = true;\n      loader.removeEventListener('load', handleLoaded);\n    };\n  }, [currentEntry]);\n\n  useEffect(\n    () => () => {\n      const thumbnailWasRemoved = !openerEntry.element.isConnected;\n      if (thumbnailWasRemoved) endClosePreview(token);\n    },\n    [openerEntry, token],\n  );\n\n  return (\n    // The chrome is built from Base UI controls, which need a motion component to\n    // render at all. The viewer itself still degrades to a plain fade without one —\n    // `animated` stays false — but the toolbar has no such fallback, so an app that\n    // skipped ConfigProvider gets motion here rather than a crash.\n    <MotionComponent value={motionComponent ?? motion}>\n      <Dialog.Root modal open onOpenChange={handleDialogOpenChange}>\n        <Dialog.Portal container={appElement ?? undefined}>\n          {/* Base UI drops a nested dialog's backdrop so overlays don't stack. The viewer is\n            not an overlay on the surface it opened from — it replaces the screen — so it\n            keeps its own scrim, or a viewer opened from a maskless drawer would show the\n            page straight through the letterbox around the image. */}\n          <Dialog.Backdrop\n            forceRender\n            className={styles.viewerBackdrop}\n            ref={backdropRef}\n            style={zIndex === undefined ? undefined : { zIndex }}\n            onClick={gestures.onSurfaceClick}\n          />\n          <Dialog.Popup\n            aria-label={currentEntry.element.alt || undefined}\n            className={styles.viewerPopup}\n            finalFocus={finalFocus}\n            // Focus the popup itself instead of Base UI's default (the first\n            // tabbable — the close button): a focus-visible close button pins\n            // the idle auto-hide open forever and pops its tooltip on open.\n            initialFocus={popupNodeRef}\n            ref={popupRef}\n            style={zIndex === undefined ? undefined : { zIndex: zIndex + 1 }}\n            tabIndex={-1}\n            onClick={gestures.onSurfaceClick}\n            onPointerCancel={gestures.onPointerFinish}\n            onPointerDown={gestures.onPointerDown}\n            onPointerMove={gestures.onPointerMove}\n            onPointerUp={gestures.onPointerFinish}\n          >\n            <img\n              alt={currentEntry.element.alt}\n              className={styles.viewerImage}\n              ref={imageRef}\n              src={source}\n              style={{\n                cursor: gestures.cursor,\n                height: imageRect.height,\n                left: imageRect.x,\n                top: imageRect.y,\n                width: imageRect.width,\n              }}\n              onClick={gestures.onImageClick}\n              onDoubleClick={gestures.onImageDoubleClick}\n              onLoad={handleLoad}\n            />\n            <ViewerChrome\n              canZoomIn={canZoomIn}\n              canZoomOut={canZoomOut}\n              chromeRef={chromeRef}\n              current={currentIndex}\n              fitRect={fitRect}\n              flipHorizontal={flipHorizontal}\n              flipVertical={flipVertical}\n              hasNext={hasNext}\n              hasPrev={hasPrev}\n              natural={natural}\n              next={next}\n              prev={prev}\n              rotateLeft={rotateLeft}\n              rotateRight={rotateRight}\n              rotation={rotation}\n              scale={scale}\n              source={source}\n              toggleActualSize={toggleActualSize}\n              toolbarAddon={currentEntry.options.toolbarAddon}\n              total={entries.length}\n              zoomIn={zoomIn}\n              zoomOut={zoomOut}\n              onClose={handleClose}\n              onDownload={currentEntry.options.onDownload}\n            />\n          </Dialog.Popup>\n          <ToastHost root={appElement ?? undefined} />\n        </Dialog.Portal>\n      </Dialog.Root>\n    </MotionComponent>\n  );\n});\n\nImageViewer.displayName = 'ImageViewer';\n\nexport default ImageViewer;\n"],"mappings":"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"}
+{"version":3,"file":"ImageViewer.mjs","names":[],"sources":["../../../src/Image/viewer/ImageViewer.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog, type DialogRootProps } from '@base-ui/react/dialog';\nimport {\n  memo,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport { ToastHost } from '@/base-ui/Toast';\nimport { useLayerZIndex } from '@/base-ui/zIndex';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { styles } from '../style';\nimport { computeFit, type Size, unrotatedRect } from './geometry';\nimport { beginClosePreview, endClosePreview, type PreviewEntry } from './registry';\nimport { useFinalFocus } from './useFinalFocus';\nimport { useFlipTransition } from './useFlipTransition';\nimport { readNatural, useGalleryNav } from './useGalleryNav';\nimport { useRefitTransition } from './useRefitTransition';\nimport { useViewerGestures } from './useViewerGestures';\nimport { useZoomPan } from './useZoomPan';\nimport ViewerChrome from './ViewerChrome';\n\nexport interface ImageViewerProps {\n  entries: PreviewEntry[];\n  index: number;\n  openerFocusElement: HTMLElement | null;\n  token: number;\n}\n\nconst readViewport = (): Size => ({ height: window.innerHeight, width: window.innerWidth });\n\nconst prefersReducedMotion = () =>\n  window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n\nconst ImageViewer = memo<ImageViewerProps>(({ entries, index, openerFocusElement, token }) => {\n  const openerEntry = entries[index];\n  const appElement = useAppElement();\n  const [animated] = useState(() => !prefersReducedMotion());\n\n  const { ref: layerRef, zIndex } = useLayerZIndex<HTMLDivElement>('modal');\n\n  const [currentIndex, setCurrentIndex] = useState(index);\n  const currentEntry = entries[currentIndex];\n  const currentEntryRef = useRef(currentEntry);\n  currentEntryRef.current = currentEntry;\n\n  const [source, setSource] = useState(openerEntry.src);\n  const [natural, setNatural] = useState<Size>(() => readNatural(openerEntry.element));\n  const [viewport, setViewport] = useState<Size>(readViewport);\n\n  const closeRef = useRef<(() => void) | null>(null);\n  const requestClose = useCallback(() => closeRef.current?.(), []);\n\n  // useZoomPan needs to gate its wheel/toolbar entry points on close-in-flight,\n  // but that state only exists once useFlipTransition (below) has run — and it\n  // needs useZoomPan's own transform values first. Break the cycle with a\n  // stable indirection: the ref is repointed at the real isClosing once it's\n  // available, written directly during render like the other *Ref fields here.\n  const isClosingIndirectRef = useRef<() => boolean>(() => false);\n  const isClosingIndirect = useCallback(() => isClosingIndirectRef.current(), []);\n\n  const isTransitioningIndirectRef = useRef<() => boolean>(() => true);\n  const isTransitioningIndirect = useCallback(() => isTransitioningIndirectRef.current(), []);\n\n  const fillViewport = Boolean(\n    currentEntry.previewSrc && currentEntry.previewSrc !== currentEntry.src,\n  );\n\n  const {\n    canZoomIn,\n    canZoomOut,\n    dragBy,\n    dragEnd,\n    escIntent,\n    flipHorizontal,\n    flipVertical,\n    flipX,\n    flipY,\n    getInitialScale,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    reset,\n    resetCloseTracking,\n    rotate,\n    rotateLeft,\n    rotateRight,\n    rotation,\n    scale,\n    setNatural: syncZoomNatural,\n    setViewport: syncZoomViewport,\n    toggleActualSize,\n    x,\n    y,\n    zoomIn,\n    zoomOut,\n  } = useZoomPan({\n    autoZoomThreshold: currentEntry.options.autoZoomThreshold,\n    defaultZoom: currentEntry.options.defaultZoom,\n    fillViewport,\n    isClosing: isClosingIndirect,\n    isTransitioning: isTransitioningIndirect,\n    maxScale: currentEntry.options.maxScale,\n    natural,\n    onCloseRequest: requestClose,\n    viewport,\n  });\n\n  const fitRect = useMemo(\n    () => computeFit(natural, viewport, rotation, fillViewport),\n    [natural, viewport, rotation, fillViewport],\n  );\n  const fitRectRef = useRef(fitRect);\n  fitRectRef.current = fitRect;\n  const getFitRect = useCallback(() => fitRectRef.current, []);\n\n  const imageRect = useMemo(() => unrotatedRect(fitRect, rotation), [fitRect, rotation]);\n\n  const viewportRef = useRef(viewport);\n  viewportRef.current = viewport;\n  const getViewportWidth = useCallback(() => viewportRef.current.width, []);\n\n  const getCloseSource = useCallback(() => currentEntryRef.current.element, []);\n\n  const transform = useMemo(\n    () => ({ flipX, flipY, rotate, scale, x, y }),\n    [flipX, flipY, rotate, scale, x, y],\n  );\n  const handleClosed = useCallback(() => endClosePreview(token), [token]);\n\n  const {\n    backdropRef,\n    chromeRef,\n    close,\n    imageRef: flipImageRef,\n    isClosing,\n    isTransitioning,\n    switchTo,\n  } = useFlipTransition({\n    animated,\n    getCloseSource,\n    getFitRect,\n    getInitialScale,\n    getViewportWidth,\n    onClosed: handleClosed,\n    source: openerEntry.element,\n    transform,\n  });\n  isClosingIndirectRef.current = isClosing;\n  isTransitioningIndirectRef.current = isTransitioning;\n\n  useRefitTransition({\n    animated,\n    fillViewport,\n    isTransitioning,\n    natural,\n    rotation,\n    scale,\n    viewport,\n    x,\n    y,\n  });\n  const finalFocus = useFinalFocus(openerFocusElement);\n\n  const isCleanRef = useRef(isClean);\n  isCleanRef.current = isClean;\n\n  const handleClose = useCallback(() => {\n    beginClosePreview(token);\n    close({ fade: !isCleanRef.current });\n  }, [close, token]);\n  closeRef.current = handleClose;\n\n  const handleDialogOpenChange = useCallback<NonNullable<DialogRootProps['onOpenChange']>>(\n    (open, eventDetails) => {\n      if (open) return;\n      // Base UI fires this on every Esc regardless of whether we're already\n      // mid-close (our Dialog.Root's open prop never actually flips to\n      // false), so without this guard a second Esc during the close window\n      // reads escIntent() off the close spring's mid-flight scale, decides\n      // 'reset', and cancels the close animation out from under itself.\n      if (isClosing()) return;\n      if (eventDetails.reason === 'escape-key' && escIntent() === 'reset') {\n        eventDetails.cancel();\n        reset();\n        return;\n      }\n      handleClose();\n    },\n    [escIntent, handleClose, isClosing, reset],\n  );\n\n  const gestures = useViewerGestures({\n    dragBy,\n    dragEnd,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    onClose: handleClose,\n    reset,\n    zoomIn,\n    zoomOut,\n  });\n\n  const { hasNext, hasPrev, next, prev } = useGalleryNav({\n    cancelPendingClose: gestures.cancelPendingClose,\n    currentIndex,\n    entries,\n    flipX,\n    flipY,\n    getInitialScale,\n    resetCloseTracking,\n    rotate,\n    scale,\n    setCurrentIndex,\n    setNatural,\n    setSource,\n    switchTo,\n    syncZoomNatural,\n    x,\n    y,\n  });\n\n  const popupNodeRef = useRef<HTMLDivElement | null>(null);\n  const popupRef = useMergeRefs<HTMLDivElement>([layerRef, gestures.popupRef, popupNodeRef]);\n  const imageRef = useMergeRefs<HTMLImageElement>([flipImageRef, gestures.imageRef]);\n\n  const handleLoad = useCallback(\n    (event: SyntheticEvent<HTMLImageElement>) => {\n      const loaded = event.currentTarget;\n      if (!loaded.naturalWidth || !loaded.naturalHeight) return;\n      const next = { height: loaded.naturalHeight, width: loaded.naturalWidth };\n      setNatural((prev) =>\n        prev.width === next.width && prev.height === next.height ? prev : next,\n      );\n      syncZoomNatural(next);\n    },\n    [syncZoomNatural],\n  );\n\n  useEffect(() => {\n    const handleResize = () => {\n      const next = readViewport();\n      setViewport(next);\n      syncZoomViewport(next);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [syncZoomViewport]);\n\n  useEffect(() => {\n    const { previewSrc, src } = currentEntry;\n    if (!previewSrc || previewSrc === src) return;\n    let cancelled = false;\n    const loader = new window.Image();\n    const handleLoaded = () => {\n      if (!cancelled) setSource(previewSrc);\n    };\n    loader.addEventListener('load', handleLoaded);\n    loader.src = previewSrc;\n    return () => {\n      cancelled = true;\n      loader.removeEventListener('load', handleLoaded);\n    };\n  }, [currentEntry]);\n\n  useEffect(\n    () => () => {\n      const thumbnailWasRemoved = !openerEntry.element.isConnected;\n      if (thumbnailWasRemoved) endClosePreview(token);\n    },\n    [openerEntry, token],\n  );\n\n  return (\n    <Dialog.Root modal open onOpenChange={handleDialogOpenChange}>\n      <Dialog.Portal container={appElement ?? undefined}>\n        {/* Base UI drops a nested dialog's backdrop so overlays don't stack. The viewer is\n            not an overlay on the surface it opened from — it replaces the screen — so it\n            keeps its own scrim, or a viewer opened from a maskless drawer would show the\n            page straight through the letterbox around the image. */}\n        <Dialog.Backdrop\n          forceRender\n          className={styles.viewerBackdrop}\n          ref={backdropRef}\n          style={zIndex === undefined ? undefined : { zIndex }}\n          onClick={gestures.onSurfaceClick}\n        />\n        <Dialog.Popup\n          aria-label={currentEntry.element.alt || undefined}\n          className={styles.viewerPopup}\n          finalFocus={finalFocus}\n          // Focus the popup itself instead of Base UI's default (the first\n          // tabbable — the close button): a focus-visible close button pins\n          // the idle auto-hide open forever and pops its tooltip on open.\n          initialFocus={popupNodeRef}\n          ref={popupRef}\n          style={zIndex === undefined ? undefined : { zIndex: zIndex + 1 }}\n          tabIndex={-1}\n          onClick={gestures.onSurfaceClick}\n          onPointerCancel={gestures.onPointerFinish}\n          onPointerDown={gestures.onPointerDown}\n          onPointerMove={gestures.onPointerMove}\n          onPointerUp={gestures.onPointerFinish}\n        >\n          <img\n            alt={currentEntry.element.alt}\n            className={styles.viewerImage}\n            ref={imageRef}\n            src={source}\n            style={{\n              cursor: gestures.cursor,\n              height: imageRect.height,\n              left: imageRect.x,\n              top: imageRect.y,\n              width: imageRect.width,\n            }}\n            onClick={gestures.onImageClick}\n            onDoubleClick={gestures.onImageDoubleClick}\n            onLoad={handleLoad}\n          />\n          <ViewerChrome\n            canZoomIn={canZoomIn}\n            canZoomOut={canZoomOut}\n            chromeRef={chromeRef}\n            current={currentIndex}\n            fitRect={fitRect}\n            flipHorizontal={flipHorizontal}\n            flipVertical={flipVertical}\n            hasNext={hasNext}\n            hasPrev={hasPrev}\n            natural={natural}\n            next={next}\n            prev={prev}\n            rotateLeft={rotateLeft}\n            rotateRight={rotateRight}\n            rotation={rotation}\n            scale={scale}\n            source={source}\n            toggleActualSize={toggleActualSize}\n            toolbarAddon={currentEntry.options.toolbarAddon}\n            total={entries.length}\n            zoomIn={zoomIn}\n            zoomOut={zoomOut}\n            onClose={handleClose}\n            onDownload={currentEntry.options.onDownload}\n          />\n        </Dialog.Popup>\n        <ToastHost root={appElement ?? undefined} />\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n});\n\nImageViewer.displayName = 'ImageViewer';\n\nexport default ImageViewer;\n"],"mappings":"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"}

package/es/base-ui/DraggablePanel/atoms.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { useMotionComponent } from "../../MotionProvider/index.mjs";
 import ActionIcon from "../ActionIcon/ActionIcon.mjs";
 import { DraggablePanelContext, useDraggablePanelContext } from "./context.mjs";
 import { AXES } from "./core/axes.mjs";
@@ -10,7 +11,7 @@ import { BOW, handleVariants, rootVariants, styles, toggleVariants } from "./sty
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import { motion, useTransform } from "motion/react";
+import { useTransform } from "motion/react";
 import useMergeState from "use-merge-value";
 import { ChevronLeft } from "lucide-react";
 //#region src/base-ui/DraggablePanel/atoms.tsx
@@ -140,12 +141,13 @@ const DraggablePanelRoot = memo(({ backgroundColor, children, className, collaps
 });
 DraggablePanelRoot.displayName = "DraggablePanelRoot";
 const DraggablePanelContent = memo(({ children, className, style, ...rest }) => {
+	const Motion = useMotionComponent();
 	const { axis, controller, expand, placement, state } = useDraggablePanelContext();
 	const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));
 	const target = useStore(controller.subscribe, () => controller.target);
 	const clipping = state.dragging || state.folding || target === 0;
 	const shrunk = state.collapsing || !expand;
-	return /* @__PURE__ */ jsx(motion.div, {
+	return /* @__PURE__ */ jsx(Motion.div, {
 		inert: !expand,
 		style: {
 			display: "flex",
@@ -156,7 +158,7 @@ const DraggablePanelContent = memo(({ children, className, style, ...rest }) =>
 			[axis.cross]: "100%",
 			[axis.extent]: extent
 		},
-		children: /* @__PURE__ */ jsx(motion.div, {
+		children: /* @__PURE__ */ jsx(Motion.div, {
 			animate: { scale: shrunk ? COLLAPSED_SCALE : 1 },
 			className: cx(styles.content, className),
 			transition: timing(),

package/es/base-ui/DraggablePanel/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["useControlledState","getHandleSize"],"sources":["../../../src/base-ui/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft } from 'lucide-react';\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\nimport { motion, useTransform } from 'motion/react';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport type { DivProps } from '@/types';\n\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\nimport type { Placement } from './core/axes';\nimport { AXES } from './core/axes';\nimport type { PanelControllerOptions } from './core/controller';\nimport { createPanelController } from './core/controller';\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\nimport { timing } from './core/transition';\nimport { BOW, handleVariants, rootVariants, styles, toggleVariants } from './style';\n\nconst PAN_THRESHOLD = 3;\n\nconst BOW_CX = 15;\nconst BOW_CY = BOW.half + 8;\nconst BOW_W = BOW_CX * 2;\nconst BOW_H = BOW_CY * 2;\n\nconst bowPath = (direction: 1 | -1, verticalSeam: boolean) => {\n  const k = BOW.half * BOW.curve;\n  const b = BOW_CX + BOW.bulge * direction;\n  const a0 = BOW_CY - BOW.half;\n  const a1 = BOW_CY + BOW.half;\n  // `a` runs along the seam, `b` across it; a horizontal seam swaps the two.\n  const pt = (along: number, across: number) =>\n    verticalSeam ? `${along} ${across}` : `${across} ${along}`;\n  return [\n    `M${pt(BOW_CX, a0)}`,\n    `C${pt(BOW_CX, a0 + k)} ${pt(b, BOW_CY - k)} ${pt(b, BOW_CY)}`,\n    `C${pt(b, BOW_CY + k)} ${pt(BOW_CX, a1 - k)} ${pt(BOW_CX, a1)}`,\n  ].join(' ');\n};\n\nconst BOW_PATHS = {\n  horizontalSeam: [bowPath(-1, false), bowPath(1, false)],\n  verticalSeam: [bowPath(-1, true), bowPath(1, true)],\n};\n\n/** The chevron points the way a click moves the panel. */\nconst CHEVRON_TURN = { bottom: 270, left: 0, right: 180, top: 90 } as const;\n\nconst chevronPath = (cx: number, cy: number) =>\n  `M${cx + 2.4} ${cy - 4.8} L${cx - 2.4} ${cy} L${cx + 2.4} ${cy + 4.8}`;\n\nconst ORIGIN_MAP = {\n  bottom: 'center bottom',\n  left: 'left center',\n  right: 'right center',\n  top: 'center top',\n} as const;\n\nconst COLLAPSED_SCALE = 0.97;\n\nconst EDGE_INSET = {\n  bottom: 'insetBlockEnd',\n  left: 'insetInlineStart',\n  right: 'insetInlineEnd',\n  top: 'insetBlockStart',\n} as const;\n\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\n  backgroundColor?: string;\n  collapseThreshold?: number;\n  defaultExpand?: boolean;\n  defaultSize?: number;\n  expand?: boolean;\n  expandable?: boolean;\n  max?: number;\n  min?: number;\n  mode?: 'fixed' | 'float';\n  onExpandChange?: (expand: boolean) => void;\n  onSizeChange?: (size: number, delta: number) => void;\n  onSizeDragging?: (size: number, delta: number) => void;\n  placement?: Placement;\n  showBorder?: boolean;\n  size?: number;\n}\n\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\n  ({\n    backgroundColor,\n    children,\n    className,\n    collapseThreshold,\n    defaultExpand = true,\n    defaultSize,\n    expand,\n    expandable = true,\n    max,\n    min = 0,\n    mode = 'fixed',\n    onExpandChange,\n    onSizeChange,\n    onSizeDragging,\n    placement = 'right',\n    showBorder = true,\n    size,\n    style,\n    ...rest\n  }) => {\n    const axis = AXES[placement];\n    const fallbackSize = axis.vertical ? 180 : 280;\n    const resolvedDefaultSize = defaultSize ?? fallbackSize;\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n    const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\n    const currentSize = size ?? innerSize;\n\n    const commitSize = useCallback(\n      (next: number, delta: number) => {\n        if (size === undefined) setInnerSize(next);\n        onSizeChange?.(next, delta);\n      },\n      [onSizeChange, size],\n    );\n\n    const options: PanelControllerOptions = {\n      collapseThreshold,\n      defaultSize: resolvedDefaultSize,\n      expand: isExpand,\n      max,\n      min,\n      onExpandChange: setIsExpand,\n      onSizeChange: commitSize,\n      onSizeDragging,\n      placement,\n      size: currentSize,\n    };\n\n    const [controller] = useState(() => createPanelController(options));\n    const state = useStore(controller.subscribe, () => controller.state);\n    const elementRef = useRef<HTMLElement>(null);\n\n    useIsomorphicLayoutEffect(() => {\n      controller.sync(options);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const node = elementRef.current;\n      return node ? controller.attach(node) : undefined;\n    }, [controller]);\n\n    const toggleExpand = useCallback(() => {\n      if (expandable) setIsExpand(!isExpand);\n    }, [expandable, isExpand, setIsExpand]);\n\n    const context = useMemo(\n      () => ({\n        axis,\n        controller,\n        expand: isExpand,\n        expandable,\n        placement,\n        showBorder,\n        state,\n        toggleExpand,\n      }),\n      [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\n    );\n\n    return (\n      <DraggablePanelContext value={context}>\n        <aside\n          className={cx(rootVariants({ mode, placement }), className)}\n          data-expand={isExpand}\n          data-expandable={expandable}\n          data-resizing={state.dragging}\n          ref={elementRef}\n          style={\n            {\n              '--draggable-panel-bg': backgroundColor || '',\n              'flexDirection': axis.vertical ? 'column' : 'row',\n              ...style,\n            } as CSSProperties\n          }\n          {...rest}\n        >\n          {children}\n        </aside>\n      </DraggablePanelContext>\n    );\n  },\n);\n\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\n\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\n\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\n  ({ children, className, style, ...rest }) => {\n    const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n    const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n    // Subscribed, not read: a collapse that changes only the target would otherwise\n    // leave the content unclipped and painted outside the zero-width box.\n    const target = useStore(controller.subscribe, () => controller.target);\n    const clipping = state.dragging || state.folding || target === 0;\n    const shrunk = state.collapsing || !expand;\n\n    return (\n      <motion.div\n        inert={!expand}\n        style={\n          {\n            display: 'flex',\n            flexDirection: axis.vertical ? 'column' : 'row',\n            flexShrink: 0,\n            justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\n            overflow: clipping ? 'clip' : 'visible',\n            [axis.cross]: '100%',\n            [axis.extent]: extent,\n          } as MotionStyle\n        }\n      >\n        <motion.div\n          animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\n          className={cx(styles.content, className)}\n          transition={timing()}\n          style={\n            {\n              transformOrigin: ORIGIN_MAP[placement],\n              [axis.cross]: '100%',\n              [axis.extent]: controller.motion.content,\n              ...style,\n            } as MotionStyle\n          }\n          {...(rest as HTMLMotionProps<'div'>)}\n        >\n          {children}\n        </motion.div>\n      </motion.div>\n    );\n  },\n);\n\nDraggablePanelContent.displayName = 'DraggablePanelContent';\n\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\n  wideArea?: boolean;\n}\n\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\n  ({ className, style, wideArea = true, ...rest }) => {\n    const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();\n    const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\n    const target = useStore(controller.subscribe, () => controller.target);\n    useEffect(() => () => controller.drag.cancel(), [controller]);\n\n    const pressedRef = useRef<{ x: number; y: number } | null>(null);\n    const draggingRef = useRef(false);\n    const draggedRef = useRef(false);\n    const { max, min } = controller.bounds();\n\n    if (!expand) return null;\n\n    return (\n      <div\n        aria-orientation={axis.ariaOrientation}\n        aria-valuemax={Number.isFinite(max) ? max : undefined}\n        aria-valuemin={min}\n        aria-valuenow={target}\n        aria-valuetext={`${target} pixels`}\n        className={cx(handleVariants({ edge: axis.edge }), className)}\n        data-border={showBorder}\n        data-resizing={state.dragging || undefined}\n        role=\"separator\"\n        tabIndex={0}\n        style={\n          {\n            '--draggable-panel-handle-size': `${size}px`,\n            [EDGE_INSET[axis.edge]]: -size / 2,\n            ...style,\n          } as CSSProperties\n        }\n        onKeyDown={(event) => controller.resizeByKey(event)}\n        onDoubleClick={() => {\n          if (!draggedRef.current) controller.reset();\n        }}\n        onLostPointerCapture={() => {\n          if (draggingRef.current) controller.drag.cancel();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerCancel={() => {\n          controller.drag.cancel();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerDown={(event) => {\n          draggedRef.current = false;\n          pressedRef.current = { x: event.clientX, y: event.clientY };\n          // A synthetic pointerdown carries no active pointer, and capturing throws.\n          try {\n            event.currentTarget.setPointerCapture(event.pointerId);\n          } catch {\n            /* empty */\n          }\n        }}\n        onPointerMove={(event) => {\n          if (!pressedRef.current) return;\n          const offset = {\n            x: event.clientX - pressedRef.current.x,\n            y: event.clientY - pressedRef.current.y,\n          };\n          if (!draggingRef.current) {\n            if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\n            draggingRef.current = true;\n            draggedRef.current = true;\n            controller.drag.start();\n          }\n          controller.drag.move(offset);\n        }}\n        onPointerUp={() => {\n          if (draggingRef.current) controller.drag.end();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\n\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\n  showHandleWhenCollapsed?: boolean;\n}\n\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\n  ({ className, showHandleWhenCollapsed, style, ...rest }) => {\n    const { axis, expand, expandable, placement, toggleExpand } = useDraggablePanelContext();\n\n    if (!expandable) return null;\n\n    const turn = CHEVRON_TURN[placement] + (expand ? 0 : 180);\n    const chevX = axis.vertical ? BOW_CY : BOW_CX;\n    const chevY = axis.vertical ? BOW_CX : BOW_CY;\n\n    return (\n      <div\n        className={cx(toggleVariants({ placement }), className)}\n        style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n        {...rest}\n      >\n        <button\n          aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n          type=\"button\"\n          onClick={toggleExpand}\n        >\n          <svg\n            fill=\"none\"\n            height={axis.vertical ? BOW_W : BOW_H}\n            viewBox={`0 0 ${axis.vertical ? BOW_H : BOW_W} ${axis.vertical ? BOW_W : BOW_H}`}\n            width={axis.vertical ? BOW_H : BOW_W}\n          >\n            {BOW_PATHS[axis.vertical ? 'horizontalSeam' : 'verticalSeam'].map((d) => (\n              <path d={d} data-bow=\"\" key={d} strokeLinecap=\"round\" strokeWidth={BOW.stroke} />\n            ))}\n            <g\n              style={{\n                rotate: `${turn}deg`,\n                transformOrigin: `${chevX}px ${chevY}px`,\n                transition: 'rotate 0.25s var(--ant-motion-ease-out, ease)',\n              }}\n            >\n              <path\n                d={chevronPath(chevX, chevY)}\n                stroke=\"currentColor\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.6}\n              />\n            </g>\n          </svg>\n        </button>\n      </div>\n    );\n  },\n);\n\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\n  ({ className, ...rest }) => <div className={cx(styles.container, className)} {...rest} />,\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n  <div className={cx(styles.body, className)} style={{ flex: 1, ...style }} {...rest} />\n));\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\n  <div className={cx(styles.footer, className)} {...rest} />\n));\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\n  extra?: ReactNode;\n  onCollapse?: () => void;\n  title?: ReactNode;\n}\n\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\n  ({ className, extra, onCollapse, title, ...rest }) => {\n    const { toggleExpand } = useDraggablePanelContext();\n\n    return (\n      <div className={cx(styles.header, className)} {...rest}>\n        <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\n        {title}\n        {extra}\n      </div>\n    );\n  },\n);\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["useControlledState","getHandleSize"],"sources":["../../../src/base-ui/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft } from 'lucide-react';\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\nimport { useTransform } from 'motion/react';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport { useMotionComponent } from '@/MotionProvider';\nimport type { DivProps } from '@/types';\n\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\nimport type { Placement } from './core/axes';\nimport { AXES } from './core/axes';\nimport type { PanelControllerOptions } from './core/controller';\nimport { createPanelController } from './core/controller';\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\nimport { timing } from './core/transition';\nimport { BOW, handleVariants, rootVariants, styles, toggleVariants } from './style';\n\nconst PAN_THRESHOLD = 3;\n\nconst BOW_CX = 15;\nconst BOW_CY = BOW.half + 8;\nconst BOW_W = BOW_CX * 2;\nconst BOW_H = BOW_CY * 2;\n\nconst bowPath = (direction: 1 | -1, verticalSeam: boolean) => {\n  const k = BOW.half * BOW.curve;\n  const b = BOW_CX + BOW.bulge * direction;\n  const a0 = BOW_CY - BOW.half;\n  const a1 = BOW_CY + BOW.half;\n  // `a` runs along the seam, `b` across it; a horizontal seam swaps the two.\n  const pt = (along: number, across: number) =>\n    verticalSeam ? `${along} ${across}` : `${across} ${along}`;\n  return [\n    `M${pt(BOW_CX, a0)}`,\n    `C${pt(BOW_CX, a0 + k)} ${pt(b, BOW_CY - k)} ${pt(b, BOW_CY)}`,\n    `C${pt(b, BOW_CY + k)} ${pt(BOW_CX, a1 - k)} ${pt(BOW_CX, a1)}`,\n  ].join(' ');\n};\n\nconst BOW_PATHS = {\n  horizontalSeam: [bowPath(-1, false), bowPath(1, false)],\n  verticalSeam: [bowPath(-1, true), bowPath(1, true)],\n};\n\n/** The chevron points the way a click moves the panel. */\nconst CHEVRON_TURN = { bottom: 270, left: 0, right: 180, top: 90 } as const;\n\nconst chevronPath = (cx: number, cy: number) =>\n  `M${cx + 2.4} ${cy - 4.8} L${cx - 2.4} ${cy} L${cx + 2.4} ${cy + 4.8}`;\n\nconst ORIGIN_MAP = {\n  bottom: 'center bottom',\n  left: 'left center',\n  right: 'right center',\n  top: 'center top',\n} as const;\n\nconst COLLAPSED_SCALE = 0.97;\n\nconst EDGE_INSET = {\n  bottom: 'insetBlockEnd',\n  left: 'insetInlineStart',\n  right: 'insetInlineEnd',\n  top: 'insetBlockStart',\n} as const;\n\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\n  backgroundColor?: string;\n  collapseThreshold?: number;\n  defaultExpand?: boolean;\n  defaultSize?: number;\n  expand?: boolean;\n  expandable?: boolean;\n  max?: number;\n  min?: number;\n  mode?: 'fixed' | 'float';\n  onExpandChange?: (expand: boolean) => void;\n  onSizeChange?: (size: number, delta: number) => void;\n  onSizeDragging?: (size: number, delta: number) => void;\n  placement?: Placement;\n  showBorder?: boolean;\n  size?: number;\n}\n\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\n  ({\n    backgroundColor,\n    children,\n    className,\n    collapseThreshold,\n    defaultExpand = true,\n    defaultSize,\n    expand,\n    expandable = true,\n    max,\n    min = 0,\n    mode = 'fixed',\n    onExpandChange,\n    onSizeChange,\n    onSizeDragging,\n    placement = 'right',\n    showBorder = true,\n    size,\n    style,\n    ...rest\n  }) => {\n    const axis = AXES[placement];\n    const fallbackSize = axis.vertical ? 180 : 280;\n    const resolvedDefaultSize = defaultSize ?? fallbackSize;\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n    const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\n    const currentSize = size ?? innerSize;\n\n    const commitSize = useCallback(\n      (next: number, delta: number) => {\n        if (size === undefined) setInnerSize(next);\n        onSizeChange?.(next, delta);\n      },\n      [onSizeChange, size],\n    );\n\n    const options: PanelControllerOptions = {\n      collapseThreshold,\n      defaultSize: resolvedDefaultSize,\n      expand: isExpand,\n      max,\n      min,\n      onExpandChange: setIsExpand,\n      onSizeChange: commitSize,\n      onSizeDragging,\n      placement,\n      size: currentSize,\n    };\n\n    const [controller] = useState(() => createPanelController(options));\n    const state = useStore(controller.subscribe, () => controller.state);\n    const elementRef = useRef<HTMLElement>(null);\n\n    useIsomorphicLayoutEffect(() => {\n      controller.sync(options);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const node = elementRef.current;\n      return node ? controller.attach(node) : undefined;\n    }, [controller]);\n\n    const toggleExpand = useCallback(() => {\n      if (expandable) setIsExpand(!isExpand);\n    }, [expandable, isExpand, setIsExpand]);\n\n    const context = useMemo(\n      () => ({\n        axis,\n        controller,\n        expand: isExpand,\n        expandable,\n        placement,\n        showBorder,\n        state,\n        toggleExpand,\n      }),\n      [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\n    );\n\n    return (\n      <DraggablePanelContext value={context}>\n        <aside\n          className={cx(rootVariants({ mode, placement }), className)}\n          data-expand={isExpand}\n          data-expandable={expandable}\n          data-resizing={state.dragging}\n          ref={elementRef}\n          style={\n            {\n              '--draggable-panel-bg': backgroundColor || '',\n              'flexDirection': axis.vertical ? 'column' : 'row',\n              ...style,\n            } as CSSProperties\n          }\n          {...rest}\n        >\n          {children}\n        </aside>\n      </DraggablePanelContext>\n    );\n  },\n);\n\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\n\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\n\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\n  ({ children, className, style, ...rest }) => {\n    const Motion = useMotionComponent();\n    const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n    const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n    // Subscribed, not read: a collapse that changes only the target would otherwise\n    // leave the content unclipped and painted outside the zero-width box.\n    const target = useStore(controller.subscribe, () => controller.target);\n    const clipping = state.dragging || state.folding || target === 0;\n    const shrunk = state.collapsing || !expand;\n\n    return (\n      <Motion.div\n        inert={!expand}\n        style={\n          {\n            display: 'flex',\n            flexDirection: axis.vertical ? 'column' : 'row',\n            flexShrink: 0,\n            justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\n            overflow: clipping ? 'clip' : 'visible',\n            [axis.cross]: '100%',\n            [axis.extent]: extent,\n          } as MotionStyle\n        }\n      >\n        <Motion.div\n          animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\n          className={cx(styles.content, className)}\n          transition={timing()}\n          style={\n            {\n              transformOrigin: ORIGIN_MAP[placement],\n              [axis.cross]: '100%',\n              [axis.extent]: controller.motion.content,\n              ...style,\n            } as MotionStyle\n          }\n          {...(rest as HTMLMotionProps<'div'>)}\n        >\n          {children}\n        </Motion.div>\n      </Motion.div>\n    );\n  },\n);\n\nDraggablePanelContent.displayName = 'DraggablePanelContent';\n\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\n  wideArea?: boolean;\n}\n\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\n  ({ className, style, wideArea = true, ...rest }) => {\n    const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();\n    const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\n    const target = useStore(controller.subscribe, () => controller.target);\n    useEffect(() => () => controller.drag.cancel(), [controller]);\n\n    const pressedRef = useRef<{ x: number; y: number } | null>(null);\n    const draggingRef = useRef(false);\n    const draggedRef = useRef(false);\n    const { max, min } = controller.bounds();\n\n    if (!expand) return null;\n\n    return (\n      <div\n        aria-orientation={axis.ariaOrientation}\n        aria-valuemax={Number.isFinite(max) ? max : undefined}\n        aria-valuemin={min}\n        aria-valuenow={target}\n        aria-valuetext={`${target} pixels`}\n        className={cx(handleVariants({ edge: axis.edge }), className)}\n        data-border={showBorder}\n        data-resizing={state.dragging || undefined}\n        role=\"separator\"\n        tabIndex={0}\n        style={\n          {\n            '--draggable-panel-handle-size': `${size}px`,\n            [EDGE_INSET[axis.edge]]: -size / 2,\n            ...style,\n          } as CSSProperties\n        }\n        onKeyDown={(event) => controller.resizeByKey(event)}\n        onDoubleClick={() => {\n          if (!draggedRef.current) controller.reset();\n        }}\n        onLostPointerCapture={() => {\n          if (draggingRef.current) controller.drag.cancel();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerCancel={() => {\n          controller.drag.cancel();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerDown={(event) => {\n          draggedRef.current = false;\n          pressedRef.current = { x: event.clientX, y: event.clientY };\n          // A synthetic pointerdown carries no active pointer, and capturing throws.\n          try {\n            event.currentTarget.setPointerCapture(event.pointerId);\n          } catch {\n            /* empty */\n          }\n        }}\n        onPointerMove={(event) => {\n          if (!pressedRef.current) return;\n          const offset = {\n            x: event.clientX - pressedRef.current.x,\n            y: event.clientY - pressedRef.current.y,\n          };\n          if (!draggingRef.current) {\n            if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\n            draggingRef.current = true;\n            draggedRef.current = true;\n            controller.drag.start();\n          }\n          controller.drag.move(offset);\n        }}\n        onPointerUp={() => {\n          if (draggingRef.current) controller.drag.end();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\n\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\n  showHandleWhenCollapsed?: boolean;\n}\n\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\n  ({ className, showHandleWhenCollapsed, style, ...rest }) => {\n    const { axis, expand, expandable, placement, toggleExpand } = useDraggablePanelContext();\n\n    if (!expandable) return null;\n\n    const turn = CHEVRON_TURN[placement] + (expand ? 0 : 180);\n    const chevX = axis.vertical ? BOW_CY : BOW_CX;\n    const chevY = axis.vertical ? BOW_CX : BOW_CY;\n\n    return (\n      <div\n        className={cx(toggleVariants({ placement }), className)}\n        style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n        {...rest}\n      >\n        <button\n          aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n          type=\"button\"\n          onClick={toggleExpand}\n        >\n          <svg\n            fill=\"none\"\n            height={axis.vertical ? BOW_W : BOW_H}\n            viewBox={`0 0 ${axis.vertical ? BOW_H : BOW_W} ${axis.vertical ? BOW_W : BOW_H}`}\n            width={axis.vertical ? BOW_H : BOW_W}\n          >\n            {BOW_PATHS[axis.vertical ? 'horizontalSeam' : 'verticalSeam'].map((d) => (\n              <path d={d} data-bow=\"\" key={d} strokeLinecap=\"round\" strokeWidth={BOW.stroke} />\n            ))}\n            <g\n              style={{\n                rotate: `${turn}deg`,\n                transformOrigin: `${chevX}px ${chevY}px`,\n                transition: 'rotate 0.25s var(--ant-motion-ease-out, ease)',\n              }}\n            >\n              <path\n                d={chevronPath(chevX, chevY)}\n                stroke=\"currentColor\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.6}\n              />\n            </g>\n          </svg>\n        </button>\n      </div>\n    );\n  },\n);\n\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\n  ({ className, ...rest }) => <div className={cx(styles.container, className)} {...rest} />,\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n  <div className={cx(styles.body, className)} style={{ flex: 1, ...style }} {...rest} />\n));\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\n  <div className={cx(styles.footer, className)} {...rest} />\n));\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\n  extra?: ReactNode;\n  onCollapse?: () => void;\n  title?: ReactNode;\n}\n\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\n  ({ className, extra, onCollapse, title, ...rest }) => {\n    const { toggleExpand } = useDraggablePanelContext();\n\n    return (\n      <div className={cx(styles.header, className)} {...rest}>\n        <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\n        {title}\n        {extra}\n      </div>\n    );\n  },\n);\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n"],"mappings":";;;;;;;;;;;;;;;;;AAgCA,MAAM,gBAAgB;AAEtB,MAAM,SAAS;AACf,MAAM,SAAS,IAAI,OAAO;AAC1B,MAAM,QAAQ;AACd,MAAM,QAAQ,SAAS;AAEvB,MAAM,WAAW,WAAmB,iBAA0B;CAC5D,MAAM,IAAI,IAAI,OAAO,IAAI;CACzB,MAAM,IAAI,SAAS,IAAI,QAAQ;CAC/B,MAAM,KAAK,SAAS,IAAI;CACxB,MAAM,KAAK,SAAS,IAAI;CAExB,MAAM,MAAM,OAAe,WACzB,eAAe,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG;CACrD,OAAO;EACL,IAAI,GAAG,QAAQ,EAAE;EACjB,IAAI,GAAG,QAAQ,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,MAAM;EAC3D,IAAI,GAAG,GAAG,SAAS,CAAC,EAAE,GAAG,GAAG,QAAQ,KAAK,CAAC,EAAE,GAAG,GAAG,QAAQ,EAAE;CAC9D,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,MAAM,YAAY;CAChB,gBAAgB,CAAC,QAAQ,IAAI,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC;CACtD,cAAc,CAAC,QAAQ,IAAI,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC;AACpD;;AAGA,MAAM,eAAe;CAAE,QAAQ;CAAK,MAAM;CAAG,OAAO;CAAK,KAAK;AAAG;AAEjE,MAAM,eAAe,IAAY,OAC/B,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,GAAG,IAAI,KAAK,IAAI,GAAG,KAAK;AAEnE,MAAM,aAAa;CACjB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAEA,MAAM,kBAAkB;AAExB,MAAM,aAAa;CACjB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAoBA,MAAa,qBAAqB,MAC/B,EACC,iBACA,UACA,WACA,mBACA,gBAAgB,MAChB,aACA,QACA,aAAa,MACb,KACA,MAAM,GACN,OAAO,SACP,gBACA,cACA,gBACA,YAAY,SACZ,aAAa,MACb,MACA,OACA,GAAG,WACC;CACJ,MAAM,OAAO,KAAK;CAClB,MAAM,eAAe,KAAK,WAAW,MAAM;CAC3C,MAAM,sBAAsB,eAAe;CAE3C,MAAM,CAAC,UAAU,eAAeA,cAAmB,eAAe;EAChE,UAAU;EACV,OAAO;CACT,CAAC;CACD,MAAM,CAAC,WAAW,gBAAgB,SAAS,mBAAmB;CAC9D,MAAM,cAAc,QAAQ;CAU5B,MAAM,UAAkC;EACtC;EACA,aAAa;EACb,QAAQ;EACR;EACA;EACA,gBAAgB;EAChB,cAfiB,aAChB,MAAc,UAAkB;GAC/B,IAAI,SAAS,KAAA,GAAW,aAAa,IAAI;GACzC,eAAe,MAAM,KAAK;EAC5B,GACA,CAAC,cAAc,IAAI,CAUI;EACvB;EACA;EACA,MAAM;CACR;CAEA,MAAM,CAAC,cAAc,eAAe,sBAAsB,OAAO,CAAC;CAClE,MAAM,QAAQ,SAAS,WAAW,iBAAiB,WAAW,KAAK;CACnE,MAAM,aAAa,OAAoB,IAAI;CAE3C,gCAAgC;EAC9B,WAAW,KAAK,OAAO;CACzB,CAAC;CAED,gCAAgC;EAC9B,MAAM,OAAO,WAAW;EACxB,OAAO,OAAO,WAAW,OAAO,IAAI,IAAI,KAAA;CAC1C,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,eAAe,kBAAkB;EACrC,IAAI,YAAY,YAAY,CAAC,QAAQ;CACvC,GAAG;EAAC;EAAY;EAAU;CAAW,CAAC;CAEtC,MAAM,UAAU,eACP;EACL;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAM;EAAY;EAAU;EAAY;EAAW;EAAY;EAAO;CAAY,CACrF;CAEA,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAAC,SAAD;GACE,WAAW,GAAG,aAAa;IAAE;IAAM;GAAU,CAAC,GAAG,SAAS;GAC1D,eAAa;GACb,mBAAiB;GACjB,iBAAe,MAAM;GACrB,KAAK;GACL,OACE;IACE,wBAAwB,mBAAmB;IAC3C,iBAAiB,KAAK,WAAW,WAAW;IAC5C,GAAG;GACL;GAEF,GAAI;GAEH;EACI,CAAA;CACc,CAAA;AAE3B,CACF;AAEA,mBAAmB,cAAc;AAIjC,MAAa,wBAAwB,MAClC,EAAE,UAAU,WAAW,OAAO,GAAG,WAAW;CAC3C,MAAM,SAAS,mBAAmB;CAClC,MAAM,EAAE,MAAM,YAAY,QAAQ,WAAW,UAAU,yBAAyB;CAChF,MAAM,SAAS,aAAa,WAAW,OAAO,OAAO,UAAU,KAAK,IAAI,GAAG,KAAK,CAAC;CAGjF,MAAM,SAAS,SAAS,WAAW,iBAAiB,WAAW,MAAM;CACrE,MAAM,WAAW,MAAM,YAAY,MAAM,WAAW,WAAW;CAC/D,MAAM,SAAS,MAAM,cAAc,CAAC;CAEpC,OACE,oBAAC,OAAO,KAAR;EACE,OAAO,CAAC;EACR,OACE;GACE,SAAS;GACT,eAAe,KAAK,WAAW,WAAW;GAC1C,YAAY;GACZ,gBAAgB,KAAK,YAAY,aAAa;GAC9C,UAAU,WAAW,SAAS;IAC7B,KAAK,QAAQ;IACb,KAAK,SAAS;EACjB;EAGF,UAAA,oBAAC,OAAO,KAAR;GACE,SAAS,EAAE,OAAO,SAAS,kBAAkB,EAAE;GAC/C,WAAW,GAAG,OAAO,SAAS,SAAS;GACvC,YAAY,OAAO;GACnB,OACE;IACE,iBAAiB,WAAW;KAC3B,KAAK,QAAQ;KACb,KAAK,SAAS,WAAW,OAAO;IACjC,GAAG;GACL;GAEF,GAAK;GAEJ;EACS,CAAA;CACF,CAAA;AAEhB,CACF;AAEA,sBAAsB,cAAc;AAMpC,MAAa,uBAAuB,MACjC,EAAE,WAAW,OAAO,WAAW,MAAM,GAAG,WAAW;CAClD,MAAM,EAAE,MAAM,YAAY,QAAQ,YAAY,UAAU,yBAAyB;CACjF,MAAM,OAAO,SAAS,cAAc,iBAAiBC,WAAc,QAAQ,CAAC;CAC5E,MAAM,SAAS,SAAS,WAAW,iBAAiB,WAAW,MAAM;CACrE,sBAAsB,WAAW,KAAK,OAAO,GAAG,CAAC,UAAU,CAAC;CAE5D,MAAM,aAAa,OAAwC,IAAI;CAC/D,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,aAAa,OAAO,KAAK;CAC/B,MAAM,EAAE,KAAK,QAAQ,WAAW,OAAO;CAEvC,IAAI,CAAC,QAAQ,OAAO;CAEpB,OACE,oBAAC,OAAD;EACE,oBAAkB,KAAK;EACvB,iBAAe,OAAO,SAAS,GAAG,IAAI,MAAM,KAAA;EAC5C,iBAAe;EACf,iBAAe;EACf,kBAAgB,GAAG,OAAO;EAC1B,WAAW,GAAG,eAAe,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,SAAS;EAC5D,eAAa;EACb,iBAAe,MAAM,YAAY,KAAA;EACjC,MAAK;EACL,UAAU;EACV,OACE;GACE,iCAAiC,GAAG,KAAK;IACxC,WAAW,KAAK,QAAQ,CAAC,OAAO;GACjC,GAAG;EACL;EAEF,YAAY,UAAU,WAAW,YAAY,KAAK;EAClD,qBAAqB;GACnB,IAAI,CAAC,WAAW,SAAS,WAAW,MAAM;EAC5C;EACA,4BAA4B;GAC1B,IAAI,YAAY,SAAS,WAAW,KAAK,OAAO;GAChD,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,uBAAuB;GACrB,WAAW,KAAK,OAAO;GACvB,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,gBAAgB,UAAU;GACxB,WAAW,UAAU;GACrB,WAAW,UAAU;IAAE,GAAG,MAAM;IAAS,GAAG,MAAM;GAAQ;GAE1D,IAAI;IACF,MAAM,cAAc,kBAAkB,MAAM,SAAS;GACvD,QAAQ,CAER;EACF;EACA,gBAAgB,UAAU;GACxB,IAAI,CAAC,WAAW,SAAS;GACzB,MAAM,SAAS;IACb,GAAG,MAAM,UAAU,WAAW,QAAQ;IACtC,GAAG,MAAM,UAAU,WAAW,QAAQ;GACxC;GACA,IAAI,CAAC,YAAY,SAAS;IACxB,IAAI,KAAK,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,eAAe;IACpD,YAAY,UAAU;IACtB,WAAW,UAAU;IACrB,WAAW,KAAK,MAAM;GACxB;GACA,WAAW,KAAK,KAAK,MAAM;EAC7B;EACA,mBAAmB;GACjB,IAAI,YAAY,SAAS,WAAW,KAAK,IAAI;GAC7C,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,qBAAqB,cAAc;AAMnC,MAAa,uBAAuB,MACjC,EAAE,WAAW,yBAAyB,OAAO,GAAG,WAAW;CAC1D,MAAM,EAAE,MAAM,QAAQ,YAAY,WAAW,iBAAiB,yBAAyB;CAEvF,IAAI,CAAC,YAAY,OAAO;CAExB,MAAM,OAAO,aAAa,cAAc,SAAS,IAAI;CACrD,MAAM,QAAQ,KAAK,WAAW,SAAS;CACvC,MAAM,QAAQ,KAAK,WAAW,SAAS;CAEvC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,eAAe,EAAE,UAAU,CAAC,GAAG,SAAS;EACtD,OAAO;GAAE,SAAS,SAAS,KAAA,IAAY,0BAA0B,IAAI;GAAG,GAAG;EAAM;EACjF,GAAI;EAEJ,UAAA,oBAAC,UAAD;GACE,cAAY,SAAS,mBAAmB;GACxC,MAAK;GACL,SAAS;GAET,UAAA,qBAAC,OAAD;IACE,MAAK;IACL,QAAQ,KAAK,WAAW,QAAQ;IAChC,SAAS,OAAO,KAAK,WAAW,QAAQ,MAAM,GAAG,KAAK,WAAW,QAAQ;IACzE,OAAO,KAAK,WAAW,QAAQ;IAJjC,UAAA,CAMG,UAAU,KAAK,WAAW,mBAAmB,eAAe,CAAC,KAAK,MACjE,oBAAC,QAAD;KAAS;KAAG,YAAS;KAAW,eAAc;KAAQ,aAAa,IAAI;IAAS,GAAnD,CAAmD,CACjF,GACD,oBAAC,KAAD;KACE,OAAO;MACL,QAAQ,GAAG,KAAK;MAChB,iBAAiB,GAAG,MAAM,KAAK,MAAM;MACrC,YAAY;KACd;KAEA,UAAA,oBAAC,QAAD;MACE,GAAG,YAAY,OAAO,KAAK;MAC3B,QAAO;MACP,eAAc;MACd,gBAAe;MACf,aAAa;KACd,CAAA;IACA,CAAA,CACA;;EACC,CAAA;CACL,CAAA;AAET,CACF;AAEA,qBAAqB,cAAc;AAInC,MAAa,0BAA0B,MACpC,EAAE,WAAW,GAAG,WAAW,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,WAAW,SAAS;CAAG,GAAI;AAAO,CAAA,CAC1F;AAEA,wBAAwB,cAAc;AAItC,MAAa,qBAAqB,MAA+B,EAAE,WAAW,OAAO,GAAG,WACtF,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,MAAM,SAAS;CAAG,OAAO;EAAE,MAAM;EAAG,GAAG;CAAM;CAAG,GAAI;AAAO,CAAA,CACtF;AAED,mBAAmB,cAAc;AAIjC,MAAa,uBAAuB,MAAiC,EAAE,WAAW,GAAG,WACnF,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;CAAG,GAAI;AAAO,CAAA,CAC1D;AAED,qBAAqB,cAAc;AAQnC,MAAa,uBAAuB,MACjC,EAAE,WAAW,OAAO,YAAY,OAAO,GAAG,WAAW;CACpD,MAAM,EAAE,iBAAiB,yBAAyB;CAElD,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;EAAG,GAAI;EAAlD,UAAA;GACE,oBAAC,YAAD;IAAY,MAAM;IAAa,MAAM;IAAS,SAAS,cAAc;GAAe,CAAA;GACnF;GACA;EACE;;AAET,CACF;AAEA,qBAAqB,cAAc"}

package/es/base-ui/Input/style.d.mts

@@ -24,7 +24,7 @@ declare const styles: {
 declare const rootVariants: (props?: ({
   shadow?: boolean | null | undefined;
   size?: "large" | "middle" | "small" | null | undefined;
-  variant?: "borderless" | "filled" | "outlined" | null | undefined;
+  variant?: "filled" | "borderless" | "outlined" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 export { rootVariants, styles };

package/es/base-ui/ScrollArea/atoms.d.mts

@@ -28,10 +28,7 @@ declare const ScrollAreaViewport: {
   ({ className, scrollFade, ...rest }: ScrollAreaViewportProps): React.JSX.Element;
   displayName: string;
 };
-declare const ScrollAreaContent: {
-  ({ className, ...rest }: ScrollAreaContentProps): React.JSX.Element;
-  displayName: string;
-};
+declare const ScrollAreaContent: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ScrollAreaScrollbar: {
   ({ className, ...rest }: ScrollAreaScrollbarProps): React.JSX.Element;
   displayName: string;

package/es/base-ui/ScrollArea/atoms.mjs

@@ -30,13 +30,7 @@ const ScrollAreaViewport = ({ className, scrollFade = false, ...rest }) => {
 	})] });
 };
 ScrollAreaViewport.displayName = "ScrollAreaViewport";
-const ScrollAreaContent = ({ className, ...rest }) => {
-	return /* @__PURE__ */ jsx(ScrollArea.Content, {
-		...rest,
-		className: mergeStateClassName(styles.content, className)
-	});
-};
-ScrollAreaContent.displayName = "ScrollAreaContent";
+const ScrollAreaContent = ScrollArea.Content;
 const ScrollAreaScrollbar = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
 		...rest,

package/es/base-ui/ScrollArea/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["BaseScrollArea"],"sources":["../../../src/base-ui/ScrollArea/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { cx } from 'antd-style';\nimport type React from 'react';\n\nimport ScrollAreaGlobalStyle from './globalStyle';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n  return cx(base, className);\n};\n\nexport type ScrollAreaRootProps = React.ComponentProps<typeof BaseScrollArea.Root>;\n\nexport type ScrollAreaFadeOrientation = 'vertical' | 'horizontal' | 'both';\n\nexport type ScrollAreaViewportProps = React.ComponentProps<typeof BaseScrollArea.Viewport> & {\n  /**\n   * Enable gradient scroll fade on the viewport edges.\n   *\n   * - `true` / `'vertical'`: fade top and bottom edges.\n   * - `'horizontal'`: fade start and end edges.\n   * - `'both'`: fade all four edges (combined via `mask-composite: intersect`).\n   * - `false`: no fade.\n   *\n   * @default false\n   */\n  scrollFade?: boolean | ScrollAreaFadeOrientation;\n};\nexport type ScrollAreaContentProps = React.ComponentProps<typeof BaseScrollArea.Content>;\nexport type ScrollAreaScrollbarProps = React.ComponentProps<typeof BaseScrollArea.Scrollbar>;\nexport type ScrollAreaThumbProps = React.ComponentProps<typeof BaseScrollArea.Thumb>;\nexport type ScrollAreaCornerProps = React.ComponentProps<typeof BaseScrollArea.Corner>;\n\nexport const ScrollAreaRoot = ({ className, ...rest }: ScrollAreaRootProps) => {\n  return (\n    <BaseScrollArea.Root {...rest} className={mergeStateClassName(styles.root, className) as any} />\n  );\n};\n\nScrollAreaRoot.displayName = 'ScrollAreaRoot';\n\nconst resolveFadeClass = (\n  scrollFade: ScrollAreaViewportProps['scrollFade'],\n): string | undefined => {\n  if (!scrollFade) return undefined;\n  const orientation: ScrollAreaFadeOrientation = scrollFade === true ? 'vertical' : scrollFade;\n  if (orientation === 'horizontal') return styles.viewportFadeHorizontal;\n  if (orientation === 'both') return styles.viewportFadeBoth;\n  return styles.viewportFade;\n};\n\nexport const ScrollAreaViewport = ({\n  className,\n  scrollFade = false,\n  ...rest\n}: ScrollAreaViewportProps) => {\n  return (\n    <>\n      <ScrollAreaGlobalStyle />\n      <BaseScrollArea.Viewport\n        {...rest}\n        className={\n          mergeStateClassName(cx(styles.viewport, resolveFadeClass(scrollFade)), className) as any\n        }\n      />\n    </>\n  );\n};\n\nScrollAreaViewport.displayName = 'ScrollAreaViewport';\n\nexport const ScrollAreaContent = ({ className, ...rest }: ScrollAreaContentProps) => {\n  return (\n    <BaseScrollArea.Content\n      {...rest}\n      className={mergeStateClassName(styles.content, className) as any}\n    />\n  );\n};\n\nScrollAreaContent.displayName = 'ScrollAreaContent';\n\nexport const ScrollAreaScrollbar = ({ className, ...rest }: ScrollAreaScrollbarProps) => {\n  return (\n    <BaseScrollArea.Scrollbar\n      {...rest}\n      className={mergeStateClassName(styles.scrollbar, className) as any}\n    />\n  );\n};\n\nScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';\n\nexport const ScrollAreaThumb = ({ className, ...rest }: ScrollAreaThumbProps) => {\n  return (\n    <BaseScrollArea.Thumb\n      {...rest}\n      className={mergeStateClassName(styles.thumb, className) as any}\n    />\n  );\n};\n\nScrollAreaThumb.displayName = 'ScrollAreaThumb';\n\nexport const ScrollAreaCorner = ({ className, ...rest }: ScrollAreaCornerProps) => {\n  return (\n    <BaseScrollArea.Corner\n      {...rest}\n      className={mergeStateClassName(styles.corner, className) as any}\n    />\n  );\n};\n\nScrollAreaCorner.displayName = 'ScrollAreaCorner';\n"],"mappings":";;;;;;;AASA,MAAM,uBACJ,MACA,cACG;CACH,IAAI,OAAO,cAAc,YAAY,QAAQ,UAAkB,GAAG,MAAM,UAAU,KAAK,CAAC;CACxF,OAAO,GAAG,MAAM,SAAS;AAC3B;AAwBA,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAAgC;CAC7E,OACE,oBAACA,WAAe,MAAhB;EAAqB,GAAI;EAAM,WAAW,oBAAoB,OAAO,MAAM,SAAS;CAAW,CAAA;AAEnG;AAEA,eAAe,cAAc;AAE7B,MAAM,oBACJ,eACuB;CACvB,IAAI,CAAC,YAAY,OAAO,KAAA;CACxB,MAAM,cAAyC,eAAe,OAAO,aAAa;CAClF,IAAI,gBAAgB,cAAc,OAAO,OAAO;CAChD,IAAI,gBAAgB,QAAQ,OAAO,OAAO;CAC1C,OAAO,OAAO;AAChB;AAEA,MAAa,sBAAsB,EACjC,WACA,aAAa,OACb,GAAG,WAC0B;CAC7B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,uBAAD,CAAwB,CAAA,GACxB,oBAACA,WAAe,UAAhB;EACE,GAAI;EACJ,WACE,oBAAoB,GAAG,OAAO,UAAU,iBAAiB,UAAU,CAAC,GAAG,SAAS;CAEnF,CAAA,CACD,EAAA,CAAA;AAEN;AAEA,mBAAmB,cAAc;AAEjC,MAAa,qBAAqB,EAAE,WAAW,GAAG,WAAmC;CACnF,OACE,oBAACA,WAAe,SAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,SAAS,SAAS;CACzD,CAAA;AAEL;AAEA,kBAAkB,cAAc;AAEhC,MAAa,uBAAuB,EAAE,WAAW,GAAG,WAAqC;CACvF,OACE,oBAACA,WAAe,WAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,WAAW,SAAS;CAC3D,CAAA;AAEL;AAEA,oBAAoB,cAAc;AAElC,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAAiC;CAC/E,OACE,oBAACA,WAAe,OAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,OAAO,SAAS;CACvD,CAAA;AAEL;AAEA,gBAAgB,cAAc;AAE9B,MAAa,oBAAoB,EAAE,WAAW,GAAG,WAAkC;CACjF,OACE,oBAACA,WAAe,QAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,QAAQ,SAAS;CACxD,CAAA;AAEL;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"atoms.mjs","names":["BaseScrollArea"],"sources":["../../../src/base-ui/ScrollArea/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { cx } from 'antd-style';\nimport type React from 'react';\n\nimport ScrollAreaGlobalStyle from './globalStyle';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n  return cx(base, className);\n};\n\nexport type ScrollAreaRootProps = React.ComponentProps<typeof BaseScrollArea.Root>;\n\nexport type ScrollAreaFadeOrientation = 'vertical' | 'horizontal' | 'both';\n\nexport type ScrollAreaViewportProps = React.ComponentProps<typeof BaseScrollArea.Viewport> & {\n  /**\n   * Enable gradient scroll fade on the viewport edges.\n   *\n   * - `true` / `'vertical'`: fade top and bottom edges.\n   * - `'horizontal'`: fade start and end edges.\n   * - `'both'`: fade all four edges (combined via `mask-composite: intersect`).\n   * - `false`: no fade.\n   *\n   * @default false\n   */\n  scrollFade?: boolean | ScrollAreaFadeOrientation;\n};\nexport type ScrollAreaContentProps = React.ComponentProps<typeof BaseScrollArea.Content>;\nexport type ScrollAreaScrollbarProps = React.ComponentProps<typeof BaseScrollArea.Scrollbar>;\nexport type ScrollAreaThumbProps = React.ComponentProps<typeof BaseScrollArea.Thumb>;\nexport type ScrollAreaCornerProps = React.ComponentProps<typeof BaseScrollArea.Corner>;\n\nexport const ScrollAreaRoot = ({ className, ...rest }: ScrollAreaRootProps) => {\n  return (\n    <BaseScrollArea.Root {...rest} className={mergeStateClassName(styles.root, className) as any} />\n  );\n};\n\nScrollAreaRoot.displayName = 'ScrollAreaRoot';\n\nconst resolveFadeClass = (\n  scrollFade: ScrollAreaViewportProps['scrollFade'],\n): string | undefined => {\n  if (!scrollFade) return undefined;\n  const orientation: ScrollAreaFadeOrientation = scrollFade === true ? 'vertical' : scrollFade;\n  if (orientation === 'horizontal') return styles.viewportFadeHorizontal;\n  if (orientation === 'both') return styles.viewportFadeBoth;\n  return styles.viewportFade;\n};\n\nexport const ScrollAreaViewport = ({\n  className,\n  scrollFade = false,\n  ...rest\n}: ScrollAreaViewportProps) => {\n  return (\n    <>\n      <ScrollAreaGlobalStyle />\n      <BaseScrollArea.Viewport\n        {...rest}\n        className={\n          mergeStateClassName(cx(styles.viewport, resolveFadeClass(scrollFade)), className) as any\n        }\n      />\n    </>\n  );\n};\n\nScrollAreaViewport.displayName = 'ScrollAreaViewport';\n\nexport const ScrollAreaContent = BaseScrollArea.Content;\n\nexport const ScrollAreaScrollbar = ({ className, ...rest }: ScrollAreaScrollbarProps) => {\n  return (\n    <BaseScrollArea.Scrollbar\n      {...rest}\n      className={mergeStateClassName(styles.scrollbar, className) as any}\n    />\n  );\n};\n\nScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';\n\nexport const ScrollAreaThumb = ({ className, ...rest }: ScrollAreaThumbProps) => {\n  return (\n    <BaseScrollArea.Thumb\n      {...rest}\n      className={mergeStateClassName(styles.thumb, className) as any}\n    />\n  );\n};\n\nScrollAreaThumb.displayName = 'ScrollAreaThumb';\n\nexport const ScrollAreaCorner = ({ className, ...rest }: ScrollAreaCornerProps) => {\n  return (\n    <BaseScrollArea.Corner\n      {...rest}\n      className={mergeStateClassName(styles.corner, className) as any}\n    />\n  );\n};\n\nScrollAreaCorner.displayName = 'ScrollAreaCorner';\n"],"mappings":";;;;;;;AASA,MAAM,uBACJ,MACA,cACG;CACH,IAAI,OAAO,cAAc,YAAY,QAAQ,UAAkB,GAAG,MAAM,UAAU,KAAK,CAAC;CACxF,OAAO,GAAG,MAAM,SAAS;AAC3B;AAwBA,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAAgC;CAC7E,OACE,oBAACA,WAAe,MAAhB;EAAqB,GAAI;EAAM,WAAW,oBAAoB,OAAO,MAAM,SAAS;CAAW,CAAA;AAEnG;AAEA,eAAe,cAAc;AAE7B,MAAM,oBACJ,eACuB;CACvB,IAAI,CAAC,YAAY,OAAO,KAAA;CACxB,MAAM,cAAyC,eAAe,OAAO,aAAa;CAClF,IAAI,gBAAgB,cAAc,OAAO,OAAO;CAChD,IAAI,gBAAgB,QAAQ,OAAO,OAAO;CAC1C,OAAO,OAAO;AAChB;AAEA,MAAa,sBAAsB,EACjC,WACA,aAAa,OACb,GAAG,WAC0B;CAC7B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,uBAAD,CAAwB,CAAA,GACxB,oBAACA,WAAe,UAAhB;EACE,GAAI;EACJ,WACE,oBAAoB,GAAG,OAAO,UAAU,iBAAiB,UAAU,CAAC,GAAG,SAAS;CAEnF,CAAA,CACD,EAAA,CAAA;AAEN;AAEA,mBAAmB,cAAc;AAEjC,MAAa,oBAAoBA,WAAe;AAEhD,MAAa,uBAAuB,EAAE,WAAW,GAAG,WAAqC;CACvF,OACE,oBAACA,WAAe,WAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,WAAW,SAAS;CAC3D,CAAA;AAEL;AAEA,oBAAoB,cAAc;AAElC,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAAiC;CAC/E,OACE,oBAACA,WAAe,OAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,OAAO,SAAS;CACvD,CAAA;AAEL;AAEA,gBAAgB,cAAc;AAE9B,MAAa,oBAAoB,EAAE,WAAW,GAAG,WAAkC;CACjF,OACE,oBAACA,WAAe,QAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,QAAQ,SAAS;CACxD,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

package/es/base-ui/ScrollArea/style.mjs

@@ -2,15 +2,6 @@ import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 //#region src/base-ui/ScrollArea/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
-	content: css`
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-
-    font-size: ${cssVar.fontSizeSM};
-    line-height: 1.375rem;
-    color: ${cssVar.colorText};
-  `,
 	corner: css`
     background: ${cssVar.colorFillSecondary};
   `,

package/es/base-ui/ScrollArea/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.375rem;\n    color: ${cssVar.colorText};\n  `,\n\n  corner: css`\n    background: ${cssVar.colorFillSecondary};\n  `,\n\n  root: css`\n    position: relative;\n    box-sizing: border-box;\n  `,\n\n  scrollbar: css`\n    pointer-events: none;\n\n    margin: 3px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    opacity: 0;\n    background: transparent;\n\n    transition:\n      opacity 150ms,\n      width 150ms,\n      height 150ms;\n\n    &::before {\n      content: '';\n      position: absolute;\n    }\n\n    &[data-scrolling] {\n      transition-duration: 0ms, 150ms, 150ms;\n    }\n\n    &[data-hovering],\n    &[data-scrolling] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n\n    &[data-orientation='vertical'] {\n      width: 3px;\n\n      &::before {\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n        width: 16px;\n        height: 100%;\n      }\n\n      &:hover {\n        width: 6px;\n      }\n    }\n\n    &[data-orientation='horizontal'] {\n      height: 3px;\n\n      &::before {\n        inset-block-start: 50%;\n        transform: translateY(-50%);\n        width: 100%;\n        height: 16px;\n      }\n\n      &:hover {\n        height: 6px;\n      }\n    }\n  `,\n\n  thumb: css`\n    width: 100%;\n    height: 100%;\n    border-radius: inherit;\n    background: ${cssVar.colorTextQuaternary};\n  `,\n\n  viewport: css`\n    position: relative;\n    overscroll-behavior: auto;\n    height: 100%;\n    outline: none;\n\n    ${focusRing};\n  `,\n\n  viewportFade: css`\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to bottom,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-top),\n      #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching top/bottom doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-top-in {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-top-in, lobe-scroll-area-fade-bottom-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self y), scroll(self y);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeHorizontal: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to right,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-left),\n      #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching start/end doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-left-in {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-left-in, lobe-scroll-area-fade-right-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeBoth: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    mask-composite: intersect;\n\n    /*\n     * Combine vertical + horizontal fades by intersecting two gradient masks\n     * so the four corners stay transparent only when both axes overflow.\n     */\n    mask-image:\n      linear-gradient(\n        to bottom,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-top),\n        #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n        transparent 100%\n      ),\n      linear-gradient(\n        to right,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-left),\n        #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n        transparent 100%\n      );\n    mask-repeat: no-repeat, no-repeat;\n    mask-size:\n      100% 100%,\n      100% 100%;\n\n    @supports (animation-timeline: scroll()) {\n      @keyframes lobe-scroll-area-fade-top-in-both {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out-both {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-left-in-both {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out-both {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name:\n        lobe-scroll-area-fade-top-in-both, lobe-scroll-area-fade-bottom-out-both,\n        lobe-scroll-area-fade-left-in-both, lobe-scroll-area-fade-right-out-both;\n      animation-duration: 1ms, 1ms, 1ms, 1ms;\n      animation-timing-function: linear, linear, linear, linear;\n      animation-fill-mode: both, both, both, both;\n      animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%,\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;iBAKG,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAG5B,QAAQ,GAAG;kBACK,OAAO,mBAAmB;;CAG1C,MAAM,GAAG;;;;CAKT,WAAW,GAAG;;;;qBAIK,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzC,OAAO,GAAG;;;;kBAIM,OAAO,oBAAoB;;CAG3C,UAAU,GAAG;;;;;;MAMT,UAAU;;CAGd,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGvB,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  corner: css`\n    background: ${cssVar.colorFillSecondary};\n  `,\n\n  root: css`\n    position: relative;\n    box-sizing: border-box;\n  `,\n\n  scrollbar: css`\n    pointer-events: none;\n\n    margin: 3px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    opacity: 0;\n    background: transparent;\n\n    transition:\n      opacity 150ms,\n      width 150ms,\n      height 150ms;\n\n    &::before {\n      content: '';\n      position: absolute;\n    }\n\n    &[data-scrolling] {\n      transition-duration: 0ms, 150ms, 150ms;\n    }\n\n    &[data-hovering],\n    &[data-scrolling] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n\n    &[data-orientation='vertical'] {\n      width: 3px;\n\n      &::before {\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n        width: 16px;\n        height: 100%;\n      }\n\n      &:hover {\n        width: 6px;\n      }\n    }\n\n    &[data-orientation='horizontal'] {\n      height: 3px;\n\n      &::before {\n        inset-block-start: 50%;\n        transform: translateY(-50%);\n        width: 100%;\n        height: 16px;\n      }\n\n      &:hover {\n        height: 6px;\n      }\n    }\n  `,\n\n  thumb: css`\n    width: 100%;\n    height: 100%;\n    border-radius: inherit;\n    background: ${cssVar.colorTextQuaternary};\n  `,\n\n  viewport: css`\n    position: relative;\n    overscroll-behavior: auto;\n    height: 100%;\n    outline: none;\n\n    ${focusRing};\n  `,\n\n  viewportFade: css`\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to bottom,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-top),\n      #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching top/bottom doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-top-in {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-top-in, lobe-scroll-area-fade-bottom-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self y), scroll(self y);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeHorizontal: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to right,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-left),\n      #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching start/end doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-left-in {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-left-in, lobe-scroll-area-fade-right-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeBoth: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    mask-composite: intersect;\n\n    /*\n     * Combine vertical + horizontal fades by intersecting two gradient masks\n     * so the four corners stay transparent only when both axes overflow.\n     */\n    mask-image:\n      linear-gradient(\n        to bottom,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-top),\n        #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n        transparent 100%\n      ),\n      linear-gradient(\n        to right,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-left),\n        #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n        transparent 100%\n      );\n    mask-repeat: no-repeat, no-repeat;\n    mask-size:\n      100% 100%,\n      100% 100%;\n\n    @supports (animation-timeline: scroll()) {\n      @keyframes lobe-scroll-area-fade-top-in-both {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out-both {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-left-in-both {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out-both {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name:\n        lobe-scroll-area-fade-top-in-both, lobe-scroll-area-fade-bottom-out-both,\n        lobe-scroll-area-fade-left-in-both, lobe-scroll-area-fade-right-out-both;\n      animation-duration: 1ms, 1ms, 1ms, 1ms;\n      animation-timing-function: linear, linear, linear, linear;\n      animation-fill-mode: both, both, both, both;\n      animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%,\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;kBACK,OAAO,mBAAmB;;CAG1C,MAAM,GAAG;;;;CAKT,WAAW,GAAG;;;;qBAIK,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzC,OAAO,GAAG;;;;kBAIM,OAAO,oBAAoB;;CAG3C,UAAU,GAAG;;;;;;MAMT,UAAU;;CAGd,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGvB,EAAE"}

package/es/base-ui/Text/style.d.mts

@@ -42,7 +42,7 @@ declare const variants: (props?: ({
   mark?: boolean | null | undefined;
   shiny?: boolean | null | undefined;
   strong?: boolean | null | undefined;
-  type?: "danger" | "warning" | "success" | "info" | "secondary" | null | undefined;
+  type?: "danger" | "success" | "info" | "warning" | "secondary" | null | undefined;
   underline?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.42.6",
+  "version": "5.42.8",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",