@laerdal/life-react-components 1.2.2-dev.13 → 1.2.2-dev.15

package/dist/esm/GlobalNavigationBar/Avatar.js

@@ -32,7 +32,7 @@ const AvatarLink = styled.div`
   }
 `;
 const AvatarImage = styled.div`
-  background-color: ${props => props.color};
+  background-color: ${props => props.$color};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -78,7 +78,7 @@ const Avatar = ({
     onMouseDown: e => e.preventDefault()
   }, /*#__PURE__*/React.createElement(AvatarImage, {
     size: size,
-    color: color,
+    $color: color,
     useInteractionStyling: useInteractionStyling
   }, /*#__PURE__*/React.createElement(AvatarLetter, {
     "data-hj-suppress": true,

package/dist/esm/GlobalNavigationBar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Avatar.tsx"],"names":["React","styled","css","COLORS","BREAKPOINTS","LinkStyling","primary_500","primary","ImageStyling","primary_700","primary_800","AvatarLink","div","props","useInteractionStyling","size","AvatarImage","color","AvatarLetter","AvatarContainer","inMobileMenu","hideOnLowWidth","MEDIUM","hidePadding","Avatar","firstName","lastName","e","preventDefault","profileMenuLink"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS, BREAKPOINTS } from '../styles';\n\nconst LinkStyling = css`\n  &:focus {\n    background: ${COLORS.primary_500};\n    outline: none;\n  }\n  &:focus-within {\n    box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n`;\n\nconst ImageStyling = css`\n  &:hover {\n    background-color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    background: ${COLORS.primary_800};\n  }\n`;\n\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\n  text-decoration: none;\n\n  ${props => (props.useInteractionStyling ? LinkStyling : '')};\n  &:focus {\n    outline: none;\n  }\n  &:focus-within {\n    border-radius: ${props => (props.useInteractionStyling ? `${props.size ? props.size : 48}px` : '')};\n  }\n`;\n\nconst AvatarImage = styled.div<{ size: number; color: string; useInteractionStyling: boolean }>`\n  background-color: ${props => props.color};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${props => (props.size ? props.size : 48)}px;\n  height: ${props => (props.size ? props.size : 48)}px;\n  width: ${props => (props.size ? props.size : 48)}px;\n  cursor: pointer;\n\n  ${props => (props.useInteractionStyling ? ImageStyling : '')};\n`;\n\nconst AvatarLetter = styled.div<{ size: number }>`\n  font-size: ${props => props.size / 2 - 2}px;\n  color: white;\n  font-weight: bold;\n  text-transform: uppercase;\n  display: inline-block;\n  line-height: ${props => (props.size ? props.size : 48)}px;\n`;\n\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\n  flex-direction: column;\n  align-self: center;\n  margin-right: ${props => (props.inMobileMenu ? '6px' : '8px')};\n  margin-left: ${props => (props.inMobileMenu ? '0' : 'auto')};\n  display: ${props => (props.hideOnLowWidth ? 'none' : 'flex')};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    ${props => !props.hidePadding ? 'padding: 6px;' : ''};\n  }\n`;\n\ninterface AvatarProps {\n  firstName: string;\n  lastName: string;\n  size: number;\n  color: string;\n  profileMenuLink: string;\n  useInteractionStyling?: boolean;\n}\n\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\n  return (\n    <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={(e: any) => e.preventDefault()}>\n      <AvatarImage size={size} color={color} useInteractionStyling={useInteractionStyling}>\n        <AvatarLetter data-hj-suppress size={size}>\n          {firstName[0]}\n          {lastName[0]}\n        </AvatarLetter>\n      </AvatarImage>\n    </AvatarLink>\n  );\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Avatar.tsx"],"names":["React","styled","css","COLORS","BREAKPOINTS","LinkStyling","primary_500","primary","ImageStyling","primary_700","primary_800","AvatarLink","div","props","useInteractionStyling","size","AvatarImage","$color","AvatarLetter","AvatarContainer","inMobileMenu","hideOnLowWidth","MEDIUM","hidePadding","Avatar","firstName","lastName","color","e","preventDefault","profileMenuLink"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS, BREAKPOINTS } from '../styles';\n\nconst LinkStyling = css`\n  &:focus {\n    background: ${COLORS.primary_500};\n    outline: none;\n  }\n  &:focus-within {\n    box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n`;\n\nconst ImageStyling = css`\n  &:hover {\n    background-color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    background: ${COLORS.primary_800};\n  }\n`;\n\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\n  text-decoration: none;\n\n  ${(props) => (props.useInteractionStyling ? LinkStyling : '')};\n  &:focus {\n    outline: none;\n  }\n  &:focus-within {\n    border-radius: ${(props) => (props.useInteractionStyling ? `${props.size ? props.size : 48}px` : '')};\n  }\n`;\n\nconst AvatarImage = styled.div<{ size: number; $color: string; useInteractionStyling: boolean }>`\n  background-color: ${(props) => props.$color};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${(props) => (props.size ? props.size : 48)}px;\n  height: ${(props) => (props.size ? props.size : 48)}px;\n  width: ${(props) => (props.size ? props.size : 48)}px;\n  cursor: pointer;\n\n  ${(props) => (props.useInteractionStyling ? ImageStyling : '')};\n`;\n\nconst AvatarLetter = styled.div<{ size: number }>`\n  font-size: ${(props) => props.size / 2 - 2}px;\n  color: white;\n  font-weight: bold;\n  text-transform: uppercase;\n  display: inline-block;\n  line-height: ${(props) => (props.size ? props.size : 48)}px;\n`;\n\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\n  flex-direction: column;\n  align-self: center;\n  margin-right: ${(props) => (props.inMobileMenu ? '6px' : '8px')};\n  margin-left: ${(props) => (props.inMobileMenu ? '0' : 'auto')};\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'flex')};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    ${(props) => (!props.hidePadding ? 'padding: 6px;' : '')};\n  }\n`;\n\ninterface AvatarProps {\n  firstName: string;\n  lastName: string;\n  size: number;\n  color: string;\n  profileMenuLink: string;\n  useInteractionStyling?: boolean;\n}\n\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\n  return (\n    <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={(e: any) => e.preventDefault()}>\n      <AvatarImage size={size} $color={color} useInteractionStyling={useInteractionStyling}>\n        <AvatarLetter data-hj-suppress size={size}>\n          {firstName[0]}\n          {lastName[0]}\n        </AvatarLetter>\n      </AvatarImage>\n    </AvatarLink>\n  );\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}

package/dist/esm/GlobalNavigationBar/Logo.js

@@ -16,7 +16,7 @@ const StyledLink = styled(Link)`
   svg {
     width: 66px;
     height: 36px;
-    color: ${props => props.color};
+    color: ${props => props.$color};
     ${BREAKPOINTS.MEDIUM} {
       width: 88px;
       height: 48px;
@@ -44,18 +44,18 @@ const LogoContainer = styled.div`
 const Name = styled.span`
   margin-left: 8px;
   padding-left: 8px;
-  border-left: 1px solid ${props => props.color || COLORS.black};
+  border-left: 1px solid ${props => props.$color || COLORS.black};
   letter-spacing: -0.02em;
 
-  ${props => props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}
-  
+  ${props => props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}
+
   font-weight: 300 !important;
   line-height: 24px !important;
-  
+
   ${BREAKPOINTS.MEDIUM} {
     margin-left: 12px;
     padding-left: 12px;
-    ${props => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}
   }
 `;
 const BetaTag = styled.span`
@@ -66,7 +66,7 @@ const BetaTag = styled.span`
   border-left: none;
   border-radius: 2px;
 
-  ${props => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color || COLORS.white)}
+  ${props => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}
 `;
 
 const Logo = ({
@@ -87,13 +87,13 @@ const Logo = ({
         onClick();
       }
     },
-    color: color
+    $color: color
   }, color === COLORS.white ? /*#__PURE__*/React.createElement(LaerdalWhiteLogo, null) : /*#__PURE__*/React.createElement(LaerdalLogo, null), /*#__PURE__*/React.createElement(Name, {
-    color: color,
+    $color: color,
     noSizeChangeOnMobile: noSizeChangeOnMobile || false
   }, name), showBetaTag && /*#__PURE__*/React.createElement(BetaTag, {
     backgroundColor: betaTagBackgroundColor,
-    color: betaTagColor
+    $color: betaTagColor
   }, "BETA")));
 };
 

