@lobehub/ui 1.157.1 → 1.158.1

package/es/SearchBar/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["defaultValue", "spotlight", "className", "value", "onInputChange", "placeholder", "enableShortKey", "shortKey", "onSearch", "loading", "style", "onChange", "onBlur", "onPressEnter", "onFocus", "styles", "classNames"];
@@ -12,8 +12,6 @@ import { Input } from "../Input";
 import Tag from "../Tag";
 import Spotlight from "../awesome/Spotlight";
 import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var SearchBar = /*#__PURE__*/memo(function (_ref) {
   var defaultValue = _ref.defaultValue,
     spotlight = _ref.spotlight,
@@ -59,7 +57,7 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  var inputReference = useRef();
+  var inputReference = useRef(null);
   useEffect(function () {
     var _navigator;
     if (!enableShortKey) return;
@@ -79,55 +77,53 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
       return document.removeEventListener('keydown', handler);
     };
   }, []);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: cx(styles.search, className),
-    style: style,
-    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(Input, _objectSpread({
-      allowClear: true,
-      className: cx(styles.input, inputClassName),
-      onBlur: function onBlur(e) {
-        _onBlur === null || _onBlur === void 0 || _onBlur(e);
-        setInputValue(e.target.value);
-        if (!e.target.value) {
-          setShowTag(true);
-        }
-      },
-      onChange: function onChange(e) {
-        _onChange === null || _onChange === void 0 || _onChange(e);
-        setInputValue(e.target.value);
-        if (e.target.value) {
-          setShowTag(false);
-        } else {
-          setShowTag(true);
-          onSearch === null || onSearch === void 0 || onSearch(e.target.value);
-        }
-      },
-      onFocus: function onFocus(e) {
-        _onFocus === null || _onFocus === void 0 || _onFocus(e);
+    style: style
+  }, spotlight && /*#__PURE__*/React.createElement(Spotlight, null), /*#__PURE__*/React.createElement(Input, _extends({
+    allowClear: true,
+    className: cx(styles.input, inputClassName),
+    onBlur: function onBlur(e) {
+      _onBlur === null || _onBlur === void 0 || _onBlur(e);
+      setInputValue(e.target.value);
+      if (!e.target.value) {
+        setShowTag(true);
+      }
+    },
+    onChange: function onChange(e) {
+      _onChange === null || _onChange === void 0 || _onChange(e);
+      setInputValue(e.target.value);
+      if (e.target.value) {
         setShowTag(false);
-      },
-      onPressEnter: function onPressEnter(e) {
-        _onPressEnter === null || _onPressEnter === void 0 || _onPressEnter(e);
-        onSearch === null || onSearch === void 0 || onSearch(inputValue);
-      },
-      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Type keywords...',
-      prefix: /*#__PURE__*/_jsx(Icon, {
-        className: styles.icon,
-        icon: loading ? LucideLoader2 : Search,
-        size: "small",
-        spin: loading,
-        style: {
-          marginRight: 4
-        }
-      }),
-      ref: inputReference,
-      style: inputStyle,
-      value: value
-    }, rest)), enableShortKey && showTag && !inputValue && /*#__PURE__*/_jsxs(Tag, {
-      className: cx(styles.tag, shortKeyClassName),
-      style: shortKeyStyle,
-      children: [symbol, " ", shortKey.toUpperCase()]
-    })]
-  });
+      } else {
+        setShowTag(true);
+        onSearch === null || onSearch === void 0 || onSearch(e.target.value);
+      }
+    },
+    onFocus: function onFocus(e) {
+      _onFocus === null || _onFocus === void 0 || _onFocus(e);
+      setShowTag(false);
+    },
+    onPressEnter: function onPressEnter(e) {
+      _onPressEnter === null || _onPressEnter === void 0 || _onPressEnter(e);
+      onSearch === null || onSearch === void 0 || onSearch(inputValue);
+    },
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Type keywords...',
+    prefix: /*#__PURE__*/React.createElement(Icon, {
+      className: styles.icon,
+      icon: loading ? LucideLoader2 : Search,
+      size: "small",
+      spin: loading,
+      style: {
+        marginRight: 4
+      }
+    }),
+    ref: inputReference,
+    style: inputStyle,
+    value: value
+  }, rest)), enableShortKey && showTag && !inputValue && /*#__PURE__*/React.createElement(Tag, {
+    className: cx(styles.tag, shortKeyClassName),
+    style: shortKeyStyle
+  }, symbol, " ", shortKey.toUpperCase()));
 });
 export default SearchBar;

