@laerdal/life-react-components 3.6.0 → 3.6.1

package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FooterNewsletterAndSocialSection.cjs","names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","ComponentXXSStyling","ComponentTextStyle","Regular","COLORS","white","NewsletterEmail","InputFieldStyling","invertedFocusStyles","NewsletterButton","button","ComponentLStyling","Bold","SocialMedia","ComponentXSStyling","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\r\nimport {TextField} from '../../InputFields';\r\nimport {SystemIcons} from '../../icons';\r\nimport {IconButton} from '../../Button';\r\nimport {\r\n  ComponentLStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../../styles';\r\nimport {InputFieldStyling} from '../../InputFields';\r\n\r\nconst NewsletterAndSocial = styled.section`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin-bottom: 16px;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    flex-direction: row;\r\n  }\r\n`;\r\n\r\nconst NewsletterEmailSection = styled.div`\r\n  width: 100%;\r\n  margin: 16px auto 0 auto;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 60%;\r\n    margin: 16px 0 0 0;\r\n  }\r\n\r\n  label {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\r\n    margin-bottom: 2px;\r\n  }\r\n  div div {\r\n    width: 100%;\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      width: calc(100% - 82px);\r\n      width: 288px;\r\n    }\r\n  }\r\n  input {\r\n    height: 48px;\r\n  }\r\n`;\r\n\r\nconst NewsletterEmail = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: 2px auto 0;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 2px 0 0 0;\r\n    flex-direction: row;\r\n  }\r\n\r\n  ${InputFieldStyling} {\r\n    &.focus-visible {\r\n      ${invertedFocusStyles}\r\n    }\r\n  }\r\n`;\r\n\r\nconst NewsletterButton = styled.button`\r\n  background: transparent;\r\n  width: 100%;\r\n  height: 40px;\r\n  border: 2px solid ${COLORS.white};\r\n  box-sizing: border-box;\r\n  border-radius: 8px;\r\n  margin: 8px 0 4px 0;\r\n\r\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 94px;\r\n    margin: auto 0 4px 8px;\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n  \r\n  &:focus {\r\n    ${invertedFocusStyles}\r\n  }\r\n`;\r\n\r\nconst SocialMedia = styled.div`\r\n  color: ${COLORS.white};\r\n  margin: 0 auto;\r\n\r\n  button div {\r\n    box-sizing: border-box;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  h4 {\r\n    margin-top: 16px;\r\n    margin-bottom: 8px;\r\n    \r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 0 0 auto;\r\n    button {\r\n      margin: 0 0 0 12px;\r\n    }\r\n  }\r\n`;\r\n\r\nconst SocialMediaButtons = styled.div`\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  button div {\r\n    display: flex;\r\n    background-color: transparent;\r\n    color: ${COLORS.white};\r\n    margin: 0 0 0 20px;\r\n\r\n    svg {\r\n      fill: ${COLORS.white};\r\n      path {\r\n        fill: ${COLORS.white};\r\n      }\r\n    }\r\n\r\n    &:first-child {\r\n      margin: 0;\r\n    }\r\n    &:hover {\r\n      background-color: ${COLORS.white};\r\n      color: ${COLORS.neutral_600};\r\n    }\r\n    &:active {\r\n      background-color: ${COLORS.primary_800};\r\n      color: ${COLORS.primary_100};\r\n    }\r\n  }\r\n  a {\r\n    &:focus {\r\n      ${invertedFocusStyles}\r\n    }\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    justify-content: flex-end;\r\n  }\r\n`;\r\n\r\ninterface FooterNewsletterAndSocialSection {\r\n  actionOnNewsletterSignup?: (email: string) => void;\r\n  newsletterLabel: string;\r\n  placeholderEmail?: string;\r\n}\r\n\r\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\r\n  const [emailInput, setEmailInput] = React.useState<string>('');\r\n  return (\r\n    <NewsletterAndSocial>\r\n      <NewsletterEmailSection>\r\n        <label>{newsletterLabel}</label>\r\n        <NewsletterEmail>\r\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\r\n          <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\r\n        </NewsletterEmail>\r\n      </NewsletterEmailSection>\r\n      <SocialMedia>\r\n        <h4>Follow us on social media</h4>\r\n        <SocialMediaButtons>\r\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n              <SystemIcons.Facebook />\r\n            </IconButton>\r\n          </a>\r\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n              <SystemIcons.Twitter />\r\n            </IconButton>\r\n          </a>\r\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n              <SystemIcons.Youtube />\r\n            </IconButton>\r\n          </a>\r\n        </SocialMediaButtons>\r\n      </SocialMedia>\r\n    </NewsletterAndSocial>\r\n  );\r\n};\r\n\r\nexport default FooterNewsletterAndSocialSection;\r\n"],"mappings":"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"}
+{"version":3,"file":"FooterNewsletterAndSocialSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styles","_InputFields","_icons","_Button","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NewsletterAndSocial","styled","section","_taggedTemplateLiteral2","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","props","ComponentXXSStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","NewsletterEmail","InputFieldStyling","invertedFocusStyles","NewsletterButton","button","ComponentLStyling","Bold","SocialMedia","ComponentXSStyling","SocialMediaButtons","FooterNewsletterAndSocialSection","_ref","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","_React$useState","useState","_React$useState2","_slicedToArray2","emailInput","setEmailInput","jsxs","children","jsx","TextField","id","withoutBorder","placeholder","value","onChange","onClick","target","href","rel","IconButton","variant","action","tabIndex","SystemIcons","Facebook","Twitter","Youtube","propTypes","_propTypes","func","string","isRequired","_default","exports"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\r\nimport {TextField} from '../../InputFields';\r\nimport {SystemIcons} from '../../icons';\r\nimport {IconButton} from '../../Button';\r\nimport {\r\n  ComponentLStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../../styles';\r\nimport {InputFieldStyling} from '../../InputFields';\r\n\r\nconst NewsletterAndSocial = styled.section`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin-bottom: 16px;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    flex-direction: row;\r\n  }\r\n`;\r\n\r\nconst NewsletterEmailSection = styled.div`\r\n  width: 100%;\r\n  margin: 16px auto 0 auto;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 60%;\r\n    margin: 16px 0 0 0;\r\n  }\r\n\r\n  label {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme))}\r\n    margin-bottom: 2px;\r\n  }\r\n  div div {\r\n    width: 100%;\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      width: calc(100% - 82px);\r\n      width: 288px;\r\n    }\r\n  }\r\n  input {\r\n    height: 48px;\r\n  }\r\n`;\r\n\r\nconst NewsletterEmail = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: 2px auto 0;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 2px 0 0 0;\r\n    flex-direction: row;\r\n  }\r\n\r\n  ${InputFieldStyling} {\r\n    &.focus-visible {\r\n      ${invertedFocusStyles}\r\n    }\r\n  }\r\n`;\r\n\r\nconst NewsletterButton = styled.button`\r\n  background: transparent;\r\n  width: 100%;\r\n  height: 40px;\r\n  border: 2px solid ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  border-radius: 8px;\r\n  margin: 8px 0 4px 0;\r\n\r\n  ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('white', props.theme))}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 94px;\r\n    margin: auto 0 4px 8px;\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n  \r\n  &:focus {\r\n    ${invertedFocusStyles}\r\n  }\r\n`;\r\n\r\nconst SocialMedia = styled.div`\r\n  color: ${props => COLORS.getColor('white', props.theme)};\r\n  margin: 0 auto;\r\n\r\n  button div {\r\n    box-sizing: border-box;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  h4 {\r\n    margin-top: 16px;\r\n    margin-bottom: 8px;\r\n    \r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 0 0 auto;\r\n    button {\r\n      margin: 0 0 0 12px;\r\n    }\r\n  }\r\n`;\r\n\r\nconst SocialMediaButtons = styled.div`\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  button div {\r\n    display: flex;\r\n    background-color: transparent;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n    margin: 0 0 0 20px;\r\n\r\n    svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n      path {\r\n        fill: ${props => COLORS.getColor('white', props.theme)};\r\n      }\r\n    }\r\n\r\n    &:first-child {\r\n      margin: 0;\r\n    }\r\n    &:hover {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n    }\r\n    &:active {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n  a {\r\n    &:focus {\r\n      ${invertedFocusStyles}\r\n    }\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    justify-content: flex-end;\r\n  }\r\n`;\r\n\r\ninterface FooterNewsletterAndSocialSection {\r\n  actionOnNewsletterSignup?: (email: string) => void;\r\n  newsletterLabel: string;\r\n  placeholderEmail?: string;\r\n}\r\n\r\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\r\n  const [emailInput, setEmailInput] = React.useState<string>('');\r\n  return (\r\n    <NewsletterAndSocial>\r\n      <NewsletterEmailSection>\r\n        <label>{newsletterLabel}</label>\r\n        <NewsletterEmail>\r\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\r\n          <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\r\n        </NewsletterEmail>\r\n      </NewsletterEmailSection>\r\n      <SocialMedia>\r\n        <h4>Follow us on social media</h4>\r\n        <SocialMediaButtons>\r\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n              <SystemIcons.Facebook />\r\n            </IconButton>\r\n          </a>\r\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n              <SystemIcons.Twitter />\r\n            </IconButton>\r\n          </a>\r\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n              <SystemIcons.Youtube />\r\n            </IconButton>\r\n          </a>\r\n        </SocialMediaButtons>\r\n      </SocialMedia>\r\n    </NewsletterAndSocial>\r\n  );\r\n};\r\n\r\nexport default FooterNewsletterAndSocialSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Footer/Components/FooterNewsletterAndSocialSection.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 interface FooterNewsletterAndSocialSection {
     actionOnNewsletterSignup?: (email: string) => void;
     newsletterLabel: string;
     placeholderEmail?: string;
 }
-declare const FooterNewsletterAndSocialSection: ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => JSX.Element;
+declare const FooterNewsletterAndSocialSection: ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => React.JSX.Element;
 export default FooterNewsletterAndSocialSection;

package/dist/Footer/Components/FooterNewsletterAndSocialSection.js

@@ -13,11 +13,33 @@ import { InputFieldStyling } from '../../InputFields';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var NewsletterAndSocial = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ", " {\n    flex-direction: row;\n  }\n"])), BREAKPOINTS.MEDIUM);
-var NewsletterEmailSection = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ", " {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ", "\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ", " {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n"])), BREAKPOINTS.MEDIUM, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white), BREAKPOINTS.MEDIUM);
+var NewsletterEmailSection = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ", " {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ", "\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ", " {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n"])), BREAKPOINTS.MEDIUM, function (props) {
+  return ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme));
+}, BREAKPOINTS.MEDIUM);
 var NewsletterEmail = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ", " {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ", " {\n    &.focus-visible {\n      ", "\n    }\n  }\n"])), BREAKPOINTS.MEDIUM, InputFieldStyling, invertedFocusStyles);
-var NewsletterButton = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ", "\n\n  ", " {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ", "\n  }\n"])), COLORS.white, ComponentLStyling(ComponentTextStyle.Bold, COLORS.white), BREAKPOINTS.MEDIUM, invertedFocusStyles);
-var SocialMedia = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ", "\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"])), COLORS.white, ComponentXSStyling(ComponentTextStyle.Regular, 'inherit'), BREAKPOINTS.MEDIUM);
-var SocialMediaButtons = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      ", "\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"])), COLORS.white, COLORS.white, COLORS.white, COLORS.white, COLORS.neutral_600, COLORS.primary_800, COLORS.primary_100, invertedFocusStyles, BREAKPOINTS.MEDIUM);
+var NewsletterButton = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ", "\n\n  ", " {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ", "\n  }\n"])), function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('white', props.theme));
+}, BREAKPOINTS.MEDIUM, invertedFocusStyles);
+var SocialMedia = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ", "\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"])), function (props) {
+  return COLORS.getColor('white', props.theme);
+}, ComponentXSStyling(ComponentTextStyle.Regular, 'inherit'), BREAKPOINTS.MEDIUM);
+var SocialMediaButtons = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      ", "\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"])), function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_600', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, invertedFocusStyles, BREAKPOINTS.MEDIUM);
 var FooterNewsletterAndSocialSection = function FooterNewsletterAndSocialSection(_ref) {
   var actionOnNewsletterSignup = _ref.actionOnNewsletterSignup,
     newsletterLabel = _ref.newsletterLabel,

package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"FooterNewsletterAndSocialSection.js","names":["React","styled","BREAKPOINTS","COLORS","invertedFocusStyles","TextField","SystemIcons","IconButton","ComponentLStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","InputFieldStyling","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","Regular","white","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","useState","emailInput","setEmailInput","value","e","target"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\r\nimport {TextField} from '../../InputFields';\r\nimport {SystemIcons} from '../../icons';\r\nimport {IconButton} from '../../Button';\r\nimport {\r\n  ComponentLStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../../styles';\r\nimport {InputFieldStyling} from '../../InputFields';\r\n\r\nconst NewsletterAndSocial = styled.section`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin-bottom: 16px;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    flex-direction: row;\r\n  }\r\n`;\r\n\r\nconst NewsletterEmailSection = styled.div`\r\n  width: 100%;\r\n  margin: 16px auto 0 auto;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 60%;\r\n    margin: 16px 0 0 0;\r\n  }\r\n\r\n  label {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\r\n    margin-bottom: 2px;\r\n  }\r\n  div div {\r\n    width: 100%;\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      width: calc(100% - 82px);\r\n      width: 288px;\r\n    }\r\n  }\r\n  input {\r\n    height: 48px;\r\n  }\r\n`;\r\n\r\nconst NewsletterEmail = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: 2px auto 0;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 2px 0 0 0;\r\n    flex-direction: row;\r\n  }\r\n\r\n  ${InputFieldStyling} {\r\n    &.focus-visible {\r\n      ${invertedFocusStyles}\r\n    }\r\n  }\r\n`;\r\n\r\nconst NewsletterButton = styled.button`\r\n  background: transparent;\r\n  width: 100%;\r\n  height: 40px;\r\n  border: 2px solid ${COLORS.white};\r\n  box-sizing: border-box;\r\n  border-radius: 8px;\r\n  margin: 8px 0 4px 0;\r\n\r\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 94px;\r\n    margin: auto 0 4px 8px;\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n  \r\n  &:focus {\r\n    ${invertedFocusStyles}\r\n  }\r\n`;\r\n\r\nconst SocialMedia = styled.div`\r\n  color: ${COLORS.white};\r\n  margin: 0 auto;\r\n\r\n  button div {\r\n    box-sizing: border-box;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  h4 {\r\n    margin-top: 16px;\r\n    margin-bottom: 8px;\r\n    \r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 0 0 auto;\r\n    button {\r\n      margin: 0 0 0 12px;\r\n    }\r\n  }\r\n`;\r\n\r\nconst SocialMediaButtons = styled.div`\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  button div {\r\n    display: flex;\r\n    background-color: transparent;\r\n    color: ${COLORS.white};\r\n    margin: 0 0 0 20px;\r\n\r\n    svg {\r\n      fill: ${COLORS.white};\r\n      path {\r\n        fill: ${COLORS.white};\r\n      }\r\n    }\r\n\r\n    &:first-child {\r\n      margin: 0;\r\n    }\r\n    &:hover {\r\n      background-color: ${COLORS.white};\r\n      color: ${COLORS.neutral_600};\r\n    }\r\n    &:active {\r\n      background-color: ${COLORS.primary_800};\r\n      color: ${COLORS.primary_100};\r\n    }\r\n  }\r\n  a {\r\n    &:focus {\r\n      ${invertedFocusStyles}\r\n    }\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    justify-content: flex-end;\r\n  }\r\n`;\r\n\r\ninterface FooterNewsletterAndSocialSection {\r\n  actionOnNewsletterSignup?: (email: string) => void;\r\n  newsletterLabel: string;\r\n  placeholderEmail?: string;\r\n}\r\n\r\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\r\n  const [emailInput, setEmailInput] = React.useState<string>('');\r\n  return (\r\n    <NewsletterAndSocial>\r\n      <NewsletterEmailSection>\r\n        <label>{newsletterLabel}</label>\r\n        <NewsletterEmail>\r\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\r\n          <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\r\n        </NewsletterEmail>\r\n      </NewsletterEmailSection>\r\n      <SocialMedia>\r\n        <h4>Follow us on social media</h4>\r\n        <SocialMediaButtons>\r\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n              <SystemIcons.Facebook />\r\n            </IconButton>\r\n          </a>\r\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n              <SystemIcons.Twitter />\r\n            </IconButton>\r\n          </a>\r\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n              <SystemIcons.Youtube />\r\n            </IconButton>\r\n          </a>\r\n        </SocialMediaButtons>\r\n      </SocialMedia>\r\n    </NewsletterAndSocial>\r\n  );\r\n};\r\n\r\nexport default FooterNewsletterAndSocialSection;\r\n"],"mappings":"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"}
+{"version":3,"file":"FooterNewsletterAndSocialSection.js","names":["React","styled","BREAKPOINTS","COLORS","invertedFocusStyles","TextField","SystemIcons","IconButton","ComponentLStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","InputFieldStyling","jsx","_jsx","jsxs","_jsxs","NewsletterAndSocial","section","_templateObject","_taggedTemplateLiteral","MEDIUM","NewsletterEmailSection","div","_templateObject2","props","Regular","getColor","theme","NewsletterEmail","_templateObject3","NewsletterButton","button","_templateObject4","Bold","SocialMedia","_templateObject5","SocialMediaButtons","_templateObject6","FooterNewsletterAndSocialSection","_ref","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","_React$useState","useState","_React$useState2","_slicedToArray","emailInput","setEmailInput","children","id","withoutBorder","placeholder","value","onChange","onClick","e","target","href","rel","variant","action","tabIndex","Facebook","Twitter","Youtube","propTypes","_pt","func","string","isRequired"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\r\nimport {TextField} from '../../InputFields';\r\nimport {SystemIcons} from '../../icons';\r\nimport {IconButton} from '../../Button';\r\nimport {\r\n  ComponentLStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../../styles';\r\nimport {InputFieldStyling} from '../../InputFields';\r\n\r\nconst NewsletterAndSocial = styled.section`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin-bottom: 16px;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    flex-direction: row;\r\n  }\r\n`;\r\n\r\nconst NewsletterEmailSection = styled.div`\r\n  width: 100%;\r\n  margin: 16px auto 0 auto;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 60%;\r\n    margin: 16px 0 0 0;\r\n  }\r\n\r\n  label {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('white', props.theme))}\r\n    margin-bottom: 2px;\r\n  }\r\n  div div {\r\n    width: 100%;\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      width: calc(100% - 82px);\r\n      width: 288px;\r\n    }\r\n  }\r\n  input {\r\n    height: 48px;\r\n  }\r\n`;\r\n\r\nconst NewsletterEmail = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: 2px auto 0;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 2px 0 0 0;\r\n    flex-direction: row;\r\n  }\r\n\r\n  ${InputFieldStyling} {\r\n    &.focus-visible {\r\n      ${invertedFocusStyles}\r\n    }\r\n  }\r\n`;\r\n\r\nconst NewsletterButton = styled.button`\r\n  background: transparent;\r\n  width: 100%;\r\n  height: 40px;\r\n  border: 2px solid ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  border-radius: 8px;\r\n  margin: 8px 0 4px 0;\r\n\r\n  ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('white', props.theme))}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 94px;\r\n    margin: auto 0 4px 8px;\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n  \r\n  &:focus {\r\n    ${invertedFocusStyles}\r\n  }\r\n`;\r\n\r\nconst SocialMedia = styled.div`\r\n  color: ${props => COLORS.getColor('white', props.theme)};\r\n  margin: 0 auto;\r\n\r\n  button div {\r\n    box-sizing: border-box;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  h4 {\r\n    margin-top: 16px;\r\n    margin-bottom: 8px;\r\n    \r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 0 0 auto;\r\n    button {\r\n      margin: 0 0 0 12px;\r\n    }\r\n  }\r\n`;\r\n\r\nconst SocialMediaButtons = styled.div`\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  button div {\r\n    display: flex;\r\n    background-color: transparent;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n    margin: 0 0 0 20px;\r\n\r\n    svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n      path {\r\n        fill: ${props => COLORS.getColor('white', props.theme)};\r\n      }\r\n    }\r\n\r\n    &:first-child {\r\n      margin: 0;\r\n    }\r\n    &:hover {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n    }\r\n    &:active {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n  a {\r\n    &:focus {\r\n      ${invertedFocusStyles}\r\n    }\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    justify-content: flex-end;\r\n  }\r\n`;\r\n\r\ninterface FooterNewsletterAndSocialSection {\r\n  actionOnNewsletterSignup?: (email: string) => void;\r\n  newsletterLabel: string;\r\n  placeholderEmail?: string;\r\n}\r\n\r\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\r\n  const [emailInput, setEmailInput] = React.useState<string>('');\r\n  return (\r\n    <NewsletterAndSocial>\r\n      <NewsletterEmailSection>\r\n        <label>{newsletterLabel}</label>\r\n        <NewsletterEmail>\r\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\r\n          <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\r\n        </NewsletterEmail>\r\n      </NewsletterEmailSection>\r\n      <SocialMedia>\r\n        <h4>Follow us on social media</h4>\r\n        <SocialMediaButtons>\r\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n              <SystemIcons.Facebook />\r\n            </IconButton>\r\n          </a>\r\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n              <SystemIcons.Twitter />\r\n            </IconButton>\r\n          </a>\r\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\r\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\r\n              <SystemIcons.Youtube />\r\n            </IconButton>\r\n          </a>\r\n        </SocialMediaButtons>\r\n      </SocialMedia>\r\n    </NewsletterAndSocial>\r\n  );\r\n};\r\n\r\nexport default FooterNewsletterAndSocialSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Footer/Components/FooterTop.cjs

@@ -5,25 +5,38 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _animatedScrollTo = _interopRequireDefault(require("animated-scroll-to"));
 var _styles = require("../../styles");
 var _Logo = _interopRequireDefault(require("../../GlobalNavigationBar/Logo"));
 var _icons = require("../../icons");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
-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; }
-var FooterTopSection = _styledComponents.default.section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n"])));
-var ToTop = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ", "\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n\n  &:focus:not(:disabled) {\n    ", "\n  }\n\n  &:active:not(:disabled) {\n    background: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, 'inherit'), _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.invertedFocusStyles, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800);
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var FooterTopSection = _styledComponents["default"].section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n"])));
+var ToTop = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ", "\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n\n  &:focus:not(:disabled) {\n    ", "\n  }\n\n  &:active:not(:disabled) {\n    background: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, 'inherit'), function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, _styles.invertedFocusStyles, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+});
 var FooterTop = function FooterTop(_ref) {
   var sitename = _ref.sitename,
     showBetaTag = _ref.showBetaTag,
     toTopText = _ref.toTopText;
+  var theme = (0, _styledComponents.useTheme)();
   var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -33,16 +46,16 @@ var FooterTop = function FooterTop(_ref) {
     return false;
   };
   var action = function action() {
-    (0, _animatedScrollTo.default)(0);
+    (0, _animatedScrollTo["default"])(0);
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FooterTopSection, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo["default"], {
       name: sitename || '',
       showBetaTag: showBetaTag,
-      color: _styles.COLORS.white,
+      color: _styles.COLORS.getColor('white', theme),
       inverted: true,
-      betaTagBackgroundColor: _styles.COLORS.white,
-      betaTagColor: _styles.COLORS.neutral_800
+      betaTagBackgroundColor: _styles.COLORS.getColor('white', theme),
+      betaTagColor: _styles.COLORS.getColor('neutral_800', theme)
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToTop, {
       "data-testid": 'toTopNavigation',
       tabIndex: 0,
@@ -52,7 +65,7 @@ var FooterTop = function FooterTop(_ref) {
       onClick: action,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowLineUp, {
         size: "24px",
-        color: _styles.COLORS.white
+        color: _styles.COLORS.getColor('white', theme)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: toTopText
       })]
@@ -60,10 +73,10 @@ var FooterTop = function FooterTop(_ref) {
   });
 };
 FooterTop.propTypes = {
-  sitename: _propTypes.default.string,
-  showBetaTag: _propTypes.default.bool,
-  toTopText: _propTypes.default.string.isRequired
+  sitename: _propTypes["default"].string,
+  showBetaTag: _propTypes["default"].bool,
+  toTopText: _propTypes["default"].string.isRequired
 };
 var _default = FooterTop;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=FooterTop.cjs.map

package/dist/Footer/Components/FooterTop.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FooterTop.cjs","names":["FooterTopSection","styled","section","ToTop","div","ComponentXSStyling","ComponentTextStyle","UppercaseBold","COLORS","primary_20","primary_700","invertedFocusStyles","primary_100","primary_800","FooterTop","sitename","showBetaTag","toTopText","isPressingEnter","e","key","preventDefault","stopPropagation","action","animateScrollTo","white","neutral_800"],"sources":["../../../src/Footer/Components/FooterTop.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport animateScrollTo from 'animated-scroll-to';\r\n\r\nimport {COLORS, invertedFocusStyles} from '../../styles';\r\nimport Logo from '../../GlobalNavigationBar/Logo';\r\nimport {SystemIcons} from '../../icons';\r\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\n\r\nconst FooterTopSection = styled.section`\r\n  min-height: 8px;\r\n  color: white;\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin-bottom: 16px;\r\n`;\r\n\r\nconst ToTop = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: auto 0 auto auto;\r\n  border-radius: 4px;\r\n  height: 48px;\r\n  width: 48px;\r\n  padding: 8px;\r\n\r\n  svg {\r\n    margin: 0 auto;\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n  span {\r\n    margin: 14px auto 0 auto;\r\n    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\r\n  }\r\n\r\n  &:hover:not(:disabled) {\r\n    background-color: ${COLORS.primary_20};\r\n    svg path,\r\n    svg {\r\n      fill: ${COLORS.primary_700};\r\n    }\r\n    span {\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &:focus:not(:disabled) {\r\n    ${invertedFocusStyles}\r\n  }\r\n\r\n  &:active:not(:disabled) {\r\n    background: ${COLORS.primary_100};\r\n    svg path,\r\n    svg {\r\n      fill: ${COLORS.primary_800};\r\n    }\r\n    span {\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n`;\r\n\r\ninterface FooterTopProps {\r\n  sitename?: string;\r\n  showBetaTag?: boolean;\r\n  toTopText: string;\r\n}\r\n\r\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n  const action = () => {\r\n    animateScrollTo(0);\r\n  };\r\n  return (\r\n    <FooterTopSection>\r\n      <Logo\r\n        name={sitename || ''}\r\n        showBetaTag={showBetaTag}\r\n        color={COLORS.white}\r\n        inverted={true}\r\n        betaTagBackgroundColor={COLORS.white}\r\n        betaTagColor={COLORS.neutral_800}\r\n      />\r\n      <ToTop data-testid={'toTopNavigation'} tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\r\n        <SystemIcons.ArrowLineUp size=\"24px\" color={COLORS.white} />\r\n        <span>{toTopText}</span>\r\n      </ToTop>\r\n    </FooterTopSection>\r\n  );\r\n};\r\n\r\nexport default FooterTop;\r\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAGxC,IAAMA,gBAAgB,GAAGC,yBAAM,CAACC,OAAO,4LAMtC;AAED,IAAMC,KAAK,GAAGF,yBAAM,CAACG,GAAG,gtBAkBlB,IAAAC,0BAAkB,EAACC,0BAAkB,CAACC,aAAa,EAAE,SAAS,CAAC,EAI7CC,cAAM,CAACC,UAAU,EAG3BD,cAAM,CAACE,WAAW,EAGjBF,cAAM,CAACE,WAAW,EAK3BC,2BAAmB,EAIPH,cAAM,CAACI,WAAW,EAGtBJ,cAAM,CAACK,WAAW,EAGjBL,cAAM,CAACK,WAAW,CAGhC;AAQD,IAAMC,SAAS,GAAG,SAAZA,SAAS,OAA6D;EAAA,IAAvDC,QAAQ,QAARA,QAAQ;IAAEC,WAAW,QAAXA,WAAW;IAAEC,SAAS,QAATA,SAAS;EACnD,IAAMC,eAAe,GAAG,SAAlBA,eAAe,CAAIC,CAAM,EAAK;IAClC,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;MACrBD,CAAC,CAACE,cAAc,EAAE;MAClBF,CAAC,CAACG,eAAe,EAAE;MACnB,OAAO,IAAI;IACb;IACA,OAAO,KAAK;EACd,CAAC;EACD,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB,IAAAC,yBAAe,EAAC,CAAC,CAAC;EACpB,CAAC;EACD,oBACE,sBAAC,gBAAgB;IAAA,wBACf,qBAAC,aAAI;MACH,IAAI,EAAET,QAAQ,IAAI,EAAG;MACrB,WAAW,EAAEC,WAAY;MACzB,KAAK,EAAER,cAAM,CAACiB,KAAM;MACpB,QAAQ,EAAE,IAAK;MACf,sBAAsB,EAAEjB,cAAM,CAACiB,KAAM;MACrC,YAAY,EAAEjB,cAAM,CAACkB;IAAY,EACjC,eACF,sBAAC,KAAK;MAAC,eAAa,iBAAkB;MAAC,QAAQ,EAAE,CAAE;MAAC,SAAS,EAAE,mBAACP,CAAM;QAAA,OAAMD,eAAe,CAACC,CAAC,CAAC,GAAGI,MAAM,EAAE,GAAG,IAAI;MAAA,CAAE;MAAC,OAAO,EAAEA,MAAO;MAAA,wBACjI,qBAAC,kBAAW,CAAC,WAAW;QAAC,IAAI,EAAC,MAAM;QAAC,KAAK,EAAEf,cAAM,CAACiB;MAAM,EAAG,eAC5D;QAAA,UAAOR;MAAS,EAAQ;IAAA,EAClB;EAAA,EACS;AAEvB,CAAC;AAAC;EAjCAF,QAAQ;EACRC,WAAW;EACXC,SAAS;AAAA;AAAA,eAiCIH,SAAS;AAAA"}
+{"version":3,"file":"FooterTop.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_animatedScrollTo","_interopRequireDefault","_styles","_Logo","_icons","_jsxRuntime","_templateObject","_templateObject2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FooterTopSection","styled","section","_taggedTemplateLiteral2","ToTop","div","ComponentXSStyling","ComponentTextStyle","UppercaseBold","props","COLORS","getColor","theme","invertedFocusStyles","FooterTop","_ref","sitename","showBetaTag","toTopText","useTheme","isPressingEnter","key","preventDefault","stopPropagation","action","animateScrollTo","jsxs","children","jsx","name","color","inverted","betaTagBackgroundColor","betaTagColor","tabIndex","onKeyDown","onClick","SystemIcons","ArrowLineUp","size","propTypes","_propTypes","string","bool","isRequired","_default","exports"],"sources":["../../../src/Footer/Components/FooterTop.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport animateScrollTo from 'animated-scroll-to';\r\n\r\nimport {COLORS, invertedFocusStyles} from '../../styles';\r\nimport Logo from '../../GlobalNavigationBar/Logo';\r\nimport {SystemIcons} from '../../icons';\r\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\n\r\nconst FooterTopSection = styled.section`\r\n  min-height: 8px;\r\n  color: white;\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin-bottom: 16px;\r\n`;\r\n\r\nconst ToTop = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: auto 0 auto auto;\r\n  border-radius: 4px;\r\n  height: 48px;\r\n  width: 48px;\r\n  padding: 8px;\r\n\r\n  svg {\r\n    margin: 0 auto;\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n  span {\r\n    margin: 14px auto 0 auto;\r\n    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\r\n  }\r\n\r\n  &:hover:not(:disabled) {\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    svg path,\r\n    svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    span {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus:not(:disabled) {\r\n    ${invertedFocusStyles}\r\n  }\r\n\r\n  &:active:not(:disabled) {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    svg path,\r\n    svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    span {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\ninterface FooterTopProps {\r\n  sitename?: string;\r\n  showBetaTag?: boolean;\r\n  toTopText: string;\r\n}\r\n\r\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\r\n  const theme = useTheme();\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n  const action = () => {\r\n    animateScrollTo(0);\r\n  };\r\n  return (\r\n    <FooterTopSection>\r\n      <Logo\r\n        name={sitename || ''}\r\n        showBetaTag={showBetaTag}\r\n        color={COLORS.getColor('white', theme)}\r\n        inverted={true}\r\n        betaTagBackgroundColor={COLORS.getColor('white', theme)}\r\n        betaTagColor={COLORS.getColor('neutral_800', theme)}\r\n      />\r\n      <ToTop data-testid={'toTopNavigation'} tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\r\n        <SystemIcons.ArrowLineUp size=\"24px\" color={COLORS.getColor('white', theme)} />\r\n        <span>{toTopText}</span>\r\n      </ToTop>\r\n    </FooterTopSection>\r\n  );\r\n};\r\n\r\nexport default FooterTop;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Footer/Components/FooterTop.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 interface FooterTopProps {
     sitename?: string;
     showBetaTag?: boolean;
     toTopText: string;
 }
-declare const FooterTop: ({ sitename, showBetaTag, toTopText }: FooterTopProps) => JSX.Element;
+declare const FooterTop: ({ sitename, showBetaTag, toTopText }: FooterTopProps) => React.JSX.Element;
 export default FooterTop;

package/dist/Footer/Components/FooterTop.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 import _pt from "prop-types";
 var _templateObject, _templateObject2;
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import animateScrollTo from 'animated-scroll-to';
 import { COLORS, invertedFocusStyles } from '../../styles';
 import Logo from '../../GlobalNavigationBar/Logo';
@@ -11,11 +11,24 @@ import { ComponentTextStyle, ComponentXSStyling } from '../../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var FooterTopSection = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n"])));
-var ToTop = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ", "\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n\n  &:focus:not(:disabled) {\n    ", "\n  }\n\n  &:active:not(:disabled) {\n    background: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit'), COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, invertedFocusStyles, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800);
+var ToTop = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ", "\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n\n  &:focus:not(:disabled) {\n    ", "\n  }\n\n  &:active:not(:disabled) {\n    background: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit'), function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, invertedFocusStyles, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+});
 var FooterTop = function FooterTop(_ref) {
   var sitename = _ref.sitename,
     showBetaTag = _ref.showBetaTag,
     toTopText = _ref.toTopText;
+  var theme = useTheme();
   var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -31,10 +44,10 @@ var FooterTop = function FooterTop(_ref) {
     children: [/*#__PURE__*/_jsx(Logo, {
       name: sitename || '',
       showBetaTag: showBetaTag,
-      color: COLORS.white,
+      color: COLORS.getColor('white', theme),
       inverted: true,
-      betaTagBackgroundColor: COLORS.white,
-      betaTagColor: COLORS.neutral_800
+      betaTagBackgroundColor: COLORS.getColor('white', theme),
+      betaTagColor: COLORS.getColor('neutral_800', theme)
     }), /*#__PURE__*/_jsxs(ToTop, {
       "data-testid": 'toTopNavigation',
       tabIndex: 0,
@@ -44,7 +57,7 @@ var FooterTop = function FooterTop(_ref) {
       onClick: action,
       children: [/*#__PURE__*/_jsx(SystemIcons.ArrowLineUp, {
         size: "24px",
-        color: COLORS.white
+        color: COLORS.getColor('white', theme)
       }), /*#__PURE__*/_jsx("span", {
         children: toTopText
       })]

package/dist/Footer/Components/FooterTop.js.map

@@ -1 +1 @@
-{"version":3,"file":"FooterTop.js","names":["React","styled","animateScrollTo","COLORS","invertedFocusStyles","Logo","SystemIcons","ComponentTextStyle","ComponentXSStyling","FooterTopSection","section","ToTop","div","UppercaseBold","primary_20","primary_700","primary_100","primary_800","FooterTop","sitename","showBetaTag","toTopText","isPressingEnter","e","key","preventDefault","stopPropagation","action","white","neutral_800"],"sources":["../../../src/Footer/Components/FooterTop.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport animateScrollTo from 'animated-scroll-to';\r\n\r\nimport {COLORS, invertedFocusStyles} from '../../styles';\r\nimport Logo from '../../GlobalNavigationBar/Logo';\r\nimport {SystemIcons} from '../../icons';\r\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\n\r\nconst FooterTopSection = styled.section`\r\n  min-height: 8px;\r\n  color: white;\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin-bottom: 16px;\r\n`;\r\n\r\nconst ToTop = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: auto 0 auto auto;\r\n  border-radius: 4px;\r\n  height: 48px;\r\n  width: 48px;\r\n  padding: 8px;\r\n\r\n  svg {\r\n    margin: 0 auto;\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n  span {\r\n    margin: 14px auto 0 auto;\r\n    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\r\n  }\r\n\r\n  &:hover:not(:disabled) {\r\n    background-color: ${COLORS.primary_20};\r\n    svg path,\r\n    svg {\r\n      fill: ${COLORS.primary_700};\r\n    }\r\n    span {\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &:focus:not(:disabled) {\r\n    ${invertedFocusStyles}\r\n  }\r\n\r\n  &:active:not(:disabled) {\r\n    background: ${COLORS.primary_100};\r\n    svg path,\r\n    svg {\r\n      fill: ${COLORS.primary_800};\r\n    }\r\n    span {\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n`;\r\n\r\ninterface FooterTopProps {\r\n  sitename?: string;\r\n  showBetaTag?: boolean;\r\n  toTopText: string;\r\n}\r\n\r\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n  const action = () => {\r\n    animateScrollTo(0);\r\n  };\r\n  return (\r\n    <FooterTopSection>\r\n      <Logo\r\n        name={sitename || ''}\r\n        showBetaTag={showBetaTag}\r\n        color={COLORS.white}\r\n        inverted={true}\r\n        betaTagBackgroundColor={COLORS.white}\r\n        betaTagColor={COLORS.neutral_800}\r\n      />\r\n      <ToTop data-testid={'toTopNavigation'} tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\r\n        <SystemIcons.ArrowLineUp size=\"24px\" color={COLORS.white} />\r\n        <span>{toTopText}</span>\r\n      </ToTop>\r\n    </FooterTopSection>\r\n  );\r\n};\r\n\r\nexport default FooterTop;\r\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,eAAe,MAAM,oBAAoB;AAEhD,SAAQC,MAAM,EAAEC,mBAAmB,QAAO,cAAc;AACxD,OAAOC,IAAI,MAAM,gCAAgC;AACjD,SAAQC,WAAW,QAAO,aAAa;AACvC,SAAQC,kBAAkB,EAAEC,kBAAkB,QAAO,cAAc;AAAC;AAAA;AAEpE,IAAMC,gBAAgB,GAAGR,MAAM,CAACS,OAAO,8KAMtC;AAED,IAAMC,KAAK,GAAGV,MAAM,CAACW,GAAG,ksBAkBlBJ,kBAAkB,CAACD,kBAAkB,CAACM,aAAa,EAAE,SAAS,CAAC,EAI7CV,MAAM,CAACW,UAAU,EAG3BX,MAAM,CAACY,WAAW,EAGjBZ,MAAM,CAACY,WAAW,EAK3BX,mBAAmB,EAIPD,MAAM,CAACa,WAAW,EAGtBb,MAAM,CAACc,WAAW,EAGjBd,MAAM,CAACc,WAAW,CAGhC;AAQD,IAAMC,SAAS,GAAG,SAAZA,SAAS,OAA6D;EAAA,IAAvDC,QAAQ,QAARA,QAAQ;IAAEC,WAAW,QAAXA,WAAW;IAAEC,SAAS,QAATA,SAAS;EACnD,IAAMC,eAAe,GAAG,SAAlBA,eAAe,CAAIC,CAAM,EAAK;IAClC,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;MACrBD,CAAC,CAACE,cAAc,EAAE;MAClBF,CAAC,CAACG,eAAe,EAAE;MACnB,OAAO,IAAI;IACb;IACA,OAAO,KAAK;EACd,CAAC;EACD,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnBzB,eAAe,CAAC,CAAC,CAAC;EACpB,CAAC;EACD,oBACE,MAAC,gBAAgB;IAAA,wBACf,KAAC,IAAI;MACH,IAAI,EAAEiB,QAAQ,IAAI,EAAG;MACrB,WAAW,EAAEC,WAAY;MACzB,KAAK,EAAEjB,MAAM,CAACyB,KAAM;MACpB,QAAQ,EAAE,IAAK;MACf,sBAAsB,EAAEzB,MAAM,CAACyB,KAAM;MACrC,YAAY,EAAEzB,MAAM,CAAC0B;IAAY,EACjC,eACF,MAAC,KAAK;MAAC,eAAa,iBAAkB;MAAC,QAAQ,EAAE,CAAE;MAAC,SAAS,EAAE,mBAACN,CAAM;QAAA,OAAMD,eAAe,CAACC,CAAC,CAAC,GAAGI,MAAM,EAAE,GAAG,IAAI;MAAA,CAAE;MAAC,OAAO,EAAEA,MAAO;MAAA,wBACjI,KAAC,WAAW,CAAC,WAAW;QAAC,IAAI,EAAC,MAAM;QAAC,KAAK,EAAExB,MAAM,CAACyB;MAAM,EAAG,eAC5D;QAAA,UAAOP;MAAS,EAAQ;IAAA,EAClB;EAAA,EACS;AAEvB,CAAC;AAAC;EAjCAF,QAAQ;EACRC,WAAW;EACXC,SAAS;AAAA;AAiCX,eAAeH,SAAS"}
+{"version":3,"file":"FooterTop.js","names":["React","styled","useTheme","animateScrollTo","COLORS","invertedFocusStyles","Logo","SystemIcons","ComponentTextStyle","ComponentXSStyling","jsx","_jsx","jsxs","_jsxs","FooterTopSection","section","_templateObject","_taggedTemplateLiteral","ToTop","div","_templateObject2","UppercaseBold","props","getColor","theme","FooterTop","_ref","sitename","showBetaTag","toTopText","isPressingEnter","e","key","preventDefault","stopPropagation","action","children","name","color","inverted","betaTagBackgroundColor","betaTagColor","tabIndex","onKeyDown","onClick","ArrowLineUp","size","propTypes","_pt","string","bool","isRequired"],"sources":["../../../src/Footer/Components/FooterTop.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport animateScrollTo from 'animated-scroll-to';\r\n\r\nimport {COLORS, invertedFocusStyles} from '../../styles';\r\nimport Logo from '../../GlobalNavigationBar/Logo';\r\nimport {SystemIcons} from '../../icons';\r\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\n\r\nconst FooterTopSection = styled.section`\r\n  min-height: 8px;\r\n  color: white;\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin-bottom: 16px;\r\n`;\r\n\r\nconst ToTop = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: auto 0 auto auto;\r\n  border-radius: 4px;\r\n  height: 48px;\r\n  width: 48px;\r\n  padding: 8px;\r\n\r\n  svg {\r\n    margin: 0 auto;\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n  span {\r\n    margin: 14px auto 0 auto;\r\n    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\r\n  }\r\n\r\n  &:hover:not(:disabled) {\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    svg path,\r\n    svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    span {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus:not(:disabled) {\r\n    ${invertedFocusStyles}\r\n  }\r\n\r\n  &:active:not(:disabled) {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    svg path,\r\n    svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    span {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\ninterface FooterTopProps {\r\n  sitename?: string;\r\n  showBetaTag?: boolean;\r\n  toTopText: string;\r\n}\r\n\r\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\r\n  const theme = useTheme();\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n  const action = () => {\r\n    animateScrollTo(0);\r\n  };\r\n  return (\r\n    <FooterTopSection>\r\n      <Logo\r\n        name={sitename || ''}\r\n        showBetaTag={showBetaTag}\r\n        color={COLORS.getColor('white', theme)}\r\n        inverted={true}\r\n        betaTagBackgroundColor={COLORS.getColor('white', theme)}\r\n        betaTagColor={COLORS.getColor('neutral_800', theme)}\r\n      />\r\n      <ToTop data-testid={'toTopNavigation'} tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\r\n        <SystemIcons.ArrowLineUp size=\"24px\" color={COLORS.getColor('white', theme)} />\r\n        <span>{toTopText}</span>\r\n      </ToTop>\r\n    </FooterTopSection>\r\n  );\r\n};\r\n\r\nexport default FooterTop;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Footer/Footer.cjs

@@ -5,17 +5,19 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
-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; }
-var FooterContainer = _styledComponents.default.footer(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: auto;\n"])));
-var FooterGlobalContent = _styledComponents.default.section(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 8px;\n  background-color: ", ";\n  color: white;\n"])), _styles.COLORS.primary_700);
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var FooterContainer = _styledComponents["default"].footer(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  margin-top: auto;\n"])));
+var FooterGlobalContent = _styledComponents["default"].section(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 8px;\n  background-color: ", ";\n  color: white;\n"])), function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+});
 var Footer = function Footer(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FooterContainer, {
@@ -26,5 +28,5 @@ var Footer = function Footer(_ref) {
   });
 };
 var _default = Footer;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=Footer.cjs.map

package/dist/Footer/Footer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.cjs","names":["FooterContainer","styled","footer","FooterGlobalContent","section","COLORS","primary_700","Footer","children"],"sources":["../../src/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { COLORS } from '../styles';\r\n\r\nconst FooterContainer = styled.footer`\r\n  margin-top: auto;\r\n`;\r\n\r\nconst FooterGlobalContent = styled.section`\r\n  min-height: 8px;\r\n  background-color: ${COLORS.primary_700};\r\n  color: white;\r\n`;\r\n\r\nconst Footer = ({ children }: any) => {\r\n  return (\r\n    <FooterContainer role=\"contentinfo\">\r\n      {children}\r\n      <FooterGlobalContent data-testid={'footer-content'} />\r\n    </FooterContainer>\r\n  );\r\n};\r\n\r\nexport default Footer;\r\n"],"mappings":";;;;;;;;;AAAA;AACA;AAEA;AAAmC;AAAA;AAAA;AAAA;AAEnC,IAAMA,eAAe,GAAGC,yBAAM,CAACC,MAAM,0GAEpC;AAED,IAAMC,mBAAmB,GAAGF,yBAAM,CAACG,OAAO,wJAEpBC,cAAM,CAACC,WAAW,CAEvC;AAED,IAAMC,MAAM,GAAG,SAATA,MAAM,OAA0B;EAAA,IAApBC,QAAQ,QAARA,QAAQ;EACxB,oBACE,sBAAC,eAAe;IAAC,IAAI,EAAC,aAAa;IAAA,WAChCA,QAAQ,eACT,qBAAC,mBAAmB;MAAC,eAAa;IAAiB,EAAG;EAAA,EACtC;AAEtB,CAAC;AAAC,eAEaD,MAAM;AAAA"}
+{"version":3,"file":"Footer.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styles","_jsxRuntime","_templateObject","_templateObject2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FooterContainer","styled","footer","_taggedTemplateLiteral2","FooterGlobalContent","section","props","COLORS","getColor","theme","Footer","_ref","children","jsxs","role","jsx","_default","exports"],"sources":["../../src/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { COLORS } from '../styles';\r\n\r\nconst FooterContainer = styled.footer`\r\n  margin-top: auto;\r\n`;\r\n\r\nconst FooterGlobalContent = styled.section`\r\n  min-height: 8px;\r\n  background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  color: white;\r\n`;\r\n\r\nconst Footer = ({ children }: any) => {\r\n  return (\r\n    <FooterContainer role=\"contentinfo\">\r\n      {children}\r\n      <FooterGlobalContent data-testid={'footer-content'} />\r\n    </FooterContainer>\r\n  );\r\n};\r\n\r\nexport default Footer;\r\n"],"mappings":";;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AAAmC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,IAAAK,eAAA,EAAAC,gBAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,cAAAR,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAEnC,IAAMW,eAAe,GAAGC,4BAAM,CAACC,MAAM,CAAAxB,eAAA,KAAAA,eAAA,OAAAyB,uBAAA,2CAEpC;AAED,IAAMC,mBAAmB,GAAGH,4BAAM,CAACI,OAAO,CAAA1B,gBAAA,KAAAA,gBAAA,OAAAwB,uBAAA,uFAEpB,UAAAG,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAEzE;AAED,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAAC,IAAA,EAA0B;EAAA,IAApBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EACxB,oBACE,IAAAnC,WAAA,CAAAoC,IAAA,EAACb,eAAe;IAACc,IAAI,EAAC,aAAa;IAAAF,QAAA,GAChCA,QAAQ,eACT,IAAAnC,WAAA,CAAAsC,GAAA,EAACX,mBAAmB;MAAC,eAAa;IAAiB,CAAE,CAAC;EAAA,CACvC,CAAC;AAEtB,CAAC;AAAC,IAAAY,QAAA,GAEaN,MAAM;AAAAO,OAAA,cAAAD,QAAA","ignoreList":[]}

package/dist/Footer/Footer.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Footer: ({ children }: any) => JSX.Element;
+import * as React from 'react';
+declare const Footer: ({ children }: any) => React.JSX.Element;
 export default Footer;

package/dist/Footer/Footer.js

@@ -6,7 +6,9 @@ import { COLORS } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var FooterContainer = styled.footer(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: auto;\n"])));
-var FooterGlobalContent = styled.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-height: 8px;\n  background-color: ", ";\n  color: white;\n"])), COLORS.primary_700);
+var FooterGlobalContent = styled.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-height: 8px;\n  background-color: ", ";\n  color: white;\n"])), function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+});
 var Footer = function Footer(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_jsxs(FooterContainer, {

package/dist/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","names":["React","styled","COLORS","FooterContainer","footer","FooterGlobalContent","section","primary_700","Footer","children"],"sources":["../../src/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { COLORS } from '../styles';\r\n\r\nconst FooterContainer = styled.footer`\r\n  margin-top: auto;\r\n`;\r\n\r\nconst FooterGlobalContent = styled.section`\r\n  min-height: 8px;\r\n  background-color: ${COLORS.primary_700};\r\n  color: white;\r\n`;\r\n\r\nconst Footer = ({ children }: any) => {\r\n  return (\r\n    <FooterContainer role=\"contentinfo\">\r\n      {children}\r\n      <FooterGlobalContent data-testid={'footer-content'} />\r\n    </FooterContainer>\r\n  );\r\n};\r\n\r\nexport default Footer;\r\n"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,SAASC,MAAM,QAAQ,WAAW;AAAC;AAAA;AAEnC,IAAMC,eAAe,GAAGF,MAAM,CAACG,MAAM,4FAEpC;AAED,IAAMC,mBAAmB,GAAGJ,MAAM,CAACK,OAAO,0IAEpBJ,MAAM,CAACK,WAAW,CAEvC;AAED,IAAMC,MAAM,GAAG,SAATA,MAAM,OAA0B;EAAA,IAApBC,QAAQ,QAARA,QAAQ;EACxB,oBACE,MAAC,eAAe;IAAC,IAAI,EAAC,aAAa;IAAA,WAChCA,QAAQ,eACT,KAAC,mBAAmB;MAAC,eAAa;IAAiB,EAAG;EAAA,EACtC;AAEtB,CAAC;AAED,eAAeD,MAAM"}
+{"version":3,"file":"Footer.js","names":["React","styled","COLORS","jsx","_jsx","jsxs","_jsxs","FooterContainer","footer","_templateObject","_taggedTemplateLiteral","FooterGlobalContent","section","_templateObject2","props","getColor","theme","Footer","_ref","children","role"],"sources":["../../src/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { COLORS } from '../styles';\r\n\r\nconst FooterContainer = styled.footer`\r\n  margin-top: auto;\r\n`;\r\n\r\nconst FooterGlobalContent = styled.section`\r\n  min-height: 8px;\r\n  background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  color: white;\r\n`;\r\n\r\nconst Footer = ({ children }: any) => {\r\n  return (\r\n    <FooterContainer role=\"contentinfo\">\r\n      {children}\r\n      <FooterGlobalContent data-testid={'footer-content'} />\r\n    </FooterContainer>\r\n  );\r\n};\r\n\r\nexport default Footer;\r\n"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,SAASC,MAAM,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEnC,IAAMC,eAAe,GAAGN,MAAM,CAACO,MAAM,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,+BAEpC;AAED,IAAMC,mBAAmB,GAAGV,MAAM,CAACW,OAAO,CAAAC,gBAAA,KAAAA,gBAAA,GAAAH,sBAAA,2EAEpB,UAAAI,KAAK;EAAA,OAAIZ,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAEzE;AAED,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAAC,IAAA,EAA0B;EAAA,IAApBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EACxB,oBACEb,KAAA,CAACC,eAAe;IAACa,IAAI,EAAC,aAAa;IAAAD,QAAA,GAChCA,QAAQ,eACTf,IAAA,CAACO,mBAAmB;MAAC,eAAa;IAAiB,CAAE,CAAC;EAAA,CACvC,CAAC;AAEtB,CAAC;AAED,eAAeM,MAAM","ignoreList":[]}