@lobehub/ui 3.3.1 → 3.3.3

package/es/Flex/style.css

@@ -1,20 +1,36 @@
 .lobe-flex {
+  /* Define defaults on the element itself to avoid CSS variable inheritance leaking to nested Flex */
+  --lobe-flex: 0 1 auto;
+  --lobe-flex-direction: column;
+  --lobe-flex-wrap: nowrap;
+  --lobe-flex-justify: flex-start;
+  --lobe-flex-align: stretch;
+  --lobe-flex-width: auto;
+  --lobe-flex-height: auto;
+  --lobe-flex-padding: 0;
+  /* Keep padding-inline/block aligned with padding by default, and prevent inheriting from parent */
+  --lobe-flex-padding-inline: var(--lobe-flex-padding);
+  --lobe-flex-padding-block: var(--lobe-flex-padding);
+  --lobe-flex-gap: 0;
+
   display: flex;
-  flex: var(--lobe-flex, 0 1 auto);
-  flex-direction: var(--lobe-flex-direction, column);
-  flex-wrap: var(--lobe-flex-wrap, nowrap);
-  justify-content: var(--lobe-flex-justify, flex-start);
-  align-items: var(--lobe-flex-align, stretch);
-  width: var(--lobe-flex-width, auto);
-  height: var(--lobe-flex-height, auto);
-  padding: var(--lobe-flex-padding, 0);
-  padding-inline: var(--lobe-flex-padding-inline, initial);
-  padding-block: var(--lobe-flex-padding-block, initial);
-  gap: var(--lobe-flex-gap, 0);
+
+  flex: var(--lobe-flex);
+  flex-direction: var(--lobe-flex-direction);
+  flex-wrap: var(--lobe-flex-wrap);
+  justify-content: var(--lobe-flex-justify);
+  align-items: var(--lobe-flex-align);
+
+  width: var(--lobe-flex-width);
+  height: var(--lobe-flex-height);
+
+  padding: var(--lobe-flex-padding);
+  padding-inline: var(--lobe-flex-padding-inline);
+  padding-block: var(--lobe-flex-padding-block);
+
+  gap: var(--lobe-flex-gap);
 }
 
 .lobe-flex--hidden {
   display: none;
 }
-
-

package/es/FluentEmoji/FluentEmoji.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { FluentEmojiProps } from './type';
-declare const FluentEmoji: import("react").NamedExoticComponent<FluentEmojiProps>;
+declare const FluentEmoji: FC<FluentEmojiProps>;
 export default FluentEmoji;

package/es/FluentEmoji/FluentEmoji.js

@@ -15,14 +15,14 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 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, useState } from 'react';
-import { Center } from 'react-layout-kit';
+import { useMemo, useState } from 'react';
 import { useCdnFn } from "../ConfigProvider";
+import { Center } from "../Flex";
 import Img from "../Img";
 import { useStyles } from "./style";
 import { genEmojiUrl } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
-var FluentEmoji = /*#__PURE__*/memo(function (_ref) {
+var FluentEmoji = function FluentEmoji(_ref) {
   var emoji = _ref.emoji,
     className = _ref.className,
     style = _ref.style,
@@ -73,6 +73,6 @@ var FluentEmoji = /*#__PURE__*/memo(function (_ref) {
     unoptimized: unoptimized,
     width: size
   }, rest));
-});
+};
 FluentEmoji.displayName = 'FluentEmoji';
 export default FluentEmoji;

package/es/Footer/Footer.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 RcFooter from 'rc-footer';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox } from "../Flex";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/es/Footer/type.d.ts

@@ -1,6 +1,6 @@
 import type { FooterProps as RcProps } from 'rc-footer';
 import type { ReactNode } from 'react';
-import type { FlexboxProps } from 'react-layout-kit';
+import type { FlexboxProps } from "../Flex";
 export interface FooterProps extends FlexboxProps {
     bottom?: ReactNode;
     columns: RcProps['columns'];

package/es/Form/components/FormDivider.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { FormDividerProps } from '../type';
-declare const FormDivider: import("react").NamedExoticComponent<FormDividerProps>;
+declare const FormDivider: FC<FormDividerProps>;
 export default FormDivider;

package/es/Form/components/FormDivider.js

@@ -13,7 +13,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { Divider as AntDivider } from 'antd';
 import { createStyles } from 'antd-style';
-import { memo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
@@ -21,7 +20,7 @@ var useStyles = createStyles(function (_ref) {
     root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      margin: 0;\n      opacity: 0.66;\n    "])))
   };
 });
-var FormDivider = /*#__PURE__*/memo(function (_ref2) {
+var FormDivider = function FormDivider(_ref2) {
   var _ref2$visible = _ref2.visible,
     visible = _ref2$visible === void 0 ? true : _ref2$visible,
     style = _ref2.style,
@@ -36,6 +35,6 @@ var FormDivider = /*#__PURE__*/memo(function (_ref2) {
       opacity: visible ? 1 : 0
     }, style)
   }, rest));
-});
+};
 FormDivider.displayName = 'FormDivider';
 export default FormDivider;