package/es/SelectWithImg/index.js

@@ -8,8 +8,6 @@ import useControlledState from 'use-merge-value';
 import Icon from "../Icon";
 import Img from "../Img";
 import { useStyles } from "./styles";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var SelectWithImg = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
     style = _ref.style,
@@ -37,46 +35,42 @@ var SelectWithImg = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/_jsx(Flexbox, {
+  return /*#__PURE__*/React.createElement(Flexbox, {
     className: className,
     gap: 16,
     horizontal: true,
-    style: style,
-    children: options === null || options === void 0 ? void 0 : options.map(function (item) {
-      var isActive = item.value === currentValue;
-      return /*#__PURE__*/_jsxs(Flexbox, {
-        align: 'center',
-        className: cx(styles.container, isActive && styles.active),
-        gap: 4,
-        onClick: function onClick() {
-          return setCurrentValue(item.value);
-        },
-        children: [/*#__PURE__*/_jsx("div", {
-          className: cx(styles.imgCtn, isActive && styles.imgActive, classNames.img),
-          style: _objectSpread(_objectSpread({}, outStyles.img), {}, {
-            height: height,
-            width: width
-          }),
-          children: /*#__PURE__*/_jsx("div", {
-            className: styles.img,
-            children: /*#__PURE__*/_jsx(Img, {
-              alt: typeof item.label === 'string' ? item.label : item.ariaLabel,
-              height: height,
-              src: item.img,
-              unoptimized: unoptimized,
-              width: width
-            })
-          })
-        }), /*#__PURE__*/_jsxs(Flexbox, {
-          align: 'center',
-          gap: 4,
-          horizontal: true,
-          children: [item.icon && /*#__PURE__*/_jsx(Icon, {
-            icon: item.icon
-          }), item.label]
-        })]
-      }, item.value);
-    })
-  });
+    style: style
+  }, options === null || options === void 0 ? void 0 : options.map(function (item) {
+    var isActive = item.value === currentValue;
+    return /*#__PURE__*/React.createElement(Flexbox, {
+      align: 'center',
+      className: cx(styles.container, isActive && styles.active),
+      gap: 4,
+      key: item.value,
+      onClick: function onClick() {
+        return setCurrentValue(item.value);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.imgCtn, isActive && styles.imgActive, classNames.img),
+      style: _objectSpread(_objectSpread({}, outStyles.img), {}, {
+        height: height,
+        width: width
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.img
+    }, /*#__PURE__*/React.createElement(Img, {
+      alt: typeof item.label === 'string' ? item.label : item.ariaLabel,
+      height: height,
+      src: item.img,
+      unoptimized: unoptimized,
+      width: width
+    }))), /*#__PURE__*/React.createElement(Flexbox, {
+      align: 'center',
+      gap: 4,
+      horizontal: true
+    }, item.icon && /*#__PURE__*/React.createElement(Icon, {
+      icon: item.icon
+    }), item.label));
+  }));
 });
 export default SelectWithImg;

package/es/SideNav/index.js

@@ -1,13 +1,11 @@
 'use client';
 
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "avatar", "topActions", "bottomActions"];
 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";
 var SideNav = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
     avatar = _ref.avatar,