package/dist/esm/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentXSStyling","StyledLink","props","color","MEDIUM","LogoContainer","div","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {LaerdalLogo, LaerdalWhiteLogo} from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentXSStyling} from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) => props.noSizeChangeOnMobile\n          ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)\n          : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  \n  font-weight: 300 !important;\n  line-height: 24px !important;\n  \n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentXSStyling","StyledLink","props","$color","MEDIUM","LogoContainer","div","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}

package/dist/esm/HyperLink/HyperLink.js

@@ -1,4 +1,12 @@
 import _pt from "prop-types";
+const _excluded = ["id", "className", "variant", "href", "margin", "children", "target"];
+
+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; }
+
 import * as React from 'react';
 import styled from 'styled-components';
 import { defaultStyle, invertedStyle } from './styling';
@@ -7,24 +15,27 @@ const StyledLink = styled.a`
   ${props => props.margin ? `margin: ${props.margin};` : ''}
 `;
 
-const HyperLink = ({
-  id,
-  className,
-  variant,
-  href,
-  margin,
-  children,
-  target
-}) => {
-  return /*#__PURE__*/React.createElement(StyledLink, {
+const HyperLink = _ref => {
+  let {
+    id,
+    className,
+    variant,
+    href,
+    margin,
+    children,
+    target
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(StyledLink, _extends({
     id: id,
     className: className,
     variant: variant,
     href: href,
-    target: target || "_blank",
+    target: target || '_blank',
     rel: "noopener noreferrer",
     margin: margin
-  }, children);
+  }, props), children);
 };
 
 HyperLink.propTypes = {

package/dist/esm/HyperLink/HyperLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","id","className","href","children","target","disabled"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;AAEA,MAAMC,UAAU,GAAGH,MAAM,CAACI,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAAc;AAC7E,IAAKI,KAAD,IAAYA,KAAK,CAACE,MAAN,GAAgB,WAAUF,KAAK,CAACE,MAAO,GAAvC,GAA4C,EAAI;AAChE,CANA;;AAkBA,MAAMC,SAAyC,GAAG,CAAC;AAAEC,EAAAA,EAAF;AAAMC,EAAAA,SAAN;AAAiBJ,EAAAA,OAAjB;AAA0BK,EAAAA,IAA1B;AAAgCJ,EAAAA,MAAhC;AAAwCK,EAAAA,QAAxC;AAAkDC,EAAAA;AAAlD,CAAD,KAAuE;AACvH,sBACE,oBAAC,UAAD;AAAY,IAAA,EAAE,EAAEJ,EAAhB;AAAoB,IAAA,SAAS,EAAEC,SAA/B;AAA0C,IAAA,OAAO,EAAEJ,OAAnD;AAA4D,IAAA,IAAI,EAAEK,IAAlE;AAAwE,IAAA,MAAM,EAAEE,MAAM,IAAI,QAA1F;AAAoG,IAAA,GAAG,EAAC,qBAAxG;AAA8H,IAAA,MAAM,EAAEN;AAAtI,KACGK,QADH,CADF;AAKD,CAND;;;AATEH,EAAAA,E;AACAH,EAAAA,O,aAAS,S,EAAY,U;AACrBK,EAAAA,I;AACAG,EAAAA,Q;AACAP,EAAAA,M;AACAK,EAAAA,Q;AACAF,EAAAA,S;;AAWF,eAAeF,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\ninterface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement>{\n  id: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<Props> = ({ id, className, variant, href, margin, children, target }: Props) => {\n  return (\n    <StyledLink id={id} className={className} variant={variant} href={href} target={target || \"_blank\"} rel=\"noopener noreferrer\" margin={margin}>\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}
+{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","id","className","href","children","target","disabled"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;AAEA,MAAMC,UAAU,GAAGH,MAAM,CAACI,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAAc;AAC7E,IAAKI,KAAD,IAAYA,KAAK,CAACE,MAAN,GAAgB,WAAUF,KAAK,CAACE,MAAO,GAAvC,GAA4C,EAAI;AAChE,CANA;;AAkBA,MAAMC,SAAkD,GAAG,QAA0F;AAAA,MAAzF;AAAEC,IAAAA,EAAF;AAAMC,IAAAA,SAAN;AAAiBJ,IAAAA,OAAjB;AAA0BK,IAAAA,IAA1B;AAAgCJ,IAAAA,MAAhC;AAAwCK,IAAAA,QAAxC;AAAkDC,IAAAA;AAAlD,GAAyF;AAAA,MAA5BR,KAA4B;;AACnJ,sBACE,oBAAC,UAAD;AAAY,IAAA,EAAE,EAAEI,EAAhB;AAAoB,IAAA,SAAS,EAAEC,SAA/B;AAA0C,IAAA,OAAO,EAAEJ,OAAnD;AAA4D,IAAA,IAAI,EAAEK,IAAlE;AAAwE,IAAA,MAAM,EAAEE,MAAM,IAAI,QAA1F;AAAoG,IAAA,GAAG,EAAC,qBAAxG;AAA8H,IAAA,MAAM,EAAEN;AAAtI,KAAkJF,KAAlJ,GACGO,QADH,CADF;AAKD,CAND;;;AATEH,EAAAA,E;AACAH,EAAAA,O,aAAS,S,EAAY,U;AACrBK,EAAAA,I;AACAG,EAAAA,Q;AACAP,EAAAA,M;AACAK,EAAAA,Q;AACAF,EAAAA,S;;AAWF,eAAeF,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  id: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ id, className, variant, href, margin, children, target, ...props }: HyperlinkProps) => {\n  return (\n    <StyledLink id={id} className={className} variant={variant} href={href} target={target || '_blank'} rel=\"noopener noreferrer\" margin={margin} {...props}>\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}

package/dist/esm/Modals/ModalDialog.js

@@ -1,5 +1,6 @@
 import _pt from "prop-types";
 import * as React from 'react';
+import { HyperLink } from '..';
 import { Button, IconButton } from '../Button';
 import { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';
 import { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';
@@ -14,6 +15,7 @@ export const ModalDialog = ({
   title,
   topImage,
   buttons,
+  leftFooterAction,
   backButton,
   closeAction,
   submitAction,
@@ -156,9 +158,54 @@ export const ModalDialog = ({
     }
   };
 
-  buttons?.reverse();
-  const lastLeftButton = buttons?.find(a => a.position === 'left');
-  buttons?.reverse();
+  const getLeftActionIconElement = icon => {
+    return /*#__PURE__*/React.cloneElement(icon, {
+      size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px'
+    });
+  };
+
+  const LeftFooterAction = leftFooterAction => {
+    const {
+      text,
+      actionType,
+      disabled,
+      icon,
+      action
+    } = leftFooterAction;
+
+    switch (actionType) {
+      case 'button':
+        return /*#__PURE__*/React.createElement(Button, {
+          id: 'left-action-button',
+          type: leftFooterAction?.type,
+          disabled: disabled,
+          loading: leftFooterAction?.loading,
+          icon: icon,
+          size: size,
+          onClick: action,
+          variant: leftFooterAction?.variant ?? 'secondary',
+          style: {
+            order: -1,
+            marginRight: 'auto'
+          }
+        }, text);
+
+      case 'hyperlink':
+        return /*#__PURE__*/React.createElement(HyperLink, {
+          id: "left-action-hyperlink",
+          className: "footer-action",
+          href: leftFooterAction.href,
+          disabled: disabled,
+          variant: "default"
+        }, icon && getLeftActionIconElement(icon), text);
+
+      case 'note':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "footer-action note"
+        }, icon && getLeftActionIconElement(icon), /*#__PURE__*/React.createElement("span", null, text));
+    }
+  };
+
   return /*#__PURE__*/React.createElement(ModalContainer, {
     showModal: isModalOpen,
     closeModal: closeModalAndClearInput,
@@ -199,23 +246,15 @@ export const ModalDialog = ({
     size: size,
     onClick: b.action,
     type: b.type,
-    variant: b.variant,
-    style: b.position === 'left' ? {
-      order: -1,
-      marginRight: b === lastLeftButton ? 'auto' : undefined
-    } : undefined
-  }, b.text))))));
+    variant: b.variant
+  }, b.text)), leftFooterAction && LeftFooterAction(leftFooterAction)))));
 };
 ModalDialog.propTypes = {
   isModalOpen: _pt.bool.isRequired,
   closeModalAndClearInput: _pt.any.isRequired,
   title: _pt.string,
   topImage: _pt.any,
-  buttons: _pt.arrayOf(_pt.shape({
-    action: _pt.oneOfType([_pt.func, _pt.func]),
-    text: _pt.string.isRequired,
-    position: _pt.oneOf(['left', 'right'])
-  })),
+  buttons: _pt.array,
   tooltip: _pt.string,
   backButton: _pt.func,
   closeAction: _pt.func.isRequired,

package/dist/esm/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","ModalBody","ModalFooter","ModalTitleSection","StyledModalHeader","ModalNote","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","backButton","closeAction","submitAction","tooltip","children","note","state","tooltipOpen","setTooltipOpen","useState","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalCloseButton","onClick","black","ModalBackButton","reverse","lastLeftButton","find","a","position","neutral_600","map","b","i","id","disabled","loading","action","type","variant","order","marginRight","undefined","text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { SystemIcon, SystemIcons } from '..';\nimport {Button, IconButton} from '../Button';\nimport {ButtonProps} from '../Button/Button';\nimport {ArrowLineLeft, Close, Help} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL} from '../styles';\nimport {Size} from '../types'\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  ModalBody,\n  ModalFooter,\n  ModalTitleSection,\n  StyledModalHeader\n} from './ModalStyles';\n\nimport {ModalNote} from './ModalNote';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\n  action?: (() => void) | ((e: any) => void);\n  text: string;\n  position?: 'left' | 'right';\n}\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  buttons?.reverse();\n  const lastLeftButton = buttons?.find(a => a.position === 'left');\n  buttons?.reverse();\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              {ModalCloseButton(closeAction)}\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && ModalCloseButton(closeAction)}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          { note && <ModalNote note={note} state={state} size={size}/> }\n\n          <ModalFooter size={size}>\n              {buttons?.map((b, i) => (\n                  <Button key={b.id || i}\n                          id={b.id}\n                          disabled={b.disabled}\n                          loading={b.loading}\n                          size={size}\n                          onClick={b.action}\n                          type={b.type}\n                          variant={b.variant}\n                          style={\n                            b.position === 'left'\n                              ? {\n                                order: -1,\n                                marginRight: b === lastLeftButton ? 'auto' : undefined\n                              }\n                              : undefined\n                          }>\n                    {b.text}\n                  </Button>\n              ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","HyperLink","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","ModalBody","ModalFooter","ModalTitleSection","StyledModalHeader","ModalNote","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","tooltipOpen","setTooltipOpen","useState","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","icon","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","neutral_600","map","b","i","id"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { HyperLink } from '..';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalTitleSection, StyledModalHeader } from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { ButtonAction, LeftFooterAction, LeftFooterActionBase, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              {ModalCloseButton(closeAction)}\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && ModalCloseButton(closeAction)}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} />}\n\n          <ModalFooter size={size}>\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/dist/esm/Modals/ModalStyles.js

@@ -85,7 +85,7 @@ export const ModalNoteSection = styled.section`
   border-radius: 2px;
 
   span {
-    display:block;
+    display: block;
     width: 80%;
     margin-left: 8px;
     color: ${props => getNoteMessageColor(props.state)};
@@ -110,6 +110,19 @@ export const ModalFooter = styled.section`
   justify-content: flex-end;
 
   gap: ${props => props?.size === 'large' ? `16px` : '8px'};
+
+  .footer-action {
+    order: -1;
+    margin-right: auto;
+    display: flex;
+    align-items: center;
+    font-size: ${props => props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px'};
+    gap: ${props => props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px'};
+  }
+
+  .footer-action.note {
+    color: ${COLORS.neutral_600};
+  }
 `;
 export const getBackgroundColor = state => {
   switch (state) {

package/dist/esm/Modals/ModalStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","CloseButtonWrapper","hasImage","Small","Large","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","ModalFooter","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types'\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  display: flex;\n  div#tooltip {\n    margin-left: 12px;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            position: absolute;\n            right: 0;\n            top: 0;\n            margin: -12px !important;\n          `\n        : css`\n            position: absolute;\n            top: 0;\n            right: 0;\n            left: unset;\n            margin: ${props.size === Size.Small ? '4px 4px 0 0' : props.size === Size.Large ? '20px 20px 0 0' : '12px 12px 0 0'} !important;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            left: 0;\n            top: 0;\n            position: absolute;\n            margin: -12px 0 0 -12px !important;\n          `\n        : css`\n            position: unset;\n            margin: -12px 0 0 -12px !important;\n          `}\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{state:string, size?:string}>`\n  background-color: ${(props)=> getBackgroundColor(props.state)};\n  font-size: ${(props)=> (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  margin-bottom: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display:block;\n    width: 80%;\n    margin-left: 8px;\n    color: ${(props)=> getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n`;\n\nexport const getBackgroundColor = (state:string) => {\n  switch(state){\n    case 'positive': return COLORS.correct_100;\n    case 'warning': return COLORS.warning_100;\n    case 'critical': return COLORS.critical_100;\n    default: return COLORS.primary_100;\n  }\n}\n\nexport const getNoteMessageColor = (state:string) => {\n  switch(state){\n    case 'positive': return COLORS.correct_700;\n    case 'warning': return COLORS.warning_700;\n    case 'critical': return COLORS.critical_700;\n    default: return COLORS.primary_700;\n  }\n}"],"file":"ModalStyles.js"}
+{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","CloseButtonWrapper","hasImage","Small","Large","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","ModalFooter","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  display: flex;\n  div#tooltip {\n    margin-left: 12px;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            position: absolute;\n            right: 0;\n            top: 0;\n            margin: -12px !important;\n          `\n        : css`\n            position: absolute;\n            top: 0;\n            right: 0;\n            left: unset;\n            margin: ${props.size === Size.Small ? '4px 4px 0 0' : props.size === Size.Large ? '20px 20px 0 0' : '12px 12px 0 0'} !important;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            left: 0;\n            top: 0;\n            position: absolute;\n            margin: -12px 0 0 -12px !important;\n          `\n        : css`\n            position: unset;\n            margin: -12px 0 0 -12px !important;\n          `}\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n  background-color: ${(props) => getBackgroundColor(props.state)};\n  font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: 80%;\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n    gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n  }\n\n  .footer-action.note {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_100;\n    case 'warning':\n      return COLORS.warning_100;\n    case 'critical':\n      return COLORS.critical_100;\n    default:\n      return COLORS.primary_100;\n  }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_700;\n    case 'warning':\n      return COLORS.warning_700;\n    case 'critical':\n      return COLORS.critical_700;\n    default:\n      return COLORS.primary_700;\n  }\n};\n"],"file":"ModalStyles.js"}

package/dist/esm/Modals/ModalTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ModalTypes.js.map

package/dist/esm/Modals/ModalTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"ModalTypes.js"}

package/dist/js/GlobalNavigationBar/Avatar.js

@@ -35,7 +35,7 @@ var AvatarLink = _styledComponents.default.div(_templateObject3 || (_templateObj
 });
 
 var AvatarImage = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", "px;\n  height: ", "px;\n  width: ", "px;\n  cursor: pointer;\n\n  ", ";\n"])), function (props) {
-  return props.color;
+  return props.$color;
 }, function (props) {
   return props.size ? props.size : 48;
 }, function (props) {
@@ -80,7 +80,7 @@ var Avatar = function Avatar(_ref) {
     }
   }, /*#__PURE__*/React.createElement(AvatarImage, {
     size: size,
-    color: color,
+    $color: color,
     useInteractionStyling: useInteractionStyling
   }, /*#__PURE__*/React.createElement(AvatarLetter, {
     "data-hj-suppress": true,

package/dist/js/GlobalNavigationBar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Avatar.tsx"],"names":["LinkStyling","css","COLORS","primary_500","primary","ImageStyling","primary_700","primary_800","AvatarLink","styled","div","props","useInteractionStyling","size","AvatarImage","color","AvatarLetter","AvatarContainer","inMobileMenu","hideOnLowWidth","BREAKPOINTS","MEDIUM","hidePadding","Avatar","firstName","lastName","e","preventDefault","profileMenuLink"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS, BREAKPOINTS } from '../styles';\n\nconst LinkStyling = css`\n  &:focus {\n    background: ${COLORS.primary_500};\n    outline: none;\n  }\n  &:focus-within {\n    box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n`;\n\nconst ImageStyling = css`\n  &:hover {\n    background-color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    background: ${COLORS.primary_800};\n  }\n`;\n\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\n  text-decoration: none;\n\n  ${props => (props.useInteractionStyling ? LinkStyling : '')};\n  &:focus {\n    outline: none;\n  }\n  &:focus-within {\n    border-radius: ${props => (props.useInteractionStyling ? `${props.size ? props.size : 48}px` : '')};\n  }\n`;\n\nconst AvatarImage = styled.div<{ size: number; color: string; useInteractionStyling: boolean }>`\n  background-color: ${props => props.color};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${props => (props.size ? props.size : 48)}px;\n  height: ${props => (props.size ? props.size : 48)}px;\n  width: ${props => (props.size ? props.size : 48)}px;\n  cursor: pointer;\n\n  ${props => (props.useInteractionStyling ? ImageStyling : '')};\n`;\n\nconst AvatarLetter = styled.div<{ size: number }>`\n  font-size: ${props => props.size / 2 - 2}px;\n  color: white;\n  font-weight: bold;\n  text-transform: uppercase;\n  display: inline-block;\n  line-height: ${props => (props.size ? props.size : 48)}px;\n`;\n\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\n  flex-direction: column;\n  align-self: center;\n  margin-right: ${props => (props.inMobileMenu ? '6px' : '8px')};\n  margin-left: ${props => (props.inMobileMenu ? '0' : 'auto')};\n  display: ${props => (props.hideOnLowWidth ? 'none' : 'flex')};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    ${props => !props.hidePadding ? 'padding: 6px;' : ''};\n  }\n`;\n\ninterface AvatarProps {\n  firstName: string;\n  lastName: string;\n  size: number;\n  color: string;\n  profileMenuLink: string;\n  useInteractionStyling?: boolean;\n}\n\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\n  return (\n    <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={(e: any) => e.preventDefault()}>\n      <AvatarImage size={size} color={color} useInteractionStyling={useInteractionStyling}>\n        <AvatarLetter data-hj-suppress size={size}>\n          {firstName[0]}\n          {lastName[0]}\n        </AvatarLetter>\n      </AvatarImage>\n    </AvatarLink>\n  );\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Avatar.tsx"],"names":["LinkStyling","css","COLORS","primary_500","primary","ImageStyling","primary_700","primary_800","AvatarLink","styled","div","props","useInteractionStyling","size","AvatarImage","$color","AvatarLetter","AvatarContainer","inMobileMenu","hideOnLowWidth","BREAKPOINTS","MEDIUM","hidePadding","Avatar","firstName","lastName","color","e","preventDefault","profileMenuLink"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS, BREAKPOINTS } from '../styles';\n\nconst LinkStyling = css`\n  &:focus {\n    background: ${COLORS.primary_500};\n    outline: none;\n  }\n  &:focus-within {\n    box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n`;\n\nconst ImageStyling = css`\n  &:hover {\n    background-color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    background: ${COLORS.primary_800};\n  }\n`;\n\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\n  text-decoration: none;\n\n  ${(props) => (props.useInteractionStyling ? LinkStyling : '')};\n  &:focus {\n    outline: none;\n  }\n  &:focus-within {\n    border-radius: ${(props) => (props.useInteractionStyling ? `${props.size ? props.size : 48}px` : '')};\n  }\n`;\n\nconst AvatarImage = styled.div<{ size: number; $color: string; useInteractionStyling: boolean }>`\n  background-color: ${(props) => props.$color};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${(props) => (props.size ? props.size : 48)}px;\n  height: ${(props) => (props.size ? props.size : 48)}px;\n  width: ${(props) => (props.size ? props.size : 48)}px;\n  cursor: pointer;\n\n  ${(props) => (props.useInteractionStyling ? ImageStyling : '')};\n`;\n\nconst AvatarLetter = styled.div<{ size: number }>`\n  font-size: ${(props) => props.size / 2 - 2}px;\n  color: white;\n  font-weight: bold;\n  text-transform: uppercase;\n  display: inline-block;\n  line-height: ${(props) => (props.size ? props.size : 48)}px;\n`;\n\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\n  flex-direction: column;\n  align-self: center;\n  margin-right: ${(props) => (props.inMobileMenu ? '6px' : '8px')};\n  margin-left: ${(props) => (props.inMobileMenu ? '0' : 'auto')};\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'flex')};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    ${(props) => (!props.hidePadding ? 'padding: 6px;' : '')};\n  }\n`;\n\ninterface AvatarProps {\n  firstName: string;\n  lastName: string;\n  size: number;\n  color: string;\n  profileMenuLink: string;\n  useInteractionStyling?: boolean;\n}\n\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\n  return (\n    <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={(e: any) => e.preventDefault()}>\n      <AvatarImage size={size} $color={color} useInteractionStyling={useInteractionStyling}>\n        <AvatarLetter data-hj-suppress size={size}>\n          {firstName[0]}\n          {lastName[0]}\n        </AvatarLetter>\n      </AvatarImage>\n    </AvatarLink>\n  );\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}

package/dist/js/GlobalNavigationBar/Logo.js

@@ -32,23 +32,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var StyledLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ", ";\n    ", " {\n      width: 88px;\n      height: 48px;\n    }\n  }\n"])), function (props) {
-  return props.color;
+  return props.$color;
 }, _styles.BREAKPOINTS.MEDIUM);
 
 var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
 
-var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n\n  ", "\n  \n  font-weight: 300 !important;\n  line-height: 24px !important;\n  \n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n    ", "\n  }\n"])), function (props) {
-  return props.color || _styles.COLORS.black;
+var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n    ", "\n  }\n"])), function (props) {
+  return props.$color || _styles.COLORS.black;
 }, function (props) {
-  return props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black);
+  return props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
-  return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color || _styles.COLORS.black);
+  return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
 });
 
 var BetaTag = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ", "\n"])), function (props) {
   return props.backgroundColor || _styles.COLORS.accent2_500;
 }, function (props) {
-  return (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.color || _styles.COLORS.white);
+  return (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.$color || _styles.COLORS.white);
 });
 
 var Logo = function Logo(_ref) {
@@ -70,13 +70,13 @@ var Logo = function Logo(_ref) {
         _onClick();
       }
     },
