@laerdal/life-react-components 3.4.3 → 3.5.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["getBorderRadius","flatEdge","radius","tabbedHereStyle","variant","colorTheme","css","COLORS","focus_25","focus","accent1_700","primary_100","primary_700","primary_600","white","accent1","primary_800","primary","primary_500","accent1_500","Primary","styled","button","props","size","Size","Large","ComponentTextStyle","Bold","Small","width","minWidth","Medium","iconOnly","accent1_800","primary_200","tabbedHere","neutral_100","neutral_300","Secondary","primary_300","Tertiary","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","children","type","testId","disabled","icon","loading","renderProps","supressFocusRef","React","useRef","useState","setTabbedHere","renderContent","className","e","current","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\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/js/Button/CommonStyling.d.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from './Button';
+export declare const Primary: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
+export declare const Secondary: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
+export declare const Tertiary: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
+export declare const Correct: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
+export declare const Critical: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
+export declare const Text: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;

package/dist/js/Button/CommonStyling.js

@@ -0,0 +1,189 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Text = exports.Critical = exports.Correct = exports.Tertiary = exports.Secondary = exports.Primary = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var getBorderRadius = function getBorderRadius(flatEdge, radius) {
+  switch (flatEdge) {
+    case 'left':
+      return "0px ".concat(radius, "px ").concat(radius, "px 0px");
+
+    case 'right':
+      return "".concat(radius, "px 0px 0px ").concat(radius, "px");
+
+    case 'none':
+    default:
+      return "".concat(radius, "px");
+  }
+};
+
+var tabbedHereStyle = function tabbedHereStyle(variant, colorTheme) {
+  switch (variant) {
+    case 'primary':
+      return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          outline: none;\n          div {\n            outline: none;\n            box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n            background-color: ", ";\n            border-color: ", ";\n            color: ", ";\n          }\n        "])), _styles.COLORS.focus_25, _styles.COLORS.focus, colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700, colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700, colorTheme === 'dark' ? _styles.COLORS.primary_500 : _styles.COLORS.white);
+
+    case 'secondary':
+      return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          outline: none;\n          div {\n            outline: none;\n            box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n            background-color: ", ";\n            border-color: ", ";\n            color: ", ";\n          }\n        "])), _styles.COLORS.focus_25, _styles.COLORS.focus, colorTheme === 'dark' ? 'transparent' : _styles.COLORS.white, colorTheme === 'teal' ? _styles.COLORS.accent1 : colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.primary, colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_500);
+
+    case 'tertiary':
+      return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          outline: none;\n          div {\n            outline: none;\n            box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n            background-color: ", ";\n            border-color: ", ";\n            color: ", ";\n          }\n        "])), _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.white, colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary, colorTheme === 'teal' ? _styles.COLORS.accent1_500 : _styles.COLORS.primary_500);
+
+    default:
+      return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          outline: none;\n          div {\n            outline: none;\n            box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n            background-color: ", ";\n            border-color: ", ";\n            color: ", ";\n          }\n        "])), _styles.COLORS.focus_25, _styles.COLORS.focus, colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700, colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700, colorTheme === 'dark' ? _styles.COLORS.primary_500 : _styles.COLORS.white);
+  }
+};
+
+var Primary = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\nborder: none;\nbackground-color: transparent;\ncursor: pointer;\npadding: 0;\nmargin: 0;\nbox-sizing: border-box;\nmin-height: ", ";\n&.loading-state {\n  cursor: wait;\n}\n&:focus:not(:focus-visible),\n&:focus:not(:focus-visible) > div.button-content {\n  outline: 0 !important;\n}\ndiv.button-content {\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  border-width: 2px;\n  border-style: solid;\n  border-color: ", ";\n  font-family: ", ";\n  font-weight: bold;\n  font-size: ", ";\n  line-height: ", ";\n  width: ", ";\n  position: relative;\n\n  min-height: ", ";\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  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 === 'big' ? '56px' : '48px';
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white;
+}, 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 getBorderRadius(props.flatEdge, 8);
+}, 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;
+}, _styles.TYPOGRAPHY.fontFamily, function (props) {
+  return props.size === 'big' ? '20px' : props.size === 'small' ? '16px' : '18px';
+}, function (props) {
+  return props.size === 'big' ? '24px' : props.size === 'small' ? '20px' : '24px';
+}, function (props) {
+  return props.width;
+}, function (props) {
+  return props.size === 'big' ? '56px' : props.size === 'small' ? '32px' : '40px';
+}, function (props) {
+  return props.size === 'big' ? '14px 18px' : props.size === 'small' ? '4px 10px' : '6px 14px';
+}, function (props) {
+  return props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px';
+}, function (props) {
+  return props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px';
+}, function (props) {
+  return props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px';
+}, function (props) {
+  return props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px';
+}, function (props) {
+  return props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px';
+}, function (props) {
+  return props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px';
+}, function (props) {
+  return props.colorTheme === 'dark' ? _styles.COLORS.primary : _styles.COLORS.white;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700;
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_600 : _styles.COLORS.white;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_800;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_800;
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white;
+}, function (props) {
+  return props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '';
+}, function (props) {
+  return tabbedHereStyle('primary', props === null || props === void 0 ? void 0 : props.colorTheme);
+}, function (props) {
+  return props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100;
+}, function (props) {
+  return props.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.neutral_300;
+}, function (props) {
+  return props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100;
+}, function (props) {
+  return props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100;
+}, function (props) {
+  return props.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.neutral_300;
+}, function (props) {
+  return props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100;
+});
+
+exports.Primary = Primary;
+var Secondary = (0, _styledComponents.default)(Primary)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\ndiv.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) {
+  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;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_300 : _styles.COLORS.primary_800;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_300 : _styles.COLORS.primary_800;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_800;
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_300;
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100;
+}, function (props) {
+  return props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '';
+}, function (props) {
+  return tabbedHereStyle('secondary', props === null || props === void 0 ? void 0 : props.colorTheme);
+});
+exports.Secondary = Secondary;
+var Tertiary = (0, _styledComponents.default)(Primary)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\ndiv.button-content {\n  color: ", ";\n  border-color: transparent;\n  background-color: transparent;\n  border-width: 1px;\n  div svg path {\n    fill: ", ";\n  }\n}\n&:hover > div.button-content,\n&.hover-state > div.button-content {\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  div {\n    svg {\n      path {\n        fill: ", ";\n      }\n    }\n  }\n}\n&:active > div.button-content,\n&.active-state > div.button-content {\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  div {\n    svg {\n      path {\n        fill: ", ";\n      }\n    }\n  }\n}\n&:disabled,\n&.disabled-state {\n  cursor: not-allowed;\n}\n&:disabled > div.button-content,\n&.disabled-state > div.button-content {\n  background-color: white !important;\n  color: ", ";\n  border-color: transparent;\n  cursor: not-allowed;\n}\n&:disabled,\n&.disabled-state {\n  cursor: not-allowed;\n}\n&:disabled > div.button-content,\n&.disabled-state > div.button-content {\n  background-color: white !important;\n  color: ", ";\n  border-color: transparent !important;\n  cursor: not-allowed;\n}\n", "\n&.focus-state {\n  ", ";\n}\n"])), function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary_500;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_100 : _styles.COLORS.primary_100;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : _styles.COLORS.primary_800;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_100 : _styles.COLORS.primary_100;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : _styles.COLORS.primary_800;
+}, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, function (props) {
+  return props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '';
+}, function (props) {
+  return tabbedHereStyle('tertiary', props === null || props === void 0 ? void 0 : props.colorTheme);
+});
+exports.Tertiary = Tertiary;
+var Correct = (0, _styledComponents.default)(Primary)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\ndiv.button-content {\n  color: white;\n  border-color: ", ";\n  background-color: ", ";\n}\n&:hover > div.button-content,\n&.hover-state > div.button-content {\n  border-color: ", ";\n  background-color: ", ";\n}\n&:focus > div.button-content,\n&.focus-state > div.button-content {\n  border-color: ", ";\n  background-color: ", ";\n}\n&:active > div.button-content,\n&.active-state > div.button-content {\n  border-color: ", ";\n  background-color: ", ";\n}\n&:disabled,\n&.disabled-state {\n  cursor: not-allowed;\n}\n&:disabled > div.button-content,\n&.disabled-state > div.button-content {\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  cursor: not-allowed;\n  &:hover,\n  &:active {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n}\n"])), _styles.COLORS.correct_500, _styles.COLORS.correct_500, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_800, _styles.COLORS.correct_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
+exports.Correct = Correct;
+var Critical = (0, _styledComponents.default)(Primary)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\ndiv.button-content {\n  color: white;\n  border-color: ", ";\n  background-color: ", ";\n}\n&:hover > div.button-content,\n&.hover-state > div.button-content {\n  border-color: ", ";\n  background-color: ", ";\n}\n&:focus > div.button-content,\n&.focus-state > div.button-content {\n  border-color: ", ";\n  background-color: ", ";\n}\n&:active > div.button-content,\n&.active-state > div.button-content {\n  border-color: ", ";\n  background-color: ", ";\n}\n&:disabled,\n&.disabled-state {\n  cursor: not-allowed;\n}\n&:disabled > div.button-content,\n&.disabled-state > div.button-content {\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  cursor: not-allowed;\n  &:hover,\n  &:active {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n}\n"])), _styles.COLORS.critical_500, _styles.COLORS.critical_500, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_800, _styles.COLORS.critical_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
+exports.Critical = Critical;
+
+var Text = _styledComponents.default.button(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\ncolor: ", ";\nbackground-color: transparent;\npadding: 0;\nborder: none;\ntext-decoration: underline;\nfont-size: ", ";\nline-height: ", ";\nfont-weight: bold;\nfont-family: inherit;\ncursor: pointer;\n\n&:hover,\n&:focus,\n&.hover-state,\n&.focus-state {\n  color: ", ";\n  background: transparent;\n}\n&:active,\n&.active-state {\n  color: ", ";\n  background: transparent;\n}\n&:disabled,\n&.disabled-state {\n  color: ", ";\n  background: transparent;\n  cursor: not-allowed;\n}\n"])), function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary;
+}, function (props) {
+  return props.size === 'big' ? '22px' : props.size === 'small' ? '16px' : '19px';
+}, function (props) {
+  return props.size === 'big' ? '26.4px' : props.size === 'small' ? '19.2px' : '22.8px';
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : _styles.COLORS.primary_800;
+}, _styles.COLORS.neutral_500);
+
+exports.Text = Text;
+//# sourceMappingURL=CommonStyling.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Button/CommonStyling.tsx"],"names":["getBorderRadius","flatEdge","radius","tabbedHereStyle","variant","colorTheme","css","COLORS","focus_25","focus","accent1_700","primary_100","primary_700","primary_500","white","accent1","primary_800","primary","accent1_500","Primary","styled","button","props","size","TYPOGRAPHY","fontFamily","width","primary_600","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"],"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"}

package/dist/js/Button/DualFunctionButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ButtonProps } from './Button';
+import { DropdownCustomizationProps } from '../Dropdown/DropdownContent';
+export interface ButtonOption {
+    label: string;
+}
+export interface DualButtonProps extends ButtonProps {
+    dropdownCustomizationProps: DropdownCustomizationProps;
+    dropdownMenuValues?: string[];
+    setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;
+}
+declare const DualFunctionButton: React.FunctionComponent<DualButtonProps>;
+export default DualFunctionButton;

