@laerdal/life-react-components 1.3.0 → 1.3.1-dev.3

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

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

package/dist/js/Button/Button.js

@@ -82,7 +82,7 @@ var tabbedHereStyle = function tabbedHereStyle(variant, colorTheme) {
   }
 };
 
-var Primary = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n  }\n  div.button-content {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 2px;\n    border-style: solid;\n    border-color: ", ";\n\n    width: ", ";\n    position: relative;\n\n    min-height: ", ";\n    min-width: ", ";\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    // paddings have -2px for border\n    padding: ", ";\n\n    span.loading {\n      opacity: 0;\n    }\n    .icon {\n      margin: ", ";\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .extramargin {\n      margin-right: 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    box-shadow: none !important;\n    color: ", ";\n  }\n  ", "\n  &.focus-state {\n    ", ";\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n  }\n"])), function (props) {
+var Primary = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n  }\n  div.button-content {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 2px;\n    border-style: solid;\n    border-color: ", ";\n\n    width: ", ";\n    position: relative;\n\n    min-height: ", ";\n    min-width: ", ";\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    // paddings have -2px for border\n    padding: ", ";\n\n    span.loading {\n      opacity: 0;\n    }\n    .icon {\n      margin: ", ";\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .extramargin {\n      margin-right: 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    box-shadow: none !important;\n    color: ", ";\n  }\n  ", "\n  &.focus-state {\n    ", ";\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    pointer-events: none;\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), function (props) {
   return props.size === _types.Size.Large ? '56px' : '48px';
 }, function (props) {
   return props.size === _types.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white);
@@ -138,15 +138,9 @@ var Primary = _styledComponents.default.button(_templateObject5 || (_templateObj
   return props.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.neutral_300;
 }, function (props) {
   return props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100;
-}, function (props) {
-  return props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100;
-}, function (props) {
-  return props.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.neutral_300;
-}, function (props) {
-  return props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100;
 });
 
-var Secondary = (0, _styledComponents.default)(Primary)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n    background-color: white;\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: white;\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  ", "\n  &.focus-state {\n    ", ";\n\n  }\n"])), function (props) {
+var Secondary = (0, _styledComponents.default)(Primary)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n  }\n\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ", ";\n    border-color: ", ";\n  }\n  ", "\n\n  &:focus,\n  &.focus-state {\n    ", ";\n  }\n"])), function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary;
 }, function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary;
@@ -173,7 +167,7 @@ var Secondary = (0, _styledComponents.default)(Primary)(_templateObject6 || (_te
 }, function (props) {
   return tabbedHereStyle('secondary', props === null || props === void 0 ? void 0 : props.colorTheme);
 });
-var Tertiary = (0, _styledComponents.default)(Primary)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: ", ";\n    border-color: transparent;\n    background-color: transparent;\n    border-width: 1px;\n    div svg path {\n      fill: ", ";\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ", ";\n    border-color: transparent;\n    cursor: not-allowed;\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ", ";\n    border-color: transparent !important;\n    cursor: not-allowed;\n  }\n  ", "\n  &.focus-state {\n    ", ";\n  }\n"])), function (props) {
+var Tertiary = (0, _styledComponents.default)(Primary)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: ", ";\n    border-color: transparent;\n    background-color: transparent;\n    border-width: 1px;\n    div svg path {\n      fill: ", ";\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ", ";\n    border-color: transparent !important;\n  }\n  ", "\n  &.focus-state {\n    ", ";\n  }\n"])), function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary_500;
 }, function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary;
@@ -193,13 +187,13 @@ var Tertiary = (0, _styledComponents.default)(Primary)(_templateObject7 || (_tem
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1_100 : _styles.COLORS.primary_100;
 }, function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : _styles.COLORS.primary_800;
-}, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, function (props) {
+}, _styles.COLORS.neutral_300, function (props) {
   return props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '';
 }, function (props) {
   return tabbedHereStyle('tertiary', props === null || props === void 0 ? void 0 : props.colorTheme);
 });
