@pareto-engineering/design-system 5.0.0 → 5.0.1

package/dist/cjs/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _utils = require("../../../../utils");
+require("./styles.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const baseClassName = _exports.default.base;
+const componentClassName = 'custom-tooltip-content';
+const CustomTooltipContent = _ref => {
+  let {
+    id,
+    className: userClassName,
+    xLabel,
+    dateFormat,
+    isTimeFormat,
+    active,
+    payload,
+    label
+  } = _ref;
+  if (active && payload && payload.length) {
+    const newPayload = payload.filter(item => item.name !== 'bounds');
+    return /*#__PURE__*/React.createElement("div", {
+      id: id,
+      className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "label"
+    }, `${xLabel}: ${(0, _utils.formatDate)(label, dateFormat)}`), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
+      className: "label",
+      key: `${entry.name}`,
+      style: {
+        color: entry.color,
+        textTransform: 'capitalize'
+      }
+    }, `${entry.name}: ${isTimeFormat ? (0, _utils.formatTime)(entry.value) : entry.value}`)));
+  }
+  return null;
+};
+CustomTooltipContent.propTypes = {
+  /**
+  * The id of the dropdown component.
+  */
+  id: _propTypes.default.string,
+  /**
+   * Additional class names for the dropdown component.
+   */
+  className: _propTypes.default.string,
+  /**
+   * The label for the x-axis.
+   */
+  xLabel: _propTypes.default.string,
+  /**
+   * Flag on whether it is a timeformat or not
+   */
+  isTimeFormat: _propTypes.default.bool,
+  /**
+   * The type of format for the datetime value
+   */
+  dateFormat: _propTypes.default.oneOf(Object.values(_utils.DATE_FORMATS)),
+  /**
+   * If set true, the tooltip is displayed.
+   * If set false, the tooltip is hidden, usually calculated internally.
+   */
+  active: _propTypes.default.bool.isRequired,
+  /**
+   * The source data of the content to be displayed in the tooltip,
+   * always calculated internally and cannot be user set.
+   */
+  payload: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  /**
+   *The label value which is active now, usually calculated internally.
+   */
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
+};
+CustomTooltipContent.defaultProps = {
+  isTimeFormat: false,
+  dateFormat: _utils.DATE_FORMATS.HUMAN_READABLE
+};
+var _default = exports.default = CustomTooltipContent;

package/dist/cjs/a/Charts/Common/CustomTooltipContent/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CustomTooltipContent", {
+  enumerable: true,
+  get: function () {
+    return _CustomTooltipContent.default;
+  }
+});
+var _CustomTooltipContent = _interopRequireDefault(require("./CustomTooltipContent"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/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/cjs/a/Charts/Common/YLabelsDropDown/YlabelsDropDown.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// DropdownStatus.js
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'y-labels-dropdown';
+const YLabelsDropDown = _ref => {
+  let {
+    id,
+    className: userClassName,
+    placeholder,
+    selectedYLabels,
+    setSelectedYLabels,
+    allYLabels
+  } = _ref;
+  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 ? _exports.default.modifierOpen : ''}`
+  }, "W")), /*#__PURE__*/React.createElement("div", {
+    className: `dropdown-content ${isOpen ? _exports.default.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) ? _exports.default.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
+    }
+  }), 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.default.string,
+  /**
+   * Additional class names for the dropdown component.
+   */
+  className: _propTypes.default.string,
+  /**
+   * Placeholder text for the dropdown button.
+   */
+  placeholder: _propTypes.default.string,
+  /**
+   * Array of selected Y labels with their corresponding colors.
+   */
+  selectedYLabels: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string,
+    color: _propTypes.default.string
+  })),
+  /**
+   * Function to set the selected Y labels.
+   */
+  setSelectedYLabels: _propTypes.default.func,
+  /**
+   * Array of all Y labels with their corresponding colors.
+   */
+  allYLabels: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string,
+    color: _propTypes.default.string
+  }))
+};
+YLabelsDropDown.defaultProps = {
+  placeholder: 'Submission status'
+};
+var _default = exports.default = YLabelsDropDown;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "YLabelsDropDown", {
+  enumerable: true,
+  get: function () {
+    return _YlabelsDropDown.default;
+  }
+});
+var _YlabelsDropDown = _interopRequireDefault(require("./YlabelsDropDown"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -0,0 +1,88 @@
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+$default-border-radius: .25rem;
+$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(--soft-background-inputs);
+      border: none;
+      border-radius: $default-border-radius;
+      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: $default-border-radius;
+        color: var(--hard-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/cjs/a/Charts/Common/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CustomLegend", {
+  enumerable: true,
+  get: function () {
+    return _CustomLegend.CustomLegend;
+  }
+});
+Object.defineProperty(exports, "CustomTooltipContent", {
+  enumerable: true,
+  get: function () {
+    return _CustomTooltipContent.CustomTooltipContent;
+  }
+});
+Object.defineProperty(exports, "YLabelsDropDown", {
+  enumerable: true,
+  get: function () {
+    return _YLabelsDropDown.YLabelsDropDown;
+  }
+});
+var _CustomLegend = require("./CustomLegend");
+var _CustomTooltipContent = require("./CustomTooltipContent");
+var _YLabelsDropDown = require("./YLabelsDropDown");

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AreaChart", {
+  enumerable: true,
+  get: function () {
+    return _AreaChart.AreaChart;
+  }
+});
+Object.defineProperty(exports, "BarChart", {
+  enumerable: true,
+  get: function () {
+    return _BarChart.BarChart;
+  }
+});
+var _AreaChart = require("./AreaChart");
+var _BarChart = require("./BarChart");

