@laerdal/life-react-components 3.4.2 → 3.5.0

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

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

package/dist/umd/Button/CommonStyling.js

@@ -0,0 +1,420 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "styled-components", "../styles"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("styled-components"), require("../styles"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.styledComponents, global.styles);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _styledComponents, _styles) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.Text = exports.Critical = exports.Correct = exports.Tertiary = exports.Secondary = exports.Primary = undefined;
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const getBorderRadius = (flatEdge, radius) => {
+    switch (flatEdge) {
+      case 'left':
+        return `0px ${radius}px ${radius}px 0px`;
+
+      case 'right':
+        return `${radius}px 0px 0px ${radius}px`;
+
+      case 'none':
+      default:
+        return `${radius}px`;
+    }
+  };
+
+  const tabbedHereStyle = (variant, colorTheme) => {
+    switch (variant) {
+      case 'primary':
+        return _styledComponents.css`
+          outline: none;
+          div {
+            outline: none;
+            box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
+            background-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
+            border-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
+            color: ${colorTheme === 'dark' ? _styles.COLORS.primary_500 : _styles.COLORS.white};
+          }
+        `;
+
+      case 'secondary':
+        return _styledComponents.css`
+          outline: none;
+          div {
+            outline: none;
+            box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
+            background-color: ${colorTheme === 'dark' ? 'transparent' : _styles.COLORS.white};
+            border-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1 : colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.primary};
+            color: ${colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_500};
+          }
+        `;
+
+      case 'tertiary':
+        return _styledComponents.css`
+          outline: none;
+          div {
+            outline: none;
+            box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
+            background-color: ${_styles.COLORS.white};
+            border-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary};
+            color: ${colorTheme === 'teal' ? _styles.COLORS.accent1_500 : _styles.COLORS.primary_500};
+          }
+        `;
+
+      default:
+        return _styledComponents.css`
+          outline: none;
+          div {
+            outline: none;
+            box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
+            background-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
+            border-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
+            color: ${colorTheme === 'dark' ? _styles.COLORS.primary_500 : _styles.COLORS.white};
+          }
+        `;
+    }
+  };
+
+  const Primary = exports.Primary = _styledComponents2.default.button`
+border: none;
+background-color: transparent;
+cursor: pointer;
+padding: 0;
+margin: 0;
+box-sizing: border-box;
+min-height: ${props => props.size === 'big' ? '56px' : '48px'};
+&.loading-state {
+  cursor: wait;
+}
+&:focus:not(:focus-visible),
+&:focus:not(:focus-visible) > div.button-content {
+  outline: 0 !important;
+}
+div.button-content {
+  color: ${props => props?.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white};
+  background-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : props?.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary};
+  border-radius: ${props => getBorderRadius(props.flatEdge, 8)};
+  border-width: 2px;
+  border-style: solid;
+  border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : props?.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary};
+  font-family: ${_styles.TYPOGRAPHY.fontFamily};
+  font-weight: bold;
+  font-size: ${props => props.size === 'big' ? '20px' : props.size === 'small' ? '16px' : '18px'};
+  line-height: ${props => props.size === 'big' ? '24px' : props.size === 'small' ? '20px' : '24px'};
+  width: ${props => props.width};
+  position: relative;
+
+  min-height: ${props => props.size === 'big' ? '56px' : props.size === 'small' ? '32px' : '40px'};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  // paddings have -2px for border
+  padding: ${props => props.size === 'big' ? '14px 18px' : props.size === 'small' ? '4px 10px' : '6px 14px'};
+
+  span.loading {
+    opacity: 0;
+  }
+  .icon {
+    margin-left: -4px;
+    margin-top: -2px;
+    margin-bottom: -2px;
+    width: ${props => props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px'};
+    height: ${props => props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px'};
+    svg {
+      width: ${props => props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px'} !important;
+      height: ${props => props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px'} !important;
+    }
+  }
+
+  div {
+    position: absolute;
+    width: 100%;
+    svg {
+      height: ${props => props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px'};
+      width: ${props => props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px'};
+      path {
+        fill: ${props => props.colorTheme === 'dark' ? _styles.COLORS.primary : _styles.COLORS.white};
+      }
+    }
+  }
+}
+&:hover > div.button-content,
+&.hover-state > div.button-content {
+  background-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
+  border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
+  color: ${props => props?.colorTheme === 'dark' ? _styles.COLORS.primary_600 : _styles.COLORS.white};
+}
+&:active > div.button-content,
+&.active-state > div.button-content {
+  background-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_800};
+  border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_800};
+  box-shadow: none !important;
+  color: ${props => props?.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white};
+}
+${props => props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : ''}
+&.focus-state {
+  ${props => tabbedHereStyle('primary', props?.colorTheme)};
+}
+&:disabled,
+&.disabled-state {
+  cursor: not-allowed;
+}
+&:disabled > div.button-content,
+&.disabled-state > div.button-content {
+  background-color: ${props => props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100};
+  color: ${props => props.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.neutral_300};
+  border-color: ${props => props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100};
+  cursor: not-allowed;
+  &:hover,
+  &:active {
+    background-color: ${props => props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100};
+    color: ${props => props.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.neutral_300};
+    border-color: ${props => props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100};
+  }
+}
+`;
+  const Secondary = exports.Secondary = (0, _styledComponents2.default)(Primary)`
+div.button-content {
+  color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : props?.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary};
+  border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : props?.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary};
+  background-color: transparent;
+  div svg path {
+    fill: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary};
+  }
+}
+&:hover > div.button-content,
+&.hover-state > div.button-content {
+  color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_700};
+  border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_700};
+  background-color: transparent;
+  div {
+    svg {
+      path {
+        fill: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700};
+      }
+    }
+  }
+}
+&:active > div.button-content,
+&.active-state > div.button-content {
+  background-color: white;
+  color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_300 : _styles.COLORS.primary_800};
+  border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_300 : _styles.COLORS.primary_800};
+  background-color: transparent;
+  div {
+    svg {
+      path {
+        fill: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : props?.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_800};
+      }
+    }
+  }
+}
+&:disabled,
+&.disabled-state {
+  cursor: not-allowed;
+}
+&:disabled > div.button-content,
+&.disabled-state > div.button-content {
+  background-color: transparent;
+  color: ${props => props?.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_300};
+  border-color: ${props => props?.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100};
+  cursor: not-allowed;
+}
+${props => props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : ''}
+&.focus-state {
+  ${props => tabbedHereStyle('secondary', props?.colorTheme)};
+}
+`;
+  const Tertiary = exports.Tertiary = (0, _styledComponents2.default)(Primary)`
+div.button-content {
+  color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary_500};
+  border-color: transparent;
+  background-color: transparent;
+  border-width: 1px;
+  div svg path {
+    fill: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary};
+  }
+}
+&:hover > div.button-content,
+&.hover-state > div.button-content {
+  background-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20};
+  color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700};
+  border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20};
+  div {
+    svg {
+      path {
+        fill: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700};
+      }
+    }
+  }
+}
+&:active > div.button-content,
+&.active-state > div.button-content {
+  background-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_100 : _styles.COLORS.primary_100};
+  color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : _styles.COLORS.primary_800};
+  border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_100 : _styles.COLORS.primary_100};
+  div {
+    svg {
+      path {
+        fill: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : _styles.COLORS.primary_800};
+      }
+    }
+  }
+}
+&:disabled,
+&.disabled-state {
+  cursor: not-allowed;
+}
+&:disabled > div.button-content,
+&.disabled-state > div.button-content {
+  background-color: white !important;
+  color: ${_styles.COLORS.neutral_300};
+  border-color: transparent;
+  cursor: not-allowed;
+}
+&:disabled,
+&.disabled-state {
+  cursor: not-allowed;
+}
+&:disabled > div.button-content,
+&.disabled-state > div.button-content {
+  background-color: white !important;
+  color: ${_styles.COLORS.neutral_300};
+  border-color: transparent !important;
+  cursor: not-allowed;
+}
+${props => props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : ''}
+&.focus-state {
+  ${props => tabbedHereStyle('tertiary', props?.colorTheme)};
+}
+`;
+  const Correct = exports.Correct = (0, _styledComponents2.default)(Primary)`
+div.button-content {
+  color: white;
+  border-color: ${_styles.COLORS.correct_500};
+  background-color: ${_styles.COLORS.correct_500};
+}
+&:hover > div.button-content,
+&.hover-state > div.button-content {
+  border-color: ${_styles.COLORS.correct_700};
+  background-color: ${_styles.COLORS.correct_700};
+}
+&:focus > div.button-content,
+&.focus-state > div.button-content {
+  border-color: ${_styles.COLORS.correct_700};
+  background-color: ${_styles.COLORS.correct_700};
+}
+&:active > div.button-content,
+&.active-state > div.button-content {
+  border-color: ${_styles.COLORS.correct_800};
+  background-color: ${_styles.COLORS.correct_800};
+}
+&:disabled,
+&.disabled-state {
+  cursor: not-allowed;
+}
+&:disabled > div.button-content,
+&.disabled-state > div.button-content {
+  background-color: ${_styles.COLORS.neutral_100};
+  color: ${_styles.COLORS.neutral_300};
+  border-color: ${_styles.COLORS.neutral_100};
+  cursor: not-allowed;
+  &:hover,
+  &:active {
+    background-color: ${_styles.COLORS.neutral_100};
+    color: ${_styles.COLORS.neutral_300};
+    border-color: ${_styles.COLORS.neutral_100};
+  }
+}
+`;
+  const Critical = exports.Critical = (0, _styledComponents2.default)(Primary)`
+div.button-content {
+  color: white;
+  border-color: ${_styles.COLORS.critical_500};
+  background-color: ${_styles.COLORS.critical_500};
+}
+&:hover > div.button-content,
+&.hover-state > div.button-content {
+  border-color: ${_styles.COLORS.critical_700};
+  background-color: ${_styles.COLORS.critical_700};
+}
+&:focus > div.button-content,
+&.focus-state > div.button-content {
+  border-color: ${_styles.COLORS.critical_700};
+  background-color: ${_styles.COLORS.critical_700};
+}
+&:active > div.button-content,
+&.active-state > div.button-content {
+  border-color: ${_styles.COLORS.critical_800};
+  background-color: ${_styles.COLORS.critical_800};
+}
+&:disabled,
+&.disabled-state {
+  cursor: not-allowed;
+}
+&:disabled > div.button-content,
+&.disabled-state > div.button-content {
+  background-color: ${_styles.COLORS.neutral_100};
+  color: ${_styles.COLORS.neutral_300};
+  border-color: ${_styles.COLORS.neutral_100};
+  cursor: not-allowed;
+  &:hover,
+  &:active {
+    background-color: ${_styles.COLORS.neutral_100};
+    color: ${_styles.COLORS.neutral_300};
+    border-color: ${_styles.COLORS.neutral_100};
+  }
+}
+`;
+  const Text = exports.Text = _styledComponents2.default.button`
+color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary};
+background-color: transparent;
+padding: 0;
+border: none;
+text-decoration: underline;
+font-size: ${props => props.size === 'big' ? '22px' : props.size === 'small' ? '16px' : '19px'};
+line-height: ${props => props.size === 'big' ? '26.4px' : props.size === 'small' ? '19.2px' : '22.8px'};
+font-weight: bold;
+font-family: inherit;
+cursor: pointer;
+
+&:hover,
+&:focus,
+&.hover-state,
+&.focus-state {
+  color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700};
+  background: transparent;
+}
+&:active,
+&.active-state {
+  color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : _styles.COLORS.primary_800};
+  background: transparent;
+}
+&:disabled,
+&.disabled-state {
+  color: ${_styles.COLORS.neutral_500};
+  background: transparent;
+  cursor: not-allowed;
+}
+`;
+});
+//# sourceMappingURL=CommonStyling.js.map

