@laerdal/life-react-components 3.5.1-dev.15 → 3.5.1-dev.17

package/dist/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","getBorderRadius","flatEdge","radius","concat","ButtonContentContainer","div","_templateObject","_taggedTemplateLiteral","ButtonPrimaryStyled","button","_templateObject2","props","size","Large","Bold","colorTheme","primary_800","white","Small","accent1","primary","width","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","neutral_100","neutral_300","ButtonSecondaryStyled","_templateObject3","primary_300","ButtonTertiaryStyled","_templateObject4","primary_500","accent1_20","primary_20","accent1_100","ButtonPositiveStyled","_templateObject5","correct_500","correct_700","correct_800","ButtonCriticalStyled","_templateObject6","critical_500","critical_700","critical_800","Button","forwardRef","_ref","ref","_ref$children","children","_ref$variant","variant","_ref$type","type","_ref$size","_ref$width","testId","disabled","icon","_objectWithoutProperties","_excluded","loading","renderProps","_excluded2","renderContent","className","ButtonStyled","_objectSpread","onMouseDown","propTypes","_pt","oneOf","bool","oneOfType","string","node"],"sources":["../../src/Button/Button.tsx"],"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';\r\nimport { COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\n\r\nconst getBorderRadius = (flatEdge: string | undefined, radius: number) => {\r\n  switch (flatEdge) {\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\nexport const ButtonContentContainer = styled.div`\r\n  min-width: 64px;\r\n`;\r\n\r\nexport const ButtonPrimaryStyled = styled.button<ButtonProps & {iconOnly: boolean}>`\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  margin: 0;\r\n  position: relative;\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  ${ButtonContentContainer} {\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\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\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: ${(props) => (props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px')};\r\n\r\n    span.icon:not(.loading) {\r\n      pointer-events: none;\r\n    }\r\n\r\n    span.loading {\r\n      opacity: 0;\r\n    }\r\n\r\n    .icon {\r\n      margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '' ))};\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    .label {\r\n      margin: 0 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 > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-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 > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\r\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${(props) => (props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles)}\r\n  }\r\n  &:disabled,\r\n  &.disabled-state {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\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  }\r\n`;\r\n\r\nexport const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)<ButtonProps>`\r\n  ${ButtonContentContainer} {\r\n    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    box-shadow: inset 0 0 0 2px ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n    \r\n    padding: ${(props) => (props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px')};\r\n  }\r\n\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\r\n    \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 > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\r\n    \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 > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: transparent;\r\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n  }\r\n`;\r\n\r\nexport const ButtonTertiaryStyled = styled(ButtonPrimaryStyled)<ButtonProps>`\r\n${ButtonContentContainer} {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_500)};\r\n    background-color: transparent;\r\n\r\n    div svg path {\r\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_500)};\r\n    }\r\n\r\n    padding: ${(props) => (props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px')};\r\n  }\r\n\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.primary_20)};\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_700)};\r\n\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_700)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : props.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.primary_100)};\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\r\n\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 > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: transparent !important;\r\n    color: ${() => COLORS.primary_700};\r\n    border-color: transparent !important;\r\n  }\r\n`;\r\n\r\nexport const ButtonPositiveStyled = styled(ButtonPrimaryStyled)<ButtonProps>`\r\n  ${ButtonContentContainer} {\r\n    color: white;\r\n    background-color: ${() => COLORS.correct_500};\r\n  }\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${() => COLORS.correct_700};\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${() => COLORS.correct_800};\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: ${() => COLORS.neutral_100};\r\n    color: ${() => COLORS.neutral_300};\r\n  }\r\n`;\r\n\r\nexport const ButtonCriticalStyled = styled(ButtonPrimaryStyled)<ButtonProps>`\r\n  ${ButtonContentContainer} {\r\n    color: white;\r\n    background-color: ${COLORS.critical_500};\r\n  }\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${COLORS.critical_700};\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${COLORS.critical_800};\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: ${COLORS.neutral_100};\r\n    color: ${COLORS.neutral_300};    \r\n  }\r\n`;\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /** Look and feel variant of the component. Defaults to 'primary'. */\r\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\r\n  /** Can be used in order to remove rounded corners on right or left edge of the button. Used by 'DualFunctionButton'. Defaults to 'undefined' */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** Size of the component. Small, Medium or Large. Defaults to 'medium' */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Color theme altering of the component. By default there is no altering applied. */\r\n  colorTheme?: 'teal' | 'dark';\r\n  /** Allows using inverted colors for outlining focus rect. Shown when component focused by keyboard. */\r\n  invertFocus?: boolean;\r\n  /** Can be used to set custom value for width style. Value is set for 'ButtonContent' container. */\r\n  width?: 'auto' | string;\r\n  /** If set, then 'opacity' of children container will be set to 0, and loading indicator will be shown.  */\r\n  loading?: boolean;\r\n  /** TestId. Will be set to the top level button component. */\r\n  testId?: string;\r\n  /** Icon that will be shown on the left of the children. */\r\n  icon?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Button component\r\n */\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  ({ children = '', variant = 'primary', type = 'button', size = Size.Medium, width = 'auto', testId, disabled, flatEdge, icon, ...props }, ref) => {\r\n    // Let's filter out properties that we don't need to render.\r\n    const { loading, ...renderProps } = props;\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 />}\r\n      </>\r\n    );\r\n\r\n    let ButtonStyled = ButtonPrimaryStyled;\r\n    switch (variant) {\r\n      case 'secondary':\r\n        ButtonStyled = ButtonSecondaryStyled;\r\n        break;\r\n      case 'tertiary':\r\n        ButtonStyled = ButtonTertiaryStyled;\r\n        break;\r\n      case 'positive':\r\n        ButtonStyled = ButtonPositiveStyled;\r\n        break;\r\n      case 'critical':\r\n        ButtonStyled = ButtonCriticalStyled;\r\n        break;\r\n    }\r\n\r\n    return (\r\n      <ButtonStyled\r\n        {...renderProps}\r\n        ref={ref}\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        data-testid={testId}\r\n        className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n        onMouseDown={defaultOnMouseDownHandler}>\r\n        <ButtonContentContainer>{renderContent()}</ButtonContentContainer>\r\n      </ButtonStyled>\r\n    );\r\n  },\r\n);\r\n\r\nexport default Button;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Button.js","names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","getBorderRadius","flatEdge","radius","concat","ButtonContentContainer","div","_templateObject","_taggedTemplateLiteral","ButtonPrimaryStyled","button","_templateObject2","props","size","Large","Bold","colorTheme","getColor","theme","Small","width","Medium","iconOnly","invertFocus","undefined","ButtonSecondaryStyled","_templateObject3","ButtonTertiaryStyled","_templateObject4","ButtonPositiveStyled","_templateObject5","ButtonCriticalStyled","_templateObject6","Button","forwardRef","_ref","ref","_ref$children","children","_ref$variant","variant","_ref$type","type","_ref$size","_ref$width","testId","disabled","icon","_objectWithoutProperties","_excluded","loading","renderProps","_excluded2","renderContent","className","ButtonStyled","_objectSpread","onMouseDown","propTypes","_pt","oneOf","bool","oneOfType","string","node"],"sources":["../../src/Button/Button.tsx"],"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';\r\nimport { COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\n\r\nconst getBorderRadius = (flatEdge: string | undefined, radius: number) => {\r\n  switch (flatEdge) {\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\nexport const ButtonContentContainer = styled.div`\r\n  min-width: 64px;\r\n`;\r\n\r\nexport const ButtonPrimaryStyled = styled.button<ButtonProps & {iconOnly: boolean}>`\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  margin: 0;\r\n  position: relative;\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  ${ButtonContentContainer} {\r\n    ${(props) =>\r\n      props.size === Size.Large\r\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))\r\n        : props.size === Size.Small\r\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))\r\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))};\r\n\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    border-radius: ${(props) => getBorderRadius(props.flatEdge, 8)};\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\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: ${(props) => (props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px')};\r\n\r\n    span.icon:not(.loading) {\r\n      pointer-events: none;\r\n    }\r\n\r\n    span.loading {\r\n      opacity: 0;\r\n    }\r\n\r\n    .icon {\r\n      margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '' ))};\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    .label {\r\n      margin: 0 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.getColor('primary', props.theme) : COLORS.getColor('white', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.colorTheme === 'dark' ? COLORS.getColor('primary_100', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('white', props.theme))};\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${(props) => (props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles)}\r\n  }\r\n  &:disabled,\r\n  &.disabled-state {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    pointer-events: none;\r\n    background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme))};\r\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('neutral_300', props.theme))};\r\n  }\r\n`;\r\n\r\nexport const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)<ButtonProps>`\r\n  ${ButtonContentContainer} {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    background-color: transparent;\r\n    div svg path {\r\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    }\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    \r\n    padding: ${(props) => (props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px')};\r\n  }\r\n\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n    \r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.colorTheme === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.colorTheme === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n    \r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: transparent;\r\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_300', props.theme))};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props?.colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme))};\r\n  }\r\n`;\r\n\r\nexport const ButtonTertiaryStyled = styled(ButtonPrimaryStyled)<ButtonProps>`\r\n${ButtonContentContainer} {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme))};\r\n    background-color: transparent;\r\n\r\n    div svg path {\r\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme))};\r\n    }\r\n\r\n    padding: ${(props) => (props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px')};\r\n  }\r\n\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1_20', props.theme) : props.colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('primary_20', props.theme))};\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1_100', props.theme) : props.colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('primary_100', props.theme))};\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: transparent !important;\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    border-color: transparent !important;\r\n  }\r\n`;\r\n\r\nexport const ButtonPositiveStyled = styled(ButtonPrimaryStyled)<ButtonProps>`\r\n  ${ButtonContentContainer} {\r\n    color: white;\r\n    background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('correct_700', props.theme)};\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('correct_800', props.theme)};\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const ButtonCriticalStyled = styled(ButtonPrimaryStyled)<ButtonProps>`\r\n  ${ButtonContentContainer} {\r\n    color: white;\r\n    background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};    \r\n  }\r\n`;\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /** Look and feel variant of the component. Defaults to 'primary'. */\r\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\r\n  /** Can be used in order to remove rounded corners on right or left edge of the button. Used by 'DualFunctionButton'. Defaults to 'undefined' */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** Size of the component. Small, Medium or Large. Defaults to 'medium' */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Color theme altering of the component. By default there is no altering applied. */\r\n  colorTheme?: 'teal' | 'dark';\r\n  /** Allows using inverted colors for outlining focus rect. Shown when component focused by keyboard. */\r\n  invertFocus?: boolean;\r\n  /** Can be used to set custom value for width style. Value is set for 'ButtonContent' container. */\r\n  width?: 'auto' | string;\r\n  /** If set, then 'opacity' of children container will be set to 0, and loading indicator will be shown.  */\r\n  loading?: boolean;\r\n  /** TestId. Will be set to the top level button component. */\r\n  testId?: string;\r\n  /** Icon that will be shown on the left of the children. */\r\n  icon?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Button component\r\n */\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  ({ children = '', variant = 'primary', type = 'button', size = Size.Medium, width = 'auto', testId, disabled, flatEdge, icon, ...props }, ref) => {\r\n    // Let's filter out properties that we don't need to render.\r\n    const { loading, ...renderProps } = props;\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 />}\r\n      </>\r\n    );\r\n\r\n    let ButtonStyled = ButtonPrimaryStyled;\r\n    switch (variant) {\r\n      case 'secondary':\r\n        ButtonStyled = ButtonSecondaryStyled;\r\n        break;\r\n      case 'tertiary':\r\n        ButtonStyled = ButtonTertiaryStyled;\r\n        break;\r\n      case 'positive':\r\n        ButtonStyled = ButtonPositiveStyled;\r\n        break;\r\n      case 'critical':\r\n        ButtonStyled = ButtonCriticalStyled;\r\n        break;\r\n    }\r\n\r\n    return (\r\n      <ButtonStyled\r\n        {...renderProps}\r\n        ref={ref}\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        data-testid={testId}\r\n        className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n        onMouseDown={defaultOnMouseDownHandler}>\r\n        <ButtonContentContainer>{renderContent()}</ButtonContentContainer>\r\n      </ButtonStyled>\r\n    );\r\n  },\r\n);\r\n\r\nexport default Button;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Button/Iconbutton.cjs

@@ -47,22 +47,48 @@ var IconButtonStyled = _styledComponents["default"].button(_templateObject2 || (
 });
 exports.IconButtonStyled = IconButtonStyled;
 var IconButtonStyledPrimary = (0, _styledComponents["default"])(IconButtonStyled)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.primary_500;
+  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('primary_500', props.theme);
 }, function (props) {
-  return props.iconColor || _styles.COLORS.white;
+  return props.iconColor || _styles.COLORS.getColor('white', props.theme);
 }, function (props) {
-  return props.iconColor || _styles.COLORS.white;
-}, IconButtonContentStyles, _styles.COLORS.primary_700, IconButtonContentStyles, IconButtonContentStyles, _styles.COLORS.white, IconButtonContentStyles, _styles.COLORS.primary_800, IconButtonContentStyles, IconButtonContentStyles, _styles.COLORS.white, IconButtonContentStyles, _styles.COLORS.neutral_200, _styles.COLORS.white, _styles.COLORS.white);
+  return props.iconColor || _styles.COLORS.getColor('white', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+});
 exports.IconButtonStyledPrimary = IconButtonStyledPrimary;
 var IconButtonStyledSecondary = (0, _styledComponents["default"])(IconButtonStyled)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.white;
