@pareto-engineering/design-system 5.0.0 → 5.0.2

package/dist/cjs/a/{AreaChart → Charts/AreaChart}/AreaChart.js

@@ -4,18 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _recharts = require("recharts");
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _utils = require("../../../utils");
+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; }
-// front/packages/design-system/src/ui/a/AreaChart/AreaChart.jsx
-
-// Local Definitions
-
 const baseClassName = _exports.default.base;
 const componentClassName = 'area-chart';
 const AreaChart = _ref => {
@@ -31,19 +30,16 @@ const AreaChart = _ref => {
     colors,
     filled,
     height,
-    width
-    // ...otherProps
+    width,
+    isTimeFormat,
+    dateFormat,
+    capitalizedLegend
   } = _ref;
-  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]
-    };
-  });
+  const allYLabels = yKeys.map(key => ({
+    label: key,
+    color: colors[yKeys.indexOf(key)]
+  }));
+  const [selectedYLabels, setSelectedYLabels] = (0, _react.useState)(allYLabels);
   const yAxisBounds = () => {
     const yValues = data.map(item => yKeys.map(key => item[key]));
     const min = Math.min(...yValues.flat());
@@ -51,58 +47,24 @@ const AreaChart = _ref => {
     const margin = (max - min) * 0.1;
     return [min - margin, max + margin];
   };
-  const CustomTooltipContent = _ref2 => {
-    let {
-      active,
-      payload,
-      label
-    } = _ref2;
-    if (active && payload && payload.length) {
-      const newPayload = payload.filter(item => item.name !== 'bounds');
-      return /*#__PURE__*/React.createElement("div", {
-        className: "custom-tooltip"
-      }, /*#__PURE__*/React.createElement("p", {
-        className: "label"
-      }, `${xLabel}: ${label}`), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
-        className: "label",
-        key: `${entry.name}`,
-        style: {
-          color: entry.color
-        }
-      }, `${entry.name}: ${entry.value}`)));
-    }
-    return null;
-  };
-  const CustomLegend = _ref3 => {
-    let {
-      colorsArray,
-      yKeysArray
-    } = _ref3;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "custom-legend"
-    }, yKeysArray.map((key, index) => /*#__PURE__*/React.createElement("div", {
-      key: key,
-      className: "item"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "line",
-      style: {
-        backgroundColor: colorsArray[index]
-      }
-    }), /*#__PURE__*/React.createElement("span", {
-      className: "text"
-    }, key))));
-  };
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
-  }, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(CustomLegend, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "chart-header"
+  }, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(_Common.YLabelsDropDown, {
+    allYLabels: allYLabels,
+    selectedYLabels: selectedYLabels,
+    setSelectedYLabels: setSelectedYLabels
+  })), /*#__PURE__*/React.createElement(_Common.CustomLegend, {
     colorsArray: colors,
-    yKeysArray: yKeys
+    yKeysArray: yKeys,
+    capitalizedLegend: capitalizedLegend
   }), /*#__PURE__*/React.createElement(_recharts.ResponsiveContainer, {
     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, {
@@ -114,7 +76,8 @@ const AreaChart = _ref => {
     },
     axisLine: false,
     tickLine: false,
-    tickCount: 3
+    tickCount: 3,
+    tickFormatter: value => (0, _utils.formatDate)(value, dateFormat)
   }), /*#__PURE__*/React.createElement(_recharts.YAxis, {
     domain: yAxisBounds,
     scale: "linear",
@@ -123,7 +86,7 @@ const AreaChart = _ref => {
       value: yLabel,
       angle: -90,
       position: 'left',
-      offset: 1,
+      offset: -3,
       style: {
         textAnchor: 'middle'
       }
@@ -133,10 +96,18 @@ const AreaChart = _ref => {
       bottom: 10
     },
     axisLine: false,
-    tickLine: true,
-    tickFormatter: value => value.toFixed(2)
+    tickLine: false,
+    tickFormatter: value => {
+      if (isTimeFormat) {
+        return (0, _utils.formatTime)(value);
+      }
+      return value.toFixed(2);
+    }
   }), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
-    content: /*#__PURE__*/React.createElement(CustomTooltipContent, null)
+    content: /*#__PURE__*/React.createElement(_Common.CustomTooltipContent, {
+      dateFormat: dateFormat,
+      isTimeFormat: isTimeFormat
+    })
   }), filled && /*#__PURE__*/React.createElement(_recharts.Area, {
     id: "bounds",
     type: "linear",
@@ -148,12 +119,12 @@ const AreaChart = _ref => {
     dot: false,
     label: false,
     isAnimationActive: false
-  }), yKeys.map((key, index) => /*#__PURE__*/React.createElement(_recharts.Area, {
-    id: key,
-    key: key,
+  }), selectedYLabels.map(key => /*#__PURE__*/React.createElement(_recharts.Area, {
+    id: key.label,
+    key: key.label,
     type: "linear",
-    dataKey: key,
-    stroke: colors[index],
+    dataKey: key.label,
+    stroke: key.color,
     fill: "none",
     connectNulls: true,
     dot: false,
@@ -164,21 +135,66 @@ const AreaChart = _ref => {
   })))));
 };
 AreaChart.propTypes = {
+  /**
+   * Array of data objects to be displayed in the chart.
+   */
   // eslint-disable-next-line react/forbid-prop-types
   data: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * Title of the chart.
+   */
   title: _propTypes.default.string.isRequired,
+  /**
+   * Key for the x-axis data.
+   */
   xKey: _propTypes.default.string.isRequired,
+  /**
+   * Array of keys for the y-axis data.
+   */
   yKeys: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  /**
+   * Label for the x-axis.
+   */
   xLabel: _propTypes.default.string,
+  /**
+   * Label for the y-axis.
+   */
   yLabel: _propTypes.default.string,
+  /**
+   * Array of colors corresponding to the y-axis data keys.
+   */
   colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  /**
+   * Boolean to determine if the area under the curve should be filled.
+   */
   filled: _propTypes.default.bool,
+  /**
+   * Height of the chart.
+   */
   height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  /**
+   * Width of the chart.
+   */
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  /**
+   * Flag on whether to capitalize legend keys
+   */
+  capitalizedLegend: _propTypes.default.bool,
+  /**
+   * 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))
 };
 AreaChart.defaultProps = {
   filled: false,
   width: '100%',
-  height: 300
+  height: 300,
+  capitalizedLegend: false,
+  isTimeFormat: false,
+  dateFormat: _utils.DATE_FORMATS.HUMAN_READABLE
 };
 var _default = exports.default = AreaChart;

package/dist/cjs/a/Charts/AreaChart/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} {
+  &.area-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;
+      }
+    }
+
+    /* stylelint-disable selector-max-compound-selectors -- nested elements */
+    .recharts-wrapper {
+      .recharts-surface {
+        .recharts-cartesian-grid line {
+          stroke: var(--ui-lines);
+        }
+
+        .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/BarChart/BarChart.js

@@ -0,0 +1,137 @@
+"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 _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; }
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'bar-chart';
+const BarChart = _ref => {
+  let {
+    id,
+    className: userClassName,
+    data,
+    title,
+    xKey,
+    yKeys,
+    xLabel,
+    yLabel,
+    colors,
+    height,
+    width,
+    isTimeFormat,
+    capitalizedLegend
+  } = _ref;
+  const allYLabels = yKeys.map(key => ({
+    label: key,
+    color: colors[yKeys.indexOf(key)]
+  }));
+  const [selectedYLabels, setSelectedYLabels] = (0, _react.useState)(allYLabels);
+  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(_Common.YLabelsDropDown, {
+    allYLabels: allYLabels,
+    selectedYLabels: selectedYLabels,
+    setSelectedYLabels: setSelectedYLabels
+  })), /*#__PURE__*/React.createElement(_Common.CustomLegend, {
+    colorsArray: selectedYLabels.map(item => item.color),
+    yKeysArray: selectedYLabels.map(item => item.label),
+    capitalizedLegend: capitalizedLegend
+  }), /*#__PURE__*/React.createElement(_recharts.ResponsiveContainer, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(_recharts.BarChart, {
+    data: data
+  }, /*#__PURE__*/React.createElement(_recharts.CartesianGrid, {
+    vertical: false
+  }), /*#__PURE__*/React.createElement(_recharts.XAxis, {
+    dataKey: xKey,
+    label: {
+      value: xLabel,
+      position: 'insideBottom',
+      offset: -5
+    } // Adjusted offset for padding
+    ,
+    axisLine: false,
+    tickLine: false,
+    tickCount: 3
+  }), /*#__PURE__*/React.createElement(_recharts.YAxis, {
+    label: {
+      value: yLabel,
+      angle: -90,
+      position: 'insideLeft',
+      offset: 15
+    },
+    axisLine: false,
+    tickLine: false
+  }), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
+    content: /*#__PURE__*/React.createElement(_Common.CustomTooltipContent, {
+      isTimeFormat: isTimeFormat
+    })
+  }), selectedYLabels.map(key => /*#__PURE__*/React.createElement(_recharts.Bar, {
+    stackId: "a",
+    id: key.label,
+    key: key.label,
+    dataKey: key.label,
+    fill: key.color
+  })))));
+};
+BarChart.propTypes = {
+  /**
+   * Array of data objects to be displayed in the chart.
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  data: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * Title of the chart.
+   */
+  title: _propTypes.default.string.isRequired,
+  /**
+   * Key for the x-axis data.
+   */
+  xKey: _propTypes.default.string.isRequired,
+  /**
+   * Array of keys for the y-axis data.
+   */
+  yKeys: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  /**
+   * Label for the x-axis.
+   */
+  xLabel: _propTypes.default.string,
+  /**
+   * Label for the y-axis.
+   */
+  yLabel: _propTypes.default.string,
+  /**
+   * Array of colors corresponding to the y-axis data keys.
+   */
+  colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  /**
+   * Height of the chart.
+   */
+  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  /**
+   * Width of the chart.
+   */
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+};
+BarChart.defaultProps = {
+  width: '100%',
+  height: 300
+};
+var _default = exports.default = BarChart;

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

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

