@elliemae/ds-wysiwygeditor 3.5.0-rc.9 → 3.6.0-next.0

package/dist/cjs/DSWYSIWYGEditor.js

@@ -30,7 +30,8 @@ __export(DSWYSIWYGEditor_exports, {
 });
 module.exports = __toCommonJS(DSWYSIWYGEditor_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_DSWYSIWYGEditorImpl = __toESM(require("./components/DSWYSIWYGEditorImpl"));
 const DSWYSIWYGEditor = ({
@@ -49,7 +50,7 @@ const DSWYSIWYGEditor = ({
   };
   const [showHTML, setShowHTML] = (0, import_react.useState)(showRawHTML);
   (0, import_react.useEffect)(() => setShowHTML(showRawHTML), [showRawHTML]);
-  return /* @__PURE__ */ import_react.default.createElement(import_DSWYSIWYGEditorImpl.default, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSWYSIWYGEditorImpl.default, {
     forceHttpLink: true,
     handleCustomFieldClick: emptyAction,
     handleImageClick: emptyAction,

package/dist/cjs/DSWYSIWYGEditor.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/DSWYSIWYGEditor.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useState, useEffect } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport DSWYSIWYGEditorImpl from './components/DSWYSIWYGEditorImpl';\n\nconst DSWYSIWYGEditor = ({\n  value = '',\n  onChange = () => null,\n  getQuillRef = () => null,\n  quillModules = {},\n  customToolbar,\n  toolbarHandlers,\n  showRawHTML = false,\n  height,\n  hideItems,\n  ...rest\n}) => {\n  const emptyAction = () => {};\n  const [showHTML, setShowHTML] = useState(showRawHTML);\n\n  useEffect(() => setShowHTML(showRawHTML), [showRawHTML]);\n\n  return (\n    <DSWYSIWYGEditorImpl\n      forceHttpLink\n      handleCustomFieldClick={emptyAction}\n      handleImageClick={emptyAction}\n      quillOverrides={[]}\n      value={value}\n      onChange={onChange}\n      getQuillRef={getQuillRef}\n      quillModules={quillModules}\n      customToolbar={customToolbar}\n      toolbarHandlers={toolbarHandlers}\n      showRawHTML={showHTML}\n      onShowHTML={() => setShowHTML(!showHTML)}\n      height={height}\n      hideItems={hideItems}\n      {...rest}\n    />\n  );\n};\n\nconst wysiwygEditorProps = {\n  value: PropTypes.string.description('editors value').isRequired,\n  onChange: PropTypes.func.description(\n    `(content, delta, source, editor) : Called back with the new contents of the editor after change. \n    It will be passed the HTML contents of the editor, a delta object expressing the change, the source of the change, and finally a read-only proxy to editor accessors such as getHTML(). \n    \u26A0\uFE0F Do not use this delta object as value, as it will cause a loop. \n    Use editor.getContents() instead. See Using Deltas for details. \n    Read more: https://github.com/zenoamaro/react-quill#props`,\n  ).isRequired,\n  getQuillRef: PropTypes.func.description('function to use quill.js ref'),\n  quillModules: PropTypes.object.description('object to override quill modules'),\n  customToolbar: PropTypes.element.description('custom toolbar'),\n  toolbarHandlers: PropTypes.object.description('object with toolbar handlers'),\n  showRawHTML: PropTypes.bool.description('whether to display html view or not').defaultValue(false),\n  height: PropTypes.string.description('heigth of the editors text area'),\n  readOnly: PropTypes.string.description(\n    \"If true, the editor won't allow changing its contents. Wraps the Quill disable API.\",\n  ),\n  hideItems: PropTypes.object.description('object of defaultItems to be removed from toolbar').defaultValue({}),\n  zIndex: PropTypes.number.description(\n    'zIndex to be used (required when used in a modal for correct tooltips displaying)',\n  ),\n};\n\nDSWYSIWYGEditor.propTypes = wysiwygEditorProps;\nDSWYSIWYGEditor.displayName = 'DSWYSIWYGEditor';\nconst WYSIWYWithSchema = describe(DSWYSIWYGEditor);\nWYSIWYWithSchema.propTypes = wysiwygEditorProps;\n\nexport { WYSIWYWithSchema, DSWYSIWYGEditor };\nexport default DSWYSIWYGEditor;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,0BAAoC;AACpC,iCAAgC;AAEhC,MAAM,kBAAkB,CAAC;AAAA,EACvB,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,cAAc,MAAM;AAAA,EACpB,eAAe,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,QAAM,cAAc,MAAM;AAAA,EAAC;AAC3B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,WAAW;AAEpD,8BAAU,MAAM,YAAY,WAAW,GAAG,CAAC,WAAW,CAAC;AAEvD,SACE,6BAAAA,QAAA,cAAC,2BAAAC,SAAA;AAAA,IACC,eAAa;AAAA,IACb,wBAAwB;AAAA,IACxB,kBAAkB;AAAA,IAClB,gBAAgB,CAAC;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,YAAY,MAAM,YAAY,CAAC,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACC,GAAG;AAAA,GACN;AAEJ;AAEA,MAAM,qBAAqB;AAAA,EACzB,OAAO,8BAAU,OAAO,YAAY,eAAe,EAAE;AAAA,EACrD,UAAU,8BAAU,KAAK;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EAAE;AAAA,EACF,aAAa,8BAAU,KAAK,YAAY,8BAA8B;AAAA,EACtE,cAAc,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAC7E,eAAe,8BAAU,QAAQ,YAAY,gBAAgB;AAAA,EAC7D,iBAAiB,8BAAU,OAAO,YAAY,8BAA8B;AAAA,EAC5E,aAAa,8BAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,8BAAU,OAAO,YAAY,iCAAiC;AAAA,EACtE,UAAU,8BAAU,OAAO;AAAA,IACzB;AAAA,EACF;AAAA,EACA,WAAW,8BAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EAC5G,QAAQ,8BAAU,OAAO;AAAA,IACvB;AAAA,EACF;AACF;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,uBAAmB,8BAAS,eAAe;AACjD,iBAAiB,YAAY;AAG7B,IAAO,0BAAQ;",
-  "names": ["React", "DSWYSIWYGEditorImpl"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,0BAAoC;AACpC,iCAAgC;AAEhC,MAAM,kBAAkB,CAAC;AAAA,EACvB,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,cAAc,MAAM;AAAA,EACpB,eAAe,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,QAAM,cAAc,MAAM;AAAA,EAAC;AAC3B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,WAAW;AAEpD,8BAAU,MAAM,YAAY,WAAW,GAAG,CAAC,WAAW,CAAC;AAEvD,SACE,4CAAC,2BAAAA,SAAA;AAAA,IACC,eAAa;AAAA,IACb,wBAAwB;AAAA,IACxB,kBAAkB;AAAA,IAClB,gBAAgB,CAAC;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,YAAY,MAAM,YAAY,CAAC,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACC,GAAG;AAAA,GACN;AAEJ;AAEA,MAAM,qBAAqB;AAAA,EACzB,OAAO,8BAAU,OAAO,YAAY,eAAe,EAAE;AAAA,EACrD,UAAU,8BAAU,KAAK;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EAAE;AAAA,EACF,aAAa,8BAAU,KAAK,YAAY,8BAA8B;AAAA,EACtE,cAAc,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAC7E,eAAe,8BAAU,QAAQ,YAAY,gBAAgB;AAAA,EAC7D,iBAAiB,8BAAU,OAAO,YAAY,8BAA8B;AAAA,EAC5E,aAAa,8BAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,8BAAU,OAAO,YAAY,iCAAiC;AAAA,EACtE,UAAU,8BAAU,OAAO;AAAA,IACzB;AAAA,EACF;AAAA,EACA,WAAW,8BAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EAC5G,QAAQ,8BAAU,OAAO;AAAA,IACvB;AAAA,EACF;AACF;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,uBAAmB,8BAAS,eAAe;AACjD,iBAAiB,YAAY;AAG7B,IAAO,0BAAQ;",
+  "names": ["DSWYSIWYGEditorImpl"]
 }

package/dist/cjs/components/CustomImageUploader.js

@@ -28,7 +28,8 @@ __export(CustomImageUploader_exports, {
 });
 module.exports = __toCommonJS(CustomImageUploader_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_uploader = __toESM(require("@elliemae/ds-uploader"));
 var import_ds_modal = __toESM(require("@elliemae/ds-modal"));
@@ -83,38 +84,50 @@ const CustomImageUploader = ({
       }
     }
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex,
-    tip: "Insert Image",
-    onClick: () => {
-      setLastSelection(quillRef?.getEditor().getSelection());
-      setIsOpen(true);
-    }
-  }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.Image, {
-    color: ["neutral", 500],
-    size: "s"
-  })), /* @__PURE__ */ import_react.default.createElement(import_ds_modal.default, {
-    isOpen,
-    title: "",
-    onConfirm: () => {
-      setIsOpen(false);
-    },
-    onClose: () => {
-      setIsOpen(false);
-    },
-    showClose: true,
-    version: 2,
-    size: "xsmall",
-    modalType: import_ds_modal.MODAL_TYPE_V2.DECISION,
-    confirmLabel: "Cancel",
-    message: ""
-  }, !inProgress && /* @__PURE__ */ import_react.default.createElement(import_ds_uploader.default, {
-    containerProps: { id: elementId },
-    showAltAction: false,
-    acceptedTypesText: allowedImageTypes,
-    onDrop: handleFileChange
-  }), inProgress && "Upload in progress...", error && /* @__PURE__ */ import_react.default.createElement("div", {
-    style: { color: "red", marginTop: "10px" }
-  }, error)));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+        zIndex,
+        tip: "Insert Image",
+        onClick: () => {
+          setLastSelection(quillRef?.getEditor().getSelection());
+          setIsOpen(true);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Image, {
+          color: ["neutral", 500],
+          size: "s"
+        })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_modal.default, {
+        isOpen,
+        title: "",
+        onConfirm: () => {
+          setIsOpen(false);
+        },
+        onClose: () => {
+          setIsOpen(false);
+        },
+        showClose: true,
+        version: 2,
+        size: "xsmall",
+        modalType: import_ds_modal.MODAL_TYPE_V2.DECISION,
+        confirmLabel: "Cancel",
+        message: "",
+        children: [
+          !inProgress && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_uploader.default, {
+            containerProps: { id: elementId },
+            showAltAction: false,
+            acceptedTypesText: allowedImageTypes,
+            onDrop: handleFileChange
+          }),
+          inProgress && "Upload in progress...",
+          error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+            style: { color: "red", marginTop: "10px" },
+            children: error
+          })
+        ]
+      })
+    ]
+  });
 };
 //# sourceMappingURL=CustomImageUploader.js.map