package/dist/js/Button/DualFunctionButton.js

@@ -0,0 +1,161 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _Button = _interopRequireDefault(require("./Button"));
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _CommonStyling = require("../Dropdown/CommonStyling");
+
+var _types = require("../types");
+
+var _DropdownContent = _interopRequireDefault(require("../Dropdown/DropdownContent"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "id", "dropdownMenuValues", "setDropdownMenuValues", "dropdownCustomizationProps"],
+    _excluded2 = ["loading", "icon", "onClick"];
+
+var _templateObject;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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  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) {
+  var _ref$children = _ref.children,
+      children = _ref$children === void 0 ? 'Primary Button' : _ref$children,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'button' : _ref$type,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 'auto' : _ref$width,
+      testId = _ref.testId,
+      disabled = _ref.disabled,
+      id = _ref.id,
+      dropdownMenuValues = _ref.dropdownMenuValues,
+      setDropdownMenuValues = _ref.setDropdownMenuValues,
+      dropdownCustomizationProps = _ref.dropdownCustomizationProps,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  // Let's filter out properties that we don't need to render.
+  var loading = props.loading,
+      icon = props.icon,
+      onClick = props.onClick,
+      renderProps = _objectWithoutProperties(props, _excluded2);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      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,
+    locked: false,
+    disabled: false,
+    margin: ""
+  }, /*#__PURE__*/React.createElement(_Button.default, _extends({}, renderProps, {
+    onClick: onClick,
+    disabled: disabled,
+    type: type,
+    loading: loading,
+    icon: icon,
+    size: size,
+    width: width,
+    variant: variant,
+    flatEdge: "right"
+  }), children), /*#__PURE__*/React.createElement(_DropdownContent.default, {
+    customizationProps: dropdownCustomizationProps,
+    filter: "",
+    selectedValues: dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues,
+    setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
+    isButton: true,
+    setIsOpen: setIsOpen,
+    focused: focused,
+    setFocused: setFocused,
+    hideOnClickOutside: true,
+    size: size,
+    isOpen: isOpen,
+    id: id !== null && id !== void 0 ? id : 'dropdownId',
+    messageOnNoResults: "",
+    alignLeft: true
+  })), /*#__PURE__*/React.createElement(_Button.default, _extends({
+    variant: variant
+  }, renderProps, {
+    disabled: disabled,
+    type: type,
+    size: size,
+    minWidth: 'unset',
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    },
+    icon: isOpen ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropUp, {
+      size: "16px"
+    }) : /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropDown, {
+      size: "16px"
+    }),
+    flatEdge: "left"
+  })));
+};
+
+DualFunctionButton.propTypes = {
+  dropdownMenuValues: _propTypes.default.arrayOf(_propTypes.default.string),
+  setDropdownMenuValues: _propTypes.default.func
+};
+var _default = DualFunctionButton;
+exports.default = _default;
+//# sourceMappingURL=DualFunctionButton.js.map

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

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

package/dist/js/Button/Iconbutton.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+interface Props {
+    id?: string;
+    variant?: 'primary' | 'secondary';
+    shape?: 'square' | 'circular';
+    action: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    hideOnLowWidth?: boolean;
+    flatEdge?: 'right' | 'left' | 'none' | undefined;
+    isInMobileMenu?: boolean;
+    disabled?: boolean;
+    useTransparentBackground?: boolean;
+    iconColor?: string;
+    unsetIconSize?: boolean;
+    tabIndex?: number;
+    borderRadius?: number;
+    onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;
+    tabbedHereBackgroundColor?: string;
+    type?: 'submit' | 'reset' | 'button' | undefined;
+    children?: React.ReactNode;
+    hidden?: boolean;
+}
+declare const IconButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;