@laerdal/life-react-components 1.3.2-dev.2 → 1.3.2-dev.4

package/dist/js/styles/typography.js

@@ -32,22 +32,22 @@ var TYPOGRAPHY = {
 };
 exports.TYPOGRAPHY = TYPOGRAPHY;
 var TypographyBase = (0, _styledComponents.default)('div')(function (_ref) {
-  var color = _ref.color,
+  var $color = _ref.$color,
       lineHeight = _ref.lineHeight,
-      fontSize = _ref.fontSize,
-      fontWeight = _ref.fontWeight,
-      fontStyle = _ref.fontStyle,
+      $fontSize = _ref.$fontSize,
+      $fontWeight = _ref.$fontWeight,
+      $fontStyle = _ref.$fontStyle,
       textTransform = _ref.textTransform,
       textDecorationLine = _ref.textDecorationLine;
   return {
     fontFamily: TYPOGRAPHY.fontFamily,
-    fontSize: fontSize,
-    fontWeight: fontWeight,
+    fontSize: $fontSize,
+    fontWeight: $fontWeight,
     lineHeight: lineHeight + 'px',
     textTransform: textTransform ? textTransform : 'none',
     textDecorationLine: textDecorationLine ? textDecorationLine : 'none',
-    fontStyle: fontStyle ? fontStyle : 'normal',
-    color: color ? color : _.COLORS.black
+    fontStyle: $fontStyle ? $fontStyle : 'normal',
+    color: $color ? $color : _.COLORS.black
   };
 });
 
@@ -56,14 +56,14 @@ var HeadlineBaseStyling = function HeadlineBaseStyling(fontSize, lineHeight, col
 };
 
 var HeadlineBase = (0, _styledComponents.default)(TypographyBase)(function (_ref2) {
-  var color = _ref2.color,
+  var $color = _ref2.$color,
       lineHeight = _ref2.lineHeight,
       fontSize = _ref2.fontSize;
   return {
     fontSize: fontSize,
     fontWeight: 700,
     lineHeight: lineHeight,
-    color: color
+    color: $color
   };
 });
 
