@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

package/dist/esm/styles/typography.js

@@ -1,154 +1,133 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { COLORS } from '.';
 import { Size } from '../types';
-const TYPOGRAPHY = {
+import { jsx as _jsx } from "react/jsx-runtime";
+var TYPOGRAPHY = {
   fontFamily: 'Lato, sans-serif'
 };
-const TypographyBase = styled('div')(({
-  $color,
-  lineHeight,
-  $fontSize,
-  $fontWeight,
-  $fontStyle,
-  textTransform,
-  textDecorationLine
-}) => ({
-  fontFamily: TYPOGRAPHY.fontFamily,
-  fontSize: $fontSize,
-  fontWeight: $fontWeight,
-  lineHeight: lineHeight + 'px',
-  textTransform: textTransform ? textTransform : 'none',
-  textDecorationLine: textDecorationLine ? textDecorationLine : 'none',
-  fontStyle: $fontStyle ? $fontStyle : 'normal',
-  color: $color ? $color : COLORS.black
-}));
-
-const HeadlineBaseStyling = (fontSize, lineHeight, color) => {
-  return css`
-    font-family: ${TYPOGRAPHY.fontFamily};
-    font-size: ${fontSize};
-    line-height: ${lineHeight};
-    font-weight: 700;
-    color: ${color};
-  `;
-};
-
-const HeadlineBase = styled(TypographyBase)(({
-  $color,
-  lineHeight,
-  fontSize
-}) => ({
-  fontSize: fontSize,
-  fontWeight: 700,
-  lineHeight: lineHeight,
-  color: $color
-}));
-
-const HeadlineXLStyling = color => HeadlineBaseStyling('48px', '64px', color);
-
-const HeadlineXL = styled(HeadlineBase)(({
-  $color
-}) => ({
-  fontSize: '48px',
-  lineHeight: '64px',
-  color: $color
-}));
-
-const HeadlineLStyling = color => HeadlineBaseStyling('40px', '52px', color);
-
-const HeadlineL = styled(HeadlineBase)(({
-  $color
-}) => ({
-  fontSize: '40px',
-  lineHeight: '52px',
-  color: $color
-}));
-
-const HeadlineMStyling = color => HeadlineBaseStyling('32px', '40px', color);
-
-const HeadlineM = styled(HeadlineBase)(({
-  $color
-}) => ({
-  fontSize: '32px',
-  lineHeight: '40px',
-  color: $color
-}));
-
-const HeadlineSStyling = color => HeadlineBaseStyling('28px', '36px', color);
-
-const HeadlineS = styled(HeadlineBase)(({
-  $color
-}) => ({
-  fontSize: '28px',
-  lineHeight: '36px',
-  color: $color
-}));
-
-const HeadlineXSStyling = color => HeadlineBaseStyling('24px', '32px', color);
-
-const HeadlineXS = styled(HeadlineBase)(({
-  $color
-}) => ({
-  fontSize: '24px',
-  lineHeight: '32px',
-  color: $color
-}));
-
-const HeadlineXXSStyling = color => HeadlineBaseStyling('20px', '24px', color);
-
-const HeadlineXXS = styled(HeadlineBase)(({
-  $color
-}) => ({
-  fontSize: '20px',
-  lineHeight: '24px',
-  color: $color
-}));
-const ParagraphStyling = css`
-  :lang(ja-jp) > h1,
-  h2,
-  h3,
-  h4,
-  p,
-  span {
-    max-width: 30em;
-  }
-  :lang(ko-kr) > h1,
-  h2,
-  h3,
-  h4,
-  p,
-  span {
-    max-width: 30em;
-  }
-  :lang(zh-CN) > h1,
-  h2,
-  h3,
-  h4,
-  p,
-  span {
-    max-width: 30em;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  p,
-  span {
-    max-width: 34em;
-  }
-`;
-const ParagraphBase = styled(TypographyBase)`
-  p {
-    margin-block-start: 0;
-    margin-block-end: 0;
-  }
-  p:not(:only-of-type) {
-    margin-bottom: ${props => props.marginBetweenParagraphs || '0'};
-  }
-  ${ParagraphStyling}
-`;
+var TypographyBase = styled('div')(function (_ref) {
+  var $color = _ref.$color,
+      lineHeight = _ref.lineHeight,
+      $fontSize = _ref.$fontSize,
+      $fontWeight = _ref.$fontWeight,
+      $fontStyle = _ref.$fontStyle,
+      textTransform = _ref.textTransform,
+      textDecorationLine = _ref.textDecorationLine;
+  return {
+    fontFamily: TYPOGRAPHY.fontFamily,
+    fontSize: $fontSize,
+    fontWeight: $fontWeight,
+    lineHeight: lineHeight + 'px',
+    textTransform: textTransform ? textTransform : 'none',
+    textDecorationLine: textDecorationLine ? textDecorationLine : 'none',
+    fontStyle: $fontStyle ? $fontStyle : 'normal',
+    color: $color ? $color : COLORS.black
+  };
+});
+
+var HeadlineBaseStyling = function HeadlineBaseStyling(fontSize, lineHeight, color) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    font-weight: 700;\n    color: ", ";\n  "])), TYPOGRAPHY.fontFamily, fontSize, lineHeight, color);
+};
+
+var HeadlineBase = styled(TypographyBase)(function (_ref2) {
+  var $color = _ref2.$color,
+      lineHeight = _ref2.lineHeight,
+      fontSize = _ref2.fontSize;
+  return {
+    fontSize: fontSize,
+    fontWeight: 700,
+    lineHeight: lineHeight,
+    color: $color
+  };
+});
+
+var HeadlineXLStyling = function HeadlineXLStyling(color) {
+  return HeadlineBaseStyling('48px', '64px', color);
+};
+
+var HeadlineXL = styled(HeadlineBase)(function (_ref3) {
+  var $color = _ref3.$color;
+  return {
+    fontSize: '48px',
+    lineHeight: '64px',
+    color: $color
+  };
+});
+
+var HeadlineLStyling = function HeadlineLStyling(color) {
+  return HeadlineBaseStyling('40px', '52px', color);
+};
+
+var HeadlineL = styled(HeadlineBase)(function (_ref4) {
+  var $color = _ref4.$color;
+  return {
+    fontSize: '40px',
+    lineHeight: '52px',
+    color: $color
+  };
+});
+
+var HeadlineMStyling = function HeadlineMStyling(color) {
+  return HeadlineBaseStyling('32px', '40px', color);
+};
+
+var HeadlineM = styled(HeadlineBase)(function (_ref5) {
+  var $color = _ref5.$color;
+  return {
+    fontSize: '32px',
+    lineHeight: '40px',
+    color: $color
+  };
+});
+
+var HeadlineSStyling = function HeadlineSStyling(color) {
+  return HeadlineBaseStyling('28px', '36px', color);
+};
+
+var HeadlineS = styled(HeadlineBase)(function (_ref6) {
+  var $color = _ref6.$color;
+  return {
+    fontSize: '28px',
+    lineHeight: '36px',
+    color: $color
+  };
+});
+
+var HeadlineXSStyling = function HeadlineXSStyling(color) {
+  return HeadlineBaseStyling('24px', '32px', color);
+};
+
+var HeadlineXS = styled(HeadlineBase)(function (_ref7) {
+  var $color = _ref7.$color;
+  return {
+    fontSize: '24px',
+    lineHeight: '32px',
+    color: $color
+  };
+});
+
+var HeadlineXXSStyling = function HeadlineXXSStyling(color) {
+  return HeadlineBaseStyling('20px', '24px', color);
+};
+
+var HeadlineXXS = styled(HeadlineBase)(function (_ref8) {
+  var $color = _ref8.$color;
+  return {
+    fontSize: '20px',
+    lineHeight: '24px',
+    color: $color
+  };
+});
+var ParagraphStyling = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  :lang(ja-jp) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  :lang(ko-kr) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  :lang(zh-CN) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 34em;\n  }\n"])));
+var ParagraphBase = styled(TypographyBase)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  p {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n  p:not(:only-of-type) {\n    margin-bottom: ", ";\n  }\n  ", "\n"])), function (props) {
+  return props.marginBetweenParagraphs || '0';
+}, ParagraphStyling);
 var ParagraphTextStyle;
 
 (function (ParagraphTextStyle) {
@@ -158,8 +137,8 @@ var ParagraphTextStyle;
   ParagraphTextStyle[ParagraphTextStyle["Underline"] = 4] = "Underline";
 })(ParagraphTextStyle || (ParagraphTextStyle = {}));
 
