@pareto-engineering/design-system 5.0.0 → 5.0.2

package/dist/es/a/Charts/Common/CustomTooltipContent/styles.scss

@@ -0,0 +1,22 @@
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+$default-padding: 1rem;
+$default-text-font-size: calc(var(--s-1) * 1rem);
+$default-border-radius: .25rem;
+$default-border-line-width: .0625rem;
+
+.#{bem.$base} {
+  &.custom-tooltip-content {
+    background-color: var(--background-far);
+    border: $default-border-line-width solid var(--ui-lines);
+    border-radius: $default-border-radius;
+    padding: calc($default-padding * .25);
+
+    .label {
+      color: var(--hard-paragraph);
+      font-size: $default-text-font-size;
+      margin: calc($default-margin * .25);
+    }
+  }
+}

package/dist/es/a/Charts/Common/YLabelsDropDown/YlabelsDropDown.js

@@ -0,0 +1,86 @@
+// DropdownStatus.js
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import { snakeCaseToTitleCase } from "../../../../utils";
+import "./styles.scss";
+const baseClassName = styleNames.base;
+const componentClassName = 'y-labels-dropdown';
+const YLabelsDropDown = ({
+  id,
+  className: userClassName,
+  placeholder,
+  selectedYLabels,
+  setSelectedYLabels,
+  allYLabels
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const toggleYLabel = yLabel => {
+    setSelectedYLabels(prev => prev.some(label => label.label === yLabel.label) ? prev.filter(label => label.label !== yLabel.label) : [...prev, yLabel]);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "dropdown-button",
+    onClick: () => setIsOpen(!isOpen),
+    type: "button"
+  }, placeholder, /*#__PURE__*/React.createElement("span", {
+    className: `icon ${isOpen ? styleNames.modifierOpen : ''}`
+  }, "W")), /*#__PURE__*/React.createElement("div", {
+    className: `dropdown-content ${isOpen ? styleNames.modifierOpen : ''}`
+  }, allYLabels.map(item =>
+  /*#__PURE__*/
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+  React.createElement("div", {
+    key: item.label,
+    className: `dropdown-item ${selectedYLabels.some(label => label.label === item.label) ? styleNames.modifierActive : ''}`
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    ,
+    onClick: () => toggleYLabel(item)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "status-dot",
+    style: {
+      backgroundColor: item.color
+    }
+  }), snakeCaseToTitleCase(item.label), selectedYLabels.some(label => label.label === item.label) && /*#__PURE__*/React.createElement("span", {
+    className: "icon checkmark"
+  }, "I")))));
+};
+YLabelsDropDown.propTypes = {
+  /**
+   * The id of the dropdown component.
+   */
+  id: PropTypes.string,
+  /**
+   * Additional class names for the dropdown component.
+   */
+  className: PropTypes.string,
+  /**
+   * Placeholder text for the dropdown button.
+   */
+  placeholder: PropTypes.string,
+  /**
+   * Array of selected Y labels with their corresponding colors.
+   */
+  selectedYLabels: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    color: PropTypes.string
+  })),
+  /**
+   * Function to set the selected Y labels.
+   */
+  setSelectedYLabels: PropTypes.func,
+  /**
+   * Array of all Y labels with their corresponding colors.
+   */
+  allYLabels: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    color: PropTypes.string
+  }))
+};
+YLabelsDropDown.defaultProps = {
+  placeholder: 'Select Item'
+};
+export default YLabelsDropDown;

package/dist/es/a/Charts/Common/YLabelsDropDown/index.js

@@ -0,0 +1 @@
+export { default as YLabelsDropDown } from "./YlabelsDropDown";

package/dist/es/a/Charts/Common/YLabelsDropDown/styles.scss

