@elliemae/ds-codeeditor 3.32.2-next.1 → 3.33.0-next.1

package/dist/cjs/DSCodeEditor.js

@@ -0,0 +1,143 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSCodeEditor_exports = {};
+__export(DSCodeEditor_exports, {
+  CodeEditorWithSchema: () => CodeEditorWithSchema,
+  DSCodeEditor: () => DSCodeEditor,
+  default: () => DSCodeEditor_default
+});
+module.exports = __toCommonJS(DSCodeEditor_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_modal = require("@elliemae/ds-modal");
+var import_react_ace = __toESM(require("react-ace"));
+var import_DSCodeEditorForm = __toESM(require("./components/DSCodeEditorForm.js"));
+var import_mode_javascript = require("ace-builds/src-noconflict/mode-javascript.js");
+var import_theme_tomorrow = require("ace-builds/src-noconflict/theme-tomorrow.js");
+const DSCodeEditor = ({
+  containerProps = {},
+  value: defaultValue = "",
+  onSave = () => null,
+  onClose = () => null,
+  onReject = () => null,
+  onChange = () => null,
+  isOpen = false,
+  fileName = "",
+  confirmLabel = "Save",
+  maxLines = 20,
+  minLines = 20,
+  modalTitle = "Javascript Editor",
+  modalType = "confirm",
+  rejectLabel = "Close",
+  size = "large",
+  style = {},
+  useModal = true,
+  showHeader = true,
+  showSyntaxChecks = true
+}) => {
+  const [{ value, errors }, setState] = (0, import_react.useState)({
+    value: defaultValue,
+    errors: []
+  });
+  const reactAceComponent = (0, import_react.useRef)();
+  const Comp = import_react_ace.default?.default ?? import_react_ace.default;
+  const editor = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    showHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSCodeEditorForm.default, { fileName, reactAceComponent }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Comp,
+      {
+        ref: reactAceComponent,
+        editorProps: { $blockScrolling: true },
+        maxLines,
+        minLines,
+        mode: "javascript",
+        name: "ace-code-edior",
+        onChange: (val) => {
+          setState({ errors, value: val });
+          onChange(val, errors);
+        },
+        onValidate: (annotations) => setState({ value, errors: annotations }),
+        theme: "tomorrow",
+        setOptions: {
+          useWorker: showSyntaxChecks
+        },
+        value
+      }
+    )
+  ] });
+  if (!useModal)
+    return editor;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ds_modal.DSModal,
+    {
+      centered: false,
+      confirmLabel,
+      containerProps,
+      isOpen,
+      modalTitle,
+      modalType,
+      onClose: () => onClose(value, fileName, errors),
+      onConfirm: () => onSave(value, fileName, errors),
+      onReject: () => onReject(value, fileName, errors),
+      rejectLabel,
+      size,
+      style,
+      children: editor
+    }
+  );
+};
+const codeEditorProps = {
+  containerProps: import_ds_props_helpers.PropTypes.object.description("Set of Properties attached to the main container"),
+  value: import_ds_props_helpers.PropTypes.string.description("editors content").isRequired,
+  onSave: import_ds_props_helpers.PropTypes.func.description("function called when the user press save"),
+  onClose: import_ds_props_helpers.PropTypes.func.description("function called when the user closes the modal"),
+  onReject: import_ds_props_helpers.PropTypes.func.description("function called when is rejected"),
+  onChange: import_ds_props_helpers.PropTypes.func.description("function executed when code editor value changes").isRequired,
+  isOpen: import_ds_props_helpers.PropTypes.bool.description("Whether the modal is opened or not").defaultValue(false),
+  fileName: import_ds_props_helpers.PropTypes.string.description("File name to open in the editor"),
+  maxLines: import_ds_props_helpers.PropTypes.number.description("Max lines in the editor content").defaultValue(20),
+  minLines: import_ds_props_helpers.PropTypes.number.description("Min lines in the editor content").defaultValue(20),
+  modalTitle: import_ds_props_helpers.PropTypes.string.description("Modal title").defaultValue("Javascript Editor"),
+  confirmLabel: import_ds_props_helpers.PropTypes.string.description("Customize modal confirm label").defaultValue("Save"),
+  rejectLabel: import_ds_props_helpers.PropTypes.string.description("Customize modal rejection label").defaultValue("Close"),
+  modalType: import_ds_props_helpers.PropTypes.oneOf(import_ds_modal.modalTypes).description("Modal type").defaultValue("confirm"),
+  size: import_ds_props_helpers.PropTypes.oneOf(["xsmall", "small", "medium", "large", "xlarge"]).description("modal size").defaultValue("large"),
+  style: import_ds_props_helpers.PropTypes.object.description("css inline style"),
+  useModal: import_ds_props_helpers.PropTypes.bool.description("whether to use code editor inside modal or not").defaultValue(true),
+  showHeader: import_ds_props_helpers.PropTypes.bool.description("show editors header").defaultValue(true),
+  showSyntaxChecks: import_ds_props_helpers.PropTypes.bool.description("show syntax warnings and checks").defaultValue(true)
+};
+DSCodeEditor.propTypes = codeEditorProps;
+DSCodeEditor.displayName = "DSCodeEditor";
+const CodeEditorWithSchema = (0, import_ds_props_helpers.describe)(DSCodeEditor);
+CodeEditorWithSchema.propTypes = codeEditorProps;
+var DSCodeEditor_default = DSCodeEditor;
+//# sourceMappingURL=DSCodeEditor.js.map