-const paragraphFontWeight = textStyle => {
-  let fontWeight = 400;
+var paragraphFontWeight = function paragraphFontWeight(textStyle) {
+  var fontWeight = 400;
 
   if (textStyle === ParagraphTextStyle.Bold) {
     fontWeight = 700;
@@ -168,46 +147,41 @@ const paragraphFontWeight = textStyle => {
   return fontWeight;
 };
 
-const paragraphFontStyle = textStyle => {
-  let fontStyle = textStyle && textStyle === ParagraphTextStyle.Italic ? 'italic' : '';
+var paragraphFontStyle = function paragraphFontStyle(textStyle) {
+  var fontStyle = textStyle && textStyle === ParagraphTextStyle.Italic ? 'italic' : '';
   return fontStyle;
 };
 
-const paragraphTextDecorationLine = textStyle => {
-  let textDecoration = textStyle && textStyle === ParagraphTextStyle.Underline ? 'underline' : 'none';
+var paragraphTextDecorationLine = function paragraphTextDecorationLine(textStyle) {
+  var textDecoration = textStyle && textStyle === ParagraphTextStyle.Underline ? 'underline' : 'none';
   return textDecoration;
 };
 
-const ParagraphBaseStyling = (fontSize, lineHeight, textStyle, color) => {
-  return css`
-    font-family: ${TYPOGRAPHY.fontFamily};
-    font-size: ${fontSize};
-    font-weight: ${paragraphFontWeight(textStyle)};
-    line-height: ${lineHeight};
-    font-style: ${paragraphFontStyle(textStyle)};
-    color: ${color};
-  `;
-};
-
-const ParagraphXlStyling = (textStyle, color) => ParagraphBaseStyling('24px', '36px', textStyle, color);
-
-const ParagraphXL = ({
-  color,
-  textStyle,
-  children
-}) => {
-  let fontWeight = paragraphFontWeight(textStyle);
-  let fontStyle = paragraphFontStyle(textStyle);
-  let textDecorationLine = paragraphTextDecorationLine(textStyle);
-  return /*#__PURE__*/React.createElement(ParagraphBase, {
+var ParagraphBaseStyling = function ParagraphBaseStyling(fontSize, lineHeight, textStyle, color) {
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    font-style: ", ";\n    color: ", ";\n  "])), TYPOGRAPHY.fontFamily, fontSize, paragraphFontWeight(textStyle), lineHeight, paragraphFontStyle(textStyle), color);
+};
+
+var ParagraphXlStyling = function ParagraphXlStyling(textStyle, color) {
+  return ParagraphBaseStyling('24px', '36px', textStyle, color);
+};
+
+var ParagraphXL = function ParagraphXL(_ref9) {
+  var color = _ref9.color,
+      textStyle = _ref9.textStyle,
+      children = _ref9.children;
+  var fontWeight = paragraphFontWeight(textStyle);
+  var fontStyle = paragraphFontStyle(textStyle);
+  var textDecorationLine = paragraphTextDecorationLine(textStyle);
+  return /*#__PURE__*/_jsx(ParagraphBase, {
     $color: color,
     lineHeight: 36,
     $fontSize: 24,
     $fontWeight: fontWeight,
     $fontStyle: fontStyle,
     textDecorationLine: textDecorationLine,
-    marginBetweenParagraphs: "18px"
-  }, children);
+    marginBetweenParagraphs: "18px",
+    children: children
+  });
 };
 
 ParagraphXL.propTypes = {
@@ -215,25 +189,27 @@ ParagraphXL.propTypes = {
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
-const ParagraphLStyling = (textStyle, color) => ParagraphBaseStyling('20px', '32px', textStyle, color);
+var ParagraphLStyling = function ParagraphLStyling(textStyle, color) {
+  return ParagraphBaseStyling('20px', '32px', textStyle, color);
+};
 
-const ParagraphL = ({
-  color,
-  textStyle,
-  children
-}) => {
-  let fontWeight = paragraphFontWeight(textStyle);
-  let fontStyle = paragraphFontStyle(textStyle);
-  let textDecorationLine = paragraphTextDecorationLine(textStyle);
-  return /*#__PURE__*/React.createElement(ParagraphBase, {
+var ParagraphL = function ParagraphL(_ref10) {
+  var color = _ref10.color,
+      textStyle = _ref10.textStyle,
+      children = _ref10.children;
+  var fontWeight = paragraphFontWeight(textStyle);
+  var fontStyle = paragraphFontStyle(textStyle);
+  var textDecorationLine = paragraphTextDecorationLine(textStyle);
+  return /*#__PURE__*/_jsx(ParagraphBase, {
     $color: color,
     lineHeight: 32,
     $fontSize: 20,
     $fontWeight: fontWeight,
     $fontStyle: fontStyle,
     textDecorationLine: textDecorationLine,
-    marginBetweenParagraphs: "16px"
-  }, children);
+    marginBetweenParagraphs: "16px",
+    children: children
+  });
 };
 
 ParagraphL.propTypes = {
@@ -241,25 +217,27 @@ ParagraphL.propTypes = {
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
-const ParagraphMStyling = (textStyle, color) => ParagraphBaseStyling('18px', '28px', textStyle, color);
+var ParagraphMStyling = function ParagraphMStyling(textStyle, color) {
+  return ParagraphBaseStyling('18px', '28px', textStyle, color);
+};
 
-const ParagraphM = ({
-  color,
-  textStyle,
-  children
-}) => {
-  let fontWeight = paragraphFontWeight(textStyle);
-  let fontStyle = paragraphFontStyle(textStyle);
-  let textDecorationLine = paragraphTextDecorationLine(textStyle);
-  return /*#__PURE__*/React.createElement(ParagraphBase, {
+var ParagraphM = function ParagraphM(_ref11) {
+  var color = _ref11.color,
+      textStyle = _ref11.textStyle,
+      children = _ref11.children;
+  var fontWeight = paragraphFontWeight(textStyle);
+  var fontStyle = paragraphFontStyle(textStyle);
+  var textDecorationLine = paragraphTextDecorationLine(textStyle);
+  return /*#__PURE__*/_jsx(ParagraphBase, {
     $color: color,
     lineHeight: 28,
     $fontSize: 18,
     $fontWeight: fontWeight,
     $fontStyle: fontStyle,
     textDecorationLine: textDecorationLine,
-    marginBetweenParagraphs: "14px"
-  }, children);
+    marginBetweenParagraphs: "14px",
+    children: children
+  });
 };
 
 ParagraphM.propTypes = {
@@ -267,25 +245,27 @@ ParagraphM.propTypes = {
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
-const ParagraphSStyling = (textStyle, color) => ParagraphBaseStyling('16px', '24px', textStyle, color);
+var ParagraphSStyling = function ParagraphSStyling(textStyle, color) {
+  return ParagraphBaseStyling('16px', '24px', textStyle, color);
+};
 
-const ParagraphS = ({
-  color,
-  textStyle,
-  children
-}) => {
-  let fontWeight = paragraphFontWeight(textStyle);
-  let fontStyle = paragraphFontStyle(textStyle);
-  let textDecorationLine = paragraphTextDecorationLine(textStyle);
-  return /*#__PURE__*/React.createElement(ParagraphBase, {
+var ParagraphS = function ParagraphS(_ref12) {
+  var color = _ref12.color,
+      textStyle = _ref12.textStyle,
+      children = _ref12.children;
+  var fontWeight = paragraphFontWeight(textStyle);
+  var fontStyle = paragraphFontStyle(textStyle);
+  var textDecorationLine = paragraphTextDecorationLine(textStyle);
+  return /*#__PURE__*/_jsx(ParagraphBase, {
     $color: color,
     lineHeight: 24,
     $fontSize: 16,
     $fontWeight: fontWeight,
     $fontStyle: fontStyle,
     textDecorationLine: textDecorationLine,
-    marginBetweenParagraphs: "12px"
-  }, children);
+    marginBetweenParagraphs: "12px",
+    children: children
+  });
 };
 
 ParagraphS.propTypes = {
@@ -293,25 +273,27 @@ ParagraphS.propTypes = {
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
-const ParagraphXSStyling = (textStyle, color) => ParagraphBaseStyling('14px', '20px', textStyle, color);
+var ParagraphXSStyling = function ParagraphXSStyling(textStyle, color) {
+  return ParagraphBaseStyling('14px', '20px', textStyle, color);
+};
 
-const ParagraphXS = ({
-  color,
-  textStyle,
-  children
-}) => {
-  let fontWeight = paragraphFontWeight(textStyle);
-  let fontStyle = paragraphFontStyle(textStyle);
-  let textDecorationLine = paragraphTextDecorationLine(textStyle);
-  return /*#__PURE__*/React.createElement(ParagraphBase, {
+var ParagraphXS = function ParagraphXS(_ref13) {
+  var color = _ref13.color,
+      textStyle = _ref13.textStyle,
+      children = _ref13.children;
+  var fontWeight = paragraphFontWeight(textStyle);
+  var fontStyle = paragraphFontStyle(textStyle);
+  var textDecorationLine = paragraphTextDecorationLine(textStyle);
+  return /*#__PURE__*/_jsx(ParagraphBase, {
     $color: color,
     lineHeight: 20,
     $fontSize: 14,
     $fontWeight: fontWeight,
     $fontStyle: fontStyle,
     textDecorationLine: textDecorationLine,
-    marginBetweenParagraphs: "10px"
-  }, children);
+    marginBetweenParagraphs: "10px",
+    children: children
+  });
 };
 
 ParagraphXS.propTypes = {
@@ -327,8 +309,8 @@ var ComponentTextStyle;
   ComponentTextStyle[ComponentTextStyle["UppercaseBold"] = 4] = "UppercaseBold";
 })(ComponentTextStyle || (ComponentTextStyle = {}));
 
-const componentFontWeight = textStyle => {
-  let fontWeight = 400;
+var componentFontWeight = function componentFontWeight(textStyle) {
+  var fontWeight = 400;
 
   if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {
     fontWeight = 700;
@@ -337,45 +319,40 @@ const componentFontWeight = textStyle => {
   return fontWeight;
 };
 
-const componentFontStyle = textStyle => {
-  let fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';
+var componentFontStyle = function componentFontStyle(textStyle) {
+  var fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';
   return fontStyle;
 };
 
-const componentTextTransformation = textStyle => {
-  let fontStyle = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';
+var componentTextTransformation = function componentTextTransformation(textStyle) {
+  var fontStyle = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';
   return fontStyle;
 };
 
-const ComponentStyling = (fontSize, lineHeight, textStyle, color) => {
-  return css`
-    font-family: ${TYPOGRAPHY.fontFamily};
-    font-size: ${fontSize};
-    font-weight: ${componentFontWeight(textStyle)};
-    line-height: ${lineHeight};
-    font-style: ${componentFontStyle(textStyle)};
-    ${color === null ? '' : `color: ${color || COLORS.black};`}
-  `;
-};
-
-const ComponentXLStyling = (textStyle, color) => ComponentStyling('24px', '28px', textStyle, color);
-
-const ComponentXL = ({
-  color,
-  textStyle,
-  children,
-  className
-}) => {
-  let fontWeight = componentFontWeight(textStyle);
-  let fontStyle = componentFontStyle(textStyle);
-  return /*#__PURE__*/React.createElement(TypographyBase, {
+var ComponentStyling = function ComponentStyling(fontSize, lineHeight, textStyle, color) {
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    font-style: ", ";\n    ", "\n  "])), TYPOGRAPHY.fontFamily, fontSize, componentFontWeight(textStyle), lineHeight, componentFontStyle(textStyle), color === null ? '' : "color: ".concat(color || COLORS.black, ";"));
+};
+
+var ComponentXLStyling = function ComponentXLStyling(textStyle, color) {
+  return ComponentStyling('24px', '28px', textStyle, color);
+};
+
+var ComponentXL = function ComponentXL(_ref14) {
+  var color = _ref14.color,
+      textStyle = _ref14.textStyle,
+      children = _ref14.children,
+      className = _ref14.className;
+  var fontWeight = componentFontWeight(textStyle);
+  var fontStyle = componentFontStyle(textStyle);
+  return /*#__PURE__*/_jsx(TypographyBase, {
     className: className,
     $color: color,
     lineHeight: 28,
     $fontSize: 24,
     $fontWeight: fontWeight,
-    $fontStyle: fontStyle
-  }, children);
+    $fontStyle: fontStyle,
+    children: children
+  });
 };
 
 ComponentXL.propTypes = {
@@ -384,24 +361,26 @@ ComponentXL.propTypes = {
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
-const ComponentLStyling = (textStyle, color) => ComponentStyling('20px', '24px', textStyle, color);
+var ComponentLStyling = function ComponentLStyling(textStyle, color) {
+  return ComponentStyling('20px', '24px', textStyle, color);
+};
 
-const ComponentL = ({
-  color,
-  textStyle,
-  children,
-  className
-}) => {
-  let fontWeight = componentFontWeight(textStyle);
-  let fontStyle = componentFontStyle(textStyle);
-  return /*#__PURE__*/React.createElement(TypographyBase, {
+var ComponentL = function ComponentL(_ref15) {
+  var color = _ref15.color,
+      textStyle = _ref15.textStyle,
+      children = _ref15.children,
+      className = _ref15.className;
+  var fontWeight = componentFontWeight(textStyle);
+  var fontStyle = componentFontStyle(textStyle);
+  return /*#__PURE__*/_jsx(TypographyBase, {
     className: className,
     $color: color,
     lineHeight: 24,
     $fontSize: 20,
     $fontWeight: fontWeight,
-    $fontStyle: fontStyle
-  }, children);
+    $fontStyle: fontStyle,
+    children: children
+  });
 };
 
 ComponentL.propTypes = {
@@ -410,24 +389,26 @@ ComponentL.propTypes = {
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
-const ComponentMStyling = (textStyle, color) => ComponentStyling('18px', '24px', textStyle, color);
+var ComponentMStyling = function ComponentMStyling(textStyle, color) {
+  return ComponentStyling('18px', '24px', textStyle, color);
+};
 
-const ComponentM = ({
-  color,
-  textStyle,
-  children,
-  className
-}) => {
-  let fontWeight = componentFontWeight(textStyle);
-  let fontStyle = componentFontStyle(textStyle);
-  return /*#__PURE__*/React.createElement(TypographyBase, {
+var ComponentM = function ComponentM(_ref16) {
+  var color = _ref16.color,
+      textStyle = _ref16.textStyle,
+      children = _ref16.children,
+      className = _ref16.className;
+  var fontWeight = componentFontWeight(textStyle);
+  var fontStyle = componentFontStyle(textStyle);
+  return /*#__PURE__*/_jsx(TypographyBase, {
     className: className,
     $color: color,
     lineHeight: 24,
     $fontSize: 18,
     $fontWeight: fontWeight,
-    $fontStyle: fontStyle
-  }, children);
+    $fontStyle: fontStyle,
+    children: children
+  });
 };
 
 ComponentM.propTypes = {
@@ -436,24 +417,26 @@ ComponentM.propTypes = {
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
-const ComponentSStyling = (textStyle, color) => ComponentStyling('16px', '20px', textStyle, color);
+var ComponentSStyling = function ComponentSStyling(textStyle, color) {
+  return ComponentStyling('16px', '20px', textStyle, color);
+};
 
-const ComponentS = ({
-  color,
-  textStyle,
-  children,
-  className
-}) => {
-  let fontWeight = componentFontWeight(textStyle);
-  let fontStyle = componentFontStyle(textStyle);
-  return /*#__PURE__*/React.createElement(TypographyBase, {
+var ComponentS = function ComponentS(_ref17) {
+  var color = _ref17.color,
+      textStyle = _ref17.textStyle,
+      children = _ref17.children,
+      className = _ref17.className;
+  var fontWeight = componentFontWeight(textStyle);
+  var fontStyle = componentFontStyle(textStyle);
+  return /*#__PURE__*/_jsx(TypographyBase, {
     className: className,
     $color: color,
     lineHeight: 20,
     $fontSize: 16,
     $fontWeight: fontWeight,
-    $fontStyle: fontStyle
-  }, children);
+    $fontStyle: fontStyle,
+    children: children
+  });
 };
 
 ComponentS.propTypes = {
@@ -462,26 +445,28 @@ ComponentS.propTypes = {
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
-const ComponentXSStyling = (textStyle, color) => ComponentStyling('14px', '16px', textStyle, color);
+var ComponentXSStyling = function ComponentXSStyling(textStyle, color) {
+  return ComponentStyling('14px', '16px', textStyle, color);
+};
 
-const ComponentXS = ({
-  color,
-  textStyle,
-  children,
-  className
-}) => {
-  let fontWeight = componentFontWeight(textStyle);
-  let fontStyle = componentFontStyle(textStyle);
-  let textTransform = componentTextTransformation(textStyle);
-  return /*#__PURE__*/React.createElement(TypographyBase, {
+var ComponentXS = function ComponentXS(_ref18) {
+  var color = _ref18.color,
+      textStyle = _ref18.textStyle,
+      children = _ref18.children,
+      className = _ref18.className;
+  var fontWeight = componentFontWeight(textStyle);
+  var fontStyle = componentFontStyle(textStyle);
+  var textTransform = componentTextTransformation(textStyle);
+  return /*#__PURE__*/_jsx(TypographyBase, {
     className: className,
     $color: color,
     lineHeight: 16,
     $fontSize: 14,
     $fontWeight: fontWeight,
     $fontStyle: fontStyle,
-    textTransform: textTransform
-  }, children);
+    textTransform: textTransform,
+    children: children
+  });
 };
 
 ComponentXS.propTypes = {
@@ -490,26 +475,28 @@ ComponentXS.propTypes = {
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
-const ComponentXXSStyling = (textStyle, color) => ComponentStyling('12px', '16px', textStyle, color);
+var ComponentXXSStyling = function ComponentXXSStyling(textStyle, color) {
+  return ComponentStyling('12px', '16px', textStyle, color);
+};
 
-const ComponentXXS = ({
-  color,
-  textStyle,
-  children,
-  className
-}) => {
-  let fontWeight = componentFontWeight(textStyle);
-  let fontStyle = componentFontStyle(textStyle);
-  let textTransform = componentTextTransformation(textStyle);
-  return /*#__PURE__*/React.createElement(TypographyBase, {
+var ComponentXXS = function ComponentXXS(_ref19) {
+  var color = _ref19.color,
+      textStyle = _ref19.textStyle,
+      children = _ref19.children,
+      className = _ref19.className;
+  var fontWeight = componentFontWeight(textStyle);
+  var fontStyle = componentFontStyle(textStyle);
+  var textTransform = componentTextTransformation(textStyle);
+  return /*#__PURE__*/_jsx(TypographyBase, {
     className: className,
     $color: color,
     lineHeight: 16,
     $fontSize: 12,
     $fontWeight: fontWeight,
     $fontStyle: fontStyle,
-    textTransform: textTransform
-  }, children);
+    textTransform: textTransform,
+    children: children
+  });
 };
 
 ComponentXXS.propTypes = {
@@ -518,14 +505,13 @@ ComponentXXS.propTypes = {
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
-const ComponentResponsive = ({
-  color,
-  textStyle,
-  children,
-  size,
-  width
-}) => {
-  let fontsize = size;
+var ComponentResponsive = function ComponentResponsive(_ref20) {
+  var color = _ref20.color,
+      textStyle = _ref20.textStyle,
+      children = _ref20.children,
+      size = _ref20.size,
+      width = _ref20.width;
+  var fontsize = size;
 
   if (!size) {
     if (width < 768) {
@@ -539,28 +525,28 @@ const ComponentResponsive = ({
 
   switch (fontsize) {
     case Size.XXSmall:
-      return /*#__PURE__*/React.createElement(ComponentXXS, {
+      return /*#__PURE__*/_jsx(ComponentXXS, {
         color: color,
         textStyle: textStyle,
         children: children
       });
 
     case Size.XSmall:
-      return /*#__PURE__*/React.createElement(ComponentXS, {
+      return /*#__PURE__*/_jsx(ComponentXS, {
         color: color,
         textStyle: textStyle,
         children: children
       });
 
     case Size.Small:
-      return /*#__PURE__*/React.createElement(ComponentS, {
+      return /*#__PURE__*/_jsx(ComponentS, {
         color: color,
         textStyle: textStyle,
         children: children
       });
 
     case Size.Medium:
-      return /*#__PURE__*/React.createElement(ComponentM, {
+      return /*#__PURE__*/_jsx(ComponentM, {
         color: color,
         textStyle: textStyle,
         children: children
@@ -568,7 +554,7 @@ const ComponentResponsive = ({
 
     case Size.Large:
     default:
-      return /*#__PURE__*/React.createElement(ComponentL, {
+      return /*#__PURE__*/_jsx(ComponentL, {
         color: color,
         textStyle: textStyle,
         children: children