@spaced-out/ui-design-system 0.5.7-beta.3 → 0.5.7

package/lib/components/Text/Text.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.MenuTextSmall = exports.MenuTextMedium = exports.JumboSmall = exports.JumboMedium = exports.JumboLarge = 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("src/types/typography");
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _string = require("src/utils/string");
-var _typographyModule = _interopRequireDefault(require("src/styles/typography.module.css"));
+var _typography = require("../../types/typography");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _string = require("../../utils/string");
+var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-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); }
 const HighlightText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     text,
@@ -25,18 +25,18 @@ const HighlightText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const highlightArray = [].concat(highlight).filter(item => item !== '');
   const highlights = highlightArray.map(_string.escapeRegExp).join('|');
   const parts = text.split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi')).filter(part => part !== '');
-  return /*#__PURE__*/React.createElement("span", {
-    ref: ref
-  }, parts.map((part, idx) => {
-    const isHighlighted = highlightArray.some(highlightTerm => caseSensitiveHighlighting ? (0, _string.escapeRegExp)(part).includes((0, _string.escapeRegExp)(highlightTerm)) : (0, _string.escapeRegExp)(part).toLowerCase().includes((0, _string.escapeRegExp)(highlightTerm).toLowerCase()));
-    return isHighlighted ? /*#__PURE__*/React.createElement("span", {
-      // eslint-disable-next-line react/no-array-index-key
-      key: idx,
-      className: (0, _classify.default)(_typographyModule.default.highlightText, {
-        [_typographyModule.default.bgHighlighting]: highlightWithBackground
-      }, highlightClassName)
-    }, part) : part;
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ref: ref,
+    children: parts.map((part, idx) => {
+      const isHighlighted = highlightArray.some(highlightTerm => caseSensitiveHighlighting ? (0, _string.escapeRegExp)(part).includes((0, _string.escapeRegExp)(highlightTerm)) : (0, _string.escapeRegExp)(part).toLowerCase().includes((0, _string.escapeRegExp)(highlightTerm).toLowerCase()));
+      return isHighlighted ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _classify.default)(_typographyModule.default.highlightText, {
+          [_typographyModule.default.bgHighlighting]: highlightWithBackground
+        }, highlightClassName),
+        children: part
+      }, idx) : part;
+    })
+  });
 });
 const JumboLarge = exports.JumboLarge = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
