@ctzhian/tiptap 1.5.0 → 1.5.2

package/dist/extension/component/CustomLink/Readonly.js

@@ -1,106 +0,0 @@
-// import { Avatar, Box, Link, Stack } from "@mui/material"
-// import { LinkIcon } from "@ctzhian/tiptap/component/Icons"
-// import React from "react"
-// import { LinkAttributes } from "."
-
-// interface ReadonlyLinkProps {
-//   attrs: LinkAttributes
-// }
-
-// export const ReadonlyLink: React.FC<ReadonlyLinkProps> = (props) => {
-//   const { attrs } = props
-
-//   const handleClick = (e: React.MouseEvent) => {
-//     e.preventDefault()
-//     if (attrs.href) {
-//       window.open(attrs.href, attrs.target || '_blank')
-//     }
-//   }
-
-//   // 获取网站图标
-//   const getFavicon = (url: string) => {
-//     try {
-//       const urlObj = new URL(url)
-//       return `${urlObj.protocol}//${urlObj.host}/favicon.ico`
-//     } catch {
-//       return null
-//     }
-//   }
-
-//   if (attrs.type === 'card') {
-//     return (
-//       <Box
-//         component="div"
-//         onClick={handleClick}
-//         sx={{
-//           display: 'block',
-//           border: '1px solid',
-//           borderColor: 'divider',
-//           borderRadius: 1,
-//           p: 2,
-//           cursor: 'pointer',
-//           textDecoration: 'none',
-//           color: 'inherit',
-//           maxWidth: 400,
-//           '&:hover': {
-//             bgcolor: 'action.hover'
-//           }
-//         }}
-//       >
-//         <Stack direction="row" gap={2} alignItems="center">
-//           <Avatar
-//             sx={{ width: 24, height: 24 }}
-//             src={getFavicon(attrs.href) || undefined}
-//           >
-//             <LinkIcon sx={{ fontSize: '1.125rem' }} />
-//           </Avatar>
-//           <Stack flex={1} sx={{ minWidth: 0 }}>
-//             <Box
-//               sx={{
-//                 fontWeight: 500,
-//                 fontSize: '0.875rem',
-//                 overflow: 'hidden',
-//                 textOverflow: 'ellipsis',
-//                 whiteSpace: 'nowrap'
-//               }}
-//             >
-//               {attrs.title || attrs.href}
-//             </Box>
-//             <Box
-//               sx={{
-//                 fontSize: '0.75rem',
-//                 color: 'text.secondary',
-//                 overflow: 'hidden',
-//                 textOverflow: 'ellipsis',
-//                 whiteSpace: 'nowrap'
-//               }}
-//             >
-//               {attrs.href}
-//             </Box>
-//           </Stack>
-//         </Stack>
-//       </Box>
-//     )
-//   }
-
-//   // 默认链接风格
-//   return (
-//     <Link
-//       component="a"
-//       href={attrs.href}
-//       target={attrs.target || '_blank'}
-//       rel={attrs.rel || 'noopener noreferrer'}
-//       onClick={handleClick}
-//       sx={{
-//         color: 'primary.main',
-//         textDecoration: 'underline',
-//         cursor: 'pointer',
-//         '&:hover': {
-//           textDecoration: 'none'
-//         }
-//       }}
-//     >
-//       {attrs.title || attrs.href}
-//     </Link>
-//   )
-// }

package/dist/extension/component/CustomLink/index.js

