@laerdal/life-react-components 1.0.1-dev.22.full → 1.0.1-dev.29.full

package/dist/js/Banners/Banner.js

@@ -25,7 +25,7 @@ var _typography = require("../styles/typography");
 
 var _HyperLink = require("../HyperLink");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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); }
 
@@ -62,11 +62,13 @@ var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateO
   return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color);
 }, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
 
-var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 0 0 auto;\n  ", ";\n"])), function (props) {
+var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 0 0 auto;\n"])));
+
+var ButtonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: contents;\n  ", ";\n"])), function (props) {
   return props.type ? (0, _styles2.getButtonStyle)(props.type) : null;
 });
 
-var BannerContentWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
+var BannerContentWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
 
 var Banner = function Banner(_ref) {
   var size = _ref.size,
@@ -116,7 +118,7 @@ var Banner = function Banner(_ref) {
         id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
         href: link,
         variant: "default"
-      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
         type: formatTypeToLowerCase
       }, /*#__PURE__*/React.createElement(_Button.IconButton, {
         variant: "secondary",
@@ -129,7 +131,7 @@ var Banner = function Banner(_ref) {
       }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
         color: _styles.COLORS.warning_500,
         size: "24px"
-      })))));
+      }))))));
 
     case 'critical':
       return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -153,7 +155,7 @@ var Banner = function Banner(_ref) {
         id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
         href: link,
         variant: "default"
-      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
         type: formatTypeToLowerCase
       }, /*#__PURE__*/React.createElement(_Button.IconButton, {
         variant: "secondary",
@@ -166,7 +168,7 @@ var Banner = function Banner(_ref) {
       }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
         color: _styles.COLORS.critical_500,
         size: "24px"
-      })))));
+      }))))));
 
     case 'positive':
       return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -190,7 +192,7 @@ var Banner = function Banner(_ref) {
         id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
         href: link,
         variant: "default"
-      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
         type: formatTypeToLowerCase
       }, /*#__PURE__*/React.createElement(_Button.IconButton, {
         variant: "secondary",
@@ -203,7 +205,7 @@ var Banner = function Banner(_ref) {
       }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
         color: _styles.COLORS.correct_500,
         size: "24px"
-      })))));
+      }))))));
 
     default:
       return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -227,7 +229,7 @@ var Banner = function Banner(_ref) {
         id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
         href: link,
         variant: "default"
-      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
         type: "neutral"
       }, /*#__PURE__*/React.createElement(_Button.IconButton, {
         variant: "secondary",
@@ -240,7 +242,7 @@ var Banner = function Banner(_ref) {
       }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
         color: _styles.COLORS.primary_500,
         size: "24px"
-      })))));
+      }))))));
   }
 };
 

