@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.13

package/dist/styles/typography.js

@@ -1,130 +1,279 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { COLORS } from '.';
-import { Size } from '../types';
-export var TypographyBase = styled('div')(function (_a) {
-    var $color = _a.$color, lineHeight = _a.lineHeight, $fontSize = _a.$fontSize, $fontWeight = _a.$fontWeight, $fontStyle = _a.$fontStyle, textTransform = _a.textTransform, textDecorationLine = _a.textDecorationLine;
-    return ({
-        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 ComponentTextStyle;
-(function (ComponentTextStyle) {
-    ComponentTextStyle[ComponentTextStyle["Regular"] = 1] = "Regular";
-    ComponentTextStyle[ComponentTextStyle["Bold"] = 2] = "Bold";
-    ComponentTextStyle[ComponentTextStyle["Italic"] = 3] = "Italic";
-    ComponentTextStyle[ComponentTextStyle["UppercaseBold"] = 4] = "UppercaseBold";
-})(ComponentTextStyle || (ComponentTextStyle = {}));
-var componentFontWeight = function (textStyle) {
-    var fontWeight = 400;
-    if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {
-        fontWeight = 700;
-    }
-    return fontWeight;
-};
-var componentFontStyle = function (textStyle) {
-    var fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';
-    return fontStyle;
-};
-var componentTextTransformation = function (textStyle) {
-    var fontStyle = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';
-    return fontStyle;
-};
-var ComponentStyling = function (fontSize, lineHeight, textStyle, color) {
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    font-style: ", ";\n    ", "\n  "], ["\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    font-style: ", ";\n    ", "\n  "])), fontSize, componentFontWeight(textStyle), lineHeight, componentFontStyle(textStyle), color === null ? '' : "color: ".concat(color || COLORS.black, ";"));
-};
-var ComponentXLStyling = function (textStyle, color) { return ComponentStyling('24px', '28px', textStyle, color); };
-var ComponentXL = function (_a) {
-    var color = _a.color, textStyle = _a.textStyle, children = _a.children, className = _a.className;
-    var fontWeight = componentFontWeight(textStyle);
-    var fontStyle = componentFontStyle(textStyle);
-    return (React.createElement(TypographyBase, { className: className, "$color": color, lineHeight: 28, "$fontSize": 24, "$fontWeight": fontWeight, "$fontStyle": fontStyle }, children));
-};
-var ComponentLStyling = function (textStyle, color) { return ComponentStyling('20px', '24px', textStyle, color); };
-var ComponentL = function (_a) {
-    var color = _a.color, textStyle = _a.textStyle, children = _a.children, className = _a.className;
-    var fontWeight = componentFontWeight(textStyle);
-    var fontStyle = componentFontStyle(textStyle);
-    return (React.createElement(TypographyBase, { className: className, "$color": color, lineHeight: 24, "$fontSize": 20, "$fontWeight": fontWeight, "$fontStyle": fontStyle }, children));
-};
-var ComponentMStyling = function (textStyle, color) { return ComponentStyling('18px', '24px', textStyle, color); };
-var ComponentM = function (_a) {
-    var color = _a.color, textStyle = _a.textStyle, children = _a.children, className = _a.className;
-    var fontWeight = componentFontWeight(textStyle);
-    var fontStyle = componentFontStyle(textStyle);
-    return (React.createElement(TypographyBase, { className: className, "$color": color, lineHeight: 24, "$fontSize": 18, "$fontWeight": fontWeight, "$fontStyle": fontStyle }, children));
-};
-var ComponentSStyling = function (textStyle, color) { return ComponentStyling('16px', '20px', textStyle, color); };
-var ComponentS = function (_a) {
-    var color = _a.color, textStyle = _a.textStyle, children = _a.children, className = _a.className;
-    var fontWeight = componentFontWeight(textStyle);
-    var fontStyle = componentFontStyle(textStyle);
-    return (React.createElement(TypographyBase, { className: className, "$color": color, lineHeight: 20, "$fontSize": 16, "$fontWeight": fontWeight, "$fontStyle": fontStyle }, children));
-};
-var ComponentXSStyling = function (textStyle, color) { return ComponentStyling('14px', '16px', textStyle, color); };
-var ComponentXS = function (_a) {
-    var color = _a.color, textStyle = _a.textStyle, children = _a.children, className = _a.className;
-    var fontWeight = componentFontWeight(textStyle);
-    var fontStyle = componentFontStyle(textStyle);
-    var textTransform = componentTextTransformation(textStyle);
-    return (React.createElement(TypographyBase, { className: className, "$color": color, lineHeight: 16, "$fontSize": 14, "$fontWeight": fontWeight, "$fontStyle": fontStyle, textTransform: textTransform }, children));
-};
-var ComponentXXSStyling = function (textStyle, color) { return ComponentStyling('12px', '16px', textStyle, color); };
-var ComponentXXS = function (_a) {
-    var color = _a.color, textStyle = _a.textStyle, children = _a.children, className = _a.className;
-    var fontWeight = componentFontWeight(textStyle);
-    var fontStyle = componentFontStyle(textStyle);
-    var textTransform = componentTextTransformation(textStyle);
-    return (React.createElement(TypographyBase, { className: className, "$color": color, lineHeight: 16, "$fontSize": 12, "$fontWeight": fontWeight, "$fontStyle": fontStyle, textTransform: textTransform }, children));
-};
-var ComponentResponsive = function (_a) {
-    var color = _a.color, textStyle = _a.textStyle, children = _a.children, size = _a.size, width = _a.width;
-    var fontsize = size;
-    if (!size) {
-        if (width == -1) {
-            fontsize = Size.Medium;
-        }
-        else if (width < 768) {
-            fontsize = Size.Small;
-        }
-        else if (width < 992) {
-            fontsize = Size.Medium;
-        }
-        else {
-            fontsize = Size.Large;
-        }
-    }
-    switch (fontsize) {
-        case Size.XXSmall:
-            return React.createElement(ComponentXXS, { color: color, textStyle: textStyle, children: children });
-        case Size.XSmall:
-            return React.createElement(ComponentXS, { color: color, textStyle: textStyle, children: children });
-        case Size.Small:
-            return React.createElement(ComponentS, { color: color, textStyle: textStyle, children: children });
-        case Size.Medium:
-            return React.createElement(ComponentM, { color: color, textStyle: textStyle, children: children });
-        case Size.Large:
-        default:
-            return React.createElement(ComponentL, { color: color, textStyle: textStyle, children: children });
-    }
-};
-export var Typography = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  html {\n    font-size: 100%;\n  }\n\n  @media (min-width: 48rem) {\n    html {\n      font-size: 112.5%;\n    }\n  }\n\n  @media (min-width: 80rem) {\n    html {\n      font-size: 125%;\n    }\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    font-weight: 700;\n    line-height: 120%;\n    margin: 0;\n  }\n\n  h1 {\n    font-size: 3rem;\n  }\n\n  h2 {\n    font-size: 2.5rem;\n  }\n\n  h3 {\n    font-size: 2rem;\n  }\n\n  h4 {\n    font-size: 1.75rem;\n  }\n\n  h5 {\n    font-size: 1.5rem;\n  }\n\n  h6 {\n    font-size: 1.25rem;\n  }\n\n  p {\n    font-size: 1rem;\n    line-height: 150%;\n    margin: 0 0 0.5rem;\n  }\n\n  p:last-of-type {\n    margin-bottom: 0;\n  }\n\n\n  h1, h2, h3, h4, h5, h6, p, span {\n    max-width: 34rem;\n  }\n\n  :lang(ja-jp) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n\n  :lang(ko-kr) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n\n  :lang(zh-CN) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n"], ["\n  html {\n    font-size: 100%;\n  }\n\n  @media (min-width: 48rem) {\n    html {\n      font-size: 112.5%;\n    }\n  }\n\n  @media (min-width: 80rem) {\n    html {\n      font-size: 125%;\n    }\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    font-weight: 700;\n    line-height: 120%;\n    margin: 0;\n  }\n\n  h1 {\n    font-size: 3rem;\n  }\n\n  h2 {\n    font-size: 2.5rem;\n  }\n\n  h3 {\n    font-size: 2rem;\n  }\n\n  h4 {\n    font-size: 1.75rem;\n  }\n\n  h5 {\n    font-size: 1.5rem;\n  }\n\n  h6 {\n    font-size: 1.25rem;\n  }\n\n  p {\n    font-size: 1rem;\n    line-height: 150%;\n    margin: 0 0 0.5rem;\n  }\n\n  p:last-of-type {\n    margin-bottom: 0;\n  }\n\n\n  h1, h2, h3, h4, h5, h6, p, span {\n    max-width: 34rem;\n  }\n\n  :lang(ja-jp) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n\n  :lang(ko-kr) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n\n  :lang(zh-CN) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n"])));
-export var QuoteTypography = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 1.5rem;\n  line-height: 150%;\n  margin-bottom: 0.75rem;\n"], ["\n  font-size: 1.5rem;\n  line-height: 150%;\n  margin-bottom: 0.75rem;\n"])));
-export var NoteTypography = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 0.75rem;\n  line-height: 150%;\n  margin-bottom: 0.375rem;\n"], ["\n  font-size: 0.75rem;\n  line-height: 150%;\n  margin-bottom: 0.375rem;\n"])));
-export var UpperCaseTypography = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 0.75rem;\n  line-height: 150%;\n  font-weight: 700;\n  text-transform: uppercase;\n"], ["\n  font-size: 0.75rem;\n  line-height: 150%;\n  font-weight: 700;\n  text-transform: uppercase;\n"])));
-export var Note = styled.p(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), NoteTypography);
-export var Quote = styled.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), QuoteTypography);
-export var UpperCase = styled.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), UpperCaseTypography);
-export { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };
-export { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { COLORS } from '.';
+import { Size } from '../types';
+import { jsx as _jsx } from "react/jsx-runtime";
+export 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 {
+    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 ComponentTextStyle;
+(function (ComponentTextStyle) {
+  ComponentTextStyle[ComponentTextStyle["Regular"] = 1] = "Regular";
+  ComponentTextStyle[ComponentTextStyle["Bold"] = 2] = "Bold";
+  ComponentTextStyle[ComponentTextStyle["Italic"] = 3] = "Italic";
+  ComponentTextStyle[ComponentTextStyle["UppercaseBold"] = 4] = "UppercaseBold";
+})(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 css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    font-style: ", ";\n    ", "\n  "])), 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(_ref2) {
+  var color = _ref2.color,
+    textStyle = _ref2.textStyle,
+    children = _ref2.children,
+    className = _ref2.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: children
+  });
+};
+ComponentXL.propTypes = {
+  color: _pt.string,
+  className: _pt.string,
+  textStyle: _pt.oneOf([1, 2, 3, 4]),
+  children: _pt.node
+};
+var ComponentLStyling = function ComponentLStyling(textStyle, color) {
+  return ComponentStyling('20px', '24px', textStyle, color);
+};
+var ComponentL = function ComponentL(_ref3) {
+  var color = _ref3.color,
+    textStyle = _ref3.textStyle,
+    children = _ref3.children,
+    className = _ref3.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: children
+  });
+};
+ComponentL.propTypes = {
+  color: _pt.string,
+  className: _pt.string,
+  textStyle: _pt.oneOf([1, 2, 3, 4]),
+  children: _pt.node
+};
+var ComponentMStyling = function ComponentMStyling(textStyle, color) {
+  return ComponentStyling('18px', '24px', textStyle, color);
+};
+var ComponentM = function ComponentM(_ref4) {
+  var color = _ref4.color,
+    textStyle = _ref4.textStyle,
+    children = _ref4.children,
+    className = _ref4.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: children
+  });
+};
+ComponentM.propTypes = {
+  color: _pt.string,
+  className: _pt.string,
+  textStyle: _pt.oneOf([1, 2, 3, 4]),
+  children: _pt.node
+};
+var ComponentSStyling = function ComponentSStyling(textStyle, color) {
+  return ComponentStyling('16px', '20px', textStyle, color);
+};
+var ComponentS = function ComponentS(_ref5) {
+  var color = _ref5.color,
+    textStyle = _ref5.textStyle,
+    children = _ref5.children,
+    className = _ref5.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: children
+  });
+};
+ComponentS.propTypes = {
+  color: _pt.string,
+  className: _pt.string,
+  textStyle: _pt.oneOf([1, 2, 3, 4]),
+  children: _pt.node
+};
+var ComponentXSStyling = function ComponentXSStyling(textStyle, color) {
+  return ComponentStyling('14px', '16px', textStyle, color);
+};
+var ComponentXS = function ComponentXS(_ref6) {
+  var color = _ref6.color,
+    textStyle = _ref6.textStyle,
+    children = _ref6.children,
+    className = _ref6.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: children
+  });
+};
+ComponentXS.propTypes = {
+  color: _pt.string,
+  className: _pt.string,
+  textStyle: _pt.oneOf([1, 2, 3, 4]),
+  children: _pt.node
+};
+var ComponentXXSStyling = function ComponentXXSStyling(textStyle, color) {
+  return ComponentStyling('12px', '16px', textStyle, color);
+};
+var ComponentXXS = function ComponentXXS(_ref7) {
+  var color = _ref7.color,
+    textStyle = _ref7.textStyle,
+    children = _ref7.children,
+    className = _ref7.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: children
+  });
+};
+ComponentXXS.propTypes = {
+  color: _pt.string,
+  className: _pt.string,
+  textStyle: _pt.oneOf([1, 2, 3, 4]),
+  children: _pt.node
+};
+var ComponentResponsive = function ComponentResponsive(_ref8) {
+  var color = _ref8.color,
+    textStyle = _ref8.textStyle,
+    children = _ref8.children,
+    size = _ref8.size,
+    width = _ref8.width;
+  var fontsize = size;
+  if (!size) {
+    if (width == -1) {
+      fontsize = Size.Medium;
+    } else if (width < 768) {
+      fontsize = Size.Small;
+    } else if (width < 992) {
+      fontsize = Size.Medium;
+    } else {
+      fontsize = Size.Large;
+    }
+  }
+  switch (fontsize) {
+    case Size.XXSmall:
+      return /*#__PURE__*/_jsx(ComponentXXS, {
+        color: color,
+        textStyle: textStyle,
+        children: children
+      });
+    case Size.XSmall:
+      return /*#__PURE__*/_jsx(ComponentXS, {
+        color: color,
+        textStyle: textStyle,
+        children: children
+      });
+    case Size.Small:
+      return /*#__PURE__*/_jsx(ComponentS, {
+        color: color,
+        textStyle: textStyle,
+        children: children
+      });
+    case Size.Medium:
+      return /*#__PURE__*/_jsx(ComponentM, {
+        color: color,
+        textStyle: textStyle,
+        children: children
+      });
+    case Size.Large:
+    default:
+      return /*#__PURE__*/_jsx(ComponentL, {
+        color: color,
+        textStyle: textStyle,
+        children: children
+      });
+  }
+};
+ComponentResponsive.propTypes = {
+  color: _pt.string,
+  className: _pt.string,
+  textStyle: _pt.oneOf([1, 2, 3, 4]),
+  children: _pt.node
+};
+export var Typography = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  html {\n    font-size: 100%;\n  }\n\n  @media (min-width: 48rem) {\n    html {\n      font-size: 112.5%;\n    }\n  }\n\n  @media (min-width: 80rem) {\n    html {\n      font-size: 125%;\n    }\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    font-weight: 700;\n    line-height: 120%;\n    margin: 0;\n  }\n\n  h1 {\n    font-size: 3rem;\n  }\n\n  h2 {\n    font-size: 2.5rem;\n  }\n\n  h3 {\n    font-size: 2rem;\n  }\n\n  h4 {\n    font-size: 1.75rem;\n  }\n\n  h5 {\n    font-size: 1.5rem;\n  }\n\n  h6 {\n    font-size: 1.25rem;\n  }\n\n  p {\n    font-size: 1rem;\n    line-height: 150%;\n    margin: 0 0 0.5rem;\n  }\n\n  p:last-of-type {\n    margin-bottom: 0;\n  }\n\n\n  h1, h2, h3, h4, h5, h6, p, span {\n    max-width: 34rem;\n  }\n\n  :lang(ja-jp) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n\n  :lang(ko-kr) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n\n  :lang(zh-CN) {\n    h1, h2, h3, h4, h5, h6, p, span {\n      max-width: 30rem;\n    }\n  }\n"])));
+export var QuoteTypography = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-size: 1.5rem;\n  line-height: 150%;\n  margin-bottom: 0.75rem;\n"])));
+export var NoteTypography = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: 0.75rem;\n  line-height: 150%;\n  margin-bottom: 0.375rem;\n"])));
+export var UpperCaseTypography = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: 0.75rem;\n  line-height: 150%;\n  font-weight: 700;\n  text-transform: uppercase;\n"])));
+export var Note = styled.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n"])), NoteTypography);
+export var Quote = styled.p(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), QuoteTypography);
+export var UpperCase = styled.p(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n"])), UpperCaseTypography);
+export { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };
+export { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };
+//# sourceMappingURL=typography.js.map

package/dist/styles/z-indexes.js

@@ -1,16 +1,17 @@
-export var Z_INDEXES = {
-    hover: '1',
-    active: '2',
-    focus: '3',
-    badge: '10',
-    loader: '990',
-    dropdown: '1000',
-    sticky_menu: '1020',
-    fixed_menu: '1030',
-    backdrop: '1040',
-    off_canvas: '1050',
-    modal: '1060',
-    toast: '1070',
-    tooltip: '1080',
-    popover: '1070'
-};
+export var Z_INDEXES = {
+  hover: '1',
+  active: '2',
+  focus: '3',
+  badge: '10',
+  loader: '990',
+  dropdown: '1000',
+  sticky_menu: '1020',
+  fixed_menu: '1030',
+  backdrop: '1040',
+  off_canvas: '1050',
+  modal: '1060',
+  toast: '1070',
+  tooltip: '1080',
+  popover: '1070'
+};
+//# sourceMappingURL=z-indexes.js.map

package/dist/types.js

@@ -1,51 +1,52 @@
-export var States;
-(function (States) {
-    States["Default"] = "default";
-    States["Valid"] = "valid";
-    States["Invalid"] = "invalid";
-})(States || (States = {}));
-export var Size;
-(function (Size) {
-    Size["XXSmall"] = "xxsmall";
-    Size["XSmall"] = "xsmall";
-    Size["Small"] = "small";
-    Size["Medium"] = "medium";
-    Size["Large"] = "large";
-})(Size || (Size = {}));
-export var Position;
-(function (Position) {
-    Position["Top"] = "top";
-    Position["Bottom"] = "bottom";
-    Position["Right"] = "right";
-    Position["Left"] = "left";
-})(Position || (Position = {}));
-export var ToastColor;
-(function (ToastColor) {
-    ToastColor[ToastColor["BLACK"] = 0] = "BLACK";
-    ToastColor[ToastColor["WHITE"] = 1] = "WHITE";
-    ToastColor[ToastColor["BLUE"] = 2] = "BLUE";
-    ToastColor[ToastColor["GREEN"] = 3] = "GREEN";
-    ToastColor[ToastColor["ORANGE"] = 4] = "ORANGE";
-    ToastColor[ToastColor["RED"] = 5] = "RED";
-})(ToastColor || (ToastColor = {}));
-export var ToastActionType;
-(function (ToastActionType) {
-    ToastActionType[ToastActionType["PRIMARY"] = 0] = "PRIMARY";
-    ToastActionType[ToastActionType["SECONDARY"] = 1] = "SECONDARY";
-})(ToastActionType || (ToastActionType = {}));
-export var ToastPosition;
-(function (ToastPosition) {
-    ToastPosition[ToastPosition["TOPLEFT"] = 0] = "TOPLEFT";
-    ToastPosition[ToastPosition["TOPMIDDLE"] = 1] = "TOPMIDDLE";
-    ToastPosition[ToastPosition["TOPRIGHT"] = 2] = "TOPRIGHT";
-    ToastPosition[ToastPosition["BOTTOMLEFT"] = 3] = "BOTTOMLEFT";
-    ToastPosition[ToastPosition["BOTTOMMIDDLE"] = 4] = "BOTTOMMIDDLE";
-    ToastPosition[ToastPosition["BOTTOMRIGHT"] = 5] = "BOTTOMRIGHT";
-})(ToastPosition || (ToastPosition = {}));
-export var ToastEntryDirection;
-(function (ToastEntryDirection) {
-    ToastEntryDirection[ToastEntryDirection["TOP"] = 0] = "TOP";
-    ToastEntryDirection[ToastEntryDirection["BOTTOM"] = 1] = "BOTTOM";
-    ToastEntryDirection[ToastEntryDirection["LEFT"] = 2] = "LEFT";
-    ToastEntryDirection[ToastEntryDirection["RIGHT"] = 3] = "RIGHT";
-})(ToastEntryDirection || (ToastEntryDirection = {}));
+export var States;
+(function (States) {
+  States["Default"] = "default";
+  States["Valid"] = "valid";
+  States["Invalid"] = "invalid";
+})(States || (States = {}));
+export var Size;
+(function (Size) {
+  Size["XXSmall"] = "xxsmall";
+  Size["XSmall"] = "xsmall";
+  Size["Small"] = "small";
+  Size["Medium"] = "medium";
+  Size["Large"] = "large";
+})(Size || (Size = {}));
+export var Position;
+(function (Position) {
+  Position["Top"] = "top";
+  Position["Bottom"] = "bottom";
+  Position["Right"] = "right";
+  Position["Left"] = "left";
+})(Position || (Position = {}));
+export var ToastColor;
+(function (ToastColor) {
+  ToastColor[ToastColor["BLACK"] = 0] = "BLACK";
+  ToastColor[ToastColor["WHITE"] = 1] = "WHITE";
+  ToastColor[ToastColor["BLUE"] = 2] = "BLUE";
+  ToastColor[ToastColor["GREEN"] = 3] = "GREEN";
+  ToastColor[ToastColor["ORANGE"] = 4] = "ORANGE";
+  ToastColor[ToastColor["RED"] = 5] = "RED";
+})(ToastColor || (ToastColor = {}));
+export var ToastActionType;
+(function (ToastActionType) {
+  ToastActionType[ToastActionType["PRIMARY"] = 0] = "PRIMARY";
+  ToastActionType[ToastActionType["SECONDARY"] = 1] = "SECONDARY";
+})(ToastActionType || (ToastActionType = {}));
+export var ToastPosition;
+(function (ToastPosition) {
+  ToastPosition[ToastPosition["TOPLEFT"] = 0] = "TOPLEFT";
+  ToastPosition[ToastPosition["TOPMIDDLE"] = 1] = "TOPMIDDLE";
+  ToastPosition[ToastPosition["TOPRIGHT"] = 2] = "TOPRIGHT";
+  ToastPosition[ToastPosition["BOTTOMLEFT"] = 3] = "BOTTOMLEFT";
+  ToastPosition[ToastPosition["BOTTOMMIDDLE"] = 4] = "BOTTOMMIDDLE";
+  ToastPosition[ToastPosition["BOTTOMRIGHT"] = 5] = "BOTTOMRIGHT";
+})(ToastPosition || (ToastPosition = {}));
+export var ToastEntryDirection;
+(function (ToastEntryDirection) {
+  ToastEntryDirection[ToastEntryDirection["TOP"] = 0] = "TOP";
+  ToastEntryDirection[ToastEntryDirection["BOTTOM"] = 1] = "BOTTOM";
+  ToastEntryDirection[ToastEntryDirection["LEFT"] = 2] = "LEFT";
+  ToastEntryDirection[ToastEntryDirection["RIGHT"] = 3] = "RIGHT";
+})(ToastEntryDirection || (ToastEntryDirection = {}));
+//# sourceMappingURL=types.js.map

package/dist/utils/utils.js

@@ -1,3 +1,4 @@
-export var hasWindow = function () {
-    return Boolean(typeof window !== 'undefined' && window);
-};
+export var hasWindow = function hasWindow() {
+  return Boolean(typeof window !== 'undefined' && window);
+};
+//# sourceMappingURL=utils.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "3.5.1-dev.12",
+  "version": "3.5.1-dev.13",
   "private": false,
   "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
   "contributors": [],