@pareto-engineering/design-system 5.0.5 → 5.1.0

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

@@ -40,17 +40,6 @@ const AreaChart = _ref => {
     color: colors[yKeys.indexOf(key)]
   }));
   const [selectedYLabels, setSelectedYLabels] = (0, _react.useState)(allYLabels);
-  const processedData = data.map(item => {
-    const yValues = yKeys.map(key => item[key]);
-    const lowerBound = Math.min(...yValues);
-    const upperBound = Math.max(...yValues);
-    const margin = (upperBound - lowerBound) * 0.1;
-    return {
-      ...item,
-      bounds: [lowerBound - margin, upperBound + margin],
-      isTimeFormat
-    };
-  });
   const yAxisBounds = () => {
     const yValues = data.map(item => yKeys.map(key => item[key]));
     const min = Math.min(...yValues.flat());
@@ -75,7 +64,7 @@ const AreaChart = _ref => {
     width: width,
     height: height
   }, /*#__PURE__*/React.createElement(_recharts.AreaChart, {
-    data: processedData
+    data: data
   }, /*#__PURE__*/React.createElement(_recharts.CartesianGrid, {
     strokeDasharray: "3 3"
   }), /*#__PURE__*/React.createElement(_recharts.XAxis, {
@@ -116,7 +105,8 @@ const AreaChart = _ref => {
     }
   }), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
     content: /*#__PURE__*/React.createElement(_Common.CustomTooltipContent, {
-      xLabel: xLabel
+      dateFormat: dateFormat,
+      isTimeFormat: isTimeFormat
     })
   }), filled && /*#__PURE__*/React.createElement(_recharts.Area, {
     id: "bounds",

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

@@ -30,8 +30,9 @@ const BarChart = _ref => {
     yLabel,
     colors,
     height,
-    width
-    // ...otherProps
+    width,
+    isTimeFormat,
+    capitalizedLegend
   } = _ref;
   const allYLabels = yKeys.map(key => ({
     label: key,
@@ -49,7 +50,8 @@ const BarChart = _ref => {
     setSelectedYLabels: setSelectedYLabels
   })), /*#__PURE__*/React.createElement(_Common.CustomLegend, {
     colorsArray: selectedYLabels.map(item => item.color),
-    yKeysArray: selectedYLabels.map(item => item.label)
+    yKeysArray: selectedYLabels.map(item => item.label),
+    capitalizedLegend: capitalizedLegend
   }), /*#__PURE__*/React.createElement(_recharts.ResponsiveContainer, {
     width: width,
     height: height
@@ -79,7 +81,7 @@ const BarChart = _ref => {
     tickLine: false
   }), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
     content: /*#__PURE__*/React.createElement(_Common.CustomTooltipContent, {
-      xLabel: xLabel
+      isTimeFormat: isTimeFormat
     })
   }), selectedYLabels.map(key => /*#__PURE__*/React.createElement(_recharts.Bar, {
     stackId: "a",

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

@@ -7,6 +7,7 @@ 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); }
@@ -19,19 +20,19 @@ const CustomLegend = _ref => {
     className: userClassName,
     colorsArray,
     yKeysArray,
+    orientation,
+    getLegendItemTitle,
+    getLegendItemSubtitle,
     capitalizedLegend
   } = _ref;
-  const capitalizeWord = word => {
-    if (!capitalizedLegend) return word;
-    const wordsToCapitalize = ['average', 'best', 'worst'];
-    return word.split(' ').map(part => wordsToCapitalize.includes(part.toLowerCase()) ? part.charAt(0).toUpperCase() + part.slice(1).toLowerCase() : part).join(' ');
-  };
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+    className: [baseClassName, componentClassName, userClassName, orientation].filter(e => e).join(' ')
   }, yKeysArray.map((key, index) => /*#__PURE__*/React.createElement("div", {
     key: key,
     className: "item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "title"
   }, /*#__PURE__*/React.createElement("span", {
     className: "dot",
     style: {
@@ -39,7 +40,9 @@ const CustomLegend = _ref => {
     }
   }), /*#__PURE__*/React.createElement("span", {
     className: "text"
-  }, capitalizeWord(key)))));
+  }, capitalizedLegend ? (0, _utils.snakeCaseToTitleCase)(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("span", {
+    className: "sub-title"
+  }, getLegendItemSubtitle(key)))));
 };
 CustomLegend.propTypes = {
   /**
@@ -58,12 +61,28 @@ CustomLegend.propTypes = {
    * Array of keys for the y-axis data.
    */
   yKeysArray: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  /**
+   * The orientation of the Legend
+   */
+  orientation: _propTypes.default.oneOf(['vertical', 'horizontal']),
+  /**
+   * The function to get the legendItemKey
+   */
+  getLegendItemTitle: _propTypes.default.func,
+  /**
+   * The function to get legend children
+   */
+  getLegendItemSubtitle: _propTypes.default.func,
   /**
    * Flag on whether to capitalize legend keys
    */
   capitalizedLegend: _propTypes.default.bool
 };
 CustomLegend.defaultProps = {
+  orientation: 'horizontal',
+  getLegendItemTitle: key => key,
+  /* eslint-disable no-unused-vars */
+  getLegendItemSubtitle: () => {},
   capitalizedLegend: false
 };
 var _default = exports.default = CustomLegend;

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