package/dist/js/Banners/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentTextStyle","Regular","color","ButtonWrapper","BannerContentWrapper","Banner","size","children","testId","linkText","onClose","icon","noIcon","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","white","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {Close, Help, TechnicalWarning, ThumbsUp, Tip} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button';\nimport {getButtonStyle} from './styles';\nimport {ComponentMStyling, ComponentResponsive} from '../styles/typography';\nimport {HyperLink} from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ${(props: BannerProps) => props.link} !important;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\n  \n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 16px 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 40px 0 56px;\n  }\n  &.small {\n    margin: 0 0 0 16px;\n  }\n  &.medium {\n    margin: 0 16px 0 32px;\n  }\n  &.large {\n    margin: 0 40px 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n`;\n\nconst ButtonWrapper = styled.div<{ type?: string }>`\n  margin: 0 0 0 auto;\n  ${(props) => (props.type ? getButtonStyle(props.type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = {\n  size?: 'small' | 'medium' | 'large';\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                  <Close color={COLORS.warning_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                  <Close color={COLORS.critical_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                  <Close color={COLORS.correct_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type=\"neutral\">\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                  <Close color={COLORS.primary_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentTextStyle","Regular","color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","children","testId","linkText","onClose","icon","noIcon","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","white","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {Close, Help, TechnicalWarning, ThumbsUp, Tip} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button';\nimport {getButtonStyle} from './styles';\nimport {ComponentMStyling, ComponentResponsive} from '../styles/typography';\nimport {HyperLink} from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ${(props: BannerProps) => props.link} !important;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\n  \n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 16px 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 40px 0 56px;\n  }\n  &.small {\n    margin: 0 0 0 16px;\n  }\n  &.medium {\n    margin: 0 16px 0 32px;\n  }\n  &.large {\n    margin: 0 40px 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n`;\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ type?: string }>`\n  display: contents;\n  ${(props) => (props.type ? getButtonStyle(props.type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = {\n  size?: 'small' | 'medium' | 'large';\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.warning_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.critical_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.correct_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type=\"neutral\">\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.primary_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}

package/dist/js/Button/Anchor.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    size: 'small' | 'medium' | 'large' | 'xsmall' | 'xlarge';
+    href?: string;
+}
+declare const Anchor: React.FunctionComponent<AnchorProps>;
+export default Anchor;

package/dist/js/Button/Anchor.js

@@ -0,0 +1,66 @@
+"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.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _templateObject;
+
+var _excluded = ["children", "size", "href", "target"];
+
+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) } })); }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Anchor = function Anchor(_ref) {
+  var children = _ref.children,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size,
+      _ref$href = _ref.href,
+      href = _ref$href === void 0 ? '#' : _ref$href,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_blank' : _ref$target,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(AnchorTag, _extends({
+    size: size,
+    href: href,
+    target: target
+  }, props), children);
+};
+
+Anchor.propTypes = {
+  size: _propTypes.default.oneOf(['small', 'medium', 'large', 'xsmall', 'xlarge']).isRequired,
+  href: _propTypes.default.string
+};
+
+var AnchorTag = _styledComponents.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: transparent;\n  padding: 0;\n  border: none;\n  max-width:max-content; \n  text-decoration: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: bold;\n  font-family: inherit;\n  cursor: pointer;\n  outline:none;\n  &:visited,\n  &.vistied-state {\n    color: ", ";\n    background: transparent;\n    text-decoration: none;\n  }\n  &:hover, \n  &.hover-state {\n    color: ", ";\n    text-decoration: underline;\n  }\n  &:focus,\n  &.focus-state {\n    background-color: ", ";\n    text-decoration: underline;\n    box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n    outline:none;\n    color: ", ";\n  }\n  &:active,\n  &.active-state {\n    color: ", ";\n    background: transparent;\n    text-decoration: underline;\n    background-color:unset !important;\n    box-shadow: unset !important;\n  } \n"])), _styles.COLORS.primary_500, function (props) {
+  return props.size === 'large' ? '20px' : props.size === 'small' ? '16px' : props.size === 'xsmall' ? '14px' : props.size === 'xlarge' ? '24px' : '18px';
+}, function (props) {
+  return props.size === 'large' ? '32px' : props.size === 'small' ? '24px' : props.size === 'xsmall' ? '20px' : props.size === 'xlarge' ? '36px' : '28px';
+}, _styles.COLORS.accent1_500, _styles.COLORS.primary_600, _styles.COLORS.white, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_500, _styles.COLORS.primary_700);
+
+var _default = Anchor;
+exports.default = _default;
+//# sourceMappingURL=Anchor.js.map

