@lobehub/ui 3.3.0 → 3.3.2

package/es/Accordion/AccordionItem.js

@@ -7,8 +7,8 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 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); }
 import { memo, useCallback, useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import Block from "../Block";
+import { Flexbox } from "../Flex";
 import Text from "../Text";
 import { LazyMotion, m } from "../motion";
 import ArrowIcon from "./ArrowIcon";

package/es/ActionIcon/ActionIcon.js

@@ -12,7 +12,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { cva } from 'class-variance-authority';
 import { Loader2 } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
-import { Center } from 'react-layout-kit';
+import { Center } from "../Flex";
 import Icon from "../Icon";
 import Tooltip from "../Tooltip";
 import { calcSize } from "./components/utils";

package/es/ActionIcon/type.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode, Ref } from 'react';
-import type { CenterProps } from 'react-layout-kit';
+import type { CenterProps } from "../Flex";
 import type { IconProps, IconSizeConfig, IconSizeType, LucideIconProps } from "../Icon";
 import type { TooltipProps } from "../Tooltip";
 interface ActionIconSizeConfig extends IconSizeConfig {

package/es/ActionIconGroup/ActionIconGroup.js

@@ -13,9 +13,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { cva } from 'class-variance-authority';
 import { MoreHorizontal } from 'lucide-react';
 import { memo, useMemo } from 'react';
-import { Center } from 'react-layout-kit';
 import ActionIcon from "../ActionIcon";
 import Dropdown from "../Dropdown";
+import { Center } from "../Flex";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/es/ActionIconGroup/type.d.ts

@@ -1,7 +1,7 @@
 import type { Ref } from 'react';
-import type { CenterProps } from 'react-layout-kit';
 import type { ActionIconProps } from "../ActionIcon";
 import type { DropdownProps } from "../Dropdown";
+import type { CenterProps } from "../Flex";
 import type { MenuInfo, MenuItemType } from "../Menu";
 export type ActionIconGroupEvent = Pick<MenuInfo, 'key' | 'keyPath' | 'domEvent'>;
 export interface ActionIconGroupProps extends Omit<CenterProps, 'children'> {

package/es/Alert/Alert.js

@@ -14,9 +14,9 @@ import { cva } from 'class-variance-authority';
 import { camelCase } from 'lodash-es';
 import { AlertTriangle, CheckCircle, Info, X, XCircle } from 'lucide-react';
 import { memo, useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import { Accordion, AccordionItem } from "../Accordion";
 import ActionIcon from "../ActionIcon";
+import { Flexbox } from "../Flex";
 import Icon from "../Icon";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/Avatar/Avatar.js

@@ -15,7 +15,7 @@ import { cva } from 'class-variance-authority';
 import { Loader2 } from 'lucide-react';
 import { readableColor } from 'polished';
 import { isValidElement, memo, useMemo } from 'react';
-import { Center } from 'react-layout-kit';
+import { Center } from "../Flex";
 import FluentEmoji from "../FluentEmoji";
 import Icon from "../Icon";
 import Img from "../Img";
@@ -32,8 +32,7 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     borderedColor = _ref.borderedColor,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 48 : _ref$size,
-    _ref$shape = _ref.shape,
-    shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
+    shape = _ref.shape,
     background = _ref.background,
     style = _ref.style,
     unoptimized = _ref.unoptimized,
@@ -110,7 +109,7 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     size: size,
     src: isDefaultAntAvatar ? defualtAvatar : undefined,
     style: _objectSpread({
-      background: background,
+      background: isDefaultAntAvatar ? background : background || theme.colorBorder,
       boxShadow: bordered ? "".concat(theme.colorBgLayout, " 0 0 0 2px, ").concat(borderedColor || theme.colorTextTertiary, " 0 0 0 4px") : undefined,
       color: readableColor(background || theme.colorBorder),
       cursor: rest !== null && rest !== void 0 && rest.onClick ? 'pointer' : undefined,

package/es/Avatar/AvatarGroup/index.js

@@ -11,7 +11,7 @@ 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 } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox } from "../../Flex";
 import Avatar from "../Avatar";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/Avatar/type.d.ts

@@ -1,6 +1,6 @@
 import type { AvatarProps as AntAvatarProps } from 'antd';
 import type { CSSProperties, ReactNode, Ref } from 'react';
-import type { FlexboxProps } from 'react-layout-kit';
+import type { FlexboxProps } from "../Flex";
 import type { TooltipProps } from "../Tooltip";
 export interface AvatarProps extends AntAvatarProps {
     animation?: boolean;

package/es/Block/Block.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 Block = /*#__PURE__*/memo(function (_ref) {

package/es/Block/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 BlockProps extends FlexboxProps {
     clickable?: boolean;
     glass?: boolean;

package/es/Burger/Burger.js

@@ -12,8 +12,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { Drawer, Menu } from 'antd';
 import { MenuIcon, X } from 'lucide-react';
 import { memo } from 'react';
-import { Center } from 'react-layout-kit';
 import ActionIcon from "../ActionIcon";
+import { Center } from "../Flex";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/es/CodeEditor/CodeEditor.js

@@ -17,9 +17,9 @@ 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 useMergeState from 'use-merge-value';
 import { useStyles } from "./style";
+import { Flexbox } from "../Flex";
 import SyntaxHighlighter from "../Highlighter/SyntaxHighlighter";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/es/CodeEditor/type.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, Ref } from 'react';
-import type { FlexboxProps } from 'react-layout-kit';
+import type { FlexboxProps } from "../Flex";
 import type { TextAreaProps } from "../types";
 export interface CodeEditorProps extends TextAreaProps, Pick<FlexboxProps, 'width' | 'height' | 'flex'> {
     classNames?: {

package/es/Collapse/Collapse.js

@@ -14,7 +14,7 @@ import { Collapse as AntdCollapse, ConfigProvider } from 'antd';
 import { cva } from 'class-variance-authority';
 import { ChevronDown } from 'lucide-react';
 import { isValidElement, memo, useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox } from "../Flex";
 import Icon from "../Icon";
 import { DEFAULT_PADDING, getPadding, useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/ColorSwatches/ColorSwatches.js

@@ -20,8 +20,8 @@ import chroma from 'chroma-js';
 import { CheckIcon } from 'lucide-react';
 import { readableColor, rgba } from 'polished';
 import { memo, useMemo } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
 import useMergeState from 'use-merge-value';
+import { Center, Flexbox } from "../Flex";
 import Icon from "../Icon";
 import Tooltip from "../Tooltip";
 import { useStyles } from "./style";

package/es/ColorSwatches/type.d.ts

@@ -1,5 +1,5 @@
 import type { Key, ReactNode, Ref } from 'react';
-import type { FlexboxProps } from 'react-layout-kit';
+import type { FlexboxProps } from "../Flex";
 interface ColorSwatchesItemType {
     color: string;
     key?: Key;

package/es/DraggablePanel/DraggablePanel.js

@@ -18,8 +18,8 @@ import { cva } from 'class-variance-authority';
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';
 import { Resizable } from 're-resizable';
 import { memo, use, useCallback, useEffect, useMemo, useReducer, useRef, useTransition } from 'react';
-import { Center } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
+import { Center } from "../Flex";
 import Icon from "../Icon";
 import { useStyles } from "./style";
 import { reversePlacement } from "./utils";

package/es/DraggablePanel/components/DraggablePanelBody.js

@@ -10,7 +10,7 @@ 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 } 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 DraggablePanelBody = /*#__PURE__*/memo(function (_ref) {

package/es/DraggablePanel/components/DraggablePanelContainer.js

@@ -10,7 +10,7 @@ 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 } 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 DraggablePanelContainer = /*#__PURE__*/memo(function (_ref) {

package/es/DraggablePanel/components/DraggablePanelFooter.js

@@ -10,7 +10,7 @@ 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 } 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 DraggablePanelFooter = /*#__PURE__*/memo(function (_ref) {

package/es/DraggablePanel/components/DraggablePanelHeader.js

@@ -17,9 +17,9 @@ 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 { PanelLeft, Pin, PinOff } from 'lucide-react';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
 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";

package/es/DraggableSideNav/DraggableSideNav.js

@@ -19,8 +19,8 @@ import { useHover } from 'ahooks';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { Resizable } from 're-resizable';
 import { memo, useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
+import { Center, Flexbox } from "../Flex";
 import Icon from "../Icon";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/Drawer/Drawer.js

@@ -13,8 +13,8 @@ import { Drawer as AntdDrawer } from 'antd';
 import { useTheme } from 'antd-style';
 import { XIcon } from 'lucide-react';
 import { memo, useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import ActionIcon from "../ActionIcon";
+import { Flexbox } from "../Flex";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/es/EditableText/ControlInput.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 { RotateCcw, Save } from 'lucide-react';
 import { memo, useEffect, useRef, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import ActionIcon from "../ActionIcon";
+import { Flexbox } from "../Flex";
 import Input from "../Input";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/es/EditableText/EditableText.js

@@ -19,9 +19,9 @@ import { cx } from 'antd-style';
 import { Edit3 } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useHotkeys } 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 ControlInput from "./ControlInput";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/es/EditableText/type.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
-import type { FlexboxProps } from 'react-layout-kit';
 import type { ControlInputProps } from "./ControlInput";
+import type { FlexboxProps } from "../Flex";
 export interface EditableTextProps extends Omit<FlexboxProps, 'onChange' | 'onBlur' | 'onFocus'>, Pick<ControlInputProps, 'onChange' | 'value' | 'onChangeEnd' | 'onValueChanging' | 'texts' | 'variant' | 'onBlur' | 'onFocus' | 'size'> {
     className?: string;
     classNames?: {

package/es/EmojiPicker/AvatarUploader.js

@@ -11,8 +11,8 @@ import { useTheme } from 'antd-style';
 import { ChevronLeftIcon, ImageUpIcon } from 'lucide-react';
 import { memo, useCallback, useRef, useState } from 'react';
 import AvatarEditor from 'react-avatar-editor';
-import { Center, Flexbox } from 'react-layout-kit';
 import Button from "../Button";
+import { Center, Flexbox } from "../Flex";
 import Icon from "../Icon";
 import Tag from "../Tag";
 import Text from "../Text";

package/es/EmojiPicker/EmojiPicker.js

@@ -27,11 +27,11 @@ import Picker from '@emoji-mart/react';
 import { Popover } from 'antd';
 import { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';
 import { memo, useRef, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import useSWR from 'swr';
 import useMergeState from 'use-merge-value';
 import ActionIcon from "../ActionIcon";
 import Avatar from "../Avatar";
+import { Flexbox } from "../Flex";
 import Icon from "../Icon";
 import Tabs from "../Tabs";
 import Tooltip from "../Tooltip";

package/es/Empty/Empty.js

@@ -12,8 +12,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { Empty as AntEmpty } from 'antd';
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import Block from "../Block";
+import { Flexbox } from "../Flex";
 import FluentEmoji from "../FluentEmoji";
 import Icon from "../Icon";
 import Text from "../Text";

package/es/Empty/type.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { FlexboxProps } from 'react-layout-kit';
 import { BlockProps } from "../Block";
+import { FlexboxProps } from "../Flex";
 import { IconProps } from "../Icon";
 import { TextProps } from "../Text";
 export interface EmptyProps extends Omit<FlexboxProps, 'title'> {

package/es/FileTypeIcon/FileTypeIcon.js

@@ -10,7 +10,7 @@ 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 { Center } from "../Flex";
 import FileIcon from "./components/FileIcon";
 import FolderIcon from "./components/FolderIcon";
 import { useStyles } from "./style";

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.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, useMemo, useState } from 'react';
-import { Center } from 'react-layout-kit';
 import { useCdnFn } from "../ConfigProvider";
+import { Center } from "../Flex";
 import Img from "../Img";
 import { useStyles } from "./style";
 import { genEmojiUrl } from "./utils";

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/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.js

@@ -10,7 +10,7 @@ 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 } 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) {

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.js

@@ -10,7 +10,7 @@ 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 } 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";

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.js

@@ -10,7 +10,7 @@ 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 } 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) {

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.js

@@ -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,

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;