@laerdal/life-react-components 2.1.1-dev.33 → 2.1.1-dev.36

package/dist/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","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"],"sources":["../../src/Button/Button.tsx"],"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, Testable } 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\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    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    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  }\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    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n    outline: 2px solid ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    padding: ${(props) => (props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px')};\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    outline: 2px solid ${(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    outline: 2px solid ${(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    outline: 2px solid ${(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    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n    padding: ${(props) => (props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px')};\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    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    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    background-color: ${COLORS.correct_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${COLORS.correct_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\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  }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    background-color: ${COLORS.critical_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${COLORS.critical_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\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  }\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"],"mappings":"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"}
+{"version":3,"file":"Button.js","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"],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';\nimport { COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { Size, Testable } 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\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    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    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  }\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    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n    outline: 2px solid ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    padding: ${(props) => (props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px')};\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    outline: 2px solid ${(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    outline: 2px solid ${(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    outline: 2px solid ${(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    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n    padding: ${(props) => (props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px')};\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    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    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    background-color: ${COLORS.correct_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${COLORS.correct_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\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  }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    background-color: ${COLORS.critical_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${COLORS.critical_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\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  }\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"],"mappings":"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"}

package/dist/Button/DualFunctionButton.cjs

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("./Button"));
-var _SystemIcons = require("../icons/systemicons/SystemIcons");
+var _icons = require("../icons");
 var _CommonStyling = require("../Dropdown/CommonStyling");
 var _nanoid = require("nanoid");
 var _types = require("../types");
@@ -150,9 +150,9 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
         e.stopPropagation();
         setIsOpen(!isOpen);
       },
-      icon: isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropUp, {
+      icon: isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropUp, {
         size: "16px"
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropDown, {
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropDown, {
         size: "16px"
       }),
       flatEdge: "left"

package/dist/Button/DualFunctionButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DualFunctionButton.cjs","names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useClickOutsideRef","useFocusOutsideRef","dropdownContentId","nanoid","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}
+{"version":3,"file":"DualFunctionButton.cjs","names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useClickOutsideRef","useFocusOutsideRef","dropdownContentId","nanoid","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { SystemIcons } from '../icons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <SystemIcons.ArrowDropUp size=\"16px\" /> : <SystemIcons.ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}

package/dist/Button/DualFunctionButton.js

@@ -10,7 +10,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
 import Button from './Button';
-import { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';
+import { SystemIcons } from '../icons';
 import { Dropdown } from '../Dropdown/CommonStyling';
 import { nanoid } from 'nanoid';
 import { Size } from '../types';
@@ -141,9 +141,9 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
         e.stopPropagation();
         setIsOpen(!isOpen);
       },
-      icon: isOpen ? /*#__PURE__*/_jsx(ArrowDropUp, {
+      icon: isOpen ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropUp, {
         size: "16px"
-      }) : /*#__PURE__*/_jsx(ArrowDropDown, {
+      }) : /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {
         size: "16px"
       }),
       flatEdge: "left"

package/dist/Button/DualFunctionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DualFunctionButton.js","names":["React","Button","ArrowDropDown","ArrowDropUp","Dropdown","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}
+{"version":3,"file":"DualFunctionButton.js","names":["React","Button","SystemIcons","Dropdown","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { SystemIcons } from '../icons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <SystemIcons.ArrowDropUp size=\"16px\" /> : <SystemIcons.ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs

@@ -12,7 +12,7 @@ var _styles = require("../../styles");
 var _Image = require("../../Image");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
-var IconContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), _styles.COLORS.black, _styles.COLORS.neutral_500);
+var IconContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), _styles.COLORS.black, _styles.COLORS.neutral_500);
 var ImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n"])));
 var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
   var _image$fallbackSrc, _image$loader;

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["IconContainer","styled","div","COLORS","black","neutral_500","ImageContainer","HorizontalCardThumbnail","image","icon","React","cloneElement","width","height","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nconst IconContainer = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ${COLORS.black};\n\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst ImageContainer = styled.div`\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n                                                                          image,\n                                                                          icon\n                                                                        }) => {\n\n  return (\n    <>\n      {\n        icon &&\n          <IconContainer>\n            {React.cloneElement(icon, {width: 48, height: 48})}\n          </IconContainer>\n      }\n      {\n        image &&\n          <ImageContainer>\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\n          </ImageContainer>\n      }\n    </>\n  )\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AAA+C;AAAA;AAE/C,IAAMA,aAAa,GAAGC,yBAAM,CAACC,GAAG,2PAOrBC,cAAM,CAACC,KAAK,EAGVD,cAAM,CAACE,WAAW,CAE9B;AAGD,IAAMC,cAAc,GAAGL,yBAAM,CAACC,GAAG,2YAqBhC;AAIM,IAAMK,uBAAuD,GAAG,SAA1DA,uBAAuD,OAGU;EAAA;EAAA,IAFJC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;EAG5E,oBACE;IAAA,WAEIA,IAAI,iBACF,qBAAC,aAAa;MAAA,uBACXC,cAAK,CAACC,YAAY,CAACF,IAAI,EAAE;QAACG,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,EACpC,EAGlBL,KAAK,iBACH,qBAAC,cAAc;MAAA,uBACX,qBAAC,yBAAkB;QAAC,SAAS,wBAAEA,KAAK,CAACM,WAAW,mEAAI,EAAG;QAAC,GAAG,EAAEN,KAAK,CAACO,GAAI;QAAC,GAAG,EAAEP,KAAK,CAACQ,GAAI;QACnE,MAAM,mBAAER,KAAK,CAACS,MAAM,yDAAI,KAAM;QAAC,KAAK,EAAET,KAAK,CAACI,KAAM;QAAC,MAAM,EAAEJ,KAAK,CAACK;MAAO;IAAE,EACjF;EAAA,EAEpB;AAEP,CAAC;AAAC"}
+{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["IconContainer","styled","div","COLORS","black","neutral_500","ImageContainer","HorizontalCardThumbnail","image","icon","React","cloneElement","width","height","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nconst IconContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ${COLORS.black};\n\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst ImageContainer = styled.div`\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n                                                                          image,\n                                                                          icon\n                                                                        }) => {\n\n  return (\n    <>\n      {\n        icon &&\n          <IconContainer>\n            {React.cloneElement(icon, {width: 48, height: 48})}\n          </IconContainer>\n      }\n      {\n        image &&\n          <ImageContainer>\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\n          </ImageContainer>\n      }\n    </>\n  )\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AAA+C;AAAA;AAE/C,IAAMA,aAAa,GAAGC,yBAAM,CAACC,GAAG,yPAOrBC,cAAM,CAACC,KAAK,EAGVD,cAAM,CAACE,WAAW,CAE9B;AAGD,IAAMC,cAAc,GAAGL,yBAAM,CAACC,GAAG,2YAqBhC;AAIM,IAAMK,uBAAuD,GAAG,SAA1DA,uBAAuD,OAGU;EAAA;EAAA,IAFJC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;EAG5E,oBACE;IAAA,WAEIA,IAAI,iBACF,qBAAC,aAAa;MAAA,uBACXC,cAAK,CAACC,YAAY,CAACF,IAAI,EAAE;QAACG,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,EACpC,EAGlBL,KAAK,iBACH,qBAAC,cAAc;MAAA,uBACX,qBAAC,yBAAkB;QAAC,SAAS,wBAAEA,KAAK,CAACM,WAAW,mEAAI,EAAG;QAAC,GAAG,EAAEN,KAAK,CAACO,GAAI;QAAC,GAAG,EAAEP,KAAK,CAACQ,GAAI;QACnE,MAAM,mBAAER,KAAK,CAACS,MAAM,yDAAI,KAAM;QAAC,KAAK,EAAET,KAAK,CAACI,KAAM;QAAC,MAAM,EAAEJ,KAAK,CAACK;MAAO;IAAE,EACjF;EAAA,EAEpB;AAEP,CAAC;AAAC"}

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js

@@ -7,7 +7,7 @@ import { ImageWithFallbacks } from "../../Image";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var IconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), COLORS.black, COLORS.neutral_500);
+var IconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), COLORS.black, COLORS.neutral_500);
 var ImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n"])));
 export var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
   var _image$fallbackSrc, _image$loader;

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","IconContainer","div","black","neutral_500","ImageContainer","HorizontalCardThumbnail","image","icon","cloneElement","width","height","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nconst IconContainer = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ${COLORS.black};\n\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst ImageContainer = styled.div`\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n                                                                          image,\n                                                                          icon\n                                                                        }) => {\n\n  return (\n    <>\n      {\n        icon &&\n          <IconContainer>\n            {React.cloneElement(icon, {width: 48, height: 48})}\n          </IconContainer>\n      }\n      {\n        image &&\n          <ImageContainer>\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\n          </ImageContainer>\n      }\n    </>\n  )\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,QAAO,cAAc;AACnC,SAAQC,kBAAkB,QAAO,aAAa;AAAC;AAAA;AAAA;AAE/C,IAAMC,aAAa,GAAGH,MAAM,CAACI,GAAG,6OAOrBH,MAAM,CAACI,KAAK,EAGVJ,MAAM,CAACK,WAAW,CAE9B;AAGD,IAAMC,cAAc,GAAGP,MAAM,CAACI,GAAG,6XAqBhC;AAID,OAAO,IAAMI,uBAAuD,GAAG,SAA1DA,uBAAuD,OAGU;EAAA;EAAA,IAFJC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;EAG5E,oBACE;IAAA,WAEIA,IAAI,iBACF,KAAC,aAAa;MAAA,uBACXX,KAAK,CAACY,YAAY,CAACD,IAAI,EAAE;QAACE,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,EACpC,EAGlBJ,KAAK,iBACH,KAAC,cAAc;MAAA,uBACX,KAAC,kBAAkB;QAAC,SAAS,wBAAEA,KAAK,CAACK,WAAW,mEAAI,EAAG;QAAC,GAAG,EAAEL,KAAK,CAACM,GAAI;QAAC,GAAG,EAAEN,KAAK,CAACO,GAAI;QACnE,MAAM,mBAAEP,KAAK,CAACQ,MAAM,yDAAI,KAAM;QAAC,KAAK,EAAER,KAAK,CAACG,KAAM;QAAC,MAAM,EAAEH,KAAK,CAACI;MAAO;IAAE,EACjF;EAAA,EAEpB;AAEP,CAAC"}
+{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","IconContainer","div","black","neutral_500","ImageContainer","HorizontalCardThumbnail","image","icon","cloneElement","width","height","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nconst IconContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ${COLORS.black};\n\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\n\nconst ImageContainer = styled.div`\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n                                                                          image,\n                                                                          icon\n                                                                        }) => {\n\n  return (\n    <>\n      {\n        icon &&\n          <IconContainer>\n            {React.cloneElement(icon, {width: 48, height: 48})}\n          </IconContainer>\n      }\n      {\n        image &&\n          <ImageContainer>\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\n          </ImageContainer>\n      }\n    </>\n  )\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,QAAO,cAAc;AACnC,SAAQC,kBAAkB,QAAO,aAAa;AAAC;AAAA;AAAA;AAE/C,IAAMC,aAAa,GAAGH,MAAM,CAACI,GAAG,2OAOrBH,MAAM,CAACI,KAAK,EAGVJ,MAAM,CAACK,WAAW,CAE9B;AAGD,IAAMC,cAAc,GAAGP,MAAM,CAACI,GAAG,6XAqBhC;AAID,OAAO,IAAMI,uBAAuD,GAAG,SAA1DA,uBAAuD,OAGU;EAAA;EAAA,IAFJC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;EAG5E,oBACE;IAAA,WAEIA,IAAI,iBACF,KAAC,aAAa;MAAA,uBACXX,KAAK,CAACY,YAAY,CAACD,IAAI,EAAE;QAACE,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,EACpC,EAGlBJ,KAAK,iBACH,KAAC,cAAc;MAAA,uBACX,KAAC,kBAAkB;QAAC,SAAS,wBAAEA,KAAK,CAACK,WAAW,mEAAI,EAAG;QAAC,GAAG,EAAEL,KAAK,CAACM,GAAI;QAAC,GAAG,EAAEN,KAAK,CAACO,GAAI;QACnE,MAAM,mBAAEP,KAAK,CAACQ,MAAM,yDAAI,KAAM;QAAC,KAAK,EAAER,KAAK,CAACG,KAAM;QAAC,MAAM,EAAEH,KAAK,CAACI;MAAO;IAAE,EACjF;EAAA,EAEpB;AAEP,CAAC"}

package/dist/Chips/ActionChip.cjs

@@ -9,7 +9,6 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _index = require("../icons/index");
 var _types = require("../types");
 var _ChipStyles = require("./ChipStyles");
 var _common = require("../common");
@@ -49,9 +48,7 @@ var ActionChip = function ActionChip(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
         children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: 'chip-icon icon-left',
-          children: _index.SystemIcons[icon]({
-            className: 'icon'
-          })
+          children: icon
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           children: text
         })]