@@ -1,440 +0,0 @@
-// import { MarkViewRendererProps } from "@tiptap/react"
-// import React from "react"
-// import InsertLink from "./Insert"
-
-// export interface LinkAttributes {
-//   href: string
-//   target?: string | null
-//   rel?: string | null
-//   class?: string | null
-//   title?: string
-//   type?: 'link' | 'card'
-// }
-
-// export const LinkViewWrapper: React.FC<MarkViewRendererProps> = (props) => {
-//   const {
-//     editor,
-//     mark,
-//     updateAttributes,
-//   } = props
-
-//   const attrs = mark.attrs as LinkAttributes
-
-//   // const [showActions, setShowActions] = useState(false)
-//   // const [selected, setSelected] = useState(false)
-//   // const [linkElement, setLinkElement] = useState<HTMLAnchorElement | null>(null)
-//   // const [editMode, setEditMode] = useState(false)
-//   // const [editTitle, setEditTitle] = useState('')
-//   // const [editHref, setEditHref] = useState('')
-//   // const [editType, setEditType] = useState<'link' | 'card'>('link')
-
-//   // const getFavicon = (url: string) => {
-//   //   try {
-//   //     const urlObj = new URL(url)
-//   //     return `${urlObj.protocol}//${urlObj.host}/favicon.ico`
-//   //   } catch {
-//   //     return null
-//   //   }
-//   // }
-
-//   // const handleClick = (e: React.MouseEvent) => {
-//   //   e.preventDefault()
-//   //   if (editor.isEditable) {
-//   //     setSelected(!selected)
-//   //     if (!selected) {
-//   //       setShowActions(true)
-//   //     } else {
-//   //       // 第二次点击，打开链接
-//   //       window.open(attrs.href, attrs.target || '_blank')
-//   //       setShowActions(false)
-//   //       setSelected(false)
-//   //     }
-//   //   } else {
-//   //     // 只读模式直接打开链接
-//   //     window.open(attrs.href, attrs.target || '_blank')
-//   //   }
-//   // }
-
-//   // const handleOpen = () => {
-//   //   window.open(attrs.href, attrs.target || '_blank')
-//   //   setShowActions(false)
-//   //   setSelected(false)
-//   // }
-
-//   // const handleEdit = () => {
-//   //   setEditTitle(attrs.title || '')
-//   //   setEditHref(attrs.href)
-//   //   setEditType(attrs.type || 'link')
-//   //   setEditMode(true)
-//   //   setShowActions(false)
-//   // }
-
-//   // const handleSaveEdit = () => {
-//   //   if (editHref.trim()) {
-//   //     updateAttributes({
-//   //       href: editHref.trim(),
-//   //       title: editTitle.trim() || editHref.trim(),
-//   //       type: editType
-//   //     })
-//   //   }
-//   //   setEditMode(false)
-//   //   setSelected(false)
-//   // }
-
-//   // const handleCancelEdit = () => {
-//   //   setEditMode(false)
-//   //   setEditTitle('')
-//   //   setEditHref('')
-//   //   setEditType('link')
-//   // }
-
-//   // const handleCopy = async () => {
-//   //   try {
-//   //     await navigator.clipboard.writeText(attrs.href)
-//   //   } catch (err) {
-//   //     console.error('复制失败:', err)
-//   //   }
-//   //   setShowActions(false)
-//   //   setSelected(false)
-//   // }
-
-//   // const handleUnlink = () => {
-//   //   editor.chain().unsetLink().run()
-//   //   setShowActions(false)
-//   //   setSelected(false)
-//   // }
-
-//   // const handleToggleStyle = () => {
-//   //   updateAttributes({
-//   //     type: attrs.type === 'link' ? 'card' : 'link'
-//   //   })
-//   //   setShowActions(false)
-//   //   setSelected(false)
-//   // }
-
-//   // 点击外部关闭操作菜单
-//   // useEffect(() => {
-//   //   const handleClickOutside = (event: MouseEvent) => {
-//   //     if (linkElement && !linkElement.contains(event.target as Node)) {
-//   //       setShowActions(false)
-//   //       setSelected(false)
-//   //     }
-//   //   }
-
-//   //   if (showActions) {
-//   //     document.addEventListener('mousedown', handleClickOutside)
-//   //     return () => document.removeEventListener('mousedown', handleClickOutside)
-//   //   }
-//   // }, [showActions, linkElement])
-
-//   // 对于空 href，渲染插入组件
-//   if (!attrs.href) {
-//     return <InsertLink updateAttributes={updateAttributes} />
-//   }
-
-//   // 只读模式
-//   // if (!editor.isEditable) {
-//   //   return <ReadonlyLink attrs={attrs} />
-//   // }
-
-//   // 简单的测试实现，显示 attrs 数据确实可以获取到
-//   return (
-//     <a
-//       href={attrs.href}
-//       target={attrs.target || '_blank'}
-//       className={attrs.class || ''}
-//       title={attrs.title || ''}
-//       data-type={attrs.type || 'link'}
-//       style={{
-//         color: 'blue',
-//         textDecoration: 'underline',
-//         background: attrs.type === 'card' ? '#f0f0f0' : 'transparent',
-//         padding: attrs.type === 'card' ? '4px' : '0'
-//       }}
-//     >
-//       {/* 显示调试信息 */}
-//       {attrs.title || attrs.href}
-//       {attrs.type === 'card' && ' [Card Style]'}
-//     </a>
-//   )
-
-//   // 卡片风格
-//   // if (attrs.type === 'card') {
-//   //   return (
-//   //     <>
-//   //       <Box
-//   //         ref={setLinkElement}
-//   //         component="div"
-//   //         onClick={handleClick}
-//   //         sx={{
-//   //           display: 'block',
-//   //           border: '1px solid',
-//   //           borderColor: selected ? 'primary.main' : 'divider',
-//   //           borderRadius: 1,
-//   //           p: 2,
-//   //           cursor: 'pointer',
-//   //           textDecoration: 'none',
-//   //           color: 'inherit',
-//   //           maxWidth: 400,
-//   //           mb: 1,
-//   //           '&:hover': {
-//   //             bgcolor: 'action.hover'
-//   //           }
-//   //         }}
-//   //       >
-//   //         <Stack direction="row" gap={2} alignItems="center">
-//   //           <Avatar
-//   //             sx={{ width: 24, height: 24 }}
-//   //             src={getFavicon(attrs.href) || undefined}
-//   //           >
-//   //             <LinkIcon sx={{ fontSize: 16 }} />
-//   //           </Avatar>
-//   //           <Stack flex={1} sx={{ minWidth: 0 }}>
-//   //             <Box
-//   //               sx={{
-//   //                 fontWeight: 500,
-//   //                 fontSize: '0.875rem',
-//   //                 overflow: 'hidden',
-//   //                 textOverflow: 'ellipsis',
-//   //                 whiteSpace: 'nowrap'
-//   //               }}
-//   //             >
-//   //               {attrs.title || attrs.href}
-//   //             </Box>
-//   //             <Box
-//   //               sx={{
-//   //                 fontSize: '0.75rem',
-//   //                 color: 'text.secondary',
-//   //                 overflow: 'hidden',
-//   //                 textOverflow: 'ellipsis',
-//   //                 whiteSpace: 'nowrap'
-//   //               }}
-//   //             >
-//   //               {attrs.href}
-//   //             </Box>
-//   //           </Stack>
-//   //         </Stack>
-//   //       </Box>
-
-//   //       <FloatingPopover
-//   //         open={showActions}
-//   //         anchorEl={linkElement}
-//   //         onClose={() => {
-//   //           setShowActions(false)
-//   //           setSelected(false)
-//   //         }}
-//   //         placement="top"
-//   //       >
-//   //         <Stack direction="row" sx={{ p: 1 }}>
-//   //           <Tooltip title="打开">
-//   //             <IconButton size="small" onClick={handleOpen}>
-//   //               <ShareBoxLineIcon fontSize="small" />
-//   //             </IconButton>
-//   //           </Tooltip>
-//   //           <Tooltip title="编辑">
-//   //             <IconButton size="small" onClick={handleEdit}>
-//   //               <EditBoxLineIcon fontSize="small" />
-//   //             </IconButton>
-//   //           </Tooltip>
-//   //           <Tooltip title="复制链接">
-//   //             <IconButton size="small" onClick={handleCopy}>
-//   //               <CopyIcon fontSize="small" />
-//   //             </IconButton>
-//   //           </Tooltip>
-//   //           <Tooltip title="取消链接">
-//   //             <IconButton size="small" onClick={handleUnlink}>
-//   //               <DeleteLineIcon fontSize="small" />
-//   //             </IconButton>
-//   //           </Tooltip>
-//   //           <Tooltip title="切换到文字链接">
-//   //             <IconButton size="small" onClick={handleToggleStyle}>
-//   //               <TitleIcon fontSize="small" />
-//   //             </IconButton>
-//   //           </Tooltip>
-//   //         </Stack>
-//   //       </FloatingPopover>
-
-//   //       <FloatingPopover
-//   //         open={editMode}
-//   //         anchorEl={linkElement}
-//   //         onClose={handleCancelEdit}
-//   //         placement="bottom"
-//   //       >
-//   //         <Stack gap={2} sx={{ p: 2, width: 320 }}>
-//   //           <TextField
-//   //             fullWidth
-//   //             size="small"
-//   //             label="标题"
-//   //             value={editTitle}
-//   //             onChange={(e) => setEditTitle(e.target.value)}
-//   //             placeholder="链接标题（可选）"
-//   //           />
-//   //           <TextField
-//   //             fullWidth
-//   //             size="small"
-//   //             label="地址"
-//   //             value={editHref}
-//   //             onChange={(e) => setEditHref(e.target.value)}
-//   //             placeholder="https://example.com"
-//   //             required
-//   //           />
-//   //           <FormControl component="fieldset">
-//   //             <FormLabel component="legend" sx={{ fontSize: '0.875rem' }}>风格</FormLabel>
-//   //             <RadioGroup
-//   //               row
-//   //               value={editType}
-//   //               onChange={(e) => setEditType(e.target.value as 'link' | 'card')}
-//   //             >
-//   //               <FormControlLabel value="link" control={<Radio size="small" />} label="链接" />
-//   //               <FormControlLabel value="card" control={<Radio size="small" />} label="卡片" />
-//   //             </RadioGroup>
-//   //           </FormControl>
-//   //           <Stack direction="row" gap={1}>
-//   //             <Button
-//   //               variant="outlined"
-//   //               size="small"
-//   //               fullWidth
-//   //               onClick={handleCancelEdit}
-//   //             >
-//   //               取消
-//   //             </Button>
-//   //             <Button
-//   //               variant="contained"
-//   //               size="small"
-//   //               fullWidth
-//   //               onClick={handleSaveEdit}
-//   //               disabled={!editHref.trim()}
-//   //             >
-//   //               保存
-//   //             </Button>
-//   //           </Stack>
-//   //         </Stack>
-//   //       </FloatingPopover>
-//   //     </>
-//   //   )
-//   // }
-
-//   // 链接风格
-//   // return (
-//   //   <>
-//   //     <MarkViewContent
-//   //       as="a"
-//   //       ref={setLinkElement}
-//   //       onClick={handleClick}
-//   //       style={{
-//   //         color: '#1976d2',
-//   //         textDecoration: 'underline',
-//   //         cursor: 'pointer',
-//   //         borderRadius: '4px',
-//   //         padding: selected ? '0 4px' : '0',
-//   //         backgroundColor: selected ? 'rgba(25, 118, 210, 0.08)' : 'transparent',
-//   //       }}
-//   //       onMouseEnter={(e) => {
-//   //         e.currentTarget.style.textDecoration = 'none'
-//   //         e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.04)'
-//   //       }}
-//   //       onMouseLeave={(e) => {
-//   //         e.currentTarget.style.textDecoration = 'underline'
-//   //         e.currentTarget.style.backgroundColor = selected ? 'rgba(25, 118, 210, 0.08)' : 'transparent'
-//   //       }}
-//   //     />
-
-//   //     <FloatingPopover
-//   //       open={showActions}
-//   //       anchorEl={linkElement}
-//   //       onClose={() => {
-//   //         setShowActions(false)
-//   //         setSelected(false)
-//   //       }}
-//   //       placement="top"
-//   //     >
-//   //       <Stack direction="row" sx={{ p: 1 }}>
-//   //         <Tooltip title="打开">
-//   //           <IconButton size="small" onClick={handleOpen}>
-//   //             <ShareBoxLineIcon fontSize="small" />
-//   //           </IconButton>
-//   //         </Tooltip>
-//   //         <Tooltip title="编辑">
-//   //           <IconButton size="small" onClick={handleEdit}>
-//   //             <EditBoxLineIcon fontSize="small" />
-//   //           </IconButton>
-//   //         </Tooltip>
-//   //         <Tooltip title="复制链接">
-//   //           <IconButton size="small" onClick={handleCopy}>
-//   //             <CopyIcon fontSize="small" />
-//   //           </IconButton>
-//   //         </Tooltip>
-//   //         <Tooltip title="取消链接">
-//   //           <IconButton size="small" onClick={handleUnlink}>
-//   //             <LinkUnlinkIcon fontSize="small" />
-//   //           </IconButton>
-//   //         </Tooltip>
-//   //         <Tooltip title="切换到卡片链接">
-//   //           <IconButton size="small" onClick={handleToggleStyle}>
-//   //             <LinkIcon fontSize="small" />
-//   //           </IconButton>
-//   //         </Tooltip>
-//   //       </Stack>
-//   //     </FloatingPopover>
-
-//   //     <FloatingPopover
-//   //       open={editMode}
-//   //       anchorEl={linkElement}
-//   //       onClose={handleCancelEdit}
-//   //       placement="bottom"
-//   //     >
-//   //       <Stack gap={2} sx={{ p: 2, width: 320 }}>
-//   //         <TextField
-//   //           fullWidth
-//   //           size="small"
-//   //           label="标题"
-//   //           value={editTitle}
-//   //           onChange={(e) => setEditTitle(e.target.value)}
-//   //           placeholder="链接标题（可选）"
-//   //         />
-//   //         <TextField
-//   //           fullWidth
-//   //           size="small"
-//   //           label="地址"
-//   //           value={editHref}
-//   //           onChange={(e) => setEditHref(e.target.value)}
-//   //           placeholder="https://example.com"
-//   //           required
-//   //         />
-//   //         <FormControl component="fieldset">
-//   //           <FormLabel component="legend" sx={{ fontSize: '0.875rem' }}>风格</FormLabel>
-//   //           <RadioGroup
-//   //             row
-//   //             value={editType}
-//   //             onChange={(e) => setEditType(e.target.value as 'link' | 'card')}
-//   //           >
-//   //             <FormControlLabel value="link" control={<Radio size="small" />} label="链接" />
-//   //             <FormControlLabel value="card" control={<Radio size="small" />} label="卡片" />
-//   //           </RadioGroup>
-//   //         </FormControl>
-//   //         <Stack direction="row" gap={1}>
-//   //           <Button
-//   //             variant="outlined"
-//   //             size="small"
-//   //             fullWidth
-//   //             onClick={handleCancelEdit}
-//   //           >
-//   //             取消
-//   //           </Button>
-//   //           <Button
-//   //             variant="contained"
-//   //             size="small"
-//   //             fullWidth
-//   //             onClick={handleSaveEdit}
-//   //             disabled={!editHref.trim()}
-//   //           >
-//   //             保存
-//   //           </Button>
-//   //         </Stack>
-//   //       </Stack>
-//   //     </FloatingPopover>
-//   //   </>
-//   // )
-// }
-
-// export default LinkViewWrapper

