@laerdal/life-react-components 1.9.8-dev.9.full → 1.9.9-dev.2

package/dist/Button/Button.js.map

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

package/dist/Button/Iconbutton.cjs

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledSecondaryIconButton = exports.StyledPrimaryIconButton = exports.IconButtonContent = void 0;
+exports.default = exports.StyledSecondaryIconButton = exports.StyledPrimaryIconButton = exports.StyledIconButton = exports.IconButtonContent = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -59,6 +59,7 @@ var StyledIconButton = _styledComponents.default.button(_templateObject2 || (_te
   return props.invertFocus ? _styles.invertedFocusStyles : _styles.focusStyles;
 });
 
+exports.StyledIconButton = StyledIconButton;
 var StyledPrimaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_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"])), IconButtonContent, function (props) {
   return props.useTransparentBackground ? 'transparent' : _styles.COLORS.primary_500;
 }, function (props) {

package/dist/Button/Iconbutton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation","defaultOnMouseDownHandler","className"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAgBA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD;AAAA,SAA6BA,KAAK,CAACC,YAAN,aAAwBD,KAAK,CAACC,YAA9B,UAAiD,KAA9E;AAAA,CAAxB;;AAEA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACF,KAAD,EAA4B;AACvD,MAAMG,MAAM,GAAGJ,eAAe,CAACC,KAAD,CAA9B;;AACA,UAAQA,KAAK,CAACI,QAAd;AACE,SAAK,MAAL;AACE,2BAAcD,MAAd,cAAwBA,MAAxB;;AAEF,SAAK,OAAL;AACE,uBAAUA,MAAV,sBAA4BA,MAA5B;;AAEF,SAAK,MAAL;AACA;AACE,uBAAUA,MAAV;AATJ;AAWD,CAbD;;AAeO,IAAME,iBAAiB,GAAGC,0BAAOC,GAAV,mFAAvB;;;;AAEP,IAAMC,gBAAgB,GAAGF,0BAAOG,MAAV,koBAQT,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACU,cAAN,GAAuB,MAAvB,GAAgC,OAA5C;AAAA,CARS,EASlBC,oBAAYC,MATM,EAaH,UAACZ,KAAD;AAAA,SAAYA,KAAK,CAACC,YAAN,aAAwBD,KAAK,CAACC,YAA9B,UAAiD,KAA7D;AAAA,CAbG,EAclBI,iBAdkB,EAiBDH,oBAjBC,EAsBN,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACa,aAAN,GAAsB,OAAtB,GAAgC,MAA5C;AAAA,CAtBM,EAuBP,UAACb,KAAD;AAAA,SAAYA,KAAK,CAACa,aAAN,GAAsB,OAAtB,GAAgC,MAA5C;AAAA,CAvBO,EAmChB,UAACb,KAAD;AAAA,SAAYA,KAAK,CAACc,WAAN,GAAoBC,2BAApB,GAA0CC,mBAAtD;AAAA,CAnCgB,CAAtB;;AAuCO,IAAMC,uBAAuB,GAAG,+BAAOT,gBAAP,CAAH,irBAChCH,iBADgC,EAEZ,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACkB,wBAAN,GAAiC,aAAjC,GAAiDC,eAAOC,WAApE;AAAA,CAFY,EAKtB,UAACpB,KAAD;AAAA,SAAWA,KAAK,CAACqB,SAAN,IAAmBF,eAAOG,KAArC;AAAA,CALsB,EAOpB,UAACtB,KAAD;AAAA,SAAWA,KAAK,CAACqB,SAAN,IAAmBF,eAAOG,KAArC;AAAA,CAPoB,EAa9BjB,iBAb8B,EAcVc,eAAOI,WAdG,EAgB9BlB,iBAhB8B,EAiB9BA,iBAjB8B,EAkBtBc,eAAOG,KAlBe,EAuB9BjB,iBAvB8B,EAwBhBc,eAAOK,WAxBS,EA0B9BnB,iBA1B8B,EA2B9BA,iBA3B8B,EA4BtBc,eAAOG,KA5Be,EAgC9BjB,iBAhC8B,EAiCVc,eAAOM,WAjCG,EAqCpBN,eAAOG,KArCa,EAuCtBH,eAAOG,KAvCe,CAA7B;;AA4CA,IAAMI,yBAAyB,GAAG,+BAAOlB,gBAAP,CAAH,8rBAClCH,iBADkC,EAEd,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACkB,wBAAN,GAAiC,aAAjC,GAAiDC,eAAOG,KAApE;AAAA,CAFc,EAKxB,UAACtB,KAAD;AAAA,SAAWA,KAAK,CAACqB,SAAN,IAAmBF,eAAOQ,WAArC;AAAA,CALwB,EAOtB,UAAC3B,KAAD;AAAA,SAAWA,KAAK,CAACqB,SAAN,IAAmBF,eAAOQ,WAArC;AAAA,CAPsB,EAYlB,UAAC3B,KAAD;AAAA,SAAYA,KAAK,CAAC4B,iBAAN,GAA0B,MAA1B,GAAmC,MAA/C;AAAA,CAZkB,EAehCvB,iBAfgC,EAgBZc,eAAOU,UAhBK,EAkBhCxB,iBAlBgC,EAmBhCA,iBAnBgC,EAoBxBc,eAAOI,WApBiB,EAyBhClB,iBAzBgC,EA0BlBc,eAAOW,WA1BW,EA4BhCzB,iBA5BgC,EA6BhCA,iBA7BgC,EA8BxBc,eAAOK,WA9BiB,EAmChCnB,iBAnCgC,EAoCZ,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACkB,wBAAN,GAAiC,aAAjC,GAAiDC,eAAOG,KAApE;AAAA,CApCY,EAwCtBH,eAAOY,WAxCe,EA0CxBZ,eAAOY,WA1CiB,CAA/B;;;AAwEP,IAAMC,UAAU,gBAAGC,eAAMC,UAAN,CACjB,gBAwBEC,GAxBF,EAyBK;AAAA,MAvBDC,EAuBC,QAvBDA,EAuBC;AAAA,MAtBDC,OAsBC,QAtBDA,OAsBC;AAAA,MArBDC,KAqBC,QArBDA,KAqBC;AAAA,MApBDC,MAoBC,QApBDA,MAoBC;AAAA,MAnBD7B,cAmBC,QAnBDA,cAmBC;AAAA,MAlBD8B,cAkBC,QAlBDA,cAkBC;AAAA,MAjBDC,QAiBC,QAjBDA,QAiBC;AAAA,MAhBDvB,wBAgBC,QAhBDA,wBAgBC;AAAA,MAfDU,iBAeC,QAfDA,iBAeC;AAAA,MAdDc,QAcC,QAdDA,QAcC;AAAA,MAbDrB,SAaC,QAbDA,SAaC;AAAA,MAZDR,aAYC,QAZDA,aAYC;AAAA,MAXD8B,QAWC,QAXDA,QAWC;AAAA,MAVDvC,QAUC,QAVDA,QAUC;AAAA,MATDH,YASC,QATDA,YASC;AAAA,MARD2C,UAQC,QARDA,UAQC;AAAA,MAPDC,oBAOC,QAPDA,oBAOC;AAAA,MANDC,IAMC,QANDA,IAMC;AAAA,MALDC,MAKC,QALDA,MAKC;AAAA,MAJDC,KAIC,QAJDA,KAIC;AAAA,MAHDlC,WAGC,QAHDA,WAGC;;AACH;AACA,UAAQuB,OAAR;AACE,SAAK,WAAL;AACE,0BACE,qBAAC,yBAAD;AACE,QAAA,EAAE,EAAED,EADN;AAEE,QAAA,IAAI,EAAEU,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU,QAFhB;AAGE,uBAAaV,EAHf;AAIE,QAAA,GAAG,EAAED,GAJP;AAKE,QAAA,OAAO,EAAE,iBAACc,KAAD,EAAgD;AACvDA,UAAAA,KAAK,CAACC,eAAN;AACAX,UAAAA,MAAM,CAACU,KAAD,CAAN;AACD,SARH;AASE,QAAA,QAAQ,EAAEP,QATZ;AAUE,QAAA,cAAc,EAAEhC,cAAc,IAAI,KAVpC;AAWE,QAAA,YAAY,EAAE8B,cAXhB;AAYE,QAAA,wBAAwB,EAAEtB,wBAZ5B;AAaE,QAAA,iBAAiB,EAAEU,iBAbrB;AAcE,QAAA,SAAS,EAAEP,SAdb;AAeE,QAAA,aAAa,EAAER,aAfjB;AAgBE,QAAA,QAAQ,EAAE8B,QAAQ,IAAI,CAhBxB;AAiBE,QAAA,YAAY,EAAE1C,YAAY,IAAIqC,KAAK,KAAK,UAA1B,GAAuC,EAAvC,GAA4C,CAjB5D;AAkBE,QAAA,WAAW,EAAEa,iCAlBf;AAmBE,QAAA,UAAU,EAAEP,UAnBd;AAoBE,QAAA,MAAM,EAAEG,MApBV;AAqBE,QAAA,KAAK,EAAEC,KArBT;AAsBE,QAAA,WAAW,EAAElC,WAtBf;AAuBE,QAAA,oBAAoB,EAAE+B,oBAvBxB;AAAA,+BAwBE,qBAAC,iBAAD;AAAA,oBAAoBJ;AAApB;AAxBF,QADF;;AA4BF,SAAK,SAAL;AACA;AACE,0BACE,qBAAC,uBAAD;AACE,QAAA,EAAE,EAAEL,EADN;AAEE,QAAA,IAAI,EAAEU,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU,QAFhB;AAGE,uBAAaV,EAHf;AAIE,QAAA,QAAQ,EAAEhC,QAJZ;AAKE,QAAA,GAAG,EAAE+B,GALP;AAME,QAAA,OAAO,EAAE,iBAACc,KAAD,EAAgD;AACvDA,UAAAA,KAAK,CAACC,eAAN;AACAX,UAAAA,MAAM,CAACU,KAAD,CAAN;AACD,SATH;AAUE,QAAA,QAAQ,EAAEP,QAVZ;AAWE,QAAA,cAAc,EAAEhC,cAAc,IAAI,KAXpC;AAYE,QAAA,YAAY,EAAE8B,cAZhB;AAaE,QAAA,wBAAwB,EAAEtB,wBAb5B;AAcE,QAAA,SAAS,EAAEG,SAdb;AAeE,QAAA,aAAa,EAAER,aAfjB;AAgBE,QAAA,QAAQ,EAAE8B,QAAQ,IAAI,CAhBxB;AAiBE,QAAA,YAAY,EAAE1C,YAAY,IAAIqC,KAAK,KAAK,UAA1B,GAAuC,EAAvC,GAA4C,CAjB5D;AAkBE,QAAA,WAAW,EAAEa,iCAlBf;AAmBE,QAAA,UAAU,EAAEP,UAnBd;AAoBE,QAAA,MAAM,EAAEG,MApBV;AAqBE,QAAA,KAAK,EAAEC,KArBT;AAsBE,QAAA,WAAW,EAAElC,WAtBf;AAuBE,QAAA,oBAAoB,EAAE+B,oBAvBxB;AAAA,+BAwBE,qBAAC,iBAAD;AAAA,oBAAoBJ;AAApB;AAxBF,QADF;AAhCJ;AA6DD,CAzFgB,CAAnB;;;AAxBEL,EAAAA,E;AACAgB,EAAAA,S;AACAf,EAAAA,O,4BAAU,S,EAAY,W;AACtBC,EAAAA,K,4BAAQ,Q,EAAW,U;AACnBC,EAAAA,M;AACA7B,EAAAA,c;AAEA8B,EAAAA,c;AACAE,EAAAA,Q;AACAxB,EAAAA,wB;AACAU,EAAAA,iB;AACAP,EAAAA,S;AACAR,EAAAA,a;AACA8B,EAAAA,Q;AACA1C,EAAAA,Y;AACA2C,EAAAA,U;AACAC,EAAAA,oB;AAEAJ,EAAAA,Q;AACAM,EAAAA,M;AAEAjC,EAAAA,W;;eA+FakB,U","sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  className?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n  style?: CSSProperties | undefined;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      onKeyPress,\n      focusBackgroundColor,\n      type,\n      hidden,\n      style,\n      invertFocus,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            onKeyPress={onKeyPress}\n            hidden={hidden}\n            style={style}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            onKeyPress={onKeyPress}\n            hidden={hidden}\n            style={style}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}
+{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation","defaultOnMouseDownHandler","className"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  className?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n  style?: CSSProperties | undefined;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      onKeyPress,\n      focusBackgroundColor,\n      type,\n      hidden,\n      style,\n      invertFocus,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            onKeyPress={onKeyPress}\n            hidden={hidden}\n            style={style}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            onKeyPress={onKeyPress}\n            hidden={hidden}\n            style={style}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}

package/dist/Button/Iconbutton.d.ts

@@ -14,6 +14,7 @@ interface HeaderItemProps {
     shouldNotInteract?: boolean;
 }
 export declare const IconButtonContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
 export declare const StyledPrimaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
 export declare const StyledSecondaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
 export interface IconButtonProps {

package/dist/Button/Iconbutton.js

@@ -30,7 +30,7 @@ var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
 };
 
 export var IconButtonContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
-var StyledIconButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ", ";\n  ", " {\n    display: block;\n  }\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), function (props) {
+export var StyledIconButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ", ";\n  ", " {\n    display: block;\n  }\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), function (props) {
   return props.hideOnLowWidth ? 'none' : 'block';
 }, BREAKPOINTS.MEDIUM, function (props) {
   return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation","className"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  className?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n  style?: CSSProperties | undefined;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      onKeyPress,\n      focusBackgroundColor,\n      type,\n      hidden,\n      style,\n      invertFocus,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            onKeyPress={onKeyPress}\n            hidden={hidden}\n            style={style}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            onKeyPress={onKeyPress}\n            hidden={hidden}\n            style={style}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation","className"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  className?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n  style?: CSSProperties | undefined;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      onKeyPress,\n      focusBackgroundColor,\n      type,\n      hidden,\n      style,\n      invertFocus,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            onKeyPress={onKeyPress}\n            hidden={hidden}\n            style={style}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            onKeyPress={onKeyPress}\n            hidden={hidden}\n            style={style}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/Card/HorizontalCard/HorizontalCardActions.cjs

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _Button = require("../../Button");
 
@@ -27,10 +25,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
 
 var HorizontalCardActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
@@ -50,7 +44,7 @@ var HorizontalCardActions = /*#__PURE__*/_react.default.forwardRef(function (_re
     }));
   }, [length]);
 
