@spaced-out/ui-design-system 0.1.56 → 0.1.58

package/lib/components/Text/Text.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.JumboMedium = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmall = exports.ButtonTextMedium = exports.ButtonTextExtraSmall = exports.BodySmall = exports.BodyMedium = exports.BodyLarge = void 0;
+exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.JumboSmall = exports.JumboMedium = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmallUnderline = exports.ButtonTextSmall = exports.ButtonTextMediumUnderline = exports.ButtonTextMedium = exports.ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmall = exports.BodySmallBold = exports.BodySmall = exports.BodyMediumBold = exports.BodyMedium = exports.BodyLargeBold = exports.BodyLarge = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -62,7 +62,7 @@ const JumboMedium = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }) : children);
 });
 exports.JumboMedium = JumboMedium;
-const TitleMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const JumboSmall = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -73,6 +73,29 @@ const TitleMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     highlightWithBackground,
     ...props
   } = _ref3;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.jumboSmall, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.JumboSmall = JumboSmall;
+const TitleMedium = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref4;
   return /*#__PURE__*/React.createElement("h1", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.titleMedium, _typographyModule.default[color], className),
     ref: ref
@@ -85,7 +108,7 @@ const TitleMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   }) : children);
 });
 exports.TitleMedium = TitleMedium;
-const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -95,7 +118,7 @@ const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref4;
+  } = _ref5;
   return /*#__PURE__*/React.createElement("h2", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _typographyModule.default[color], className),
     ref: ref
@@ -108,7 +131,7 @@ const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   }) : children);
 });
 exports.SubTitleLarge = SubTitleLarge;
-const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -118,7 +141,7 @@ const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref5;
+  } = _ref6;
   return /*#__PURE__*/React.createElement("h3", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _typographyModule.default[color], className),
     ref: ref
@@ -131,7 +154,7 @@ const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   }) : children);
 });
 exports.SubTitleMedium = SubTitleMedium;
-const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -141,7 +164,7 @@ const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref6;
+  } = _ref7;
   return /*#__PURE__*/React.createElement("h4", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _typographyModule.default[color], className),
     ref: ref
@@ -154,7 +177,7 @@ const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   }) : children);
 });
 exports.SubTitleSmall = SubTitleSmall;
-const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -164,7 +187,7 @@ const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref7;
+  } = _ref8;
   return /*#__PURE__*/React.createElement("h5", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _typographyModule.default[color], className),
     ref: ref
@@ -177,7 +200,7 @@ const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   }) : children);
 });
 exports.SubTitleExtraSmall = SubTitleExtraSmall;
-const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -187,7 +210,7 @@ const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref8;
+  } = _ref9;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className),
     ref: ref
@@ -200,7 +223,7 @@ const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   }) : children);
 });
 exports.ButtonTextMedium = ButtonTextMedium;
-const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
+const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -210,7 +233,7 @@ const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref9;
+  } = _ref10;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className),
     ref: ref
@@ -223,7 +246,7 @@ const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   }) : children);
 });
 exports.ButtonTextSmall = ButtonTextSmall;
-const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
+const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -233,7 +256,7 @@ const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref10;
+  } = _ref11;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className),
     ref: ref
@@ -246,7 +269,7 @@ const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   }) : children);
 });
 exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
-const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
+const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -256,7 +279,76 @@ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref11;
+  } = _ref12;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default.underline, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.ButtonTextMediumUnderline = ButtonTextMediumUnderline;
+const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref13;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.ButtonTextSmallUnderline = ButtonTextSmallUnderline;
+const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref14;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.ButtonTextExtraSmallUnderline = ButtonTextExtraSmallUnderline;
+const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref15;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className),
     ref: ref
@@ -269,7 +361,7 @@ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   }) : children);
 });
 exports.FormInputMedium = FormInputMedium;
-const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
+const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -279,7 +371,7 @@ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref12;
+  } = _ref16;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className),
     ref: ref
@@ -292,7 +384,7 @@ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   }) : children);
 });
 exports.FormInputSmall = FormInputSmall;
-const BodyLarge = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
+const BodyLarge = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -302,7 +394,7 @@ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref13;
+  } = _ref17;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className),
     ref: ref
@@ -315,7 +407,7 @@ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
   }) : children);
 });
 exports.BodyLarge = BodyLarge;
-const BodyMedium = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
+const BodyMedium = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -325,7 +417,7 @@ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref14;
+  } = _ref18;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className),
     ref: ref
@@ -338,7 +430,7 @@ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   }) : children);
 });
 exports.BodyMedium = BodyMedium;
-const BodySmall = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
+const BodySmall = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -348,7 +440,7 @@ const BodySmall = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref15;
+  } = _ref19;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className),
     ref: ref
@@ -361,7 +453,7 @@ const BodySmall = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   }) : children);
 });
 exports.BodySmall = BodySmall;
-const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
+const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -371,7 +463,76 @@ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref16;
+  } = _ref20;
+  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default.bold, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.BodyLargeBold = BodyLargeBold;
+const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref21;
+  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default.bold, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.BodyMediumBold = BodyMediumBold;
+const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref22;
+  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default.bold, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.BodySmallBold = BodySmallBold;
+const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref23;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className),
     ref: ref
@@ -384,7 +545,7 @@ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   }) : children);
 });
 exports.FormLabelMedium = FormLabelMedium;
-const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
+const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -394,7 +555,7 @@ const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref17;
+  } = _ref24;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className),
     ref: ref