@pareto-engineering/design-system 5.0.5 → 5.1.1

package/dist/cjs/f/fields/EditorInput/common/ExposePlainTextPlugin.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _lexical = require("lexical");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * This is the component description
+ */
+const ExposePlainTextPlugin = _ref => {
+  let {
+    setFieldValue,
+    setPlainTextKey
+  } = _ref;
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  (0, _react.useEffect)(() => editor.registerUpdateListener(_ref2 => {
+    let {
+      editorState
+    } = _ref2;
+    editorState.read(() => {
+      const root = (0, _lexical.$getRoot)();
+      const textContent = root.getTextContent();
+      setFieldValue(setPlainTextKey, textContent);
+    });
+  }), [editor]);
+  return null;
+};
+ExposePlainTextPlugin.propTypes = {
+  setFieldValue: _propTypes.default.func.isRequired,
+  setPlainTextKey: _propTypes.default.string.isRequired
+};
+ExposePlainTextPlugin.defaultProps = {
+  //
+};
+var _default = exports.default = ExposePlainTextPlugin;

package/dist/cjs/f/fields/EditorInput/common/ToolbarPlugin/ToolbarPlugin.js

@@ -180,7 +180,7 @@ const ToolbarPlugin = _ref => {
   }, [applyStyleText]);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${baseBgColor}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${baseBgColor} b-x`].filter(e => e).join(' '),
     style: inlineStyles
   }, /*#__PURE__*/React.createElement("div", {
     className: "group"

package/dist/cjs/f/fields/EditorInput/common/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "ColorPicker", {
     return _ColorPicker.ColorPicker;
   }
 });
+Object.defineProperty(exports, "ExposePlainTextPlugin", {
+  enumerable: true,
+  get: function () {
+    return _ExposePlainTextPlugin.default;
+  }
+});
 Object.defineProperty(exports, "FontSizeDropDown", {
   enumerable: true,
   get: function () {
@@ -45,4 +51,5 @@ var _StopPropagationPlugin = _interopRequireDefault(require("./StopPropagationPl
 var _ToolbarPlugin = require("./ToolbarPlugin");
 var _ColorPicker = require("./ColorPicker");
 var _FontSizeDropDown = require("./FontSizeDropDown");
+var _ExposePlainTextPlugin = _interopRequireDefault(require("./ExposePlainTextPlugin"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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,

package/dist/cjs/g/ExpandableLexicalPreview/ExpandableLexicalPreview.js

@@ -38,7 +38,8 @@ const ExpandableLexicalPreview = _ref => {
     pageTitle,
     onBlock,
     onOpen,
-    header
+    header,
+    rows
     // ...otherProps
   } = _ref;
   const [isCollapsed, setIsCollapsed] = (0, _react.useState)(false);
@@ -79,7 +80,8 @@ const ExpandableLexicalPreview = _ref => {
     name: name,
     resize: resize,
     disabled: true,
-    id: "the-bad-ass-input"
+    id: `${id}-editor-input`,
+    rows: rows
   }), /*#__PURE__*/React.createElement(_b.Button, {
     id: id,
     className: "expand-button ai-icon",

package/dist/cjs/g/ExpandableLexicalPreview/styles.scss

@@ -10,7 +10,6 @@
   position: relative;
   width: 100%;
 
-
   &.collapsed {
     flex-direction: row;
   }

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

@@ -63,6 +63,7 @@ const InputBuilder = _ref => {
   const handleToggleShowSpecificFileTypes = () => {
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes);
   };
+  const textChoices = ['text', 'number', 'textarea', 'latex-preview-input'];
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -139,7 +140,32 @@ const InputBuilder = _ref => {
     label: "Description (optional)",
     name: `sections.${sectionIndex}.inputs.${inputIndex}.description`,
     placeholder: "Describe details for the question"
-  })), shouldRenderOptions && /*#__PURE__*/React.createElement(_formik.FieldArray, {
+  })), textChoices.includes(input?.type) && /*#__PURE__*/React.createElement("div", {
+    className: "character-limit-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "is-required"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "s0"
+  }, "Limit number of characters permitted for this input"), /*#__PURE__*/React.createElement(_a.ToggleSwitch, {
+    handleOnChange: () => {
+      setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.hasCharacterLimit`, !input?.hasCharacterLimit);
+      if (!input?.hasCharacterLimit) {
+        setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.maxLength`, '');
+      }
+    },
+    checked: input?.hasCharacterLimit,
+    style: getToggleSwitchStyles(!input?.hasCharacterLimit),
+    inputId: `sections_${sectionIndex}_inputs.${inputIndex}_character_limit_toggle`
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "character-limit-input"
+  }, input?.hasCharacterLimit && /*#__PURE__*/React.createElement(_f.TextInput, {
+    label: "Enter the maximum number of characters permitted.",
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.maxLength`,
+    placeholder: "",
+    type: "number",
+    validate: _f.integerAndGreaterThanZero,
+    value: input?.maxLength
+  }))), shouldRenderOptions && /*#__PURE__*/React.createElement(_formik.FieldArray, {
     name: `sections.${sectionIndex}.inputs.${inputIndex}.options`
   }, _ref2 => {
     let {

package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/styles.scss

@@ -64,6 +64,21 @@ $default-list-width: var(--action-button-width, 18rem);
       margin-bottom: $default-margin;
     }
 
+    > .character-limit-container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+
+      > .is-required {
+        display: flex;
+        flex-direction: row;
+      }
+
+      > .character-limit-input {
+        flex-direction: column;
+      }
+    }
+
     > .input-options {
       display: flex;
       flex-direction: column;

package/dist/cjs/g/FormBuilder/common/Builder/common/Section/Section.js

@@ -59,7 +59,10 @@ const Section = _ref => {
     inputs
   } = section;
   (0, _react.useEffect)(() => {
-    const items = inputs.map((input, indx) => ({
+    const orderMap = new Map();
+    section.orderedInputDragIds.forEach((identifier, indx) => orderMap.set(identifier, indx));
+    const orderedInputs = inputs.sort((a, b) => orderMap.get(a.name) - orderMap.get(b.name));
+    const items = orderedInputs.map((input, indx) => ({
       Content: /*#__PURE__*/React.createElement(_InputBuilder.InputBuilder, {
         key: input.name,
         sectionIndex: index,
@@ -71,6 +74,7 @@ const Section = _ref => {
     }));
     setDraggableInputs(items);
   }, [inputs.length, index]);
+  const dragAndDropKey = draggableInputs.map(e => e.identifier).join(',');
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -104,7 +108,7 @@ const Section = _ref => {
         const ids = reOrderedItems.map(e => e.identifier);
         setFieldValue(`sections.${index}.orderedInputDragIds`, ids);
       },
-      key: draggableInputs.length
+      key: dragAndDropKey
     }), /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: "add-question-cta",

package/dist/cjs/g/FormBuilder/common/Renderer/Renderer.js

@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 var _b = require("../../../../b");
 require("./styles.scss");
+var _utils = require("../../../../utils");
 var _common = require("./common");
 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); }
@@ -141,6 +142,11 @@ const Renderer = _ref => {
         onSave?.(formDataWithValues);
       }
     }, [values]);
+    (0, _react.useEffect)(() => {
+      (0, _utils.applyCharacterLimit)({
+        setMaxLength: false
+      });
+    }, [values]);
     const hasErrors = Object.keys(errors).length > 0;
     return /*#__PURE__*/React.createElement(_formik.Form, null, updatedFormData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(_common.Section, _extends({
       key: `${section.title}`

package/dist/cjs/utils/applyCharacterLimit.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyCharacterLimit = void 0;
+const applyCharacterLimit = function () {
+  let setMaxLength = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  setTimeout(() => {
+    document.querySelectorAll("[class*='limit-character-count-']").forEach(parent => {
+      const match = parent.className.match(/limit-character-count-(\d+)/);
+      if (!match) return;
+      const maxLength = parseInt(match[1], 10);
+      const fields = parent.matches("input[type='text'], input[type='email'], input[type='password'], input[type='search'], textarea") ? [parent] : Array.from(parent.querySelectorAll("input[type='text'], input[type='email'], input[type='password'], input[type='search'], textarea"));
+      if (!fields.length) return;
+      const characterCounterBaseClassName = 's-2 character-counter';
+      const characterCounterClassName = `${characterCounterBaseClassName} x-paragraph c-x`;
+      const characterCounterWarningClassName = `${characterCounterBaseClassName} x-orange c-x`;
+      const characterCounterErrorClassName = `${characterCounterBaseClassName} x-error c-x`;
+      fields.forEach(field => {
+        if (field.parentNode.querySelector('.character-counter')) return;
+        if (setMaxLength) {
+          field.setAttribute('maxlength', maxLength);
+        }
+        const counter = document.createElement('span');
+        counter.className = characterCounterClassName;
+        counter.style.position = 'absolute';
+        counter.style.right = '10px';
+        counter.style.bottom = '-20px';
+        counter.style.pointerEvents = 'none';
+        let wrapper;
+        const {
+          parentNode
+        } = field;
+        const computedStyle = window.getComputedStyle(parentNode);
+        if (parentNode.style && parentNode.style.position === 'relative' || computedStyle.getPropertyValue('position') === 'relative') {
+          wrapper = parentNode;
+        } else {
+          wrapper = document.createElement('div');
+          wrapper.style.position = 'relative';
+          wrapper.style.display = 'inline-block';
+          wrapper.style.width = '100%';
+          field.parentNode.insertBefore(wrapper, field);
+          wrapper.appendChild(field);
+        }
+        wrapper.appendChild(counter);
+        function updateCounter() {
+          if (field.value.length > maxLength) {
+            // eslint-disable-next-line no-param-reassign
+            field.value = field.value.substring(0, maxLength);
+          }
+          const {
+            length
+          } = field.value;
+          counter.textContent = `${length}/${maxLength}`;
+          if (length >= maxLength) {
+            counter.className = characterCounterErrorClassName;
+          } else if (length >= maxLength * 0.9) {
+            counter.className = characterCounterWarningClassName;
+          } else {
+            counter.className = characterCounterClassName;
+          }
+        }
+        field.removeEventListener('input', updateCounter);
+        field.removeEventListener('paste', updateCounter);
+        field.addEventListener('input', updateCounter);
+        field.addEventListener('paste', () => {
+          setTimeout(updateCounter, 0);
+        });
+        updateCounter();
+      });
+    });
+  }, 100); // Small delay to ensure DOM is ready
+};
+exports.applyCharacterLimit = applyCharacterLimit;

package/dist/cjs/utils/formatting.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatTime = exports.formatDate = exports.DATE_FORMATS = void 0;
+exports.snakeCaseToTitleCase = exports.formatTime = exports.formatDate = exports.DATE_FORMATS = void 0;
 const DATE_FORMATS = exports.DATE_FORMATS = {
   HUMAN_READABLE: 'human_readable',
   TIME: 'time',
@@ -43,6 +43,9 @@ const formatTime = seconds => {
   if (hours > 0) parts.push(`${hours}h`);
   if (minutes > 0 || hours > 0 && remainingSeconds > 0) parts.push(`${minutes}m`);
   if (remainingSeconds > 0) parts.push(`${remainingSeconds}s`);
+
+  // Cater for decimal seconds
+  if (parts.length === 0) return '0s';
   return parts.join(' ');
 };
 exports.formatTime = formatTime;
@@ -108,4 +111,9 @@ const formatDate = function (input) {
     return 'Invalid Date';
   }
 };
-exports.formatDate = formatDate;
+exports.formatDate = formatDate;
+const snakeCaseToTitleCase = word => {
+  const result = word.replace(/([A-Z])/g, ' $1');
+  return result.charAt(0).toUpperCase() + result.slice(1);
+};
+exports.snakeCaseToTitleCase = snakeCaseToTitleCase;

package/dist/cjs/utils/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "DATE_FORMATS", {
     return _formatting.DATE_FORMATS;
   }
 });
+Object.defineProperty(exports, "applyCharacterLimit", {
+  enumerable: true,
+  get: function () {
+    return _applyCharacterLimit.applyCharacterLimit;
+  }
+});
 Object.defineProperty(exports, "formatDate", {
   enumerable: true,
   get: function () {
@@ -21,6 +27,12 @@ Object.defineProperty(exports, "formatTime", {
     return _formatting.formatTime;
   }
 });
+Object.defineProperty(exports, "snakeCaseToTitleCase", {
+  enumerable: true,
+  get: function () {
+    return _formatting.snakeCaseToTitleCase;
+  }
+});
 Object.defineProperty(exports, "useDynamicPosition", {
   enumerable: true,
   get: function () {
@@ -40,4 +52,5 @@ Object.defineProperty(exports, "useWindowSize", {
   }
 });
 var _hooks = require("./hooks");
-var _formatting = require("./formatting");
+var _formatting = require("./formatting");
+var _applyCharacterLimit = require("./applyCharacterLimit");

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

@@ -30,17 +30,6 @@ const AreaChart = ({
     color: colors[yKeys.indexOf(key)]
   }));
   const [selectedYLabels, setSelectedYLabels] = 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());
@@ -65,7 +54,7 @@ const AreaChart = ({
     width: width,
     height: height
   }, /*#__PURE__*/React.createElement(RechartsAreaChart, {
-    data: processedData
+    data: data
   }, /*#__PURE__*/React.createElement(CartesianGrid, {
     strokeDasharray: "3 3"
   }), /*#__PURE__*/React.createElement(XAxis, {
@@ -106,7 +95,8 @@ const AreaChart = ({
     }
   }), /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
-      xLabel: xLabel
+      dateFormat: dateFormat,
+      isTimeFormat: isTimeFormat
     })
   }), filled && /*#__PURE__*/React.createElement(Area, {
     id: "bounds",

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

@@ -21,8 +21,9 @@ const BarChart = ({
   yLabel,
   colors,
   height,
-  width
-  // ...otherProps
+  width,
+  isTimeFormat,
+  capitalizedLegend
 }) => {
   const allYLabels = yKeys.map(key => ({
     label: key,
@@ -40,7 +41,8 @@ const BarChart = ({
     setSelectedYLabels: setSelectedYLabels
   })), /*#__PURE__*/React.createElement(CustomLegend, {
     colorsArray: selectedYLabels.map(item => item.color),
-    yKeysArray: selectedYLabels.map(item => item.label)
+    yKeysArray: selectedYLabels.map(item => item.label),
+    capitalizedLegend: capitalizedLegend
   }), /*#__PURE__*/React.createElement(ResponsiveContainer, {
     width: width,
     height: height
@@ -70,7 +72,7 @@ const BarChart = ({
     tickLine: false
   }), /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
-      xLabel: xLabel
+      isTimeFormat: isTimeFormat
     })
   }), selectedYLabels.map(key => /*#__PURE__*/React.createElement(Bar, {
     stackId: "a",

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

@@ -1,6 +1,7 @@
 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 = 'custom-legend';
@@ -9,28 +10,28 @@ const CustomLegend = ({
   className: userClassName,
   colorsArray,
   yKeysArray,
+  orientation,
+  getLegendItemTitle,
+  getLegendItemSubtitle,
   capitalizedLegend
-}) => {
-  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(' ')
-  }, yKeysArray.map((key, index) => /*#__PURE__*/React.createElement("div", {
-    key: key,
-    className: "item"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "dot",
-    style: {
-      backgroundColor: colorsArray[index]
-    }
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, capitalizeWord(key)))));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  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: {
+    backgroundColor: colorsArray[index]
+  }
+}), /*#__PURE__*/React.createElement("span", {
+  className: "text"
+}, capitalizedLegend ? snakeCaseToTitleCase(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("span", {
+  className: "sub-title"
+}, getLegendItemSubtitle(key)))));
 CustomLegend.propTypes = {
   /**
    * The id of the dropdown component.
@@ -48,12 +49,28 @@ CustomLegend.propTypes = {
    * Array of keys for the y-axis data.
    */
   yKeysArray: PropTypes.arrayOf(PropTypes.string).isRequired,
+  /**
+   * The orientation of the Legend
+   */
+  orientation: PropTypes.oneOf(['vertical', 'horizontal']),
+  /**
+   * The function to get the legendItemKey
+   */
+  getLegendItemTitle: PropTypes.func,
+  /**
+   * The function to get legend children
+   */
+  getLegendItemSubtitle: PropTypes.func,
   /**
    * Flag on whether to capitalize legend keys
    */
   capitalizedLegend: PropTypes.bool
 };
 CustomLegend.defaultProps = {
+  orientation: 'horizontal',
+  getLegendItemTitle: key => key,
+  /* eslint-disable no-unused-vars */
+  getLegendItemSubtitle: () => {},
   capitalizedLegend: false
 };
 export default CustomLegend;

package/dist/es/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;
+      }
     }
   }
 }