package/dist/umd/Button/CommonStyling.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Button/CommonStyling.tsx"],"names":["getBorderRadius","radius","tabbedHereStyle","css","COLORS","focus_25","focus","colorTheme","primary_700","white","primary","primary_500","Primary","styled","button","props","TYPOGRAPHY","fontFamily","width","primary_800","neutral_100","neutral_300","Secondary","Tertiary","primary_20","primary_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Text","neutral_500"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { ButtonProps } from './Button'\r\nimport { COLORS, TYPOGRAPHY } from '../styles';\r\n\r\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\r\n    switch(flatEdge)\r\n    {\r\n        case 'left':\r\n            return `0px ${radius}px ${radius}px 0px`;\r\n        \r\n        case 'right':\r\n            return `${radius}px 0px 0px ${radius}px`;\r\n\r\n        case 'none':\r\n        default:\r\n            return `${radius}px`;\r\n    }\r\n}\r\n\r\nconst tabbedHereStyle = (variant: string, colorTheme?: string) => {\r\n    switch (variant) {\r\n      case 'primary':\r\n        return css`\r\n          outline: none;\r\n          div {\r\n            outline: none;\r\n            box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n            background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\r\n            border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\r\n            color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\r\n          }\r\n        `;\r\n      case 'secondary':\r\n        return css`\r\n          outline: none;\r\n          div {\r\n            outline: none;\r\n            box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n            background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};\r\n            border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};\r\n            color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};\r\n          }\r\n        `;\r\n      case 'tertiary':\r\n        return css`\r\n          outline: none;\r\n          div {\r\n            outline: none;\r\n            box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n            background-color: ${COLORS.white};\r\n            border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};\r\n            color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};\r\n          }\r\n        `;\r\n  \r\n      default:\r\n        return css`\r\n          outline: none;\r\n          div {\r\n            outline: none;\r\n            box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n            background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\r\n            border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\r\n            color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\r\n          }\r\n        `;\r\n    }\r\n  };\r\n  \r\n\r\nexport const Primary = styled.button<ButtonProps>`\r\nborder: none;\r\nbackground-color: transparent;\r\ncursor: pointer;\r\npadding: 0;\r\nmargin: 0;\r\nbox-sizing: border-box;\r\nmin-height: ${props => (props.size === 'big' ? '56px' : '48px')};\r\n&.loading-state {\r\n  cursor: wait;\r\n}\r\n&:focus:not(:focus-visible),\r\n&:focus:not(:focus-visible) > div.button-content {\r\n  outline: 0 !important;\r\n}\r\ndiv.button-content {\r\n  color: ${props => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\r\n  background-color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n  border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\r\n  border-width: 2px;\r\n  border-style: solid;\r\n  border-color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n  font-family: ${TYPOGRAPHY.fontFamily};\r\n  font-weight: bold;\r\n  font-size: ${props => (props.size === 'big' ? '20px' : props.size === 'small' ? '16px' : '18px')};\r\n  line-height: ${props => (props.size === 'big' ? '24px' : props.size === 'small' ? '20px' : '24px')};\r\n  width: ${props => props.width};\r\n  position: relative;\r\n\r\n  min-height: ${props => (props.size === 'big' ? '56px' : props.size === 'small' ? '32px' : '40px')};\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 4px;\r\n  // paddings have -2px for border\r\n  padding: ${props => (props.size === 'big' ? '14px 18px' : props.size === 'small' ? '4px 10px' : '6px 14px')};\r\n\r\n  span.loading {\r\n    opacity: 0;\r\n  }\r\n  .icon {\r\n    margin-left: -4px;\r\n    margin-top: -2px;\r\n    margin-bottom: -2px;\r\n    width: ${props => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')};\r\n    height: ${props => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')};\r\n    svg {\r\n      width: ${props => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')} !important;\r\n      height: ${props => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')} !important;\r\n    }\r\n  }\r\n\r\n  div {\r\n    position: absolute;\r\n    width: 100%;\r\n    svg {\r\n      height: ${props => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')};\r\n      width: ${props => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')};\r\n      path {\r\n        fill: ${props => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\r\n      }\r\n    }\r\n  }\r\n}\r\n&:hover > div.button-content,\r\n&.hover-state > div.button-content {\r\n  background-color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\r\n  border-color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\r\n  color: ${props => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\r\n}\r\n&:active > div.button-content,\r\n&.active-state > div.button-content {\r\n  background-color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\r\n  border-color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\r\n  box-shadow: none !important;\r\n  color: ${props => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\r\n}\r\n${props => (props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '')}\r\n&.focus-state {\r\n  ${props => tabbedHereStyle('primary', props?.colorTheme)};\r\n}\r\n&:disabled,\r\n&.disabled-state {\r\n  cursor: not-allowed;\r\n}\r\n&:disabled > div.button-content,\r\n&.disabled-state > div.button-content {\r\n  background-color: ${props => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n  color: ${props => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\r\n  border-color: ${props => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n  cursor: not-allowed;\r\n  &:hover,\r\n  &:active {\r\n    background-color: ${props => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n    color: ${props => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\r\n    border-color: ${props => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n  }\r\n}\r\n`;\r\n\r\nexport const Secondary = styled(Primary)<ButtonProps>`\r\ndiv.button-content {\r\n  color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n  border-color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n  background-color: transparent;\r\n  div svg path {\r\n    fill: ${props => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\r\n  }\r\n}\r\n&:hover > div.button-content,\r\n&.hover-state > div.button-content {\r\n  color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\r\n  border-color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\r\n  background-color: transparent;\r\n  div {\r\n    svg {\r\n      path {\r\n        fill: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\r\n      }\r\n    }\r\n  }\r\n}\r\n&:active > div.button-content,\r\n&.active-state > div.button-content {\r\n  background-color: white;\r\n  color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\r\n  border-color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\r\n  background-color: transparent;\r\n  div {\r\n    svg {\r\n      path {\r\n        fill: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\r\n      }\r\n    }\r\n  }\r\n}\r\n&:disabled,\r\n&.disabled-state {\r\n  cursor: not-allowed;\r\n}\r\n&:disabled > div.button-content,\r\n&.disabled-state > div.button-content {\r\n  background-color: transparent;\r\n  color: ${props => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\r\n  border-color: ${props => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n  cursor: not-allowed;\r\n}\r\n${props => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\r\n&.focus-state {\r\n  ${props => tabbedHereStyle('secondary', props?.colorTheme)};\r\n}\r\n`;\r\n\r\nexport const Tertiary = styled(Primary)<ButtonProps>`\r\ndiv.button-content {\r\n  color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\r\n  border-color: transparent;\r\n  background-color: transparent;\r\n  border-width: 1px;\r\n  div svg path {\r\n    fill: ${props => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\r\n  }\r\n}\r\n&:hover > div.button-content,\r\n&.hover-state > div.button-content {\r\n  background-color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\r\n  color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\r\n  border-color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\r\n  div {\r\n    svg {\r\n      path {\r\n        fill: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\r\n      }\r\n    }\r\n  }\r\n}\r\n&:active > div.button-content,\r\n&.active-state > div.button-content {\r\n  background-color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\r\n  color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\r\n  border-color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\r\n  div {\r\n    svg {\r\n      path {\r\n        fill: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\r\n      }\r\n    }\r\n  }\r\n}\r\n&:disabled,\r\n&.disabled-state {\r\n  cursor: not-allowed;\r\n}\r\n&:disabled > div.button-content,\r\n&.disabled-state > div.button-content {\r\n  background-color: white !important;\r\n  color: ${COLORS.neutral_300};\r\n  border-color: transparent;\r\n  cursor: not-allowed;\r\n}\r\n&:disabled,\r\n&.disabled-state {\r\n  cursor: not-allowed;\r\n}\r\n&:disabled > div.button-content,\r\n&.disabled-state > div.button-content {\r\n  background-color: white !important;\r\n  color: ${COLORS.neutral_300};\r\n  border-color: transparent !important;\r\n  cursor: not-allowed;\r\n}\r\n${props => (props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '')}\r\n&.focus-state {\r\n  ${props => tabbedHereStyle('tertiary', props?.colorTheme)};\r\n}\r\n`;\r\n\r\nexport const Correct = styled(Primary)<ButtonProps>`\r\ndiv.button-content {\r\n  color: white;\r\n  border-color: ${COLORS.correct_500};\r\n  background-color: ${COLORS.correct_500};\r\n}\r\n&:hover > div.button-content,\r\n&.hover-state > div.button-content {\r\n  border-color: ${COLORS.correct_700};\r\n  background-color: ${COLORS.correct_700};\r\n}\r\n&:focus > div.button-content,\r\n&.focus-state > div.button-content {\r\n  border-color: ${COLORS.correct_700};\r\n  background-color: ${COLORS.correct_700};\r\n}\r\n&:active > div.button-content,\r\n&.active-state > div.button-content {\r\n  border-color: ${COLORS.correct_800};\r\n  background-color: ${COLORS.correct_800};\r\n}\r\n&:disabled,\r\n&.disabled-state {\r\n  cursor: not-allowed;\r\n}\r\n&:disabled > div.button-content,\r\n&.disabled-state > div.button-content {\r\n  background-color: ${COLORS.neutral_100};\r\n  color: ${COLORS.neutral_300};\r\n  border-color: ${COLORS.neutral_100};\r\n  cursor: not-allowed;\r\n  &:hover,\r\n  &:active {\r\n    background-color: ${COLORS.neutral_100};\r\n    color: ${COLORS.neutral_300};\r\n    border-color: ${COLORS.neutral_100};\r\n  }\r\n}\r\n`;\r\n\r\nexport const Critical = styled(Primary)<ButtonProps>`\r\ndiv.button-content {\r\n  color: white;\r\n  border-color: ${COLORS.critical_500};\r\n  background-color: ${COLORS.critical_500};\r\n}\r\n&:hover > div.button-content,\r\n&.hover-state > div.button-content {\r\n  border-color: ${COLORS.critical_700};\r\n  background-color: ${COLORS.critical_700};\r\n}\r\n&:focus > div.button-content,\r\n&.focus-state > div.button-content {\r\n  border-color: ${COLORS.critical_700};\r\n  background-color: ${COLORS.critical_700};\r\n}\r\n&:active > div.button-content,\r\n&.active-state > div.button-content {\r\n  border-color: ${COLORS.critical_800};\r\n  background-color: ${COLORS.critical_800};\r\n}\r\n&:disabled,\r\n&.disabled-state {\r\n  cursor: not-allowed;\r\n}\r\n&:disabled > div.button-content,\r\n&.disabled-state > div.button-content {\r\n  background-color: ${COLORS.neutral_100};\r\n  color: ${COLORS.neutral_300};\r\n  border-color: ${COLORS.neutral_100};\r\n  cursor: not-allowed;\r\n  &:hover,\r\n  &:active {\r\n    background-color: ${COLORS.neutral_100};\r\n    color: ${COLORS.neutral_300};\r\n    border-color: ${COLORS.neutral_100};\r\n  }\r\n}\r\n`;\r\n\r\nexport const Text = styled.button<ButtonProps>`\r\ncolor: ${props => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\r\nbackground-color: transparent;\r\npadding: 0;\r\nborder: none;\r\ntext-decoration: underline;\r\nfont-size: ${props => (props.size === 'big' ? '22px' : props.size === 'small' ? '16px' : '19px')};\r\nline-height: ${props => (props.size === 'big' ? '26.4px' : props.size === 'small' ? '19.2px' : '22.8px')};\r\nfont-weight: bold;\r\nfont-family: inherit;\r\ncursor: pointer;\r\n\r\n&:hover,\r\n&:focus,\r\n&.hover-state,\r\n&.focus-state {\r\n  color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\r\n  background: transparent;\r\n}\r\n&:active,\r\n&.active-state {\r\n  color: ${props => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\r\n  background: transparent;\r\n}\r\n&:disabled,\r\n&.disabled-state {\r\n  color: ${COLORS.neutral_500};\r\n  background: transparent;\r\n  cursor: not-allowed;\r\n}\r\n`;"],"file":"CommonStyling.js"}