package/es/Form/components/FormFlatGroup.js

@@ -12,7 +12,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { useResponsive } from 'antd-style';
 import { cva } from 'class-variance-authority';
 import { memo, useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox } from "../../Flex";
 import { useFlatGroupStyles as useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var FormFlatGroup = /*#__PURE__*/memo(function (_ref) {

package/es/Form/components/FormFooter.d.ts

@@ -1,3 +1,4 @@
-/// <reference types="react" />
-declare const FormFooter: import("react").NamedExoticComponent<import("../type").FormFooterProps>;
+import { type FC } from 'react';
+import type { FormFooterProps } from '../type';
+declare const FormFooter: FC<FormFooterProps>;
 export default FormFooter;

package/es/Form/components/FormFooter.js

@@ -9,11 +9,10 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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 { Flexbox } from "../../Flex";
 import { useFooterStyles as useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var FormFooter = /*#__PURE__*/memo(function (_ref) {
+var FormFooter = function FormFooter(_ref) {
   var className = _ref.className,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -29,6 +28,6 @@ var FormFooter = /*#__PURE__*/memo(function (_ref) {
   }, rest), {}, {
     children: children
   }));
-});
+};
 FormFooter.displayName = 'FormFooter';
 export default FormFooter;

package/es/Form/components/FormGroup.js

@@ -13,8 +13,8 @@ import { useResponsive } from 'antd-style';
 import { cva } from 'class-variance-authority';
 import { isUndefined } from 'lodash-es';
 import { memo, useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import Collapse from "../../Collapse";
+import { Flexbox } from "../../Flex";
 import Icon from "../../Icon";
 import { useGroupStyles as useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/Form/components/FormSubmitFooter.js

@@ -20,8 +20,8 @@ import isEqual from 'fast-deep-equal';
 import { InfoIcon } from 'lucide-react';
 import { motion } from 'motion/react';
 import { memo, useEffect, useMemo, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import Button from "../../Button";
+import { Flexbox } from "../../Flex";
 import Icon from "../../Icon";
 import { useSubmitFooterStyles as useStyles } from "../style";
 import { useFormContext } from "./FormProvider";

package/es/Form/components/FormTitle.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { FormTitleProps } from '../type';
-declare const FormTitle: import("react").NamedExoticComponent<FormTitleProps>;
+declare const FormTitle: FC<FormTitleProps>;
 export default FormTitle;

package/es/Form/components/FormTitle.js

@@ -9,13 +9,12 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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 { Flexbox } from "../../Flex";
 import Tag from "../../Tag";
 import { useTitleStyles as useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var FormTitle = /*#__PURE__*/memo(function (_ref) {
+var FormTitle = function FormTitle(_ref) {
   var tag = _ref.tag,
     title = _ref.title,
     desc = _ref.desc,
@@ -53,6 +52,6 @@ var FormTitle = /*#__PURE__*/memo(function (_ref) {
       })]
     })]
   }));
-});
+};
 FormTitle.displayName = 'FormTitle';
 export default FormTitle;

package/es/Form/type.d.ts

@@ -1,9 +1,9 @@
 import type { FormProps as AntFormProps, DividerProps, FormInstance } from 'antd';
 import { FormItemProps as AntdFormItemProps } from 'antd/es/form/FormItem';
 import { CSSProperties, ReactNode, Ref } from 'react';
-import { FlexboxProps } from 'react-layout-kit';
 import type { ButtonProps } from "../Button";
 import type { CollapseProps } from "../Collapse";
+import { FlexboxProps } from "../Flex";
 import type { IconProps } from "../Icon";
 import type { TagProps } from "../Tag";
 import type { DivProps } from "../types";

package/es/FormModal/FormModal.js

@@ -13,8 +13,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 { useResponsive } from 'antd-style';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import Button from "../Button";
+import { Flexbox } from "../Flex";
 import Form from "../Form";
 import Modal from "../Modal";
 import { useStyles } from "./style";

package/es/Grid/Grid.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { GridProps } from './type';
-declare const Grid: import("react").NamedExoticComponent<GridProps>;
+declare const Grid: FC<GridProps>;
 export default Grid;

package/es/Grid/Grid.js