@@ -17,28 +15,23 @@ var SideNav = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement(Flexbox, _extends({
     align: 'center',
     className: cx(styles, className),
     flex: 'none',
     justify: 'space-between'
-  }, rest), {}, {
-    children: [/*#__PURE__*/_jsxs(Flexbox, {
-      align: "center",
-      direction: "vertical",
-      gap: 16,
-      children: [avatar, /*#__PURE__*/_jsx(Flexbox, {
-        align: "center",
-        direction: "vertical",
-        gap: 8,
-        children: topActions
-      })]
-    }), /*#__PURE__*/_jsx(Flexbox, {
-      align: "center",
-      direction: "vertical",
-      gap: 4,
-      children: bottomActions
-    })]
-  }));
+  }, rest), /*#__PURE__*/React.createElement(Flexbox, {
+    align: "center",
+    direction: "vertical",
+    gap: 16
+  }, avatar, /*#__PURE__*/React.createElement(Flexbox, {
+    align: "center",
+    direction: "vertical",
+    gap: 8
+  }, topActions)), /*#__PURE__*/React.createElement(Flexbox, {
+    align: "center",
+    direction: "vertical",
+    gap: 4
+  }, bottomActions));
 });
 export default SideNav;

package/es/SliderWithInput/index.js

@@ -1,14 +1,12 @@
 'use client';
 
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["step", "value", "onChange", "max", "min", "defaultValue", "size", "controls", "gap", "style", "className", "disabled"];
 import { InputNumber, Slider } from 'antd';
 import { isNull } from 'lodash-es';
 import { memo, useCallback } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var SliderWithInput = /*#__PURE__*/memo(function (_ref) {
   var step = _ref.step,
     value = _ref.value,
@@ -28,44 +26,43 @@ var SliderWithInput = /*#__PURE__*/memo(function (_ref) {
     if (Number.isNaN(value) || isNull(value)) return;
     onChange === null || onChange === void 0 || onChange(value);
   }, []);
-  return /*#__PURE__*/_jsxs(Flexbox, {
+  return /*#__PURE__*/React.createElement(Flexbox, {
     align: 'center',
     className: className,
     direction: 'horizontal',
     gap: gap,
-    style: style,
-    children: [/*#__PURE__*/_jsx(Slider, _objectSpread({
-      defaultValue: defaultValue,
-      disabled: disabled,
-      max: max,
-      min: min,
-      onChange: handleOnchange,
-      step: step,
-      style: size === 'small' ? {
-        flex: 1,
-        margin: 0
-      } : {
-        flex: 1
-      },
-      tooltip: {
-        open: false
-      },
-      value: typeof value === 'number' ? value : 0
-    }, rest)), /*#__PURE__*/_jsx(InputNumber, {
-      controls: size !== 'small' || controls,
-      defaultValue: defaultValue,
-      disabled: disabled,
-      max: max,
-      min: min,
-      onChange: handleOnchange,
-      size: size,
-      step: Number.isNaN(step) || isNull(step) ? undefined : step,
-      style: {
-        flex: 1,
-        maxWidth: size === 'small' ? 40 : 64
-      },
-      value: typeof value === 'number' ? value : 0
-    })]
-  });
+    style: style
+  }, /*#__PURE__*/React.createElement(Slider, _extends({
+    defaultValue: defaultValue,
+    disabled: disabled,
+    max: max,
+    min: min,
+    onChange: handleOnchange,
+    step: step,
+    style: size === 'small' ? {
+      flex: 1,
+      margin: 0
+    } : {
+      flex: 1
+    },
+    tooltip: {
+      open: false
+    },
+    value: typeof value === 'number' ? value : 0
+  }, rest)), /*#__PURE__*/React.createElement(InputNumber, {
+    controls: size !== 'small' || controls,
+    defaultValue: defaultValue,
+    disabled: disabled,
+    max: max,
+    min: min,
+    onChange: handleOnchange,
+    size: size,
+    step: Number.isNaN(step) || isNull(step) ? undefined : step,
+    style: {
+      flex: 1,
+      maxWidth: size === 'small' ? 40 : 64
+    },
+    value: typeof value === 'number' ? value : 0
+  }));
 });
 export default SliderWithInput;

package/es/Snippet/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["symbol", "language", "children", "copyable", "type", "spotlight", "className"];
 import { memo } from 'react';