+  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme);
 }, function (props) {
-  return props.iconColor || _styles.COLORS.neutral_600;
+  return props.iconColor || _styles.COLORS.getColor('neutral_600', props.theme);
 }, function (props) {
-  return props.iconColor || _styles.COLORS.neutral_600;
-}, IconButtonContentStyles, _styles.COLORS.primary_20, IconButtonContentStyles, IconButtonContentStyles, _styles.COLORS.primary_700, IconButtonContentStyles, _styles.COLORS.primary_100, IconButtonContentStyles, IconButtonContentStyles, _styles.COLORS.primary_800, IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.white;
-}, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
+  return props.iconColor || _styles.COLORS.getColor('neutral_600', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+});
 exports.IconButtonStyledSecondary = IconButtonStyledSecondary;
 var IconButton = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var id = _ref.id,

package/dist/Button/Iconbutton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_common","_TooltipWrapper","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","getBorderRadius","props","borderRadius","concat","getBorderRadiusStyle","radius","flatEdge","IconButtonContentStyles","styled","div","_taggedTemplateLiteral2","exports","IconButtonStyled","button","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","IconButtonStyledPrimary","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","IconButtonStyledSecondary","neutral_600","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","_ref","ref","id","variant","shape","action","children","disabled","tabIndex","type","hidden","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties2","render","ButtonVariant","jsx","onClick","event","stopPropagation","onMouseDown","defaultOnMouseDownHandler","undefined","propTypes","_propTypes","oneOf","func","isRequired","bool","string","number","node","_default"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\r\n  const radius = getBorderRadius(props);\r\n  switch (props.flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<HeaderItemProps>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${getBorderRadiusStyle};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.white};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.white};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${COLORS.primary_700};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${COLORS.primary_800};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${COLORS.neutral_200};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${COLORS.white};\r\n      }\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${COLORS.primary_700};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${COLORS.primary_100};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${COLORS.neutral_300};\r\n      }\r\n      fill: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      children,\r\n      useTransparentBackground,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          useTransparentBackground={useTransparentBackground}\r\n          iconColor={iconColor}\r\n          unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Iconbutton.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_common","_TooltipWrapper","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","getBorderRadius","props","borderRadius","concat","getBorderRadiusStyle","radius","flatEdge","IconButtonContentStyles","styled","div","_taggedTemplateLiteral2","exports","IconButtonStyled","button","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","IconButtonStyledPrimary","useTransparentBackground","COLORS","getColor","theme","iconColor","IconButtonStyledSecondary","IconButton","React","forwardRef","_ref","ref","id","variant","shape","action","children","disabled","tabIndex","type","hidden","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties2","render","ButtonVariant","jsx","onClick","event","stopPropagation","onMouseDown","defaultOnMouseDownHandler","undefined","propTypes","_propTypes","oneOf","func","isRequired","bool","string","number","node","_default"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\r\n  const radius = getBorderRadius(props);\r\n  switch (props.flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<HeaderItemProps>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${getBorderRadiusStyle};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.getColor('white', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.getColor('white', props.theme)};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('white', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      children,\r\n      useTransparentBackground,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          useTransparentBackground={useTransparentBackground}\r\n          iconColor={iconColor}\r\n          unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Button/Iconbutton.js

@@ -38,21 +38,47 @@ export var IconButtonStyled = styled.button(_templateObject2 || (_templateObject
   return props.invertFocus ? invertedFocusStyles : focusStyles;
 });
 export var IconButtonStyledPrimary = styled(IconButtonStyled)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : COLORS.primary_500;
+  return props.useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme);
 }, function (props) {
-  return props.iconColor || COLORS.white;
+  return props.iconColor || COLORS.getColor('white', props.theme);
 }, function (props) {
-  return props.iconColor || COLORS.white;
-}, IconButtonContentStyles, COLORS.primary_700, IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.primary_800, IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.neutral_200, COLORS.white, COLORS.white);
+  return props.iconColor || COLORS.getColor('white', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+});
 export var IconButtonStyledSecondary = styled(IconButtonStyled)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : COLORS.white;
