@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.3

package/dist/js/styles/typography.js

@@ -0,0 +1,627 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeadlineXXSStyling = exports.HeadlineXSStyling = exports.HeadlineSStyling = exports.HeadlineMStyling = exports.HeadlineLStyling = exports.HeadlineXLStyling = exports.ParagraphXSStyling = exports.ParagraphSStyling = exports.ParagraphMStyling = exports.ParagraphLStyling = exports.ParagraphXlStyling = exports.ComponentXXSStyling = exports.ComponentXSStyling = exports.ComponentSStyling = exports.ComponentMStyling = exports.ComponentLStyling = exports.ComponentXLStyling = exports.ComponentResponsive = exports.ComponentXXS = exports.ComponentXS = exports.ComponentS = exports.ComponentM = exports.ComponentL = exports.ComponentXL = exports.ComponentTextStyle = exports.ParagraphXS = exports.ParagraphS = exports.ParagraphM = exports.ParagraphL = exports.ParagraphXL = exports.ParagraphTextStyle = exports.HeadlineXXS = exports.HeadlineXS = exports.HeadlineS = exports.HeadlineM = exports.HeadlineL = exports.HeadlineXL = exports.TYPOGRAPHY = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _ = require(".");
+
+var _types = require("../types");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var TYPOGRAPHY = {
+  fontFamily: 'Lato, sans-serif'
+};
+exports.TYPOGRAPHY = TYPOGRAPHY;
+var TypographyBase = (0, _styledComponents.default)('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 (0, _styledComponents.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 = (0, _styledComponents.default)(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);
+};
+
+exports.HeadlineXLStyling = HeadlineXLStyling;
+var HeadlineXL = (0, _styledComponents.default)(HeadlineBase)(function (_ref3) {
+  var $color = _ref3.$color;
+  return {
+    fontSize: '48px',
+    lineHeight: '64px',
+    color: $color
+  };
+});
+exports.HeadlineXL = HeadlineXL;
+
+var HeadlineLStyling = function HeadlineLStyling(color) {
+  return HeadlineBaseStyling('40px', '52px', color);
+};
+
+exports.HeadlineLStyling = HeadlineLStyling;
+var HeadlineL = (0, _styledComponents.default)(HeadlineBase)(function (_ref4) {
+  var $color = _ref4.$color;
+  return {
+    fontSize: '40px',
+    lineHeight: '52px',
+    color: $color
+  };
+});
+exports.HeadlineL = HeadlineL;
+
+var HeadlineMStyling = function HeadlineMStyling(color) {
+  return HeadlineBaseStyling('32px', '40px', color);
+};
+
+exports.HeadlineMStyling = HeadlineMStyling;
+var HeadlineM = (0, _styledComponents.default)(HeadlineBase)(function (_ref5) {
+  var $color = _ref5.$color;
+  return {
+    fontSize: '32px',
+    lineHeight: '40px',
+    color: $color
+  };
+});
+exports.HeadlineM = HeadlineM;
+
+var HeadlineSStyling = function HeadlineSStyling(color) {
+  return HeadlineBaseStyling('28px', '36px', color);
+};
+
+exports.HeadlineSStyling = HeadlineSStyling;
+var HeadlineS = (0, _styledComponents.default)(HeadlineBase)(function (_ref6) {
+  var $color = _ref6.$color;
+  return {
+    fontSize: '28px',
+    lineHeight: '36px',
+    color: $color
+  };
+});
+exports.HeadlineS = HeadlineS;
+
+var HeadlineXSStyling = function HeadlineXSStyling(color) {
+  return HeadlineBaseStyling('24px', '32px', color);
+};
+
+exports.HeadlineXSStyling = HeadlineXSStyling;
+var HeadlineXS = (0, _styledComponents.default)(HeadlineBase)(function (_ref7) {
+  var $color = _ref7.$color;
+  return {
+    fontSize: '24px',
+    lineHeight: '32px',
+    color: $color
+  };
+});
+exports.HeadlineXS = HeadlineXS;
+
+var HeadlineXXSStyling = function HeadlineXXSStyling(color) {
+  return HeadlineBaseStyling('20px', '24px', color);
+};
+
+exports.HeadlineXXSStyling = HeadlineXXSStyling;
+var HeadlineXXS = (0, _styledComponents.default)(HeadlineBase)(function (_ref8) {
+  var $color = _ref8.$color;
+  return {
+    fontSize: '20px',
+    lineHeight: '24px',
+    color: $color
+  };
+});
+exports.HeadlineXXS = HeadlineXXS;
+var ParagraphStyling = (0, _styledComponents.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 = (0, _styledComponents.default)(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;
+exports.ParagraphTextStyle = ParagraphTextStyle;
+
+(function (ParagraphTextStyle) {
+  ParagraphTextStyle[ParagraphTextStyle["Regular"] = 1] = "Regular";
+  ParagraphTextStyle[ParagraphTextStyle["Bold"] = 2] = "Bold";
+  ParagraphTextStyle[ParagraphTextStyle["Italic"] = 3] = "Italic";
+  ParagraphTextStyle[ParagraphTextStyle["Underline"] = 4] = "Underline";
+})(ParagraphTextStyle || (exports.ParagraphTextStyle = ParagraphTextStyle = {}));
+
+var paragraphFontWeight = function paragraphFontWeight(textStyle) {
+  var fontWeight = 400;
+
+  if (textStyle === ParagraphTextStyle.Bold) {
+    fontWeight = 700;
+  }
+
+  return fontWeight;
+};
+
+var paragraphFontStyle = function paragraphFontStyle(textStyle) {
+  var fontStyle = textStyle && textStyle === ParagraphTextStyle.Italic ? 'italic' : '';
+  return fontStyle;
+};
+
+var paragraphTextDecorationLine = function paragraphTextDecorationLine(textStyle) {
+  var textDecoration = textStyle && textStyle === ParagraphTextStyle.Underline ? 'underline' : 'none';
+  return textDecoration;
+};
+
+var ParagraphBaseStyling = function ParagraphBaseStyling(fontSize, lineHeight, textStyle, color) {
+  return (0, _styledComponents.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);
+};
+
+exports.ParagraphXlStyling = ParagraphXlStyling;
+
+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__*/_react.default.createElement(ParagraphBase, {
+    $color: color,
+    lineHeight: 36,
+    $fontSize: 24,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle,
+    textDecorationLine: textDecorationLine,
+    marginBetweenParagraphs: "18px"
+  }, children);
+};
+
+exports.ParagraphXL = ParagraphXL;
+ParagraphXL.propTypes = {
+  color: _propTypes.default.string,
+  textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
+};
+
+var ParagraphLStyling = function ParagraphLStyling(textStyle, color) {
+  return ParagraphBaseStyling('20px', '32px', textStyle, color);
+};
+
+exports.ParagraphLStyling = ParagraphLStyling;
+
+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__*/_react.default.createElement(ParagraphBase, {
+    $color: color,
+    lineHeight: 32,
+    $fontSize: 20,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle,
+    textDecorationLine: textDecorationLine,
+    marginBetweenParagraphs: "16px"
+  }, children);
+};
+
+exports.ParagraphL = ParagraphL;
+ParagraphL.propTypes = {
+  color: _propTypes.default.string,
+  textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
+};
+
+var ParagraphMStyling = function ParagraphMStyling(textStyle, color) {
+  return ParagraphBaseStyling('18px', '28px', textStyle, color);
+};
+
+exports.ParagraphMStyling = ParagraphMStyling;
+
+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__*/_react.default.createElement(ParagraphBase, {
+    $color: color,
+    lineHeight: 28,
+    $fontSize: 18,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle,
+    textDecorationLine: textDecorationLine,
+    marginBetweenParagraphs: "14px"
+  }, children);
+};
+
+exports.ParagraphM = ParagraphM;
+ParagraphM.propTypes = {
+  color: _propTypes.default.string,
+  textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
+};
+
+var ParagraphSStyling = function ParagraphSStyling(textStyle, color) {
+  return ParagraphBaseStyling('16px', '24px', textStyle, color);
+};
+
+exports.ParagraphSStyling = ParagraphSStyling;
+
+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__*/_react.default.createElement(ParagraphBase, {
+    $color: color,
+    lineHeight: 24,
+    $fontSize: 16,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle,
+    textDecorationLine: textDecorationLine,
+    marginBetweenParagraphs: "12px"
+  }, children);
+};
+
+exports.ParagraphS = ParagraphS;
+ParagraphS.propTypes = {
+  color: _propTypes.default.string,
+  textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
+};
+
+var ParagraphXSStyling = function ParagraphXSStyling(textStyle, color) {
+  return ParagraphBaseStyling('14px', '20px', textStyle, color);
+};
+
+exports.ParagraphXSStyling = ParagraphXSStyling;
+
+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__*/_react.default.createElement(ParagraphBase, {
+    $color: color,
+    lineHeight: 20,
+    $fontSize: 14,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle,
+    textDecorationLine: textDecorationLine,
+    marginBetweenParagraphs: "10px"
+  }, children);
+};
+
+exports.ParagraphXS = ParagraphXS;
+ParagraphXS.propTypes = {
+  color: _propTypes.default.string,
+  textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
+};
+var ComponentTextStyle;
+exports.ComponentTextStyle = ComponentTextStyle;
+
+(function (ComponentTextStyle) {
+  ComponentTextStyle[ComponentTextStyle["Regular"] = 1] = "Regular";
+  ComponentTextStyle[ComponentTextStyle["Bold"] = 2] = "Bold";
+  ComponentTextStyle[ComponentTextStyle["Italic"] = 3] = "Italic";
+  ComponentTextStyle[ComponentTextStyle["UppercaseBold"] = 4] = "UppercaseBold";
+})(ComponentTextStyle || (exports.ComponentTextStyle = ComponentTextStyle = {}));
+
+var componentFontWeight = function componentFontWeight(textStyle) {
+  var fontWeight = 400;
+
+  if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {
+    fontWeight = 700;
+  }
+
+  return fontWeight;
+};
+
+var componentFontStyle = function componentFontStyle(textStyle) {
+  var fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';
+  return fontStyle;
+};
+
+var componentTextTransformation = function componentTextTransformation(textStyle) {
+  var fontStyle = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';
+  return fontStyle;
+};
+
+var ComponentStyling = function ComponentStyling(fontSize, lineHeight, textStyle, color) {
+  return (0, _styledComponents.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);
+};
+
+exports.ComponentXLStyling = ComponentXLStyling;
+
+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__*/_react.default.createElement(TypographyBase, {
+    className: className,
+    $color: color,
+    lineHeight: 28,
+    $fontSize: 24,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle
+  }, children);
+};
+
+exports.ComponentXL = ComponentXL;
+ComponentXL.propTypes = {
+  color: _propTypes.default.string,
+  className: _propTypes.default.string,
+  textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
+};
+
+var ComponentLStyling = function ComponentLStyling(textStyle, color) {
+  return ComponentStyling('20px', '24px', textStyle, color);
+};
+
+exports.ComponentLStyling = ComponentLStyling;
+
+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__*/_react.default.createElement(TypographyBase, {
+    className: className,
+    $color: color,
+    lineHeight: 24,
+    $fontSize: 20,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle
+  }, children);
+};
+
+exports.ComponentL = ComponentL;
+ComponentL.propTypes = {
+  color: _propTypes.default.string,
+  className: _propTypes.default.string,
+  textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
+};
+
+var ComponentMStyling = function ComponentMStyling(textStyle, color) {
+  return ComponentStyling('18px', '24px', textStyle, color);
+};
+
+exports.ComponentMStyling = ComponentMStyling;
+
+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__*/_react.default.createElement(TypographyBase, {
+    className: className,
+    $color: color,
+    lineHeight: 24,
+    $fontSize: 18,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle
+  }, children);
+};
+
+exports.ComponentM = ComponentM;
+ComponentM.propTypes = {
+  color: _propTypes.default.string,
+  className: _propTypes.default.string,
+  textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
+};
+
+var ComponentSStyling = function ComponentSStyling(textStyle, color) {
+  return ComponentStyling('16px', '20px', textStyle, color);
+};
+
+exports.ComponentSStyling = ComponentSStyling;
+
+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__*/_react.default.createElement(TypographyBase, {
+    className: className,
+    $color: color,
+    lineHeight: 20,
+    $fontSize: 16,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle
+  }, children);
+};
+
+exports.ComponentS = ComponentS;
+ComponentS.propTypes = {
+  color: _propTypes.default.string,
+  className: _propTypes.default.string,
+  textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
+};
+
+var ComponentXSStyling = function ComponentXSStyling(textStyle, color) {
+  return ComponentStyling('14px', '16px', textStyle, color);
+};
+
+exports.ComponentXSStyling = ComponentXSStyling;
+
+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__*/_react.default.createElement(TypographyBase, {
+    className: className,
+    $color: color,
+    lineHeight: 16,
+    $fontSize: 14,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle,
+    textTransform: textTransform
+  }, children);
+};
+
+exports.ComponentXS = ComponentXS;
+ComponentXS.propTypes = {
+  color: _propTypes.default.string,
+  className: _propTypes.default.string,
+  textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
+};
+
+var ComponentXXSStyling = function ComponentXXSStyling(textStyle, color) {
+  return ComponentStyling('12px', '16px', textStyle, color);
+};
+
+exports.ComponentXXSStyling = ComponentXXSStyling;
+
+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__*/_react.default.createElement(TypographyBase, {
+    className: className,
+    $color: color,
+    lineHeight: 16,
+    $fontSize: 12,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle,
+    textTransform: textTransform
+  }, children);
+};
+
+exports.ComponentXXS = ComponentXXS;
+ComponentXXS.propTypes = {
+  color: _propTypes.default.string,
+  className: _propTypes.default.string,
+  textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
+};
+
+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) {
+      fontsize = _types.Size.Small;
+    } else if (width < 992) {
+      fontsize = _types.Size.Medium;
+    } else {
+      fontsize = _types.Size.Large;
+    }
+  }
+
+  switch (fontsize) {
+    case _types.Size.XXSmall:
+      return /*#__PURE__*/_react.default.createElement(ComponentXXS, {
+        color: color,
+        textStyle: textStyle,
+        children: children
+      });
+
+    case _types.Size.XSmall:
+      return /*#__PURE__*/_react.default.createElement(ComponentXS, {
+        color: color,
+        textStyle: textStyle,
+        children: children
+      });
+
+    case _types.Size.Small:
+      return /*#__PURE__*/_react.default.createElement(ComponentS, {
+        color: color,
+        textStyle: textStyle,
+        children: children
+      });
+
+    case _types.Size.Medium:
+      return /*#__PURE__*/_react.default.createElement(ComponentM, {
+        color: color,
+        textStyle: textStyle,
+        children: children
+      });
+
+    case _types.Size.Large:
+    default:
+      return /*#__PURE__*/_react.default.createElement(ComponentL, {
+        color: color,
+        textStyle: textStyle,
+        children: children
+      });
+  }
+};
+
+exports.ComponentResponsive = ComponentResponsive;
+ComponentResponsive.propTypes = {
+  color: _propTypes.default.string,
+  className: _propTypes.default.string,
+  textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
+};
+//# sourceMappingURL=typography.js.map