@lobehub/ui 3.3.0 → 3.3.2

package/es/Highlighter/FullFeatured.js

@@ -1,7 +1,7 @@
 'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["content", "language", "setLanguage", "showLanguage", "className", "style", "allowChangeLanguage", "fileName", "icon", "actionsRender", "copyable", "variant", "shadow", "wrap", "defaultExpand", "children"];
+var _excluded = ["content", "language", "setLanguage", "showLanguage", "className", "classNames", "styles", "style", "allowChangeLanguage", "fileName", "icon", "actionsRender", "copyable", "variant", "shadow", "wrap", "defaultExpand", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -18,16 +18,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { cva } from 'class-variance-authority';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import ActionIcon from "../ActionIcon";
 import CopyButton from "../CopyButton";
+import { Flexbox } from "../Flex";
 import { getCodeLanguageDisplayName, getCodeLanguageFilename } from "./const";
 import MaterialFileTypeIcon from "../MaterialFileTypeIcon";
 import Text from "../Text";
 import LangSelect from "./LangSelect";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var HeaderLanguage = /*#__PURE__*/memo(function (_ref) {
   var allowChangeLanguage = _ref.allowChangeLanguage,
@@ -39,29 +38,29 @@ var HeaderLanguage = /*#__PURE__*/memo(function (_ref) {
     setLanguage = _ref.setLanguage,
     showLanguage = _ref.showLanguage;
   if (!showLanguage) return null;
-  return /*#__PURE__*/_jsx(Flexbox, {
+  if (allowChangeLanguage && !fileName) return /*#__PURE__*/_jsx(LangSelect, {
+    onSelect: setLanguage,
+    value: language.toLowerCase()
+  });
+  return /*#__PURE__*/_jsxs(Flexbox, {
     align: 'center',
     className: 'languageTitle',
     flex: 1,
     gap: 4,
     horizontal: true,
-    justify: 'center',
-    children: allowChangeLanguage && !fileName ? /*#__PURE__*/_jsx(LangSelect, {
-      onSelect: setLanguage,
-      value: language.toLowerCase()
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [icon || /*#__PURE__*/_jsx(MaterialFileTypeIcon, {
-        fallbackUnknownType: false,
-        filename: filetype,
-        size: 18,
-        type: 'file',
-        variant: 'raw'
-      }), /*#__PURE__*/_jsx(Text, {
-        ellipsis: true,
-        fontSize: 13,
-        children: displayName
-      })]
-    })
+    justify: 'flex-start',
+    paddingInline: 8,
+    children: [icon || /*#__PURE__*/_jsx(MaterialFileTypeIcon, {
+      fallbackUnknownType: false,
+      filename: filetype,
+      size: 18,
+      type: 'file',
+      variant: 'raw'
+    }), /*#__PURE__*/_jsx(Text, {
+      ellipsis: true,
+      fontSize: 13,
+      children: displayName
+    })]
   });
 }, function (prev, next) {
   return prev.allowChangeLanguage === next.allowChangeLanguage && prev.displayName === next.displayName && prev.fileName === next.fileName && prev.filetype === next.filetype && prev.icon === next.icon && prev.language === next.language && prev.setLanguage === next.setLanguage && prev.showLanguage === next.showLanguage;
@@ -72,6 +71,8 @@ export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref2) {
     setLanguage = _ref2.setLanguage,
     showLanguage = _ref2.showLanguage,
     className = _ref2.className,
+    classNames = _ref2.classNames,
+    customStyles = _ref2.styles,
     style = _ref2.style,
     _ref2$allowChangeLang = _ref2.allowChangeLanguage,
     allowChangeLanguage = _ref2$allowChangeLang === void 0 ? false : _ref2$allowChangeLang,
@@ -196,16 +197,14 @@ export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref2) {
   }, rest), {}, {
     children: [/*#__PURE__*/_jsxs(Flexbox, {
       align: 'center',
-      className: headerVariants({
+      className: cx(headerVariants({
         variant: variant
-      }),
+      }), classNames === null || classNames === void 0 ? void 0 : classNames.header),
       horizontal: true,
       justify: 'space-between',
-      children: [/*#__PURE__*/_jsx(ActionIcon, {
-        icon: expand ? ChevronDown : ChevronRight,
-        onClick: handleToggleExpand,
-        size: 'small'
-      }), /*#__PURE__*/_jsx(HeaderLanguage, {
+      onClick: handleToggleExpand,
+      style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.header,
+      children: [/*#__PURE__*/_jsx(HeaderLanguage, {
         allowChangeLanguage: allowChangeLanguage,
         displayName: displayName,
         fileName: fileName,
@@ -214,17 +213,32 @@ export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref2) {
         language: language,
         setLanguage: setLanguage,
         showLanguage: showLanguage
-      }), /*#__PURE__*/_jsx(Flexbox, {
+      }), /*#__PURE__*/_jsxs(Flexbox, {
         align: 'center',
         flex: 'none',
         gap: 4,
         horizontal: true,
-        children: actions
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        },
+        children: [/*#__PURE__*/_jsx(Flexbox, {
+          align: 'center',
+          className: 'panel-actions',
+          flex: 'none',
+          gap: 4,
+          horizontal: true,
+          children: actions
+        }), /*#__PURE__*/_jsx(ActionIcon, {
+          icon: expand ? ChevronDown : ChevronRight,
+          onClick: handleToggleExpand,
+          size: 'small'
+        })]
       })]
     }), /*#__PURE__*/_jsx(Flexbox, {
-      className: bodyVariants({
+      className: cx(bodyVariants({
         expand: expand
-      }),
+      }), classNames === null || classNames === void 0 ? void 0 : classNames.body),
+      style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.body,
       children: children
     })]
   }));

package/es/Highlighter/Highlighter.js

@@ -1,6 +1,6 @@
 'use client';
 
-var _excluded = ["animated", "fullFeatured", "actionIconSize", "children", "language", "className", "copyable", "showLanguage", "variant", "shadow", "wrap", "bodyRender", "actionsRender", "enableTransformer", "theme", "icon", "fileName", "allowChangeLanguage", "defaultExpand"];
+var _excluded = ["animated", "fullFeatured", "actionIconSize", "children", "language", "className", "classNames", "styles", "copyable", "showLanguage", "variant", "shadow", "wrap", "bodyRender", "actionsRender", "enableTransformer", "theme", "icon", "fileName", "allowChangeLanguage", "defaultExpand"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -17,8 +17,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { cva } from 'class-variance-authority';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import CopyButton from "../CopyButton";
+import { Flexbox } from "../Flex";
 import { getCodeLanguageDisplayName } from "./const";
 import Tag from "../Tag";
 import FullFeatured from "./FullFeatured";
@@ -34,6 +34,8 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     _ref$language = _ref.language,
     language = _ref$language === void 0 ? 'markdown' : _ref$language,
     className = _ref.className,
+    classNames = _ref.classNames,
+    customStyles = _ref.styles,
     _ref$copyable = _ref.copyable,
     copyable = _ref$copyable === void 0 ? true : _ref$copyable,
     _ref$showLanguage = _ref.showLanguage,
@@ -107,7 +109,10 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     return /*#__PURE__*/_jsx(CopyButton, {
       content: getCopyContent,
       glass: true,
-      size: actionIconSize
+      size: actionIconSize || {
+        blockSize: 28,
+        size: 16
+      }
     });
   }, [actionIconSize, copyable, getCopyContent]);
   var actions = useMemo(function () {
@@ -123,13 +128,17 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
   var originalBody = useMemo(function () {
     return /*#__PURE__*/_jsx(SyntaxHighlighter, {
       animated: animated,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.content,
       enableTransformer: enableTransformer,
       language: lang === null || lang === void 0 ? void 0 : lang.toLowerCase(),
+      style: _objectSpread({
+        height: '100%'
+      }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content),
       theme: theme,
       variant: variant,
       children: tirmedChildren
     });
-  }, [animated, enableTransformer, lang, theme, tirmedChildren, variant]);
+  }, [animated, enableTransformer, lang, theme, tirmedChildren, variant, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content]);
   var displayName = useMemo(function () {
     if (fileName) return fileName;
     return getCodeLanguageDisplayName(language);
@@ -146,6 +155,7 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     actionsRender: actionsRender,
     allowChangeLanguage: allowChangeLanguage,
     className: className,
+    classNames: classNames,
     content: tirmedChildren,
     copyable: copyable,
     defaultExpand: defaultExpand,
@@ -155,6 +165,7 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     setLanguage: setLang,
     shadow: shadow,
     showLanguage: showLanguage,
+    styles: customStyles,
     variant: variant,
     wrap: wrap
   }, rest), {}, {

package/es/Highlighter/LangSelect.js

@@ -15,17 +15,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
 import { Select } from 'antd';
 import { memo, useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import { bundledLanguagesInfo } from 'shiki';
+import { Flexbox } from "../Flex";
 import MaterialFileTypeIcon from "../MaterialFileTypeIcon";
 import Text from "../Text";
-import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var LangSelect = /*#__PURE__*/memo(function (_ref) {
   var rest = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   var options = useMemo(function () {
     return [{
       aliases: ['text', 'txt'],
@@ -74,10 +71,17 @@ export var LangSelect = /*#__PURE__*/memo(function (_ref) {
     })));
   }, []);
   return /*#__PURE__*/_jsx(Select, _objectSpread({
-    className: styles.select,
+    className: 'languageTitle',
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
     options: options,
     showSearch: true,
     size: 'small',
+    style: {
+      maxWidth: 240,
+      width: '100%'
+    },
     suffixIcon: false,
     variant: 'borderless'
   }, rest));

package/es/Highlighter/style.d.ts

@@ -13,7 +13,6 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
     nowrap: import("antd-style").SerializedStyles;
     outlined: string;
     root: string;
-    select: import("antd-style").SerializedStyles;
     shadow: string;
     wrap: import("antd-style").SerializedStyles;
 }>;

package/es/Highlighter/style.js

@@ -17,16 +17,15 @@ export var useStyles = createStyles(function (_ref) {
     bodyExpand: cx(expandCls),
     bodyRoot: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      overflow: hidden;\n      transition: opacity 0.25s ", ";\n    "])), token.motionEaseOut),
     borderless: stylish.variantBorderlessWithoutHover,
-    filled: stylish.variantFilledWithoutHover,
-    headerBorderless: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding-inline: 0;\n    "]))),
-    headerFilled: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      background: ", ";\n    "])), token.colorFillQuaternary),
-    headerOutlined: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      & + .", " {\n        border-block-start: 1px solid ", ";\n      }\n    "])), expandCls, token.colorFillQuaternary),
-    headerRoot: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      position: relative;\n      padding: 4px;\n\n      .languageTitle {\n        opacity: 0.5;\n        transition: opacity 0.2s ", ";\n      }\n\n      &:hover {\n        .languageTitle {\n          opacity: 1;\n        }\n      }\n    "])), token.motionEaseInOut),
-    lang: cx(langHoverCls, stylish.blur, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 2;\n        inset-block-end: 8px;\n        inset-inline-end: 8px;\n\n        font-family: ", ";\n        color: ", ";\n\n        opacity: 0;\n        background: ", ";\n\n        transition: opacity 0.1s;\n      "])), token.fontFamilyCode, token.colorTextSecondary, token.colorFillQuaternary)),
-    nowrap: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      pre,\n      code {\n        text-wrap: nowrap;\n      }\n    "]))),
+    filled: cx(stylish.variantFilledWithoutHover, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        background: ", ";\n      "])), token.colorFillQuaternary)),
+    headerBorderless: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      padding-inline: 0;\n    "]))),
+    headerFilled: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      background: transparent;\n    "]))),
+    headerOutlined: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      & + .", " {\n        border-block-start: 1px solid ", ";\n      }\n    "])), expandCls, token.colorFillQuaternary),
+    headerRoot: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      position: relative;\n      padding: 4px;\n    "]))),
+    lang: cx(langHoverCls, stylish.blur, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 2;\n        inset-block-end: 8px;\n        inset-inline-end: 8px;\n\n        font-family: ", ";\n        color: ", ";\n\n        opacity: 0;\n        background: ", ";\n\n        transition: opacity 0.1s;\n      "])), token.fontFamilyCode, token.colorTextSecondary, token.colorFillQuaternary)),
+    nowrap: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      pre,\n      code {\n        text-wrap: nowrap;\n      }\n    "]))),
     outlined: stylish.variantOutlinedWithoutHover,
-    root: cx(prefix, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        position: relative;\n\n        overflow: hidden;\n\n        width: 100%;\n        border-radius: ", "px;\n\n        transition: background-color 100ms ", ";\n\n        &:hover {\n          .", " {\n            opacity: 1;\n          }\n\n          .", " {\n            opacity: 1;\n          }\n        }\n\n        code {\n          background: transparent !important;\n        }\n      "])), token.borderRadius, token.motionEaseOut, actionsHoverCls, langHoverCls)),
-    select: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      user-select: none;\n\n      position: absolute;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n\n      min-width: 100px;\n\n      font-size: 14px;\n      color: ", ";\n      text-align: center;\n    "])), token.colorTextDescription),
+    root: cx(prefix, css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        position: relative;\n\n        overflow: hidden;\n\n        width: 100%;\n        border-radius: ", "px;\n\n        transition: background-color 100ms ", ";\n\n        .languageTitle {\n          opacity: 0.5;\n          filter: grayscale(100%);\n          transition:\n            opacity,\n            grayscale 0.2s ", ";\n        }\n\n        .panel-actions {\n          opacity: 0;\n          transition: opacity 0.2s ", ";\n        }\n\n        &:hover {\n          .languageTitle {\n            opacity: 1;\n            filter: grayscale(0%);\n          }\n\n          .panel-actions {\n            opacity: 1;\n          }\n\n          .", " {\n            opacity: 1;\n          }\n\n          .", " {\n            opacity: 1;\n          }\n        }\n\n        pre {\n          height: 100%;\n          font-size: 12px;\n        }\n\n        code {\n          background: transparent !important;\n        }\n      "])), token.borderRadius, token.motionEaseOut, token.motionEaseInOut, token.motionEaseInOut, actionsHoverCls, langHoverCls)),
     shadow: stylish.shadow,
     wrap: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      pre,\n      code {\n        text-wrap: wrap;\n      }\n    "])))
   };

package/es/Highlighter/type.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode, type Ref } from 'react';
-import { FlexboxProps } from 'react-layout-kit';
+import { CSSProperties, ReactNode, type Ref } from 'react';
 import type { BuiltinTheme } from 'shiki';
 import type { ActionIconProps } from "../ActionIcon";
+import { FlexboxProps } from "../Flex";
 import { DivProps } from "../types";
 export interface SyntaxHighlighterProps extends DivProps {
     animated?: boolean;
@@ -29,6 +29,11 @@ export interface HighlighterProps extends Omit<FlexboxProps, 'children' | 'wrap'
         originalNode: ReactNode;
     }) => ReactNode;
     children: string;
+    classNames?: {
+        body?: string;
+        content?: string;
+        header?: string;
+    };
     copyable?: boolean;
     defaultExpand?: boolean;
     enableTransformer?: boolean;
@@ -38,6 +43,11 @@ export interface HighlighterProps extends Omit<FlexboxProps, 'children' | 'wrap'
     language: string;
     shadow?: boolean;
     showLanguage?: boolean;
+    styles?: {
+        body?: CSSProperties;
+        content?: CSSProperties;
+        header?: CSSProperties;
+    };
     theme?: 'lobe-theme' | BuiltinTheme;
     variant?: 'filled' | 'outlined' | 'borderless';
     wrap?: boolean;

package/es/Hotkey/Hotkey.js

@@ -18,7 +18,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { cva } from 'class-variance-authority';
 import { ArrowBigUpIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpIcon, ChevronUpIcon, Command, CornerDownLeftIcon, Delete, Grid2X2Icon, MouseIcon, Option, SpaceIcon } from 'lucide-react';
 import { memo, useEffect, useMemo, useState } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from "../Flex";
 import Icon from "../Icon";
 import LeftClickIcon from "../icons/lucideExtra/LeftClickIcon";
 import LeftDoubleClickIcon from "../icons/lucideExtra/LeftDoubleClickIcon";

package/es/Hotkey/type.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import type { FlexboxProps } from 'react-layout-kit';
+import type { FlexboxProps } from "../Flex";
 export interface HotkeyProps extends Omit<FlexboxProps, 'children'> {
     classNames?: {
         kbdClassName?: string;

package/es/Hotkey/utils.d.ts

@@ -1,4 +1,4 @@
-export declare const NORMATIVE_MODIFIER: ("shift" | "meta" | "alt" | "control" | "ctrl" | "mod")[];
+export declare const NORMATIVE_MODIFIER: ("meta" | "alt" | "shift" | "control" | "ctrl" | "mod")[];
 export declare const splitKeysByPlus: (keys: string) => string[];
 export declare const startCase: (str: string) => string;
 export declare const checkIsAppleDevice: (isApple?: boolean) => boolean;

package/es/HotkeyInput/HotkeyInput.js

@@ -18,9 +18,9 @@ import { isEqual } from 'lodash-es';
 import { Undo2Icon } from 'lucide-react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useHotkeys, useRecordHotkeys } from 'react-hotkeys-hook';
-import { Flexbox } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
 import ActionIcon from "../ActionIcon";
+import { Flexbox } from "../Flex";
 import Hotkey from "../Hotkey";
 import { NORMATIVE_MODIFIER, checkIsAppleDevice, splitKeysByPlus } from "../Hotkey/utils";
 import { useStyles } from "./style";

package/es/Image/Image.js

@@ -12,7 +12,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { Image as AntImage, Skeleton } from 'antd';
 import { cva } from 'class-variance-authority';
 import { memo, useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox } from "../Flex";
 import usePreview from "./components/usePreview";
 import { FALLBACK_DARK, FALLBACK_LIGHT, useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/Image/components/Toolbar.js

@@ -1,7 +1,7 @@
 import { FlipHorizontal, FlipVertical, RotateCcw, RotateCw, ZoomIn, ZoomOut } from 'lucide-react';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import ActionIcon from "../../ActionIcon";
+import { Flexbox } from "../../Flex";
 import { useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -25,28 +25,22 @@ var Toolbar = /*#__PURE__*/memo(function (_ref) {
     gap: 4,
     horizontal: true,
     children: [/*#__PURE__*/_jsx(ActionIcon, {
-      color: '#fff',
       icon: FlipHorizontal,
       onClick: onFlipX
     }), /*#__PURE__*/_jsx(ActionIcon, {
-      color: '#fff',
       icon: FlipVertical,
       onClick: onFlipY
     }), /*#__PURE__*/_jsx(ActionIcon, {
-      color: '#fff',
       icon: RotateCcw,
       onClick: onRotateLeft
     }), /*#__PURE__*/_jsx(ActionIcon, {
-      color: '#fff',
       icon: RotateCw,
       onClick: onRotateRight
     }), /*#__PURE__*/_jsx(ActionIcon, {
-      color: '#fff',
       disabled: scale === minScale,
       icon: ZoomOut,
       onClick: onZoomOut
     }), /*#__PURE__*/_jsx(ActionIcon, {
-      color: '#fff',
       disabled: scale === maxScale,
       icon: ZoomIn,
       onClick: onZoomIn

package/es/Image/components/usePreview.js

@@ -55,9 +55,6 @@ export var usePreview = function usePreview(props) {
         if (toolbarRender) return toolbarRender(originalNode, info);
         return originalNode;
       },
-      classNames: {
-        root: cx(styles.preview, rootClassName)
-      },
       closeIcon: /*#__PURE__*/_jsx(Icon, {
         color: '#fff',
         icon: X
@@ -79,6 +76,7 @@ export var usePreview = function usePreview(props) {
         // 向后兼容旧的 onVisibleChange
         onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(open, !open);
       },
+      rootClassName: cx(styles.preview, rootClassName),
       styles: {
         mask: {
           backdropFilter: 'blur(8px)'

package/es/Image/style.js

@@ -6,7 +6,8 @@ export var useStyles = createStyles(function (_ref) {
   var cx = _ref.cx,
     css = _ref.css,
     token = _ref.token,
-    stylish = _ref.stylish;
+    stylish = _ref.stylish,
+    prefixCls = _ref.prefixCls;
   var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     alwaysShowActions = _ref2.alwaysShowActions;
   var actions = cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: ", ";\n    "])), alwaysShowActions ? 1 : 0));
@@ -17,9 +18,9 @@ export var useStyles = createStyles(function (_ref) {
     image: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: auto;\n        height: auto;\n      "]))),
     mask: cx(stylish.blur, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          backdrop-filter: blur(8px);\n        "])))),
     outlined: stylish.variantOutlinedWithoutHover,
-    preview: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        img {\n          width: 100%;\n        }\n      "]))),
-    root: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        cursor: pointer;\n        user-select: none;\n\n        position: relative;\n\n        overflow: hidden;\n\n        width: fit-content;\n        border-radius: ", "px;\n\n        line-height: 1;\n\n        &:hover {\n          .", " {\n            opacity: 1;\n          }\n        }\n      "])), token.borderRadius, actions),
-    toolbar: cx(stylish.blur, stylish.variantOutlinedWithoutHover, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          padding: 4px;\n          border-color: ", ";\n          border-radius: ", "px;\n          background: ", ";\n        "])), token.colorFillTertiary, token.borderRadiusLG, rgba(token.colorBgMask, 0.5))),
+    preview: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        .", "-image-preview-mask {\n          background: ", ";\n        }\n\n        img {\n          width: 100%;\n        }\n      "])), prefixCls, rgba(token.colorBgLayout, 0.9)),
+    root: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        cursor: pointer;\n        user-select: none;\n\n        position: relative;\n\n        overflow: hidden;\n\n        width: fit-content;\n        border-radius: ", "px;\n\n        line-height: 1;\n\n        .", "-image-cover {\n          display: none !important;\n        }\n\n        &:hover {\n          .", " {\n            opacity: 1;\n          }\n        }\n      "])), token.borderRadius, prefixCls, actions),
+    toolbar: cx(stylish.blur, stylish.variantOutlinedWithoutHover, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          padding: 4px;\n          border-color: ", ";\n          border-radius: ", "px;\n          background: ", ";\n        "])), token.colorFillTertiary, token.borderRadiusLG, rgba(token.colorBgContainer, 0.5))),
     wrapper: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n        overflow: hidden;\n        max-width: 100%;\n        height: auto;\n      "])))
   };
 });

package/es/ImageSelect/ImageSelect.js

@@ -16,8 +16,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
+import { Flexbox } from "../Flex";
 import Icon from "../Icon";
 import Img from "../Img";
 import { useStyles } from "./styles";

package/es/ImageSelect/type.d.ts

@@ -1,6 +1,6 @@
 import type { SelectProps } from 'antd';
 import type { CSSProperties, ReactNode, Ref } from 'react';
-import type { FlexboxProps } from 'react-layout-kit';
+import type { FlexboxProps } from "../Flex";
 import type { IconProps } from "../Icon";
 export interface ImageSelectItem {
     alt?: string;

package/es/List/List.js

@@ -14,7 +14,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { cx } from 'antd-style';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox } from "../Flex";
 import ListItem from "./ListItem";
 import { jsx as _jsx } from "react/jsx-runtime";
 var List = /*#__PURE__*/memo(function (_ref) {

package/es/List/ListItem/index.js

@@ -11,7 +11,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Loader2, MessageSquare } from 'lucide-react';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox } from "../../Flex";
 import Icon from "../../Icon";
 import Text from "../../Text";
 import { useStyles } from "./style";

package/es/List/type.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactNode, Ref } from 'react';
-import type { FlexboxProps } from 'react-layout-kit';
+import type { FlexboxProps } from "../Flex";
 export interface ListItemProps extends Omit<FlexboxProps, 'title'> {
     actions?: ReactNode;
     active?: boolean;

package/es/Markdown/components/Footnotes.js

@@ -11,9 +11,9 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { memo, useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import A from "../../A";
 import Block from "../../Block";
+import { Flexbox } from "../../Flex";
 import Text from "../../Text";
 import SearchResultCards from "./SearchResultCards";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/Markdown/components/SearchResultCards/SearchResultCard.js

@@ -16,9 +16,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { memo, useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import A from "../../../A";
 import Block from "../../../Block";
+import { Flexbox } from "../../../Flex";
 import Img from "../../../Img";
 import Text from "../../../Text";
 import { useStyles } from "./style";

package/es/Markdown/components/SearchResultCards/index.d.ts

@@ -1,5 +1,5 @@
 import { Ref } from 'react';
-import { FlexboxProps } from 'react-layout-kit';
+import { FlexboxProps } from "../../../Flex";
 export interface SearchResultItem {
     alt?: string;
     summary?: string;

package/es/MaskShadow/MaskShadow.js

@@ -11,7 +11,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { cva } from 'class-variance-authority';
 import { memo, useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox } from "../Flex";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var MaskShadow = /*#__PURE__*/memo(function (_ref) {

package/es/MaskShadow/type.d.ts

@@ -1,4 +1,4 @@
-import type { FlexboxProps } from 'react-layout-kit';
+import type { FlexboxProps } from "../Flex";
 export interface MaskShadowProps extends FlexboxProps {
     position?: 'top' | 'bottom' | 'left' | 'right';
     size?: number;

package/es/MaterialFileTypeIcon/MaterialFileTypeIcon.js

@@ -10,9 +10,9 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { memo, useMemo } from 'react';
-import { Center } from 'react-layout-kit';
 import { useCdnFn } from "../ConfigProvider";
 import FileTypeIcon from "../FileTypeIcon";
+import { Center } from "../Flex";
 import Img from "../Img";
 import { getIconUrlForDirectoryPath, getIconUrlForFilePath } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";