@@ -49,16 +49,18 @@ const JumboLarge = exports.JumboLarge = /*#__PURE__*/React.forwardRef((_ref2, re
     highlightWithBackground,
     ...props
   } = _ref2;
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.jumboLarge, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const JumboMedium = exports.JumboMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
@@ -71,16 +73,18 @@ const JumboMedium = exports.JumboMedium = /*#__PURE__*/React.forwardRef((_ref3,
     highlightWithBackground,
     ...props
   } = _ref3;
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.jumboMedium, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const JumboSmall = exports.JumboSmall = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
@@ -93,16 +97,18 @@ const JumboSmall = exports.JumboSmall = /*#__PURE__*/React.forwardRef((_ref4, re
     highlightWithBackground,
     ...props
   } = _ref4;
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ...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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const TitleMedium = exports.TitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
@@ -115,16 +121,18 @@ const TitleMedium = exports.TitleMedium = /*#__PURE__*/React.forwardRef((_ref5,
     highlightWithBackground,
     ...props
   } = _ref5;
-  return /*#__PURE__*/React.createElement("h1", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.titleMedium, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const SubTitleLarge = exports.SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
@@ -137,16 +145,18 @@ const SubTitleLarge = exports.SubTitleLarge = /*#__PURE__*/React.forwardRef((_re
     highlightWithBackground,
     ...props
   } = _ref6;
-  return /*#__PURE__*/React.createElement("h2", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const SubTitleMedium = exports.SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
@@ -159,16 +169,18 @@ const SubTitleMedium = exports.SubTitleMedium = /*#__PURE__*/React.forwardRef((_
     highlightWithBackground,
     ...props
   } = _ref7;
-  return /*#__PURE__*/React.createElement("h3", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const SubTitleSmall = exports.SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
@@ -181,16 +193,18 @@ const SubTitleSmall = exports.SubTitleSmall = /*#__PURE__*/React.forwardRef((_re
     highlightWithBackground,
     ...props
   } = _ref8;
-  return /*#__PURE__*/React.createElement("h4", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const SubTitleExtraSmall = exports.SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   let {
@@ -203,16 +217,18 @@ const SubTitleExtraSmall = exports.SubTitleExtraSmall = /*#__PURE__*/React.forwa
     highlightWithBackground,
     ...props
   } = _ref9;
-  return /*#__PURE__*/React.createElement("h5", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const ButtonTextMedium = exports.ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref0, ref) => {
   let {
@@ -225,16 +241,18 @@ const ButtonTextMedium = exports.ButtonTextMedium = /*#__PURE__*/React.forwardRe
     highlightWithBackground,
     ...props
   } = _ref0;
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const ButtonTextSmall = exports.ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref1, ref) => {
   let {
@@ -247,16 +265,18 @@ const ButtonTextSmall = exports.ButtonTextSmall = /*#__PURE__*/React.forwardRef(
     highlightWithBackground,
     ...props
   } = _ref1;
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const MenuTextMedium = exports.MenuTextMedium = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   let {
@@ -269,16 +289,18 @@ const MenuTextMedium = exports.MenuTextMedium = /*#__PURE__*/React.forwardRef((_
     highlightWithBackground,
     ...props
   } = _ref10;
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.menuTextMedium, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const MenuTextSmall = exports.MenuTextSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   let {
@@ -291,16 +313,18 @@ const MenuTextSmall = exports.MenuTextSmall = /*#__PURE__*/React.forwardRef((_re
     highlightWithBackground,
     ...props
   } = _ref11;
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.menuTextSmall, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const ButtonTextExtraSmall = exports.ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   let {
@@ -313,16 +337,18 @@ const ButtonTextExtraSmall = exports.ButtonTextExtraSmall = /*#__PURE__*/React.f
     highlightWithBackground,
     ...props
   } = _ref12;
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const ButtonTextMediumUnderline = exports.ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
   let {
@@ -335,16 +361,18 @@ const ButtonTextMediumUnderline = exports.ButtonTextMediumUnderline = /*#__PURE_
     highlightWithBackground,
     ...props
   } = _ref13;
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ...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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const ButtonTextSmallUnderline = exports.ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   let {
@@ -357,16 +385,18 @@ const ButtonTextSmallUnderline = exports.ButtonTextSmallUnderline = /*#__PURE__*
     highlightWithBackground,
     ...props
   } = _ref14;
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ...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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   let {
@@ -379,16 +409,18 @@ const ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmallUnderline = /*
     highlightWithBackground,
     ...props
   } = _ref15;
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ...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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const FormInputMedium = exports.FormInputMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
@@ -401,16 +433,18 @@ const FormInputMedium = exports.FormInputMedium = /*#__PURE__*/React.forwardRef(
     highlightWithBackground,
     ...props
   } = _ref16;
-  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.formInputMedium, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const FormInputSmall = exports.FormInputSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
   let {
@@ -423,16 +457,18 @@ const FormInputSmall = exports.FormInputSmall = /*#__PURE__*/React.forwardRef((_
     highlightWithBackground,
     ...props
   } = _ref17;
-  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.formInputSmall, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const BodyLarge = exports.BodyLarge = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   let {
@@ -445,16 +481,18 @@ const BodyLarge = exports.BodyLarge = /*#__PURE__*/React.forwardRef((_ref18, ref
     highlightWithBackground,
     ...props
   } = _ref18;
-  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const BodyMedium = exports.BodyMedium = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
   let {
@@ -467,16 +505,18 @@ const BodyMedium = exports.BodyMedium = /*#__PURE__*/React.forwardRef((_ref19, r
     highlightWithBackground,
     ...props
   } = _ref19;
-  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const BodySmall = exports.BodySmall = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
   let {
@@ -489,16 +529,18 @@ const BodySmall = exports.BodySmall = /*#__PURE__*/React.forwardRef((_ref20, ref
     highlightWithBackground,
     ...props
   } = _ref20;
-  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const BodyLargeBold = exports.BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
   let {
@@ -511,16 +553,18 @@ const BodyLargeBold = exports.BodyLargeBold = /*#__PURE__*/React.forwardRef((_re
     highlightWithBackground,
     ...props
   } = _ref21;
-  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    ...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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const BodyMediumBold = exports.BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
   let {
@@ -533,16 +577,18 @@ const BodyMediumBold = exports.BodyMediumBold = /*#__PURE__*/React.forwardRef((_
     highlightWithBackground,
     ...props
   } = _ref22;
-  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    ...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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const BodySmallBold = exports.BodySmallBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
   let {
@@ -555,16 +601,18 @@ const BodySmallBold = exports.BodySmallBold = /*#__PURE__*/React.forwardRef((_re
     highlightWithBackground,
     ...props
   } = _ref23;
-  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    ...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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const FormLabelMedium = exports.FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
   let {
@@ -577,16 +625,18 @@ const FormLabelMedium = exports.FormLabelMedium = /*#__PURE__*/React.forwardRef(
     highlightWithBackground,
     ...props
   } = _ref24;
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });
 const FormLabelSmall = exports.FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref25, ref) => {
   let {
@@ -599,14 +649,16 @@ const FormLabelSmall = exports.FormLabelSmall = /*#__PURE__*/React.forwardRef((_
     highlightWithBackground,
     ...props
   } = _ref25;
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ...props,
     className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _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);
+    ref: ref,
+    children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
+      text: children,
+      highlight: highlightString,
+      caseSensitiveHighlighting: caseSensitiveHighlighting,
+      highlightClassName: highlightedTextClassName,
+      highlightWithBackground: highlightWithBackground
+    }) : children
+  });
 });