-    color: color
+    $color: color
   }, color === _styles.COLORS.white ? /*#__PURE__*/React.createElement(_assets.LaerdalWhiteLogo, null) : /*#__PURE__*/React.createElement(_assets.LaerdalLogo, null), /*#__PURE__*/React.createElement(Name, {
-    color: color,
+    $color: color,
     noSizeChangeOnMobile: noSizeChangeOnMobile || false
   }, name), showBetaTag && /*#__PURE__*/React.createElement(BetaTag, {
     backgroundColor: betaTagBackgroundColor,
-    color: betaTagColor
+    $color: betaTagColor
   }, "BETA")));
 };
 

package/dist/js/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,iVAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,uYAQfJ,oBAAYC,MARG,CAAnB;;AAmBA,IAAMI,IAAI,GAAGF,0BAAOG,IAAV,8UAGiB,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAAjC;AAAA,CAHjB,EAMN,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACW,oBAAN,GACH,mCAAkBC,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAApE,CADG,GAEH,oCAAmBE,2BAAmBC,OAAtC,EAA+Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAArE,CAFR;AAAA,CANM,EAaNR,oBAAYC,MAbN,EAgBJ,UAACH,KAAD;AAAA,SAAW,mCAAkBY,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAApE,CAAX;AAAA,CAhBI,CAAV;;AAoBA,IAAMI,OAAO,GAAGT,0BAAOG,IAAV,0NACS,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACe,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAChB,KAAD;AAAA,SAAW,oCAAmBY,2BAAmBK,aAAtC,EAAqDjB,KAAK,CAACC,KAAN,IAAeQ,eAAOS,KAA3E,CAAX;AAAA,CARS,CAAb;;AAsBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAqJ;AAAA,MAAlJC,IAAkJ,QAAlJA,IAAkJ;AAAA,MAA5IC,WAA4I,QAA5IA,WAA4I;AAAA,MAA/HC,QAA+H,QAA/HA,OAA+H;AAAA,MAAtHC,EAAsH,QAAtHA,EAAsH;AAAA,MAAlHtB,KAAkH,QAAlHA,KAAkH;AAAA,MAA3GU,oBAA2G,QAA3GA,oBAA2G;AAAA,MAArFa,sBAAqF,QAArFA,sBAAqF;AAAA,MAA7DC,YAA6D,QAA7DA,YAA6D;AAChK,sBACE,oBAAC,aAAD,qBACE,oBAAC,UAAD;AACE,IAAA,EAAE,EAAEF,EAAE,IAAI,GADZ;AAEE,IAAA,WAAW,EAAE,qBAACG,CAAD;AAAA,aAAYA,CAAC,CAACC,cAAF,EAAZ;AAAA,KAFf;AAGE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIL,QAAJ,EAAa;AACXA,QAAAA,QAAO;AACR;AACF,KAPH;AAQE,IAAA,KAAK,EAAErB;AART,KASGA,KAAK,KAAKQ,eAAOS,KAAjB,gBAAyB,oBAAC,wBAAD,OAAzB,gBAAgD,oBAAC,mBAAD,OATnD,eAUE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEjB,KAAb;AAAoB,IAAA,oBAAoB,EAAEU,oBAAoB,IAAI;AAAlE,KACGS,IADH,CAVF,EAaGC,WAAW,iBACV,oBAAC,OAAD;AAAS,IAAA,eAAe,EAAEG,sBAA1B;AAAkD,IAAA,KAAK,EAAEC;AAAzD,YAdJ,CADF,CADF;AAuBD,CAxBD;;;AAVEL,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAtB,EAAAA,K;AACAU,EAAAA,oB;AACAa,EAAAA,sB;AACAC,EAAAA,Y;;eA6BaN,I","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {LaerdalLogo, LaerdalWhiteLogo} from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentXSStyling} from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) => props.noSizeChangeOnMobile\n          ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)\n          : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  \n  font-weight: 300 !important;\n  line-height: 24px !important;\n  \n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,iVAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,uYAQfJ,oBAAYC,MARG,CAAnB;;AAmBA,IAAMI,IAAI,GAAGF,0BAAOG,IAAV,0UAGiB,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAAlC;AAAA,CAHjB,EAMN,UAACV,KAAD;AAAA,SACAA,KAAK,CAACW,oBAAN,GACI,mCAAkBC,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAArE,CADJ,GAEI,oCAAmBE,2BAAmBC,OAAtC,EAA+Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAAtE,CAHJ;AAAA,CANM,EAcNR,oBAAYC,MAdN,EAiBJ,UAACH,KAAD;AAAA,SAAW,mCAAkBY,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAArE,CAAX;AAAA,CAjBI,CAAV;;AAqBA,IAAMI,OAAO,GAAGT,0BAAOG,IAAV,0NACS,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACe,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAChB,KAAD;AAAA,SAAW,oCAAmBY,2BAAmBK,aAAtC,EAAqDjB,KAAK,CAACC,MAAN,IAAgBQ,eAAOS,KAA5E,CAAX;AAAA,CARS,CAAb;;AAsBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAqJ;AAAA,MAAlJC,IAAkJ,QAAlJA,IAAkJ;AAAA,MAA5IC,WAA4I,QAA5IA,WAA4I;AAAA,MAA/HC,QAA+H,QAA/HA,OAA+H;AAAA,MAAtHC,EAAsH,QAAtHA,EAAsH;AAAA,MAAlHC,KAAkH,QAAlHA,KAAkH;AAAA,MAA3Gb,oBAA2G,QAA3GA,oBAA2G;AAAA,MAArFc,sBAAqF,QAArFA,sBAAqF;AAAA,MAA7DC,YAA6D,QAA7DA,YAA6D;AAChK,sBACE,oBAAC,aAAD,qBACE,oBAAC,UAAD;AACE,IAAA,EAAE,EAAEH,EAAE,IAAI,GADZ;AAEE,IAAA,WAAW,EAAE,qBAACI,CAAD;AAAA,aAAYA,CAAC,CAACC,cAAF,EAAZ;AAAA,KAFf;AAGE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIN,QAAJ,EAAa;AACXA,QAAAA,QAAO;AACR;AACF,KAPH;AAQE,IAAA,MAAM,EAAEE;AARV,KASGA,KAAK,KAAKf,eAAOS,KAAjB,gBAAyB,oBAAC,wBAAD,OAAzB,gBAAgD,oBAAC,mBAAD,OATnD,eAUE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAEM,KAAd;AAAqB,IAAA,oBAAoB,EAAEb,oBAAoB,IAAI;AAAnE,KACGS,IADH,CAVF,EAaGC,WAAW,iBACV,oBAAC,OAAD;AAAS,IAAA,eAAe,EAAEI,sBAA1B;AAAkD,IAAA,MAAM,EAAEC;AAA1D,YAdJ,CADF,CADF;AAuBD,CAxBD;;;AAVEN,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAC,EAAAA,K;AACAb,EAAAA,oB;AACAc,EAAAA,sB;AACAC,EAAAA,Y;;eA6BaP,I","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}