@@ -73,11 +73,11 @@ var HeadlineXLStyling = function HeadlineXLStyling(color) {
 
 exports.HeadlineXLStyling = HeadlineXLStyling;
 var HeadlineXL = (0, _styledComponents.default)(HeadlineBase)(function (_ref3) {
-  var color = _ref3.color;
+  var $color = _ref3.$color;
   return {
     fontSize: '48px',
     lineHeight: '64px',
-    color: color
+    color: $color
   };
 });
 exports.HeadlineXL = HeadlineXL;
@@ -88,11 +88,11 @@ var HeadlineLStyling = function HeadlineLStyling(color) {
 
 exports.HeadlineLStyling = HeadlineLStyling;
 var HeadlineL = (0, _styledComponents.default)(HeadlineBase)(function (_ref4) {
-  var color = _ref4.color;
+  var $color = _ref4.$color;
   return {
     fontSize: '40px',
     lineHeight: '52px',
-    color: color
+    color: $color
   };
 });
 exports.HeadlineL = HeadlineL;
@@ -103,11 +103,11 @@ var HeadlineMStyling = function HeadlineMStyling(color) {
 
 exports.HeadlineMStyling = HeadlineMStyling;
 var HeadlineM = (0, _styledComponents.default)(HeadlineBase)(function (_ref5) {
-  var color = _ref5.color;
+  var $color = _ref5.$color;
   return {
     fontSize: '32px',
     lineHeight: '40px',
-    color: color
+    color: $color
   };
 });
 exports.HeadlineM = HeadlineM;
@@ -118,11 +118,11 @@ var HeadlineSStyling = function HeadlineSStyling(color) {
 
 exports.HeadlineSStyling = HeadlineSStyling;
 var HeadlineS = (0, _styledComponents.default)(HeadlineBase)(function (_ref6) {
-  var color = _ref6.color;
+  var $color = _ref6.$color;
   return {
     fontSize: '28px',
     lineHeight: '36px',
-    color: color
+    color: $color
   };
 });
 exports.HeadlineS = HeadlineS;
@@ -133,11 +133,11 @@ var HeadlineXSStyling = function HeadlineXSStyling(color) {
 
 exports.HeadlineXSStyling = HeadlineXSStyling;
 var HeadlineXS = (0, _styledComponents.default)(HeadlineBase)(function (_ref7) {
-  var color = _ref7.color;
+  var $color = _ref7.$color;
   return {
     fontSize: '24px',
     lineHeight: '32px',
-    color: color
+    color: $color
   };
 });
 exports.HeadlineXS = HeadlineXS;
@@ -148,11 +148,11 @@ var HeadlineXXSStyling = function HeadlineXXSStyling(color) {
 
 exports.HeadlineXXSStyling = HeadlineXXSStyling;
 var HeadlineXXS = (0, _styledComponents.default)(HeadlineBase)(function (_ref8) {
-  var color = _ref8.color;
+  var $color = _ref8.$color;
   return {
     fontSize: '20px',
     lineHeight: '24px',
-    color: color
+    color: $color
   };
 });
 exports.HeadlineXXS = HeadlineXXS;
@@ -208,11 +208,11 @@ var ParagraphXL = function ParagraphXL(_ref9) {
   var fontStyle = paragraphFontStyle(textStyle);
   var textDecorationLine = paragraphTextDecorationLine(textStyle);
   return /*#__PURE__*/_react.default.createElement(ParagraphBase, {
-    color: color,
+    $color: color,
     lineHeight: 36,
-    fontSize: 24,
-    fontWeight: fontWeight,
-    fontStyle: fontStyle,
+    $fontSize: 24,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle,
     textDecorationLine: textDecorationLine,
     marginBetweenParagraphs: "18px"
   }, children);
@@ -238,11 +238,11 @@ var ParagraphL = function ParagraphL(_ref10) {
   var fontStyle = paragraphFontStyle(textStyle);
   var textDecorationLine = paragraphTextDecorationLine(textStyle);
   return /*#__PURE__*/_react.default.createElement(ParagraphBase, {
-    color: color,
+    $color: color,
     lineHeight: 32,
-    fontSize: 20,
-    fontWeight: fontWeight,
-    fontStyle: fontStyle,
+    $fontSize: 20,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle,
     textDecorationLine: textDecorationLine,
     marginBetweenParagraphs: "16px"
   }, children);
@@ -268,11 +268,11 @@ var ParagraphM = function ParagraphM(_ref11) {
   var fontStyle = paragraphFontStyle(textStyle);
   var textDecorationLine = paragraphTextDecorationLine(textStyle);
   return /*#__PURE__*/_react.default.createElement(ParagraphBase, {
-    color: color,
+    $color: color,
     lineHeight: 28,
-    fontSize: 18,
-    fontWeight: fontWeight,
-    fontStyle: fontStyle,
+    $fontSize: 18,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle,
     textDecorationLine: textDecorationLine,
     marginBetweenParagraphs: "14px"
   }, children);
@@ -298,11 +298,11 @@ var ParagraphS = function ParagraphS(_ref12) {
   var fontStyle = paragraphFontStyle(textStyle);
   var textDecorationLine = paragraphTextDecorationLine(textStyle);
   return /*#__PURE__*/_react.default.createElement(ParagraphBase, {
-    color: color,
+    $color: color,
     lineHeight: 24,
-    fontSize: 16,
-    fontWeight: fontWeight,
-    fontStyle: fontStyle,
+    $fontSize: 16,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle,
     textDecorationLine: textDecorationLine,
     marginBetweenParagraphs: "12px"
   }, children);
@@ -328,11 +328,11 @@ var ParagraphXS = function ParagraphXS(_ref13) {
   var fontStyle = paragraphFontStyle(textStyle);
   var textDecorationLine = paragraphTextDecorationLine(textStyle);
   return /*#__PURE__*/_react.default.createElement(ParagraphBase, {
-    color: color,
+    $color: color,
     lineHeight: 20,
-    fontSize: 14,
-    fontWeight: fontWeight,
-    fontStyle: fontStyle,
+    $fontSize: 14,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle,
     textDecorationLine: textDecorationLine,
     marginBetweenParagraphs: "10px"
   }, children);
@@ -392,11 +392,11 @@ var ComponentXL = function ComponentXL(_ref14) {
   var fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/_react.default.createElement(TypographyBase, {
     className: className,
-    color: color,
+    $color: color,
     lineHeight: 28,
-    fontSize: 24,
-    fontWeight: fontWeight,
-    fontStyle: fontStyle
+    $fontSize: 24,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle
   }, children);
 };
 
@@ -422,11 +422,11 @@ var ComponentL = function ComponentL(_ref15) {
   var fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/_react.default.createElement(TypographyBase, {
     className: className,
-    color: color,
+    $color: color,
     lineHeight: 24,
-    fontSize: 20,
-    fontWeight: fontWeight,
-    fontStyle: fontStyle
+    $fontSize: 20,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle
   }, children);
 };
 
@@ -452,11 +452,11 @@ var ComponentM = function ComponentM(_ref16) {
   var fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/_react.default.createElement(TypographyBase, {
     className: className,
-    color: color,
+    $color: color,
     lineHeight: 24,
-    fontSize: 18,
-    fontWeight: fontWeight,
-    fontStyle: fontStyle
+    $fontSize: 18,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle
   }, children);
 };
 
@@ -482,11 +482,11 @@ var ComponentS = function ComponentS(_ref17) {
   var fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/_react.default.createElement(TypographyBase, {
     className: className,
-    color: color,
+    $color: color,
     lineHeight: 20,
-    fontSize: 16,
-    fontWeight: fontWeight,
-    fontStyle: fontStyle
+    $fontSize: 16,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle
   }, children);
 };
 
@@ -513,11 +513,11 @@ var ComponentXS = function ComponentXS(_ref18) {
   var textTransform = componentTextTransformation(textStyle);
   return /*#__PURE__*/_react.default.createElement(TypographyBase, {
     className: className,
-    color: color,
+    $color: color,
     lineHeight: 16,
-    fontSize: 14,
-    fontWeight: fontWeight,
-    fontStyle: fontStyle,
+    $fontSize: 14,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle,
     textTransform: textTransform
   }, children);
 };
@@ -545,11 +545,11 @@ var ComponentXXS = function ComponentXXS(_ref19) {
   var textTransform = componentTextTransformation(textStyle);
   return /*#__PURE__*/_react.default.createElement(TypographyBase, {
     className: className,
-    color: color,
+    $color: color,
     lineHeight: 16,
-    fontSize: 12,
-    fontWeight: fontWeight,
-    fontStyle: fontStyle,
+    $fontSize: 12,
+    $fontWeight: fontWeight,
+    $fontStyle: fontStyle,
     textTransform: textTransform
   }, children);
 };

package/dist/js/styles/typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/styles/typography.tsx"],"names":["TYPOGRAPHY","fontFamily","TypographyBase","color","lineHeight","fontSize","fontWeight","fontStyle","textTransform","textDecorationLine","COLORS","black","HeadlineBaseStyling","css","HeadlineBase","HeadlineXLStyling","HeadlineXL","HeadlineLStyling","HeadlineL","HeadlineMStyling","HeadlineM","HeadlineSStyling","HeadlineS","HeadlineXSStyling","HeadlineXS","HeadlineXXSStyling","HeadlineXXS","ParagraphStyling","ParagraphBase","props","marginBetweenParagraphs","ParagraphTextStyle","paragraphFontWeight","textStyle","Bold","paragraphFontStyle","Italic","paragraphTextDecorationLine","textDecoration","Underline","ParagraphBaseStyling","ParagraphXlStyling","ParagraphXL","children","ParagraphLStyling","ParagraphL","ParagraphMStyling","ParagraphM","ParagraphSStyling","ParagraphS","ParagraphXSStyling","ParagraphXS","ComponentTextStyle","componentFontWeight","UppercaseBold","componentFontStyle","componentTextTransformation","ComponentStyling","ComponentXLStyling","ComponentXL","className","ComponentLStyling","ComponentL","ComponentMStyling","ComponentM","ComponentSStyling","ComponentS","ComponentXSStyling","ComponentXS","ComponentXXSStyling","ComponentXXS","ComponentResponsive","size","width","fontsize","Size","Small","Medium","Large","XXSmall","XSmall"],"mappings":"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","sourcesContent":["import React, { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS } from '.';\nimport { Property } from 'csstype';\nimport { Size } from '../types';\n\nconst TYPOGRAPHY = {\n  fontFamily: 'Lato, sans-serif',\n};\n\ninterface ITypographyBase {\n  color?: string;\n  lineHeight: number;\n  fontSize: number;\n  fontWeight: number;\n  fontStyle?: string;\n  textTransform?: Property.TextTransform;\n  textDecorationLine?: Property.TextDecorationLine;\n}\n\nconst TypographyBase = styled('div')<ITypographyBase>(({ color, lineHeight, fontSize, fontWeight, fontStyle, textTransform, textDecorationLine }) => ({\n  fontFamily: TYPOGRAPHY.fontFamily,\n  fontSize: fontSize,\n  fontWeight: fontWeight,\n  lineHeight: lineHeight + 'px',\n  textTransform: textTransform ? textTransform : 'none',\n  textDecorationLine: textDecorationLine ? textDecorationLine : 'none',\n  fontStyle: fontStyle ? fontStyle : 'normal',\n  color: color ? color : COLORS.black,\n}));\n\ninterface IHeadline {\n  color?: string;\n}\n\ninterface IHeadlineBase {\n  color?: string;\n  lineHeight: number;\n  fontSize: number;\n}\n\nconst HeadlineBaseStyling = (fontSize: string, lineHeight: string, color: string) => {\n  return css`\n    font-family: ${TYPOGRAPHY.fontFamily};\n    font-size: ${fontSize};\n    line-height: ${lineHeight};\n    font-weight: 700;\n    color: ${color};\n  `;\n}\nconst HeadlineBase = styled(TypographyBase)<IHeadlineBase>(({ color, lineHeight, fontSize }) => ({\n  fontSize: fontSize,\n  fontWeight: 700,\n  lineHeight: lineHeight,\n  color: color,\n}));\n\nconst HeadlineXLStyling = (color: string) => HeadlineBaseStyling('48px', '64px', color);\nconst HeadlineXL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '48px',\n  lineHeight: '64px',\n  color: color,\n}));\n\nconst HeadlineLStyling = (color: string) => HeadlineBaseStyling('40px', '52px', color);\nconst HeadlineL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '40px',\n  lineHeight: '52px',\n  color: color,\n}));\n\nconst HeadlineMStyling = (color: string) => HeadlineBaseStyling('32px', '40px', color);\nconst HeadlineM = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '32px',\n  lineHeight: '40px',\n  color: color,\n}));\n\nconst HeadlineSStyling = (color: string) => HeadlineBaseStyling('28px', '36px', color);\nconst HeadlineS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '28px',\n  lineHeight: '36px',\n  color: color,\n}));\n\nconst HeadlineXSStyling = (color: string) => HeadlineBaseStyling('24px', '32px', color);\nconst HeadlineXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '24px',\n  lineHeight: '32px',\n  color: color,\n}));\n\nconst HeadlineXXSStyling = (color: string) => HeadlineBaseStyling('20px', '24px', color);\nconst HeadlineXXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '20px',\n  lineHeight: '24px',\n  color: color,\n}));\n\nconst ParagraphStyling = css`\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`;\n\ninterface IParagraphBase {\n  color?: string;\n  lineHeight: number;\n  fontSize: number;\n  marginBetweenParagraphs?: string;\n}\n\nconst ParagraphBase = styled(TypographyBase)<IParagraphBase>`\n  p {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n  p:not(:only-of-type) {\n    margin-bottom: ${(props) => props.marginBetweenParagraphs || '0'};\n  }\n  ${ParagraphStyling}\n`;\n\ninterface IParagraph {\n  color?: string;\n}\n\nenum ParagraphTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  Underline,\n}\n\ntype ParagraphProps = {\n  color?: string;\n  textStyle?: ParagraphTextStyle;\n};\n\nconst paragraphFontWeight = (textStyle?: ParagraphTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ParagraphTextStyle.Bold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst paragraphFontStyle = (textStyle?: ParagraphTextStyle) => {\n  let fontStyle = textStyle && textStyle === ParagraphTextStyle.Italic ? 'italic' : '';\n  return fontStyle;\n};\n\nconst paragraphTextDecorationLine = (textStyle?: ParagraphTextStyle): Property.TextDecorationLine => {\n  let textDecoration: Property.TextDecorationLine = textStyle && textStyle === ParagraphTextStyle.Underline ? 'underline' : 'none';\n  return textDecoration;\n};\n\nconst ParagraphBaseStyling = (fontSize: string, lineHeight: string, textStyle: ParagraphTextStyle, color: string) => {\n  return css`\n    font-family: ${TYPOGRAPHY.fontFamily};\n    font-size: ${fontSize};\n    font-weight: ${paragraphFontWeight(textStyle)};\n    line-height: ${lineHeight};\n    font-style: ${paragraphFontStyle(textStyle)};\n    color: ${color};\n  `;\n}\n\nconst ParagraphXlStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('24px', '36px', textStyle, color);\nconst ParagraphXL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={36} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"18px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphLStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('20px', '32px', textStyle, color);\nconst ParagraphL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={32} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"16px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphMStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('18px', '28px', textStyle, color);\nconst ParagraphM: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={28} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"14px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('16px', '24px', textStyle, color);\nconst ParagraphS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={24} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"12px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphXSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('14px', '20px', textStyle, color);\nconst ParagraphXS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={20} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"10px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nenum ComponentTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  UppercaseBold,\n}\n\ntype ComponentProps = {\n  color?: string;\n  className?: string;\n  textStyle?: ComponentTextStyle;\n};\n\nconst componentFontWeight = (textStyle?: ComponentTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst componentFontStyle = (textStyle?: ComponentTextStyle) => {\n  let fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';\n  return fontStyle;\n};\n\nconst componentTextTransformation = (textStyle?: ComponentTextStyle): Property.TextTransform => {\n  let fontStyle: Property.TextTransform = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';\n  return fontStyle;\n};\n\nconst ComponentStyling = (fontSize: string, lineHeight: string, textStyle: ComponentTextStyle, color: string | undefined | null) => {\n  return css`\n    font-family: ${TYPOGRAPHY.fontFamily};\n    font-size: ${fontSize};\n    font-weight: ${componentFontWeight(textStyle)};\n    line-height: ${lineHeight};\n    font-style: ${componentFontStyle(textStyle)};\n    ${color === null ? '' : `color: ${(color || COLORS.black)};`}\n  `;\n};\n\nconst ComponentXLStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('24px', '28px', textStyle, color);\nconst ComponentXL: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} color={color} lineHeight={28} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentLStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('20px', '24px', textStyle, color);\nconst ComponentL: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} color={color} lineHeight={24} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentMStyling = (textStyle: ComponentTextStyle, color: string | undefined | null) => ComponentStyling('18px', '24px', textStyle, color);\nconst ComponentM: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} color={color} lineHeight={24} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('16px', '20px', textStyle, color);\nconst ComponentS: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} color={color} lineHeight={20} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('14px', '16px', textStyle, color);\nconst ComponentXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase className={className} color={color} lineHeight={16} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXXSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('12px', '16px', textStyle, color);\nconst ComponentXXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase className={className} color={color} lineHeight={16} fontSize={12} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentResponsive: FunctionComponent<ComponentProps & { size?: Size; width: number }> = ({\n  color,\n  textStyle,\n  children,\n  size,\n  width,\n}) => {\n  let fontsize = size;\n  if (!size) {\n    if (width < 768) {\n      fontsize = Size.Small;\n    } else if (width < 992) {\n      fontsize = Size.Medium;\n    } else {\n      fontsize = Size.Large;\n    }\n  }\n  switch (fontsize) {\n    case Size.XXSmall:\n      return <ComponentXXS color={color} textStyle={textStyle} children={children} />;\n    case Size.XSmall:\n      return <ComponentXS color={color} textStyle={textStyle} children={children} />;\n    case Size.Small:\n      return <ComponentS color={color} textStyle={textStyle} children={children} />;\n    case Size.Medium:\n      return <ComponentM color={color} textStyle={textStyle} children={children} />;\n    case Size.Large:\n    default:\n      return <ComponentL color={color} textStyle={textStyle} children={children} />;\n  }\n};\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\nexport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };\nexport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };\n"],"file":"typography.js"}
+{"version":3,"sources":["../../../src/styles/typography.tsx"],"names":["TYPOGRAPHY","fontFamily","TypographyBase","$color","lineHeight","$fontSize","$fontWeight","$fontStyle","textTransform","textDecorationLine","fontSize","fontWeight","fontStyle","color","COLORS","black","HeadlineBaseStyling","css","HeadlineBase","HeadlineXLStyling","HeadlineXL","HeadlineLStyling","HeadlineL","HeadlineMStyling","HeadlineM","HeadlineSStyling","HeadlineS","HeadlineXSStyling","HeadlineXS","HeadlineXXSStyling","HeadlineXXS","ParagraphStyling","ParagraphBase","props","marginBetweenParagraphs","ParagraphTextStyle","paragraphFontWeight","textStyle","Bold","paragraphFontStyle","Italic","paragraphTextDecorationLine","textDecoration","Underline","ParagraphBaseStyling","ParagraphXlStyling","ParagraphXL","children","ParagraphLStyling","ParagraphL","ParagraphMStyling","ParagraphM","ParagraphSStyling","ParagraphS","ParagraphXSStyling","ParagraphXS","ComponentTextStyle","componentFontWeight","UppercaseBold","componentFontStyle","componentTextTransformation","ComponentStyling","ComponentXLStyling","ComponentXL","className","ComponentLStyling","ComponentL","ComponentMStyling","ComponentM","ComponentSStyling","ComponentS","ComponentXSStyling","ComponentXS","ComponentXXSStyling","ComponentXXS","ComponentResponsive","size","width","fontsize","Size","Small","Medium","Large","XXSmall","XSmall"],"mappings":"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","sourcesContent":["import React, { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS } from '.';\nimport { Property } from 'csstype';\nimport { Size } from '../types';\n\nconst TYPOGRAPHY = {\n  fontFamily: 'Lato, sans-serif',\n};\n\ninterface ITypographyBase {\n  $color?: string;\n  lineHeight: number;\n  $fontSize: number;\n  $fontWeight: number;\n  $fontStyle?: string;\n  textTransform?: Property.TextTransform;\n  textDecorationLine?: Property.TextDecorationLine;\n}\n\nconst TypographyBase = styled('div')<ITypographyBase>(({ $color, lineHeight, $fontSize, $fontWeight, $fontStyle, textTransform, textDecorationLine }) => ({\n  fontFamily: TYPOGRAPHY.fontFamily,\n  fontSize: $fontSize,\n  fontWeight: $fontWeight,\n  lineHeight: lineHeight + 'px',\n  textTransform: textTransform ? textTransform : 'none',\n  textDecorationLine: textDecorationLine ? textDecorationLine : 'none',\n  fontStyle: $fontStyle ? $fontStyle : 'normal',\n  color: $color ? $color : COLORS.black,\n}));\n\ninterface IHeadline {\n  $color?: string;\n}\n\ninterface IHeadlineBase {\n  $color?: string;\n  lineHeight: number;\n  fontSize: number;\n}\n\nconst HeadlineBaseStyling = (fontSize: string, lineHeight: string, color: string) => {\n  return css`\n    font-family: ${TYPOGRAPHY.fontFamily};\n    font-size: ${fontSize};\n    line-height: ${lineHeight};\n    font-weight: 700;\n    color: ${color};\n  `;\n};\nconst HeadlineBase = styled(TypographyBase)<IHeadlineBase>(({ $color, lineHeight, fontSize }) => ({\n  fontSize: fontSize,\n  fontWeight: 700,\n  lineHeight: lineHeight,\n  color: $color,\n}));\n\nconst HeadlineXLStyling = (color: string) => HeadlineBaseStyling('48px', '64px', color);\nconst HeadlineXL = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '48px',\n  lineHeight: '64px',\n  color: $color,\n}));\n\nconst HeadlineLStyling = (color: string) => HeadlineBaseStyling('40px', '52px', color);\nconst HeadlineL = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '40px',\n  lineHeight: '52px',\n  color: $color,\n}));\n\nconst HeadlineMStyling = (color: string) => HeadlineBaseStyling('32px', '40px', color);\nconst HeadlineM = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '32px',\n  lineHeight: '40px',\n  color: $color,\n}));\n\nconst HeadlineSStyling = (color: string) => HeadlineBaseStyling('28px', '36px', color);\nconst HeadlineS = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '28px',\n  lineHeight: '36px',\n  color: $color,\n}));\n\nconst HeadlineXSStyling = (color: string) => HeadlineBaseStyling('24px', '32px', color);\nconst HeadlineXS = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '24px',\n  lineHeight: '32px',\n  color: $color,\n}));\n\nconst HeadlineXXSStyling = (color: string) => HeadlineBaseStyling('20px', '24px', color);\nconst HeadlineXXS = styled(HeadlineBase)<IHeadline>(({ $color }) => ({\n  fontSize: '20px',\n  lineHeight: '24px',\n  color: $color,\n}));\n\nconst ParagraphStyling = css`\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`;\n\ninterface IParagraphBase {\n  color?: string;\n  lineHeight: number;\n  $fontSize: number;\n  marginBetweenParagraphs?: string;\n}\n\nconst ParagraphBase = styled(TypographyBase)<IParagraphBase>`\n  p {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n  p:not(:only-of-type) {\n    margin-bottom: ${(props) => props.marginBetweenParagraphs || '0'};\n  }\n  ${ParagraphStyling}\n`;\n\ninterface IParagraph {\n  color?: string;\n}\n\nenum ParagraphTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  Underline,\n}\n\ntype ParagraphProps = {\n  color?: string;\n  textStyle?: ParagraphTextStyle;\n};\n\nconst paragraphFontWeight = (textStyle?: ParagraphTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ParagraphTextStyle.Bold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst paragraphFontStyle = (textStyle?: ParagraphTextStyle) => {\n  let fontStyle = textStyle && textStyle === ParagraphTextStyle.Italic ? 'italic' : '';\n  return fontStyle;\n};\n\nconst paragraphTextDecorationLine = (textStyle?: ParagraphTextStyle): Property.TextDecorationLine => {\n  let textDecoration: Property.TextDecorationLine = textStyle && textStyle === ParagraphTextStyle.Underline ? 'underline' : 'none';\n  return textDecoration;\n};\n\nconst ParagraphBaseStyling = (fontSize: string, lineHeight: string, textStyle: ParagraphTextStyle, color: string) => {\n  return css`\n    font-family: ${TYPOGRAPHY.fontFamily};\n    font-size: ${fontSize};\n    font-weight: ${paragraphFontWeight(textStyle)};\n    line-height: ${lineHeight};\n    font-style: ${paragraphFontStyle(textStyle)};\n    color: ${color};\n  `;\n};\n\nconst ParagraphXlStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('24px', '36px', textStyle, color);\nconst ParagraphXL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={36}\n      $fontSize={24}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"18px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphLStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('20px', '32px', textStyle, color);\nconst ParagraphL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={32}\n      $fontSize={20}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"16px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphMStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('18px', '28px', textStyle, color);\nconst ParagraphM: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={28}\n      $fontSize={18}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"14px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('16px', '24px', textStyle, color);\nconst ParagraphS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={24}\n      $fontSize={16}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"12px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphXSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('14px', '20px', textStyle, color);\nconst ParagraphXS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase\n      $color={color}\n      lineHeight={20}\n      $fontSize={14}\n      $fontWeight={fontWeight}\n      $fontStyle={fontStyle}\n      textDecorationLine={textDecorationLine}\n      marginBetweenParagraphs=\"10px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nenum ComponentTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  UppercaseBold,\n}\n\ntype ComponentProps = {\n  color?: string;\n  className?: string;\n  textStyle?: ComponentTextStyle;\n};\n\nconst componentFontWeight = (textStyle?: ComponentTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst componentFontStyle = (textStyle?: ComponentTextStyle) => {\n  let fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';\n  return fontStyle;\n};\n\nconst componentTextTransformation = (textStyle?: ComponentTextStyle): Property.TextTransform => {\n  let fontStyle: Property.TextTransform = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';\n  return fontStyle;\n};\n\nconst ComponentStyling = (fontSize: string, lineHeight: string, textStyle: ComponentTextStyle, color: string | undefined | null) => {\n  return css`\n    font-family: ${TYPOGRAPHY.fontFamily};\n    font-size: ${fontSize};\n    font-weight: ${componentFontWeight(textStyle)};\n    line-height: ${lineHeight};\n    font-style: ${componentFontStyle(textStyle)};\n    ${color === null ? '' : `color: ${color || COLORS.black};`}\n  `;\n};\n\nconst ComponentXLStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('24px', '28px', textStyle, color);\nconst ComponentXL: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={28} $fontSize={24} $fontWeight={fontWeight} $fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentLStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('20px', '24px', textStyle, color);\nconst ComponentL: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={24} $fontSize={20} $fontWeight={fontWeight} $fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentMStyling = (textStyle: ComponentTextStyle, color: string | undefined | null) => ComponentStyling('18px', '24px', textStyle, color);\nconst ComponentM: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={24} $fontSize={18} $fontWeight={fontWeight} $fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('16px', '20px', textStyle, color);\nconst ComponentS: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={20} $fontSize={16} $fontWeight={fontWeight} $fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('14px', '16px', textStyle, color);\nconst ComponentXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={16} $fontSize={14} $fontWeight={fontWeight} $fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXXSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('12px', '16px', textStyle, color);\nconst ComponentXXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children, className }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase className={className} $color={color} lineHeight={16} $fontSize={12} $fontWeight={fontWeight} $fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentResponsive: FunctionComponent<ComponentProps & { size?: Size; width: number }> = ({ color, textStyle, children, size, width }) => {\n  let fontsize = size;\n  if (!size) {\n    if (width < 768) {\n      fontsize = Size.Small;\n    } else if (width < 992) {\n      fontsize = Size.Medium;\n    } else {\n      fontsize = Size.Large;\n    }\n  }\n  switch (fontsize) {\n    case Size.XXSmall:\n      return <ComponentXXS color={color} textStyle={textStyle} children={children} />;\n    case Size.XSmall:\n      return <ComponentXS color={color} textStyle={textStyle} children={children} />;\n    case Size.Small:\n      return <ComponentS color={color} textStyle={textStyle} children={children} />;\n    case Size.Medium:\n      return <ComponentM color={color} textStyle={textStyle} children={children} />;\n    case Size.Large:\n    default:\n      return <ComponentL color={color} textStyle={textStyle} children={children} />;\n  }\n};\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\nexport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };\nexport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };\n"],"file":"typography.js"}