-  (0, _react.useImperativeHandle)(ref, function () {
+  _react.default.useImperativeHandle(ref, function () {
     return elRefs;
   }, [elRefs]);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"names":["Container","styled","div","HorizontalCardActions","React","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"mappings":"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","sourcesContent":["import React, {useImperativeHandle} from 'react';\nimport {\n  HorizontalCardDropdownButton,\n  HorizontalCardIconButton,\n  HorizontalCardProps,\n  HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n                                                       ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n                        index: number) => {\n    switch (item.componentType) {\n      case 'icon': {\n        return <IconButton ref={elRefs[index]}\n                           key={index}\n                           variant={'secondary'}\n                           useTransparentBackground={true}\n                           shape={'circular'}\n                           action={item.action}\n                           disabled={item.disabled ?? disabled}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'toggle': {\n        return <ToggleButton ref={elRefs[index]}\n                             key={index}\n                             active={item.active}\n                             onChange={item.onChange}\n                             defaultState={item.defaultState}\n                             activeState={item.activeState}\n                             disabled={item.disabled ?? disabled}/>\n      }\n      case 'dropdown': {\n        return <DropdownButton ref={elRefs[index]}\n                               key={index}\n                               type={'icon'}\n                               items={item.items}\n                               itemsType={item.itemsType}\n                               onClick={item.onClick}\n                               icon={item.icon}\n                               action={item.action}\n                               actionIcon={item.actionIcon}\n                               actionLabel={item.actionLabel}\n                               actionVariant={item.actionVariant}\n                               actionLoading={item.actionLoading}\n                               multiSelect={item.multiSelect}\n                               scrollable={item.scrollable}\n                               pinTopItem={item.pinTopItem}\n                               maxHeight={item.maxHeight}\n                               disabled={item.disabled ?? disabled}/>\n      }\n    }\n  }\n\n\n  return (\n    <>\n      {\n        actions?.length &&\n        <Container>\n          {actions?.map((item, index) => renderAction(item, index))}\n        </Container>\n      }\n    </>\n  )\n});\n"],"file":"HorizontalCardActions.cjs"}
+{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"names":["Container","styled","div","HorizontalCardActions","React","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  HorizontalCardDropdownButton,\n  HorizontalCardIconButton,\n  HorizontalCardProps,\n  HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n                                                       ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n                        index: number) => {\n    switch (item.componentType) {\n      case 'icon': {\n        return <IconButton ref={elRefs[index]}\n                           key={index}\n                           variant={'secondary'}\n                           useTransparentBackground={true}\n                           shape={'circular'}\n                           action={item.action}\n                           disabled={item.disabled ?? disabled}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'toggle': {\n        return <ToggleButton ref={elRefs[index]}\n                             key={index}\n                             active={item.active}\n                             onChange={item.onChange}\n                             defaultState={item.defaultState}\n                             activeState={item.activeState}\n                             disabled={item.disabled ?? disabled}/>\n      }\n      case 'dropdown': {\n        return <DropdownButton ref={elRefs[index]}\n                               key={index}\n                               type={'icon'}\n                               items={item.items}\n                               itemsType={item.itemsType}\n                               onClick={item.onClick}\n                               icon={item.icon}\n                               action={item.action}\n                               actionIcon={item.actionIcon}\n                               actionLabel={item.actionLabel}\n                               actionVariant={item.actionVariant}\n                               actionLoading={item.actionLoading}\n                               multiSelect={item.multiSelect}\n                               scrollable={item.scrollable}\n                               pinTopItem={item.pinTopItem}\n                               maxHeight={item.maxHeight}\n                               disabled={item.disabled ?? disabled}/>\n      }\n    }\n  }\n\n\n  return (\n    <>\n      {\n        actions?.length &&\n        <Container>\n          {actions?.map((item, index) => renderAction(item, index))}\n        </Container>\n      }\n    </>\n  )\n});\n"],"file":"HorizontalCardActions.cjs"}

package/dist/Card/HorizontalCard/HorizontalCardActions.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 
 var _templateObject;
 
-import React, { useImperativeHandle } from 'react';
+import React from 'react';
 import { IconButton } from '../../Button';
 import { ToggleButton } from '../../Toggles';
 import { DropdownButton } from '../../Dropdown';
@@ -26,7 +26,7 @@ export var HorizontalCardActions = /*#__PURE__*/React.forwardRef(function (_ref,
       return /*#__PURE__*/React.createRef();
     }));
   }, [length]);