package/dist/js/Button/Anchor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Button/Anchor.tsx"],"names":["Anchor","children","size","href","target","props","AnchorTag","styled","a","COLORS","primary_500","accent1_500","primary_600","white","focus_25","focus","primary_700"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAOA,IAAMA,MAA4C,GAAG,SAA/CA,MAA+C,OAAuE;AAAA,MAApEC,QAAoE,QAApEA,QAAoE;AAAA,uBAA1DC,IAA0D;AAAA,MAA1DA,IAA0D,0BAAnD,OAAmD;AAAA,uBAA1CC,IAA0C;AAAA,MAA1CA,IAA0C,0BAArC,GAAqC;AAAA,yBAAhCC,MAAgC;AAAA,MAAhCA,MAAgC,4BAAzB,QAAyB;AAAA,MAAXC,KAAW;;AAC1H,sBACI,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAEH,IAAjB;AAAuB,IAAA,IAAI,EAAEC,IAA7B;AAAmC,IAAA,MAAM,EAAEC;AAA3C,KAAuDC,KAAvD,GACKJ,QADL,CADJ;AAKD,CAND;;;AAJIC,EAAAA,I,4BAAO,O,EAAU,Q,EAAW,O,EAAU,Q,EAAW,Q;AACjDC,EAAAA,I;;;AAWJ,IAAMG,SAAS,GAAGC,0BAAOC,CAAV,o6BACJC,eAAOC,WADH,EAOA,UAAAL,KAAK;AAAA,SAAKA,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmC,MAA/I;AAAA,CAPL,EAQE,UAAAG,KAAK;AAAA,SAAKA,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmC,MAA/I;AAAA,CARP,EAeDO,eAAOE,WAfN,EAqBFF,eAAOG,WArBL,EA0BSH,eAAOI,KA1BhB,EA4BgBJ,eAAOK,QA5BvB,EA4BgDL,eAAOM,KA5BvD,EA8BFN,eAAOC,WA9BL,EAkCDD,eAAOO,WAlCN,CAAf;;eA0CehB,M","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS} from '../styles';\n\ninterface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>{\n    size : 'small' | 'medium' | 'large' | 'xsmall' | 'xlarge';\n    href?: string;\n}\n\nconst Anchor: React.FunctionComponent<AnchorProps> = ({ children, size = 'small', href='#', target='_blank' , ...props}) => {\n  return (\n      <AnchorTag size={size} href={href} target={target} {...props}>\n          {children}\n      </AnchorTag>\n  )\n}\n\nconst AnchorTag = styled.a<AnchorProps>`\n  color: ${COLORS.primary_500};\n  background-color: transparent;\n  padding: 0;\n  border: none;\n  max-width:max-content; \n  text-decoration: none;\n  font-size: ${props => (props.size === 'large' ? '20px' : props.size === 'small' ? '16px' : props.size === 'xsmall' ? '14px' : props.size === 'xlarge' ? '24px' : '18px')};\n  line-height: ${props => (props.size === 'large' ? '32px' : props.size === 'small' ? '24px' : props.size === 'xsmall' ? '20px' : props.size === 'xlarge' ? '36px' : '28px')};\n  font-weight: bold;\n  font-family: inherit;\n  cursor: pointer;\n  outline:none;\n  &:visited,\n  &.vistied-state {\n    color: ${ COLORS.accent1_500 };\n    background: transparent;\n    text-decoration: none;\n  }\n  &:hover, \n  &.hover-state {\n    color: ${COLORS.primary_600};\n    text-decoration: underline;\n  }\n  &:focus,\n  &.focus-state {\n    background-color: ${COLORS.white};\n    text-decoration: underline;\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n    outline:none;\n    color: ${COLORS.primary_500};\n  }\n  &:active,\n  &.active-state {\n    color: ${ COLORS.primary_700 };\n    background: transparent;\n    text-decoration: underline;\n    background-color:unset !important;\n    box-shadow: unset !important;\n  } \n`;\n\nexport default Anchor;"],"file":"Anchor.js"}

package/dist/js/Button/BackButton.js

@@ -37,7 +37,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Button = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ", ";\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ", ";\n    color: ", ";\n    box-shadow: unset;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ", " !important;\n    background-color: transparent !important;\n  }\n"])), function (props) {
+var Button = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ", ";\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ", ";\n    color: ", ";\n    box-shadow: unset;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ", " !important;\n    background-color: transparent !important;\n  }\n"])), function (props) {
   return props.size === 'XSmall' ? (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600) : (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600);
 }, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_300);
 