package/dist/cjs/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/cjs/a/index.js

@@ -30,7 +30,13 @@ Object.defineProperty(exports, "AppContextProvider", {
 Object.defineProperty(exports, "AreaChart", {
   enumerable: true,
   get: function () {
-    return _AreaChart.AreaChart;
+    return _Charts.AreaChart;
+  }
+});
+Object.defineProperty(exports, "BarChart", {
+  enumerable: true,
+  get: function () {
+    return _Charts.BarChart;
   }
 });
 Object.defineProperty(exports, "BlurOverlay", {
@@ -237,4 +243,4 @@ var _ToggleSwitch = require("./ToggleSwitch");
 var _XMLEditor = require("./XMLEditor");
 var _DatePicker = require("./DatePicker");
 var _Tooltip = require("./Tooltip");
-var _AreaChart = require("./AreaChart");
+var _Charts = require("./Charts");

package/dist/cjs/f/FormInput/FormInput.js

@@ -103,6 +103,12 @@ const FormInput = _ref => {
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'latex-preview-input') {
+    return /*#__PURE__*/React.createElement(_fields.LatexPreviewInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
   if (extraTypes?.[type]) {
     const Component = extraTypes[type];
     return /*#__PURE__*/React.createElement(Component, _extends({

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

@@ -20,6 +20,13 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 const baseClassName = _exports.default.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.
@@ -62,17 +69,24 @@ const FileUpload = _ref => {
   } = 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/cjs/f/fields/LatexPreviewInput/LatexPreviewInput.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _formik = require("formik");
+var _convertLatexToHtml = _interopRequireDefault(require("./convertLatexToHtml"));
+var _TextareaInput = require("../TextareaInput");
+require("./styles.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 */
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'latex-preview-input';
+
+/**
+ * This is the component description.
+ */
+const LatexPreviewInput = _ref => {
+  let {
+    id,
+    className,
+    userClassName,
+    disabled,
+    style,
+    ...otherProps
+  } = _ref;
+  const {
+    name
+  } = otherProps;
+  const {
+    values
+  } = (0, _formik.useFormikContext)();
+  const LatexPreview = (0, _react.useMemo)(() => (0, _convertLatexToHtml.default)(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.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.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * Whether the Form input input should be disabled
+   */
+  disabled: _propTypes.default.bool
+};
+LatexPreviewInput.defaultProps = {
+  disabled: false
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(LatexPreviewInput);

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
+var _remarkMath = _interopRequireDefault(require("remark-math"));
+var _betterReactMathjax = require("better-react-mathjax");
+var _svg = _interopRequireDefault(require("rehype-mathjax/svg"));
+var _server = _interopRequireDefault(require("react-dom/server"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const convertLatexToHtml = content => {
+  if (content.includes('https://forte-assets.pareto.ai/')) {
+    return content;
+  }
+  const processedContent = content.replaceAll(/\\\\/g, '\n\n');
+  const renderedContent = _server.default.renderToString(/*#__PURE__*/React.createElement(_betterReactMathjax.MathJaxContext, null, /*#__PURE__*/React.createElement(_reactMarkdown.default, {
+    remarkPlugins: [_remarkMath.default],
+    rehypePlugins: [_svg.default],
+    components: {
+      math: _ref => {
+        let {
+          value
+        } = _ref;
+        return /*#__PURE__*/React.createElement(_betterReactMathjax.MathJax.Node, {
+          formula: value
+        });
+      },
+      inlineMath: _ref2 => {
+        let {
+          value
+        } = _ref2;
+        return /*#__PURE__*/React.createElement(_betterReactMathjax.MathJax.Node, {
+          inline: true,
+          formula: value
+        });
+      }
+    }
+  }, processedContent)));
+  return renderedContent;
+};
+var _default = exports.default = convertLatexToHtml;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LatexPreviewInput", {
+  enumerable: true,
+  get: function () {
+    return _LatexPreviewInput.default;
+  }
+});
+Object.defineProperty(exports, "convertLatexToHtml", {
+  enumerable: true,
+  get: function () {
+    return _convertLatexToHtml.default;
+  }
+});
+var _LatexPreviewInput = _interopRequireDefault(require("./LatexPreviewInput"));
+var _convertLatexToHtml = _interopRequireDefault(require("./convertLatexToHtml"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/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/cjs/f/fields/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "FileUpload", {
     return _FileUpload.FileUpload;
   }
 });
+Object.defineProperty(exports, "LatexPreviewInput", {
+  enumerable: true,
+  get: function () {
+    return _LatexPreviewInput.LatexPreviewInput;
+  }
+});
 Object.defineProperty(exports, "LinkInput", {
   enumerable: true,
   get: function () {
@@ -75,6 +81,12 @@ Object.defineProperty(exports, "TextareaInput", {
     return _TextareaInput.TextareaInput;
   }
 });
+Object.defineProperty(exports, "convertLatexToHtml", {
+  enumerable: true,
+  get: function () {
+    return _LatexPreviewInput.convertLatexToHtml;
+  }
+});
 Object.defineProperty(exports, "fileUploadOptions", {
   enumerable: true,
   get: function () {
@@ -104,4 +116,5 @@ var _Checkbox = require("./Checkbox");
 var _QueryChoices = require("./QueryChoices");
 var _LinkInput = require("./LinkInput");
 var _EditorInput = require("./EditorInput");
+var _LatexPreviewInput = require("./LatexPreviewInput");
 var _FileUpload = require("./FileUpload");