@laerdal/life-react-components 6.0.0-dev.1.full → 6.0.0-dev.10.full

package/dist/Button/Button.js.map

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

package/dist/Button/Iconbutton.cjs

@@ -67,89 +67,151 @@ const IconButtonStyled = exports.IconButtonStyled = _styledComponents.default.bu
 `;
 const IconButtonStyledPrimary = exports.IconButtonStyledPrimary = (0, _styledComponents.default)(IconButtonStyled)`
   ${IconButtonContentStyles} {
-    background-color: ${props => props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('primary_500', props.theme)};
+    background-color: ${props => props.$useTransparentBackground ? 'transparent' : _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary'
+}, props.theme)};
 
     svg {
-      fill: ${props => props.$iconColor || _styles.COLORS.getColor('white', props.theme)};
+      fill: ${props => props.$iconColor || _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
       path {
-        fill: ${props => props.$iconColor || _styles.COLORS.getColor('white', props.theme)};
+        fill: ${props => props.$iconColor || _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
       }
     }
   }
   &:hover:not(:disabled),
   &.hover-state {
     ${IconButtonContentStyles} {
-      background-color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => _styles.COLORS.getColor('white', props.theme)};
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
   &:active:not(:disabled),
   &.active-state {
     ${IconButtonContentStyles} {
-      background: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'active',
+  defaultVariant: 'primary'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => _styles.COLORS.getColor('white', props.theme)};
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
   &:disabled {
     ${IconButtonContentStyles} {
-      background-color: ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)};
     }
     svg {
       path {
-        fill: ${props => _styles.COLORS.getColor('white', props.theme)};
+        fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
       }
-      fill: ${props => _styles.COLORS.getColor('white', props.theme)};
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
 `;
 const IconButtonStyledSecondary = exports.IconButtonStyledSecondary = (0, _styledComponents.default)(IconButtonStyled)`
   ${IconButtonContentStyles} {
-    background-color: ${props => props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme)};
+    background-color: transparent;
 
     svg {
-      fill: ${props => props.$iconColor || _styles.COLORS.getColor('neutral_600', props.theme)};
+      fill: ${props => props.$iconColor || _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
       path {
-        fill: ${props => props.$iconColor || _styles.COLORS.getColor('neutral_600', props.theme)};
+        fill: ${props => props.$iconColor || _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
       }
     }
   }
 
-
   &:hover:not(:disabled) {
     ${IconButtonContentStyles} {
-      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover'
+}, props.theme)};
     }
   }
+
   &:active:not(:disabled),
   &.active-state {
     ${IconButtonContentStyles} {
-      background: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+      background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'active'
+}, props.theme)};
     }
   }
 
   &:disabled {
     ${IconButtonContentStyles} {
-      background-color: ${props => props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme)};
+      background-color: transparent;
     }
     svg {
       path {
-        fill: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+        fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
       }
-      fill: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 `;

package/dist/Button/Iconbutton.cjs.map

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

package/dist/Button/Iconbutton.js

@@ -60,89 +60,151 @@ export const IconButtonStyled = styled.button`
 `;
 export const IconButtonStyledPrimary = styled(IconButtonStyled)`
   ${IconButtonContentStyles} {
-    background-color: ${props => props.$useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme)};
+    background-color: ${props => props.$useTransparentBackground ? 'transparent' : COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary'
+}, props.theme)};
 
     svg {
-      fill: ${props => props.$iconColor || COLORS.getColor('white', props.theme)};
+      fill: ${props => props.$iconColor || COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
       path {
-        fill: ${props => props.$iconColor || COLORS.getColor('white', props.theme)};
+        fill: ${props => props.$iconColor || COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
       }
     }
   }
   &:hover:not(:disabled),
   &.hover-state {
     ${IconButtonContentStyles} {
-      background-color: ${props => COLORS.getColor('primary_700', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => COLORS.getColor('white', props.theme)};
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
   &:active:not(:disabled),
   &.active-state {
     ${IconButtonContentStyles} {
-      background: ${props => COLORS.getColor('primary_800', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'active',
+  defaultVariant: 'primary'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => COLORS.getColor('white', props.theme)};
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
   &:disabled {
     ${IconButtonContentStyles} {
-      background-color: ${props => COLORS.getColor('neutral_200', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)};
     }
     svg {
       path {
-        fill: ${props => COLORS.getColor('white', props.theme)};
+        fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
       }
-      fill: ${props => COLORS.getColor('white', props.theme)};
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
 `;
 export const IconButtonStyledSecondary = styled(IconButtonStyled)`
   ${IconButtonContentStyles} {
-    background-color: ${props => props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme)};
+    background-color: transparent;
 
     svg {
-      fill: ${props => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};
+      fill: ${props => props.$iconColor || COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
       path {
-        fill: ${props => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};
+        fill: ${props => props.$iconColor || COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
       }
     }
   }
 
-
   &:hover:not(:disabled) {
     ${IconButtonContentStyles} {
-      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => COLORS.getColor('primary_700', props.theme)};
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover'
+}, props.theme)};
     }
   }
+
   &:active:not(:disabled),
   &.active-state {
     ${IconButtonContentStyles} {
-      background: ${props => COLORS.getColor('primary_100', props.theme)};
+      background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => COLORS.getColor('primary_800', props.theme)};
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'active'
+}, props.theme)};
     }
   }
 
   &:disabled {
     ${IconButtonContentStyles} {
-      background-color: ${props => props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme)};
+      background-color: transparent;
     }
     svg {
       path {
-        fill: ${props => COLORS.getColor('neutral_300', props.theme)};
+        fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
       }
-      fill: ${props => COLORS.getColor('neutral_300', props.theme)};
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 `;