package/dist/js/Button/BackButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/BackButton.tsx"],"names":["Button","styled","button","props","size","ComponentTextStyle","Bold","COLORS","neutral_600","primary_20","primary_700","primary_100","primary_800","neutral_300","BackButton","children","disabled"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAGC,0BAAOC,MAAV,myCAaR,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAe,QAAf,GAA0B,oCAAmBC,+BAAmBC,IAAtC,EAA4CC,eAAOC,WAAnD,CAA1B,GAA4F,mCAAkBH,+BAAmBC,IAArC,EAA2CC,eAAOC,WAAlD,CAAxG;AAAA,CAbQ,EAsCYD,eAAOE,UAtCnB,EAuCCF,eAAOG,WAvCR,EA+CYH,eAAOI,WA/CnB,EAgDCJ,eAAOK,WAhDR,EAuDCL,eAAOM,WAvDR,CAAZ;;AAgEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAA4C;AAAA,MAAzCC,QAAyC,QAAzCA,QAAyC;AAAA,uBAA/BX,IAA+B;AAAA,MAA/BA,IAA+B,0BAAxB,OAAwB;AAAA,MAAZD,KAAY;;AACvG,sBACE,oBAAC,MAAD,eAAYA,KAAZ;AAAmB,IAAA,IAAI,EAAEC;AAAzB,mBACE;AAAK,IAAA,SAAS,EAAE;AAAhB,kBACE,+CACE,oBAAC,0BAAD;AAAe,IAAA,IAAI,EAAEA,IAAI,KAAK,QAAT,GAAoB,IAApB,GAA2B;AAAhD,IADF,CADF,eAIE,mCAAQW,QAAR,CAJF,CADF,CADF;AAUD,CAXD;;;AAHEX,EAAAA,I,4BAAM,O,EAAU,Q;AAChBY,EAAAA,Q;;eAeaF,U","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === 'XSmall' ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: unset;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: 'Small' | 'XSmall';\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = 'Small', ...props }) => {\n  return (\n    <Button {...props} size={size}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === 'XSmall' ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"file":"BackButton.js"}
+{"version":3,"sources":["../../../src/Button/BackButton.tsx"],"names":["Button","styled","button","props","size","ComponentTextStyle","Bold","COLORS","neutral_600","primary_20","primary_700","primary_100","primary_800","neutral_300","BackButton","children","disabled"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAGC,0BAAOC,MAAV,kzCAaR,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,KAAe,QAAf,GAA0B,oCAAmBC,+BAAmBC,IAAtC,EAA4CC,eAAOC,WAAnD,CAA1B,GAA4F,mCAAkBH,+BAAmBC,IAArC,EAA2CC,eAAOC,WAAlD,CAAxG;AAAA,CAbQ,EAsCYD,eAAOE,UAtCnB,EAuCCF,eAAOG,WAvCR,EA+CYH,eAAOI,WA/CnB,EAgDCJ,eAAOK,WAhDR,EAuDCL,eAAOM,WAvDR,CAAZ;;AAgEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAA4C;AAAA,MAAzCC,QAAyC,QAAzCA,QAAyC;AAAA,uBAA/BX,IAA+B;AAAA,MAA/BA,IAA+B,0BAAxB,OAAwB;AAAA,MAAZD,KAAY;;AACvG,sBACE,oBAAC,MAAD,eAAYA,KAAZ;AAAmB,IAAA,IAAI,EAAEC;AAAzB,mBACE;AAAK,IAAA,SAAS,EAAE;AAAhB,kBACE,+CACE,oBAAC,0BAAD;AAAe,IAAA,IAAI,EAAEA,IAAI,KAAK,QAAT,GAAoB,IAApB,GAA2B;AAAhD,IADF,CADF,eAIE,mCAAQW,QAAR,CAJF,CADF,CADF;AAUD,CAXD;;;AAHEX,EAAAA,I,4BAAM,O,EAAU,Q;AAChBY,EAAAA,Q;;eAeaF,U","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === 'XSmall' ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: unset;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: 'Small' | 'XSmall';\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = 'Small', ...props }) => {\n  return (\n    <Button {...props} size={size}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === 'XSmall' ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"file":"BackButton.js"}

package/dist/js/Button/Button.d.ts

@@ -1,9 +1,12 @@
 import * as React from 'react';
+import { Size } from '../types';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'correct' | 'critical';
+    flatEdge?: 'right' | 'left' | 'none' | undefined;
     role?: 'button' | string;
     title?: string;
-    size?: 'small' | 'normal' | 'big';
+    size?: Size;
+    imageExtraMargin?: boolean;
     colorTheme?: 'teal' | 'dark';
     width?: 'auto' | string;
     loading?: boolean;

package/dist/js/Button/Button.js

@@ -15,11 +15,13 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _LoadingIndicator = require("../LoadingIndicator");
 
+var _typography = require("../styles/typography");
+
 var _styles = require("../styles");
 
-var _typography = require("../styles/typography");
+var _types = require("../types");
 
-var _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "icon"],
+var _excluded = ["children", "variant", "type", "size", "width", "imageExtraMargin", "testId", "disabled", "flatEdge", "icon"],
     _excluded2 = ["loading"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
@@ -50,10 +52,24 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
+var getBorderRadius = function getBorderRadius(flatEdge, radius) {
+  switch (flatEdge) {
+    case 'left':
+      return "0px ".concat(radius, "px ").concat(radius, "px 0px");
+
+    case 'right':
+      return "".concat(radius, "px 0px 0px ").concat(radius, "px");
+
+    case 'none':
+    default:
+      return "".concat(radius, "px");
+  }
+};
+
 var tabbedHereStyle = function tabbedHereStyle(variant, colorTheme) {
   switch (variant) {
     case 'primary':
-      return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        }\n      "])), _styles.COLORS.focus_25, _styles.COLORS.focus, colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700, colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700, colorTheme === 'dark' ? _styles.COLORS.primary_500 : _styles.COLORS.white);
+      return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        }\n      "])), _styles.COLORS.focus_25, _styles.COLORS.focus, colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700, colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700, colorTheme === 'dark' ? _styles.COLORS.primary_600 : _styles.COLORS.white);
 
     case 'secondary':
       return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        }\n      "])), _styles.COLORS.focus_25, _styles.COLORS.focus, colorTheme === 'dark' ? 'transparent' : _styles.COLORS.white, colorTheme === 'teal' ? _styles.COLORS.accent1 : colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.primary, colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_500);