@@ -9,8 +9,6 @@ import CopyButton from "../CopyButton";
 import SyntaxHighlighter from "../Highlighter/SyntaxHighlighter";
 import Spotlight from "../awesome/Spotlight";
 import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var Snippet = /*#__PURE__*/memo(function (_ref) {
   var symbol = _ref.symbol,
     _ref$language = _ref.language,
@@ -27,22 +25,19 @@ var Snippet = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var tirmedChildren = children.trim();
-  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement(Flexbox, _extends({
     align: 'center',
     className: cx(styles.container, className),
     gap: 8,
     horizontal: true
-  }, rest), {}, {
-    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(SyntaxHighlighter, {
-      language: language,
-      children: [symbol, tirmedChildren].filter(Boolean).join(' ')
-    }), copyable && /*#__PURE__*/_jsx(CopyButton, {
-      content: tirmedChildren,
-      size: {
-        blockSize: 24,
-        fontSize: 14
-      }
-    })]
+  }, rest), spotlight && /*#__PURE__*/React.createElement(Spotlight, null), /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: language
+  }, [symbol, tirmedChildren].filter(Boolean).join(' ')), copyable && /*#__PURE__*/React.createElement(CopyButton, {
+    content: tirmedChildren,
+    size: {
+      blockSize: 24,
+      fontSize: 14
+    }
   }));
 });
 export default Snippet;

package/es/SortableList/DragHandle.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
@@ -6,7 +7,6 @@ import { GripVertical } from 'lucide-react';
 import React, { memo, useContext, useState } from 'react';
 import ActionIcon from "../ActionIcon";
 import { SortableItemContext } from "./SortableItem";
-import { jsx as _jsx } from "react/jsx-runtime";
 var DragHandle = /*#__PURE__*/memo(function (_ref) {
   var style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -18,7 +18,7 @@ var DragHandle = /*#__PURE__*/memo(function (_ref) {
     attributes = _useContext.attributes,
     listeners = _useContext.listeners,
     ref = _useContext.ref;
-  return /*#__PURE__*/_jsx(ActionIcon, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement(ActionIcon, _extends({
     "data-cypress": "draggable-handle",
     glass: true,
     icon: GripVertical,
@@ -32,7 +32,7 @@ var DragHandle = /*#__PURE__*/memo(function (_ref) {
     style: _objectSpread({
       cursor: grab ? 'grab' : 'grabbing'
     }, style)
-  }, rest), attributes), listeners), {}, {
+  }, rest, attributes, listeners, {
     ref: ref
   }));
 });

package/es/SortableList/SortableItem.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "id", "style"];
@@ -6,7 +7,6 @@ import { CSS } from '@dnd-kit/utilities';
 import { createContext, memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
 export var SortableItemContext = /*#__PURE__*/createContext({
   attributes: {},
   listeners: undefined,
@@ -36,23 +36,20 @@ var SortableItem = /*#__PURE__*/memo(function (_ref) {
       ref: setActivatorNodeRef
     };
   }, [attributes, listeners, setActivatorNodeRef]);
-  return /*#__PURE__*/_jsx(SortableItemContext.Provider, {
-    value: context,
-    children: /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
-      align: 'center',
-      as: 'li',
-      className: styles.item,
-      gap: 4,
-      horizontal: true,
-      ref: setNodeRef,
-      style: _objectSpread({
-        opacity: isDragging ? 0.4 : undefined,
-        transform: CSS.Translate.toString(transform),
-        transition: transition
-      }, style)
-    }, rest), {}, {
-      children: children
-    }))
-  });
+  return /*#__PURE__*/React.createElement(SortableItemContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(Flexbox, _extends({
+    align: 'center',
+    as: 'li',
+    className: styles.item,
+    gap: 4,
+    horizontal: true,
+    ref: setNodeRef,
+    style: _objectSpread({
+      opacity: isDragging ? 0.4 : undefined,
+      transform: CSS.Translate.toString(transform),
+      transition: transition
+    }, style)
+  }, rest), children));
 });
 export default SortableItem;

package/es/SortableList/SortableOverlay.js