@@ -0,0 +1,89 @@
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+$default-border: var(--theme-default-input-border);
+$default-border-radius: var(--theme-default-input-border-radius);
+$default-padding: 1rem;
+$default-width: 15rem;
+$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
+$default-dot-width: .5rem;
+$default-dot-height: .5rem;
+$default-checkmark-font-size: calc(var(--s-1) * .75rem);
+
+.#{bem.$base} {
+  &.y-labels-dropdown {
+    display: inline-block;
+    position: relative;
+
+    .dropdown-button {
+      align-items: center;
+      background-color: var(--background-far);
+      border: $default-border;
+      border-radius: calc($default-border-radius / 2);
+      color: var(--hard-paragraph);
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      padding: calc($default-padding * .5);
+      text-align: left;
+      width: $default-width;
+
+      .icon {
+        color: var(--hard-ui-icons);
+        font-size: calc($default-checkmark-font-size * 1.25);
+
+        &.#{bem.$modifier-open} {
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    .dropdown-content {
+      background-color: var(--background-far);
+      border-radius: $default-border-radius;
+      box-shadow: $default-box-shadow;
+      display: none;
+      margin-top: calc($default-margin * .125);
+      position: absolute;
+      width: $default-width;
+      z-index: 1;
+
+      &.#{bem.$modifier-open} {
+        display: block;
+      }
+
+      .dropdown-item {
+        align-items: center;
+        border-radius: calc($default-border-radius / 2);
+        color: var(--paragraph);
+        cursor: pointer;
+        display: flex;
+        margin: calc($default-margin * .125);
+        padding: calc($default-padding * .5);
+        text-decoration: none;
+
+        &.#{bem.$modifier-active} {
+          background-color: var(--background-near);
+        }
+
+        &:hover {
+          background-color: var(--background-near);
+        }
+
+        .status-dot {
+          border-radius: 50%;
+          display: inline-block;
+          height: $default-dot-height;
+          margin-right: calc($default-margin * .5);
+          width: $default-dot-width;
+        }
+
+        .checkmark {
+          color: var(--hard-main);
+          font-size: $default-checkmark-font-size;
+          margin-left: auto;
+        }
+      }
+    }
+  }
+}

package/dist/es/a/Charts/Common/index.js

@@ -0,0 +1,3 @@
+export { CustomLegend } from "./CustomLegend";
+export { CustomTooltipContent } from "./CustomTooltipContent";
+export { YLabelsDropDown } from "./YLabelsDropDown";

package/dist/es/a/Charts/PieChart/PieChart.js

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
+import styleNames from '@pareto-engineering/bem/exports';
+import { CustomLegend, CustomTooltipContent } from "../Common";
+import "./styles.scss";
+const baseClassName = styleNames.base;
+const componentClassName = 'pie-chart';
+const PieChart = ({
+  id,
+  className: userClassName,
+  data,
+  title,
+  valueKey,
+  labelKey,
+  colors,
+  height,
+  width,
+  innerRadius,
+  outerRadius
+}) => {
+  const total = data.reduce((sum, item) => sum + item[valueKey], 0);
+  const formattedData = data.map(item => ({
+    ...item,
+    label: item[labelKey],
+    color: colors[data.indexOf(item)],
+    percentage: (item[valueKey] / total * 100).toFixed(0)
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "chart-header"
+  }, /*#__PURE__*/React.createElement("h3", null, title)), /*#__PURE__*/React.createElement("div", {
+    className: "chart-content"
+  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(RechartsPieChart, null, /*#__PURE__*/React.createElement(Pie, {
+    data: formattedData,
+    dataKey: valueKey,
+    nameKey: labelKey,
+    cx: "50%",
+    cy: "50%",
+    innerRadius: innerRadius,
+    outerRadius: outerRadius,
+    label: false,
+    paddingAngle: 0
+  }, formattedData.map((entry, index) => /*#__PURE__*/React.createElement(Cell, {
+    key: entry[labelKey],
+    fill: colors[index],
+    strokeWidth: 0
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
+      isDateValue: false
+    })
+  }))), /*#__PURE__*/React.createElement(CustomLegend, {
+    colorsArray: colors,
+    yKeysArray: formattedData,
+    capitalizedLegend: true,
+    orientation: "vertical",
+    getLegendItemTitle: entry => entry[labelKey],
+    getLegendItemSubtitle: entry => entry[valueKey]
+  })));
+};
+PieChart.propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    [PropTypes.string]: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  })).isRequired,
+  title: PropTypes.string.isRequired,
+  valueKey: PropTypes.string.isRequired,
+  labelKey: PropTypes.string.isRequired,
+  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  innerRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  outerRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+PieChart.defaultProps = {
+  id: undefined,
+  className: undefined,
+  width: '100%',
+  height: 300,
+  innerRadius: '0%',
+  outerRadius: '100%'
+};
+export default PieChart;