package/dist/umd/AuthPage/AuthPage.js

@@ -98,7 +98,7 @@
     screenSetsContainerId
   }) => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, showInformationSection && /*#__PURE__*/React.createElement(_Information.InformationContainer, {
-      color: signUp ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20
+      $color: signUp ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20
     }, /*#__PURE__*/React.createElement(_Information.InformationContent, null, (signUpPlaceholderImage || signInPlaceholderImage) && /*#__PURE__*/React.createElement(_Information.InformationImage, {
       src: signUp ? signUpPlaceholderImage : signInPlaceholderImage,
       alt: signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt

package/dist/umd/AuthPage/AuthPage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/AuthPage/AuthPage.tsx"],"names":["showInformationSection","signUp","signUpPlaceholderImage","signInPlaceholderImage","signUpPlaceholderImageAlt","signInPlaceholderImageAlt","signUpInformationHeader","signInInformationHeader","signUpInformationText","signInInformationText","screenSetsContainerId","AuthPage","COLORS","primary_20"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA;AACA;AACA;AACA;AACA;AACA,QAAMW,QAAQ,GAAG,CAAC;AAAA,IAAA,sBAAA;AAAA,IAAA,MAAA;AAAA,IAAA,sBAAA;AAAA,IAAA,sBAAA;AAAA,IAAA,yBAAA;AAAA,IAAA,yBAAA;AAAA,IAAA,uBAAA;AAAA,IAAA,uBAAA;AAAA,IAAA,qBAAA;AAAA,IAAA,qBAAA;AAWhBD,IAAAA;AAXgB,GAAD,KAYI;AACnB,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACGV,sBAAsB,IAAA,aACrB,KAAA,CAAA,aAAA,CAAA,iCAAA,EAAA;AAAsB,MAAA,KAAK,EAAEC,MAAM,GAAGW,eAAH,UAAA,GAAuBA,eAAOC;AAAjE,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA,IAAA,EACG,CAACX,sBAAsB,IAAvB,sBAAA,KAAA,aACC,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,MAAA,GAAG,EAAED,MAAM,GAAA,sBAAA,GAA7B,sBAAA;AAAiF,MAAA,GAAG,EAAEA,MAAM,GAAA,yBAAA,GAA+BI;AAA3H,KAAA,CAFJ,EAIG,CAACC,uBAAuB,IAAxB,uBAAA,KAAA,aAAwD,KAAA,CAAA,aAAA,CAAA,8BAAA,EAAA,IAAA,EAAoBL,MAAM,GAAA,uBAAA,GAJrF,uBAI2D,CAJ3D,EAKG,CAACO,qBAAqB,IAAtB,qBAAA,KAAA,aAAoD,KAAA,CAAA,aAAA,CAAA,4BAAA,EAAA,IAAA,EAAkBP,MAAM,GAAA,qBAAA,GARrF,qBAQ6D,CALvD,CADF,CAFJ,EAAA,aAYE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAqB,MAAA,EAAE,EAAvB,qBAAA;AAAgD,MAAA,cAAc,EAAE,CAACD;AAAjE,KAAA,CAZF,CADF;AAbF,GAAA;;;AA7BEA,IAAAA,sB;AAGAC,IAAAA,M;AAEAC,IAAAA,sB;AAEAC,IAAAA,sB;AAEAC,IAAAA,yB;AAEAC,IAAAA,yB;AAEAC,IAAAA,uB;AAEAC,IAAAA,uB;AAEAC,IAAAA,qB;AAEAC,IAAAA,qB;AAEAC,IAAAA,qB;;oBAuCF,Q","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\n\ntype AuthPageProps = {\n  /** set this to 'false' to hide the left side illustration/information section */\n  showInformationSection: boolean;\n  /** true if 'sign-up' screen-set is showing, otherwise false.\n   * The value can be set using 'onBeforeScreenLoad' in 'gigya.accounts.showScreenSet(...)' and checking the loaded screen-set */\n  signUp: boolean;\n  /** img src string for 'sign-up' placeholder image */\n  signUpPlaceholderImage?: string;\n  /** img src string for 'sign-in' placeholder image */\n  signInPlaceholderImage?: string;\n  /** img alt text string for 'sign-up' placeholder image */\n  signUpPlaceholderImageAlt?: string;\n  /** img alt text string for 'sign-in' placeholder image */\n  signInPlaceholderImageAlt?: string;\n  /** information header text string below 'sign-up' placeholder image */\n  signUpInformationHeader?: string;\n  /** information header text string below 'sign-in' placeholder image */\n  signInInformationHeader?: string;\n  /** information text string below 'sign-up' header text */\n  signUpInformationText?: string;\n  /** information text string below 'sign-in' header text */\n  signInInformationText?: string;\n  /** ID that will be given to the SAP CDC screen-sets container (must match 'containerID' in 'gigya.accounts.showScreenSet(...)'!) */\n  screenSetsContainerId: string;\n};\n\n/**\n * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.\n * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).\n * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.\n */\nconst AuthPage = ({\n  showInformationSection,\n  signUp,\n  signUpPlaceholderImage,\n  signInPlaceholderImage,\n  signUpPlaceholderImageAlt,\n  signInPlaceholderImageAlt,\n  signUpInformationHeader,\n  signInInformationHeader,\n  signUpInformationText,\n  signInInformationText,\n  screenSetsContainerId,\n}: AuthPageProps) => {\n  return (\n    <>\n      {showInformationSection && (\n        <InformationContainer color={signUp ? COLORS.accent1_20 : COLORS.primary_20}>\n          <InformationContent>\n            {(signUpPlaceholderImage || signInPlaceholderImage) && (\n              <InformationImage src={signUp ? signUpPlaceholderImage : signInPlaceholderImage} alt={signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt} />\n            )}\n            {(signUpInformationHeader || signInInformationHeader) && <InformationHeader>{signUp ? signUpInformationHeader : signInInformationHeader}</InformationHeader>}\n            {(signUpInformationText || signInInformationText) && <InformationText>{signUp ? signUpInformationText : signInInformationText}</InformationText>}\n          </InformationContent>\n        </InformationContainer>\n      )}\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!showInformationSection} />\n    </>\n  );\n};\n\nexport default AuthPage;\n"],"file":"AuthPage.js"}
+{"version":3,"sources":["../../../src/AuthPage/AuthPage.tsx"],"names":["showInformationSection","signUp","signUpPlaceholderImage","signInPlaceholderImage","signUpPlaceholderImageAlt","signInPlaceholderImageAlt","signUpInformationHeader","signInInformationHeader","signUpInformationText","signInInformationText","screenSetsContainerId","AuthPage","COLORS","primary_20"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA;AACA;AACA;AACA;AACA;AACA,QAAMW,QAAQ,GAAG,CAAC;AAAA,IAAA,sBAAA;AAAA,IAAA,MAAA;AAAA,IAAA,sBAAA;AAAA,IAAA,sBAAA;AAAA,IAAA,yBAAA;AAAA,IAAA,yBAAA;AAAA,IAAA,uBAAA;AAAA,IAAA,uBAAA;AAAA,IAAA,qBAAA;AAAA,IAAA,qBAAA;AAWhBD,IAAAA;AAXgB,GAAD,KAYI;AACnB,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACGV,sBAAsB,IAAA,aACrB,KAAA,CAAA,aAAA,CAAA,iCAAA,EAAA;AAAsB,MAAA,MAAM,EAAEC,MAAM,GAAGW,eAAH,UAAA,GAAuBA,eAAOC;AAAlE,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA,IAAA,EACG,CAACX,sBAAsB,IAAvB,sBAAA,KAAA,aACC,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,MAAA,GAAG,EAAED,MAAM,GAAA,sBAAA,GAA7B,sBAAA;AAAiF,MAAA,GAAG,EAAEA,MAAM,GAAA,yBAAA,GAA+BI;AAA3H,KAAA,CAFJ,EAIG,CAACC,uBAAuB,IAAxB,uBAAA,KAAA,aAAwD,KAAA,CAAA,aAAA,CAAA,8BAAA,EAAA,IAAA,EAAoBL,MAAM,GAAA,uBAAA,GAJrF,uBAI2D,CAJ3D,EAKG,CAACO,qBAAqB,IAAtB,qBAAA,KAAA,aAAoD,KAAA,CAAA,aAAA,CAAA,4BAAA,EAAA,IAAA,EAAkBP,MAAM,GAAA,qBAAA,GARrF,qBAQ6D,CALvD,CADF,CAFJ,EAAA,aAYE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAqB,MAAA,EAAE,EAAvB,qBAAA;AAAgD,MAAA,cAAc,EAAE,CAACD;AAAjE,KAAA,CAZF,CADF;AAbF,GAAA;;;AA7BEA,IAAAA,sB;AAGAC,IAAAA,M;AAEAC,IAAAA,sB;AAEAC,IAAAA,sB;AAEAC,IAAAA,yB;AAEAC,IAAAA,yB;AAEAC,IAAAA,uB;AAEAC,IAAAA,uB;AAEAC,IAAAA,qB;AAEAC,IAAAA,qB;AAEAC,IAAAA,qB;;oBAuCF,Q","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\n\ntype AuthPageProps = {\n  /** set this to 'false' to hide the left side illustration/information section */\n  showInformationSection: boolean;\n  /** true if 'sign-up' screen-set is showing, otherwise false.\n   * The value can be set using 'onBeforeScreenLoad' in 'gigya.accounts.showScreenSet(...)' and checking the loaded screen-set */\n  signUp: boolean;\n  /** img src string for 'sign-up' placeholder image */\n  signUpPlaceholderImage?: string;\n  /** img src string for 'sign-in' placeholder image */\n  signInPlaceholderImage?: string;\n  /** img alt text string for 'sign-up' placeholder image */\n  signUpPlaceholderImageAlt?: string;\n  /** img alt text string for 'sign-in' placeholder image */\n  signInPlaceholderImageAlt?: string;\n  /** information header text string below 'sign-up' placeholder image */\n  signUpInformationHeader?: string;\n  /** information header text string below 'sign-in' placeholder image */\n  signInInformationHeader?: string;\n  /** information text string below 'sign-up' header text */\n  signUpInformationText?: string;\n  /** information text string below 'sign-in' header text */\n  signInInformationText?: string;\n  /** ID that will be given to the SAP CDC screen-sets container (must match 'containerID' in 'gigya.accounts.showScreenSet(...)'!) */\n  screenSetsContainerId: string;\n};\n\n/**\n * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.\n * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).\n * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.\n */\nconst AuthPage = ({\n  showInformationSection,\n  signUp,\n  signUpPlaceholderImage,\n  signInPlaceholderImage,\n  signUpPlaceholderImageAlt,\n  signInPlaceholderImageAlt,\n  signUpInformationHeader,\n  signInInformationHeader,\n  signUpInformationText,\n  signInInformationText,\n  screenSetsContainerId,\n}: AuthPageProps) => {\n  return (\n    <>\n      {showInformationSection && (\n        <InformationContainer $color={signUp ? COLORS.accent1_20 : COLORS.primary_20}>\n          <InformationContent>\n            {(signUpPlaceholderImage || signInPlaceholderImage) && (\n              <InformationImage src={signUp ? signUpPlaceholderImage : signInPlaceholderImage} alt={signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt} />\n            )}\n            {(signUpInformationHeader || signInInformationHeader) && <InformationHeader>{signUp ? signUpInformationHeader : signInInformationHeader}</InformationHeader>}\n            {(signUpInformationText || signInInformationText) && <InformationText>{signUp ? signUpInformationText : signInInformationText}</InformationText>}\n          </InformationContent>\n        </InformationContainer>\n      )}\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!showInformationSection} />\n    </>\n  );\n};\n\nexport default AuthPage;\n"],"file":"AuthPage.js"}

package/dist/umd/AuthPage/Information.js

@@ -30,7 +30,7 @@
 
   const InformationContainer = exports.InformationContainer = (0, _styledComponents2.default)(_AuthPageSection2.default)`
   display: none;
-  background: ${props => props.color};
+  background: ${props => props.$color};
 
   ${_styles.BREAKPOINTS.MEDIUM} {
     display: flex;

package/dist/umd/AuthPage/Information.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["InformationContainer","styled","props","color","BREAKPOINTS","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","HeadlineXLStyling","COLORS","InformationText","p","ParagraphLStyling","ParagraphTextStyle","InformationImage","img"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,QAAMA,oBAAoB,WAApBA,oBAAoB,GAAGC,gCAAM,yBAANA,CAA2C;AAC/E;AACA,gBAAgBC,KAAK,IAAIA,KAAK,CAACC,KAAM;AACrC;AACA,IAAIC,oBAAYC,MAAO;AACvB;AACA;AACA;AAPO,CAAA;AAUA,QAAMC,kBAAkB,WAAlBA,kBAAkB,GAAGL,2BAAOM,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIH,oBAAYI,KAAM;AACtB;AACA;AACA;AAXO,CAAA;AAcA,QAAMC,iBAAiB,WAAjBA,iBAAiB,GAAGR,2BAAOS,EAAG;AAC3C,IAAIC,mCAAkBC,eAAD,KAAjBD,CAAgC;AACpC;AACA;AAHO,CAAA;AAMA,QAAME,eAAe,WAAfA,eAAe,GAAGZ,2BAAOa,CAAE;AACxC,IAAIC,mCAAkBC,2BAAD,OAAjBD,EAA8CH,eAA7B,WAAjBG,CAAkE;AACtE;AAFO,CAAA;AAKA,QAAME,gBAAgB,WAAhBA,gBAAgB,GAAGhB,2BAAOiB,GAAI;AAC3C;AACA;AAFO,CAAA","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle} from '../styles';\nimport {ComponentLStyling, HeadlineXLStyling, ParagraphLStyling} from '../styles/typography';\n\nexport const InformationContainer = styled(AuthPageSection)<{ color: string }>`\n  display: none;\n  background: ${props => props.color};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    padding-top: 56px;\n  }\n`;\n\nexport const InformationContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-self: center;\n  align-items: center;\n  text-align: center;\n  max-width: 100%;\n\n  ${BREAKPOINTS.LARGE} {\n    align-self: flex-end;\n    margin-right: 48px;\n  }\n`;\n\nexport const InformationHeader = styled.h2`\n  ${HeadlineXLStyling(COLORS.black)}\n  font-weight: 300;\n  margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n  ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  margin: 8px 0;\n`;\n\nexport const InformationImage = styled.img`\n  height: 275px;\n  max-width: 100%;\n`;\n"],"file":"Information.js"}
+{"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["InformationContainer","styled","props","$color","BREAKPOINTS","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","HeadlineXLStyling","COLORS","InformationText","p","ParagraphLStyling","ParagraphTextStyle","InformationImage","img"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,QAAMA,oBAAoB,WAApBA,oBAAoB,GAAGC,gCAAM,yBAANA,CAA4C;AAChF;AACA,gBAAiBC,KAAD,IAAWA,KAAK,CAACC,MAAO;AACxC;AACA,IAAIC,oBAAYC,MAAO;AACvB;AACA;AACA;AAPO,CAAA;AAUA,QAAMC,kBAAkB,WAAlBA,kBAAkB,GAAGL,2BAAOM,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIH,oBAAYI,KAAM;AACtB;AACA;AACA;AAXO,CAAA;AAcA,QAAMC,iBAAiB,WAAjBA,iBAAiB,GAAGR,2BAAOS,EAAG;AAC3C,IAAIC,mCAAkBC,eAAD,KAAjBD,CAAgC;AACpC;AACA;AAHO,CAAA;AAMA,QAAME,eAAe,WAAfA,eAAe,GAAGZ,2BAAOa,CAAE;AACxC,IAAIC,mCAAkBC,2BAAD,OAAjBD,EAA8CH,eAA7B,WAAjBG,CAAkE;AACtE;AAFO,CAAA;AAKA,QAAME,gBAAgB,WAAhBA,gBAAgB,GAAGhB,2BAAOiB,GAAI;AAC3C;AACA;AAFO,CAAA","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle } from '../styles';\nimport { ComponentLStyling, HeadlineXLStyling, ParagraphLStyling } from '../styles/typography';\n\nexport const InformationContainer = styled(AuthPageSection)<{ $color: string }>`\n  display: none;\n  background: ${(props) => props.$color};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    padding-top: 56px;\n  }\n`;\n\nexport const InformationContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-self: center;\n  align-items: center;\n  text-align: center;\n  max-width: 100%;\n\n  ${BREAKPOINTS.LARGE} {\n    align-self: flex-end;\n    margin-right: 48px;\n  }\n`;\n\nexport const InformationHeader = styled.h2`\n  ${HeadlineXLStyling(COLORS.black)}\n  font-weight: 300;\n  margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n  ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  margin: 8px 0;\n`;\n\nexport const InformationImage = styled.img`\n  height: 275px;\n  max-width: 100%;\n`;\n"],"file":"Information.js"}

package/dist/umd/Banners/Banner.js

@@ -83,7 +83,7 @@
    * Styles for <Banner />
    */
   const BannerContainer = _styledComponents2.default.div`
-  background: ${props => props.type ? props.type : _styles.COLORS.correct_100};
+  background: ${props => props.$type ? props.$type : _styles.COLORS.correct_100};
   min-height: 48px;
   display: flex;
   color: ${_styles.COLORS.black};
@@ -114,8 +114,8 @@
   }
 `;
   const BannerCenter = _styledComponents2.default.div`
-  ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color)}
-  
+  ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color)}
+
   display: flex;
   width: 100%;
   margin: 0 0 0 16px;
@@ -145,7 +145,7 @@
 `;
   const ButtonContainer = _styledComponents2.default.div`
   display: contents;
-  ${props => props.type ? (0, _styles2.getButtonStyle)(props.type) : null};
+  ${props => props.$type ? (0, _styles2.getButtonStyle)(props.$type) : null};
 `;
   const BannerContentWrapper = _styledComponents2.default.div`
   display: flex;
@@ -182,12 +182,12 @@
       case 'warning':
         return /*#__PURE__*/React.createElement(BannerContainer, {
           "data-testid": testId,
-          type: _styles.COLORS.warning_100,
+          $type: _styles.COLORS.warning_100,
           link: _styles.COLORS.warning_700,
           hover: _styles.COLORS.warning_20,
           bottom: bottom
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.warning_700,
+          $color: _styles.COLORS.warning_700,
           className: size
         }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Help, {
           color: _styles.COLORS.warning_700,
@@ -201,7 +201,7 @@
           href: link,
           variant: "default"
         }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-          type: formatTypeToLowerCase
+          $type: formatTypeToLowerCase
         }, /*#__PURE__*/React.createElement(_Button.IconButton, {
           variant: "secondary",
           shape: "circular",
@@ -216,13 +216,13 @@
       case 'critical':
         return /*#__PURE__*/React.createElement(BannerContainer, {
           "data-testid": testId,
-          type: _styles.COLORS.critical_100,
+          $type: _styles.COLORS.critical_100,
           link: _styles.COLORS.critical_700,
           hover: _styles.COLORS.critical_20,
           bottom: bottom,
           className: size
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.critical_700,
+          $color: _styles.COLORS.critical_700,
           className: size
         }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
           color: _styles.COLORS.critical_700,
@@ -236,7 +236,7 @@
           href: link,
           variant: "default"
         }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-          type: formatTypeToLowerCase
+          $type: formatTypeToLowerCase
         }, /*#__PURE__*/React.createElement(_Button.IconButton, {
           variant: "secondary",
           shape: "circular",
@@ -251,13 +251,13 @@
       case 'positive':
         return /*#__PURE__*/React.createElement(BannerContainer, {
           "data-testid": testId,
-          type: _styles.COLORS.correct_100,
+          $type: _styles.COLORS.correct_100,
           link: _styles.COLORS.correct_700,
           hover: _styles.COLORS.correct_20,
           bottom: bottom,
           className: size
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.correct_700,
+          $color: _styles.COLORS.correct_700,
           className: size
         }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.ThumbsUp, {
           color: _styles.COLORS.correct_700,
@@ -271,7 +271,7 @@
           href: link,
           variant: "default"
         }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-          type: formatTypeToLowerCase
+          $type: formatTypeToLowerCase
         }, /*#__PURE__*/React.createElement(_Button.IconButton, {
           variant: "secondary",
           shape: "circular",
@@ -286,13 +286,13 @@
       default:
         return /*#__PURE__*/React.createElement(BannerContainer, {
           "data-testid": testId,
-          type: _styles.COLORS.primary_100,
+          $type: _styles.COLORS.primary_100,
           link: _styles.COLORS.primary_700,
           hover: _styles.COLORS.primary_20,
           bottom: bottom,
           className: size
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.primary_700,
+          $color: _styles.COLORS.primary_700,
           className: size
         }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Tip, {
           color: _styles.COLORS.primary_700,
@@ -306,7 +306,7 @@
           href: link,
           variant: "default"
         }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-          type: "neutral"
+          $type: "neutral"
         }, /*#__PURE__*/React.createElement(_Button.IconButton, {
           variant: "secondary",
           shape: "circular",