package/dist/cjs/components/CustomImageUploader.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/components/CustomImageUploader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable react/prop-types */\nimport React, { useState } from 'react';\nimport { Image } from '@elliemae/ds-icons';\nimport DSUploader from '@elliemae/ds-uploader';\nimport DSModal, { MODAL_TYPE_V2 } from '@elliemae/ds-modal';\nimport { TippedButton } from './TippedButton';\n\nconst ALLOWED_TYPES_TEXT = 'JPG, JPEG, PNG, GIF, BMP, TIFF';\nconst ALLOWED_TYPES = /image\\/(jpeg|jpg|png|gif|bmp|tiff)/;\nconst DEFAULT_MAX_SIZE = 1024 * 1024; // 1 MB\n\nexport const CustomImageUploader = ({\n  quillRef,\n  editorFieldName,\n  allowedImageTypes = ALLOWED_TYPES_TEXT,\n  uploadAsset = () => null,\n  zIndex = 1,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [error, setError] = useState(null);\n  const [inProgress, setInProgress] = useState(false);\n  const [lastSelection, setLastSelection] = useState({ index: 0, length: 0 });\n\n  const elementId = `uploadImage${editorFieldName}`;\n\n  // eslint-disable-next-line consistent-return\n  const handleFileChange = async (files) => {\n    if (!inProgress) {\n      setError(null);\n      const selectedFile = files[0];\n      if (!selectedFile) {\n        setError('Please select a file.');\n        return false;\n      }\n      if (!selectedFile.type.match(ALLOWED_TYPES)) {\n        setError('File must be an image.');\n      } else if (selectedFile.size > DEFAULT_MAX_SIZE) {\n        setError('File is too large.');\n      } else {\n        const fr = new FileReader();\n        fr.onload = async () => {\n          setInProgress(true);\n          try {\n            const url = await uploadAsset({\n              name: selectedFile.name,\n              type: selectedFile.type,\n              description: selectedFile.name,\n              isSystemAsset: false,\n              file: fr.result,\n            });\n            setIsOpen(false);\n            quillRef?.getEditor().insertEmbed(lastSelection?.index || 0, 'image', url);\n          } catch (e) {\n            setError('An error has occurred, try again');\n          }\n          setInProgress(false);\n        };\n        fr.readAsArrayBuffer(selectedFile);\n      }\n    }\n  };\n  return (\n    <>\n      <TippedButton\n        zIndex={zIndex}\n        tip=\"Insert Image\"\n        onClick={() => {\n          setLastSelection(quillRef?.getEditor().getSelection());\n          setIsOpen(true);\n        }}\n      >\n        <Image color={['neutral', 500]} size=\"s\" />\n      </TippedButton>\n      <DSModal\n        isOpen={isOpen}\n        title=\"\"\n        onConfirm={() => {\n          setIsOpen(false);\n        }}\n        onClose={() => {\n          setIsOpen(false);\n        }}\n        showClose\n        version={2}\n        size=\"xsmall\"\n        modalType={MODAL_TYPE_V2.DECISION}\n        confirmLabel=\"Cancel\"\n        message=\"\"\n      >\n        {!inProgress && (\n          <DSUploader\n            containerProps={{ id: elementId }}\n            showAltAction={false}\n            acceptedTypesText={allowedImageTypes}\n            onDrop={handleFileChange}\n          />\n        )}\n        {inProgress && 'Upload in progress...'}\n        {error && <div style={{ color: 'red', marginTop: '10px' }}>{error}</div>}\n      </DSModal>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAgC;AAChC,sBAAsB;AACtB,yBAAuB;AACvB,sBAAuC;AACvC,0BAA6B;AAE7B,MAAM,qBAAqB;AAC3B,MAAM,gBAAgB;AACtB,MAAM,mBAAmB,OAAO;AAEzB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,cAAc,MAAM;AAAA,EACpB,SAAS;AACX,MAAM;AACJ,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,IAAI;AACvC,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AAE1E,QAAM,YAAY,cAAc;AAGhC,QAAM,mBAAmB,OAAO,UAAU;AACxC,QAAI,CAAC,YAAY;AACf,eAAS,IAAI;AACb,YAAM,eAAe,MAAM;AAC3B,UAAI,CAAC,cAAc;AACjB,iBAAS,uBAAuB;AAChC,eAAO;AAAA,MACT;AACA,UAAI,CAAC,aAAa,KAAK,MAAM,aAAa,GAAG;AAC3C,iBAAS,wBAAwB;AAAA,MACnC,WAAW,aAAa,OAAO,kBAAkB;AAC/C,iBAAS,oBAAoB;AAAA,MAC/B,OAAO;AACL,cAAM,KAAK,IAAI,WAAW;AAC1B,WAAG,SAAS,YAAY;AACtB,wBAAc,IAAI;AAClB,cAAI;AACF,kBAAM,MAAM,MAAM,YAAY;AAAA,cAC5B,MAAM,aAAa;AAAA,cACnB,MAAM,aAAa;AAAA,cACnB,aAAa,aAAa;AAAA,cAC1B,eAAe;AAAA,cACf,MAAM,GAAG;AAAA,YACX,CAAC;AACD,sBAAU,KAAK;AACf,sBAAU,UAAU,EAAE,YAAY,eAAe,SAAS,GAAG,SAAS,GAAG;AAAA,UAC3E,SAAS,GAAP;AACA,qBAAS,kCAAkC;AAAA,UAC7C;AACA,wBAAc,KAAK;AAAA,QACrB;AACA,WAAG,kBAAkB,YAAY;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AACA,SACE,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC;AAAA,IACC;AAAA,IACA,KAAI;AAAA,IACJ,SAAS,MAAM;AACb,uBAAiB,UAAU,UAAU,EAAE,aAAa,CAAC;AACrD,gBAAU,IAAI;AAAA,IAChB;AAAA,KAEA,6BAAAA,QAAA,cAAC;AAAA,IAAM,OAAO,CAAC,WAAW,GAAG;AAAA,IAAG,MAAK;AAAA,GAAI,CAC3C,GACA,6BAAAA,QAAA,cAAC,gBAAAC,SAAA;AAAA,IACC;AAAA,IACA,OAAM;AAAA,IACN,WAAW,MAAM;AACf,gBAAU,KAAK;AAAA,IACjB;AAAA,IACA,SAAS,MAAM;AACb,gBAAU,KAAK;AAAA,IACjB;AAAA,IACA,WAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAK;AAAA,IACL,WAAW,8BAAc;AAAA,IACzB,cAAa;AAAA,IACb,SAAQ;AAAA,KAEP,CAAC,cACA,6BAAAD,QAAA,cAAC,mBAAAE,SAAA;AAAA,IACC,gBAAgB,EAAE,IAAI,UAAU;AAAA,IAChC,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,QAAQ;AAAA,GACV,GAED,cAAc,yBACd,SAAS,6BAAAF,QAAA,cAAC;AAAA,IAAI,OAAO,EAAE,OAAO,OAAO,WAAW,OAAO;AAAA,KAAI,KAAM,CACpE,CACF;AAEJ;",
-  "names": ["React", "DSModal", "DSUploader"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAIA,mBAAgC;AAChC,sBAAsB;AACtB,yBAAuB;AACvB,sBAAuC;AACvC,0BAA6B;AAE7B,MAAM,qBAAqB;AAC3B,MAAM,gBAAgB;AACtB,MAAM,mBAAmB,OAAO;AAEzB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,cAAc,MAAM;AAAA,EACpB,SAAS;AACX,MAAM;AACJ,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,IAAI;AACvC,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AAE1E,QAAM,YAAY,cAAc;AAGhC,QAAM,mBAAmB,OAAO,UAAU;AACxC,QAAI,CAAC,YAAY;AACf,eAAS,IAAI;AACb,YAAM,eAAe,MAAM;AAC3B,UAAI,CAAC,cAAc;AACjB,iBAAS,uBAAuB;AAChC,eAAO;AAAA,MACT;AACA,UAAI,CAAC,aAAa,KAAK,MAAM,aAAa,GAAG;AAC3C,iBAAS,wBAAwB;AAAA,MACnC,WAAW,aAAa,OAAO,kBAAkB;AAC/C,iBAAS,oBAAoB;AAAA,MAC/B,OAAO;AACL,cAAM,KAAK,IAAI,WAAW;AAC1B,WAAG,SAAS,YAAY;AACtB,wBAAc,IAAI;AAClB,cAAI;AACF,kBAAM,MAAM,MAAM,YAAY;AAAA,cAC5B,MAAM,aAAa;AAAA,cACnB,MAAM,aAAa;AAAA,cACnB,aAAa,aAAa;AAAA,cAC1B,eAAe;AAAA,cACf,MAAM,GAAG;AAAA,YACX,CAAC;AACD,sBAAU,KAAK;AACf,sBAAU,UAAU,EAAE,YAAY,eAAe,SAAS,GAAG,SAAS,GAAG;AAAA,UAC3E,SAAS,GAAP;AACA,qBAAS,kCAAkC;AAAA,UAC7C;AACA,wBAAc,KAAK;AAAA,QACrB;AACA,WAAG,kBAAkB,YAAY;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AACA,SACE;AAAA,IACE;AAAA,kDAAC;AAAA,QACC;AAAA,QACA,KAAI;AAAA,QACJ,SAAS,MAAM;AACb,2BAAiB,UAAU,UAAU,EAAE,aAAa,CAAC;AACrD,oBAAU,IAAI;AAAA,QAChB;AAAA,QAEA,sDAAC;AAAA,UAAM,OAAO,CAAC,WAAW,GAAG;AAAA,UAAG,MAAK;AAAA,SAAI;AAAA,OAC3C;AAAA,MACA,6CAAC,gBAAAA,SAAA;AAAA,QACC;AAAA,QACA,OAAM;AAAA,QACN,WAAW,MAAM;AACf,oBAAU,KAAK;AAAA,QACjB;AAAA,QACA,SAAS,MAAM;AACb,oBAAU,KAAK;AAAA,QACjB;AAAA,QACA,WAAS;AAAA,QACT,SAAS;AAAA,QACT,MAAK;AAAA,QACL,WAAW,8BAAc;AAAA,QACzB,cAAa;AAAA,QACb,SAAQ;AAAA,QAEP;AAAA,WAAC,cACA,4CAAC,mBAAAC,SAAA;AAAA,YACC,gBAAgB,EAAE,IAAI,UAAU;AAAA,YAChC,eAAe;AAAA,YACf,mBAAmB;AAAA,YACnB,QAAQ;AAAA,WACV;AAAA,UAED,cAAc;AAAA,UACd,SAAS,4CAAC;AAAA,YAAI,OAAO,EAAE,OAAO,OAAO,WAAW,OAAO;AAAA,YAAI;AAAA,WAAM;AAAA;AAAA,OACpE;AAAA;AAAA,GACF;AAEJ;",
+  "names": ["DSModal", "DSUploader"]
 }