package/dist/extension/component/EmojiList/index.d.ts

@@ -1,14 +0,0 @@
-import { EmojiItem } from '@tiptap/extension-emoji';
-import React from 'react';
-export type EmojiListProps = {
-    items: EmojiItem[];
-    command: (props: {
-        name: string;
-    }) => void;
-};
-export type EmojiListRef = {
-    onKeyDown: (props: {
-        event: KeyboardEvent;
-    }) => boolean;
-};
-export declare const EmojiList: React.ForwardRefExoticComponent<EmojiListProps & React.RefAttributes<EmojiListRef>>;

package/dist/extension/component/EmojiList/index.js

@@ -1,104 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-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; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-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); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { Paper } from '@mui/material';
-import Grid from '@mui/material/Grid';
-import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-export var EmojiList = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedIndex = _useState2[0],
-    setSelectedIndex = _useState2[1];
-  var selectItem = function selectItem(index) {
-    var item = props.items[index];
-    if (item) {
-      props.command({
-        name: item.name
-      });
-    }
-  };
-  var upHandler = function upHandler() {
-    setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
-  };
-  var downHandler = function downHandler() {
-    setSelectedIndex((selectedIndex + 1) % props.items.length);
-  };
-  var enterHandler = function enterHandler() {
-    selectItem(selectedIndex);
-  };
-  useEffect(function () {
-    return setSelectedIndex(0);
-  }, [props.items]);
-  useImperativeHandle(ref, function () {
-    return {
-      onKeyDown: function onKeyDown(x) {
-        if (x.event.key === 'ArrowUp') {
-          upHandler();
-          return true;
-        }
-        if (x.event.key === 'ArrowDown') {
-          downHandler();
-          return true;
-        }
-        if (x.event.key === 'Enter') {
-          enterHandler();
-          return true;
-        }
-        return false;
-      }
-    };
-  }, [upHandler, downHandler, enterHandler]);
-  return /*#__PURE__*/React.createElement(Paper, {
-    sx: {
-      position: 'relative',
-      overflowY: 'auto',
-      p: 1,
-      borderRadius: 'var(--mui-shape-borderRadius)',
-      maxWidth: 300,
-      maxHeight: 300
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    spacing: 1
-  }, props.items.map(function (item, index) {
-    return /*#__PURE__*/React.createElement(Grid, {
-      size: 1,
-      key: index,
-      onClick: function onClick() {
-        return selectItem(index);
-      },
-      sx: _objectSpread({
-        cursor: 'pointer',
-        lineHeight: 1,
-        fontSize: '1rem',
-        width: '2rem',
-        height: '2rem',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: 'var(--mui-shape-borderRadius)',
-        img: {
-          width: '1.25rem',
-          height: '1.25rem'
-        },
-        transition: 'background-color 0.2s ease-in-out',
-        '&:hover': {
-          backgroundColor: 'action.hover'
-        }
-      }, index === selectedIndex && {
-        backgroundColor: 'action.selected'
-      })
-    }, item.fallbackImage ? /*#__PURE__*/React.createElement("img", {
-      src: item.fallbackImage
-    }) : item.emoji);
-  })));
-});