@@ -1,6 +1,7 @@
 @use "@pareto-engineering/bem";
 
 $default-padding: 1rem;
+$default-margin: 1rem;
 $default-text-font-size: calc(var(--s-1) * 1rem);
 $default-border-radius: .25rem;
 $default-legend-gap: .625rem;
@@ -8,33 +9,59 @@ $default-legend-padding: calc($default-padding * .125) calc($default-padding * .
 $default-legend-dot-width: .5rem;
 $default-legend-dot-height: .5rem;
 $default-legend-dot-margin-right: .3125rem;
+$default-box-shadow: 0 4px 16px 0 var(--soft-shadow);
 
 .#{bem.$base} {
   &.custom-legend {
-    display: flex;
     gap: $default-legend-gap;
     justify-content: flex-end;
     padding-bottom: $default-padding;
     padding-right: calc($default-padding * .25);
 
+    &.vertical {
+      display: block;
+      margin-right: calc($default-margin * 2);
+      min-width: fit-content;
+
+      .item {
+        box-shadow: $default-box-shadow;
+        padding-top: $default-padding;
+      }
+    }
+
+    &.horizontal {
+      display: flex;
+    }
+
     .item {
-      align-items: center;
       border-radius: $default-border-radius;
-      display: flex;
       padding: $default-legend-padding;
-    }
 
-    .dot {
-      border-radius: 50%;
-      display: inline-block;
-      height: $default-legend-dot-height;
-      margin-right: $default-legend-dot-margin-right;
-      width: $default-legend-dot-width;
-    }
+      .title {
+        align-items: center;
+        display: flex;
+
+        .dot {
+          border-radius: 50%;
+          display: inline-block;
+          height: $default-legend-dot-height;
+          margin-right: $default-legend-dot-margin-right;
+          width: $default-legend-dot-width;
+        }
+
+        .text {
+          color: var(--paragraph);
+          font-size: calc($default-text-font-size * .75);
+        }
+      }
 
-    .text {
-      color: var(--paragraph);
-      font-size: calc($default-text-font-size * .75);
+      .sub-title {
+        color: var(--heading);
+        display: flex;
+        font-size: calc($default-text-font-size * 1.2);
+        font-weight: 500;
+        justify-content: flex-end;
+      }
     }
   }
 }

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

