@lobehub/ui 5.20.2 → 5.21.0

package/es/Icon/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Icon/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst spin = keyframes`\n  0% {\n    rotate: 0deg;\n  }\n  100% {\n    rotate: 360deg;\n  }\n`;\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    spin: css`\n      animation: ${spin} 1s linear infinite;\n    `,\n  };\n});\n\nexport const variants = cva('anticon', {\n  defaultVariants: {\n    spin: false,\n  },\n\n  variants: {\n    spin: {\n      false: null,\n      true: styles.spin,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAM,OAAO,SAAS;;;;;;;;AAiBtB,MAAa,WAAW,IAAI,WAAW;CACrC,iBAAiB,EACf,MAAM,OACP;CAED,UAAU,EACR,MAAM;EACJ,OAAO;EACP,MAhBgB,oBAAoB,EAAE,UAAU;AACpD,UAAO,EACL,MAAM,GAAG;mBACM,KAAK;OAErB;IAWS,CAAO;EACd,EACF;CACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Icon/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst spin = keyframes`\n  0% {\n    rotate: 0deg;\n  }\n  100% {\n    rotate: 360deg;\n  }\n`;\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    spin: css`\n      animation: ${spin} 1s linear infinite;\n    `,\n  };\n});\n\nexport const variants = cva('anticon', {\n  defaultVariants: {\n    spin: false,\n  },\n\n  variants: {\n    spin: {\n      false: null,\n      true: styles.spin,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAM,OAAO,SAAS;;;;;;;;AAStB,MAAa,SAAS,oBAAoB,EAAE,UAAU;CACpD,OAAO,EACL,MAAM,GAAG;mBACM,KAAK;MAEtB;AACF,CAAC;AAED,MAAa,WAAW,IAAI,WAAW;CACrC,iBAAiB,EACf,MAAM,MACR;CAEA,UAAU,EACR,MAAM;EACJ,OAAO;EACP,MAAM,OAAO;CACf,EACF;AACF,CAAC"}

package/es/Icon/type.d.mts

@@ -1,7 +1,6 @@
 import { SpanProps } from "../types/index.mjs";
 import { FC, ReactNode, Ref } from "react";
 import { LucideIcon, LucideProps } from "lucide-react";
-
 //#region src/Icon/type.d.ts
 interface IconSizeConfig extends Pick<LucideProps, 'strokeWidth' | 'absoluteStrokeWidth'> {
   size?: number | string;

package/es/Image/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","names":["Image","Flexbox","AntImage"],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport { Image as AntImage, Skeleton } from 'antd';\nimport { cssVar, cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport usePreview from './components/usePreview';\nimport { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants } from './style';\nimport type { ImageProps } from './type';\n\nconst Image = memo<ImageProps>(\n  ({\n    ref,\n    style,\n    preview,\n    isLoading,\n    maxHeight = '100%',\n    maxWidth = '100%',\n    minHeight,\n    minWidth,\n    actions,\n    className,\n    alwaysShowActions,\n    variant = 'filled',\n    objectFit = 'cover',\n    classNames,\n    styles: customStyles,\n    onClick,\n    width,\n    height,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const actionsClassName = alwaysShowActions ? styles.actionsVisible : styles.actionsHidden;\n    const mergePreview = usePreview(preview);\n\n    if (isLoading)\n      return (\n        <div onClick={onClick}>\n          <Skeleton.Avatar\n            active\n            style={{\n              borderRadius: cssVar.borderRadius,\n              height,\n              maxHeight,\n              maxWidth,\n              minHeight,\n              minWidth,\n              width,\n            }}\n          />\n        </div>\n      );\n\n    return (\n      <Flexbox className={cx(variants({ variant }), className)} ref={ref} style={style}>\n        {actions && (\n          <div className={cx(actionsClassName, alwaysShowActions ? '' : 'actions-hidden')}>\n            {actions}\n          </div>\n        )}\n        <AntImage\n          className={cx(styles.image, classNames?.image)}\n          fallback={isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT}\n          height={height}\n          loading={'lazy'}\n          preview={preview === false ? false : (mergePreview as any)}\n          width={width}\n          classNames={{\n            root: cx(styles.wrapper, classNames?.wrapper),\n          }}\n          style={{\n            maxHeight,\n            maxWidth,\n            minHeight,\n            minWidth,\n            objectFit: objectFit || 'cover',\n            ...customStyles?.image,\n          }}\n          styles={{\n            root: customStyles?.wrapper,\n          }}\n          onClick={onClick}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":";;;;;;;;;AAYA,MAAMA,UAAQ,MACX,EACC,KACA,OACA,SACA,WACA,YAAY,QACZ,WAAW,QACX,WACA,UACA,SACA,WACA,mBACA,UAAU,UACV,YAAY,SACZ,YACA,QAAQ,cACR,SACA,OACA,QACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,cAAc;CACrC,MAAM,mBAAmB,oBAAoB,OAAO,iBAAiB,OAAO;CAC5E,MAAM,eAAe,WAAW,QAAQ;AAExC,KAAI,UACF,QACE,oBAAC,OAAD;EAAc;YACZ,oBAAC,SAAS,QAAV;GACE,QAAA;GACA,OAAO;IACL,cAAc,OAAO;IACrB;IACA;IACA;IACA;IACA;IACA;IACD;GACD,CAAA;EACE,CAAA;AAGV,QACE,qBAACC,mBAAD;EAAS,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;EAAO;EAAY;YAA3E,CACG,WACC,oBAAC,OAAD;GAAK,WAAW,GAAG,kBAAkB,oBAAoB,KAAK,iBAAiB;aAC5E;GACG,CAAA,EAER,oBAACC,OAAD;GACE,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;GAC9C,UAAU,aAAa,gBAAgB;GAC/B;GACR,SAAS;GACT,SAAS,YAAY,QAAQ,QAAS;GAC/B;GACP,YAAY,EACV,MAAM,GAAG,OAAO,SAAS,YAAY,QAAQ,EAC9C;GACD,OAAO;IACL;IACA;IACA;IACA;IACA,WAAW,aAAa;IACxB,GAAG,cAAc;IAClB;GACD,QAAQ,EACN,MAAM,cAAc,SACrB;GACQ;GACT,GAAI;GACJ,CAAA,CACM;;EAGf;AAED,QAAM,cAAc"}
+{"version":3,"file":"Image.mjs","names":["Image","Flexbox","AntImage"],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport { Image as AntImage, Skeleton } from 'antd';\nimport { cssVar, cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport usePreview from './components/usePreview';\nimport { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants } from './style';\nimport type { ImageProps } from './type';\n\nconst Image = memo<ImageProps>(\n  ({\n    ref,\n    style,\n    preview,\n    isLoading,\n    maxHeight = '100%',\n    maxWidth = '100%',\n    minHeight,\n    minWidth,\n    actions,\n    className,\n    alwaysShowActions,\n    variant = 'filled',\n    objectFit = 'cover',\n    classNames,\n    styles: customStyles,\n    onClick,\n    width,\n    height,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const actionsClassName = alwaysShowActions ? styles.actionsVisible : styles.actionsHidden;\n    const mergePreview = usePreview(preview);\n\n    if (isLoading)\n      return (\n        <div onClick={onClick}>\n          <Skeleton.Avatar\n            active\n            style={{\n              borderRadius: cssVar.borderRadius,\n              height,\n              maxHeight,\n              maxWidth,\n              minHeight,\n              minWidth,\n              width,\n            }}\n          />\n        </div>\n      );\n\n    return (\n      <Flexbox className={cx(variants({ variant }), className)} ref={ref} style={style}>\n        {actions && (\n          <div className={cx(actionsClassName, alwaysShowActions ? '' : 'actions-hidden')}>\n            {actions}\n          </div>\n        )}\n        <AntImage\n          className={cx(styles.image, classNames?.image)}\n          fallback={isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT}\n          height={height}\n          loading={'lazy'}\n          preview={preview === false ? false : (mergePreview as any)}\n          width={width}\n          classNames={{\n            root: cx(styles.wrapper, classNames?.wrapper),\n          }}\n          style={{\n            maxHeight,\n            maxWidth,\n            minHeight,\n            minWidth,\n            objectFit: objectFit || 'cover',\n            ...customStyles?.image,\n          }}\n          styles={{\n            root: customStyles?.wrapper,\n          }}\n          onClick={onClick}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":";;;;;;;;;AAYA,MAAMA,UAAQ,MACX,EACC,KACA,OACA,SACA,WACA,YAAY,QACZ,WAAW,QACX,WACA,UACA,SACA,WACA,mBACA,UAAU,UACV,YAAY,SACZ,YACA,QAAQ,cACR,SACA,OACA,QACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,mBAAmB,oBAAoB,OAAO,iBAAiB,OAAO;CAC5E,MAAM,eAAe,WAAW,OAAO;CAEvC,IAAI,WACF,OACE,oBAAC,OAAD;EAAc;YACZ,oBAAC,SAAS,QAAV;GACE,QAAA;GACA,OAAO;IACL,cAAc,OAAO;IACrB;IACA;IACA;IACA;IACA;IACA;GACF;EACD,CAAA;CACE,CAAA;CAGT,OACE,qBAACC,mBAAD;EAAS,WAAW,GAAG,SAAS,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAQ;EAAY;YAA3E,CACG,WACC,oBAAC,OAAD;GAAK,WAAW,GAAG,kBAAkB,oBAAoB,KAAK,gBAAgB;aAC3E;EACE,CAAA,GAEP,oBAACC,OAAD;GACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;GAC7C,UAAU,aAAa,gBAAgB;GAC/B;GACR,SAAS;GACT,SAAS,YAAY,QAAQ,QAAS;GAC/B;GACP,YAAY,EACV,MAAM,GAAG,OAAO,SAAS,YAAY,OAAO,EAC9C;GACA,OAAO;IACL;IACA;IACA;IACA;IACA,WAAW,aAAa;IACxB,GAAG,cAAc;GACnB;GACA,QAAQ,EACN,MAAM,cAAc,QACtB;GACS;GACT,GAAI;EACL,CAAA,CACM;;AAEb,CACF;AAEA,QAAM,cAAc"}

package/es/Image/PreviewGroup.d.mts

@@ -1,8 +1,6 @@
 import { PreviewGroupProps } from "./type.mjs";
-import * as _$react from "react";
-
 //#region src/Image/PreviewGroup.d.ts
-declare const PreviewGroup: _$react.NamedExoticComponent<PreviewGroupProps>;
+declare const PreviewGroup: import("react").NamedExoticComponent<PreviewGroupProps>;
 //#endregion
-export { PreviewGroup };
+export { PreviewGroup as default };
 //# sourceMappingURL=PreviewGroup.d.mts.map

package/es/Image/PreviewGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewGroup.mjs","names":["usePreviewGroup"],"sources":["../../src/Image/PreviewGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Image } from 'antd';\nimport { memo } from 'react';\n\nimport usePreviewGroup from './components/usePreviewGroup';\nimport type { PreviewGroupProps } from './type';\n\nconst { PreviewGroup: AntdPreviewGroup } = Image;\n\nconst PreviewGroup = memo<PreviewGroupProps>(({ items, children, enable = true, preview }) => {\n  const mergePreview = usePreviewGroup(preview);\n\n  if (!enable) return children;\n\n  return (\n    <AntdPreviewGroup items={items} preview={mergePreview}>\n      {children}\n    </AntdPreviewGroup>\n  );\n});\n\nPreviewGroup.displayName = 'PreviewGroup';\n\nexport default PreviewGroup;\n"],"mappings":";;;;;;AAQA,MAAM,EAAE,cAAc,qBAAqB;AAE3C,MAAM,eAAe,MAAyB,EAAE,OAAO,UAAU,SAAS,MAAM,cAAc;CAC5F,MAAM,eAAeA,WAAgB,QAAQ;AAE7C,KAAI,CAAC,OAAQ,QAAO;AAEpB,QACE,oBAAC,kBAAD;EAAyB;EAAO,SAAS;EACtC;EACgB,CAAA;EAErB;AAEF,aAAa,cAAc"}
+{"version":3,"file":"PreviewGroup.mjs","names":["usePreviewGroup"],"sources":["../../src/Image/PreviewGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Image } from 'antd';\nimport { memo } from 'react';\n\nimport usePreviewGroup from './components/usePreviewGroup';\nimport type { PreviewGroupProps } from './type';\n\nconst { PreviewGroup: AntdPreviewGroup } = Image;\n\nconst PreviewGroup = memo<PreviewGroupProps>(({ items, children, enable = true, preview }) => {\n  const mergePreview = usePreviewGroup(preview);\n\n  if (!enable) return children;\n\n  return (\n    <AntdPreviewGroup items={items} preview={mergePreview}>\n      {children}\n    </AntdPreviewGroup>\n  );\n});\n\nPreviewGroup.displayName = 'PreviewGroup';\n\nexport default PreviewGroup;\n"],"mappings":";;;;;;AAQA,MAAM,EAAE,cAAc,qBAAqB;AAE3C,MAAM,eAAe,MAAyB,EAAE,OAAO,UAAU,SAAS,MAAM,cAAc;CAC5F,MAAM,eAAeA,WAAgB,OAAO;CAE5C,IAAI,CAAC,QAAQ,OAAO;CAEpB,OACE,oBAAC,kBAAD;EAAyB;EAAO,SAAS;EACtC;CACe,CAAA;AAEtB,CAAC;AAED,aAAa,cAAc"}

package/es/Image/components/Preview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Preview.mjs","names":[],"sources":["../../../src/Image/components/Preview.tsx"],"sourcesContent":["'use client';\n\nimport { memo, type PropsWithChildren, useEffect, useRef } from 'react';\n\ninterface PreviewProps extends PropsWithChildren {\n  visible?: boolean;\n}\n\nconst Preview = memo<PreviewProps>(({ children, visible }) => {\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const handleDisableZoom = (event: any) => {\n      event.preventDefault();\n    };\n\n    if (visible) {\n      ref.current.addEventListener('wheel', handleDisableZoom, { passive: false });\n    } else {\n      ref.current.removeEventListener('wheel', handleDisableZoom);\n    }\n  }, [visible]);\n\n  return <div ref={ref}>{children}</div>;\n});\n\nexport default Preview;\n"],"mappings":";;;;AAQA,MAAM,UAAU,MAAoB,EAAE,UAAU,cAAc;CAC5D,MAAM,MAAM,OAAuB,KAAK;AACxC,iBAAgB;AACd,MAAI,CAAC,IAAI,QAAS;EAElB,MAAM,qBAAqB,UAAe;AACxC,SAAM,gBAAgB;;AAGxB,MAAI,QACF,KAAI,QAAQ,iBAAiB,SAAS,mBAAmB,EAAE,SAAS,OAAO,CAAC;MAE5E,KAAI,QAAQ,oBAAoB,SAAS,kBAAkB;IAE5D,CAAC,QAAQ,CAAC;AAEb,QAAO,oBAAC,OAAD;EAAU;EAAM;EAAe,CAAA;EACtC"}
+{"version":3,"file":"Preview.mjs","names":[],"sources":["../../../src/Image/components/Preview.tsx"],"sourcesContent":["'use client';\n\nimport { memo, type PropsWithChildren, useEffect, useRef } from 'react';\n\ninterface PreviewProps extends PropsWithChildren {\n  visible?: boolean;\n}\n\nconst Preview = memo<PreviewProps>(({ children, visible }) => {\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const handleDisableZoom = (event: any) => {\n      event.preventDefault();\n    };\n\n    if (visible) {\n      ref.current.addEventListener('wheel', handleDisableZoom, { passive: false });\n    } else {\n      ref.current.removeEventListener('wheel', handleDisableZoom);\n    }\n  }, [visible]);\n\n  return <div ref={ref}>{children}</div>;\n});\n\nexport default Preview;\n"],"mappings":";;;;AAQA,MAAM,UAAU,MAAoB,EAAE,UAAU,cAAc;CAC5D,MAAM,MAAM,OAAuB,IAAI;CACvC,gBAAgB;EACd,IAAI,CAAC,IAAI,SAAS;EAElB,MAAM,qBAAqB,UAAe;GACxC,MAAM,eAAe;EACvB;EAEA,IAAI,SACF,IAAI,QAAQ,iBAAiB,SAAS,mBAAmB,EAAE,SAAS,MAAM,CAAC;OAE3E,IAAI,QAAQ,oBAAoB,SAAS,iBAAiB;CAE9D,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO,oBAAC,OAAD;EAAU;EAAM;CAAc,CAAA;AACvC,CAAC"}

package/es/Image/components/Toolbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.mjs","names":["imageMessages","Flexbox"],"sources":["../../../src/Image/components/Toolbar.tsx"],"sourcesContent":["import { message } from 'antd';\nimport {\n  Copy,\n  Download,\n  FlipHorizontal,\n  FlipVertical,\n  RotateCcw,\n  RotateCw,\n  ZoomIn,\n  ZoomOut,\n} from 'lucide-react';\nimport { type ToolbarRenderInfoType } from 'rc-image/lib/Preview';\nimport { memo, type ReactNode, useCallback, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport imageMessages from '@/i18n/resources/en/image';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { TooltipGroup } from '@/Tooltip';\nimport { getClipboardBlob } from '@/utils/blobToPng';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { styles } from '../style';\n\nconst getFileNameFromUrl = (url: string): string => {\n  try {\n    const pathname = new URL(url).pathname;\n    const match = pathname.match(/\\/([^/]+)$/);\n    return match ? decodeURIComponent(match[1]) : 'image';\n  } catch {\n    return 'image';\n  }\n};\n\nconst getExtensionFromMimeType = (mimeType: string): string => {\n  const map: Record<string, string> = {\n    'image/svg+xml': 'svg',\n    'image/png': 'png',\n    'image/jpeg': 'jpg',\n    'image/jpg': 'jpg',\n    'image/webp': 'webp',\n    'image/gif': 'gif',\n  };\n  return map[mimeType?.toLowerCase()] || mimeType?.split('/')[1]?.split('+')[0] || 'png';\n};\n\nexport interface ToolbarProps {\n  children?: ReactNode;\n  info: Omit<ToolbarRenderInfoType, 'current' | 'total'>;\n  maxScale: number;\n  minScale: number;\n}\n\nconst Toolbar = memo<ToolbarProps>(({ children, info, minScale, maxScale }) => {\n  const { t } = useTranslation(imageMessages);\n  const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);\n  const [copyLoading, setCopyLoading] = useState(false);\n  const [downloadLoading, setDownloadLoading] = useState(false);\n  const {\n    transform: { scale },\n    actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },\n    image: { url },\n  } = info;\n\n  const handleDownload = useCallback(async () => {\n    setDownloadLoading(true);\n    try {\n      const response = await fetch(url, { mode: 'cors' });\n      const blob = await response.blob();\n      const blobUrl = URL.createObjectURL(blob);\n      let fileName = getFileNameFromUrl(url);\n      const ext = getExtensionFromMimeType(blob.type);\n      if (!fileName.includes('.')) {\n        fileName = `${fileName}.${ext}`;\n      } else if (fileName.endsWith('.svg+xml')) {\n        fileName = fileName.replace(/\\.svg\\+xml$/i, '.svg');\n      }\n      await downloadBlob(blobUrl, fileName);\n      URL.revokeObjectURL(blobUrl);\n      message.success(t('image.downloadSuccess'));\n    } catch {\n      message.error(t('image.downloadFailed'));\n    } finally {\n      setDownloadLoading(false);\n    }\n  }, [url, t]);\n\n  const handleCopy = useCallback(async () => {\n    setCopyLoading(true);\n    try {\n      const response = await fetch(url, { mode: 'cors' });\n      const blob = await response.blob();\n      const clipboardBlob = await getClipboardBlob(blob);\n      await navigator.clipboard.write([new ClipboardItem(clipboardBlob)]);\n      message.success(t('image.copySuccess'));\n    } catch {\n      message.error(t('image.copyFailed'));\n    } finally {\n      setCopyLoading(false);\n    }\n  }, [url, t]);\n\n  return (\n    <TooltipGroup popupContainer={containerEl ?? undefined}>\n      <Flexbox horizontal className={styles.toolbar} gap={4} ref={setContainerEl}>\n        <ActionIcon icon={FlipHorizontal} title={t('image.flipHorizontal')} onClick={onFlipX} />\n        <ActionIcon icon={FlipVertical} title={t('image.flipVertical')} onClick={onFlipY} />\n        <ActionIcon icon={RotateCcw} title={t('image.rotateLeft')} onClick={onRotateLeft} />\n        <ActionIcon icon={RotateCw} title={t('image.rotateRight')} onClick={onRotateRight} />\n        <ActionIcon\n          disabled={scale === minScale}\n          icon={ZoomOut}\n          title={t('image.zoomOut')}\n          onClick={onZoomOut}\n        />\n        <ActionIcon\n          disabled={scale === maxScale}\n          icon={ZoomIn}\n          title={t('image.zoomIn')}\n          onClick={onZoomIn}\n        />\n        <ActionIcon\n          icon={Copy}\n          loading={copyLoading}\n          title={t('image.copy')}\n          onClick={handleCopy}\n        />\n        <ActionIcon\n          icon={Download}\n          loading={downloadLoading}\n          title={t('image.download')}\n          onClick={handleDownload}\n        />\n        {children}\n      </Flexbox>\n    </TooltipGroup>\n  );\n});\n\nexport default Toolbar;\n"],"mappings":"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"}
+{"version":3,"file":"Toolbar.mjs","names":["imageMessages","Flexbox"],"sources":["../../../src/Image/components/Toolbar.tsx"],"sourcesContent":["import { message } from 'antd';\nimport {\n  Copy,\n  Download,\n  FlipHorizontal,\n  FlipVertical,\n  RotateCcw,\n  RotateCw,\n  ZoomIn,\n  ZoomOut,\n} from 'lucide-react';\nimport { type ToolbarRenderInfoType } from 'rc-image/lib/Preview';\nimport { memo, type ReactNode, useCallback, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport imageMessages from '@/i18n/resources/en/image';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { TooltipGroup } from '@/Tooltip';\nimport { getClipboardBlob } from '@/utils/blobToPng';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { styles } from '../style';\n\nconst getFileNameFromUrl = (url: string): string => {\n  try {\n    const pathname = new URL(url).pathname;\n    const match = pathname.match(/\\/([^/]+)$/);\n    return match ? decodeURIComponent(match[1]) : 'image';\n  } catch {\n    return 'image';\n  }\n};\n\nconst getExtensionFromMimeType = (mimeType: string): string => {\n  const map: Record<string, string> = {\n    'image/svg+xml': 'svg',\n    'image/png': 'png',\n    'image/jpeg': 'jpg',\n    'image/jpg': 'jpg',\n    'image/webp': 'webp',\n    'image/gif': 'gif',\n  };\n  return map[mimeType?.toLowerCase()] || mimeType?.split('/')[1]?.split('+')[0] || 'png';\n};\n\nexport interface ToolbarProps {\n  children?: ReactNode;\n  info: Omit<ToolbarRenderInfoType, 'current' | 'total'>;\n  maxScale: number;\n  minScale: number;\n}\n\nconst Toolbar = memo<ToolbarProps>(({ children, info, minScale, maxScale }) => {\n  const { t } = useTranslation(imageMessages);\n  const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);\n  const [copyLoading, setCopyLoading] = useState(false);\n  const [downloadLoading, setDownloadLoading] = useState(false);\n  const {\n    transform: { scale },\n    actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },\n    image: { url },\n  } = info;\n\n  const handleDownload = useCallback(async () => {\n    setDownloadLoading(true);\n    try {\n      const response = await fetch(url, { mode: 'cors' });\n      const blob = await response.blob();\n      const blobUrl = URL.createObjectURL(blob);\n      let fileName = getFileNameFromUrl(url);\n      const ext = getExtensionFromMimeType(blob.type);\n      if (!fileName.includes('.')) {\n        fileName = `${fileName}.${ext}`;\n      } else if (fileName.endsWith('.svg+xml')) {\n        fileName = fileName.replace(/\\.svg\\+xml$/i, '.svg');\n      }\n      await downloadBlob(blobUrl, fileName);\n      URL.revokeObjectURL(blobUrl);\n      message.success(t('image.downloadSuccess'));\n    } catch {\n      message.error(t('image.downloadFailed'));\n    } finally {\n      setDownloadLoading(false);\n    }\n  }, [url, t]);\n\n  const handleCopy = useCallback(async () => {\n    setCopyLoading(true);\n    try {\n      const response = await fetch(url, { mode: 'cors' });\n      const blob = await response.blob();\n      const clipboardBlob = await getClipboardBlob(blob);\n      await navigator.clipboard.write([new ClipboardItem(clipboardBlob)]);\n      message.success(t('image.copySuccess'));\n    } catch {\n      message.error(t('image.copyFailed'));\n    } finally {\n      setCopyLoading(false);\n    }\n  }, [url, t]);\n\n  return (\n    <TooltipGroup popupContainer={containerEl ?? undefined}>\n      <Flexbox horizontal className={styles.toolbar} gap={4} ref={setContainerEl}>\n        <ActionIcon icon={FlipHorizontal} title={t('image.flipHorizontal')} onClick={onFlipX} />\n        <ActionIcon icon={FlipVertical} title={t('image.flipVertical')} onClick={onFlipY} />\n        <ActionIcon icon={RotateCcw} title={t('image.rotateLeft')} onClick={onRotateLeft} />\n        <ActionIcon icon={RotateCw} title={t('image.rotateRight')} onClick={onRotateRight} />\n        <ActionIcon\n          disabled={scale === minScale}\n          icon={ZoomOut}\n          title={t('image.zoomOut')}\n          onClick={onZoomOut}\n        />\n        <ActionIcon\n          disabled={scale === maxScale}\n          icon={ZoomIn}\n          title={t('image.zoomIn')}\n          onClick={onZoomIn}\n        />\n        <ActionIcon\n          icon={Copy}\n          loading={copyLoading}\n          title={t('image.copy')}\n          onClick={handleCopy}\n        />\n        <ActionIcon\n          icon={Download}\n          loading={downloadLoading}\n          title={t('image.download')}\n          onClick={handleDownload}\n        />\n        {children}\n      </Flexbox>\n    </TooltipGroup>\n  );\n});\n\nexport default Toolbar;\n"],"mappings":"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"}

package/es/Image/components/usePreview.mjs

@@ -53,6 +53,6 @@ const usePreview = (props) => {
 	]);
 };
 //#endregion
-export { usePreview as default };
+export { usePreview as default, usePreview };
 
 //# sourceMappingURL=usePreview.mjs.map

package/es/Image/components/usePreview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePreview.mjs","names":[],"sources":["../../../src/Image/components/usePreview.tsx"],"sourcesContent":["import type { ImageProps as AntdImageProps } from 'antd';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { useMemo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { styles } from '../style';\nimport type { ImagePreviewOptions } from '../type';\nimport Preview from './Preview';\nimport Toolbar from './Toolbar';\n\nexport const usePreview = (\n  props: ImagePreviewOptions | boolean | undefined,\n): AntdImageProps['preview'] => {\n  const [visible, setVisible] = useState(false);\n\n  return useMemo(() => {\n    if (props === false) return props;\n\n    const {\n      onVisibleChange,\n      onOpenChange,\n      minScale = 0.32,\n      maxScale = 32,\n      toolbarAddon,\n      rootClassName,\n      imageRender,\n      toolbarRender,\n      actionsRender,\n      ...rest\n    }: ImagePreviewOptions = (props === true ? {} : props || {}) as ImagePreviewOptions;\n\n    return {\n      actionsRender:\n        actionsRender ||\n        ((_, info) => {\n          const originalNode = (\n            <Toolbar info={info} maxScale={maxScale} minScale={minScale}>\n              {toolbarAddon}\n            </Toolbar>\n          );\n          // 向后兼容 toolbarRender\n          if (toolbarRender) return toolbarRender(originalNode, info);\n          return originalNode;\n        }),\n      closeIcon: <Icon color={'#fff'} icon={X} />,\n      imageRender: (originalNode, info) => {\n        const node = <Preview visible={visible}>{originalNode}</Preview>;\n        if (imageRender) return imageRender(node, info);\n        return node;\n      },\n      maxScale,\n      minScale,\n      onOpenChange: (open: boolean) => {\n        setVisible(open);\n        // 支持新的 onOpenChange\n        onOpenChange?.(open);\n        // 向后兼容旧的 onVisibleChange\n        onVisibleChange?.(open, !open);\n      },\n      rootClassName: cx(styles.preview, rootClassName),\n      styles: { mask: { backdropFilter: 'blur(8px)' } },\n      ...rest,\n    };\n  }, [props, visible, styles]);\n};\n\nexport default usePreview;\n"],"mappings":";;;;;;;;;AAYA,MAAa,cACX,UAC8B;CAC9B,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAE7C,QAAO,cAAc;AACnB,MAAI,UAAU,MAAO,QAAO;EAE5B,MAAM,EACJ,iBACA,cACA,WAAW,KACX,WAAW,IACX,cACA,eACA,aACA,eACA,eACA,GAAG,SACqB,UAAU,OAAO,EAAE,GAAG,SAAS,EAAE;AAE3D,SAAO;GACL,eACE,mBACE,GAAG,SAAS;IACZ,MAAM,eACJ,oBAAC,SAAD;KAAe;KAAgB;KAAoB;eAChD;KACO,CAAA;AAGZ,QAAI,cAAe,QAAO,cAAc,cAAc,KAAK;AAC3D,WAAO;;GAEX,WAAW,oBAAC,MAAD;IAAM,OAAO;IAAQ,MAAM;IAAK,CAAA;GAC3C,cAAc,cAAc,SAAS;IACnC,MAAM,OAAO,oBAAC,SAAD;KAAkB;eAAU;KAAuB,CAAA;AAChE,QAAI,YAAa,QAAO,YAAY,MAAM,KAAK;AAC/C,WAAO;;GAET;GACA;GACA,eAAe,SAAkB;AAC/B,eAAW,KAAK;AAEhB,mBAAe,KAAK;AAEpB,sBAAkB,MAAM,CAAC,KAAK;;GAEhC,eAAe,GAAG,OAAO,SAAS,cAAc;GAChD,QAAQ,EAAE,MAAM,EAAE,gBAAgB,aAAa,EAAE;GACjD,GAAG;GACJ;IACA;EAAC;EAAO;EAAS;EAAO,CAAC"}
+{"version":3,"file":"usePreview.mjs","names":[],"sources":["../../../src/Image/components/usePreview.tsx"],"sourcesContent":["import type { ImageProps as AntdImageProps } from 'antd';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { useMemo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { styles } from '../style';\nimport type { ImagePreviewOptions } from '../type';\nimport Preview from './Preview';\nimport Toolbar from './Toolbar';\n\nexport const usePreview = (\n  props: ImagePreviewOptions | boolean | undefined,\n): AntdImageProps['preview'] => {\n  const [visible, setVisible] = useState(false);\n\n  return useMemo(() => {\n    if (props === false) return props;\n\n    const {\n      onVisibleChange,\n      onOpenChange,\n      minScale = 0.32,\n      maxScale = 32,\n      toolbarAddon,\n      rootClassName,\n      imageRender,\n      toolbarRender,\n      actionsRender,\n      ...rest\n    }: ImagePreviewOptions = (props === true ? {} : props || {}) as ImagePreviewOptions;\n\n    return {\n      actionsRender:\n        actionsRender ||\n        ((_, info) => {\n          const originalNode = (\n            <Toolbar info={info} maxScale={maxScale} minScale={minScale}>\n              {toolbarAddon}\n            </Toolbar>\n          );\n          // 向后兼容 toolbarRender\n          if (toolbarRender) return toolbarRender(originalNode, info);\n          return originalNode;\n        }),\n      closeIcon: <Icon color={'#fff'} icon={X} />,\n      imageRender: (originalNode, info) => {\n        const node = <Preview visible={visible}>{originalNode}</Preview>;\n        if (imageRender) return imageRender(node, info);\n        return node;\n      },\n      maxScale,\n      minScale,\n      onOpenChange: (open: boolean) => {\n        setVisible(open);\n        // 支持新的 onOpenChange\n        onOpenChange?.(open);\n        // 向后兼容旧的 onVisibleChange\n        onVisibleChange?.(open, !open);\n      },\n      rootClassName: cx(styles.preview, rootClassName),\n      styles: { mask: { backdropFilter: 'blur(8px)' } },\n      ...rest,\n    };\n  }, [props, visible, styles]);\n};\n\nexport default usePreview;\n"],"mappings":";;;;;;;;;AAYA,MAAa,cACX,UAC8B;CAC9B,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,OAAO,cAAc;EACnB,IAAI,UAAU,OAAO,OAAO;EAE5B,MAAM,EACJ,iBACA,cACA,WAAW,KACX,WAAW,IACX,cACA,eACA,aACA,eACA,eACA,GAAG,SACqB,UAAU,OAAO,CAAC,IAAI,SAAS,CAAC;EAE1D,OAAO;GACL,eACE,mBACE,GAAG,SAAS;IACZ,MAAM,eACJ,oBAAC,SAAD;KAAe;KAAgB;KAAoB;eAChD;IACM,CAAA;IAGX,IAAI,eAAe,OAAO,cAAc,cAAc,IAAI;IAC1D,OAAO;GACT;GACF,WAAW,oBAAC,MAAD;IAAM,OAAO;IAAQ,MAAM;GAAI,CAAA;GAC1C,cAAc,cAAc,SAAS;IACnC,MAAM,OAAO,oBAAC,SAAD;KAAkB;eAAU;IAAsB,CAAA;IAC/D,IAAI,aAAa,OAAO,YAAY,MAAM,IAAI;IAC9C,OAAO;GACT;GACA;GACA;GACA,eAAe,SAAkB;IAC/B,WAAW,IAAI;IAEf,eAAe,IAAI;IAEnB,kBAAkB,MAAM,CAAC,IAAI;GAC/B;GACA,eAAe,GAAG,OAAO,SAAS,aAAa;GAC/C,QAAQ,EAAE,MAAM,EAAE,gBAAgB,YAAY,EAAE;GAChD,GAAG;EACL;CACF,GAAG;EAAC;EAAO;EAAS;CAAM,CAAC;AAC7B"}

package/es/Image/components/usePreviewGroup.mjs

@@ -52,6 +52,6 @@ const usePreview = (props) => {
 	]);
 };
 //#endregion
-export { usePreview as default };
+export { usePreview as default, usePreview };
 
 //# sourceMappingURL=usePreviewGroup.mjs.map

package/es/Image/components/usePreviewGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePreviewGroup.mjs","names":["componentStyles"],"sources":["../../../src/Image/components/usePreviewGroup.tsx"],"sourcesContent":["import { type GroupPreviewConfig } from 'antd/es/image/PreviewGroup';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { useMemo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { styles as componentStyles, styles } from '../style';\nimport { type PreviewGroupPreviewOptions } from '../type';\nimport Preview from './Preview';\nimport Toolbar from './Toolbar';\n\nexport const usePreview = (\n  props: PreviewGroupPreviewOptions | boolean | undefined,\n): GroupPreviewConfig | boolean => {\n  const [visible, setVisible] = useState(false);\n\n  return useMemo(() => {\n    if (props === false) return props;\n\n    const {\n      onVisibleChange,\n      onOpenChange,\n      minScale = 0.32,\n      maxScale = 32,\n      toolbarAddon,\n      rootClassName,\n      imageRender,\n      toolbarRender,\n      ...rest\n    }: PreviewGroupPreviewOptions = (\n      props === true ? {} : props || {}\n    ) as PreviewGroupPreviewOptions;\n\n    return {\n      actionsRender: (_, info) => {\n        const originalNode = (\n          <Toolbar info={info} maxScale={maxScale} minScale={minScale}>\n            {toolbarAddon}\n          </Toolbar>\n        );\n        if (toolbarRender) return toolbarRender(originalNode, info);\n        return originalNode;\n      },\n      closeIcon: <Icon color={'#fff'} icon={X} />,\n\n      imageRender: (originalNode, info) => {\n        const node = <Preview visible={visible}>{originalNode}</Preview>;\n        if (imageRender) return imageRender(node, info);\n        return node;\n      },\n      maxScale,\n      minScale,\n      onOpenChange: (open: boolean, info: { current: number }) => {\n        setVisible(open);\n        // 支持新的 onOpenChange\n        onOpenChange?.(open, info);\n        // 向后兼容旧的 onVisibleChange (注意参数差异)\n        onVisibleChange?.(open, !open, info.current);\n      },\n      rootClassName: cx(styles.preview, rootClassName),\n      ...rest,\n    } satisfies GroupPreviewConfig;\n  }, [props, visible, componentStyles]);\n};\n\nexport default usePreview;\n"],"mappings":";;;;;;;;;AAYA,MAAa,cACX,UACiC;CACjC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAE7C,QAAO,cAAc;AACnB,MAAI,UAAU,MAAO,QAAO;EAE5B,MAAM,EACJ,iBACA,cACA,WAAW,KACX,WAAW,IACX,cACA,eACA,aACA,eACA,GAAG,SAEH,UAAU,OAAO,EAAE,GAAG,SAAS,EAAE;AAGnC,SAAO;GACL,gBAAgB,GAAG,SAAS;IAC1B,MAAM,eACJ,oBAAC,SAAD;KAAe;KAAgB;KAAoB;eAChD;KACO,CAAA;AAEZ,QAAI,cAAe,QAAO,cAAc,cAAc,KAAK;AAC3D,WAAO;;GAET,WAAW,oBAAC,MAAD;IAAM,OAAO;IAAQ,MAAM;IAAK,CAAA;GAE3C,cAAc,cAAc,SAAS;IACnC,MAAM,OAAO,oBAAC,SAAD;KAAkB;eAAU;KAAuB,CAAA;AAChE,QAAI,YAAa,QAAO,YAAY,MAAM,KAAK;AAC/C,WAAO;;GAET;GACA;GACA,eAAe,MAAe,SAA8B;AAC1D,eAAW,KAAK;AAEhB,mBAAe,MAAM,KAAK;AAE1B,sBAAkB,MAAM,CAAC,MAAM,KAAK,QAAQ;;GAE9C,eAAe,GAAG,OAAO,SAAS,cAAc;GAChD,GAAG;GACJ;IACA;EAAC;EAAO;EAASA;EAAgB,CAAC"}
+{"version":3,"file":"usePreviewGroup.mjs","names":["componentStyles"],"sources":["../../../src/Image/components/usePreviewGroup.tsx"],"sourcesContent":["import { type GroupPreviewConfig } from 'antd/es/image/PreviewGroup';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { useMemo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { styles as componentStyles, styles } from '../style';\nimport { type PreviewGroupPreviewOptions } from '../type';\nimport Preview from './Preview';\nimport Toolbar from './Toolbar';\n\nexport const usePreview = (\n  props: PreviewGroupPreviewOptions | boolean | undefined,\n): GroupPreviewConfig | boolean => {\n  const [visible, setVisible] = useState(false);\n\n  return useMemo(() => {\n    if (props === false) return props;\n\n    const {\n      onVisibleChange,\n      onOpenChange,\n      minScale = 0.32,\n      maxScale = 32,\n      toolbarAddon,\n      rootClassName,\n      imageRender,\n      toolbarRender,\n      ...rest\n    }: PreviewGroupPreviewOptions = (\n      props === true ? {} : props || {}\n    ) as PreviewGroupPreviewOptions;\n\n    return {\n      actionsRender: (_, info) => {\n        const originalNode = (\n          <Toolbar info={info} maxScale={maxScale} minScale={minScale}>\n            {toolbarAddon}\n          </Toolbar>\n        );\n        if (toolbarRender) return toolbarRender(originalNode, info);\n        return originalNode;\n      },\n      closeIcon: <Icon color={'#fff'} icon={X} />,\n\n      imageRender: (originalNode, info) => {\n        const node = <Preview visible={visible}>{originalNode}</Preview>;\n        if (imageRender) return imageRender(node, info);\n        return node;\n      },\n      maxScale,\n      minScale,\n      onOpenChange: (open: boolean, info: { current: number }) => {\n        setVisible(open);\n        // 支持新的 onOpenChange\n        onOpenChange?.(open, info);\n        // 向后兼容旧的 onVisibleChange (注意参数差异)\n        onVisibleChange?.(open, !open, info.current);\n      },\n      rootClassName: cx(styles.preview, rootClassName),\n      ...rest,\n    } satisfies GroupPreviewConfig;\n  }, [props, visible, componentStyles]);\n};\n\nexport default usePreview;\n"],"mappings":";;;;;;;;;AAYA,MAAa,cACX,UACiC;CACjC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,OAAO,cAAc;EACnB,IAAI,UAAU,OAAO,OAAO;EAE5B,MAAM,EACJ,iBACA,cACA,WAAW,KACX,WAAW,IACX,cACA,eACA,aACA,eACA,GAAG,SAEH,UAAU,OAAO,CAAC,IAAI,SAAS,CAAC;EAGlC,OAAO;GACL,gBAAgB,GAAG,SAAS;IAC1B,MAAM,eACJ,oBAAC,SAAD;KAAe;KAAgB;KAAoB;eAChD;IACM,CAAA;IAEX,IAAI,eAAe,OAAO,cAAc,cAAc,IAAI;IAC1D,OAAO;GACT;GACA,WAAW,oBAAC,MAAD;IAAM,OAAO;IAAQ,MAAM;GAAI,CAAA;GAE1C,cAAc,cAAc,SAAS;IACnC,MAAM,OAAO,oBAAC,SAAD;KAAkB;eAAU;IAAsB,CAAA;IAC/D,IAAI,aAAa,OAAO,YAAY,MAAM,IAAI;IAC9C,OAAO;GACT;GACA;GACA;GACA,eAAe,MAAe,SAA8B;IAC1D,WAAW,IAAI;IAEf,eAAe,MAAM,IAAI;IAEzB,kBAAkB,MAAM,CAAC,MAAM,KAAK,OAAO;GAC7C;GACA,eAAe,GAAG,OAAO,SAAS,aAAa;GAC/C,GAAG;EACL;CACF,GAAG;EAAC;EAAO;EAASA;CAAe,CAAC;AACtC"}

package/es/Image/index.d.mts

@@ -1,7 +1,6 @@
 import { ImagePreviewOptions, ImageProps, PreviewGroupPreviewOptions, PreviewGroupProps } from "./type.mjs";
-import { PreviewGroup } from "./PreviewGroup.mjs";
+import PreviewGroup from "./PreviewGroup.mjs";
 import { ReactNode } from "react";
-
 //#region src/Image/index.d.ts
 interface IImage {
   (props: ImageProps): ReactNode;
@@ -9,5 +8,5 @@ interface IImage {
 }
 declare const Image: IImage;
 //#endregion
-export { IImage, ImagePreviewOptions, ImageProps, PreviewGroup, PreviewGroupPreviewOptions, PreviewGroupProps, Image as default };
+export { IImage, type ImagePreviewOptions, type ImageProps, PreviewGroup, type PreviewGroupPreviewOptions, type PreviewGroupProps, Image as default };
 //# sourceMappingURL=index.d.mts.map

package/es/Image/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Image/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    actionsHidden: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 0;\n    `,\n    actionsVisible: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 1;\n    `,\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: css`\n      ${lobeStaticStylish.variantOutlinedWithoutHover};\n      ${lobeStaticStylish.variantFilledWithoutHover};\n    `,\n    image: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: auto;\n      height: auto;\n    `,\n    mask: css`\n      ${lobeStaticStylish.blur};\n      backdrop-filter: blur(8px);\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    preview: css`\n      .${prefixCls}-image-preview-mask {\n        background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);\n      }\n\n      .${prefixCls}-image-preview-close {\n        color: ${cssVar.colorTextDescription};\n        background: ${cssVar.colorBgContainer};\n        box-shadow: ${cssVar.boxShadowTertiary};\n\n        svg {\n          stroke: ${cssVar.colorTextDescription};\n        }\n\n        &:hover {\n          color: ${cssVar.colorText};\n          background: ${cssVar.colorBgContainer};\n\n          svg {\n            stroke: ${cssVar.colorText};\n          }\n        }\n      }\n\n      .${prefixCls}-image-preview-img {\n        width: 100%;\n      }\n\n      .${prefixCls}-image-preview-switch {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 32px;\n        height: 32px;\n        padding: 0;\n\n        color: ${cssVar.colorTextDescription};\n\n        background: ${cssVar.colorBgContainer};\n        box-shadow: ${cssVar.boxShadowTertiary};\n\n        svg {\n          transform: scale(0.75);\n        }\n\n        &:hover {\n          color: ${cssVar.colorText};\n          background: ${cssVar.colorBgContainer};\n        }\n      }\n\n      .${prefixCls}-image-preview-switch-disabled {\n        display: none;\n      }\n\n      .ant-image-preview-progress {\n        color: ${cssVar.colorTextDescription};\n      }\n\n      img {\n        min-width: 100%;\n      }\n    `,\n    root: css`\n      cursor: pointer;\n      user-select: none;\n\n      position: relative;\n\n      overflow: hidden;\n\n      width: fit-content;\n      border-radius: ${cssVar.borderRadius};\n\n      line-height: 1;\n\n      .${prefixCls}-image-cover {\n        display: none !important;\n      }\n\n      &:hover {\n        .actions-hidden {\n          opacity: 1;\n        }\n      }\n    `,\n    toolbar: css`\n      ${lobeStaticStylish.variantOutlinedWithoutHover};\n      padding: 4px;\n      border-color: ${cssVar.colorFillTertiary};\n      border-radius: ${cssVar.borderRadiusLG};\n    `,\n\n    wrapper: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n      height: auto;\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'filled',\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n  },\n});\n\nexport const FALLBACK_DARK =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjM0IzQjNCIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\nexport const FALLBACK_LIGHT =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\n"],"mappings":";;;;AAKA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;AAC5D,QAAO;EACL,eAAe,GAAG;;;;;;;;;;EAUlB,gBAAgB,GAAG;;;;;;;;;;EAUnB,YAAYA,cAAkB;EAC9B,QAAQ,GAAG;QACPA,cAAkB,4BAA4B;QAC9CA,cAAkB,0BAA0B;;EAEhD,OAAO,GAAG;;;;;;;;EAQV,MAAM,GAAG;QACLA,cAAkB,KAAK;;;EAG3B,UAAUA,cAAkB;EAC5B,SAAS,GAAG;SACP,UAAU;yCACsB,OAAO,cAAc;;;SAGrD,UAAU;iBACF,OAAO,qBAAqB;sBACvB,OAAO,iBAAiB;sBACxB,OAAO,kBAAkB;;;oBAG3B,OAAO,qBAAqB;;;;mBAI7B,OAAO,UAAU;wBACZ,OAAO,iBAAiB;;;sBAG1B,OAAO,UAAU;;;;;SAK9B,UAAU;;;;SAIV,UAAU;;;;;;;;;iBASF,OAAO,qBAAqB;;sBAEvB,OAAO,iBAAiB;sBACxB,OAAO,kBAAkB;;;;;;;mBAO5B,OAAO,UAAU;wBACZ,OAAO,iBAAiB;;;;SAIvC,UAAU;;;;;iBAKF,OAAO,qBAAqB;;;;;;;EAOzC,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;;;SAIlC,UAAU;;;;;;;;;;EAUf,SAAS,GAAG;QACRA,cAAkB,4BAA4B;;sBAEhC,OAAO,kBAAkB;uBACxB,OAAO,eAAe;;EAGzC,SAAS,GAAG;;;;;;EAMb;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,SAAS,UACV;CAED,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,UAAU,OAAO;EACjB,YAAY,OAAO;EACpB,EACF;CACF,CAAC;AAEF,MAAa,gBACX;AACF,MAAa,iBACX"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Image/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    actionsHidden: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 0;\n    `,\n    actionsVisible: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 1;\n    `,\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: css`\n      ${lobeStaticStylish.variantOutlinedWithoutHover};\n      ${lobeStaticStylish.variantFilledWithoutHover};\n    `,\n    image: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: auto;\n      height: auto;\n    `,\n    mask: css`\n      ${lobeStaticStylish.blur};\n      backdrop-filter: blur(8px);\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    preview: css`\n      .${prefixCls}-image-preview-mask {\n        background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);\n      }\n\n      .${prefixCls}-image-preview-close {\n        color: ${cssVar.colorTextDescription};\n        background: ${cssVar.colorBgContainer};\n        box-shadow: ${cssVar.boxShadowTertiary};\n\n        svg {\n          stroke: ${cssVar.colorTextDescription};\n        }\n\n        &:hover {\n          color: ${cssVar.colorText};\n          background: ${cssVar.colorBgContainer};\n\n          svg {\n            stroke: ${cssVar.colorText};\n          }\n        }\n      }\n\n      .${prefixCls}-image-preview-img {\n        width: 100%;\n      }\n\n      .${prefixCls}-image-preview-switch {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 32px;\n        height: 32px;\n        padding: 0;\n\n        color: ${cssVar.colorTextDescription};\n\n        background: ${cssVar.colorBgContainer};\n        box-shadow: ${cssVar.boxShadowTertiary};\n\n        svg {\n          transform: scale(0.75);\n        }\n\n        &:hover {\n          color: ${cssVar.colorText};\n          background: ${cssVar.colorBgContainer};\n        }\n      }\n\n      .${prefixCls}-image-preview-switch-disabled {\n        display: none;\n      }\n\n      .ant-image-preview-progress {\n        color: ${cssVar.colorTextDescription};\n      }\n\n      img {\n        min-width: 100%;\n      }\n    `,\n    root: css`\n      cursor: pointer;\n      user-select: none;\n\n      position: relative;\n\n      overflow: hidden;\n\n      width: fit-content;\n      border-radius: ${cssVar.borderRadius};\n\n      line-height: 1;\n\n      .${prefixCls}-image-cover {\n        display: none !important;\n      }\n\n      &:hover {\n        .actions-hidden {\n          opacity: 1;\n        }\n      }\n    `,\n    toolbar: css`\n      ${lobeStaticStylish.variantOutlinedWithoutHover};\n      padding: 4px;\n      border-color: ${cssVar.colorFillTertiary};\n      border-radius: ${cssVar.borderRadiusLG};\n    `,\n\n    wrapper: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n      height: auto;\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'filled',\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n  },\n});\n\nexport const FALLBACK_DARK =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjM0IzQjNCIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\nexport const FALLBACK_LIGHT =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\n"],"mappings":";;;;AAKA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,eAAe,GAAG;;;;;;;;;;EAUlB,gBAAgB,GAAG;;;;;;;;;;EAUnB,YAAYA,cAAkB;EAC9B,QAAQ,GAAG;QACPA,cAAkB,4BAA4B;QAC9CA,cAAkB,0BAA0B;;EAEhD,OAAO,GAAG;;;;;;;;EAQV,MAAM,GAAG;QACLA,cAAkB,KAAK;;;EAG3B,UAAUA,cAAkB;EAC5B,SAAS,GAAG;SACP,UAAU;yCACsB,OAAO,cAAc;;;SAGrD,UAAU;iBACF,OAAO,qBAAqB;sBACvB,OAAO,iBAAiB;sBACxB,OAAO,kBAAkB;;;oBAG3B,OAAO,qBAAqB;;;;mBAI7B,OAAO,UAAU;wBACZ,OAAO,iBAAiB;;;sBAG1B,OAAO,UAAU;;;;;SAK9B,UAAU;;;;SAIV,UAAU;;;;;;;;;iBASF,OAAO,qBAAqB;;sBAEvB,OAAO,iBAAiB;sBACxB,OAAO,kBAAkB;;;;;;;mBAO5B,OAAO,UAAU;wBACZ,OAAO,iBAAiB;;;;SAIvC,UAAU;;;;;iBAKF,OAAO,qBAAqB;;;;;;;EAOzC,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;;;SAIlC,UAAU;;;;;;;;;;EAUf,SAAS,GAAG;QACRA,cAAkB,4BAA4B;;sBAEhC,OAAO,kBAAkB;uBACxB,OAAO,eAAe;;EAGzC,SAAS,GAAG;;;;;;CAMd;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,SAAS,SACX;CAEA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,UAAU,OAAO;EACjB,YAAY,OAAO;CACrB,EACF;AACF,CAAC;AAED,MAAa,gBACX;AACF,MAAa,iBACX"}

package/es/Image/type.d.mts

@@ -2,7 +2,6 @@ import { CSSProperties, ReactNode, Ref } from "react";
 import { ImageProps } from "antd";
 import { PreviewConfig } from "antd/es/image/index.js";
 import { GroupPreviewConfig } from "antd/es/image/PreviewGroup.js";
-
 //#region src/Image/type.d.ts
 interface PreviewGroupPreviewOptions extends GroupPreviewConfig {
   toolbarAddon?: ReactNode;

package/es/ImageSelect/ImageSelect.d.mts

@@ -1,8 +1,6 @@
 import { ImageSelectProps } from "./type.mjs";
-import * as _$react from "react";
-
 //#region src/ImageSelect/ImageSelect.d.ts
-declare const ImageSelect: _$react.NamedExoticComponent<ImageSelectProps>;
+declare const ImageSelect: import("react").NamedExoticComponent<ImageSelectProps>;
 //#endregion
-export { ImageSelect };
+export { ImageSelect as default };
 //# sourceMappingURL=ImageSelect.d.mts.map

package/es/ImageSelect/ImageSelect.mjs

@@ -6,10 +6,10 @@ import { styles } from "./styles.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import useControlledState from "use-merge-value";
+import useMergeState from "use-merge-value";
 //#region src/ImageSelect/ImageSelect.tsx
 const ImageSelect = memo(({ ref, className, style, value, defaultValue, onChange, options, width = 144, height = 86, styles: customStyles, classNames, unoptimized, ...rest }) => {
-	const [currentValue, setCurrentValue] = useControlledState(defaultValue, {
+	const [currentValue, setCurrentValue] = useMergeState(defaultValue, {
 		defaultValue,
 		onChange,
 		value

package/es/ImageSelect/ImageSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageSelect.mjs","names":["Flexbox"],"sources":["../../src/ImageSelect/ImageSelect.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\n\nimport { styles } from './styles';\nimport type { ImageSelectProps } from './type';\n\nconst ImageSelect = memo<ImageSelectProps>(\n  ({\n    ref,\n    className,\n    style,\n    value,\n    defaultValue,\n    onChange,\n    options,\n    width = 144,\n    height = 86,\n    styles: customStyles,\n    classNames,\n    unoptimized,\n    ...rest\n  }) => {\n    const [currentValue, setCurrentValue] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    return (\n      <Flexbox horizontal className={className} gap={16} ref={ref} style={style} {...rest}>\n        {options?.map((item) => {\n          const isActive = item.value === currentValue;\n          return (\n            <Flexbox\n              align={'center'}\n              className={cx(styles.container, isActive && styles.active)}\n              gap={4}\n              key={item.value}\n              onClick={() => setCurrentValue(item.value)}\n            >\n              <Img\n                alt={item.alt || item.value}\n                className={cx(styles.img, isActive && styles.imgActive, classNames?.img)}\n                height={height}\n                src={item.img}\n                unoptimized={unoptimized}\n                width={width}\n                style={{\n                  ...customStyles?.img,\n                  height,\n                  width,\n                }}\n              />\n\n              <Flexbox horizontal align={'center'} gap={4}>\n                {item.icon && <Icon icon={item.icon} />}\n                {item.label}\n              </Flexbox>\n            </Flexbox>\n          );\n        })}\n      </Flexbox>\n    );\n  },\n);\n\nImageSelect.displayName = 'ImageSelect';\n\nexport default ImageSelect;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,cAAc,MACjB,EACC,KACA,WACA,OACA,OACA,cACA,UACA,SACA,QAAQ,KACR,SAAS,IACT,QAAQ,cACR,YACA,aACA,GAAG,WACC;CACJ,MAAM,CAAC,cAAc,mBAAmB,mBAA2B,cAAc;EAC/E;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAACA,mBAAD;EAAS,YAAA;EAAsB;EAAW,KAAK;EAAS;EAAY;EAAO,GAAI;YAC5E,SAAS,KAAK,SAAS;GACtB,MAAM,WAAW,KAAK,UAAU;AAChC,UACE,qBAACA,mBAAD;IACE,OAAO;IACP,WAAW,GAAG,OAAO,WAAW,YAAY,OAAO,OAAO;IAC1D,KAAK;IAEL,eAAe,gBAAgB,KAAK,MAAM;cAL5C,CAOE,oBAAC,KAAD;KACE,KAAK,KAAK,OAAO,KAAK;KACtB,WAAW,GAAG,OAAO,KAAK,YAAY,OAAO,WAAW,YAAY,IAAI;KAChE;KACR,KAAK,KAAK;KACG;KACN;KACP,OAAO;MACL,GAAG,cAAc;MACjB;MACA;MACD;KACD,CAAA,EAEF,qBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,KAAK;eAA1C,CACG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,MAAQ,CAAA,EACtC,KAAK,MACE;OACF;MArBH,KAAK,MAqBF;IAEZ;EACM,CAAA;EAGf;AAED,YAAY,cAAc"}
+{"version":3,"file":"ImageSelect.mjs","names":["useControlledState","Flexbox"],"sources":["../../src/ImageSelect/ImageSelect.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\n\nimport { styles } from './styles';\nimport type { ImageSelectProps } from './type';\n\nconst ImageSelect = memo<ImageSelectProps>(\n  ({\n    ref,\n    className,\n    style,\n    value,\n    defaultValue,\n    onChange,\n    options,\n    width = 144,\n    height = 86,\n    styles: customStyles,\n    classNames,\n    unoptimized,\n    ...rest\n  }) => {\n    const [currentValue, setCurrentValue] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    return (\n      <Flexbox horizontal className={className} gap={16} ref={ref} style={style} {...rest}>\n        {options?.map((item) => {\n          const isActive = item.value === currentValue;\n          return (\n            <Flexbox\n              align={'center'}\n              className={cx(styles.container, isActive && styles.active)}\n              gap={4}\n              key={item.value}\n              onClick={() => setCurrentValue(item.value)}\n            >\n              <Img\n                alt={item.alt || item.value}\n                className={cx(styles.img, isActive && styles.imgActive, classNames?.img)}\n                height={height}\n                src={item.img}\n                unoptimized={unoptimized}\n                width={width}\n                style={{\n                  ...customStyles?.img,\n                  height,\n                  width,\n                }}\n              />\n\n              <Flexbox horizontal align={'center'} gap={4}>\n                {item.icon && <Icon icon={item.icon} />}\n                {item.label}\n              </Flexbox>\n            </Flexbox>\n          );\n        })}\n      </Flexbox>\n    );\n  },\n);\n\nImageSelect.displayName = 'ImageSelect';\n\nexport default ImageSelect;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,cAAc,MACjB,EACC,KACA,WACA,OACA,OACA,cACA,UACA,SACA,QAAQ,KACR,SAAS,IACT,QAAQ,cACR,YACA,aACA,GAAG,WACC;CACJ,MAAM,CAAC,cAAc,mBAAmBA,cAA2B,cAAc;EAC/E;EACA;EACA;CACF,CAAC;CAED,OACE,oBAACC,mBAAD;EAAS,YAAA;EAAsB;EAAW,KAAK;EAAS;EAAY;EAAO,GAAI;YAC5E,SAAS,KAAK,SAAS;GACtB,MAAM,WAAW,KAAK,UAAU;GAChC,OACE,qBAACA,mBAAD;IACE,OAAO;IACP,WAAW,GAAG,OAAO,WAAW,YAAY,OAAO,MAAM;IACzD,KAAK;IAEL,eAAe,gBAAgB,KAAK,KAAK;cAL3C,CAOE,oBAAC,KAAD;KACE,KAAK,KAAK,OAAO,KAAK;KACtB,WAAW,GAAG,OAAO,KAAK,YAAY,OAAO,WAAW,YAAY,GAAG;KAC/D;KACR,KAAK,KAAK;KACG;KACN;KACP,OAAO;MACL,GAAG,cAAc;MACjB;MACA;KACF;IACD,CAAA,GAED,qBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,KAAK;eAA1C,CACG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACrC,KAAK,KACC;MACF;MArBF,KAAK,KAqBH;EAEb,CAAC;CACM,CAAA;AAEb,CACF;AAEA,YAAY,cAAc"}

package/es/ImageSelect/index.d.mts

@@ -1,2 +1,3 @@
 import { ImageSelectItem, ImageSelectProps } from "./type.mjs";
-import { ImageSelect } from "./ImageSelect.mjs";
+import ImageSelect from "./ImageSelect.mjs";
+export { ImageSelectItem, ImageSelectProps, ImageSelect as default };

package/es/ImageSelect/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","names":["lobeStaticStylish"],"sources":["../../src/ImageSelect/styles.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    active: css`\n      color: ${cssVar.colorText};\n    `,\n    container: css`\n      cursor: pointer;\n      color: ${cssVar.colorTextDescription};\n    `,\n\n    img: cx(\n      lobeStaticStylish.variantFilled,\n      css`\n        border-radius: ${cssVar.borderRadius};\n\n        &:hover {\n          box-shadow: 0 0 0 2px ${cssVar.colorText};\n        }\n      `,\n    ),\n    imgActive: cx(\n      lobeStaticStylish.active,\n      css`\n        box-shadow: 0 0 0 2px ${cssVar.colorTextTertiary};\n      `,\n    ),\n  };\n});\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;AAC5D,QAAO;EACL,QAAQ,GAAG;eACA,OAAO,UAAU;;EAE5B,WAAW,GAAG;;eAEH,OAAO,qBAAqB;;EAGvC,KAAK,GACHA,cAAkB,eAClB,GAAG;yBACgB,OAAO,aAAa;;;kCAGX,OAAO,UAAU;;QAG9C;EACD,WAAW,GACTA,cAAkB,QAClB,GAAG;gCACuB,OAAO,kBAAkB;QAEpD;EACF;EACD"}
+{"version":3,"file":"styles.mjs","names":["lobeStaticStylish"],"sources":["../../src/ImageSelect/styles.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    active: css`\n      color: ${cssVar.colorText};\n    `,\n    container: css`\n      cursor: pointer;\n      color: ${cssVar.colorTextDescription};\n    `,\n\n    img: cx(\n      lobeStaticStylish.variantFilled,\n      css`\n        border-radius: ${cssVar.borderRadius};\n\n        &:hover {\n          box-shadow: 0 0 0 2px ${cssVar.colorText};\n        }\n      `,\n    ),\n    imgActive: cx(\n      lobeStaticStylish.active,\n      css`\n        box-shadow: 0 0 0 2px ${cssVar.colorTextTertiary};\n      `,\n    ),\n  };\n});\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQ,GAAG;eACA,OAAO,UAAU;;EAE5B,WAAW,GAAG;;eAEH,OAAO,qBAAqB;;EAGvC,KAAK,GACHA,cAAkB,eAClB,GAAG;yBACgB,OAAO,aAAa;;;kCAGX,OAAO,UAAU;;OAG/C;EACA,WAAW,GACTA,cAAkB,QAClB,GAAG;gCACuB,OAAO,kBAAkB;OAErD;CACF;AACF,CAAC"}

package/es/ImageSelect/type.d.mts

@@ -1,8 +1,9 @@
 import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
 import { IconProps } from "../Icon/type.mjs";
+import "../Icon/index.mjs";
 import { CSSProperties, ReactNode, Ref } from "react";
 import { SelectProps } from "antd";
-
 //#region src/ImageSelect/type.d.ts
 interface ImageSelectItem {
   alt?: string;
@@ -17,6 +18,9 @@ interface ImageSelectProps extends FlexboxProps {
     img?: string;
   };
   defaultValue?: SelectProps['defaultValue'];
+  /**
+   * @default 86
+   */
   height?: number;
   onChange?: (value: this['value']) => void;
   options?: ImageSelectItem[];
@@ -27,6 +31,9 @@ interface ImageSelectProps extends FlexboxProps {
   };
   unoptimized?: boolean;
   value?: SelectProps['value'];
+  /**
+   * @default 144
+   */
   width?: number;
 }
 //#endregion

package/es/Img/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/Img/index.tsx"],"sourcesContent":["'use client';\n\nimport { type ImageProps } from 'antd';\nimport { createElement, type ElementType, type FC, memo, type Ref, use, useMemo } from 'react';\n\nimport { ConfigContext } from '@/ConfigProvider';\nimport { type ImgProps as HtmlImgeProps } from '@/types';\n\nconst createContainer = (as: ElementType) => memo((props: any) => createElement(as, props));\n\ntype ImgProps = HtmlImgeProps & ImageProps & { ref?: Ref<HTMLImageElement>; unoptimized?: boolean };\n\nconst Img: FC<ImgProps> = ({ unoptimized, ...rest }) => {\n  const config = use(ConfigContext);\n  const render = config?.imgAs || 'img';\n\n  const ImgContainer = useMemo(() => createContainer(render), [render]);\n\n  return (\n    <ImgContainer\n      unoptimized={unoptimized === undefined ? config?.imgUnoptimized : unoptimized}\n      {...rest}\n    />\n  );\n};\n\nImg.displayName = 'Img';\n\nexport default Img;\n"],"mappings":";;;;;AAQA,MAAM,mBAAmB,OAAoB,MAAM,UAAe,cAAc,IAAI,MAAM,CAAC;AAI3F,MAAM,OAAqB,EAAE,aAAa,GAAG,WAAW;CACtD,MAAM,SAAS,IAAI,cAAc;CACjC,MAAM,SAAS,QAAQ,SAAS;AAIhC,QACE,oBAHmB,cAAc,gBAAgB,OAAO,EAAE,CAAC,OAAO,CAGrD,EAAb;EACE,aAAa,gBAAgB,KAAA,IAAY,QAAQ,iBAAiB;EAClE,GAAI;EACJ,CAAA;;AAIN,IAAI,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/Img/index.tsx"],"sourcesContent":["'use client';\n\nimport { type ImageProps } from 'antd';\nimport { createElement, type ElementType, type FC, memo, type Ref, use, useMemo } from 'react';\n\nimport { ConfigContext } from '@/ConfigProvider';\nimport { type ImgProps as HtmlImgeProps } from '@/types';\n\nconst createContainer = (as: ElementType) => memo((props: any) => createElement(as, props));\n\ntype ImgProps = HtmlImgeProps & ImageProps & { ref?: Ref<HTMLImageElement>; unoptimized?: boolean };\n\nconst Img: FC<ImgProps> = ({ unoptimized, ...rest }) => {\n  const config = use(ConfigContext);\n  const render = config?.imgAs || 'img';\n\n  const ImgContainer = useMemo(() => createContainer(render), [render]);\n\n  return (\n    <ImgContainer\n      unoptimized={unoptimized === undefined ? config?.imgUnoptimized : unoptimized}\n      {...rest}\n    />\n  );\n};\n\nImg.displayName = 'Img';\n\nexport default Img;\n"],"mappings":";;;;;AAQA,MAAM,mBAAmB,OAAoB,MAAM,UAAe,cAAc,IAAI,KAAK,CAAC;AAI1F,MAAM,OAAqB,EAAE,aAAa,GAAG,WAAW;CACtD,MAAM,SAAS,IAAI,aAAa;CAChC,MAAM,SAAS,QAAQ,SAAS;CAIhC,OACE,oBAHmB,cAAc,gBAAgB,MAAM,GAAG,CAAC,MAAM,CAGrD,GAAZ;EACE,aAAa,gBAAgB,KAAA,IAAY,QAAQ,iBAAiB;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,IAAI,cAAc"}

package/es/Input/Input.d.mts

@@ -1,8 +1,6 @@
 import { InputProps } from "./type.mjs";
-import * as _$react from "react";
-
 //#region src/Input/Input.d.ts
-declare const Input: _$react.NamedExoticComponent<InputProps>;
+declare const Input: import("react").NamedExoticComponent<InputProps>;
 //#endregion
-export { Input };
+export { Input as default };
 //# sourceMappingURL=Input.d.mts.map

package/es/Input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":["Input","AntInput"],"sources":["../../src/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { InputProps } from './type';\n\nconst Input = memo<InputProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInput\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;AASA,MAAMA,UAAQ,MAAkB,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC/E,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACC,OAAD;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACD,GAAI;EACJ,CAAA;EAEJ;AAEF,QAAM,cAAc"}
+{"version":3,"file":"Input.mjs","names":["Input","AntInput"],"sources":["../../src/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { InputProps } from './type';\n\nconst Input = memo<InputProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInput\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;AASA,MAAMA,UAAQ,MAAkB,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC/E,MAAM,EAAE,eAAe,aAAa;CAEpC,OACE,oBAACC,OAAD;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;EAAY,CAAC,GAC7E,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,QAAM,cAAc"}

package/es/Input/InputNumber.d.mts

@@ -1,8 +1,6 @@
 import { InputNumberProps } from "./type.mjs";
-import * as _$react from "react";
-
 //#region src/Input/InputNumber.d.ts
-declare const InputNumber: _$react.NamedExoticComponent<InputNumberProps>;
+declare const InputNumber: import("react").NamedExoticComponent<InputNumberProps>;
 //#endregion
-export { InputNumber };
+export { InputNumber as default };
 //# sourceMappingURL=InputNumber.d.mts.map

package/es/Input/InputNumber.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.mjs","names":["InputNumber","AntInputNumber"],"sources":["../../src/Input/InputNumber.tsx"],"sourcesContent":["'use client';\n\nimport { InputNumber as AntInputNumber } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { InputNumberProps } from './type';\n\nconst InputNumber = memo<InputNumberProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInputNumber\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n\nInputNumber.displayName = 'InputNumber';\n\nexport default InputNumber;\n"],"mappings":";;;;;;;AASA,MAAMA,gBAAc,MAAwB,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC3F,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACC,aAAD;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACD,GAAI;EACJ,CAAA;EAEJ;AAEF,cAAY,cAAc"}
+{"version":3,"file":"InputNumber.mjs","names":["InputNumber","AntInputNumber"],"sources":["../../src/Input/InputNumber.tsx"],"sourcesContent":["'use client';\n\nimport { InputNumber as AntInputNumber } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { InputNumberProps } from './type';\n\nconst InputNumber = memo<InputNumberProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInputNumber\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n\nInputNumber.displayName = 'InputNumber';\n\nexport default InputNumber;\n"],"mappings":";;;;;;;AASA,MAAMA,gBAAc,MAAwB,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC3F,MAAM,EAAE,eAAe,aAAa;CAEpC,OACE,oBAACC,aAAD;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;EAAY,CAAC,GAC7E,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,cAAY,cAAc"}

package/es/Input/InputOPT.d.mts

@@ -1,8 +1,6 @@
 import { InputOPTProps } from "./type.mjs";
-import * as _$react from "react";
-
 //#region src/Input/InputOPT.d.ts
-declare const InputOPT: _$react.NamedExoticComponent<InputOPTProps>;
+declare const InputOPT: import("react").NamedExoticComponent<InputOPTProps>;
 //#endregion
-export { InputOPT };
+export { InputOPT as default };
 //# sourceMappingURL=InputOPT.d.mts.map

package/es/Input/InputOPT.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputOPT.mjs","names":["AntInput"],"sources":["../../src/Input/InputOPT.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variantsOPT } from './style';\nimport type { InputOPTProps } from './type';\n\nconst InputOPT = memo<InputOPTProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInput.OTP\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      className={cx(\n        variantsOPT({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n\nInputOPT.displayName = 'InputOPT';\n\nexport default InputOPT;\n"],"mappings":";;;;;;;AASA,MAAM,WAAW,MAAqB,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CACrF,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACA,MAAS,KAAV;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,YAAY;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EACjF,UACD;EACD,GAAI;EACJ,CAAA;EAEJ;AAEF,SAAS,cAAc"}
+{"version":3,"file":"InputOPT.mjs","names":["AntInput"],"sources":["../../src/Input/InputOPT.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variantsOPT } from './style';\nimport type { InputOPTProps } from './type';\n\nconst InputOPT = memo<InputOPTProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInput.OTP\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      className={cx(\n        variantsOPT({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n\nInputOPT.displayName = 'InputOPT';\n\nexport default InputOPT;\n"],"mappings":";;;;;;;AASA,MAAM,WAAW,MAAqB,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CACrF,MAAM,EAAE,eAAe,aAAa;CAEpC,OACE,oBAACA,MAAS,KAAV;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,YAAY;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;EAAY,CAAC,GAChF,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,SAAS,cAAc"}

package/es/Input/InputPassword.d.mts

@@ -1,8 +1,6 @@
 import { InputPasswordProps } from "./type.mjs";
-import * as _$react from "react";
-
 //#region src/Input/InputPassword.d.ts
-declare const InputPassword: _$react.NamedExoticComponent<InputPasswordProps>;
+declare const InputPassword: import("react").NamedExoticComponent<InputPasswordProps>;
 //#endregion
-export { InputPassword };
+export { InputPassword as default };
 //# sourceMappingURL=InputPassword.d.mts.map

package/es/Input/InputPassword.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputPassword.mjs","names":["AntInput"],"sources":["../../src/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { InputPasswordProps } from './type';\n\nconst InputPassword = memo<InputPasswordProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInput.Password\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n\nInputPassword.displayName = 'InputPassword';\n\nexport default InputPassword;\n"],"mappings":";;;;;;;AASA,MAAM,gBAAgB,MAA0B,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC/F,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACA,MAAS,UAAV;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACD,GAAI;EACJ,CAAA;EAEJ;AAEF,cAAc,cAAc"}
+{"version":3,"file":"InputPassword.mjs","names":["AntInput"],"sources":["../../src/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { InputPasswordProps } from './type';\n\nconst InputPassword = memo<InputPasswordProps>(({ ref, variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntInput.Password\n      ref={ref}\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n\nInputPassword.displayName = 'InputPassword';\n\nexport default InputPassword;\n"],"mappings":";;;;;;;AASA,MAAM,gBAAgB,MAA0B,EAAE,KAAK,SAAS,QAAQ,WAAW,GAAG,WAAW;CAC/F,MAAM,EAAE,eAAe,aAAa;CAEpC,OACE,oBAACA,MAAS,UAAV;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;EAAY,CAAC,GAC7E,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,cAAc,cAAc"}

package/es/Input/TextArea.d.mts

@@ -1,8 +1,6 @@
 import { TextAreaProps } from "./type.mjs";
-import * as _$react from "react";
-
 //#region src/Input/TextArea.d.ts
-declare const TextArea: _$react.NamedExoticComponent<TextAreaProps>;
+declare const TextArea: import("react").NamedExoticComponent<TextAreaProps>;
 //#endregion
-export { TextArea };
+export { TextArea as default };
 //# sourceMappingURL=TextArea.d.mts.map

package/es/Input/TextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","names":["AntInput"],"sources":["../../src/Input/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { TextAreaProps } from './type';\n\nconst TextArea = memo<TextAreaProps>(\n  ({ ref, variant, shadow, className, resize = false, style, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n\n    return (\n      <AntInput.TextArea\n        ref={ref}\n        variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n        className={cx(\n          variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n          className,\n        )}\n        style={{\n          resize: resize ? undefined : 'none',\n          ...style,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;;;;;;AASA,MAAM,WAAW,MACd,EAAE,KAAK,SAAS,QAAQ,WAAW,SAAS,OAAO,OAAO,GAAG,WAAW;CACvE,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACA,MAAS,UAAV;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACD,OAAO;GACL,QAAQ,SAAS,KAAA,IAAY;GAC7B,GAAG;GACJ;EACD,GAAI;EACJ,CAAA;EAGP;AAED,SAAS,cAAc"}
+{"version":3,"file":"TextArea.mjs","names":["AntInput"],"sources":["../../src/Input/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Input as AntInput } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { TextAreaProps } from './type';\n\nconst TextArea = memo<TextAreaProps>(\n  ({ ref, variant, shadow, className, resize = false, style, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n\n    return (\n      <AntInput.TextArea\n        ref={ref}\n        variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n        className={cx(\n          variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n          className,\n        )}\n        style={{\n          resize: resize ? undefined : 'none',\n          ...style,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;;;;;;AASA,MAAM,WAAW,MACd,EAAE,KAAK,SAAS,QAAQ,WAAW,SAAS,OAAO,OAAO,GAAG,WAAW;CACvE,MAAM,EAAE,eAAe,aAAa;CAEpC,OACE,oBAACA,MAAS,UAAV;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;EAAY,CAAC,GAC7E,SACF;EACA,OAAO;GACL,QAAQ,SAAS,KAAA,IAAY;GAC7B,GAAG;EACL;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,SAAS,cAAc"}

package/es/Input/index.d.mts

@@ -1,6 +1,7 @@
 import { InputNumberProps, InputOPTProps, InputPasswordProps, InputProps, TextAreaProps } from "./type.mjs";
-import { Input } from "./Input.mjs";
-import { InputNumber } from "./InputNumber.mjs";
-import { InputOPT } from "./InputOPT.mjs";
-import { InputPassword } from "./InputPassword.mjs";
-import { TextArea } from "./TextArea.mjs";
+import Input from "./Input.mjs";
+import InputNumber from "./InputNumber.mjs";
+import InputOPT from "./InputOPT.mjs";
+import InputPassword from "./InputPassword.mjs";
+import TextArea from "./TextArea.mjs";
+export { InputNumber, type InputNumberProps, InputOPT, type InputOPTProps, InputPassword, type InputPasswordProps, type InputProps, TextArea, type TextAreaProps, Input as default };

package/es/Input/style.mjs

@@ -90,6 +90,6 @@ const variantsOPT = cva(styles.rootOPT, {
 	}
 });
 //#endregion
-export { variants, variantsOPT };
+export { styles, variants, variantsOPT };
 
 //# sourceMappingURL=style.mjs.map

package/es/Input/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Input/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: css`\n      &[class*='ant-input'] {\n        ${lobeStaticStylish.variantBorderless}\n        &:hover {\n          ${lobeStaticStylish.variantBorderlessWithoutHover}\n        }\n      }\n    `,\n    borderlessOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.variantBorderless};\n        }\n      }\n    `,\n    filled: cx(\n      lobeStaticStylish.variantFilled,\n      css`\n        &:focus-within {\n          ${lobeStaticStylish.variantFilledWithoutHover}\n        }\n      `,\n    ),\n\n    filledOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.variantFilled};\n        }\n      }\n    `,\n    outlined: lobeStaticStylish.variantOutlined,\n    outlinedOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.variantOutlined};\n        }\n      }\n    `,\n    root: css``,\n    rootOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          &:focus-within {\n            border-color: ${cssVar.colorBorder};\n          }\n        }\n      }\n    `,\n    shadow: lobeStaticStylish.shadow,\n    shadowOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.shadow};\n        }\n      }\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    shadow: false,\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n      underlined: null,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n});\n\nexport const variantsOPT = cva(styles.rootOPT, {\n  defaultVariants: {\n    shadow: false,\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filledOPT,\n      outlined: styles.outlinedOPT,\n      borderless: styles.borderlessOPT,\n      underlined: null,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadowOPT,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;AAC5D,QAAO;EACL,YAAY,GAAG;;UAETA,cAAkB,kBAAkB;;YAElCA,cAAkB,8BAA8B;;;;EAIxD,eAAe,GAAG;;;YAGVA,cAAkB,kBAAkB;;;;EAI5C,QAAQ,GACNA,cAAkB,eAClB,GAAG;;YAEGA,cAAkB,0BAA0B;;QAGnD;EAED,WAAW,GAAG;;;YAGNA,cAAkB,cAAc;;;;EAIxC,UAAUA,cAAkB;EAC5B,aAAa,GAAG;;;YAGRA,cAAkB,gBAAgB;;;;EAI1C,MAAM,GAAG;EACT,SAAS,GAAG;;;;4BAIY,OAAO,YAAY;;;;;EAK3C,QAAQA,cAAkB;EAC1B,WAAW,GAAG;;;YAGNA,cAAkB,OAAO;;;;EAIlC;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,QAAQ,OACT;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACnB,YAAY;GACb;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACF;CACF,CAAC;AAEF,MAAa,cAAc,IAAI,OAAO,SAAS;CAC7C,iBAAiB,EACf,QAAQ,OACT;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACnB,YAAY;GACb;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACF;CACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Input/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: css`\n      &[class*='ant-input'] {\n        ${lobeStaticStylish.variantBorderless}\n        &:hover {\n          ${lobeStaticStylish.variantBorderlessWithoutHover}\n        }\n      }\n    `,\n    borderlessOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.variantBorderless};\n        }\n      }\n    `,\n    filled: cx(\n      lobeStaticStylish.variantFilled,\n      css`\n        &:focus-within {\n          ${lobeStaticStylish.variantFilledWithoutHover}\n        }\n      `,\n    ),\n\n    filledOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.variantFilled};\n        }\n      }\n    `,\n    outlined: lobeStaticStylish.variantOutlined,\n    outlinedOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.variantOutlined};\n        }\n      }\n    `,\n    root: css``,\n    rootOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          &:focus-within {\n            border-color: ${cssVar.colorBorder};\n          }\n        }\n      }\n    `,\n    shadow: lobeStaticStylish.shadow,\n    shadowOPT: css`\n      &[class*='ant-otp'] {\n        [class*='ant-otp-input'] {\n          ${lobeStaticStylish.shadow};\n        }\n      }\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    shadow: false,\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n      underlined: null,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n});\n\nexport const variantsOPT = cva(styles.rootOPT, {\n  defaultVariants: {\n    shadow: false,\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filledOPT,\n      outlined: styles.outlinedOPT,\n      borderless: styles.borderlessOPT,\n      underlined: null,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadowOPT,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,YAAY,GAAG;;UAETA,cAAkB,kBAAkB;;YAElCA,cAAkB,8BAA8B;;;;EAIxD,eAAe,GAAG;;;YAGVA,cAAkB,kBAAkB;;;;EAI5C,QAAQ,GACNA,cAAkB,eAClB,GAAG;;YAEGA,cAAkB,0BAA0B;;OAGpD;EAEA,WAAW,GAAG;;;YAGNA,cAAkB,cAAc;;;;EAIxC,UAAUA,cAAkB;EAC5B,aAAa,GAAG;;;YAGRA,cAAkB,gBAAgB;;;;EAI1C,MAAM,GAAG;EACT,SAAS,GAAG;;;;4BAIY,OAAO,YAAY;;;;;EAK3C,QAAQA,cAAkB;EAC1B,WAAW,GAAG;;;YAGNA,cAAkB,OAAO;;;;CAInC;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,QAAQ,MACV;CAEA,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACnB,YAAY;EACd;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC;AAED,MAAa,cAAc,IAAI,OAAO,SAAS;CAC7C,iBAAiB,EACf,QAAQ,MACV;CAEA,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACnB,YAAY;EACd;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC"}

package/es/Input/type.d.mts

@@ -4,7 +4,6 @@ import { OTPProps, OTPRef } from "antd/es/input/OTP/index.js";
 import { PasswordProps } from "antd/es/input/Password.js";
 import { TextAreaProps, TextAreaRef } from "antd/es/input/TextArea.js";
 import { InputNumberRef } from "rc-input-number";
-
 //#region src/Input/type.d.ts
 interface InputProps$1 extends InputProps {
   ref?: Ref<InputRef>;

package/es/Layout/Layout.mjs

@@ -1,12 +1,12 @@
 "use client";
 import DraggablePanel from "../DraggablePanel/index.mjs";
 import { styles } from "./style.mjs";
-import LayoutFooter from "./components/LayoutFooter.mjs";
-import LayoutHeader from "./components/LayoutHeader.mjs";
-import LayoutMain from "./components/LayoutMain.mjs";
-import LayoutSidebar from "./components/LayoutSidebar.mjs";
-import LayoutSidebarInner from "./components/LayoutSidebarInner.mjs";
-import LayoutToc from "./components/LayoutToc.mjs";
+import { LayoutFooter } from "./components/LayoutFooter.mjs";
+import { LayoutHeader } from "./components/LayoutHeader.mjs";
+import { LayoutMain } from "./components/LayoutMain.mjs";
+import { LayoutSidebar } from "./components/LayoutSidebar.mjs";
+import { LayoutSidebarInner } from "./components/LayoutSidebarInner.mjs";
+import { LayoutToc } from "./components/LayoutToc.mjs";
 import { memo, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useResponsive } from "antd-style";

package/es/Layout/Layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.mjs","names":[],"sources":["../../src/Layout/Layout.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useEffect, useMemo, useState } from 'react';\n\nimport DraggablePanel from '@/DraggablePanel';\n\nimport LayoutFooter from './components/LayoutFooter';\nimport LayoutHeader from './components/LayoutHeader';\nimport LayoutMain from './components/LayoutMain';\nimport LayoutSidebar from './components/LayoutSidebar';\nimport LayoutSidebarInner from './components/LayoutSidebarInner';\nimport LayoutToc from './components/LayoutToc';\nimport { styles } from './style';\nimport type { LayoutProps } from './type';\n\nconst Layout = memo<LayoutProps>(\n  ({ helmet, headerHeight = 64, header, footer, sidebar, asideWidth, toc, children, tocWidth }) => {\n    // Convert headerHeight prop to CSS variable\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--layout-header-height': `${headerHeight}px`,\n      }),\n      [headerHeight],\n    );\n    const { mobile, laptop } = useResponsive();\n    const [expand, setExpand] = useState(true);\n    useEffect(() => {\n      setExpand(Boolean(laptop));\n    }, [laptop]);\n\n    return (\n      <div style={cssVariables}>\n        {helmet}\n        {header && (\n          <LayoutHeader headerHeight={headerHeight}>\n            {header}\n            {mobile && toc && <LayoutToc>{toc}</LayoutToc>}\n          </LayoutHeader>\n        )}\n        <LayoutMain>\n          {!mobile && !sidebar && <nav style={{ width: tocWidth }} />}\n          {!mobile && sidebar && (\n            <LayoutSidebar headerHeight={headerHeight}>\n              <DraggablePanel\n                expand={expand}\n                maxWidth={asideWidth}\n                placement=\"left\"\n                onExpandChange={setExpand}\n              >\n                <LayoutSidebarInner headerHeight={headerHeight}>{sidebar}</LayoutSidebarInner>\n              </DraggablePanel>\n            </LayoutSidebar>\n          )}\n          <section className={styles.content}>{children}</section>\n          {!mobile && toc && <LayoutToc tocWidth={tocWidth}>{toc}</LayoutToc>}\n        </LayoutMain>\n        {footer && <LayoutFooter>{footer}</LayoutFooter>}\n      </div>\n    );\n  },\n);\n\nexport default Layout;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,SAAS,MACZ,EAAE,QAAQ,eAAe,IAAI,QAAQ,QAAQ,SAAS,YAAY,KAAK,UAAU,eAAe;CAE/F,MAAM,eAAe,eACZ,EACL,0BAA0B,GAAG,aAAa,KAC3C,GACD,CAAC,aAAa,CACf;CACD,MAAM,EAAE,QAAQ,WAAW,eAAe;CAC1C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;AAC1C,iBAAgB;AACd,YAAU,QAAQ,OAAO,CAAC;IACzB,CAAC,OAAO,CAAC;AAEZ,QACE,qBAAC,OAAD;EAAK,OAAO;YAAZ;GACG;GACA,UACC,qBAAC,cAAD;IAA4B;cAA5B,CACG,QACA,UAAU,OAAO,oBAAC,WAAD,EAAA,UAAY,KAAgB,CAAA,CACjC;;GAEjB,qBAAC,YAAD,EAAA,UAAA;IACG,CAAC,UAAU,CAAC,WAAW,oBAAC,OAAD,EAAK,OAAO,EAAE,OAAO,UAAU,EAAI,CAAA;IAC1D,CAAC,UAAU,WACV,oBAAC,eAAD;KAA6B;eAC3B,oBAAC,gBAAD;MACU;MACR,UAAU;MACV,WAAU;MACV,gBAAgB;gBAEhB,oBAAC,oBAAD;OAAkC;iBAAe;OAA6B,CAAA;MAC/D,CAAA;KACH,CAAA;IAElB,oBAAC,WAAD;KAAS,WAAW,OAAO;KAAU;KAAmB,CAAA;IACvD,CAAC,UAAU,OAAO,oBAAC,WAAD;KAAqB;eAAW;KAAgB,CAAA;IACxD,EAAA,CAAA;GACZ,UAAU,oBAAC,cAAD,EAAA,UAAe,QAAsB,CAAA;GAC5C;;EAGX"}
+{"version":3,"file":"Layout.mjs","names":[],"sources":["../../src/Layout/Layout.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useEffect, useMemo, useState } from 'react';\n\nimport DraggablePanel from '@/DraggablePanel';\n\nimport LayoutFooter from './components/LayoutFooter';\nimport LayoutHeader from './components/LayoutHeader';\nimport LayoutMain from './components/LayoutMain';\nimport LayoutSidebar from './components/LayoutSidebar';\nimport LayoutSidebarInner from './components/LayoutSidebarInner';\nimport LayoutToc from './components/LayoutToc';\nimport { styles } from './style';\nimport type { LayoutProps } from './type';\n\nconst Layout = memo<LayoutProps>(\n  ({ helmet, headerHeight = 64, header, footer, sidebar, asideWidth, toc, children, tocWidth }) => {\n    // Convert headerHeight prop to CSS variable\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--layout-header-height': `${headerHeight}px`,\n      }),\n      [headerHeight],\n    );\n    const { mobile, laptop } = useResponsive();\n    const [expand, setExpand] = useState(true);\n    useEffect(() => {\n      setExpand(Boolean(laptop));\n    }, [laptop]);\n\n    return (\n      <div style={cssVariables}>\n        {helmet}\n        {header && (\n          <LayoutHeader headerHeight={headerHeight}>\n            {header}\n            {mobile && toc && <LayoutToc>{toc}</LayoutToc>}\n          </LayoutHeader>\n        )}\n        <LayoutMain>\n          {!mobile && !sidebar && <nav style={{ width: tocWidth }} />}\n          {!mobile && sidebar && (\n            <LayoutSidebar headerHeight={headerHeight}>\n              <DraggablePanel\n                expand={expand}\n                maxWidth={asideWidth}\n                placement=\"left\"\n                onExpandChange={setExpand}\n              >\n                <LayoutSidebarInner headerHeight={headerHeight}>{sidebar}</LayoutSidebarInner>\n              </DraggablePanel>\n            </LayoutSidebar>\n          )}\n          <section className={styles.content}>{children}</section>\n          {!mobile && toc && <LayoutToc tocWidth={tocWidth}>{toc}</LayoutToc>}\n        </LayoutMain>\n        {footer && <LayoutFooter>{footer}</LayoutFooter>}\n      </div>\n    );\n  },\n);\n\nexport default Layout;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,SAAS,MACZ,EAAE,QAAQ,eAAe,IAAI,QAAQ,QAAQ,SAAS,YAAY,KAAK,UAAU,eAAe;CAE/F,MAAM,eAAe,eACZ,EACL,0BAA0B,GAAG,aAAa,IAC5C,IACA,CAAC,YAAY,CACf;CACA,MAAM,EAAE,QAAQ,WAAW,cAAc;CACzC,MAAM,CAAC,QAAQ,aAAa,SAAS,IAAI;CACzC,gBAAgB;EACd,UAAU,QAAQ,MAAM,CAAC;CAC3B,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,qBAAC,OAAD;EAAK,OAAO;YAAZ;GACG;GACA,UACC,qBAAC,cAAD;IAA4B;cAA5B,CACG,QACA,UAAU,OAAO,oBAAC,WAAD,EAAA,UAAY,IAAe,CAAA,CACjC;;GAEhB,qBAAC,YAAD,EAAA,UAAA;IACG,CAAC,UAAU,CAAC,WAAW,oBAAC,OAAD,EAAK,OAAO,EAAE,OAAO,SAAS,EAAI,CAAA;IACzD,CAAC,UAAU,WACV,oBAAC,eAAD;KAA6B;eAC3B,oBAAC,gBAAD;MACU;MACR,UAAU;MACV,WAAU;MACV,gBAAgB;gBAEhB,oBAAC,oBAAD;OAAkC;iBAAe;MAA4B,CAAA;KAC/D,CAAA;IACH,CAAA;IAEjB,oBAAC,WAAD;KAAS,WAAW,OAAO;KAAU;IAAkB,CAAA;IACtD,CAAC,UAAU,OAAO,oBAAC,WAAD;KAAqB;eAAW;IAAe,CAAA;GACxD,EAAA,CAAA;GACX,UAAU,oBAAC,cAAD,EAAA,UAAe,OAAqB,CAAA;EAC5C;;AAET,CACF"}

package/es/Layout/components/LayoutFooter.d.mts

@@ -1,8 +1,7 @@
 import { DivProps } from "../../types/index.mjs";
-import * as _$react from "react";
-
+import "../../index.mjs";
 //#region src/Layout/components/LayoutFooter.d.ts
-declare const LayoutFooter: _$react.NamedExoticComponent<DivProps>;
+declare const LayoutFooter: import("react").NamedExoticComponent<DivProps>;
 //#endregion
-export { LayoutFooter };
+export { LayoutFooter, LayoutFooter as default };
 //# sourceMappingURL=LayoutFooter.d.mts.map

package/es/Layout/components/LayoutFooter.mjs

@@ -13,6 +13,6 @@ const LayoutFooter = memo(({ children, className, ...rest }) => {
 });
 LayoutFooter.displayName = "LayoutFooter";
 //#endregion
-export { LayoutFooter as default };
+export { LayoutFooter, LayoutFooter as default };
 
 //# sourceMappingURL=LayoutFooter.mjs.map

package/es/Layout/components/LayoutFooter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutFooter.mjs","names":[],"sources":["../../../src/Layout/components/LayoutFooter.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { styles } from '../style';\nimport type { LayoutFooterProps } from '../type';\n\nexport const LayoutFooter = memo<LayoutFooterProps>(({ children, className, ...rest }) => {\n  return (\n    <footer className={cx(styles.footer, className)} {...rest}>\n      {children}\n    </footer>\n  );\n});\n\nLayoutFooter.displayName = 'LayoutFooter';\n\nexport default LayoutFooter;\n"],"mappings":";;;;;;AAQA,MAAa,eAAe,MAAyB,EAAE,UAAU,WAAW,GAAG,WAAW;AACxF,QACE,oBAAC,UAAD;EAAQ,WAAW,GAAG,OAAO,QAAQ,UAAU;EAAE,GAAI;EAClD;EACM,CAAA;EAEX;AAEF,aAAa,cAAc"}
+{"version":3,"file":"LayoutFooter.mjs","names":[],"sources":["../../../src/Layout/components/LayoutFooter.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { styles } from '../style';\nimport type { LayoutFooterProps } from '../type';\n\nexport const LayoutFooter = memo<LayoutFooterProps>(({ children, className, ...rest }) => {\n  return (\n    <footer className={cx(styles.footer, className)} {...rest}>\n      {children}\n    </footer>\n  );\n});\n\nLayoutFooter.displayName = 'LayoutFooter';\n\nexport default LayoutFooter;\n"],"mappings":";;;;;;AAQA,MAAa,eAAe,MAAyB,EAAE,UAAU,WAAW,GAAG,WAAW;CACxF,OACE,oBAAC,UAAD;EAAQ,WAAW,GAAG,OAAO,QAAQ,SAAS;EAAG,GAAI;EAClD;CACK,CAAA;AAEZ,CAAC;AAED,aAAa,cAAc"}