-  useImperativeHandle(ref, function () {
+  React.useImperativeHandle(ref, function () {
     return elRefs;
   }, [elRefs]);
 

package/dist/Card/HorizontalCard/HorizontalCardActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"names":["React","useImperativeHandle","IconButton","ToggleButton","DropdownButton","styled","Container","div","HorizontalCardActions","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"mappings":"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","sourcesContent":["import React, {useImperativeHandle} from 'react';\nimport {\n  HorizontalCardDropdownButton,\n  HorizontalCardIconButton,\n  HorizontalCardProps,\n  HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n                                                       ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n                        index: number) => {\n    switch (item.componentType) {\n      case 'icon': {\n        return <IconButton ref={elRefs[index]}\n                           key={index}\n                           variant={'secondary'}\n                           useTransparentBackground={true}\n                           shape={'circular'}\n                           action={item.action}\n                           disabled={item.disabled ?? disabled}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'toggle': {\n        return <ToggleButton ref={elRefs[index]}\n                             key={index}\n                             active={item.active}\n                             onChange={item.onChange}\n                             defaultState={item.defaultState}\n                             activeState={item.activeState}\n                             disabled={item.disabled ?? disabled}/>\n      }\n      case 'dropdown': {\n        return <DropdownButton ref={elRefs[index]}\n                               key={index}\n                               type={'icon'}\n                               items={item.items}\n                               itemsType={item.itemsType}\n                               onClick={item.onClick}\n                               icon={item.icon}\n                               action={item.action}\n                               actionIcon={item.actionIcon}\n                               actionLabel={item.actionLabel}\n                               actionVariant={item.actionVariant}\n                               actionLoading={item.actionLoading}\n                               multiSelect={item.multiSelect}\n                               scrollable={item.scrollable}\n                               pinTopItem={item.pinTopItem}\n                               maxHeight={item.maxHeight}\n                               disabled={item.disabled ?? disabled}/>\n      }\n    }\n  }\n\n\n  return (\n    <>\n      {\n        actions?.length &&\n        <Container>\n          {actions?.map((item, index) => renderAction(item, index))}\n        </Container>\n      }\n    </>\n  )\n});\n"],"file":"HorizontalCardActions.js"}
+{"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"names":["React","IconButton","ToggleButton","DropdownButton","styled","Container","div","HorizontalCardActions","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  HorizontalCardDropdownButton,\n  HorizontalCardIconButton,\n  HorizontalCardProps,\n  HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n                                                       ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n                        index: number) => {\n    switch (item.componentType) {\n      case 'icon': {\n        return <IconButton ref={elRefs[index]}\n                           key={index}\n                           variant={'secondary'}\n                           useTransparentBackground={true}\n                           shape={'circular'}\n                           action={item.action}\n                           disabled={item.disabled ?? disabled}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'toggle': {\n        return <ToggleButton ref={elRefs[index]}\n                             key={index}\n                             active={item.active}\n                             onChange={item.onChange}\n                             defaultState={item.defaultState}\n                             activeState={item.activeState}\n                             disabled={item.disabled ?? disabled}/>\n      }\n      case 'dropdown': {\n        return <DropdownButton ref={elRefs[index]}\n                               key={index}\n                               type={'icon'}\n                               items={item.items}\n                               itemsType={item.itemsType}\n                               onClick={item.onClick}\n                               icon={item.icon}\n                               action={item.action}\n                               actionIcon={item.actionIcon}\n                               actionLabel={item.actionLabel}\n                               actionVariant={item.actionVariant}\n                               actionLoading={item.actionLoading}\n                               multiSelect={item.multiSelect}\n                               scrollable={item.scrollable}\n                               pinTopItem={item.pinTopItem}\n                               maxHeight={item.maxHeight}\n                               disabled={item.disabled ?? disabled}/>\n      }\n    }\n  }\n\n\n  return (\n    <>\n      {\n        actions?.length &&\n        <Container>\n          {actions?.map((item, index) => renderAction(item, index))}\n        </Container>\n      }\n    </>\n  )\n});\n"],"file":"HorizontalCardActions.js"}

package/dist/Card/VerticalCard/Card.cjs

@@ -80,6 +80,7 @@ var Card = function Card(_ref) {
     onClick: function onClick(e) {
       return !disabled && onCardClicked && onCardClicked();
     },
+    "data-testid": 'card-wrapper',
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopLevelContainer, {
       children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({
         ref: checkBoxRef

package/dist/Card/VerticalCard/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","defaultOnMouseDownHandler","a","key","e","instance"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,wVACZC,cAAOC,KADK,EAWhBC,kBAAWC,YAXK,EAeVH,cAAOI,WAfG,CAA3B;;;;AAoBA,IAAMC,OAAO,GAAGP,0BAAOC,GAAV,0sBAKdO,kBALc,EAYZT,qBAZY,EAcUG,cAAOO,UAdjB,EAkBUP,cAAOQ,WAlBjB,EAwBZX,qBAxBY,EA0BIK,kBAAWO,YA1Bf,EA8BIP,kBAAWQ,YA9Bf,CAAb;;;;AAmDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAOkB;AAAA,MANfC,aAMe,QANfA,aAMe;AAAA,MALfC,eAKe,QALfA,eAKe;AAAA,MAJfC,kBAIe,QAJfA,kBAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,0BADfC,OACe;AAAA,MADfA,OACe,6BADL,SACK;;AAGjE,wBAAsCC,KAAK,CAACC,QAAN,CAA+C,EAA/C,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,MAAMC,WAAW,GAAIJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,YAAY,GAAGN,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AAEA,8BAAgBC,YAAhB,6CAAkCJ,WAAlC,IAA+CE,WAA/C;AAEA,MAAMG,GAAG,aAAM,CAAC,CAACb,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,CAAT;AAEA,sBAEE,qBAAC,OAAD;AAAS,IAAA,GAAG,EAAEO,YAAd;AACS,IAAA,SAAS,EAAEC,GADpB;AAES,IAAA,QAAQ,EAAE,CAAC,CAACb,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;AAGS,IAAA,WAAW,EAAEU,gCAHtB;AAIS,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACZ,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;AAAA,KAJrB;AAKS,IAAA,OAAO,EAAE,iBAAAiB,CAAC;AAAA,aAAI,CAACb,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;AAAA,KALnB;AAAA,2BAME,sBAAC,qBAAD;AAAA,iBAEIC,eAAe,iBACf,qBAAC,uBAAD;AAAgB,QAAA,GAAG,EAAES;AAArB,SACMT,eADN;AACuB,QAAA,QAAQ,EAAEG;AADjC,SAHJ,EAOIF,kBAAkB,iBAClB,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEE;AAArD,SARJ,EAWID,kBAAkB,iBAClB,qBAAC,0BAAD;AAAmB,QAAA,GAAG,EAAE,aAAAe,QAAQ;AAAA,iBAAIT,cAAc,CAACS,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;AAAA;AAAhC,SACuBf,kBADvB;AAC2C,QAAA,QAAQ,EAAEC;AADrD,SAZJ;AAAA;AANF,IAFF;AA2BD,CA7CD;;;AAREJ,EAAAA,a;AACAI,EAAAA,Q;AAIAC,EAAAA,O,4BAAU,S,EAAY,U;;eAkDTN,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'outline'\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n  return (\n\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}
+{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","defaultOnMouseDownHandler","a","key","e","instance"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,wVACZC,cAAOC,KADK,EAWhBC,kBAAWC,YAXK,EAeVH,cAAOI,WAfG,CAA3B;;;;AAoBA,IAAMC,OAAO,GAAGP,0BAAOC,GAAV,0sBAKdO,kBALc,EAYZT,qBAZY,EAcUG,cAAOO,UAdjB,EAkBUP,cAAOQ,WAlBjB,EAwBZX,qBAxBY,EA0BIK,kBAAWO,YA1Bf,EA8BIP,kBAAWQ,YA9Bf,CAAb;;;;AAmDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAOkB;AAAA,MANfC,aAMe,QANfA,aAMe;AAAA,MALfC,eAKe,QALfA,eAKe;AAAA,MAJfC,kBAIe,QAJfA,kBAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,0BADfC,OACe;AAAA,MADfA,OACe,6BADL,SACK;;AAGjE,wBAAsCC,KAAK,CAACC,QAAN,CAA+C,EAA/C,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,MAAMC,WAAW,GAAIJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,YAAY,GAAGN,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AAEA,8BAAgBC,YAAhB,6CAAkCJ,WAAlC,IAA+CE,WAA/C;AAEA,MAAMG,GAAG,aAAM,CAAC,CAACb,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,CAAT;AAEA,sBAEE,qBAAC,OAAD;AAAS,IAAA,GAAG,EAAEO,YAAd;AACS,IAAA,SAAS,EAAEC,GADpB;AAES,IAAA,QAAQ,EAAE,CAAC,CAACb,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;AAGS,IAAA,WAAW,EAAEU,gCAHtB;AAIS,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACZ,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;AAAA,KAJrB;AAKS,IAAA,OAAO,EAAE,iBAAAiB,CAAC;AAAA,aAAI,CAACb,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;AAAA,KALnB;AAMS,mBAAa,cANtB;AAAA,2BAOE,sBAAC,qBAAD;AAAA,iBAEIC,eAAe,iBACf,qBAAC,uBAAD;AAAgB,QAAA,GAAG,EAAES;AAArB,SACMT,eADN;AACuB,QAAA,QAAQ,EAAEG;AADjC,SAHJ,EAOIF,kBAAkB,iBAClB,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEE;AAArD,SARJ,EAWID,kBAAkB,iBAClB,qBAAC,0BAAD;AAAmB,QAAA,GAAG,EAAE,aAAAe,QAAQ;AAAA,iBAAIT,cAAc,CAACS,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;AAAA;AAAhC,SACuBf,kBADvB;AAC2C,QAAA,QAAQ,EAAEC;AADrD,SAZJ;AAAA;AAPF,IAFF;AA4BD,CA9CD;;;AAREJ,EAAAA,a;AACAI,EAAAA,Q;AAIAC,EAAAA,O,4BAAU,S,EAAY,U;;eAmDTN,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'outline'\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n  return (\n\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}

package/dist/Card/VerticalCard/Card.js

@@ -50,6 +50,7 @@ var Card = function Card(_ref) {
     onClick: function onClick(e) {
       return !disabled && onCardClicked && onCardClicked();
     },
+    "data-testid": 'card-wrapper',
     children: /*#__PURE__*/_jsxs(CardTopLevelContainer, {
       children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({
         ref: checkBoxRef

package/dist/Card/VerticalCard/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'outline'\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n  return (\n\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.js"}
+{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'outline'\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n  return (\n\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.js"}

package/dist/Card/VerticalCard/CardBottomSection.cjs

@@ -94,6 +94,7 @@ var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [elRefs]);
   var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionContainer, {
+    "data-testid": 'card-bottomSection',
     children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomDivider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardProgressContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LinearProgress, {
         size: _index.Size.Small,
@@ -118,6 +119,7 @@ var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       })]
     }), (authorName || logo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardAuthorContainer, {
       disabled: disabled,
+      "data-testid": 'card-bottomSection-author',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
         children: authorName
       }), logo]