@laerdal/life-react-components 1.0.1-dev.30.full → 1.0.1-dev.35.full

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

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

package/dist/esm/HyperLink/styling.js

@@ -25,18 +25,24 @@ export const defaultStyle = css`
 
   &:focus,
   &.focus-state {
+    border-radius: 2px;
     background: ${COLORS.primary_800};
     color: ${COLORS.white};
   }
 
   &:active,
   &.active-state {
+    border-radius: 2px;
     background: ${COLORS.primary_800};
     color: ${COLORS.white};
   }
 
+
   &:focus:hover,
-  &:active:hover {
+  &:active:hover,
+  &.active-state:hover,
+  &.focus-state:hover{
+    text-decoration-line: none;
     color: ${COLORS.white};
     opacity: 0.9;
   }
@@ -61,6 +67,7 @@ export const invertedStyle = css`
 
   &:focus,
   &.focus-state {
+    border-radius: 2px;
     text-decoration-line: none;
     background: ${COLORS.white};
     color: ${COLORS.neutral_800};
@@ -73,6 +80,7 @@ export const invertedStyle = css`
 
   &:active,
   &.active-state {
+    border-radius: 2px;
     text-decoration-line: none;
     background: ${COLORS.white};
     color: ${COLORS.neutral_800};

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/HyperLink/styling.ts"],"names":["css","COLORS","defaultStyle","primary_500","accent1_500","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":"AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,IAAvB;AAEA,OAAO,MAAMC,YAAY,GAAGF,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,MAAM,CAACE,WAAY;AAChC;AACA;AACA;AACA,aAAaF,MAAM,CAACG,WAAY;AAChC;AACA;AACA;AACA;AACA,aAAaH,MAAM,CAACI,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA,kBAAkBJ,MAAM,CAACK,WAAY;AACrC,aAAaL,MAAM,CAACM,KAAM;AAC1B;AACA;AACA;AACA;AACA,kBAAkBN,MAAM,CAACK,WAAY;AACrC,aAAaL,MAAM,CAACM,KAAM;AAC1B;AACA;AACA;AACA;AACA,aAAaN,MAAM,CAACM,KAAM;AAC1B;AACA;AACA,CAxCO;AA0CP,OAAO,MAAMC,aAAa,GAAGR,GAAI;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,MAAM,CAACM,KAAM;AAC1B;AACA;AACA;AACA,aAAaN,MAAM,CAACQ,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA,kBAAkBR,MAAM,CAACM,KAAM;AAC/B,aAAaN,MAAM,CAACS,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBT,MAAM,CAACM,KAAM;AAC/B,aAAaN,MAAM,CAACS,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA,aAAaT,MAAM,CAACS,WAAY;AAChC;AACA;AACA,CA3CO","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.primary_500};\n  }\n\n  &:visited {\n    color: ${COLORS.accent1_500};\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ${COLORS.primary_700};\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:active,\n  &.active-state {\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    color: ${COLORS.white};\n    opacity: 0.9;\n  }\n`;\n\nexport const invertedStyle = css`\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.white};\n  }\n\n  &:visited {\n    color: ${COLORS.neutral_100};\n  }\n\n  &:focus,\n  &.focus-state {\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ${COLORS.neutral_800};\n    opacity: 0.9;\n  }\n`;\n"],"file":"styling.js"}
+{"version":3,"sources":["../../../src/HyperLink/styling.ts"],"names":["css","COLORS","defaultStyle","primary_500","accent1_500","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":"AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,IAAvB;AAEA,OAAO,MAAMC,YAAY,GAAGF,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,MAAM,CAACE,WAAY;AAChC;AACA;AACA;AACA,aAAaF,MAAM,CAACG,WAAY;AAChC;AACA;AACA;AACA;AACA,aAAaH,MAAM,CAACI,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBJ,MAAM,CAACK,WAAY;AACrC,aAAaL,MAAM,CAACM,KAAM;AAC1B;AACA;AACA;AACA;AACA;AACA,kBAAkBN,MAAM,CAACK,WAAY;AACrC,aAAaL,MAAM,CAACM,KAAM;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaN,MAAM,CAACM,KAAM;AAC1B;AACA;AACA,CA9CO;AAgDP,OAAO,MAAMC,aAAa,GAAGR,GAAI;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,MAAM,CAACM,KAAM;AAC1B;AACA;AACA;AACA,aAAaN,MAAM,CAACQ,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBR,MAAM,CAACM,KAAM;AAC/B,aAAaN,MAAM,CAACS,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBT,MAAM,CAACM,KAAM;AAC/B,aAAaN,MAAM,CAACS,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA,aAAaT,MAAM,CAACS,WAAY;AAChC;AACA;AACA,CA7CO","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.primary_500};\n  }\n\n  &:visited {\n    color: ${COLORS.accent1_500};\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ${COLORS.primary_700};\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ${COLORS.white};\n    opacity: 0.9;\n  }\n`;\n\nexport const invertedStyle = css`\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.white};\n  }\n\n  &:visited {\n    color: ${COLORS.neutral_100};\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ${COLORS.neutral_800};\n    opacity: 0.9;\n  }\n`;\n"],"file":"styling.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-left: -4px;\n      margin-top: -2px;\n      margin-bottom: -2px;\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .extramargin {\n      margin-right: 9px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    box-shadow: none !important;\n    color: ", ";\n  }\n  ", "\n  &.focus-state {\n    ", ";\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n    &:hover,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n  }\n"])), function (props) {
+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) {
   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);