@@ -9,11 +9,10 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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 { Flexbox } from "../Flex";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var Grid = /*#__PURE__*/memo(function (_ref) {
+var Grid = function Grid(_ref) {
   var className = _ref.className,
     _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? '1em' : _ref$gap,
@@ -38,6 +37,6 @@ var Grid = /*#__PURE__*/memo(function (_ref) {
   }, rest), {}, {
     children: children
   }));
-});
+};
 Grid.displayName = 'Grid';
 export default Grid;

package/es/Grid/type.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'react';
-import type { FlexboxProps } from 'react-layout-kit';
+import type { FlexboxProps } from "../Flex";
 export interface GridProps extends Omit<FlexboxProps, 'gap'> {
     gap?: string | number;
     maxItemWidth?: string | number;

package/es/GroupAvatar/GroupAvatar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { GroupAvatarProps } from './type';
-declare const GroupAvatar: import("react").NamedExoticComponent<GroupAvatarProps>;
+declare const GroupAvatar: FC<GroupAvatarProps>;
 export default GroupAvatar;

package/es/GroupAvatar/GroupAvatar.js

@@ -10,13 +10,13 @@ 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 { cva } from 'class-variance-authority';
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 import Avatar from "../Avatar";
 import Block from "../Block";
 import Grid from "../Grid";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var GroupAvatar = /*#__PURE__*/memo(function (_ref) {
+var GroupAvatar = function GroupAvatar(_ref) {
   var className = _ref.className,
     style = _ref.style,
     _ref$avatars = _ref.avatars,
@@ -26,9 +26,9 @@ var GroupAvatar = /*#__PURE__*/memo(function (_ref) {
     _ref$grid = _ref.grid,
     grid = _ref$grid === void 0 ? 2 : _ref$grid,
     _ref$cornerShape = _ref.cornerShape,
-    cornerShape = _ref$cornerShape === void 0 ? 'squircle' : _ref$cornerShape,
+    cornerShape = _ref$cornerShape === void 0 ? 'square' : _ref$cornerShape,
     _ref$avatarShape = _ref.avatarShape,
-    avatarShape = _ref$avatarShape === void 0 ? 'circle' : _ref$avatarShape,
+    avatarShape = _ref$avatarShape === void 0 ? 'square' : _ref$avatarShape,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
@@ -98,5 +98,5 @@ var GroupAvatar = /*#__PURE__*/memo(function (_ref) {
       })
     })
   }));
-});
+};
 export default GroupAvatar;

package/es/GuideCard/GuideCard.js

@@ -18,8 +18,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { cva } from 'class-variance-authority';
 import { X } from 'lucide-react';
 import { memo, useMemo, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import ActionIcon from "../ActionIcon";
+import { Flexbox } from "../Flex";
 import Img from "../Img";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/GuideCard/type.d.ts

@@ -1,7 +1,7 @@
 import type { ImageProps } from 'antd';
 import type { CSSProperties, ReactNode, Ref } from 'react';
-import type { FlexboxProps } from 'react-layout-kit';
 import type { ActionIconProps } from "../ActionIcon";
+import type { FlexboxProps } from "../Flex";
 import type { ImgProps } from "../types";
 export interface GuideCardProps extends Omit<FlexboxProps, 'title'> {
     afterClose?: () => void;

package/es/Header/Header.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 { useResponsive } from 'antd-style';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox } from "../Flex";
 import { useStyles } from "./style";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/Header/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 HeaderProps extends FlexboxProps {
     actions?: ReactNode;
     actionsClassName?: string;

package/es/Highlighter/FullFeatured.js

@@ -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;
@@ -203,12 +202,9 @@ export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref2) {
       }), classNames === null || classNames === void 0 ? void 0 : classNames.header),
       horizontal: true,
       justify: 'space-between',
+      onClick: handleToggleExpand,
       style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.header,
-      children: [/*#__PURE__*/_jsx(ActionIcon, {
-        icon: expand ? ChevronDown : ChevronRight,
-        onClick: handleToggleExpand,
-        size: 'small'
-      }), /*#__PURE__*/_jsx(HeaderLanguage, {
+      children: [/*#__PURE__*/_jsx(HeaderLanguage, {
         allowChangeLanguage: allowChangeLanguage,
         displayName: displayName,
         fileName: fileName,
@@ -217,12 +213,26 @@ 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: cx(bodyVariants({

package/es/Highlighter/Highlighter.js

@@ -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";
@@ -109,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 () {

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        pre {\n          height: 100%;\n          font-size: 12px;\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 { CSSProperties, ReactNode, type Ref } from 'react';
-import { FlexboxProps } from 'react-layout-kit';
 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;

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;