package/dist/Chips/ActionChip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionChip.cjs","names":["ActionChip","icon","text","size","Size","Medium","disabled","onClick","className","dataTestId","rest","defaultOnMouseDownHandler","e","key","icons"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                dataTestId,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   \n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   data-testid={dataTestId}\n                   role=\"button\"\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icons[icon]({className: 'icon'})}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;;;;;;AAGA;AAKA;AACA;AAIA;AAMA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAoD,GAAG,SAAvDA,UAAoD,OAS2B;EAAA,IARrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,qBAAC,yBAAa;IAAC,SAAS,YAAKP,IAAI,cAAIG,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAEhH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEI,iCAA0B;IACvC,eAAaF,UAAW;IACxB,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAG,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACP,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCG,IAAI;IAAA,uBACrB,qBAAC,gCAAoB;MAAA,uBACnB,sBAAC,uBAAW;QAAA,WAERT,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCa,kBAAK,CAACb,IAAI,CAAC,CAAC;YAACO,SAAS,EAAE;UAAM,CAAC;QAAC,EAC7B,eAER;UAAA,UACGN;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAAC,eAEaF,UAAU;AAAA"}
+{"version":3,"file":"ActionChip.cjs","names":["ActionChip","icon","text","size","Size","Medium","disabled","onClick","className","dataTestId","rest","defaultOnMouseDownHandler","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                dataTestId,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   \n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   data-testid={dataTestId}\n                   role=\"button\"\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icon}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;;;;;;AAGA;AAMA;AAIA;AAMA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAoD,GAAG,SAAvDA,UAAoD,OAS2B;EAAA,IARrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,qBAAC,yBAAa;IAAC,SAAS,YAAKP,IAAI,cAAIG,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAEhH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEI,iCAA0B;IACvC,eAAaF,UAAW;IACxB,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAG,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACP,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCG,IAAI;IAAA,uBACrB,qBAAC,gCAAoB;MAAA,uBACnB,sBAAC,uBAAW;QAAA,WAERT,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCA;QAAI,EACD,eAER;UAAA,UACGC;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAAC,eAEaF,UAAU;AAAA"}

package/dist/Chips/ActionChip.js

@@ -11,7 +11,7 @@ import * as React from 'react';
 /**
  * Import custom components.
  */
-import { SystemIcons as icons } from '../icons/index';
+
 import { Size } from '../types';
 /**
  * Import custom styles.
@@ -55,9 +55,7 @@ var ActionChip = function ActionChip(_ref) {
       children: /*#__PURE__*/_jsxs(ChipContent, {
         children: [icon && /*#__PURE__*/_jsx("div", {
           className: 'chip-icon icon-left',
-          children: icons[icon]({
-            className: 'icon'
-          })
+          children: icon
         }), /*#__PURE__*/_jsx("div", {
           children: text
         })]

package/dist/Chips/ActionChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionChip.js","names":["React","SystemIcons","icons","Size","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","Medium","disabled","onClick","className","dataTestId","rest","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                dataTestId,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   \n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   data-testid={dataTestId}\n                   role=\"button\"\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icons[icon]({className: 'icon'})}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,SAAQC,WAAW,IAAIC,KAAK,QAAO,gBAAgB;AACnD,SAAQC,IAAI,QAAO,UAAU;AAC7B;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAS2B;EAAA,IARrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGR,IAAI,CAACS,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,KAAC,aAAa;IAAC,SAAS,YAAKN,IAAI,cAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAEhH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEP,yBAA0B;IACvC,eAAaS,UAAW;IACxB,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAE,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACN,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCG,IAAI;IAAA,uBACrB,KAAC,oBAAoB;MAAA,uBACnB,MAAC,WAAW;QAAA,WAERR,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCP,KAAK,CAACO,IAAI,CAAC,CAAC;YAACM,SAAS,EAAE;UAAM,CAAC;QAAC,EAC7B,eAER;UAAA,UACGL;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAED,eAAeF,UAAU"}
+{"version":3,"file":"ActionChip.js","names":["React","Size","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","Medium","disabled","onClick","className","dataTestId","rest","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                dataTestId,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   \n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   data-testid={dataTestId}\n                   role=\"button\"\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icon}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;;AAEA,SAAQC,IAAI,QAAO,UAAU;AAC7B;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAS2B;EAAA,IARrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGR,IAAI,CAACS,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,KAAC,aAAa;IAAC,SAAS,YAAKN,IAAI,cAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAEhH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEP,yBAA0B;IACvC,eAAaS,UAAW;IACxB,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAE,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACN,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCG,IAAI;IAAA,uBACrB,KAAC,oBAAoB;MAAA,uBACnB,MAAC,WAAW;QAAA,WAERR,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCA;QAAI,EACD,eAER;UAAA,UACGC;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAED,eAAeF,UAAU"}

package/dist/Chips/ChipTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChipTypes.cjs","names":[],"sources":["../../src/Chips/ChipTypes.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\n/**\n * Types for the chips.\n */\nexport interface ChipProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseDown' | 'onKeyDown' | 'tabIndex'>{\n  size?: Size;\n  disabled?: boolean;\n}\n\nexport interface InputChipProps extends ChipProps {\n  text: string;\n  variant?: ChipVariant;\n  icon?: ChipIcons;\n  disableRemove?: boolean;\n  onRemove: (e: any) => void;\n  onClick?: () => void;\n}\n\nexport interface FilterChipProps extends ChipProps {\n  text: string;\n  selected: boolean;\n  onClick?: () => void;\n}\n\nexport interface ActionChipProps extends ChipProps {\n  text: string;\n  icon?: ChipIcons;\n  onClick?: () => void;\n}\n\nexport interface ChoiceChipProps extends Testable  {\n  selected: string;\n  values: ChipValue[];\n  onClick?: (value: ChipValue) => void;\n  disabled?: boolean;\n}\n\nexport interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {\n  value: string;\n  label: string;\n  size?: Size;\n}\n\nexport type ChipIcons =\n  | 'Add'\n  | 'ArrowDropDown'\n  | 'ArrowDropUp'\n  | 'ArrowLineDown'\n  | 'ArrowLineLeft'\n  | 'ArrowLineRight'\n  | 'ArrowLineUp'\n  | 'ArrowStopLeft'\n  | 'ArrowStopRight'\n  | 'Attachment'\n  | 'Attention'\n  | 'BackwardsFiveSec'\n  | 'Book'\n  | 'BookmarkOff'\n  | 'BookmarkOn'\n  | 'Bullet'\n  | 'Calendar'\n  | 'CheckboxOff'\n  | 'CheckboxOn'\n  | 'CheckboxSemi'\n  | 'CheckMark'\n  | 'ChevronDown'\n  | 'ChevronLeft'\n  | 'ChevronRight'\n  | 'ChevronUp'\n  | 'Clear'\n  | 'Close'\n  | 'ClosedCaptionOn'\n  | 'CloudAttention'\n  | 'CloudCheck'\n  | 'CloudDownload'\n  | 'CloudLocked'\n  | 'CloudNoConnection'\n  | 'CloudSyncing'\n  | 'CloudUpload'\n  | 'Cloud'\n  | 'Dashboard'\n  | 'Delete'\n  | 'Download'\n  | 'DragHandle'\n  | 'DragIndicator'\n  | 'Edit'\n  | 'Educator'\n  | 'Equals'\n  | 'EventLog'\n  | 'ExtendTextArea'\n  | 'Filter'\n  | 'Forward'\n  | 'ForwardSlash'\n  | 'ForwardFiveSec'\n  | 'FullscreenExit'\n  | 'Fullscreen'\n  | 'GearSettings'\n  | 'GridView'\n  | 'Group'\n  | 'GuidedTour'\n  | 'Help'\n  | 'Hierarchy'\n  | 'History'\n  | 'Home'\n  | 'Information'\n  | 'Institute'\n  | 'Language'\n  | 'ListView'\n  | 'LoadingMedium'\n  | 'LoadingSmall'\n  | 'LockedOff'\n  | 'LockedOn'\n  | 'Login'\n  | 'Logout'\n  | 'Loop'\n  | 'Mail'\n  | 'Manikin'\n  | 'MapPoint'\n  | 'Menu'\n  | 'Minus'\n  | 'MoreHorizontal'\n  | 'MoreVertical'\n  | 'NotificationNew'\n  | 'Notification'\n  | 'OpenFolder'\n  | 'OpenNewWindow'\n  | 'Pause'\n  | 'PlayOutline'\n  | 'Play'\n  | 'Plus'\n  | 'PointDown'\n  | 'PointLeft'\n  | 'PointRight'\n  | 'PointUp'\n  | 'RadioButtonOff'\n  | 'RadioButtonOn'\n  | 'Record'\n  | 'Refresh'\n  | 'Replay'\n  | 'Rewind'\n  | 'Save'\n  | 'Search'\n  | 'Share'\n  | 'ShoppingCart'\n  | 'StarFilled'\n  | 'StarOutlined'\n  | 'Stop'\n  | 'Support'\n  | 'Team'\n  | 'ThumbsDown'\n  | 'ThumbsUp'\n  | 'TimeLimited'\n  | 'Time'\n  | 'Tip'\n  | 'Upload'\n  | 'Usb'\n  | 'User'\n  | 'Video'\n  | 'VisibleOff'\n  | 'VisibleOn'\n  | 'VolumeDown'\n  | 'VolumeOff'\n  | 'VolumeUp';\n\nexport type ChipVariant = States.Default | States.Invalid;\n"],"mappings":""}
+{"version":3,"file":"ChipTypes.cjs","names":[],"sources":["../../src/Chips/ChipTypes.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\n/**\n * Types for the chips.\n */\nexport interface ChipProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseDown' | 'onKeyDown' | 'tabIndex'>{\n  size?: Size;\n  disabled?: boolean;\n}\n\nexport interface InputChipProps extends ChipProps {\n  text: string;\n  variant?: ChipVariant;\n  icon?: React.ReactNode;\n  disableRemove?: boolean;\n  onRemove: (e: any) => void;\n  onClick?: () => void;\n}\n\nexport interface FilterChipProps extends ChipProps {\n  text: string;\n  selected: boolean;\n  onClick?: () => void;\n}\n\nexport interface ActionChipProps extends ChipProps {\n  text: string;\n  icon?: React.ReactNode;\n  onClick?: () => void;\n}\n\nexport interface ChoiceChipProps extends Testable  {\n  selected: string;\n  values: ChipValue[];\n  onClick?: (value: ChipValue) => void;\n  disabled?: boolean;\n}\n\nexport interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {\n  value: string;\n  label: string;\n  size?: Size;\n}\n\nexport type ChipVariant = States.Default | States.Invalid;\n"],"mappings":""}

package/dist/Chips/ChipTypes.d.ts

@@ -10,7 +10,7 @@ export interface ChipProps extends Testable, Omit<React.HTMLAttributes<HTMLDivEl
 export interface InputChipProps extends ChipProps {
     text: string;
     variant?: ChipVariant;
-    icon?: ChipIcons;
+    icon?: React.ReactNode;
     disableRemove?: boolean;
     onRemove: (e: any) => void;
     onClick?: () => void;
@@ -22,7 +22,7 @@ export interface FilterChipProps extends ChipProps {
 }
 export interface ActionChipProps extends ChipProps {
     text: string;
-    icon?: ChipIcons;
+    icon?: React.ReactNode;
     onClick?: () => void;
 }
 export interface ChoiceChipProps extends Testable {
@@ -36,5 +36,4 @@ export interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
     label: string;
     size?: Size;
 }
-export type ChipIcons = 'Add' | 'ArrowDropDown' | 'ArrowDropUp' | 'ArrowLineDown' | 'ArrowLineLeft' | 'ArrowLineRight' | 'ArrowLineUp' | 'ArrowStopLeft' | 'ArrowStopRight' | 'Attachment' | 'Attention' | 'BackwardsFiveSec' | 'Book' | 'BookmarkOff' | 'BookmarkOn' | 'Bullet' | 'Calendar' | 'CheckboxOff' | 'CheckboxOn' | 'CheckboxSemi' | 'CheckMark' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Clear' | 'Close' | 'ClosedCaptionOn' | 'CloudAttention' | 'CloudCheck' | 'CloudDownload' | 'CloudLocked' | 'CloudNoConnection' | 'CloudSyncing' | 'CloudUpload' | 'Cloud' | 'Dashboard' | 'Delete' | 'Download' | 'DragHandle' | 'DragIndicator' | 'Edit' | 'Educator' | 'Equals' | 'EventLog' | 'ExtendTextArea' | 'Filter' | 'Forward' | 'ForwardSlash' | 'ForwardFiveSec' | 'FullscreenExit' | 'Fullscreen' | 'GearSettings' | 'GridView' | 'Group' | 'GuidedTour' | 'Help' | 'Hierarchy' | 'History' | 'Home' | 'Information' | 'Institute' | 'Language' | 'ListView' | 'LoadingMedium' | 'LoadingSmall' | 'LockedOff' | 'LockedOn' | 'Login' | 'Logout' | 'Loop' | 'Mail' | 'Manikin' | 'MapPoint' | 'Menu' | 'Minus' | 'MoreHorizontal' | 'MoreVertical' | 'NotificationNew' | 'Notification' | 'OpenFolder' | 'OpenNewWindow' | 'Pause' | 'PlayOutline' | 'Play' | 'Plus' | 'PointDown' | 'PointLeft' | 'PointRight' | 'PointUp' | 'RadioButtonOff' | 'RadioButtonOn' | 'Record' | 'Refresh' | 'Replay' | 'Rewind' | 'Save' | 'Search' | 'Share' | 'ShoppingCart' | 'StarFilled' | 'StarOutlined' | 'Stop' | 'Support' | 'Team' | 'ThumbsDown' | 'ThumbsUp' | 'TimeLimited' | 'Time' | 'Tip' | 'Upload' | 'Usb' | 'User' | 'Video' | 'VisibleOff' | 'VisibleOn' | 'VolumeDown' | 'VolumeOff' | 'VolumeUp';
 export type ChipVariant = States.Default | States.Invalid;

package/dist/Chips/ChipTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipTypes.js","names":[],"sources":["../../src/Chips/ChipTypes.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\n/**\n * Types for the chips.\n */\nexport interface ChipProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseDown' | 'onKeyDown' | 'tabIndex'>{\n  size?: Size;\n  disabled?: boolean;\n}\n\nexport interface InputChipProps extends ChipProps {\n  text: string;\n  variant?: ChipVariant;\n  icon?: ChipIcons;\n  disableRemove?: boolean;\n  onRemove: (e: any) => void;\n  onClick?: () => void;\n}\n\nexport interface FilterChipProps extends ChipProps {\n  text: string;\n  selected: boolean;\n  onClick?: () => void;\n}\n\nexport interface ActionChipProps extends ChipProps {\n  text: string;\n  icon?: ChipIcons;\n  onClick?: () => void;\n}\n\nexport interface ChoiceChipProps extends Testable  {\n  selected: string;\n  values: ChipValue[];\n  onClick?: (value: ChipValue) => void;\n  disabled?: boolean;\n}\n\nexport interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {\n  value: string;\n  label: string;\n  size?: Size;\n}\n\nexport type ChipIcons =\n  | 'Add'\n  | 'ArrowDropDown'\n  | 'ArrowDropUp'\n  | 'ArrowLineDown'\n  | 'ArrowLineLeft'\n  | 'ArrowLineRight'\n  | 'ArrowLineUp'\n  | 'ArrowStopLeft'\n  | 'ArrowStopRight'\n  | 'Attachment'\n  | 'Attention'\n  | 'BackwardsFiveSec'\n  | 'Book'\n  | 'BookmarkOff'\n  | 'BookmarkOn'\n  | 'Bullet'\n  | 'Calendar'\n  | 'CheckboxOff'\n  | 'CheckboxOn'\n  | 'CheckboxSemi'\n  | 'CheckMark'\n  | 'ChevronDown'\n  | 'ChevronLeft'\n  | 'ChevronRight'\n  | 'ChevronUp'\n  | 'Clear'\n  | 'Close'\n  | 'ClosedCaptionOn'\n  | 'CloudAttention'\n  | 'CloudCheck'\n  | 'CloudDownload'\n  | 'CloudLocked'\n  | 'CloudNoConnection'\n  | 'CloudSyncing'\n  | 'CloudUpload'\n  | 'Cloud'\n  | 'Dashboard'\n  | 'Delete'\n  | 'Download'\n  | 'DragHandle'\n  | 'DragIndicator'\n  | 'Edit'\n  | 'Educator'\n  | 'Equals'\n  | 'EventLog'\n  | 'ExtendTextArea'\n  | 'Filter'\n  | 'Forward'\n  | 'ForwardSlash'\n  | 'ForwardFiveSec'\n  | 'FullscreenExit'\n  | 'Fullscreen'\n  | 'GearSettings'\n  | 'GridView'\n  | 'Group'\n  | 'GuidedTour'\n  | 'Help'\n  | 'Hierarchy'\n  | 'History'\n  | 'Home'\n  | 'Information'\n  | 'Institute'\n  | 'Language'\n  | 'ListView'\n  | 'LoadingMedium'\n  | 'LoadingSmall'\n  | 'LockedOff'\n  | 'LockedOn'\n  | 'Login'\n  | 'Logout'\n  | 'Loop'\n  | 'Mail'\n  | 'Manikin'\n  | 'MapPoint'\n  | 'Menu'\n  | 'Minus'\n  | 'MoreHorizontal'\n  | 'MoreVertical'\n  | 'NotificationNew'\n  | 'Notification'\n  | 'OpenFolder'\n  | 'OpenNewWindow'\n  | 'Pause'\n  | 'PlayOutline'\n  | 'Play'\n  | 'Plus'\n  | 'PointDown'\n  | 'PointLeft'\n  | 'PointRight'\n  | 'PointUp'\n  | 'RadioButtonOff'\n  | 'RadioButtonOn'\n  | 'Record'\n  | 'Refresh'\n  | 'Replay'\n  | 'Rewind'\n  | 'Save'\n  | 'Search'\n  | 'Share'\n  | 'ShoppingCart'\n  | 'StarFilled'\n  | 'StarOutlined'\n  | 'Stop'\n  | 'Support'\n  | 'Team'\n  | 'ThumbsDown'\n  | 'ThumbsUp'\n  | 'TimeLimited'\n  | 'Time'\n  | 'Tip'\n  | 'Upload'\n  | 'Usb'\n  | 'User'\n  | 'Video'\n  | 'VisibleOff'\n  | 'VisibleOn'\n  | 'VolumeDown'\n  | 'VolumeOff'\n  | 'VolumeUp';\n\nexport type ChipVariant = States.Default | States.Invalid;\n"],"mappings":""}
+{"version":3,"file":"ChipTypes.js","names":[],"sources":["../../src/Chips/ChipTypes.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\n/**\n * Types for the chips.\n */\nexport interface ChipProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseDown' | 'onKeyDown' | 'tabIndex'>{\n  size?: Size;\n  disabled?: boolean;\n}\n\nexport interface InputChipProps extends ChipProps {\n  text: string;\n  variant?: ChipVariant;\n  icon?: React.ReactNode;\n  disableRemove?: boolean;\n  onRemove: (e: any) => void;\n  onClick?: () => void;\n}\n\nexport interface FilterChipProps extends ChipProps {\n  text: string;\n  selected: boolean;\n  onClick?: () => void;\n}\n\nexport interface ActionChipProps extends ChipProps {\n  text: string;\n  icon?: React.ReactNode;\n  onClick?: () => void;\n}\n\nexport interface ChoiceChipProps extends Testable  {\n  selected: string;\n  values: ChipValue[];\n  onClick?: (value: ChipValue) => void;\n  disabled?: boolean;\n}\n\nexport interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {\n  value: string;\n  label: string;\n  size?: Size;\n}\n\nexport type ChipVariant = States.Default | States.Invalid;\n"],"mappings":""}

package/dist/Chips/InputChip.cjs

@@ -76,9 +76,7 @@ var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         className: 'with-action-right',
         children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: 'chip-icon icon-left',
-          children: _index.SystemIcons[icon]({
-            className: 'icon'
-          })
+          children: icon
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           children: text
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/dist/Chips/InputChip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputChip.cjs","names":["InputChip","React","forwardRef","ref","icon","text","variant","States","Default","size","Size","Medium","disabled","onClick","disableRemove","dataTestId","onRemove","className","rest","containerRef","useRef","removeRef","useActionWithin","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","defaultOnMouseDownHandler","icons","e"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipVariant, InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\nimport {Size, States} from '../types';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant = States.Default,\n                                                                               size = Size.Medium,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               dataTestId,\n                                                                               onRemove,\n                                                                               className,\n                                                                               ...rest\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <ChipContainer ref={containerRef}\n                   role=\"button\"\n                   data-testid={dataTestId}\n                   aria-roledescription='Removable filter'\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={handleContainerKeyDown}\n                   onClick={() => !disabled && onClick && onClick()}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent className={'with-action-right'}>\n          {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n          <div>{text}</div>\n\n          <div ref={removeRef}\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\n               tabIndex={disableRemove || disabled ? -1 : 0}\n               onMouseDown={defaultOnMouseDownHandler}\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\n            <div className={'chip-icon'}>\n              <SystemIcons.Close className={'remove'}/>\n            </div>\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n});\n\nexport default InputChip;\n"],"mappings":"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"}
+{"version":3,"file":"InputChip.cjs","names":["InputChip","React","forwardRef","ref","icon","text","variant","States","Default","size","Size","Medium","disabled","onClick","disableRemove","dataTestId","onRemove","className","rest","containerRef","useRef","removeRef","useActionWithin","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","defaultOnMouseDownHandler","e"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipVariant, InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\nimport {Size, States} from '../types';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant = States.Default,\n                                                                               size = Size.Medium,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               dataTestId,\n                                                                               onRemove,\n                                                                               className,\n                                                                               ...rest\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <ChipContainer ref={containerRef}\n                   role=\"button\"\n                   data-testid={dataTestId}\n                   aria-roledescription='Removable filter'\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={handleContainerKeyDown}\n                   onClick={() => !disabled && onClick && onClick()}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent className={'with-action-right'}>\n          {icon && <div className={'chip-icon icon-left'}>{icon}</div>}\n\n          <div>{text}</div>\n\n          <div ref={removeRef}\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\n               tabIndex={disableRemove || disabled ? -1 : 0}\n               onMouseDown={defaultOnMouseDownHandler}\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\n            <div className={'chip-icon'}>\n              <SystemIcons.Close className={'remove'}/>\n            </div>\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n});\n\nexport default InputChip;\n"],"mappings":"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"}

package/dist/Chips/InputChip.js

@@ -11,7 +11,7 @@ import * as React from 'react';
 /**
  * Import custom components.
  */
-import { SystemIcons, SystemIcons as icons } from '../icons/index';
+import { SystemIcons } from '../icons/index';
 
 /**
  * Import custom styles.
@@ -83,9 +83,7 @@ var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         className: 'with-action-right',
         children: [icon && /*#__PURE__*/_jsx("div", {
           className: 'chip-icon icon-left',
-          children: icons[icon]({
-            className: 'icon'
-          })
+          children: icon
         }), /*#__PURE__*/_jsx("div", {
           children: text
         }), /*#__PURE__*/_jsx("div", {

package/dist/Chips/InputChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputChip.js","names":["React","SystemIcons","icons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","Size","States","InputChip","forwardRef","ref","icon","text","variant","Default","size","Medium","disabled","onClick","disableRemove","dataTestId","onRemove","className","rest","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","e"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipVariant, InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\nimport {Size, States} from '../types';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant = States.Default,\n                                                                               size = Size.Medium,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               dataTestId,\n                                                                               onRemove,\n                                                                               className,\n                                                                               ...rest\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <ChipContainer ref={containerRef}\n                   role=\"button\"\n                   data-testid={dataTestId}\n                   aria-roledescription='Removable filter'\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={handleContainerKeyDown}\n                   onClick={() => !disabled && onClick && onClick()}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent className={'with-action-right'}>\n          {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n          <div>{text}</div>\n\n          <div ref={removeRef}\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\n               tabIndex={disableRemove || disabled ? -1 : 0}\n               onMouseDown={defaultOnMouseDownHandler}\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\n            <div className={'chip-icon'}>\n              <SystemIcons.Close className={'remove'}/>\n            </div>\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n});\n\nexport default InputChip;\n"],"mappings":"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"}
+{"version":3,"file":"InputChip.js","names":["React","SystemIcons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","Size","States","InputChip","forwardRef","ref","icon","text","variant","Default","size","Medium","disabled","onClick","disableRemove","dataTestId","onRemove","className","rest","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","e"],"sources":["../../src/Chips/InputChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipVariant, InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\nimport {Size, States} from '../types';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant = States.Default,\n                                                                               size = Size.Medium,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               dataTestId,\n                                                                               onRemove,\n                                                                               className,\n                                                                               ...rest\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <ChipContainer ref={containerRef}\n                   role=\"button\"\n                   data-testid={dataTestId}\n                   aria-roledescription='Removable filter'\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={handleContainerKeyDown}\n                   onClick={() => !disabled && onClick && onClick()}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent className={'with-action-right'}>\n          {icon && <div className={'chip-icon icon-left'}>{icon}</div>}\n\n          <div>{text}</div>\n\n          <div ref={removeRef}\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\n               tabIndex={disableRemove || disabled ? -1 : 0}\n               onMouseDown={defaultOnMouseDownHandler}\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\n            <div className={'chip-icon'}>\n              <SystemIcons.Close className={'remove'}/>\n            </div>\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n});\n\nexport default InputChip;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,SAAQC,WAAW,QAA6B,gBAAgB;;AAEhE;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,EAAEC,eAAe,QAAO,WAAW;AACpE,SAAQC,IAAI,EAAEC,MAAM,QAAO,UAAU;AAAC;AAAA;AAEtC,IAAMC,SAAkD,gBAAGT,KAAK,CAACU,UAAU,CAAC,gBAYoBC,GAAG,EAAK;EAAA;EAAA,IAXzBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,oBACJC,OAAO;IAAPA,OAAO,6BAAGN,MAAM,CAACO,OAAO;IAAA,iBACxBC,IAAI;IAAJA,IAAI,0BAAGT,IAAI,CAACU,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,aAAa,QAAbA,aAAa;IACbC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAGpF,IAAMC,YAAY,YAAGd,GAAG,yCAA8CX,KAAK,CAAC0B,MAAM,CAAiB,IAAI,CAAC;EACxG,IAAMC,SAAS,GAAG3B,KAAK,CAAC0B,MAAM,CAAiB,IAAI,CAAC;EAEpDpB,eAAe,CAACmB,YAAY,EAAE,CAACE,SAAS,CAAC,CAAC;;EAE1C;AACF;AACA;AACA;EACE,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,KAA8E,EAAK;IACxG,CAAC,CAACA,KAAK,IAAIA,KAAK,CAACC,eAAe,EAAE;IAClCR,QAAQ,CAACO,KAAK,CAAC;EACjB,CAAC;EAED,IAAME,sBAAsB,GAAG,SAAzBA,sBAAsB,CAAIF,KAA0C,EAAK;IAC7E,IAAIA,KAAK,CAACG,GAAG,KAAK,OAAO,IAAIH,KAAK,CAACG,GAAG,KAAK,GAAG,EAAE;MAC9C,CAACd,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IACnC;IACA,IAAIU,KAAK,CAACG,GAAG,KAAK,WAAW,IAAI,CAACZ,aAAa,EAAE;MAC/C,CAACA,aAAa,IAAIE,QAAQ,IAAIA,QAAQ,CAACO,KAAK,CAAC;IAC/C;EACF,CAAC;;EAED;AACF;AACA;EACE,oBACE,KAAC,aAAa;IAAC,GAAG,EAAEJ,YAAa;IAClB,IAAI,EAAC,QAAQ;IACb,eAAaJ,UAAW;IACxB,wBAAqB,kBAAkB;IACvC,SAAS,YAAKL,IAAI,cAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,eAAKJ,OAAO,cAAI,CAAC,CAACK,QAAO,GAAG,aAAa,GAAG,EAAE,cAAII,SAAS,IAAI,EAAE,CAAG;IACpH,QAAQ,EAAEL,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG,CAAE;IACxC,WAAW,EAAEd,yBAA0B;IACvC,SAAS,EAAE0B,sBAAuB;IAClC,OAAO,EAAE;MAAA,OAAM,CAACb,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA;EAAC,GAC7CK,IAAI;IAAA,uBACrB,KAAC,oBAAoB;MAAA,uBACnB,MAAC,WAAW;QAAC,SAAS,EAAE,mBAAoB;QAAA,WACzCZ,IAAI,iBAAI;UAAK,SAAS,EAAE,qBAAsB;UAAA,UAAEA;QAAI,EAAO,eAE5D;UAAA,UAAMC;QAAI,EAAO,eAEjB;UAAK,GAAG,EAAEc,SAAU;UACf,SAAS,yBAAkBP,aAAa,GAAG,UAAU,GAAG,EAAE,CAAG;UAC7D,QAAQ,EAAEA,aAAa,IAAIF,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;UAC7C,WAAW,EAAEb,yBAA0B;UACvC,OAAO,EAAE,iBAAA4B,CAAC;YAAA,OAAI,CAACb,aAAa,IAAI,CAACF,QAAQ,IAAIU,aAAa,CAACK,CAAC,CAAC;UAAA,CAAC;UAC9D,SAAS,EAAE,mBAAAA,CAAC;YAAA,OAAI,CAACA,CAAC,CAACD,GAAG,KAAK,OAAO,IAAIC,CAAC,CAACD,GAAG,KAAK,GAAG,KAAK,CAACZ,aAAa,IAAI,CAACF,QAAQ,IAAIU,aAAa,CAACK,CAAC,CAAC;UAAA,CAAC;UAAA,uBAC3G;YAAK,SAAS,EAAE,WAAY;YAAA,uBAC1B,KAAC,WAAW,CAAC,KAAK;cAAC,SAAS,EAAE;YAAS;UAAE;QACrC,EACF;MAAA;IACM;EACO,GACT;AAEpB,CAAC,CAAC;AAEF,eAAexB,SAAS"}