@lobehub/ui 1.121.0 → 1.122.0

package/es/ActionIcon/index.js

@@ -5,6 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 import { Loader2 } from 'lucide-react';
 import { forwardRef, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import Icon from "../Icon";
 import Spotlight from "../Spotlight";
 import Tooltip from "../Tooltip";
@@ -65,8 +66,10 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, iconProps), {}, {
     spin: true
   }));
-  var actionIconBlock = /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+  var actionIconBlock = /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    align: 'center',
     className: cx(styles.block, disable ? styles.disabled : styles.normal, className),
+    justify: 'center',
     onClick: loading || disable ? undefined : onClick,
     ref: ref,
     style: _objectSpread({

package/es/ActionIcon/style.js

@@ -9,7 +9,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var active = _ref2.active,
     glass = _ref2.glass;
   return {
-    block: cx(glass && stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex: none;\n          align-items: center;\n          justify-content: center;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition:\n            color 600ms ", ",\n            scale 400ms ", ",\n            background-color 100ms ", ";\n        "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, token.motionEaseOut)),
+    block: cx(glass && stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: relative;\n\n          flex: none;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition:\n            color 600ms ", ",\n            scale 400ms ", ",\n            background-color 100ms ", ";\n        "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, token.motionEaseOut)),
     disabled: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        cursor: not-allowed;\n        opacity: 0.5;\n      "]))),
     icon: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        transition: scale 400ms ", ";\n\n        &:active {\n          scale: 0.8;\n        }\n      "])), token.motionEaseOut),
     normal: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        cursor: pointer;\n\n        &:hover {\n          color: ", ";\n          background-color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n          background-color: ", ";\n        }\n      "])), token.colorText, token.colorFillSecondary, token.colorText, token.colorFill)

package/es/ActionIconGroup/index.js

@@ -7,6 +7,7 @@ import { ActionIcon, Icon, Spotlight } from "./..";
 import { Dropdown } from 'antd';
 import { MoreHorizontal } from 'lucide-react';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -25,13 +26,13 @@ var ActionIconGroup = /*#__PURE__*/memo(function (_ref) {
     onActionClick = _ref.onActionClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
-      direction: direction,
       type: type
     }),
     styles = _useStyles.styles;
   var tooltipsPlacement = placement || (direction === 'column' ? 'right' : 'top');
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: styles.container
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    className: styles.container,
+    horizontal: direction === 'row'
   }, rest), {}, {
     children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), (items === null || items === void 0 ? void 0 : items.length) > 0 && items.map(function (item) {
       return /*#__PURE__*/_jsx(ActionIcon, {

package/es/ActionIconGroup/style.d.ts

@@ -1,5 +1,4 @@
 export declare const useStyles: (props?: {
-    direction: 'row' | 'column';
     type: 'ghost' | 'block' | 'pure';
 } | undefined) => import("antd-style").ReturnStyles<{
     container: string;

package/es/ActionIconGroup/style.js

@@ -6,10 +6,9 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     token = _ref.token,
     stylish = _ref.stylish,
     cx = _ref.cx;
-  var direction = _ref2.direction,
-    type = _ref2.type;
+  var type = _ref2.type;
   var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), type === 'block' ? token.colorFillTertiary : token.colorFillQuaternary, type === 'block' ? 'transparent' : token.colorBorder);
   return {
-    container: cx(type !== 'pure' && typeStylish, stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n\n          padding: 2px;\n\n          border-radius: ", "px;\n        "])), direction, token.borderRadius))
+    container: cx(type !== 'pure' && typeStylish, stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n          padding: 2px;\n          border-radius: ", "px;\n        "])), token.borderRadius))
   };
 });

package/es/ColorScales/ScaleRow.js

@@ -1,6 +1,7 @@
 import { Space, message } from 'antd';
 import copy from 'copy-to-clipboard';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { alphaBg, useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -55,8 +56,11 @@ var ScaleRow = /*#__PURE__*/memo(function (_ref) {
         },
         style: style,
         title: color,
-        children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(Flexbox, {
+          align: 'center',
           className: styles.scaleItem,
+          horizontal: true,
+          justify: 'center',
           style: {
             backgroundColor: color
           }

package/es/ColorScales/index.js

@@ -1,5 +1,6 @@
 import { Space } from 'antd';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import ScaleRow from "./ScaleRow";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,8 +11,11 @@ var ColorScales = /*#__PURE__*/memo(function (_ref) {
     midHighLight = _ref.midHighLight;
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsx("div", {
-    className: styles.view,
+  return /*#__PURE__*/_jsx(Flexbox, {
+    align: 'center',
+    flex: 1,
+    horizontal: true,
+    justify: 'center',
     children: /*#__PURE__*/_jsx("div", {
       style: {
         padding: '8px 16px 32px 0'
@@ -21,8 +25,10 @@ var ColorScales = /*#__PURE__*/memo(function (_ref) {
         size: 2,
         children: [/*#__PURE__*/_jsxs(Space, {
           size: 2,
-          children: [/*#__PURE__*/_jsx("div", {
-            className: styles.scaleRowTitle
+          children: [/*#__PURE__*/_jsx(Flexbox, {
+            align: 'center',
+            className: styles.scaleRowTitle,
+            horizontal: true
           }, "scale-num"), Array.from({
             length: scale.light.length
           }).fill('').map(function (_, index) {
@@ -32,8 +38,11 @@ var ColorScales = /*#__PURE__*/memo(function (_ref) {
               className: styles.scaleBox,
               children: /*#__PURE__*/_jsx("div", {
                 className: styles.scaleBox,
-                children: /*#__PURE__*/_jsx("div", {
+                children: /*#__PURE__*/_jsx(Flexbox, {
+                  align: 'center',
                   className: styles.scaleItem,
+                  horizontal: true,
+                  justify: 'center',
                   style: {
                     fontWeight: isMidHighlight ? 700 : 400,
                     opacity: 0.5

package/es/ColorScales/style.d.ts

@@ -7,5 +7,4 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
     scaleItem: import("antd-style").SerializedStyles;
     scaleRowTitle: import("antd-style").SerializedStyles;
     text: import("antd-style").SerializedStyles;
-    view: import("antd-style").SerializedStyles;
 }>;

package/es/ColorScales/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { createStyles } from 'antd-style';
 export var alphaBg = {
   dark: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px',
@@ -10,9 +10,8 @@ export var useStyles = createStyles(function (_ref) {
     token = _ref.token;
   return {
     scaleBox: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    position: relative;\n\n    width: 48px;\n    height: 32px;\n\n    background-position:\n      0 0,\n      0 8px,\n      8px -8px,\n      -8px 0;\n    background-size: 16px 16px;\n\n    transition: scale 400ms ", ";\n\n    &:active {\n      scale: 0.8;\n    }\n  "])), token.motionEaseOut),
-    scaleItem: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 100%;\n    height: 100%;\n  "]))),
-    scaleRowTitle: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    width: 64px;\n    height: 32px;\n  "]))),
-    text: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    opacity: 0.5;\n  "]))),
-    view: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n  "])))
+    scaleItem: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n  "]))),
+    scaleRowTitle: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 64px;\n    height: 32px;\n  "]))),
+    text: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    opacity: 0.5;\n  "])))
   };
 });

package/es/ContextMenu/index.d.ts

@@ -1,18 +1,5 @@
-import { HTMLProps } from 'react';
-import { MenuItemType } from './types';
-export interface ContextMenuProps {
-    /**
-     * @description Container element for the context menu
-     */
-    container?: HTMLElement;
-    /**
-     * @description Items to be displayed in the context menu
-     */
-    items: MenuItemType[];
-    /**
-     * @description Label for the context menu
-     */
-    label?: string;
-}
-declare const ContextMenu: import("react").ForwardRefExoticComponent<Omit<ContextMenuProps & HTMLProps<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/// <reference types="react" />
+import { type DropdownProps } from 'antd';
+export type ContextMenuProps = DropdownProps;
+declare const ContextMenu: import("react").NamedExoticComponent<DropdownProps>;
 export default ContextMenu;

package/es/ContextMenu/index.js

@@ -1,255 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["items", "label", "container"];
 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; }
-import { FloatingFocusManager, FloatingNode, FloatingPortal, FloatingTree, autoUpdate, flip, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListNavigation, useMergeRefs, useRole, useTypeahead } from '@floating-ui/react';
-import { Divider } from 'antd';
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import MenuItem from "./MenuItem";
-import { useStyles } from "./style";
+import { Dropdown } from 'antd';
+import { memo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var MenuComponent = /*#__PURE__*/forwardRef(function (_ref, forwardedReference) {
-  var items = _ref.items,
-    label = _ref.label,
-    container = _ref.container,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    activeIndex = _useState4[0],
-    setActiveIndex = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    allowHover = _useState6[0],
-    setAllowHover = _useState6[1];
-  var listItemsReference = useRef([]);
-  var listContentReference = useRef(items.map(function (item) {
-    return item.label;
-  }));
-  var allowMouseUpCloseReference = useRef(false);
-  var tree = useFloatingTree();
-  var nodeId = useFloatingNodeId();
-  var parentId = useFloatingParentNodeId();
-  var isNested = parentId !== null;
-  var _useFloating = useFloating({
-      middleware: [offset({
-        alignmentAxis: isNested ? -4 : 0,
-        mainAxis: isNested ? 0 : 4
-      }), flip(), shift()],
-      nodeId: nodeId,
-      onOpenChange: setIsOpen,
-      open: isOpen,
-      placement: isNested ? 'right-start' : 'bottom-start',
-      whileElementsMounted: autoUpdate
-    }),
-    refs = _useFloating.refs,
-    context = _useFloating.context;
-  var hover = useHover(context, {
-    delay: {
-      open: 75
-    },
-    enabled: isNested && allowHover,
-    handleClose: safePolygon({
-      blockPointerEvents: true
-    })
-  });
-  var click = useClick(context, {
-    event: 'mousedown',
-    ignoreMouse: isNested,
-    toggle: !isNested || !allowHover
-  });
-  var role = useRole(context, {
-    role: 'menu'
-  });
-  var dismiss = useDismiss(context);
-  var listNavigation = useListNavigation(context, {
-    activeIndex: activeIndex,
-    listRef: listItemsReference,
-    nested: isNested,
-    onNavigate: setActiveIndex
-  });
-  var typeahead = useTypeahead(context, {
-    activeIndex: activeIndex,
-    enabled: isOpen,
-    listRef: listContentReference,
-    onMatch: isOpen ? setActiveIndex : undefined
-  });
-  var _useInteractions = useInteractions([hover, click, role, dismiss, listNavigation, typeahead]),
-    getReferenceProps = _useInteractions.getReferenceProps,
-    getFloatingProps = _useInteractions.getFloatingProps,
-    getItemProps = _useInteractions.getItemProps;
-
-  // Event emitter allows you to communicate across tree components.
-  // This effect closes all menus when an item gets clicked anywhere
-  // in the tree.
-  useEffect(function () {
-    if (!tree) return;
-    function handleTreeClick() {
-      setIsOpen(false);
-    }
-    function onSubMenuOpen(event) {
-      if (event.nodeId !== nodeId && event.parentId === parentId) {
-        setIsOpen(false);
-      }
-    }
-    tree.events.on('click', handleTreeClick);
-    tree.events.on('menuopen', onSubMenuOpen);
-    return function () {
-      tree.events.off('click', handleTreeClick);
-      tree.events.off('menuopen', onSubMenuOpen);
-    };
-  }, [tree, nodeId, parentId]);
-  useEffect(function () {
-    if (isOpen && tree) {
-      tree.events.emit('menuopen', {
-        nodeId: nodeId,
-        parentId: parentId
-      });
-    }
-  }, [tree, isOpen, nodeId, parentId]);
-
-  // Determine if "hover" logic can run based on the modality of input. This
-  // prevents unwanted focus synchronization as menus open and close with
-  // keyboard navigation and the cursor is resting on the menu.
-  useEffect(function () {
-    function onPointerMove(_ref2) {
-      var pointerType = _ref2.pointerType;
-      if (pointerType !== 'touch') {
-        setAllowHover(true);
-      }
-    }
-    function onKeyDown() {
-      setAllowHover(false);
-    }
-    window.addEventListener('pointermove', onPointerMove, {
-      capture: true,
-      once: true
-    });
-    window.addEventListener('keydown', onKeyDown, true);
-    return function () {
-      window.removeEventListener('pointermove', onPointerMove, {
-        capture: true
-      });
-      window.removeEventListener('keydown', onKeyDown, true);
-    };
-  }, [allowHover]);
-  useEffect(function () {
-    var timeout;
-    function onContextMenu(e) {
-      e.preventDefault();
-      refs.setPositionReference({
-        getBoundingClientRect: function getBoundingClientRect() {
-          return {
-            bottom: e.clientY,
-            height: 0,
-            left: e.clientX,
-            right: e.clientX,
-            top: e.clientY,
-            width: 0,
-            x: e.clientX,
-            y: e.clientY
-          };
-        }
-      });
-      setIsOpen(true);
-      clearTimeout(timeout);
-      allowMouseUpCloseReference.current = false;
-      timeout = window.setTimeout(function () {
-        allowMouseUpCloseReference.current = true;
-      }, 300);
-    }
-    function onMouseUp() {
-      if (allowMouseUpCloseReference.current) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener('contextmenu', onContextMenu);
-    document.addEventListener('mouseup', onMouseUp);
-    return function () {
-      document.removeEventListener('contextmenu', onContextMenu);
-      document.removeEventListener('mouseup', onMouseUp);
-      clearTimeout(timeout);
-    };
-  }, [refs, container]);
-  var renderMenuItem = useCallback(function (item, index) {
-    // 支持渲染分割线
-    if ('type' in item && item.type === 'divider') return /*#__PURE__*/_jsx(Divider, {
-      style: {
-        margin: '4px 12px',
-        minWidth: 'auto',
-        width: 'auto'
-      }
-    });
-    var data = item;
-    var props = _objectSpread({
-      active: activeIndex === index,
-      icon: data.icon,
-      key: data.key,
-      label: data.label,
-      shortcut: data.shortcut
-    }, getItemProps({
-      onClick: function onClick() {
-        var _data$onClick;
-        (_data$onClick = data.onClick) === null || _data$onClick === void 0 || _data$onClick.call(data);
-        setIsOpen(false);
-      },
-      onMouseUp: function onMouseUp() {
-        var _data$onClick2;
-        (_data$onClick2 = data.onClick) === null || _data$onClick2 === void 0 || _data$onClick2.call(data);
-        setIsOpen(false);
-      },
-      ref: function ref(node) {
-        listItemsReference.current[index] = node;
-      }
-    }));
-    if ('children' in item) {
-      return /*#__PURE__*/_jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
-        items: item.children
-      }));
-    }
-    return /*#__PURE__*/_jsx(MenuItem, _objectSpread({}, props));
-  }, [activeIndex]);
-  var referenceReference = useMergeRefs([refs.setReference, forwardedReference]);
-  return /*#__PURE__*/_jsxs(FloatingNode, {
-    id: nodeId,
-    children: [label ? /*#__PURE__*/_jsx(MenuItem, _objectSpread(_objectSpread({
-      label: label,
-      nested: isNested,
-      ref: referenceReference,
-      role: isNested ? 'menuitem' : 'menu'
-    }, rest), getReferenceProps({
-      onClick: function onClick(event) {
-        event.stopPropagation();
-      }
-    }))) : null, /*#__PURE__*/_jsx(FloatingPortal, {
-      children: isOpen && /*#__PURE__*/_jsx(FloatingFocusManager, {
-        context: context,
-        initialFocus: isNested ? -1 : 0,
-        modal: false,
-        returnFocus: !isNested,
-        children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-          className: styles.container,
-          ref: refs.setFloating
-        }, getFloatingProps()), {}, {
-          children: items === null || items === void 0 ? void 0 : items.map(renderMenuItem)
-        }))
-      })
-    })]
-  });
-});
-var ContextMenu = /*#__PURE__*/forwardRef(function (props, reference) {
-  return /*#__PURE__*/_jsx(FloatingTree, {
-    children: /*#__PURE__*/_jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
-      ref: reference
-    }))
-  });
+var ContextMenu = /*#__PURE__*/memo(function (props) {
+  return /*#__PURE__*/_jsx(Dropdown, _objectSpread({
+    trigger: ['contextMenu']
+  }, props));
 });
 export default ContextMenu;

package/es/DraggablePanel/components/DraggablePanelBody.js

@@ -4,6 +4,7 @@ var _excluded = ["className"];
 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; }
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var DraggablePanelBody = /*#__PURE__*/memo(function (_ref) {
@@ -12,8 +13,9 @@ var DraggablePanelBody = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsx("div", _objectSpread({
-    className: cx(styles.body, className)
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread({
+    className: cx(styles.body, className),
+    flex: 1
   }, rest));
 });
 export default DraggablePanelBody;

package/es/DraggablePanel/components/DraggablePanelContainer.js

@@ -4,6 +4,7 @@ var _excluded = ["className"];
 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; }
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var DraggablePanelContainer = /*#__PURE__*/memo(function (_ref) {
@@ -12,7 +13,7 @@ var DraggablePanelContainer = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsx("div", _objectSpread({
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread({
     className: cx(styles.container, className)
   }, rest));
 });

package/es/DraggablePanel/components/DraggablePanelFooter.js

@@ -4,6 +4,7 @@ var _excluded = ["className"];
 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; }
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var DraggablePanelFooter = /*#__PURE__*/memo(function (_ref) {
@@ -12,8 +13,13 @@ var DraggablePanelFooter = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsx("div", _objectSpread({
-    className: cx(styles.footer, className)
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread({
+    align: 'center',
+    className: cx(styles.footer, className),
+    flex: 'none',
+    gap: 8,
+    horizontal: true,
+    justify: 'flex-start'
   }, rest));
 });
 export default DraggablePanelFooter;

package/es/DraggablePanel/components/DraggablePanelHeader.js

@@ -7,6 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { ActionIcon } from "../..";
 import { PanelLeft, Pin, PinOff } from 'lucide-react';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -51,8 +52,13 @@ var DraggablePanelHeader = /*#__PURE__*/memo(function (props) {
       fontSize: 14
     }
   });
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: cx(styles.header, className)
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    align: 'center',
+    className: cx(styles.header, className),
+    flex: 'none',
+    gap: 8,
+    horizontal: true,
+    justify: 'space-between'
   }, rest), {}, {
     children: [position === 'left' ? panelIcon : pinIcon, title, position === 'left' ? pinIcon : panelIcon]
   }));

package/es/DraggablePanel/components/style.js

@@ -5,9 +5,9 @@ export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    body: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow-x: hidden;\n    overflow-y: auto;\n    flex: 1;\n    padding: 16px;\n  "]))),
-    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  "]))),
-    footer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 0;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-start;\n\n    padding: 8px 16px;\n\n    border-top: 1px solid ", ";\n  "])), token.colorBorderSecondary),
-    header: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 0;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    padding: 8px 16px;\n\n    font-weight: 500;\n\n    border-bottom: 1px solid ", ";\n  "])), token.colorBorderSecondary)
+    body: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow-x: hidden;\n    overflow-y: auto;\n    padding: 16px;\n  "]))),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    overflow: hidden;\n  "]))),
+    footer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 8px 16px;\n    border-top: 1px solid ", ";\n  "])), token.colorBorderSecondary),
+    header: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 8px 16px;\n    font-weight: 500;\n    border-bottom: 1px solid ", ";\n  "])), token.colorBorderSecondary)
   };
 });

package/es/FluentEmoji/style.d.ts

@@ -1,4 +1,3 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     container: import("antd-style").SerializedStyles;
-    loading: import("antd-style").SerializedStyles;
 }>;

package/es/FluentEmoji/style.js

@@ -1,11 +1,9 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
-  var css = _ref.css,
-    token = _ref.token;
+  var css = _ref.css;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      line-height: 1;\n      text-align: center;\n    "]))),
-    loading: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: absolute;\n      inset: 0;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: 100%;\n      height: 100%;\n\n      color: ", ";\n    "])), token.colorText)
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      line-height: 1;\n      text-align: center;\n    "])))
   };
 });

package/es/Form/components/FormFooter.js

@@ -4,18 +4,18 @@ var _excluded = ["className", "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; }
 import { memo } from 'react';
-import { useStyles } from "./style";
+import { Flexbox } from 'react-layout-kit';
 import { jsx as _jsx } from "react/jsx-runtime";
 var FormFooter = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
-  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-    className: cx(styles.footer, className)
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: className,
+    gap: 8,
+    justify: 'flex-end'
   }, rest), {}, {
+    horizontal: true,
     children: children
   }));
 });

package/es/Form/components/FormGroup.js

@@ -24,8 +24,10 @@ var FormGroup = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  var titleContent = /*#__PURE__*/_jsxs("div", {
+  var titleContent = /*#__PURE__*/_jsxs(Flexbox, {
     className: styles.title,
+    gap: 8,
+    horizontal: true,
     children: [icon && /*#__PURE__*/_jsx(Icon, {
       icon: icon
     }), title]

package/es/Form/components/FormTitle.js

@@ -13,8 +13,9 @@ var FormTitle = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  var titleNode = /*#__PURE__*/_jsxs("div", {
+  var titleNode = /*#__PURE__*/_jsxs(Flexbox, {
     className: cx(styles.formTitle, className),
+    gap: 6,
     children: [/*#__PURE__*/_jsxs(Flexbox, {
       align: 'center',
       direction: 'horizontal',

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

@@ -1,5 +1,4 @@
 export declare const useStyles: (props?: string | number | undefined) => import("antd-style").ReturnStyles<{
-    footer: import("antd-style").SerializedStyles;
     formTitle: import("antd-style").SerializedStyles;
     group: string;
     icon: import("antd-style").SerializedStyles;