@@ -18,13 +18,23 @@ const CustomTooltipContent = _ref => {
   let {
     id,
     className: userClassName,
-    xLabel,
     dateFormat,
     isTimeFormat,
+    isDateValue,
     active,
     payload,
     label
   } = _ref;
+  const formatLabelValue = value => {
+    if (isTimeFormat) {
+      return (0, _utils.formatTime)(value);
+    }
+    if (typeof value === 'number') {
+      if (Number.isInteger(value)) return value;
+      return value.toFixed(2);
+    }
+    return value;
+  };
   if (active && payload && payload.length) {
     const newPayload = payload.filter(item => item.name !== 'bounds');
     return /*#__PURE__*/React.createElement("div", {
@@ -32,14 +42,14 @@ const CustomTooltipContent = _ref => {
       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", {
+    }, isDateValue ? (0, _utils.formatDate)(label, dateFormat) : label), 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}`)));
+    }, `${(0, _utils.snakeCaseToTitleCase)(entry.name)}: ${formatLabelValue(entry.value)}`)));
   }
   return null;
 };
@@ -52,10 +62,6 @@ CustomTooltipContent.propTypes = {
    * 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
    */
@@ -64,6 +70,10 @@ CustomTooltipContent.propTypes = {
    * The type of format for the datetime value
    */
   dateFormat: _propTypes.default.oneOf(Object.values(_utils.DATE_FORMATS)),
+  /**
+   * Flag on whether the label is a date value or not
+   */
+  isDateValue: _propTypes.default.bool,
   /**
    * If set true, the tooltip is displayed.
    * If set false, the tooltip is hidden, usually calculated internally.
@@ -81,6 +91,7 @@ CustomTooltipContent.propTypes = {
 };
 CustomTooltipContent.defaultProps = {
   isTimeFormat: false,
+  isDateValue: true,
   dateFormat: _utils.DATE_FORMATS.HUMAN_READABLE
 };
 var _default = exports.default = CustomTooltipContent;

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

@@ -7,14 +7,13 @@ 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; }
 // DropdownStatus.js
 
-// Local Definitions
-
 const baseClassName = _exports.default.base;
 const componentClassName = 'y-labels-dropdown';
 const YLabelsDropDown = _ref => {
@@ -56,7 +55,7 @@ const YLabelsDropDown = _ref => {
     style: {
       backgroundColor: item.color
     }
-  }), item.label, selectedYLabels.some(label => label.label === item.label) && /*#__PURE__*/React.createElement("span", {
+  }), (0, _utils.snakeCaseToTitleCase)(item.label), selectedYLabels.some(label => label.label === item.label) && /*#__PURE__*/React.createElement("span", {
     className: "icon checkmark"
   }, "I")))));
 };
@@ -93,6 +92,6 @@ YLabelsDropDown.propTypes = {
   }))
 };
 YLabelsDropDown.defaultProps = {
-  placeholder: 'Submission status'
+  placeholder: 'Select Item'
 };
 var _default = exports.default = YLabelsDropDown;

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

@@ -1,7 +1,8 @@
 @use "@pareto-engineering/bem";
 
 $default-margin: 1rem;
-$default-border-radius: .25rem;
+$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);
@@ -16,9 +17,9 @@ $default-checkmark-font-size: calc(var(--s-1) * .75rem);
 
     .dropdown-button {
       align-items: center;
-      background-color: var(--soft-background-inputs);
-      border: none;
-      border-radius: $default-border-radius;
+      background-color: var(--background-far);
+      border: $default-border;
+      border-radius: calc($default-border-radius / 2);
       color: var(--hard-paragraph);
       cursor: pointer;
       display: flex;
@@ -53,8 +54,8 @@ $default-checkmark-font-size: calc(var(--s-1) * .75rem);
 
       .dropdown-item {
         align-items: center;
-        border-radius: $default-border-radius;
-        color: var(--hard-paragraph);
+        border-radius: calc($default-border-radius / 2);
+        color: var(--paragraph);
         cursor: pointer;
         display: flex;
         margin: calc($default-margin * .125);

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

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _recharts = require("recharts");
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _Common = require("../Common");
+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 = 'pie-chart';
+const PieChart = _ref => {
+  let {
+    id,
+    className: userClassName,
+    data,
+    title,
+    valueKey,
+    labelKey,
+    colors,
+    height,
+    width,
+    innerRadius,
+    outerRadius
+  } = _ref;
+  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(_recharts.ResponsiveContainer, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(_recharts.PieChart, null, /*#__PURE__*/React.createElement(_recharts.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(_recharts.Cell, {
+    key: entry[labelKey],
+    fill: colors[index],
+    strokeWidth: 0
+  }))), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
+    content: /*#__PURE__*/React.createElement(_Common.CustomTooltipContent, {
+      isDateValue: false
+    })
+  }))), /*#__PURE__*/React.createElement(_Common.CustomLegend, {
+    colorsArray: colors,
+    yKeysArray: formattedData,
+    capitalizedLegend: true,
+    orientation: "vertical",
+    getLegendItemTitle: entry => entry[labelKey],
+    getLegendItemSubtitle: entry => entry[valueKey]
+  })));
+};
+PieChart.propTypes = {
+  id: _propTypes.default.string,
+  className: _propTypes.default.string,
+  data: _propTypes.default.arrayOf(_propTypes.default.shape({
+    [_propTypes.default.string]: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  })).isRequired,
+  title: _propTypes.default.string.isRequired,
+  valueKey: _propTypes.default.string.isRequired,
+  labelKey: _propTypes.default.string.isRequired,
+  colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  innerRadius: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  outerRadius: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+};
+PieChart.defaultProps = {
+  id: undefined,
+  className: undefined,
+  width: '100%',
+  height: 300,
+  innerRadius: '0%',
+  outerRadius: '100%'
+};
+var _default = exports.default = PieChart;

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

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

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

@@ -15,5 +15,12 @@ Object.defineProperty(exports, "BarChart", {
     return _BarChart.BarChart;
   }
 });
+Object.defineProperty(exports, "PieChart", {
+  enumerable: true,
+  get: function () {
+    return _PieChart.PieChart;
+  }
+});
 var _AreaChart = require("./AreaChart");
-var _BarChart = require("./BarChart");
+var _BarChart = require("./BarChart");
+var _PieChart = require("./PieChart");

package/dist/cjs/a/Notification/styles.scss

@@ -4,6 +4,7 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
+$default-border: 1px solid var(--x);
 $default-padding: 1rem;
 $default-margin: 1rem;
 $default-border-radius: 1.5rem;
@@ -12,10 +13,11 @@ $default-height: var(--notification-height, 5rem);
 
 .#{bem.$base}.notification {
   align-items: center;
-  background-color: var(--x);
+  background-color: var(--background-far);
+  border: $default-border;
   border-radius: $default-border-radius;
   bottom: 0;
-  color: var(--on-x);
+  color: var(--paragraph);
   display: flex;
   justify-content: space-between;
   margin-bottom: $default-margin;
@@ -31,8 +33,16 @@ $default-height: var(--notification-height, 5rem);
   > .message-container {
     align-items: center;
     display: flex;
+    gap: $default-padding;
     overflow: auto;
 
+    > .icon {
+      background-color: var(--x);
+      border-radius: 50%;
+      color: var(--white);
+      padding: calc($default-padding / 2);
+    }
+
     > .message {
       font-size: calc(var(--s0) * 1rem);
       margin-left: calc($default-margin / 2);
@@ -44,12 +54,14 @@ $default-height: var(--notification-height, 5rem);
   }
 
   .#{bem.$base}.button {
+    background-color: transparent;
+    color: var(--paragraph);
     padding: calc($default-padding / 2);
 
-    &:focus {
+    &:focus,
+    &:hover {
       background-color: transparent;
+      color: var(--hard-paragraph);
     }
   }
 }
-
-

package/dist/cjs/a/index.js

@@ -123,6 +123,12 @@ Object.defineProperty(exports, "People", {
     return _People.People;
   }
 });
+Object.defineProperty(exports, "PieChart", {
+  enumerable: true,
+  get: function () {
+    return _Charts.PieChart;
+  }
+});
 Object.defineProperty(exports, "Popover", {
   enumerable: true,
   get: function () {

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

@@ -30,7 +30,7 @@ const FormInput = _ref => {
     disabled,
     ...otherProps
   } = _ref;
-  const newClassName = [className, componentClassName].filter(Boolean).join(' ');
+  const newClassName = [className, componentClassName, otherProps.hasCharacterLimit && otherProps.maxLength && `limit-character-count-${otherProps.maxLength}`].filter(Boolean).join(' ');
   if (type === 'textarea') {
     return /*#__PURE__*/React.createElement(_fields.TextareaInput, _extends({
       className: newClassName,

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

@@ -42,7 +42,7 @@ const LatexPreviewInput = _ref => {
   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(' '),
+    className: [baseClassName, componentClassName, className, userClassName, 'form-input'].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement(_TextareaInput.TextareaInput, _extends({
     className: "preview-child",

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

@@ -11,6 +11,7 @@ $default-margin: 1em;
 
   > .preview-child {
     flex: 1;
+    position: relative;
   }
 
   > .latex-container {

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

@@ -37,7 +37,8 @@ const TextareaInput = _ref => {
     disabled,
     placeholder,
     autoComplete,
-    resize
+    resize,
+    maxLength
     // ...otherProps
   } = _ref;
   const [field] = (0, _formik.useField)({
@@ -62,7 +63,8 @@ const TextareaInput = _ref => {
     placeholder: placeholder,
     rows: rows,
     disabled: disabled,
-    autoComplete: autoComplete
+    autoComplete: autoComplete,
+    maxLength: maxLength
   })), /*#__PURE__*/React.createElement(_common.FormDescription, {
     className: "s-1",
     description: description,