package/dist/cjs/a/Charts/BarChart/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} {
+  &.bar-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;
+      }
+    }
+
+    /* stylelint-disable selector-max-compound-selectors -- nested elements */
+    .recharts-wrapper {
+      .recharts-surface {
+        .recharts-cartesian-grid line {
+          stroke: var(--ui-lines);
+        }
+
+        .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/Common/CustomLegend/CustomLegend.js

@@ -0,0 +1,88 @@
+"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-legend';
+const CustomLegend = _ref => {
+  let {
+    id,
+    className: userClassName,
+    colorsArray,
+    yKeysArray,
+    orientation,
+    getLegendItemTitle,
+    getLegendItemSubtitle,
+    capitalizedLegend
+  } = _ref;
+  return /*#__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 ? (0, _utils.snakeCaseToTitleCase)(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("span", {
+    className: "sub-title"
+  }, getLegendItemSubtitle(key)))));
+};
+CustomLegend.propTypes = {
+  /**
+   * The id of the dropdown component.
+   */
+  id: _propTypes.default.string,
+  /**
+   * Additional class names for the dropdown component.
+   */
+  className: _propTypes.default.string,
+  /**
+   * Array of colors corresponding to the y-axis data keys.
+   */
+  colorsArray: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  /**
+   * 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/index.js

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

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

@@ -0,0 +1,67 @@
+@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;
+$default-legend-padding: calc($default-padding * .125) calc($default-padding * .625);
+$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 {
+    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 {
+      border-radius: $default-border-radius;
+      padding: $default-legend-padding;
+
+      .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);
+        }
+      }
+
+      .sub-title {
+        color: var(--heading);
+        display: flex;
+        font-size: calc($default-text-font-size * 1.2);
+        font-weight: 500;
+        justify-content: flex-end;
+      }
+    }
+  }
+}