@lobehub/ui 1.159.0 → 1.161.0

package/es/SearchBar/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-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";
 var _excluded = ["defaultValue", "spotlight", "className", "value", "onInputChange", "placeholder", "enableShortKey", "shortKey", "onSearch", "loading", "style", "onChange", "onBlur", "onPressEnter", "onFocus", "styles", "classNames"];
@@ -12,6 +12,8 @@ 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,
@@ -77,53 +79,55 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
       return document.removeEventListener('keydown', handler);
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: cx(styles.search, className),
-    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) {
+    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);
         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);
-      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()));
+      },
+      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()]
+    })]
+  });
 });
 export default SearchBar;

package/es/SelectWithImg/index.js

@@ -8,6 +8,8 @@ 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,
@@ -35,42 +37,46 @@ var SelectWithImg = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/React.createElement(Flexbox, {
+  return /*#__PURE__*/_jsx(Flexbox, {
     className: className,
     gap: 16,
     horizontal: true,
-    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));
-  }));
+    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);
+    })
+  });
 });
 export default SelectWithImg;

package/es/SideNav/index.js

@@ -1,11 +1,13 @@
 'use client';
 
-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 = ["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,
@@ -15,23 +17,28 @@ var SideNav = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/React.createElement(Flexbox, _extends({
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     align: 'center',
     className: cx(styles, className),
     flex: 'none',
     justify: 'space-between'
-  }, 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));
+  }, 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
+    })]
+  }));
 });
 export default SideNav;

package/es/SliderWithInput/index.js

@@ -1,12 +1,14 @@
 'use client';
 
-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 = ["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,
@@ -26,43 +28,44 @@ var SliderWithInput = /*#__PURE__*/memo(function (_ref) {
     if (Number.isNaN(value) || isNull(value)) return;
     onChange === null || onChange === void 0 || onChange(value);
   }, []);
-  return /*#__PURE__*/React.createElement(Flexbox, {
+  return /*#__PURE__*/_jsxs(Flexbox, {
     align: 'center',
     className: className,
     direction: 'horizontal',
     gap: gap,
-    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
-  }));
+    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
+    })]
+  });
 });
 export default SliderWithInput;

package/es/Snippet/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-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 = ["symbol", "language", "children", "copyable", "type", "spotlight", "className"];
 import { memo } from 'react';
@@ -9,6 +9,8 @@ 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,
@@ -25,19 +27,22 @@ var Snippet = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var tirmedChildren = children.trim();
-  return /*#__PURE__*/React.createElement(Flexbox, _extends({
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     align: 'center',
     className: cx(styles.container, className),
     gap: 8,
     horizontal: true
-  }, 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
-    }
+  }, 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
+      }
+    })]
   }));
 });
 export default Snippet;

package/es/SortableList/DragHandle.js

@@ -1,4 +1,3 @@
-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";
@@ -7,6 +6,7 @@ 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__*/React.createElement(ActionIcon, _extends({
+  return /*#__PURE__*/_jsx(ActionIcon, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     "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,4 +1,3 @@
-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"];
@@ -7,6 +6,7 @@ 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,20 +36,23 @@ var SortableItem = /*#__PURE__*/memo(function (_ref) {
       ref: setActivatorNodeRef
     };
   }, [attributes, listeners, setActivatorNodeRef]);
-  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));
+  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
+    }))
+  });
 });
 export default SortableItem;

package/es/SortableList/SortableOverlay.js

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

package/es/SortableList/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-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";
 var _excluded = ["items", "onChange", "renderItem", "gap"];
@@ -13,6 +13,8 @@ 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,
@@ -34,7 +36,7 @@ var SortableListParent = /*#__PURE__*/memo(function (_ref) {
   var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
     coordinateGetter: sortableKeyboardCoordinates
   }));
-  return /*#__PURE__*/React.createElement(DndContext, {
+  return /*#__PURE__*/_jsxs(DndContext, {
     modifiers: [restrictToVerticalAxis, restrictToWindowEdges],
     onDragCancel: function onDragCancel() {
       setActive(null);
@@ -59,19 +61,25 @@ var SortableListParent = /*#__PURE__*/memo(function (_ref) {
       var active = _ref5.active;
       setActive(active);
     },
-    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));
+    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
+    })]
+  });
 });
 var SortableList = SortableListParent;
 SortableList.Item = SortableItem;

package/es/Swatches/index.js

@@ -4,6 +4,8 @@ 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,
@@ -14,32 +16,32 @@ var Swatches = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(size),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/React.createElement(Flexbox, {
+  return /*#__PURE__*/_jsxs(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();
     },
-    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,
+    children: [/*#__PURE__*/_jsx(Flexbox, {
+      className: cx(styles.container, !activeColor && styles.active),
       onClick: function onClick() {
-        onSelect === null || onSelect === void 0 || onSelect(c);
+        onSelect === null || onSelect === void 0 || onSelect();
       },
       style: {
-        background: c
+        background: theme.colorBgContainer
       }
-    });
-  }));
+    }), 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;