@@ -1,6 +1,5 @@
 import { DragOverlay, defaultDropAnimationSideEffects } from '@dnd-kit/core';
 import { memo } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
 var dropAnimationConfig = {
   sideEffects: defaultDropAnimationSideEffects({
     styles: {
@@ -12,9 +11,8 @@ var dropAnimationConfig = {
 };
 var SortableOverlay = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/_jsx(DragOverlay, {
-    dropAnimation: dropAnimationConfig,
-    children: children
-  });
+  return /*#__PURE__*/React.createElement(DragOverlay, {
+    dropAnimation: dropAnimationConfig
+  }, children);
 });
 export default SortableOverlay;

package/es/SortableList/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["items", "onChange", "renderItem", "gap"];
@@ -13,8 +13,6 @@ import DragHandle from "./DragHandle";
 import SortableItem from "./SortableItem";
 import SortableOverlay from "./SortableOverlay";
 import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var SortableListParent = /*#__PURE__*/memo(function (_ref) {
   var items = _ref.items,
     onChange = _ref.onChange,
@@ -36,7 +34,7 @@ var SortableListParent = /*#__PURE__*/memo(function (_ref) {
   var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
     coordinateGetter: sortableKeyboardCoordinates
   }));
-  return /*#__PURE__*/_jsxs(DndContext, {
+  return /*#__PURE__*/React.createElement(DndContext, {
     modifiers: [restrictToVerticalAxis, restrictToWindowEdges],
     onDragCancel: function onDragCancel() {
       setActive(null);
@@ -61,25 +59,19 @@ var SortableListParent = /*#__PURE__*/memo(function (_ref) {
       var active = _ref5.active;
       setActive(active);
     },
-    sensors: sensors,
-    children: [/*#__PURE__*/_jsx(SortableContext, {
-      items: items,
-      strategy: verticalListSortingStrategy,
-      children: /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
-        as: 'ul',
-        className: styles.container,
-        gap: gap
-      }, rest), {}, {
-        children: items.map(function (item) {
-          return /*#__PURE__*/_jsx(Fragment, {
-            children: renderItem(item)
-          }, item.id);
-        })
-      }))
-    }), /*#__PURE__*/_jsx(SortableOverlay, {
-      children: activeItem ? renderItem(activeItem) : null
-    })]
-  });
+    sensors: sensors
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    items: items,
+    strategy: verticalListSortingStrategy
+  }, /*#__PURE__*/React.createElement(Flexbox, _extends({
+    as: 'ul',
+    className: styles.container,
+    gap: gap
+  }, rest), items.map(function (item) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: item.id
+    }, renderItem(item));
+  }))), /*#__PURE__*/React.createElement(SortableOverlay, null, activeItem ? renderItem(activeItem) : null));
 });
 var SortableList = SortableListParent;
 SortableList.Item = SortableItem;

package/es/Swatches/index.js

@@ -4,8 +4,6 @@ import { useTheme } from 'antd-style';
 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";
 var Swatches = /*#__PURE__*/memo(function (_ref) {
   var colors = _ref.colors,
     activeColor = _ref.activeColor,
@@ -16,32 +14,32 @@ var Swatches = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(size),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsxs(Flexbox, {
+  return /*#__PURE__*/React.createElement(Flexbox, {
     gap: 8,
     horizontal: true,
     style: {
       flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(Flexbox, {
+    className: cx(styles.container, !activeColor && styles.active),
+    onClick: function onClick() {
+      onSelect === null || onSelect === void 0 || onSelect();
     },
-    children: [/*#__PURE__*/_jsx(Flexbox, {
-      className: cx(styles.container, !activeColor && styles.active),
+    style: {
+      background: theme.colorBgContainer
+    }
+  }), colors.map(function (c) {
+    var isActive = c === activeColor;
+    return /*#__PURE__*/React.createElement(Flexbox, {
+      className: cx(styles.container, isActive && styles.active),
+      key: c,
       onClick: function onClick() {
-        onSelect === null || onSelect === void 0 || onSelect();
+        onSelect === null || onSelect === void 0 || onSelect(c);
       },
       style: {
-        background: theme.colorBgContainer
+        background: c
       }
-    }), colors.map(function (c) {
-      var isActive = c === activeColor;
-      return /*#__PURE__*/_jsx(Flexbox, {
-        className: cx(styles.container, isActive && styles.active),
-        onClick: function onClick() {
-          onSelect === null || onSelect === void 0 || onSelect(c);
-        },
-        style: {
-          background: c
-        }
-      }, c);
-    })]
-  });
+    });
+  }));
 });
 export default Swatches;