package/dist/cjs/DSCodeEditor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSCodeEditor.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useRef } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { DSModal, modalTypes } from '@elliemae/ds-modal';\nimport { default as AceEditor } from 'react-ace';\nimport DSCodeEditorForm from './components/DSCodeEditorForm.js';\nimport 'ace-builds/src-noconflict/mode-javascript.js';\nimport 'ace-builds/src-noconflict/theme-tomorrow.js';\nconst DSCodeEditor = ({\n  containerProps = {},\n  value: defaultValue = '',\n  onSave = () => null,\n  onClose = () => null,\n  onReject = () => null,\n  onChange = () => null,\n  isOpen = false,\n  fileName = '',\n  confirmLabel = 'Save',\n  maxLines = 20,\n  minLines = 20,\n  modalTitle = 'Javascript Editor',\n  modalType = 'confirm',\n  rejectLabel = 'Close',\n  size = 'large',\n  style = {},\n  useModal = true,\n  showHeader = true,\n  showSyntaxChecks = true,\n}) => {\n  const [{ value, errors }, setState] = useState({\n    value: defaultValue,\n    errors: [],\n  });\n  const reactAceComponent = useRef();\n\n  const Comp = (AceEditor as any)?.default ?? AceEditor;\n  const editor = (\n    <>\n      {showHeader && <DSCodeEditorForm fileName={fileName} reactAceComponent={reactAceComponent} />}\n      <Comp\n        ref={reactAceComponent}\n        editorProps={{ $blockScrolling: true }}\n        maxLines={maxLines}\n        minLines={minLines}\n        mode=\"javascript\"\n        name=\"ace-code-edior\"\n        onChange={(val) => {\n          setState({ errors, value: val });\n          onChange(val, errors);\n        }}\n        onValidate={(annotations) => setState({ value, errors: annotations })}\n        theme=\"tomorrow\"\n        setOptions={{\n          useWorker: showSyntaxChecks,\n        }}\n        value={value}\n      />\n    </>\n  );\n  if (!useModal) return editor;\n  return (\n    <DSModal\n      centered={false}\n      confirmLabel={confirmLabel}\n      containerProps={containerProps}\n      isOpen={isOpen}\n      modalTitle={modalTitle}\n      modalType={modalType}\n      onClose={() => onClose(value, fileName, errors)}\n      onConfirm={() => onSave(value, fileName, errors)}\n      onReject={() => onReject(value, fileName, errors)}\n      rejectLabel={rejectLabel}\n      size={size}\n      style={style}\n    >\n      {editor}\n    </DSModal>\n  );\n};\n\nconst codeEditorProps = {\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n  value: PropTypes.string.description('editors content').isRequired,\n  onSave: PropTypes.func.description('function called when the user press save'),\n  onClose: PropTypes.func.description('function called when the user closes the modal'),\n  onReject: PropTypes.func.description('function called when is rejected'),\n  onChange: PropTypes.func.description('function executed when code editor value changes').isRequired,\n  isOpen: PropTypes.bool.description('Whether the modal is opened or not').defaultValue(false),\n  fileName: PropTypes.string.description('File name to open in the editor'),\n  maxLines: PropTypes.number.description('Max lines in the editor content').defaultValue(20),\n  minLines: PropTypes.number.description('Min lines in the editor content').defaultValue(20),\n  modalTitle: PropTypes.string.description('Modal title').defaultValue('Javascript Editor'),\n  confirmLabel: PropTypes.string.description('Customize modal confirm label').defaultValue('Save'),\n  rejectLabel: PropTypes.string.description('Customize modal rejection label').defaultValue('Close'),\n  modalType: PropTypes.oneOf(modalTypes).description('Modal type').defaultValue('confirm'),\n  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge'])\n    .description('modal size')\n    .defaultValue('large'),\n  style: PropTypes.object.description('css inline style'),\n  useModal: PropTypes.bool.description('whether to use code editor inside modal or not').defaultValue(true),\n  showHeader: PropTypes.bool.description('show editors header').defaultValue(true),\n  showSyntaxChecks: PropTypes.bool.description('show syntax warnings and checks').defaultValue(true),\n};\n\nDSCodeEditor.propTypes = codeEditorProps;\nDSCodeEditor.displayName = 'DSCodeEditor';\nconst CodeEditorWithSchema = describe(DSCodeEditor);\nCodeEditorWithSchema.propTypes = codeEditorProps;\n\nexport { CodeEditorWithSchema, DSCodeEditor };\nexport default DSCodeEditor;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["AceEditor", "DSCodeEditorForm"]
+}

package/dist/cjs/components/DSCodeEditorForm.js

@@ -0,0 +1,202 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSCodeEditorForm_exports = {};
+__export(DSCodeEditorForm_exports, {
+  default: () => DSCodeEditorForm_default
+});
+module.exports = __toCommonJS(DSCodeEditorForm_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_button = require("@elliemae/ds-button");
+var import_ds_form = require("@elliemae/ds-form");
+var import_ds_classnames = require("@elliemae/ds-classnames");
+var import_ds_icons = require("@elliemae/ds-icons");
+const blockName = "code-editor";
+const { cssClassName, classNameBlock } = (0, import_ds_classnames.convertPropToCssClassName)(blockName);
+const CheckOptionsGroup = (0, import_ds_classnames.aggregatedClasses)("div")(`${blockName}-options-group`);
+class DSCodeEditorForm extends import_react.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      find: false,
+      replace: false,
+      isCaseSensitive: false,
+      isWholeWord: false,
+      filteredText: "",
+      replaceText: ""
+    };
+    this.searchWord = this.searchWord.bind(this);
+  }
+  searchWord(isReplace, all) {
+    const {
+      reactAceComponent: {
+        current: { editor }
+      }
+    } = this.props;
+    const { isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;
+    const options = {
+      backwards: false,
+      wrap: true,
+      caseSensitive: isCaseSensitive,
+      wholeWord: isWholeWord,
+      regExp: true
+    };
+    editor.find(filteredText, options);
+    const selectedContent = editor.getSelectedText();
+    if (isReplace && replaceText && selectedContent) {
+      if (all) {
+        editor.findAll(filteredText, options);
+        editor.replaceAll(replaceText);
+      } else {
+        const range = editor.selection.getRange();
+        editor.session.replace(range, replaceText);
+      }
+    }
+  }
+  render() {
+    const { fileName } = this.props;
+    const { find, replace, isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${cssClassName}`, children: [
+      fileName ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classNameBlock("file-name"), children: [
+        "File Name: ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          " ",
+          fileName,
+          " "
+        ] })
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classNameBlock("find-replace-btn"), children: [
+        !find && !replace ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.DSButton, { buttonType: "secondary", labelText: "Find", onClick: () => this.setState({ find: true }), size: "m" }) : null,
+        !replace ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ds_button.DSButton,
+          {
+            buttonType: "secondary",
+            labelText: "Find & Replace",
+            onClick: () => this.setState({ replace: true }),
+            size: "m"
+          }
+        ) : null
+      ] }),
+      find || replace ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_form.DSInputGroup, { className: classNameBlock("find"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ds_form.DSTextBox,
+          {
+            className: "find-word",
+            fluidWidth: false,
+            id: "find-textbox",
+            onChange: (e) => this.setState({ filteredText: e.currentTarget.value }),
+            placeholder: "Find",
+            rightComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classNameBlock("next-back-btn"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.DSButton, { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallLeft, {}), size: "m" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.DSButton, { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallRight, {}), onClick: () => this.searchWord(), size: "m" })
+            ] }),
+            value: filteredText
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CheckOptionsGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_form.DSCheckbox,
+            {
+              checked: isCaseSensitive,
+              id: "case-sensitive-check",
+              labelText: "Case Sensitive",
+              name: "case-sensitive-check",
+              onChange: () => this.setState({ isCaseSensitive: !isCaseSensitive })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_form.DSCheckbox,
+            {
+              checked: isWholeWord,
+              id: "whole-word-check",
+              labelText: "Whole Word",
+              name: "whole-word-check",
+              onChange: () => this.setState({ isWholeWord: !isWholeWord })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_form.DSCheckbox,
+            {
+              checked: replace,
+              id: "replace-check",
+              labelText: "Replace",
+              name: "replace-check",
+              onChange: () => this.setState({ replace: !replace })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ds_button.DSButton,
+          {
+            buttonType: "secondary",
+            labelText: "Done",
+            onClick: () => this.setState({ replace: false, find: false }),
+            size: "m"
+          }
+        )
+      ] }) : null,
+      replace ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classNameBlock("replace"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ds_form.DSTextBox,
+          {
+            className: "find-word",
+            fluidWidth: false,
+            id: "replace-textbox",
+            onChange: (e) => this.setState({ replaceText: e.currentTarget.value }),
+            placeholder: "Replace",
+            value: replaceText
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classNameBlock("replace-btns"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_button.DSButton,
+            {
+              buttonType: "secondary",
+              labelText: "Replace",
+              onClick: () => this.searchWord(true, false),
+              size: "m"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_button.DSButton,
+            {
+              buttonType: "secondary",
+              labelText: "Replace All",
+              onClick: () => this.searchWord(true, true),
+              size: "m"
+            }
+          )
+        ] })
+      ] }) : null
+    ] });
+  }
+}
+var DSCodeEditorForm_default = DSCodeEditorForm;
+//# sourceMappingURL=DSCodeEditorForm.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/DSCodeEditorForm.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSCheckbox, DSTextBox, DSInputGroup } from '@elliemae/ds-form';\nimport { convertPropToCssClassName, aggregatedClasses } from '@elliemae/ds-classnames';\nimport { ChevronSmallLeft, ChevronSmallRight } from '@elliemae/ds-icons';\n\nconst blockName = 'code-editor';\n\nconst { cssClassName, classNameBlock } = convertPropToCssClassName(blockName);\n\nconst CheckOptionsGroup = aggregatedClasses('div')(`${blockName}-options-group`);\n\nclass DSCodeEditorForm extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      find: false,\n      replace: false,\n      isCaseSensitive: false,\n      isWholeWord: false,\n      filteredText: '',\n      replaceText: '',\n    };\n\n    this.searchWord = this.searchWord.bind(this);\n  }\n\n  searchWord(isReplace, all) {\n    const {\n      reactAceComponent: {\n        current: { editor },\n      },\n    } = this.props;\n    const { isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;\n    const options = {\n      backwards: false,\n      wrap: true,\n      caseSensitive: isCaseSensitive,\n      wholeWord: isWholeWord,\n      regExp: true,\n    };\n    editor.find(filteredText, options);\n    const selectedContent = editor.getSelectedText();\n    if (isReplace && replaceText && selectedContent) {\n      if (all) {\n        editor.findAll(filteredText, options);\n        editor.replaceAll(replaceText);\n      } else {\n        const range = editor.selection.getRange();\n        editor.session.replace(range, replaceText);\n      }\n    }\n  }\n\n  render() {\n    const { fileName } = this.props;\n\n    const { find, replace, isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;\n    return (\n      <div className={`${cssClassName}`}>\n        {fileName ? (\n          <div className={classNameBlock('file-name')}>\n            File Name: <span> {fileName} </span>\n          </div>\n        ) : null}\n        <div className={classNameBlock('find-replace-btn')}>\n          {!find && !replace ? (\n            <DSButton buttonType=\"secondary\" labelText=\"Find\" onClick={() => this.setState({ find: true })} size=\"m\" />\n          ) : null}\n          {!replace ? (\n            <DSButton\n              buttonType=\"secondary\"\n              labelText=\"Find & Replace\"\n              onClick={() => this.setState({ replace: true })}\n              size=\"m\"\n            />\n          ) : null}\n        </div>\n        {find || replace ? (\n          <DSInputGroup className={classNameBlock('find')}>\n            <DSTextBox\n              className=\"find-word\"\n              fluidWidth={false}\n              id=\"find-textbox\"\n              onChange={(e) => this.setState({ filteredText: e.currentTarget.value })}\n              placeholder=\"Find\"\n              rightComponent={\n                <div className={classNameBlock('next-back-btn')}>\n                  <DSButton icon={<ChevronSmallLeft />} size=\"m\" />\n                  <DSButton icon={<ChevronSmallRight />} onClick={() => this.searchWord()} size=\"m\" />\n                </div>\n              }\n              value={filteredText}\n            />\n            <CheckOptionsGroup>\n              <DSCheckbox\n                checked={isCaseSensitive}\n                id=\"case-sensitive-check\"\n                labelText=\"Case Sensitive\"\n                name=\"case-sensitive-check\"\n                onChange={() => this.setState({ isCaseSensitive: !isCaseSensitive })}\n              />\n              <DSCheckbox\n                checked={isWholeWord}\n                id=\"whole-word-check\"\n                labelText=\"Whole Word\"\n                name=\"whole-word-check\"\n                onChange={() => this.setState({ isWholeWord: !isWholeWord })}\n              />\n              <DSCheckbox\n                checked={replace}\n                id=\"replace-check\"\n                labelText=\"Replace\"\n                name=\"replace-check\"\n                onChange={() => this.setState({ replace: !replace })}\n              />\n            </CheckOptionsGroup>\n            <DSButton\n              buttonType=\"secondary\"\n              labelText=\"Done\"\n              onClick={() => this.setState({ replace: false, find: false })}\n              size=\"m\"\n            />\n          </DSInputGroup>\n        ) : null}\n        {replace ? (\n          <div className={classNameBlock('replace')}>\n            <DSTextBox\n              className=\"find-word\"\n              fluidWidth={false}\n              id=\"replace-textbox\"\n              onChange={(e) => this.setState({ replaceText: e.currentTarget.value })}\n              placeholder=\"Replace\"\n              value={replaceText}\n            />\n            <div className={classNameBlock('replace-btns')}>\n              <DSButton\n                buttonType=\"secondary\"\n                labelText=\"Replace\"\n                onClick={() => this.searchWord(true, false)}\n                size=\"m\"\n              />\n              <DSButton\n                buttonType=\"secondary\"\n                labelText=\"Replace All\"\n                onClick={() => this.searchWord(true, true)}\n                size=\"m\"\n              />\n            </div>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n\nexport default DSCodeEditorForm;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/components/DSCodeEditorImpl.js

@@ -0,0 +1,108 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSCodeEditorImpl_exports = {};
+__export(DSCodeEditorImpl_exports, {
+  default: () => DSCodeEditorImpl_default
+});
+module.exports = __toCommonJS(DSCodeEditorImpl_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react_ace = __toESM(require("react-ace"));
+var import_ds_modal = require("@elliemae/ds-modal");
+var import_DSCodeEditorForm = __toESM(require("./DSCodeEditorForm.js"));
+var import_mode_javascript = require("ace-builds/src-noconflict/mode-javascript.js");
+var import_theme_tomorrow = require("ace-builds/src-noconflict/theme-tomorrow.js");
+class DSCodeEditorImpl extends import_react.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value,
+      errors: []
+    };
+    this.reactAceComponent = import_react.default.createRef();
+  }
+  render() {
+    const {
+      onSave,
+      onClose,
+      onReject,
+      isOpen,
+      fileName,
+      confirmLabel,
+      maxLines,
+      minLines,
+      modalTitle,
+      modalType,
+      rejectLabel,
+      size,
+      style,
+      containerProps
+    } = this.props;
+    const { value, errors } = this.state;
+    const Comp = import_react_ace.default?.default ?? import_react_ace.default;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_ds_modal.DSModal,
+      {
+        centered: false,
+        confirmLabel,
+        containerProps,
+        isOpen,
+        modalTitle,
+        modalType,
+        onClose: () => onClose(value, fileName, errors),
+        onConfirm: () => onSave(value, fileName, errors),
+        onReject: () => onReject(value, fileName, errors),
+        rejectLabel,
+        size,
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSCodeEditorForm.default, { fileName, reactAceComponent: this.reactAceComponent }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Comp,
+            {
+              ref: this.reactAceComponent,
+              editorProps: { $blockScrolling: true },
+              maxLines,
+              minLines,
+              mode: "javascript",
+              name: "ace-code-edior",
+              onChange: (val) => this.setState({ value: val }),
+              onValidate: (annotations) => this.setState({ errors: annotations }),
+              theme: "tomorrow",
+              value
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+var DSCodeEditorImpl_default = DSCodeEditorImpl;
+//# sourceMappingURL=DSCodeEditorImpl.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/DSCodeEditorImpl.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { Component } from 'react';\nimport { default as AceEditor } from 'react-ace';\nimport { DSModal } from '@elliemae/ds-modal';\nimport DSCodeEditorForm from './DSCodeEditorForm.js';\nimport 'ace-builds/src-noconflict/mode-javascript.js';\nimport 'ace-builds/src-noconflict/theme-tomorrow.js';\n\nclass DSCodeEditorImpl extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: props.value,\n      errors: [],\n    };\n    this.reactAceComponent = React.createRef();\n  }\n\n  render() {\n    const {\n      onSave,\n      onClose,\n      onReject,\n      isOpen,\n      fileName,\n      confirmLabel,\n      maxLines,\n      minLines,\n      modalTitle,\n      modalType,\n      rejectLabel,\n      size,\n      style,\n      containerProps,\n    } = this.props;\n\n    const { value, errors } = this.state;\n    const Comp = (AceEditor as any)?.default ?? AceEditor;\n    return (\n      <DSModal\n        centered={false}\n        confirmLabel={confirmLabel}\n        containerProps={containerProps}\n        isOpen={isOpen}\n        modalTitle={modalTitle}\n        modalType={modalType}\n        onClose={() => onClose(value, fileName, errors)}\n        onConfirm={() => onSave(value, fileName, errors)}\n        onReject={() => onReject(value, fileName, errors)}\n        rejectLabel={rejectLabel}\n        size={size}\n        style={style}\n      >\n        <DSCodeEditorForm fileName={fileName} reactAceComponent={this.reactAceComponent} />\n        <Comp\n          ref={this.reactAceComponent}\n          editorProps={{ $blockScrolling: true }}\n          maxLines={maxLines}\n          minLines={minLines}\n          mode=\"javascript\"\n          name=\"ace-code-edior\"\n          onChange={(val) => this.setState({ value: val })}\n          onValidate={(annotations) => this.setState({ errors: annotations })}\n          theme=\"tomorrow\"\n          value={value}\n        />\n      </DSModal>\n    );\n  }\n}\n\nexport default DSCodeEditorImpl;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCjB;AAtCN,mBAAiC;AACjC,uBAAqC;AACrC,sBAAwB;AACxB,8BAA6B;AAC7B,6BAAO;AACP,4BAAO;AAEP,MAAM,yBAAyB,uBAAU;AAAA,EACvC,YAAY,OAAO;AACjB,UAAM,KAAK;AACX,SAAK,QAAQ;AAAA,MACX,OAAO,MAAM;AAAA,MACb,QAAQ,CAAC;AAAA,IACX;AACA,SAAK,oBAAoB,aAAAA,QAAM,UAAU;AAAA,EAC3C;AAAA,EAEA,SAAS;AACP,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,KAAK;AAET,UAAM,EAAE,OAAO,OAAO,IAAI,KAAK;AAC/B,UAAM,OAAQ,iBAAAC,SAAmB,WAAW,iBAAAA;AAC5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,MAAM,QAAQ,OAAO,UAAU,MAAM;AAAA,QAC9C,WAAW,MAAM,OAAO,OAAO,UAAU,MAAM;AAAA,QAC/C,UAAU,MAAM,SAAS,OAAO,UAAU,MAAM;AAAA,QAChD;AAAA,QACA;AAAA,QACA;AAAA,QAEA;AAAA,sDAAC,wBAAAC,SAAA,EAAiB,UAAoB,mBAAmB,KAAK,mBAAmB;AAAA,UACjF;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,KAAK;AAAA,cACV,aAAa,EAAE,iBAAiB,KAAK;AAAA,cACrC;AAAA,cACA;AAAA,cACA,MAAK;AAAA,cACL,MAAK;AAAA,cACL,UAAU,CAAC,QAAQ,KAAK,SAAS,EAAE,OAAO,IAAI,CAAC;AAAA,cAC/C,YAAY,CAAC,gBAAgB,KAAK,SAAS,EAAE,QAAQ,YAAY,CAAC;AAAA,cAClE,OAAM;AAAA,cACN;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,IAAO,2BAAQ;",
+  "names": ["React", "AceEditor", "DSCodeEditorForm"]
+}

package/dist/cjs/index.js

@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -29,10 +28,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
-  default: () => import_ds_legacy_codeeditor.default
+  CodeEditorWithSchema: () => import_DSCodeEditor.CodeEditorWithSchema,
+  DSCodeEditor: () => import_DSCodeEditor.DSCodeEditor,
+  default: () => import_DSCodeEditor.default
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-__reExport(src_exports, require("@elliemae/ds-legacy-codeeditor"), module.exports);
-var import_ds_legacy_codeeditor = __toESM(require("@elliemae/ds-legacy-codeeditor"));
+var import_DSCodeEditor = __toESM(require("./DSCodeEditor.js"));
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from '@elliemae/ds-legacy-codeeditor';\nexport { default } from '@elliemae/ds-legacy-codeeditor';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,2CAAd;AACA,kCAAwB;",
+  "sourcesContent": ["export { default, DSCodeEditor, CodeEditorWithSchema } from './DSCodeEditor.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA4D;",
   "names": []
 }

package/dist/esm/DSCodeEditor.js

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { describe, PropTypes } from "@elliemae/ds-props-helpers";
+import { DSModal, modalTypes } from "@elliemae/ds-modal";
+import { default as AceEditor } from "react-ace";
+import DSCodeEditorForm from "./components/DSCodeEditorForm.js";
+import "ace-builds/src-noconflict/mode-javascript.js";
+import "ace-builds/src-noconflict/theme-tomorrow.js";
+const DSCodeEditor = ({
+  containerProps = {},
+  value: defaultValue = "",
+  onSave = () => null,
+  onClose = () => null,
+  onReject = () => null,
+  onChange = () => null,
+  isOpen = false,
+  fileName = "",
+  confirmLabel = "Save",
+  maxLines = 20,
+  minLines = 20,
+  modalTitle = "Javascript Editor",
+  modalType = "confirm",
+  rejectLabel = "Close",
+  size = "large",
+  style = {},
+  useModal = true,
+  showHeader = true,
+  showSyntaxChecks = true
+}) => {
+  const [{ value, errors }, setState] = useState({
+    value: defaultValue,
+    errors: []
+  });
+  const reactAceComponent = useRef();
+  const Comp = AceEditor?.default ?? AceEditor;
+  const editor = /* @__PURE__ */ jsxs(Fragment, { children: [
+    showHeader && /* @__PURE__ */ jsx(DSCodeEditorForm, { fileName, reactAceComponent }),
+    /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref: reactAceComponent,
+        editorProps: { $blockScrolling: true },
+        maxLines,
+        minLines,
+        mode: "javascript",
+        name: "ace-code-edior",
+        onChange: (val) => {
+          setState({ errors, value: val });
+          onChange(val, errors);
+        },
+        onValidate: (annotations) => setState({ value, errors: annotations }),
+        theme: "tomorrow",
+        setOptions: {
+          useWorker: showSyntaxChecks
+        },
+        value
+      }
+    )
+  ] });
+  if (!useModal)
+    return editor;
+  return /* @__PURE__ */ jsx(
+    DSModal,
+    {
+      centered: false,
+      confirmLabel,
+      containerProps,
+      isOpen,
+      modalTitle,
+      modalType,
+      onClose: () => onClose(value, fileName, errors),
+      onConfirm: () => onSave(value, fileName, errors),
+      onReject: () => onReject(value, fileName, errors),
+      rejectLabel,
+      size,
+      style,
+      children: editor
+    }
+  );
+};
+const codeEditorProps = {
+  containerProps: PropTypes.object.description("Set of Properties attached to the main container"),
+  value: PropTypes.string.description("editors content").isRequired,
+  onSave: PropTypes.func.description("function called when the user press save"),
+  onClose: PropTypes.func.description("function called when the user closes the modal"),
+  onReject: PropTypes.func.description("function called when is rejected"),
+  onChange: PropTypes.func.description("function executed when code editor value changes").isRequired,
+  isOpen: PropTypes.bool.description("Whether the modal is opened or not").defaultValue(false),
+  fileName: PropTypes.string.description("File name to open in the editor"),
+  maxLines: PropTypes.number.description("Max lines in the editor content").defaultValue(20),
+  minLines: PropTypes.number.description("Min lines in the editor content").defaultValue(20),
+  modalTitle: PropTypes.string.description("Modal title").defaultValue("Javascript Editor"),
+  confirmLabel: PropTypes.string.description("Customize modal confirm label").defaultValue("Save"),
+  rejectLabel: PropTypes.string.description("Customize modal rejection label").defaultValue("Close"),
+  modalType: PropTypes.oneOf(modalTypes).description("Modal type").defaultValue("confirm"),
+  size: PropTypes.oneOf(["xsmall", "small", "medium", "large", "xlarge"]).description("modal size").defaultValue("large"),
+  style: PropTypes.object.description("css inline style"),
+  useModal: PropTypes.bool.description("whether to use code editor inside modal or not").defaultValue(true),
+  showHeader: PropTypes.bool.description("show editors header").defaultValue(true),
+  showSyntaxChecks: PropTypes.bool.description("show syntax warnings and checks").defaultValue(true)
+};
+DSCodeEditor.propTypes = codeEditorProps;
+DSCodeEditor.displayName = "DSCodeEditor";
+const CodeEditorWithSchema = describe(DSCodeEditor);
+CodeEditorWithSchema.propTypes = codeEditorProps;
+var DSCodeEditor_default = DSCodeEditor;
+export {
+  CodeEditorWithSchema,
+  DSCodeEditor,
+  DSCodeEditor_default as default
+};
+//# sourceMappingURL=DSCodeEditor.js.map

package/dist/esm/DSCodeEditor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSCodeEditor.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useRef } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { DSModal, modalTypes } from '@elliemae/ds-modal';\nimport { default as AceEditor } from 'react-ace';\nimport DSCodeEditorForm from './components/DSCodeEditorForm.js';\nimport 'ace-builds/src-noconflict/mode-javascript.js';\nimport 'ace-builds/src-noconflict/theme-tomorrow.js';\nconst DSCodeEditor = ({\n  containerProps = {},\n  value: defaultValue = '',\n  onSave = () => null,\n  onClose = () => null,\n  onReject = () => null,\n  onChange = () => null,\n  isOpen = false,\n  fileName = '',\n  confirmLabel = 'Save',\n  maxLines = 20,\n  minLines = 20,\n  modalTitle = 'Javascript Editor',\n  modalType = 'confirm',\n  rejectLabel = 'Close',\n  size = 'large',\n  style = {},\n  useModal = true,\n  showHeader = true,\n  showSyntaxChecks = true,\n}) => {\n  const [{ value, errors }, setState] = useState({\n    value: defaultValue,\n    errors: [],\n  });\n  const reactAceComponent = useRef();\n\n  const Comp = (AceEditor as any)?.default ?? AceEditor;\n  const editor = (\n    <>\n      {showHeader && <DSCodeEditorForm fileName={fileName} reactAceComponent={reactAceComponent} />}\n      <Comp\n        ref={reactAceComponent}\n        editorProps={{ $blockScrolling: true }}\n        maxLines={maxLines}\n        minLines={minLines}\n        mode=\"javascript\"\n        name=\"ace-code-edior\"\n        onChange={(val) => {\n          setState({ errors, value: val });\n          onChange(val, errors);\n        }}\n        onValidate={(annotations) => setState({ value, errors: annotations })}\n        theme=\"tomorrow\"\n        setOptions={{\n          useWorker: showSyntaxChecks,\n        }}\n        value={value}\n      />\n    </>\n  );\n  if (!useModal) return editor;\n  return (\n    <DSModal\n      centered={false}\n      confirmLabel={confirmLabel}\n      containerProps={containerProps}\n      isOpen={isOpen}\n      modalTitle={modalTitle}\n      modalType={modalType}\n      onClose={() => onClose(value, fileName, errors)}\n      onConfirm={() => onSave(value, fileName, errors)}\n      onReject={() => onReject(value, fileName, errors)}\n      rejectLabel={rejectLabel}\n      size={size}\n      style={style}\n    >\n      {editor}\n    </DSModal>\n  );\n};\n\nconst codeEditorProps = {\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n  value: PropTypes.string.description('editors content').isRequired,\n  onSave: PropTypes.func.description('function called when the user press save'),\n  onClose: PropTypes.func.description('function called when the user closes the modal'),\n  onReject: PropTypes.func.description('function called when is rejected'),\n  onChange: PropTypes.func.description('function executed when code editor value changes').isRequired,\n  isOpen: PropTypes.bool.description('Whether the modal is opened or not').defaultValue(false),\n  fileName: PropTypes.string.description('File name to open in the editor'),\n  maxLines: PropTypes.number.description('Max lines in the editor content').defaultValue(20),\n  minLines: PropTypes.number.description('Min lines in the editor content').defaultValue(20),\n  modalTitle: PropTypes.string.description('Modal title').defaultValue('Javascript Editor'),\n  confirmLabel: PropTypes.string.description('Customize modal confirm label').defaultValue('Save'),\n  rejectLabel: PropTypes.string.description('Customize modal rejection label').defaultValue('Close'),\n  modalType: PropTypes.oneOf(modalTypes).description('Modal type').defaultValue('confirm'),\n  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge'])\n    .description('modal size')\n    .defaultValue('large'),\n  style: PropTypes.object.description('css inline style'),\n  useModal: PropTypes.bool.description('whether to use code editor inside modal or not').defaultValue(true),\n  showHeader: PropTypes.bool.description('show editors header').defaultValue(true),\n  showSyntaxChecks: PropTypes.bool.description('show syntax warnings and checks').defaultValue(true),\n};\n\nDSCodeEditor.propTypes = codeEditorProps;\nDSCodeEditor.displayName = 'DSCodeEditor';\nconst CodeEditorWithSchema = describe(DSCodeEditor);\nCodeEditorWithSchema.propTypes = codeEditorProps;\n\nexport { CodeEditorWithSchema, DSCodeEditor };\nexport default DSCodeEditor;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/components/DSCodeEditorForm.js

@@ -0,0 +1,172 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Component } from "react";
+import { DSButton } from "@elliemae/ds-button";
+import { DSCheckbox, DSTextBox, DSInputGroup } from "@elliemae/ds-form";
+import { convertPropToCssClassName, aggregatedClasses } from "@elliemae/ds-classnames";
+import { ChevronSmallLeft, ChevronSmallRight } from "@elliemae/ds-icons";
+const blockName = "code-editor";
+const { cssClassName, classNameBlock } = convertPropToCssClassName(blockName);
+const CheckOptionsGroup = aggregatedClasses("div")(`${blockName}-options-group`);
+class DSCodeEditorForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      find: false,
+      replace: false,
+      isCaseSensitive: false,
+      isWholeWord: false,
+      filteredText: "",
+      replaceText: ""
+    };
+    this.searchWord = this.searchWord.bind(this);
+  }
+  searchWord(isReplace, all) {
+    const {
+      reactAceComponent: {
+        current: { editor }
+      }
+    } = this.props;
+    const { isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;
+    const options = {
+      backwards: false,
+      wrap: true,
+      caseSensitive: isCaseSensitive,
+      wholeWord: isWholeWord,
+      regExp: true
+    };
+    editor.find(filteredText, options);
+    const selectedContent = editor.getSelectedText();
+    if (isReplace && replaceText && selectedContent) {
+      if (all) {
+        editor.findAll(filteredText, options);
+        editor.replaceAll(replaceText);
+      } else {
+        const range = editor.selection.getRange();
+        editor.session.replace(range, replaceText);
+      }
+    }
+  }
+  render() {
+    const { fileName } = this.props;
+    const { find, replace, isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;
+    return /* @__PURE__ */ jsxs("div", { className: `${cssClassName}`, children: [
+      fileName ? /* @__PURE__ */ jsxs("div", { className: classNameBlock("file-name"), children: [
+        "File Name: ",
+        /* @__PURE__ */ jsxs("span", { children: [
+          " ",
+          fileName,
+          " "
+        ] })
+      ] }) : null,
+      /* @__PURE__ */ jsxs("div", { className: classNameBlock("find-replace-btn"), children: [
+        !find && !replace ? /* @__PURE__ */ jsx(DSButton, { buttonType: "secondary", labelText: "Find", onClick: () => this.setState({ find: true }), size: "m" }) : null,
+        !replace ? /* @__PURE__ */ jsx(
+          DSButton,
+          {
+            buttonType: "secondary",
+            labelText: "Find & Replace",
+            onClick: () => this.setState({ replace: true }),
+            size: "m"
+          }
+        ) : null
+      ] }),
+      find || replace ? /* @__PURE__ */ jsxs(DSInputGroup, { className: classNameBlock("find"), children: [
+        /* @__PURE__ */ jsx(
+          DSTextBox,
+          {
+            className: "find-word",
+            fluidWidth: false,
+            id: "find-textbox",
+            onChange: (e) => this.setState({ filteredText: e.currentTarget.value }),
+            placeholder: "Find",
+            rightComponent: /* @__PURE__ */ jsxs("div", { className: classNameBlock("next-back-btn"), children: [
+              /* @__PURE__ */ jsx(DSButton, { icon: /* @__PURE__ */ jsx(ChevronSmallLeft, {}), size: "m" }),
+              /* @__PURE__ */ jsx(DSButton, { icon: /* @__PURE__ */ jsx(ChevronSmallRight, {}), onClick: () => this.searchWord(), size: "m" })
+            ] }),
+            value: filteredText
+          }
+        ),
+        /* @__PURE__ */ jsxs(CheckOptionsGroup, { children: [
+          /* @__PURE__ */ jsx(
+            DSCheckbox,
+            {
+              checked: isCaseSensitive,
+              id: "case-sensitive-check",
+              labelText: "Case Sensitive",
+              name: "case-sensitive-check",
+              onChange: () => this.setState({ isCaseSensitive: !isCaseSensitive })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DSCheckbox,
+            {
+              checked: isWholeWord,
+              id: "whole-word-check",
+              labelText: "Whole Word",
+              name: "whole-word-check",
+              onChange: () => this.setState({ isWholeWord: !isWholeWord })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DSCheckbox,
+            {
+              checked: replace,
+              id: "replace-check",
+              labelText: "Replace",
+              name: "replace-check",
+              onChange: () => this.setState({ replace: !replace })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          DSButton,
+          {
+            buttonType: "secondary",
+            labelText: "Done",
+            onClick: () => this.setState({ replace: false, find: false }),
+            size: "m"
+          }
+        )
+      ] }) : null,
+      replace ? /* @__PURE__ */ jsxs("div", { className: classNameBlock("replace"), children: [
+        /* @__PURE__ */ jsx(
+          DSTextBox,
+          {
+            className: "find-word",
+            fluidWidth: false,
+            id: "replace-textbox",
+            onChange: (e) => this.setState({ replaceText: e.currentTarget.value }),
+            placeholder: "Replace",
+            value: replaceText
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: classNameBlock("replace-btns"), children: [
+          /* @__PURE__ */ jsx(
+            DSButton,
+            {
+              buttonType: "secondary",
+              labelText: "Replace",
+              onClick: () => this.searchWord(true, false),
+              size: "m"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DSButton,
+            {
+              buttonType: "secondary",
+              labelText: "Replace All",
+              onClick: () => this.searchWord(true, true),
+              size: "m"
+            }
+          )
+        ] })
+      ] }) : null
+    ] });
+  }
+}
+var DSCodeEditorForm_default = DSCodeEditorForm;
+export {
+  DSCodeEditorForm_default as default
+};
+//# sourceMappingURL=DSCodeEditorForm.js.map

package/dist/esm/components/DSCodeEditorForm.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/DSCodeEditorForm.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSCheckbox, DSTextBox, DSInputGroup } from '@elliemae/ds-form';\nimport { convertPropToCssClassName, aggregatedClasses } from '@elliemae/ds-classnames';\nimport { ChevronSmallLeft, ChevronSmallRight } from '@elliemae/ds-icons';\n\nconst blockName = 'code-editor';\n\nconst { cssClassName, classNameBlock } = convertPropToCssClassName(blockName);\n\nconst CheckOptionsGroup = aggregatedClasses('div')(`${blockName}-options-group`);\n\nclass DSCodeEditorForm extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      find: false,\n      replace: false,\n      isCaseSensitive: false,\n      isWholeWord: false,\n      filteredText: '',\n      replaceText: '',\n    };\n\n    this.searchWord = this.searchWord.bind(this);\n  }\n\n  searchWord(isReplace, all) {\n    const {\n      reactAceComponent: {\n        current: { editor },\n      },\n    } = this.props;\n    const { isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;\n    const options = {\n      backwards: false,\n      wrap: true,\n      caseSensitive: isCaseSensitive,\n      wholeWord: isWholeWord,\n      regExp: true,\n    };\n    editor.find(filteredText, options);\n    const selectedContent = editor.getSelectedText();\n    if (isReplace && replaceText && selectedContent) {\n      if (all) {\n        editor.findAll(filteredText, options);\n        editor.replaceAll(replaceText);\n      } else {\n        const range = editor.selection.getRange();\n        editor.session.replace(range, replaceText);\n      }\n    }\n  }\n\n  render() {\n    const { fileName } = this.props;\n\n    const { find, replace, isCaseSensitive, isWholeWord, filteredText, replaceText } = this.state;\n    return (\n      <div className={`${cssClassName}`}>\n        {fileName ? (\n          <div className={classNameBlock('file-name')}>\n            File Name: <span> {fileName} </span>\n          </div>\n        ) : null}\n        <div className={classNameBlock('find-replace-btn')}>\n          {!find && !replace ? (\n            <DSButton buttonType=\"secondary\" labelText=\"Find\" onClick={() => this.setState({ find: true })} size=\"m\" />\n          ) : null}\n          {!replace ? (\n            <DSButton\n              buttonType=\"secondary\"\n              labelText=\"Find & Replace\"\n              onClick={() => this.setState({ replace: true })}\n              size=\"m\"\n            />\n          ) : null}\n        </div>\n        {find || replace ? (\n          <DSInputGroup className={classNameBlock('find')}>\n            <DSTextBox\n              className=\"find-word\"\n              fluidWidth={false}\n              id=\"find-textbox\"\n              onChange={(e) => this.setState({ filteredText: e.currentTarget.value })}\n              placeholder=\"Find\"\n              rightComponent={\n                <div className={classNameBlock('next-back-btn')}>\n                  <DSButton icon={<ChevronSmallLeft />} size=\"m\" />\n                  <DSButton icon={<ChevronSmallRight />} onClick={() => this.searchWord()} size=\"m\" />\n                </div>\n              }\n              value={filteredText}\n            />\n            <CheckOptionsGroup>\n              <DSCheckbox\n                checked={isCaseSensitive}\n                id=\"case-sensitive-check\"\n                labelText=\"Case Sensitive\"\n                name=\"case-sensitive-check\"\n                onChange={() => this.setState({ isCaseSensitive: !isCaseSensitive })}\n              />\n              <DSCheckbox\n                checked={isWholeWord}\n                id=\"whole-word-check\"\n                labelText=\"Whole Word\"\n                name=\"whole-word-check\"\n                onChange={() => this.setState({ isWholeWord: !isWholeWord })}\n              />\n              <DSCheckbox\n                checked={replace}\n                id=\"replace-check\"\n                labelText=\"Replace\"\n                name=\"replace-check\"\n                onChange={() => this.setState({ replace: !replace })}\n              />\n            </CheckOptionsGroup>\n            <DSButton\n              buttonType=\"secondary\"\n              labelText=\"Done\"\n              onClick={() => this.setState({ replace: false, find: false })}\n              size=\"m\"\n            />\n          </DSInputGroup>\n        ) : null}\n        {replace ? (\n          <div className={classNameBlock('replace')}>\n            <DSTextBox\n              className=\"find-word\"\n              fluidWidth={false}\n              id=\"replace-textbox\"\n              onChange={(e) => this.setState({ replaceText: e.currentTarget.value })}\n              placeholder=\"Replace\"\n              value={replaceText}\n            />\n            <div className={classNameBlock('replace-btns')}>\n              <DSButton\n                buttonType=\"secondary\"\n                labelText=\"Replace\"\n                onClick={() => this.searchWord(true, false)}\n                size=\"m\"\n              />\n              <DSButton\n                buttonType=\"secondary\"\n                labelText=\"Replace All\"\n                onClick={() => this.searchWord(true, true)}\n                size=\"m\"\n              />\n            </div>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n\nexport default DSCodeEditorForm;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/components/DSCodeEditorImpl.js

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { Component } from "react";
+import { default as AceEditor } from "react-ace";
+import { DSModal } from "@elliemae/ds-modal";
+import DSCodeEditorForm from "./DSCodeEditorForm.js";
+import "ace-builds/src-noconflict/mode-javascript.js";
+import "ace-builds/src-noconflict/theme-tomorrow.js";
+class DSCodeEditorImpl extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value,
+      errors: []
+    };
+    this.reactAceComponent = React2.createRef();
+  }
+  render() {
+    const {
+      onSave,
+      onClose,
+      onReject,
+      isOpen,
+      fileName,
+      confirmLabel,
+      maxLines,
+      minLines,
+      modalTitle,
+      modalType,
+      rejectLabel,
+      size,
+      style,
+      containerProps
+    } = this.props;
+    const { value, errors } = this.state;
+    const Comp = AceEditor?.default ?? AceEditor;
+    return /* @__PURE__ */ jsxs(
+      DSModal,
+      {
+        centered: false,
+        confirmLabel,
+        containerProps,
+        isOpen,
+        modalTitle,
+        modalType,
+        onClose: () => onClose(value, fileName, errors),
+        onConfirm: () => onSave(value, fileName, errors),
+        onReject: () => onReject(value, fileName, errors),
+        rejectLabel,
+        size,
+        style,
+        children: [
+          /* @__PURE__ */ jsx(DSCodeEditorForm, { fileName, reactAceComponent: this.reactAceComponent }),
+          /* @__PURE__ */ jsx(
+            Comp,
+            {
+              ref: this.reactAceComponent,
+              editorProps: { $blockScrolling: true },
+              maxLines,
+              minLines,
+              mode: "javascript",
+              name: "ace-code-edior",
+              onChange: (val) => this.setState({ value: val }),
+              onValidate: (annotations) => this.setState({ errors: annotations }),
+              theme: "tomorrow",
+              value
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+var DSCodeEditorImpl_default = DSCodeEditorImpl;
+export {
+  DSCodeEditorImpl_default as default
+};
+//# sourceMappingURL=DSCodeEditorImpl.js.map

package/dist/esm/components/DSCodeEditorImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/DSCodeEditorImpl.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { Component } from 'react';\nimport { default as AceEditor } from 'react-ace';\nimport { DSModal } from '@elliemae/ds-modal';\nimport DSCodeEditorForm from './DSCodeEditorForm.js';\nimport 'ace-builds/src-noconflict/mode-javascript.js';\nimport 'ace-builds/src-noconflict/theme-tomorrow.js';\n\nclass DSCodeEditorImpl extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: props.value,\n      errors: [],\n    };\n    this.reactAceComponent = React.createRef();\n  }\n\n  render() {\n    const {\n      onSave,\n      onClose,\n      onReject,\n      isOpen,\n      fileName,\n      confirmLabel,\n      maxLines,\n      minLines,\n      modalTitle,\n      modalType,\n      rejectLabel,\n      size,\n      style,\n      containerProps,\n    } = this.props;\n\n    const { value, errors } = this.state;\n    const Comp = (AceEditor as any)?.default ?? AceEditor;\n    return (\n      <DSModal\n        centered={false}\n        confirmLabel={confirmLabel}\n        containerProps={containerProps}\n        isOpen={isOpen}\n        modalTitle={modalTitle}\n        modalType={modalType}\n        onClose={() => onClose(value, fileName, errors)}\n        onConfirm={() => onSave(value, fileName, errors)}\n        onReject={() => onReject(value, fileName, errors)}\n        rejectLabel={rejectLabel}\n        size={size}\n        style={style}\n      >\n        <DSCodeEditorForm fileName={fileName} reactAceComponent={this.reactAceComponent} />\n        <Comp\n          ref={this.reactAceComponent}\n          editorProps={{ $blockScrolling: true }}\n          maxLines={maxLines}\n          minLines={minLines}\n          mode=\"javascript\"\n          name=\"ace-code-edior\"\n          onChange={(val) => this.setState({ value: val })}\n          onValidate={(annotations) => this.setState({ errors: annotations })}\n          theme=\"tomorrow\"\n          value={value}\n        />\n      </DSModal>\n    );\n  }\n}\n\nexport default DSCodeEditorImpl;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsCjB,SAcE,KAdF;AAtCN,OAAOA,UAAS,iBAAiB;AACjC,SAAS,WAAW,iBAAiB;AACrC,SAAS,eAAe;AACxB,OAAO,sBAAsB;AAC7B,OAAO;AACP,OAAO;AAEP,MAAM,yBAAyB,UAAU;AAAA,EACvC,YAAY,OAAO;AACjB,UAAM,KAAK;AACX,SAAK,QAAQ;AAAA,MACX,OAAO,MAAM;AAAA,MACb,QAAQ,CAAC;AAAA,IACX;AACA,SAAK,oBAAoBA,OAAM,UAAU;AAAA,EAC3C;AAAA,EAEA,SAAS;AACP,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,KAAK;AAET,UAAM,EAAE,OAAO,OAAO,IAAI,KAAK;AAC/B,UAAM,OAAQ,WAAmB,WAAW;AAC5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,MAAM,QAAQ,OAAO,UAAU,MAAM;AAAA,QAC9C,WAAW,MAAM,OAAO,OAAO,UAAU,MAAM;AAAA,QAC/C,UAAU,MAAM,SAAS,OAAO,UAAU,MAAM;AAAA,QAChD;AAAA,QACA;AAAA,QACA;AAAA,QAEA;AAAA,8BAAC,oBAAiB,UAAoB,mBAAmB,KAAK,mBAAmB;AAAA,UACjF;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,KAAK;AAAA,cACV,aAAa,EAAE,iBAAiB,KAAK;AAAA,cACrC;AAAA,cACA;AAAA,cACA,MAAK;AAAA,cACL,MAAK;AAAA,cACL,UAAU,CAAC,QAAQ,KAAK,SAAS,EAAE,OAAO,IAAI,CAAC;AAAA,cAC/C,YAAY,CAAC,gBAAgB,KAAK,SAAS,EAAE,QAAQ,YAAY,CAAC;AAAA,cAClE,OAAM;AAAA,cACN;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,IAAO,2BAAQ;",
+  "names": ["React"]
+}

package/dist/esm/index.js

@@ -1,7 +1,8 @@
 import * as React from "react";
-export * from "@elliemae/ds-legacy-codeeditor";
-import { default as default2 } from "@elliemae/ds-legacy-codeeditor";
+import { default as default2, DSCodeEditor, CodeEditorWithSchema } from "./DSCodeEditor.js";
 export {
+  CodeEditorWithSchema,
+  DSCodeEditor,
   default2 as default
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from '@elliemae/ds-legacy-codeeditor';\nexport { default } from '@elliemae/ds-legacy-codeeditor';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,SAAS,WAAAA,gBAAe;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, DSCodeEditor, CodeEditorWithSchema } from './DSCodeEditor.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAAA,UAAS,cAAc,4BAA4B;",
   "names": ["default"]
 }

package/dist/types/DSCodeEditor.d.ts

@@ -0,0 +1,70 @@
+import 'ace-builds/src-noconflict/mode-javascript.js';
+import 'ace-builds/src-noconflict/theme-tomorrow.js';
+declare const DSCodeEditor: {
+    ({ containerProps, value: defaultValue, onSave, onClose, onReject, onChange, isOpen, fileName, confirmLabel, maxLines, minLines, modalTitle, modalType, rejectLabel, size, style, useModal, showHeader, showSyntaxChecks, }: {
+        containerProps?: {} | undefined;
+        value?: string | undefined;
+        onSave?: (() => null) | undefined;
+        onClose?: (() => null) | undefined;
+        onReject?: (() => null) | undefined;
+        onChange?: (() => null) | undefined;
+        isOpen?: boolean | undefined;
+        fileName?: string | undefined;
+        confirmLabel?: string | undefined;
+        maxLines?: number | undefined;
+        minLines?: number | undefined;
+        modalTitle?: string | undefined;
+        modalType?: string | undefined;
+        rejectLabel?: string | undefined;
+        size?: string | undefined;
+        style?: {} | undefined;
+        useModal?: boolean | undefined;
+        showHeader?: boolean | undefined;
+        showSyntaxChecks?: boolean | undefined;
+    }): import("react/jsx-runtime.js").JSX.Element;
+    propTypes: {
+        containerProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        value: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        onSave: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        onClose: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        onReject: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        onChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        isOpen: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        fileName: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        maxLines: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        minLines: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        modalTitle: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        confirmLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        rejectLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        modalType: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        size: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        style: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        useModal: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        showHeader: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        showSyntaxChecks: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    };
+    displayName: string;
+};
+declare const CodeEditorWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
+    containerProps?: {} | undefined;
+    value?: string | undefined;
+    onSave?: (() => null) | undefined;
+    onClose?: (() => null) | undefined;
+    onReject?: (() => null) | undefined;
+    onChange?: (() => null) | undefined;
+    isOpen?: boolean | undefined;
+    fileName?: string | undefined;
+    confirmLabel?: string | undefined;
+    maxLines?: number | undefined;
+    minLines?: number | undefined;
+    modalTitle?: string | undefined;
+    modalType?: string | undefined;
+    rejectLabel?: string | undefined;
+    size?: string | undefined;
+    style?: {} | undefined;
+    useModal?: boolean | undefined;
+    showHeader?: boolean | undefined;
+    showSyntaxChecks?: boolean | undefined;
+}>;
+export { CodeEditorWithSchema, DSCodeEditor };
+export default DSCodeEditor;

package/dist/types/components/DSCodeEditorForm.d.ts

@@ -0,0 +1,7 @@
+import { Component } from 'react';
+declare class DSCodeEditorForm extends Component {
+    constructor(props: any);
+    searchWord(isReplace: any, all: any): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default DSCodeEditorForm;

package/dist/types/components/DSCodeEditorImpl.d.ts

@@ -0,0 +1,8 @@
+import { Component } from 'react';
+import 'ace-builds/src-noconflict/mode-javascript.js';
+import 'ace-builds/src-noconflict/theme-tomorrow.js';
+declare class DSCodeEditorImpl extends Component {
+    constructor(props: any);
+    render(): import("react/jsx-runtime.js").JSX.Element;
+}
+export default DSCodeEditorImpl;

package/dist/types/index.d.ts

@@ -1,2 +1 @@
-export * from '@elliemae/ds-legacy-codeeditor';
-export { default } from '@elliemae/ds-legacy-codeeditor';
+export { default, DSCodeEditor, CodeEditorWithSchema } from './DSCodeEditor.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-codeeditor",
-  "version": "3.32.2-next.1",
+  "version": "3.33.0-next.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Code Editor",
   "files": [
@@ -35,12 +35,19 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-legacy-codeeditor": "^1.0.5"
+    "ace-builds": "~1.16.0",
+    "react-ace": "~10.1.0",
+    "@elliemae/ds-button": "3.33.0-next.1",
+    "@elliemae/ds-classnames": "3.33.0-next.1",
+    "@elliemae/ds-icons": "3.33.0-next.1",
+    "@elliemae/ds-props-helpers": "3.33.0-next.1",
+    "@elliemae/ds-form": "3.33.0-next.1",
+    "@elliemae/ds-modal": "3.33.0-next.1"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.32.2-next.1"
+    "@elliemae/ds-monorepo-devops": "3.33.0-next.1"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",