@@ -100,6 +100,8 @@ var Primary = _styledComponents.default.button(_templateObject5 || (_templateObj
   return props.minWidth;
 }, function (props) {
   return props.size === _types.Size.Large ? '14px 18px' : props.size === _types.Size.Small ? '4px 10px' : '6px 14px';
+}, function (props) {
+  return props.size === _types.Size.Medium ? '-2px -8px' : props.size === _types.Size.Small ? '-2px -4px' : '-2px -8px';
 }, function (props) {
   return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
 }, function (props) {
@@ -144,7 +146,7 @@ var Primary = _styledComponents.default.button(_templateObject5 || (_templateObj
   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  &: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"])), 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    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) {
   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;
@@ -211,7 +213,7 @@ var Text = _styledComponents.default.button(_templateObject10 || (_templateObjec
 
 var Button = function Button(_ref) {
   var _ref$children = _ref.children,
-      children = _ref$children === void 0 ? 'Primary Button' : _ref$children,
+      children = _ref$children === void 0 ? '' : _ref$children,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
       _ref$type = _ref.type,
@@ -243,7 +245,7 @@ var Button = function Button(_ref) {
   var renderContent = function renderContent() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
       className: (imageExtraMargin ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')
-    }, icon), /*#__PURE__*/React.createElement("span", {
+    }, icon), children && /*#__PURE__*/React.createElement("span", {
       className: loading ? 'label loading' : 'label'
     }, children), loading && /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, null));
   }; // Let's render button

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","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","Text","neutral_500","Button","children","type","Medium","imageExtraMargin","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-left: -4px;\n      margin-top: -2px;\n      margin-bottom: -2px;\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: 9px;\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  &: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\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\nconst Text = styled.button<ButtonProps>`\n  color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n  background-color: transparent;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n\n  text-decoration: underline;\n  ${(props) =>\n    props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n      : props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n      : ComponentMStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n\n  &:hover,\n  &:focus,\n  &.hover-state,\n  &.focus-state {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    background: transparent;\n  }\n  &:active,\n  &.active-state {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    background: transparent;\n  }\n  &:disabled,\n  &.disabled-state {\n    color: ${COLORS.neutral_500};\n    background: transparent;\n    cursor: not-allowed;\n  }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'correct' | 'critical';\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  role?: 'button' | string;\n  title?: string;\n  size?: Size;\n  imageExtraMargin?: boolean;\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}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  minWidth = '64px',\n  imageExtraMargin,\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={(imageExtraMargin ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n      <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          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          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          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 'text':\n      return (\n        <Text {...renderProps} disabled={disabled} type={type} size={size} width={width} minWidth={minWidth} data-testid={testId}>\n          {children}\n        </Text>\n      );\n    case 'correct':\n      return (\n        <Correct\n          {...renderProps}\n          disabled={disabled}\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        </Correct>\n      );\n    case 'critical':\n      return (\n        <Critical\n          {...renderProps}\n          disabled={disabled}\n          flatEdge={flatEdge}\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          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","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","Text","neutral_500","Button","children","type","imageExtraMargin","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 ? '-2px -8px' : props.size === Size.Small ? '-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\nconst Text = styled.button<ButtonProps>`\n  color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n  background-color: transparent;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n\n  text-decoration: underline;\n  ${(props) =>\n    props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n      : props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n      : ComponentMStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n\n  &:hover,\n  &:focus,\n  &.hover-state,\n  &.focus-state {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    background: transparent;\n  }\n  &:active,\n  &.active-state {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    background: transparent;\n  }\n  &:disabled,\n  &.disabled-state {\n    color: ${COLORS.neutral_500};\n    background: transparent;\n    cursor: not-allowed;\n  }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'correct' | 'critical';\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  role?: 'button' | string;\n  title?: string;\n  size?: Size;\n  imageExtraMargin?: boolean;\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}\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  imageExtraMargin,\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={(imageExtraMargin ? '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          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          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          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 'text':\n      return (\n        <Text {...renderProps} disabled={disabled} type={type} size={size} width={width} minWidth={minWidth} data-testid={testId}>\n          {children}\n        </Text>\n      );\n    case 'correct':\n      return (\n        <Correct\n          {...renderProps}\n          disabled={disabled}\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        </Correct>\n      );\n    case 'critical':\n      return (\n        <Critical\n          {...renderProps}\n          disabled={disabled}\n          flatEdge={flatEdge}\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          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/Button/DualFunctionButton.js

@@ -54,8 +54,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var ButtonsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  .extramargin {\n    margin-right: 9px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ", ";\n  }\n"])), function (props) {
-  return props.size == _types.Size.Large ? '4px 10px' : props.size == _types.Size.Medium ? '4px 8px' : '4px 6px';
+var ButtonsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ", ";\n  }\n"])), function (props) {
+  return props.size == _types.Size.Large ? '4px 18px' : props.size == _types.Size.Medium ? '4px 14px' : '4px 10px';
 });
 
 var DualFunctionButton = function DualFunctionButton(_ref) {
@@ -86,12 +86,20 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  var _React$useState3 = React.useState([]),
+  var _React$useState3 = React.useState(null),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      selectedValues = _React$useState4[0],
-      setSelectedValues = _React$useState4[1];
+      focused = _React$useState4[0],
+      setFocused = _React$useState4[1];
+
+  var dropdownContainerRef = React.useRef(null);
+
+  var _React$useState5 = React.useState([]),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      selectedValues = _React$useState6[0],
+      setSelectedValues = _React$useState6[1];
 
   return /*#__PURE__*/React.createElement(ButtonsContainer, {
+    ref: dropdownContainerRef,
     size: size
   }, /*#__PURE__*/React.createElement(_CommonStyling.Dropdown, {
     isButton: true,
@@ -116,6 +124,8 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
     setSelectedValues: setSelectedValues,
     isButton: true,
     setIsOpen: setIsOpen,
+    focused: focused,
+    setFocused: setFocused,
     hideOnClickOutside: true,
     size: size,
     isOpen: isOpen,
@@ -138,7 +148,7 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
       size: "16px"
     }),
     flatEdge: "left"
-  }), /*#__PURE__*/React.createElement("span", null)));
+  })));
 };
 
 DualFunctionButton.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/DualFunctionButton.tsx"],"names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","selectedValues","setSelectedValues","itemsType","isButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport Button, { ButtonProps } from './Button'\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  .extramargin {\n    margin-right: 9px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${ props => props.size == Size.Large ? '4px 10px' : props.size == Size.Medium ? '4px 8px' : '4px 6px' };\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  isButton: boolean;\n  dropdownCustomizationProps: DropdownCustomizationProps;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n    return <ButtonsContainer size={size}>\n          <Dropdown isButton={true} locked={false} disabled={false} margin=''>\n            <Button\n            {...renderProps}\n            onClick={onClick}\n            disabled={disabled}\n            type={type}\n            imageExtraMargin={true}\n            loading={loading}\n            icon={icon}\n            size={size}\n            width={width}\n            variant={variant}\n            flatEdge=\"right\">\n                {children}\n            </Button>\n              <DropdownContent\n                    customizationProps={dropdownCustomizationProps}\n                    filter=''\n                    selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : selectedValues}\n                    setSelectedValues={setSelectedValues}\n                    isButton={true}\n                    setIsOpen={setIsOpen}\n                    hideOnClickOutside={true}\n                    size={size}\n                    isOpen={isOpen}\n                    id={id ?? 'dropdownId'}\n                    messageOnNoResults=''\n                    alignLeft={true} />\n          </Dropdown>\n          <Button variant={variant}\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          minWidth={'unset'}\n          onClick={() => setIsOpen(!isOpen)}\n          icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\"/>}\n          flatEdge=\"left\"><span/></Button>\n      </ButtonsContainer>;\n  };\n\n\nexport default DualFunctionButton;\n"],"file":"DualFunctionButton.js"}