package/dist/es/a/Charts/PieChart/index.js

@@ -0,0 +1 @@
+export { default as PieChart } from "./PieChart";

package/dist/es/a/Charts/PieChart/styles.scss

@@ -0,0 +1,48 @@
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+$default-padding: 1rem;
+$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
+$default-text-font-size: calc(var(--s-1) * 1rem);
+
+.#{bem.$base} {
+  &.pie-chart {
+    background-color: var(--background-far);
+    border-radius: var(--theme-default-border-radius);
+    box-shadow: $default-box-shadow;
+    margin: $default-margin 0;
+    padding: $default-padding;
+
+    .chart-header {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: $default-margin;
+
+      h3 {
+        color: var(--subtitle);
+        margin: calc($default-margin / 5);
+        text-align: left;
+      }
+    }
+
+    .chart-content {
+      align-items: flex-start;
+      display: flex;
+    }
+
+    .recharts-wrapper {
+      .recharts-surface {
+        .recharts-text {
+          fill: var(--soft-paragraph);
+          font-size: calc($default-text-font-size * .75);
+        }
+
+        .recharts-text.recharts-label {
+          fill: var(--paragraph);
+          font-size: $default-text-font-size;
+        }
+      }
+    }
+  }
+}

package/dist/es/a/Charts/index.js

@@ -0,0 +1,3 @@
+export { AreaChart } from "./AreaChart";
+export { BarChart } from "./BarChart";
+export { PieChart } from "./PieChart";

package/dist/es/a/Tooltip/styles.scss

@@ -14,6 +14,7 @@ $default-width: var(--tooltip-width, 20rem);
     background: var(--x);
     border: var(--theme-default-border-style) var(--ui-lines);
     border-radius: calc(var(--theme-default-border-radius) / 2);
+    min-width: $default-width;
     opacity: 0;
     overflow: hidden;
     padding: $default-block-padding $default-inline-padding;
@@ -21,7 +22,6 @@ $default-width: var(--tooltip-width, 20rem);
     transform: translateX(var(--horizontal, 0)) translateY(var(--vertical, 0));
     transition: opacity .2s ease, transform .2s ease;
     visibility: hidden;
-    width: $default-width;
     z-index: 10;
 
     &.top {

package/dist/es/a/index.js

@@ -28,4 +28,4 @@ export { ToggleSwitch } from "./ToggleSwitch";
 export { XMLEditor } from "./XMLEditor";
 export { DatePicker } from "./DatePicker";
 export { Tooltip } from "./Tooltip";
-export { AreaChart } from "./AreaChart";
+export { AreaChart, BarChart, PieChart } from "./Charts";

package/dist/es/f/FormInput/FormInput.js

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import * as React from 'react';
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput, FileUpload } from "../fields";
+import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput, FileUpload, LatexPreviewInput } from "../fields";
 import "./styles.scss";
 
 // Local Definitions