@@ -66,32 +82,34 @@ var tabbedHereStyle = function tabbedHereStyle(variant, colorTheme) {
   }
 };
 
-var Primary = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: 0 !important;\n  }\n  div.button-content {\n    ", ";\n\n    background-color: ", ";\n    border-radius: 8px;\n    border-width: 2px;\n    border-style: solid;\n    border-color: ", ";\n\n    width: ", ";\n    position: relative;\n\n    min-height: ", ";\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    // paddings have -2px for border\n    padding: ", ";\n\n    span.loading {\n      opacity: 0;\n    }\n    .icon {\n      margin-left: -4px;\n      margin-top: -2px;\n      margin-bottom: -2px;\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    box-shadow: none !important;\n    color: ", ";\n  }\n  ", "\n  &.focus-state {\n    ", ";\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n  }\n"])), function (props) {
-  return props.size === 'big' ? '56px' : '48px';
+var Primary = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n  }\n  div.button-content {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 2px;\n    border-style: solid;\n    border-color: ", ";\n\n    width: ", ";\n    position: relative;\n\n    min-height: ", ";\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    // paddings have -2px for border\n    padding: ", ";\n\n    span.loading {\n      opacity: 0;\n    }\n    .icon {\n      margin-left: -4px;\n      margin-top: -2px;\n      margin-bottom: -2px;\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .extramargin {\n      margin-right: 9px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    box-shadow: none !important;\n    color: ", ";\n  }\n  ", "\n  &.focus-state {\n    ", ";\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n  }\n"])), function (props) {
+  return props.size === _types.Size.Large ? '56px' : '48px';
 }, function (props) {
-  return props.size === 'big' ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : props.size === 'small' ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white);
+  return props.size === _types.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white);
 }, function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary;