+{"version":3,"sources":["../../../src/Button/DualFunctionButton.tsx"],"names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","focused","setFocused","dropdownContainerRef","useRef","selectedValues","setSelectedValues","itemsType","isButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport Button, { ButtonProps } from './Button'\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${ props => props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px' };\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  isButton: boolean;\n  dropdownCustomizationProps: DropdownCustomizationProps;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n    return <ButtonsContainer ref={dropdownContainerRef} size={size}>\n          <Dropdown isButton={true} locked={false} disabled={false} margin=''>\n            <Button\n            {...renderProps}\n            onClick={onClick}\n            disabled={disabled}\n            type={type}\n            imageExtraMargin={true}\n            loading={loading}\n            icon={icon}\n            size={size}\n            width={width}\n            variant={variant}\n            flatEdge=\"right\">\n                {children}\n            </Button>\n              <DropdownContent\n                    customizationProps={dropdownCustomizationProps}\n                    filter=''\n                    selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : selectedValues}\n                    setSelectedValues={setSelectedValues}\n                    isButton={true}\n                    setIsOpen={setIsOpen}\n                    focused={focused}\n                    setFocused={setFocused}\n                    hideOnClickOutside={true}\n                    size={size}\n                    isOpen={isOpen}\n                    id={id ?? 'dropdownId'}\n                    messageOnNoResults=''\n                    alignLeft={true} />\n          </Dropdown>\n          <Button variant={variant}\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          minWidth={'unset'}\n          onClick={() => setIsOpen(!isOpen)}\n          icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\"/>}\n          flatEdge=\"left\" />\n      </ButtonsContainer>;\n  };\n\n\nexport default DualFunctionButton;\n"],"file":"DualFunctionButton.js"}