@@ -95,6 +95,12 @@ const FormInput = ({
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'latex-preview-input') {
+    return /*#__PURE__*/React.createElement(LatexPreviewInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
   if (extraTypes?.[type]) {
     const Component = extraTypes[type];
     return /*#__PURE__*/React.createElement(Component, _extends({

package/dist/es/f/fields/FileUpload/FileUpload.js

@@ -11,6 +11,13 @@ import { FormLabel, FormDescription } from "../../common";
 
 const baseClassName = styleNames.base;
 const componentClassName = 'file-upload';
+const generateUniqueFileName = (originalName, existingFileNames) => {
+  const lastDotIndex = originalName.lastIndexOf('.');
+  const name = originalName.substring(0, lastDotIndex);
+  const ext = originalName.split('.').pop();
+  const numDuplicates = existingFileNames.filter(existingFileName => existingFileName?.startsWith(name)).length;
+  return numDuplicates > 0 ? `${name} (${numDuplicates}).${ext}` : originalName;
+};
 
 /**
  * This is the component description.
@@ -52,17 +59,24 @@ const FileUpload = ({
   } = helpers;
   const handleChange = event => {
     setTouched(true, false);
-    const newFiles = Array.from(event.currentTarget.files);
+    let newFiles = Array.from(event.currentTarget.files);
     const currentFiles = value || [];
     const currentCount = currentFiles.length + newFiles.length;
     if (maxCount && currentCount > maxCount) {
       setError(maxCountError || `Maximum of ${maxCount} files allowed`);
       return;
     }
-    const duplicateFiles = newFiles.filter(newFile => currentFiles.some(currentFile => currentFile.name === newFile.name));
+    const uploadedFiles = Object.keys(uploadStatus) || [];
+    const duplicateFiles = newFiles.filter(newFile => uploadedFiles.some(uploadedFile => uploadedFile === newFile.name));
     if (duplicateFiles.length > 0) {
-      setError('You cannot upload the same file twice.');
-      return;
+      newFiles = newFiles.map(file => {
+        if (duplicateFiles.some(duplicateFile => duplicateFile.name === file.name)) {
+          return new File([file], generateUniqueFileName(file.name, uploadedFiles), {
+            type: file.type
+          });
+        }
+        return file;
+      });
     }
     if (maxSize) {
       const oversizedFiles = newFiles.filter(file => file.size > maxSize);

package/dist/es/f/fields/LatexPreviewInput/LatexPreviewInput.js

@@ -0,0 +1,70 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { memo, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import { useFormikContext } from 'formik';
+import convertLatexToHtml from "./convertLatexToHtml";
+import { TextareaInput } from "../TextareaInput";
+import "./styles.scss";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'latex-preview-input';
+
+/**
+ * This is the component description.
+ */
+const LatexPreviewInput = ({
+  id,
+  className,
+  userClassName,
+  disabled,
+  style,
+  ...otherProps
+}) => {
+  const {
+    name
+  } = otherProps;
+  const {
+    values
+  } = useFormikContext();
+  const LatexPreview = useMemo(() => convertLatexToHtml(values[name]), [values[name]]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, 'form-input'].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(TextareaInput, _extends({
+    className: "preview-child",
+    disabled: disabled
+  }, otherProps)), /*#__PURE__*/React.createElement("div", {
+    className: "latex-container preview-child",
+    dangerouslySetInnerHTML: {
+      __html: LatexPreview
+    }
+  }));
+};
+LatexPreviewInput.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+  /**
+   * Whether the Form input input should be disabled
+   */
+  disabled: PropTypes.bool
+};
+LatexPreviewInput.defaultProps = {
+  disabled: false
+};
+export default /*#__PURE__*/memo(LatexPreviewInput);

package/dist/es/f/fields/LatexPreviewInput/convertLatexToHtml.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
+import RemarkMathPlugin from 'remark-math';
+import { MathJax, MathJaxContext } from 'better-react-mathjax';
+import rehypeMathjax from 'rehype-mathjax/svg';
+import ReactDOMServer from 'react-dom/server';
+const convertLatexToHtml = content => {
+  if (content.includes('https://forte-assets.pareto.ai/')) {
+    return content;
+  }
+  const processedContent = content.replaceAll(/\\\\/g, '\n\n');
+  const renderedContent = ReactDOMServer.renderToString(/*#__PURE__*/React.createElement(MathJaxContext, null, /*#__PURE__*/React.createElement(ReactMarkdown, {
+    remarkPlugins: [RemarkMathPlugin],
+    rehypePlugins: [rehypeMathjax],
+    components: {
+      math: ({
+        value
+      }) => /*#__PURE__*/React.createElement(MathJax.Node, {
+        formula: value
+      }),
+      inlineMath: ({
+        value
+      }) => /*#__PURE__*/React.createElement(MathJax.Node, {
+        inline: true,
+        formula: value
+      })
+    }
+  }, processedContent)));
+  return renderedContent;
+};
+export default convertLatexToHtml;

package/dist/es/f/fields/LatexPreviewInput/index.js

@@ -0,0 +1,3 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as LatexPreviewInput } from "./LatexPreviewInput";
+export { default as convertLatexToHtml } from "./convertLatexToHtml";

package/dist/es/f/fields/LatexPreviewInput/styles.scss

@@ -0,0 +1,24 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1em;
+
+.#{bem.$base}.latex-preview-input {
+  display: flex;
+  flex-direction: row;
+  gap: $default-margin;
+
+  > .preview-child {
+    flex: 1;
+  }
+
+  > .latex-container {
+    border: 1px solid var(--ui-lines);
+    border-radius: var(--theme-default-border-radius);
+    margin-top: calc($default-margin * 2.5);
+    max-width: 50%;
+    overflow: auto;
+    padding: 0 $default-margin;
+  }
+}

package/dist/es/f/fields/index.js

@@ -9,4 +9,5 @@ export { Checkbox } from "./Checkbox";
 export { QueryChoices } from "./QueryChoices";
 export { LinkInput } from "./LinkInput";
 export { EditorInput } from "./EditorInput";
+export { LatexPreviewInput, convertLatexToHtml } from "./LatexPreviewInput";
 export { FileUpload, fileUploadOptions, getFileType, getFileTypeFromUrl } from "./FileUpload";

package/dist/es/g/FormBuilder/FormBuilder.js

@@ -30,8 +30,7 @@ const FormBuilder = ({
   initialBuilderValues,
   fileUploadStatus,
   handleFileDelete,
-  taskData,
-  customInputMap
+  taskData
   // ...otherProps
 }) => {
   const formattedJson = JSON.stringify(taskData, null, 2);
@@ -47,8 +46,7 @@ const FormBuilder = ({
     formBuilderId: formBuilderId,
     onSave: onBuilderFormSave,
     onError: onBuilderError,
-    validate: onBuilderValidate,
-    customInputMap: customInputMap
+    validate: onBuilderValidate
   }), mode === 'render' && /*#__PURE__*/React.createElement(Renderer, {
     formData: formData,
     onSave: onRendererFormSave,
@@ -56,8 +54,7 @@ const FormBuilder = ({
     shouldSubmit: shouldSubmit,
     fileUploadStatus: fileUploadStatus,
     handleFileDelete: handleFileDelete,
-    onFileUpload: onFileUpload,
-    customInputMap: customInputMap
+    onFileUpload: onFileUpload
   }));
 };
 FormBuilder.propTypes = {

package/dist/es/g/FormBuilder/common/Builder/Builder.js

@@ -32,7 +32,6 @@ const Builder = ({
   onError,
   validate,
   formBuilderId,
-  customInputMap,
   initialValues = {}
   // ...otherProps
 }) => {
@@ -107,8 +106,7 @@ const Builder = ({
         remove,
         values,
         setFieldValue
-      }),
-      customInputMap: customInputMap
+      })
     })), /*#__PURE__*/React.createElement("div", {
       className: "section-footer"
     }, /*#__PURE__*/React.createElement("button", {

package/dist/es/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js

@@ -26,8 +26,7 @@ const InputBuilder = ({
   style,
   sectionIndex,
   inputIndex,
-  onDelete,
-  customInputMap
+  onDelete
   // ...otherProps
 }) => {
   const {
@@ -54,7 +53,6 @@ const InputBuilder = ({
   const handleToggleShowSpecificFileTypes = () => {
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes);
   };
-  const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -94,10 +92,10 @@ const InputBuilder = ({
     }, {
       value: 'file',
       label: 'File upload'
-    }, ...(customInputTypes && customInputTypes.map(customInputKey => ({
-      value: customInputKey,
-      label: customInputMap[customInputKey].label
-    })))]
+    }, {
+      value: 'latex-preview-input',
+      label: 'Textbox with LaTeX preview'
+    }]
   }), /*#__PURE__*/React.createElement("div", {
     className: "controls"
   }, /*#__PURE__*/React.createElement("button", {