-var Correct = (0, _styledComponents.default)(Primary)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: white;\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n  }\n"])), _styles.COLORS.correct_500, _styles.COLORS.correct_500, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_800, _styles.COLORS.correct_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
-var Critical = (0, _styledComponents.default)(Primary)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: white;\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n  }\n"])), _styles.COLORS.critical_500, _styles.COLORS.critical_500, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_800, _styles.COLORS.critical_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
+var Correct = (0, _styledComponents.default)(Primary)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: white;\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), _styles.COLORS.correct_500, _styles.COLORS.correct_500, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_800, _styles.COLORS.correct_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
+var Critical = (0, _styledComponents.default)(Primary)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: white;\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), _styles.COLORS.critical_500, _styles.COLORS.critical_500, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_800, _styles.COLORS.critical_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
 
 var Button = function Button(_ref) {
   var _ref$children = _ref.children,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["getBorderRadius","flatEdge","radius","tabbedHereStyle","variant","colorTheme","css","COLORS","focus_25","focus","accent1_700","primary_100","primary_700","primary_600","white","accent1","primary_800","primary","primary_500","accent1_500","Primary","styled","button","props","size","Size","Large","ComponentTextStyle","Bold","Small","width","minWidth","Medium","iconOnly","accent1_800","primary_200","tabbedHere","neutral_100","neutral_300","Secondary","primary_300","Tertiary","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","children","type","testId","disabled","icon","loading","renderProps","supressFocusRef","React","useRef","useState","setTabbedHere","renderContent","className","e","current","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport { COLORS, TYPOGRAPHY } from '../styles';\nimport { Size } from '../types';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n  switch(flatEdge)\n  {\n      case 'left':\n          return `0px ${radius}px ${radius}px 0px`;\n      \n      case 'right':\n          return `${radius}px 0px 0px ${radius}px`;\n\n      case 'none':\n      default:\n          return `${radius}px`;\n  }\n}\n\n\nconst tabbedHereStyle = (variant: string, colorTheme?: string) => {\n  switch (variant) {\n    case 'primary':\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          color: ${colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white};\n        }\n      `;\n    case 'secondary':\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};\n          color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};\n        }\n      `;\n    case 'tertiary':\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${COLORS.white};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};\n          color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};\n        }\n      `;\n\n    default:\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\n        }\n      `;\n  }\n};\n\nconst Primary = styled.button<ButtonProps>`\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n  &.loading-state {\n    cursor: wait;\n  }\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n  }\n  div.button-content {\n    ${(props) =>\n      props.size === Size.Large\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : props.size === Size.Small\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n    border-width: 2px;\n    border-style: solid;\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n    width: ${(props) => props.width};\n    position: relative;\n\n    min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n    min-width: ${props => props.minWidth};\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    // paddings have -2px for border\n    padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n    span.loading {\n      opacity: 0;\n    }\n    .icon {\n      margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\n      width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      svg {\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n      }\n    }\n\n    .extramargin {\n      margin-right: 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        path {\n          fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    box-shadow: none !important;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '')}\n  &.focus-state {\n    ${(props) => tabbedHereStyle('primary', props?.colorTheme)};\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n    border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n      color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n      border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    }\n  }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n    background-color: white;\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: white;\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n    border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    cursor: not-allowed;\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\n  &.focus-state {\n    ${(props) => tabbedHereStyle('secondary', props?.colorTheme)};\n\n  }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n    border-color: transparent;\n    background-color: transparent;\n    border-width: 1px;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ${COLORS.neutral_300};\n    border-color: transparent;\n    cursor: not-allowed;\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ${COLORS.neutral_300};\n    border-color: transparent !important;\n    cursor: not-allowed;\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '')}\n  &.focus-state {\n    ${(props) => tabbedHereStyle('tertiary', props?.colorTheme)};\n  }\n`;\n\nconst Correct = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.correct_500};\n    background-color: ${COLORS.correct_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.correct_700};\n    background-color: ${COLORS.correct_700};\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ${COLORS.correct_700};\n    background-color: ${COLORS.correct_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.correct_800};\n    background-color: ${COLORS.correct_800};\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ${COLORS.neutral_100};\n      color: ${COLORS.neutral_300};\n      border-color: ${COLORS.neutral_100};\n    }\n  }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.critical_500};\n    background-color: ${COLORS.critical_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.critical_700};\n    background-color: ${COLORS.critical_700};\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ${COLORS.critical_700};\n    background-color: ${COLORS.critical_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.critical_800};\n    background-color: ${COLORS.critical_800};\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ${COLORS.neutral_100};\n      color: ${COLORS.neutral_300};\n      border-color: ${COLORS.neutral_100};\n    }\n  }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'correct' | 'critical';\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  role?: 'button' | string;\n  title?: string;\n  size?: Size;\n  colorTheme?: 'teal' | 'dark';\n  width?: 'auto' | string;\n  loading?: boolean;\n  testId?: string;\n  tabbedHere?: boolean;\n  icon?: React.ReactNode;\n  minWidth?: string;\n  iconOnly?: boolean;\n}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n  children = '',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  minWidth = '64px',\n  testId,\n  disabled,\n  flatEdge,\n  icon,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, ...renderProps } = props;\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const renderContent = () => (\n    <>\n      {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n      {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n      {loading && <LoadingIndicator></LoadingIndicator>}\n    </>\n  );\n\n  // Let's render button\n  switch (variant) {\n    case 'primary':\n      return (\n        <Primary\n          {...renderProps}\n          disabled={disabled}\n          iconOnly={!children}\n          type={type}\n          size={size}\n          flatEdge={flatEdge}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Primary>\n      );\n    case 'secondary':\n      return (\n        <Secondary\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          iconOnly={!children}\n          flatEdge={flatEdge}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Secondary>\n      );\n    case 'tertiary':\n      return (\n        <Tertiary\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          flatEdge={flatEdge}\n          size={size}\n          width={width}\n          iconOnly={!children}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Tertiary>\n      );\n    case 'correct':\n      return (\n        <Correct\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          iconOnly={!children}\n          flatEdge={flatEdge}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Correct>\n      );\n    case 'critical':\n      return (\n        <Critical\n          {...renderProps}\n          disabled={disabled}\n          flatEdge={flatEdge}\n          iconOnly={!children}\n          type={type}\n          size={size}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Critical>\n      );\n    default:\n      return (\n        <Primary\n          {...renderProps}\n          flatEdge={flatEdge}\n          disabled={disabled}\n          iconOnly={!children}\n          type={type}\n          size={size}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Primary>\n      );\n  }\n};\n\nexport default Button;\n"],"file":"Button.js"}