package/dist/cjs/components/CustomToolbar.js

@@ -29,7 +29,8 @@ __export(CustomToolbar_exports, {
 });
 module.exports = __toCommonJS(CustomToolbar_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_ds_button = __toESM(require("@elliemae/ds-button"));
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_dropdownmenu = __toESM(require("@elliemae/ds-dropdownmenu"));
@@ -37,18 +38,20 @@ var import_constants = require("../constants");
 var import_TippedButton = require("./TippedButton");
 var import_TippedSelect = require("./TippedSelect");
 const optionsToValues = (options) => options.map((opt) => opt.toLowerCase().replace(" ", "-"));
-const CustomFields = () => /* @__PURE__ */ import_react.default.createElement("span", null, "\u1438\u1433");
-const Color = ({ color }) => /* @__PURE__ */ import_react.default.createElement("option", {
+const CustomFields = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+  children: "\u1438\u1433"
+});
+const Color = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
   value: color
 });
-const Colors = ({ className, tip, zIndex }) => /* @__PURE__ */ import_react.default.createElement(import_TippedSelect.TippedSelect, {
+const Colors = ({ className, tip, zIndex }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedSelect.TippedSelect, {
   className,
   tip,
-  zIndex
-}, import_constants.colors.map((color) => /* @__PURE__ */ import_react.default.createElement(Color, {
-  key: color,
-  color
-})));
+  zIndex,
+  children: import_constants.colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Color, {
+    color
+  }, color))
+});
 const CustomDropdown = ({
   options,
   label,
@@ -60,7 +63,7 @@ const CustomDropdown = ({
   minWidth,
   maxWidth,
   zIndex = 10
-}) => /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.default, {
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_dropdownmenu.default, {
   onClickOutsideMenu,
   options,
   onSelectMenuItem,
@@ -71,13 +74,13 @@ const CustomDropdown = ({
   maxWidth,
   zIndex,
   preventOverflow: "scrollParent",
-  triggerComponent: /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
+  triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.default, {
     labelText: label,
     buttonType: "text",
-    icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadDown, null)
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ArrowheadDown, {})
   })
 });
-const Divider = () => /* @__PURE__ */ import_react.default.createElement("div", {
+const Divider = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
   style: {
     height: "21px",
     width: "1px",
@@ -124,135 +127,219 @@ const CustomToolbar = ({
     setShowHTML(!showHTML);
     onShowHTML();
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
     id,
-    className: "ds-ql-custom-toolbar"
-  }, (!HEADER || !FONT || !FONT_SIZE) && /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "ql-formats"
-  }, !HEADER && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_TippedSelect.TippedSelect, {
-    className: "ql-header",
-    tip: "Header",
-    values: ["", "1", "2", "3", "4", "5", "6"],
-    zIndex: userProps?.zIndex || 1
-  }), /* @__PURE__ */ import_react.default.createElement(Divider, null)), !FONT && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_TippedSelect.TippedSelect, {
-    className: "ql-font",
-    defaultValue: "sans-serif",
-    options: import_constants.fonts,
-    tip: "Font",
-    values: optionsToValues(import_constants.fonts),
-    zIndex: userProps?.zIndex || 1
-  }), /* @__PURE__ */ import_react.default.createElement(Divider, null)), !FONT_SIZE && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_TippedSelect.TippedSelect, {
-    className: "ql-size",
-    options: import_constants.sizes,
-    tip: "Font Size",
-    values: optionsToValues(import_constants.sizesReal),
-    zIndex: userProps?.zIndex || 1
-  }), /* @__PURE__ */ import_react.default.createElement(Divider, null))), (!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "ql-formats"
-  }, !BOLD && /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-bold",
-    tip: "Bold"
-  }), !ITALIC && /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-italic",
-    tip: "Italic"
-  }), !UNDERLINE && /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-underline",
-    tip: "Underline"
-  }), !STRIKE && /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-strike",
-    tip: "Strike"
-  })), (!SUB || !SUPER) && /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "ql-formats"
-  }, !SUB && /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-script",
-    tip: "Sub",
-    value: "sub"
-  }), !SUPER && /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-script",
-    tip: "Super",
-    value: "super"
-  }), /* @__PURE__ */ import_react.default.createElement(Divider, null)), (!ORDERED_LIST || !BULLET_LIST) && /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "ql-formats"
-  }, !ORDERED_LIST && /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-list",
-    tip: "Ordered List",
-    value: "ordered"
-  }), !BULLET_LIST && /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-list",
-    tip: "Bullet List",
-    value: "bullet"
-  })), (!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "ql-formats"
-  }, !INDENT_MINUS_ONE && /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-indent",
-    tip: "Indent -1",
-    value: "-1"
-  }), !INDENT_PLUS_ONE && /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-indent",
-    tip: "Indent +1",
-    value: "+1"
-  })), !ALIGN && /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "ql-formats"
-  }, /* @__PURE__ */ import_react.default.createElement(import_TippedSelect.TippedSelect, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-align",
-    tip: "Align"
-  }), /* @__PURE__ */ import_react.default.createElement(Divider, null)), (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "ql-formats"
-  }, !FONT_COLOR && /* @__PURE__ */ import_react.default.createElement(Colors, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-color",
-    tip: "Font Color"
-  }), !FONT_BACKGROUND_COLOR && /* @__PURE__ */ import_react.default.createElement(Colors, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-background",
-    tip: "Font Background Color"
-  }), /* @__PURE__ */ import_react.default.createElement(Divider, null)), (!HYPERLINK || !IMAGE) && /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "ql-formats"
-  }, !HYPERLINK && /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-link",
-    tip: "Hyperlink: Select Text First"
-  }), !IMAGE && /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-image",
-    tip: "Insert Image"
-  }), /* @__PURE__ */ import_react.default.createElement(Divider, null)), !CLEAR_FORMAT && /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "ql-formats"
-  }, /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-clean",
-    tip: "Clear Format (Select Text)"
-  })), !SHOW_HTML && /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "ql-formats"
-  }, /* @__PURE__ */ import_react.default.createElement(Divider, null), /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    style: {
-      width: "fit-content",
-      color: "#1e79c2",
-      fontWeight: "500"
-    },
-    onClick: handleShowHTML,
-    tip: showHTML ? "SHOW TEXT" : "SHOW HTML",
-    className: "ql-customFields-html"
-  }, showHTML ? "SHOW TEXT" : "SHOW HTML")), customFields && /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "ql-formats"
-  }, /* @__PURE__ */ import_react.default.createElement(Divider, null), /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
-    zIndex: userProps?.zIndex || 1,
-    className: "ql-customFields",
-    tip: "Insert Custom Field"
-  }, /* @__PURE__ */ import_react.default.createElement(CustomFields, null))), customItems && /* @__PURE__ */ import_react.default.createElement("span", {
-    style: { display: "inline-flex" }
-  }, customItems.map((Item) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(Divider, null), /* @__PURE__ */ import_react.default.createElement(Item, null)))));
+    className: "ds-ql-custom-toolbar",
+    children: [
+      (!HEADER || !FONT || !FONT_SIZE) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+        className: "ql-formats",
+        children: [
+          !HEADER && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedSelect.TippedSelect, {
+                className: "ql-header",
+                tip: "Header",
+                values: ["", "1", "2", "3", "4", "5", "6"],
+                zIndex: userProps?.zIndex || 1
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
+            ]
+          }),
+          !FONT && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedSelect.TippedSelect, {
+                className: "ql-font",
+                defaultValue: "sans-serif",
+                options: import_constants.fonts,
+                tip: "Font",
+                values: optionsToValues(import_constants.fonts),
+                zIndex: userProps?.zIndex || 1
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
+            ]
+          }),
+          !FONT_SIZE && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedSelect.TippedSelect, {
+                className: "ql-size",
+                options: import_constants.sizes,
+                tip: "Font Size",
+                values: optionsToValues(import_constants.sizesReal),
+                zIndex: userProps?.zIndex || 1
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
+            ]
+          })
+        ]
+      }),
+      (!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+        className: "ql-formats",
+        children: [
+          !BOLD && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-bold",
+            tip: "Bold"
+          }),
+          !ITALIC && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-italic",
+            tip: "Italic"
+          }),
+          !UNDERLINE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-underline",
+            tip: "Underline"
+          }),
+          !STRIKE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-strike",
+            tip: "Strike"
+          })
+        ]
+      }),
+      (!SUB || !SUPER) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+        className: "ql-formats",
+        children: [
+          !SUB && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-script",
+            tip: "Sub",
+            value: "sub"
+          }),
+          !SUPER && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-script",
+            tip: "Super",
+            value: "super"
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
+        ]
+      }),
+      (!ORDERED_LIST || !BULLET_LIST) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+        className: "ql-formats",
+        children: [
+          !ORDERED_LIST && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-list",
+            tip: "Ordered List",
+            value: "ordered"
+          }),
+          !BULLET_LIST && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-list",
+            tip: "Bullet List",
+            value: "bullet"
+          })
+        ]
+      }),
+      (!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+        className: "ql-formats",
+        children: [
+          !INDENT_MINUS_ONE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-indent",
+            tip: "Indent -1",
+            value: "-1"
+          }),
+          !INDENT_PLUS_ONE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-indent",
+            tip: "Indent +1",
+            value: "+1"
+          })
+        ]
+      }),
+      !ALIGN && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+        className: "ql-formats",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedSelect.TippedSelect, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-align",
+            tip: "Align"
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
+        ]
+      }),
+      (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+        className: "ql-formats",
+        children: [
+          !FONT_COLOR && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Colors, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-color",
+            tip: "Font Color"
+          }),
+          !FONT_BACKGROUND_COLOR && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Colors, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-background",
+            tip: "Font Background Color"
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
+        ]
+      }),
+      (!HYPERLINK || !IMAGE) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+        className: "ql-formats",
+        children: [
+          !HYPERLINK && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-link",
+            tip: "Hyperlink: Select Text First"
+          }),
+          !IMAGE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-image",
+            tip: "Insert Image"
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
+        ]
+      }),
+      !CLEAR_FORMAT && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+        className: "ql-formats",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+          zIndex: userProps?.zIndex || 1,
+          className: "ql-clean",
+          tip: "Clear Format (Select Text)"
+        })
+      }),
+      !SHOW_HTML && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+        className: "ql-formats",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+            zIndex: userProps?.zIndex || 1,
+            style: {
+              width: "fit-content",
+              color: "#1e79c2",
+              fontWeight: "500"
+            },
+            onClick: handleShowHTML,
+            tip: showHTML ? "SHOW TEXT" : "SHOW HTML",
+            className: "ql-customFields-html",
+            children: showHTML ? "SHOW TEXT" : "SHOW HTML"
+          })
+        ]
+      }),
+      customFields && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+        className: "ql-formats",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-customFields",
+            tip: "Insert Custom Field",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomFields, {})
+          })
+        ]
+      }),
+      customItems && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+        style: { display: "inline-flex" },
+        children: customItems.map((Item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, {})
+          ]
+        }))
+      })
+    ]
+  });
 };
 //# sourceMappingURL=CustomToolbar.js.map