package/dist/js/Dropdown/BasicDropdown.d.ts

@@ -1,7 +1,7 @@
-import { DropdownItem } from './DropdownButtonTypes';
+import { DropdownItem } from './DropdownContent';
 interface DropdownFilterProps {
     id: string;
-    list: string[] | DropdownItem[];
+    list: DropdownItem[];
     itemsType: 'normal' | 'checkbox' | 'radio';
     action?: () => void;
     actionLabel?: string;

package/dist/js/Dropdown/BasicDropdown.js

@@ -106,30 +106,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
       selectedValues = _React$useState14[0],
       setSelectedValues = _React$useState14[1];
 
-  var _React$useState15 = React.useState([]),
-      _React$useState16 = _slicedToArray(_React$useState15, 2),
-      normalizedList = _React$useState16[0],
-      setNormalizedList = _React$useState16[1];
-
   var styledFieldRef = React.useRef(null);
-
-  var isDropdownItem = function isDropdownItem(item) {
-    return item.label !== undefined;
-  };
-
-  React.useEffect(function () {
-    if (list.length > 0) {
-      if (isDropdownItem(list[0])) {
-        setNormalizedList(list.map(function (i) {
-          return i.label;
-        }));
-      } else {
-        setNormalizedList(list.map(function (i) {
-          return i;
-        }));
-      }
-    }
-  }, [list]);
   /*
   if (!items.includes(input)) {
     setInput('');
@@ -171,9 +148,16 @@ var BasicDropdown = function BasicDropdown(_ref) {
   React.useEffect(function () {
     setIsLoading(false);
   }, [input]);
+  React.useEffect(function () {
+    if (list.every(function (x) {
+      return x.value != input;
+    })) {
+      setInput('');
+      setPlaceholderSearch(placeholder || '');
+    }
+  }, [isOpen]);
 
   var customSetIsOpen = function customSetIsOpen(isOpen) {
-    console.log('dropdown content triggered');
     setIsOpen(isOpen);
   };
 
@@ -195,10 +179,23 @@ var BasicDropdown = function BasicDropdown(_ref) {
     disabled: disabled || false,
     locked: locked || false,
     showValidationMessage: !!activeValidationMessage,
+    placeholder: placeholderSearch,
     isPlaceholder: !input
-  }, /*#__PURE__*/React.createElement("div", {
-    className: 'value'
-  }, input || placeholderSearch), isLoading ? /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
+  }, /*#__PURE__*/React.createElement(_CommonStyling.InputField, {
+    type: "search",
+    readOnly: true,
+    placeholder: placeholderSearch,
+    value: input,
+    className: size ? "".concat(size, " value") : 'value',
+    onClick: function onClick(e) {
+      if (!locked && !disabled) {
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+      }
+    },
+    tabIndex: disabled || locked ? -1 : 0,
+    disabled: disabled || false
+  }), isLoading ? /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
     size: "small",
     color: _styles.COLORS.neutral_600
   }) : null, /*#__PURE__*/React.createElement("div", {
@@ -218,17 +215,14 @@ var BasicDropdown = function BasicDropdown(_ref) {
       action: action !== null && action !== void 0 ? action : function () {},
       actionLabel: actionLabel,
       scrollable: scrollable,
-      isButton: isButton || false,
       onValueUpdate: handleValueSelect,
-      items: normalizedList.map(function (x) {
-        return {
-          value: x
-        };
-      }),
+      items: list,
       multiSelect: multiSelect,
       pinTopItem: pinTopItem,
       maxHeight: maxHeight
     },
+    focused: focused,
+    setFocused: setFocused,
     size: size == 'medium' ? _types.Size.Medium : _types.Size.Small,
     filter: '',
     hideOnClickOutside: true,
@@ -250,7 +244,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
 
 BasicDropdown.propTypes = {
   id: _propTypes.default.string.isRequired,
-  list: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.array]).isRequired,
+  list: _propTypes.default.array.isRequired,
   itemsType: _propTypes.default.oneOf(['normal', 'checkbox', 'radio']).isRequired,
   action: _propTypes.default.func,
   actionLabel: _propTypes.default.string,