+  return props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme);
 }, function (props) {
-  return props.iconColor || COLORS.neutral_600;
+  return props.iconColor || COLORS.getColor('neutral_600', props.theme);
 }, function (props) {
-  return props.iconColor || COLORS.neutral_600;
-}, IconButtonContentStyles, COLORS.primary_20, IconButtonContentStyles, IconButtonContentStyles, COLORS.primary_700, IconButtonContentStyles, COLORS.primary_100, IconButtonContentStyles, IconButtonContentStyles, COLORS.primary_800, IconButtonContentStyles, function (props) {
-  return props.useTransparentBackground ? 'transparent' : COLORS.white;
-}, COLORS.neutral_300, COLORS.neutral_300);
+  return props.iconColor || COLORS.getColor('neutral_600', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, IconButtonContentStyles, IconButtonContentStyles, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, IconButtonContentStyles, function (props) {
+  return props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+});
 export var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     variant = _ref.variant,

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.js","names":["React","styled","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","TooltipWrapper","jsx","_jsx","getBorderRadius","props","borderRadius","concat","getBorderRadiusStyle","radius","flatEdge","IconButtonContentStyles","div","_templateObject","_taggedTemplateLiteral","IconButtonStyled","button","_templateObject2","unsetIconSize","invertFocus","IconButtonStyledPrimary","_templateObject3","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","IconButtonStyledSecondary","_templateObject4","neutral_600","primary_20","primary_100","neutral_300","IconButton","forwardRef","_ref","ref","id","variant","shape","action","children","disabled","tabIndex","type","hidden","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties","_excluded","render","ButtonVariant","_objectSpread","onClick","event","stopPropagation","onMouseDown","undefined","propTypes","_pt","oneOf","func","isRequired","bool","string","number","node"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\r\n  const radius = getBorderRadius(props);\r\n  switch (props.flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<HeaderItemProps>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${getBorderRadiusStyle};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.white};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.white};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${COLORS.primary_700};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${COLORS.primary_800};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${COLORS.neutral_200};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${COLORS.white};\r\n      }\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${COLORS.primary_700};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${COLORS.primary_100};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${COLORS.neutral_300};\r\n      }\r\n      fill: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      children,\r\n      useTransparentBackground,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          useTransparentBackground={useTransparentBackground}\r\n          iconColor={iconColor}\r\n          unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Iconbutton.js","names":["React","styled","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","TooltipWrapper","jsx","_jsx","getBorderRadius","props","borderRadius","concat","getBorderRadiusStyle","radius","flatEdge","IconButtonContentStyles","div","_templateObject","_taggedTemplateLiteral","IconButtonStyled","button","_templateObject2","unsetIconSize","invertFocus","IconButtonStyledPrimary","_templateObject3","useTransparentBackground","getColor","theme","iconColor","IconButtonStyledSecondary","_templateObject4","IconButton","forwardRef","_ref","ref","id","variant","shape","action","children","disabled","tabIndex","type","hidden","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties","_excluded","render","ButtonVariant","_objectSpread","onClick","event","stopPropagation","onMouseDown","undefined","propTypes","_pt","oneOf","func","isRequired","bool","string","number","node"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\r\n  const radius = getBorderRadius(props);\r\n  switch (props.flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<HeaderItemProps>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${getBorderRadiusStyle};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.getColor('white', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.getColor('white', props.theme)};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('white', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      children,\r\n      useTransparentBackground,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          useTransparentBackground={useTransparentBackground}\r\n          iconColor={iconColor}\r\n          unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCard.cjs

@@ -21,9 +21,19 @@ var _excluded = ["title", "description", "tags", "progress", "icon", "variant",
 var _templateObject, _templateObject2;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var HorizontalCardContentContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"])), _styles.COLORS.white);
+var HorizontalCardContentContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"])), function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+});
 exports.HorizontalCardContentContainer = HorizontalCardContentContainer;
-var HorizontalCardContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"])), HorizontalCardContentContainer, _styles.COLORS.neutral_200, HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, _styles.COLORS.primary_20, HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L3, HorizontalCardContentContainer, _styles.COLORS.primary_100, HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L2, _styles.focusStyles, HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, _styles.COLORS.neutral_100);
+var HorizontalCardContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"])), HorizontalCardContentContainer, function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+}, HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L3, HorizontalCardContentContainer, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L2, _styles.focusStyles, HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+});
 exports.HorizontalCardContainer = HorizontalCardContainer;
 var HorizontalCard = function HorizontalCard(_ref) {
   var title = _ref.title,

package/dist/Card/HorizontalCard/HorizontalCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCard.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_HorizontalCardThumbnail","_HorizontalCardBody","_HorizontalCardActions","_common","_jsxRuntime","_excluded","_templateObject","_templateObject2","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","HorizontalCardContentContainer","styled","div","_taggedTemplateLiteral2","COLORS","white","exports","HorizontalCardContainer","neutral_200","BOXSHADOWS","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","focusStyles","neutral_100","HorizontalCard","_ref","title","description","tags","progress","icon","_ref$variant","variant","image","action","actions","disabled","className","dataTestId","rest","_objectWithoutProperties2","_React$useState","React","useState","_React$useState2","_slicedToArray2","actionsRefs","setActionsRefs","containerRef","useRef","useActionWithin","cls","concat","handleClick","handleButtonPress","key","jsx","ref","tabIndex","onKeyDown","onClick","onMouseDown","defaultOnMouseDownHandler","children","jsxs","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","instance","_default"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\r\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\r\nimport {HorizontalCardBody} from './HorizontalCardBody';\r\nimport {HorizontalCardActions} from './HorizontalCardActions';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\r\n\r\nexport const HorizontalCardContentContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${COLORS.white};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${COLORS.primary_20};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${COLORS.primary_100};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  )\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HorizontalCard.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_HorizontalCardThumbnail","_HorizontalCardBody","_HorizontalCardActions","_common","_jsxRuntime","_excluded","_templateObject","_templateObject2","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","HorizontalCardContentContainer","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","exports","HorizontalCardContainer","BOXSHADOWS","BOXSHADOW_L1","BOXSHADOW_L3","BOXSHADOW_L2","focusStyles","HorizontalCard","_ref","title","description","tags","progress","icon","_ref$variant","variant","image","action","actions","disabled","className","dataTestId","rest","_objectWithoutProperties2","_React$useState","React","useState","_React$useState2","_slicedToArray2","actionsRefs","setActionsRefs","containerRef","useRef","useActionWithin","cls","concat","handleClick","handleButtonPress","key","jsx","ref","tabIndex","onKeyDown","onClick","onMouseDown","defaultOnMouseDownHandler","children","jsxs","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","instance","_default"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\r\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\r\nimport {HorizontalCardBody} from './HorizontalCardBody';\r\nimport {HorizontalCardActions} from './HorizontalCardActions';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\r\n\r\nexport const HorizontalCardContentContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  )\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCard.js

@@ -15,8 +15,18 @@ import { HorizontalCardActions } from './HorizontalCardActions';
 import { defaultOnMouseDownHandler, useActionWithin } from '../../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var HorizontalCardContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"])), COLORS.white);
-export var HorizontalCardContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"])), HorizontalCardContentContainer, COLORS.neutral_200, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, COLORS.primary_20, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L3, HorizontalCardContentContainer, COLORS.primary_100, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, COLORS.neutral_100);
+export var HorizontalCardContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"])), function (props) {
+  return COLORS.getColor('white', props.theme);
+});
+export var HorizontalCardContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"])), HorizontalCardContentContainer, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L3, HorizontalCardContentContainer, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+});
 export var HorizontalCard = function HorizontalCard(_ref) {
   var title = _ref.title,
     description = _ref.description,