+}, function (props) {
+  return getBorderRadius(props.flatEdge, 8);
 }, function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary;
 }, function (props) {
   return props.width;
 }, function (props) {
-  return props.size === 'big' ? '56px' : props.size === 'small' ? '32px' : '40px';
+  return props.size === _types.Size.Large ? '56px' : props.size === _types.Size.Small ? '32px' : '40px';
 }, function (props) {
-  return props.size === 'big' ? '14px 18px' : props.size === 'small' ? '4px 10px' : '6px 14px';
+  return props.size === _types.Size.Large ? '14px 18px' : props.size === _types.Size.Small ? '4px 10px' : '6px 14px';
 }, function (props) {
-  return props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px';
+  return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
 }, function (props) {
-  return props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px';
+  return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
 }, function (props) {
-  return props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px';
+  return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
 }, function (props) {
-  return props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px';
+  return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
 }, function (props) {
-  return props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px';
+  return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
 }, function (props) {
-  return props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px';
+  return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
 }, function (props) {
   return props.colorTheme === 'dark' ? _styles.COLORS.primary : _styles.COLORS.white;
 }, function (props) {
@@ -182,7 +200,7 @@ var Critical = (0, _styledComponents.default)(Primary)(_templateObject9 || (_tem
 var Text = _styledComponents.default.button(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: transparent;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n\n  text-decoration: underline;\n  ", ";\n\n  &:hover,\n  &:focus,\n  &.hover-state,\n  &.focus-state {\n    color: ", ";\n    background: transparent;\n  }\n  &:active,\n  &.active-state {\n    color: ", ";\n    background: transparent;\n  }\n  &:disabled,\n  &.disabled-state {\n    color: ", ";\n    background: transparent;\n    cursor: not-allowed;\n  }\n"])), function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary;
 }, function (props) {
-  return props.size === 'big' ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary) : props.size === 'small' ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary);
+  return props.size === _types.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary) : props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary);
 }, function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700;
 }, function (props) {
@@ -197,11 +215,13 @@ var Button = function Button(_ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'button' : _ref$type,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'normal' : _ref$size,
+      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? 'auto' : _ref$width,
+      imageExtraMargin = _ref.imageExtraMargin,
       testId = _ref.testId,
       disabled = _ref.disabled,
+      flatEdge = _ref.flatEdge,
       icon = _ref.icon,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -218,7 +238,7 @@ var Button = function Button(_ref) {
 
   var renderContent = function renderContent() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
-      className: loading ? 'icon loading' : 'icon'
+      className: (imageExtraMargin ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')
     }, icon), /*#__PURE__*/React.createElement("span", {
       className: loading ? 'label loading' : 'label'
     }, children), loading && /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, null));
@@ -231,6 +251,7 @@ var Button = function Button(_ref) {
         disabled: disabled,
         type: type,
         size: size,
+        flatEdge: flatEdge,
         width: width,
         "data-testid": testId,
         className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
@@ -255,6 +276,7 @@ var Button = function Button(_ref) {
         disabled: disabled,
         type: type,
         size: size,
+        flatEdge: flatEdge,
         width: width,
         "data-testid": testId,
         className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
@@ -278,6 +300,7 @@ var Button = function Button(_ref) {
       return /*#__PURE__*/React.createElement(Tertiary, _extends({}, renderProps, {
         disabled: disabled,
         type: type,
+        flatEdge: flatEdge,
         size: size,
         width: width,
         "data-testid": testId,
@@ -312,6 +335,7 @@ var Button = function Button(_ref) {
         disabled: disabled,
         type: type,
         size: size,
+        flatEdge: flatEdge,
         width: width,
         "data-testid": testId,
         className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
@@ -334,6 +358,7 @@ var Button = function Button(_ref) {
     case 'critical':
       return /*#__PURE__*/React.createElement(Critical, _extends({}, renderProps, {
         disabled: disabled,
+        flatEdge: flatEdge,
         type: type,
         size: size,
         width: width,
@@ -357,6 +382,7 @@ var Button = function Button(_ref) {
 
     default:
       return /*#__PURE__*/React.createElement(Primary, _extends({}, renderProps, {
+        flatEdge: flatEdge,
         disabled: disabled,
         type: type,
         size: size,
@@ -385,7 +411,7 @@ Button.propTypes = {
   variant: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary', 'text', 'correct', 'critical']),
   role: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button']), _propTypes.default.string]),
   title: _propTypes.default.string,
-  size: _propTypes.default.oneOf(['small', 'normal', 'big']),
+  imageExtraMargin: _propTypes.default.bool,
   colorTheme: _propTypes.default.oneOf(['teal', 'dark']),
   width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.string]),
   loading: _propTypes.default.bool,