+{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["getBorderRadius","flatEdge","radius","tabbedHereStyle","variant","colorTheme","css","COLORS","focus_25","focus","accent1_700","primary_100","primary_700","primary_600","white","accent1","primary_800","primary","primary_500","accent1_500","Primary","styled","button","props","size","Size","Large","ComponentTextStyle","Bold","Small","width","minWidth","Medium","iconOnly","accent1_800","primary_200","tabbedHere","neutral_100","neutral_300","Secondary","primary_300","Tertiary","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","children","type","testId","disabled","icon","loading","renderProps","supressFocusRef","React","useRef","useState","setTabbedHere","renderContent","className","e","current","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport { COLORS, TYPOGRAPHY } from '../styles';\nimport { Size } from '../types';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n  switch(flatEdge)\n  {\n      case 'left':\n          return `0px ${radius}px ${radius}px 0px`;\n      \n      case 'right':\n          return `${radius}px 0px 0px ${radius}px`;\n\n      case 'none':\n      default:\n          return `${radius}px`;\n  }\n}\n\n\nconst tabbedHereStyle = (variant: string, colorTheme?: string) => {\n  switch (variant) {\n    case 'primary':\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          color: ${colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white};\n        }\n      `;\n    case 'secondary':\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};\n          color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};\n        }\n      `;\n    case 'tertiary':\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${COLORS.white};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};\n          color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};\n        }\n      `;\n\n    default:\n      return css`\n        outline: none;\n        div {\n          outline: none;\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n          color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\n        }\n      `;\n  }\n};\n\nconst Primary = styled.button<ButtonProps>`\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n  &.loading-state {\n    cursor: wait;\n  }\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n  }\n  div.button-content {\n    ${(props) =>\n      props.size === Size.Large\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : props.size === Size.Small\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n    border-width: 2px;\n    border-style: solid;\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n    width: ${(props) => props.width};\n    position: relative;\n\n    min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n    min-width: ${props => props.minWidth};\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    // paddings have -2px for border\n    padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n    span.loading {\n      opacity: 0;\n    }\n    .icon {\n      margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\n      width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      svg {\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n      }\n    }\n\n    .extramargin {\n      margin-right: 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        path {\n          fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    box-shadow: none !important;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '')}\n  &.focus-state {\n    ${(props) => tabbedHereStyle('primary', props?.colorTheme)};\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    pointer-events: none;\n    background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n    border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n  }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n  }\n\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n    border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\n\n  &:focus,\n  &.focus-state {\n    ${(props) => tabbedHereStyle('secondary', props?.colorTheme)};\n  }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n    border-color: transparent;\n    background-color: transparent;\n    border-width: 1px;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ${COLORS.neutral_300};\n    border-color: transparent !important;\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '')}\n  &.focus-state {\n    ${(props) => tabbedHereStyle('tertiary', props?.colorTheme)};\n  }\n`;\n\nconst Correct = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.correct_500};\n    background-color: ${COLORS.correct_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.correct_700};\n    background-color: ${COLORS.correct_700};\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ${COLORS.correct_700};\n    background-color: ${COLORS.correct_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.correct_800};\n    background-color: ${COLORS.correct_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n  }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.critical_500};\n    background-color: ${COLORS.critical_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.critical_700};\n    background-color: ${COLORS.critical_700};\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ${COLORS.critical_700};\n    background-color: ${COLORS.critical_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.critical_800};\n    background-color: ${COLORS.critical_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'correct' | 'critical';\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  role?: 'button' | string;\n  title?: string;\n  size?: Size;\n  colorTheme?: 'teal' | 'dark';\n  width?: 'auto' | string;\n  loading?: boolean;\n  testId?: string;\n  tabbedHere?: boolean;\n  icon?: React.ReactNode;\n  minWidth?: string;\n  iconOnly?: boolean;\n}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n  children = '',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  minWidth = '64px',\n  testId,\n  disabled,\n  flatEdge,\n  icon,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, ...renderProps } = props;\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const renderContent = () => (\n    <>\n      {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n      {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n      {loading && <LoadingIndicator></LoadingIndicator>}\n    </>\n  );\n\n  // Let's render button\n  switch (variant) {\n    case 'primary':\n      return (\n        <Primary\n          {...renderProps}\n          disabled={disabled}\n          iconOnly={!children}\n          type={type}\n          size={size}\n          flatEdge={flatEdge}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Primary>\n      );\n    case 'secondary':\n      return (\n        <Secondary\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          iconOnly={!children}\n          flatEdge={flatEdge}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Secondary>\n      );\n    case 'tertiary':\n      return (\n        <Tertiary\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          flatEdge={flatEdge}\n          size={size}\n          width={width}\n          iconOnly={!children}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Tertiary>\n      );\n    case 'correct':\n      return (\n        <Correct\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          iconOnly={!children}\n          flatEdge={flatEdge}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Correct>\n      );\n    case 'critical':\n      return (\n        <Critical\n          {...renderProps}\n          disabled={disabled}\n          flatEdge={flatEdge}\n          iconOnly={!children}\n          type={type}\n          size={size}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Critical>\n      );\n    default:\n      return (\n        <Primary\n          {...renderProps}\n          flatEdge={flatEdge}\n          disabled={disabled}\n          iconOnly={!children}\n          type={type}\n          size={size}\n          width={width}\n          minWidth={minWidth}\n          data-testid={testId}\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}>\n          <div className=\"button-content\">{renderContent()}</div>\n        </Primary>\n      );\n  }\n};\n\nexport default Button;\n"],"file":"Button.js"}

package/dist/js/styles/typography.d.ts

@@ -5,19 +5,19 @@ declare const TYPOGRAPHY: {
     fontFamily: string;
 };
 interface ITypographyBase {
-    color?: string;
+    $color?: string;
     lineHeight: number;
-    fontSize: number;
-    fontWeight: number;
-    fontStyle?: string;
+    $fontSize: number;
+    $fontWeight: number;
+    $fontStyle?: string;
     textTransform?: Property.TextTransform;
     textDecorationLine?: Property.TextDecorationLine;
 }
 interface IHeadline {
-    color?: string;
+    $color?: string;
 }
 interface IHeadlineBase {
-    color?: string;
+    $color?: string;
     lineHeight: number;
     fontSize: number;
 }