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

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.js","names":["React","styled","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","TooltipWrapper","jsx","_jsx","getBorderRadius","borderRadius","getBorderRadiusStyle","flatEdge","radius","IconButtonContentStyles","div","IconButtonStyled","button","props","$borderRadius","$flatEdge","$unsetIconSize","$invertFocus","IconButtonStyledPrimary","$useTransparentBackground","getColor","theme","$iconColor","IconButtonStyledSecondary","IconButton","forwardRef","_ref","ref","id","variant","shape","action","children","useTransparentBackground","disabled","iconColor","unsetIconSize","tabIndex","type","hidden","invertFocus","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties","_excluded","render","ButtonVariant","_objectSpread","onClick","event","stopPropagation","onMouseDown","undefined","propTypes","_pt","oneOf","func","isRequired","bool","string","number","node"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (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.js","names":["React","styled","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","TooltipWrapper","jsx","_jsx","getBorderRadius","borderRadius","getBorderRadiusStyle","flatEdge","radius","IconButtonContentStyles","div","IconButtonStyled","button","props","$borderRadius","$flatEdge","$unsetIconSize","$invertFocus","IconButtonStyledPrimary","$useTransparentBackground","generateToken","componentType","defaultVariant","theme","$iconColor","isOnFill","state","IconButtonStyledSecondary","IconButton","forwardRef","_ref","ref","id","variant","shape","action","children","useTransparentBackground","disabled","iconColor","unsetIconSize","tabIndex","type","hidden","invertFocus","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties","_excluded","render","ButtonVariant","_objectSpread","onClick","event","stopPropagation","onMouseDown","undefined","propTypes","_pt","oneOf","func","isRequired","bool","string","number","node"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (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/Card/HorizontalCard/HorizontalCard.cjs

@@ -24,7 +24,10 @@ const HorizontalCardContentContainer = exports.HorizontalCardContentContainer =
   flex: 1;
   flex-direction: row;
   align-items: center;
-  background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+  background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   border-radius: 8px;
 `;
 const HorizontalCardContainer = exports.HorizontalCardContainer = _styledComponents.default.div`
@@ -33,7 +36,10 @@ const HorizontalCardContainer = exports.HorizontalCardContainer = _styledCompone
 
   &.outline {
     ${HorizontalCardContentContainer} {
-      box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+      box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
     }
   }
 
@@ -49,7 +55,10 @@ const HorizontalCardContainer = exports.HorizontalCardContainer = _styledCompone
     &:hover:not(.action-within):not(.disabled) {
       &.outline {
         ${HorizontalCardContentContainer} {
-          background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+          background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
         }
       }
 
@@ -63,7 +72,10 @@ const HorizontalCardContainer = exports.HorizontalCardContainer = _styledCompone
     &:active:not(.action-within):not(.disabled) {
       &.outline {
         ${HorizontalCardContentContainer} {
-          background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+          background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
         }
       }
 
@@ -90,7 +102,10 @@ const HorizontalCardContainer = exports.HorizontalCardContainer = _styledCompone
 
     &.outline {
       ${HorizontalCardContentContainer} {
-        box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+        box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
       }
     }
   }

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCard.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_HorizontalCardThumbnail","_HorizontalCardBody","_HorizontalCardActions","_common","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","HorizontalCardContentContainer","exports","styled","div","props","COLORS","getColor","theme","HorizontalCardContainer","BOXSHADOWS","BOXSHADOW_L1","BOXSHADOW_L3","BOXSHADOW_L2","focusStyles","HorizontalCard","_ref","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","React","useState","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","key","jsx","ref","tabIndex","onKeyDown","onClick","onMouseDown","defaultOnMouseDownHandler","children","jsxs","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","instance","_default"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\r\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\r\nimport {HorizontalCardBody} from './HorizontalCardBody';\r\nimport {HorizontalCardActions} from './HorizontalCardActions';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\r\n\r\nexport const HorizontalCardContentContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => {\r\n          setActionsRefs(instance ?? []);\r\n        }}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HorizontalCard.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_HorizontalCardThumbnail","_HorizontalCardBody","_HorizontalCardActions","_common","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","HorizontalCardContentContainer","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","HorizontalCardContainer","BOXSHADOWS","BOXSHADOW_L1","state","BOXSHADOW_L3","BOXSHADOW_L2","focusStyles","HorizontalCard","_ref","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","React","useState","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","key","jsx","ref","tabIndex","onKeyDown","onClick","onMouseDown","defaultOnMouseDownHandler","children","jsxs","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","instance","_default"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\r\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\r\nimport {HorizontalCardBody} from './HorizontalCardBody';\r\nimport {HorizontalCardActions} from './HorizontalCardActions';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\r\n\r\nexport const HorizontalCardContentContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant:'default' }, props.theme)};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'hover'}, props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'active'}, props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => {\r\n          setActionsRefs(instance ?? []);\r\n        }}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,wBAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AACA,IAAAK,sBAAA,GAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAAwE,IAAAO,WAAA,GAAAP,OAAA;AAAA,MAAAQ,SAAA;AAAA,SAAAC,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAJ,CAAA,OAAAG,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAL,CAAA,GAAAC,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAR,CAAA,EAAAC,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAZ,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAI,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,QAAAe,gBAAA,CAAAC,OAAA,EAAAjB,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAe,yBAAA,GAAAf,MAAA,CAAAgB,gBAAA,CAAAnB,CAAA,EAAAG,MAAA,CAAAe,yBAAA,CAAAhB,CAAA,KAAAH,OAAA,CAAAI,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAiB,cAAA,CAAApB,CAAA,EAAAC,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAEjE,MAAMqB,8BAA8B,GAAAC,OAAA,CAAAD,8BAAA,GAAGE,yBAAM,CAACC,GAAG;AACxD;AACA;AACA;AACA;AACA;AACA,sBAAsBC,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,YAAY;EAAEC,cAAc,EAAC;AAAU,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAC3H;AACA,CAAC;AAEM,MAAMC,uBAAuB,GAAAT,OAAA,CAAAS,uBAAA,GAAGR,yBAAM,CAACC,GAAG;AACjD;AACA;AACA;AACA;AACA,MAAMH,8BAA8B;AACpC,oCAAoCI,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,QAAQ;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACrI;AACA;AACA;AACA;AACA,MAAMT,8BAA8B;AACpC,oBAAoBW,kBAAU,CAACC,YAAY;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUZ,8BAA8B;AACxC,8BAA8BI,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAE,YAAY;EAAEM,KAAK,EAAE;AAAO,CAAC,EAAET,KAAK,CAACK,KAAK,CAAC;AACvH;AACA;AACA;AACA;AACA,UAAUT,8BAA8B;AACxC,wBAAwBW,kBAAU,CAACG,YAAY;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA,UAAUd,8BAA8B;AACxC,8BAA8BI,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAE,YAAY;EAAEM,KAAK,EAAE;AAAQ,CAAC,EAAET,KAAK,CAACK,KAAK,CAAC;AACxH;AACA;AACA;AACA;AACA,UAAUT,8BAA8B;AACxC,wBAAwBW,kBAAU,CAACI,YAAY;AAC/C;AACA;AACA;AACA;AACA;AACA,QAAQC,mBAAW;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQhB,8BAA8B;AACtC,sBAAsBW,kBAAU,CAACC,YAAY;AAC7C;AACA;AACA;AACA;AACA,QAAQZ,8BAA8B;AACtC,sCAAsCI,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,QAAQ;EAAEM,KAAK,EAAE;AAAW,CAAC,EAAET,KAAK,CAACK,KAAK,CAAC;AAChI;AACA;AACA;AACA,CAAC;AAEM,MAAMQ,cAA4D,GAAGC,IAAA,IAcO;EAAA,IAdN;MACEC,KAAK;MACLC,WAAW;MACXC,IAAI;MACJC,QAAQ;MACRC,IAAI;MACJC,OAAO,GAAG,SAAS;MACnBC,KAAK;MACLC,MAAM;MACNC,OAAO;MACPC,QAAQ;MACRC,SAAS;MACTC;IAEF,CAAC,GAAAZ,IAAA;IADIa,IAAI,OAAAC,yBAAA,CAAApC,OAAA,EAAAsB,IAAA,EAAAzC,SAAA;EAGpF,MAAM,CAACwD,WAAW,EAAEC,cAAc,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAA8C,EAAE,CAAC;EACrG,MAAMC,YAAY,GAAGF,cAAK,CAACG,MAAM,CAAiB,IAAI,CAAC;EAEvD,IAAAC,uBAAe,EAACF,YAAY,EAAEJ,WAAW,CAAC;EAE1C,MAAMO,GAAG,GAAG,GAAGhB,OAAO,IAAIE,MAAM,GAAG,WAAW,GAAG,EAAE,IAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAIC,SAAS,IAAI,EAAE,EAAE;EAEtG,MAAMY,WAAW,GAAGA,CAAA,KAAM;IACxB,CAACb,QAAQ,IAAIF,MAAM,IAAIA,MAAM,CAAC,CAAC;EACjC,CAAC;EAED,MAAMgB,iBAAiB,GAAI/D,CAAsC,IAAK;IACpEA,CAAC,CAACgE,GAAG,KAAK,OAAO,IAAIF,WAAW,CAAC,CAAC;EACpC,CAAC;EAED,oBACE,IAAAjE,WAAA,CAAAoE,GAAA,EAAClC,uBAAuB;IAACmC,GAAG,EAAER,YAAa;IAChCS,QAAQ,EAAEpB,MAAM,IAAI,CAACE,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IACvCC,SAAS,EAAEW,GAAI;IACfO,SAAS,EAAEL,iBAAkB;IAC7BM,OAAO,EAAEP,WAAY;IACrBQ,WAAW,EAAEC,iCAA0B;IAAAC,QAAA,eAChD,IAAA3E,WAAA,CAAA4E,IAAA,EAACpD,8BAA8B,EAAAT,aAAA,CAAAA,aAAA;MACtB0D,WAAW,EAAEC,iCAA0B;MACvC,eAAapB;IAAW,GACpBC,IAAI;MAAAoB,QAAA,gBAEf,IAAA3E,WAAA,CAAAoE,GAAA,EAACxE,wBAAA,CAAAiF,uBAAuB;QAAC5B,KAAK,EAAEA,KAAM;QACbF,IAAI,EAAEA;MAAK,CAAC,CAAC,eAEtC,IAAA/C,WAAA,CAAAoE,GAAA,EAACvE,mBAAA,CAAAiF,kBAAkB;QAACnC,KAAK,EAAEA,KAAM;QACbC,WAAW,EAAEA,WAAY;QACzBC,IAAI,EAAEA,IAAK;QACXC,QAAQ,EAAEA;MAAS,CAAC,CAAC,eAEzC,IAAA9C,WAAA,CAAAoE,GAAA,EAACtE,sBAAA,CAAAiF,qBAAqB;QAACV,GAAG,EAAEW,QAAQ,IAAI;UACtCtB,cAAc,CAACsB,QAAQ,IAAI,EAAE,CAAC;QAChC,CAAE;QACqB7B,OAAO,EAAEA,OAAQ;QACjBC,QAAQ,EAAEA;MAAS,CAAC,CAAC;IAAA,EAEd;EAAC,CACV,CAAC;AAE9B,CAAC;AAAC3B,OAAA,CAAAgB,cAAA,GAAAA,cAAA;AAAA,IAAAwC,QAAA,GAAAxD,OAAA,CAAAL,OAAA,GAEaqB,cAAc","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCard.js

@@ -17,7 +17,10 @@ export const HorizontalCardContentContainer = styled.div`
   flex: 1;
   flex-direction: row;
   align-items: center;
-  background-color: ${props => COLORS.getColor('white', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   border-radius: 8px;
 `;
 export const HorizontalCardContainer = styled.div`
@@ -26,7 +29,10 @@ export const HorizontalCardContainer = styled.div`
 
   &.outline {
     ${HorizontalCardContentContainer} {
-      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_200', props.theme)};
+      box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
     }
   }
 
@@ -42,7 +48,10 @@ export const HorizontalCardContainer = styled.div`
     &:hover:not(.action-within):not(.disabled) {
       &.outline {
         ${HorizontalCardContentContainer} {
-          background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+          background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
         }
       }
 
@@ -56,7 +65,10 @@ export const HorizontalCardContainer = styled.div`
     &:active:not(.action-within):not(.disabled) {
       &.outline {
         ${HorizontalCardContentContainer} {
-          background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+          background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
         }
       }
 
@@ -83,7 +95,10 @@ export const HorizontalCardContainer = styled.div`
 
     &.outline {
       ${HorizontalCardContentContainer} {
-        box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};
+        box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
       }
     }
   }

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","jsx","_jsx","jsxs","_jsxs","HorizontalCardContentContainer","div","props","getColor","theme","HorizontalCardContainer","BOXSHADOW_L1","BOXSHADOW_L3","BOXSHADOW_L2","HorizontalCard","_ref","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","ref","tabIndex","onKeyDown","onClick","onMouseDown","children","_objectSpread","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\r\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\r\nimport {HorizontalCardBody} from './HorizontalCardBody';\r\nimport {HorizontalCardActions} from './HorizontalCardActions';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\r\n\r\nexport const HorizontalCardContentContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => {\r\n          setActionsRefs(instance ?? []);\r\n        }}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","jsx","_jsx","jsxs","_jsxs","HorizontalCardContentContainer","div","props","generateToken","componentType","defaultVariant","theme","HorizontalCardContainer","BOXSHADOW_L1","state","BOXSHADOW_L3","BOXSHADOW_L2","HorizontalCard","_ref","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","ref","tabIndex","onKeyDown","onClick","onMouseDown","children","_objectSpread","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\r\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\r\nimport {HorizontalCardBody} from './HorizontalCardBody';\r\nimport {HorizontalCardActions} from './HorizontalCardActions';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\r\n\r\nexport const HorizontalCardContentContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant:'default' }, props.theme)};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'hover'}, props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'active'}, props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => {\r\n          setActionsRefs(instance ?? []);\r\n        }}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAmB,OAAO;AAEtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,UAAU,EAAEC,MAAM,EAAEC,WAAW,QAAO,cAAc;AAC5D,SAAQC,uBAAuB,QAAO,2BAA2B;AACjE,SAAQC,kBAAkB,QAAO,sBAAsB;AACvD,SAAQC,qBAAqB,QAAO,yBAAyB;AAC7D,SAAQC,yBAAyB,EAAEC,eAAe,QAAO,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAExE,OAAO,MAAMC,8BAA8B,GAAGb,MAAM,CAACc,GAAG;AACxD;AACA;AACA;AACA;AACA;AACA,sBAAsBC,KAAK,IAAIb,MAAM,CAACc,aAAa,CAAC;EAAEC,aAAa,EAAE,YAAY;EAAEC,cAAc,EAAC;AAAU,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AAC3H;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGpB,MAAM,CAACc,GAAG;AACjD;AACA;AACA;AACA;AACA,MAAMD,8BAA8B;AACpC,oCAAoCE,KAAK,IAAIb,MAAM,CAACc,aAAa,CAAC;EAAEC,aAAa,EAAE,QAAQ;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AACrI;AACA;AACA;AACA;AACA,MAAMN,8BAA8B;AACpC,oBAAoBZ,UAAU,CAACoB,YAAY;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUR,8BAA8B;AACxC,8BAA8BE,KAAK,IAAIb,MAAM,CAACc,aAAa,CAAC;EAACC,aAAa,EAAE,YAAY;EAAEK,KAAK,EAAE;AAAO,CAAC,EAAEP,KAAK,CAACI,KAAK,CAAC;AACvH;AACA;AACA;AACA;AACA,UAAUN,8BAA8B;AACxC,wBAAwBZ,UAAU,CAACsB,YAAY;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA,UAAUV,8BAA8B;AACxC,8BAA8BE,KAAK,IAAIb,MAAM,CAACc,aAAa,CAAC;EAACC,aAAa,EAAE,YAAY;EAAEK,KAAK,EAAE;AAAQ,CAAC,EAAEP,KAAK,CAACI,KAAK,CAAC;AACxH;AACA;AACA;AACA;AACA,UAAUN,8BAA8B;AACxC,wBAAwBZ,UAAU,CAACuB,YAAY;AAC/C;AACA;AACA;AACA;AACA;AACA,QAAQrB,WAAW;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQU,8BAA8B;AACtC,sBAAsBZ,UAAU,CAACoB,YAAY;AAC7C;AACA;AACA;AACA;AACA,QAAQR,8BAA8B;AACtC,sCAAsCE,KAAK,IAAIb,MAAM,CAACc,aAAa,CAAC;EAAEC,aAAa,EAAE,QAAQ;EAAEK,KAAK,EAAE;AAAW,CAAC,EAAEP,KAAK,CAACI,KAAK,CAAC;AAChI;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,cAA4D,GAAGC,IAAA,IAcO;EAAA,IAdN;MACEC,KAAK;MACLC,WAAW;MACXC,IAAI;MACJC,QAAQ;MACRC,IAAI;MACJC,OAAO,GAAG,SAAS;MACnBC,KAAK;MACLC,MAAM;MACNC,OAAO;MACPC,QAAQ;MACRC,SAAS;MACTC;IAEF,CAAC,GAAAZ,IAAA;IADIa,IAAI,GAAAC,wBAAA,CAAAd,IAAA,EAAAe,SAAA;EAGpF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG5C,KAAK,CAAC6C,QAAQ,CAA8C,EAAE,CAAC;EACrG,MAAMC,YAAY,GAAG9C,KAAK,CAAC+C,MAAM,CAAiB,IAAI,CAAC;EAEvDtC,eAAe,CAACqC,YAAY,EAAEH,WAAW,CAAC;EAE1C,MAAMK,GAAG,GAAG,GAAGf,OAAO,IAAIE,MAAM,GAAG,WAAW,GAAG,EAAE,IAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAIC,SAAS,IAAI,EAAE,EAAE;EAEtG,MAAMW,WAAW,GAAGA,CAAA,KAAM;IACxB,CAACZ,QAAQ,IAAIF,MAAM,IAAIA,MAAM,CAAC,CAAC;EACjC,CAAC;EAED,MAAMe,iBAAiB,GAAIC,CAAsC,IAAK;IACpEA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAIH,WAAW,CAAC,CAAC;EACpC,CAAC;EAED,oBACEtC,IAAA,CAACU,uBAAuB;IAACgC,GAAG,EAAEP,YAAa;IAChCQ,QAAQ,EAAEnB,MAAM,IAAI,CAACE,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IACvCC,SAAS,EAAEU,GAAI;IACfO,SAAS,EAAEL,iBAAkB;IAC7BM,OAAO,EAAEP,WAAY;IACrBQ,WAAW,EAAEjD,yBAA0B;IAAAkD,QAAA,eAChD7C,KAAA,CAACC,8BAA8B,EAAA6C,aAAA,CAAAA,aAAA;MACtBF,WAAW,EAAEjD,yBAA0B;MACvC,eAAa+B;IAAW,GACpBC,IAAI;MAAAkB,QAAA,gBAEf/C,IAAA,CAACN,uBAAuB;QAAC6B,KAAK,EAAEA,KAAM;QACbF,IAAI,EAAEA;MAAK,CAAC,CAAC,eAEtCrB,IAAA,CAACL,kBAAkB;QAACsB,KAAK,EAAEA,KAAM;QACbC,WAAW,EAAEA,WAAY;QACzBC,IAAI,EAAEA,IAAK;QACXC,QAAQ,EAAEA;MAAS,CAAC,CAAC,eAEzCpB,IAAA,CAACJ,qBAAqB;QAAC8C,GAAG,EAAEO,QAAQ,IAAI;UACtChB,cAAc,CAACgB,QAAQ,IAAI,EAAE,CAAC;QAChC,CAAE;QACqBxB,OAAO,EAAEA,OAAQ;QACjBC,QAAQ,EAAEA;MAAS,CAAC,CAAC;IAAA,EAEd;EAAC,CACV,CAAC;AAE9B,CAAC;AAED,eAAeX,cAAc","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCardBody.cjs

@@ -19,13 +19,22 @@ const HorizontalCardBodyContainer = exports.HorizontalCardBodyContainer = _style
   padding: 16px;
 `;
 const HorizontalCardBodyTitle = exports.HorizontalCardBodyTitle = _styledComponents.default.div`
-  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme))}
+  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   .disabled & {
-    color: ${props => _styles.COLORS.getColor('neutral_500', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
   }
 `;
 const HorizontalCardBodyDescription = exports.HorizontalCardBodyDescription = _styledComponents.default.div`
-  ${props => (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
+  ${props => (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
 `;
 const HorizontalCardBodyTagsContainer = exports.HorizontalCardBodyTagsContainer = _styledComponents.default.div`
   display: flex;

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardBody.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_LinearProgress","_Tag","_jsxRuntime","HorizontalCardBodyContainer","exports","styled","div","HorizontalCardBodyTitle","props","ComponentMStyling","ComponentTextStyle","Bold","COLORS","getColor","theme","HorizontalCardBodyDescription","ComponentXSStyling","Regular","HorizontalCardBodyTagsContainer","HorizontalCardBody","_ref","title","description","progress","tags","jsxs","children","jsx","map","tag","index","Tag","label","variant","icon","LinearProgress","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\nimport {LinearProgress} from '../../LinearProgress';\r\nimport {Tag} from '../../Tag';\r\n\r\nexport const HorizontalCardBodyContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  padding: 16px;\r\n`;\r\n\r\nexport const HorizontalCardBodyTitle = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n  .disabled & {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const HorizontalCardBodyDescription = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const HorizontalCardBodyTagsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\r\n\r\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\r\n                                                                     title,\r\n                                                                     description,\r\n                                                                     progress,\r\n                                                                     tags,\r\n                                                                   }) => {\r\n\r\n  return (\r\n    <HorizontalCardBodyContainer>\r\n      <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\r\n      {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\r\n      {\r\n        tags &&\r\n        <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\r\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\r\n        </HorizontalCardBodyTagsContainer>\r\n      }\r\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\r\n    </HorizontalCardBodyContainer>\r\n  )\r\n};\r\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,IAAA,GAAAJ,OAAA;AAA8B,IAAAK,WAAA,GAAAL,OAAA;AAEvB,MAAMM,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAGE,yBAAM,CAACC,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,uBAAuB,GAAAH,OAAA,CAAAG,uBAAA,GAAGF,yBAAM,CAACC,GAAG;AACjD,IAAIE,KAAK,IAAI,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AAC9F;AACA,aAAaN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACjE;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAX,OAAA,CAAAW,6BAAA,GAAGV,yBAAM,CAACC,GAAG;AACvD,IAAIE,KAAK,IAAI,IAAAQ,0BAAkB,EAACN,0BAAkB,CAACO,OAAO,EAAEL,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AACxG,CAAC;AAEM,MAAMI,+BAA+B,GAAAd,OAAA,CAAAc,+BAAA,GAAGb,yBAAM,CAACC,GAAG;AACzD;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMa,kBAAkD,GAAGC,IAAA,IAKO;EAAA,IALN;IACEC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRC;EACF,CAAC,GAAAJ,IAAA;EAElE,oBACE,IAAAlB,WAAA,CAAAuB,IAAA,EAACtB,2BAA2B;IAAAuB,QAAA,gBAC1B,IAAAxB,WAAA,CAAAyB,GAAA,EAACpB,uBAAuB;MAAAmB,QAAA,EAAEL;IAAK,CAA0B,CAAC,EACzDC,WAAW,iBAAI,IAAApB,WAAA,CAAAyB,GAAA,EAACZ,6BAA6B;MAAAW,QAAA,EAAEJ;IAAW,CAAgC,CAAC,EAE1FE,IAAI,iBACJ,IAAAtB,WAAA,CAAAyB,GAAA,EAACT,+BAA+B;MAAAQ,QAAA,EAAEF,IAAI,CAACI,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,kBACpD,IAAA5B,WAAA,CAAAyB,GAAA,EAAC1B,IAAA,CAAA8B,GAAG;QAAaC,KAAK,EAAEH,GAAG,CAACG,KAAM;QAACC,OAAO,EAAEJ,GAAG,CAACI,OAAQ;QAACC,IAAI,EAAEL,GAAG,CAACK;MAAK,GAA9DJ,KAA+D,CAAE;IAAC,CAC7C,CAAC,EAEnCP,QAAQ,iBAAI,IAAArB,WAAA,CAAAyB,GAAA,EAAC3B,eAAA,CAAAmC,cAAc;MAACC,KAAK,EAAEb,QAAQ,CAACa,KAAM;MAACC,GAAG,EAAEd,QAAQ,CAACc;IAAI,CAAC,CAAC;EAAA,CAC7C,CAAC;AAElC,CAAC;AAACjC,OAAA,CAAAe,kBAAA,GAAAA,kBAAA","ignoreList":[]}
+{"version":3,"file":"HorizontalCardBody.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_LinearProgress","_Tag","_jsxRuntime","HorizontalCardBodyContainer","exports","styled","div","HorizontalCardBodyTitle","props","ComponentMStyling","ComponentTextStyle","Bold","COLORS","generateToken","componentType","defaultVariant","theme","state","HorizontalCardBodyDescription","ComponentXSStyling","Regular","HorizontalCardBodyTagsContainer","HorizontalCardBody","_ref","title","description","progress","tags","jsxs","children","jsx","map","tag","index","Tag","label","variant","icon","LinearProgress","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\nimport {LinearProgress} from '../../LinearProgress';\r\nimport {Tag} from '../../Tag';\r\n\r\nexport const HorizontalCardBodyContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  padding: 16px;\r\n`;\r\n\r\nexport const HorizontalCardBodyTitle = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme))}\r\n  .disabled & {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n  }\r\n`;\r\n\r\nexport const HorizontalCardBodyDescription = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme))}\r\n`;\r\n\r\nexport const HorizontalCardBodyTagsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\r\n\r\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\r\n                                                                     title,\r\n                                                                     description,\r\n                                                                     progress,\r\n                                                                     tags,\r\n                                                                   }) => {\r\n\r\n  return (\r\n    <HorizontalCardBodyContainer>\r\n      <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\r\n      {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\r\n      {\r\n        tags &&\r\n        <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\r\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\r\n        </HorizontalCardBodyTagsContainer>\r\n      }\r\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\r\n    </HorizontalCardBodyContainer>\r\n  )\r\n};\r\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,IAAA,GAAAJ,OAAA;AAA8B,IAAAK,WAAA,GAAAL,OAAA;AAEvB,MAAMM,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAGE,yBAAM,CAACC,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,uBAAuB,GAAAH,OAAA,CAAAG,uBAAA,GAAGF,yBAAM,CAACC,GAAG;AACjD,IAAIE,KAAK,IAAI,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAU,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC,CAAC;AAChJ;AACA,aAAaR,KAAK,IAAII,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEG,KAAK,EAAE;AAAW,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACrG;AACA,CAAC;AAEM,MAAME,6BAA6B,GAAAd,OAAA,CAAAc,6BAAA,GAAGb,yBAAM,CAACC,GAAG;AACvD,IAAIE,KAAK,IAAI,IAAAW,0BAAkB,EAACT,0BAAkB,CAACU,OAAO,EAAER,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC,CAAC;AACnJ,CAAC;AAEM,MAAMK,+BAA+B,GAAAjB,OAAA,CAAAiB,+BAAA,GAAGhB,yBAAM,CAACC,GAAG;AACzD;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMgB,kBAAkD,GAAGC,IAAA,IAKO;EAAA,IALN;IACEC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRC;EACF,CAAC,GAAAJ,IAAA;EAElE,oBACE,IAAArB,WAAA,CAAA0B,IAAA,EAACzB,2BAA2B;IAAA0B,QAAA,gBAC1B,IAAA3B,WAAA,CAAA4B,GAAA,EAACvB,uBAAuB;MAAAsB,QAAA,EAAEL;IAAK,CAA0B,CAAC,EACzDC,WAAW,iBAAI,IAAAvB,WAAA,CAAA4B,GAAA,EAACZ,6BAA6B;MAAAW,QAAA,EAAEJ;IAAW,CAAgC,CAAC,EAE1FE,IAAI,iBACJ,IAAAzB,WAAA,CAAA4B,GAAA,EAACT,+BAA+B;MAAAQ,QAAA,EAAEF,IAAI,CAACI,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,kBACpD,IAAA/B,WAAA,CAAA4B,GAAA,EAAC7B,IAAA,CAAAiC,GAAG;QAAaC,KAAK,EAAEH,GAAG,CAACG,KAAM;QAACC,OAAO,EAAEJ,GAAG,CAACI,OAAQ;QAACC,IAAI,EAAEL,GAAG,CAACK;MAAK,GAA9DJ,KAA+D,CAAE;IAAC,CAC7C,CAAC,EAEnCP,QAAQ,iBAAI,IAAAxB,WAAA,CAAA4B,GAAA,EAAC9B,eAAA,CAAAsC,cAAc;MAACC,KAAK,EAAEb,QAAQ,CAACa,KAAM;MAACC,GAAG,EAAEd,QAAQ,CAACc;IAAI,CAAC,CAAC;EAAA,CAC7C,CAAC;AAElC,CAAC;AAACpC,OAAA,CAAAkB,kBAAA,GAAAA,kBAAA","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCardBody.js

@@ -12,13 +12,22 @@ export const HorizontalCardBodyContainer = styled.div`
   padding: 16px;
 `;
 export const HorizontalCardBodyTitle = styled.div`
-  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}
+  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   .disabled & {
-    color: ${props => COLORS.getColor('neutral_500', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
   }
 `;
 export const HorizontalCardBodyDescription = styled.div`
-  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
 `;
 export const HorizontalCardBodyTagsContainer = styled.div`
   display: flex;

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardBody.js","names":["React","styled","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","LinearProgress","Tag","jsx","_jsx","jsxs","_jsxs","HorizontalCardBodyContainer","div","HorizontalCardBodyTitle","props","Bold","getColor","theme","HorizontalCardBodyDescription","Regular","HorizontalCardBodyTagsContainer","HorizontalCardBody","_ref","title","description","progress","tags","children","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\nimport {LinearProgress} from '../../LinearProgress';\r\nimport {Tag} from '../../Tag';\r\n\r\nexport const HorizontalCardBodyContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  padding: 16px;\r\n`;\r\n\r\nexport const HorizontalCardBodyTitle = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n  .disabled & {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const HorizontalCardBodyDescription = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const HorizontalCardBodyTagsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\r\n\r\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\r\n                                                                     title,\r\n                                                                     description,\r\n                                                                     progress,\r\n                                                                     tags,\r\n                                                                   }) => {\r\n\r\n  return (\r\n    <HorizontalCardBodyContainer>\r\n      <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\r\n      {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\r\n      {\r\n        tags &&\r\n        <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\r\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\r\n        </HorizontalCardBodyTagsContainer>\r\n      }\r\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\r\n    </HorizontalCardBodyContainer>\r\n  )\r\n};\r\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAO,cAAc;AAC9F,SAAQC,cAAc,QAAO,sBAAsB;AACnD,SAAQC,GAAG,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9B,OAAO,MAAMC,2BAA2B,GAAGX,MAAM,CAACY,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGb,MAAM,CAACY,GAAG;AACjD,IAAIE,KAAK,IAAIZ,iBAAiB,CAACC,kBAAkB,CAACY,IAAI,EAAEd,MAAM,CAACe,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAC9F;AACA,aAAaH,KAAK,IAAIb,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGlB,MAAM,CAACY,GAAG;AACvD,IAAIE,KAAK,IAAIV,kBAAkB,CAACD,kBAAkB,CAACgB,OAAO,EAAElB,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACxG,CAAC;AAED,OAAO,MAAMG,+BAA+B,GAAGpB,MAAM,CAACY,GAAG;AACzD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMS,kBAAkD,GAAGC,IAAA,IAKO;EAAA,IALN;IACEC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRC;EACF,CAAC,GAAAJ,IAAA;EAElE,oBACEZ,KAAA,CAACC,2BAA2B;IAAAgB,QAAA,gBAC1BnB,IAAA,CAACK,uBAAuB;MAAAc,QAAA,EAAEJ;IAAK,CAA0B,CAAC,EACzDC,WAAW,iBAAIhB,IAAA,CAACU,6BAA6B;MAAAS,QAAA,EAAEH;IAAW,CAAgC,CAAC,EAE1FE,IAAI,iBACJlB,IAAA,CAACY,+BAA+B;MAAAO,QAAA,EAAED,IAAI,CAACE,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,kBACpDtB,IAAA,CAACF,GAAG;QAAayB,KAAK,EAAEF,GAAG,CAACE,KAAM;QAACC,OAAO,EAAEH,GAAG,CAACG,OAAQ;QAACC,IAAI,EAAEJ,GAAG,CAACI;MAAK,GAA9DH,KAA+D,CAAE;IAAC,CAC7C,CAAC,EAEnCL,QAAQ,iBAAIjB,IAAA,CAACH,cAAc;MAAC6B,KAAK,EAAET,QAAQ,CAACS,KAAM;MAACC,GAAG,EAAEV,QAAQ,CAACU;IAAI,CAAC,CAAC;EAAA,CAC7C,CAAC;AAElC,CAAC","ignoreList":[]}
+{"version":3,"file":"HorizontalCardBody.js","names":["React","styled","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","LinearProgress","Tag","jsx","_jsx","jsxs","_jsxs","HorizontalCardBodyContainer","div","HorizontalCardBodyTitle","props","Bold","generateToken","componentType","defaultVariant","theme","state","HorizontalCardBodyDescription","Regular","HorizontalCardBodyTagsContainer","HorizontalCardBody","_ref","title","description","progress","tags","children","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\nimport {LinearProgress} from '../../LinearProgress';\r\nimport {Tag} from '../../Tag';\r\n\r\nexport const HorizontalCardBodyContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  padding: 16px;\r\n`;\r\n\r\nexport const HorizontalCardBodyTitle = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme))}\r\n  .disabled & {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n  }\r\n`;\r\n\r\nexport const HorizontalCardBodyDescription = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme))}\r\n`;\r\n\r\nexport const HorizontalCardBodyTagsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\r\n\r\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\r\n                                                                     title,\r\n                                                                     description,\r\n                                                                     progress,\r\n                                                                     tags,\r\n                                                                   }) => {\r\n\r\n  return (\r\n    <HorizontalCardBodyContainer>\r\n      <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\r\n      {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\r\n      {\r\n        tags &&\r\n        <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\r\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\r\n        </HorizontalCardBodyTagsContainer>\r\n      }\r\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\r\n    </HorizontalCardBodyContainer>\r\n  )\r\n};\r\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAO,cAAc;AAC9F,SAAQC,cAAc,QAAO,sBAAsB;AACnD,SAAQC,GAAG,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9B,OAAO,MAAMC,2BAA2B,GAAGX,MAAM,CAACY,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGb,MAAM,CAACY,GAAG;AACjD,IAAIE,KAAK,IAAIZ,iBAAiB,CAACC,kBAAkB,CAACY,IAAI,EAAEd,MAAM,CAACe,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAU,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAChJ;AACA,aAAaL,KAAK,IAAIb,MAAM,CAACe,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEG,KAAK,EAAE;AAAW,CAAC,EAAEN,KAAK,CAACK,KAAK,CAAC;AACrG;AACA,CAAC;AAED,OAAO,MAAME,6BAA6B,GAAGrB,MAAM,CAACY,GAAG;AACvD,IAAIE,KAAK,IAAIV,kBAAkB,CAACD,kBAAkB,CAACmB,OAAO,EAAErB,MAAM,CAACe,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACnJ,CAAC;AAED,OAAO,MAAMI,+BAA+B,GAAGvB,MAAM,CAACY,GAAG;AACzD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMY,kBAAkD,GAAGC,IAAA,IAKO;EAAA,IALN;IACEC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRC;EACF,CAAC,GAAAJ,IAAA;EAElE,oBACEf,KAAA,CAACC,2BAA2B;IAAAmB,QAAA,gBAC1BtB,IAAA,CAACK,uBAAuB;MAAAiB,QAAA,EAAEJ;IAAK,CAA0B,CAAC,EACzDC,WAAW,iBAAInB,IAAA,CAACa,6BAA6B;MAAAS,QAAA,EAAEH;IAAW,CAAgC,CAAC,EAE1FE,IAAI,iBACJrB,IAAA,CAACe,+BAA+B;MAAAO,QAAA,EAAED,IAAI,CAACE,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,kBACpDzB,IAAA,CAACF,GAAG;QAAa4B,KAAK,EAAEF,GAAG,CAACE,KAAM;QAACC,OAAO,EAAEH,GAAG,CAACG,OAAQ;QAACC,IAAI,EAAEJ,GAAG,CAACI;MAAK,GAA9DH,KAA+D,CAAE;IAAC,CAC7C,CAAC,EAEnCL,QAAQ,iBAAIpB,IAAA,CAACH,cAAc;MAACgC,KAAK,EAAET,QAAQ,CAACS,KAAM;MAACC,GAAG,EAAEV,QAAQ,CAACU;IAAI,CAAC,CAAC;EAAA,CAC7C,CAAC;AAElC,CAAC","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs

@@ -17,10 +17,16 @@ const HorizontalCardIconContainer = exports.HorizontalCardIconContainer = _style
   width: 64px;
   height: 80px;
 
-  color: ${props => _styles.COLORS.getColor('black', props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
 
   .disabled & {
-    color: ${props => _styles.COLORS.getColor('neutral_500', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
   }
 `;
 const HorizontalCardImageContainer = exports.HorizontalCardImageContainer = _styledComponents.default.div`

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_Image","_jsxRuntime","HorizontalCardIconContainer","exports","styled","div","props","COLORS","getColor","theme","HorizontalCardImageContainer","HorizontalCardThumbnail","_ref","image","icon","jsxs","Fragment","children","jsx","React","cloneElement","width","height","ImageWithFallbacks","fallbacks","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\r\n  height: 80px;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .disabled & {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const HorizontalCardImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\r\n\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAA+C,IAAAI,WAAA,GAAAJ,OAAA;AAExC,MAAMK,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAGE,yBAAM,CAACC,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,WAAWC,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AACzD;AACA;AACA,aAAaH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA,CAAC;AAGM,MAAMC,4BAA4B,GAAAP,OAAA,CAAAO,4BAAA,GAAGN,yBAAM,CAACC,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMM,uBAAuD,GAAGC,IAAA,IAGO;EAAA,IAHN;IACEC,KAAK;IACLC;EACF,CAAC,GAAAF,IAAA;EAEvE,oBACE,IAAAX,WAAA,CAAAc,IAAA,EAAAd,WAAA,CAAAe,QAAA;IAAAC,QAAA,GAEIH,IAAI,iBACF,IAAAb,WAAA,CAAAiB,GAAA,EAAChB,2BAA2B;MAAAe,QAAA,eACzBE,cAAK,CAACC,YAAY,CAACN,IAAI,EAAE;QAACO,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,CACvB,CAAC,EAGhCT,KAAK,iBACH,IAAAZ,WAAA,CAAAiB,GAAA,EAACR,4BAA4B;MAAAO,QAAA,eACzB,IAAAhB,WAAA,CAAAiB,GAAA,EAAClB,MAAA,CAAAuB,kBAAkB;QAACC,SAAS,EAAEX,KAAK,CAACY,WAAW,IAAI,EAAG;QAACC,GAAG,EAAEb,KAAK,CAACa,GAAI;QAACC,GAAG,EAAEd,KAAK,CAACc,GAAI;QACnEC,MAAM,EAAEf,KAAK,CAACe,MAAM,IAAI,KAAM;QAACP,KAAK,EAAER,KAAK,CAACQ,KAAM;QAACC,MAAM,EAAET,KAAK,CAACS;MAAO,CAAC;IAAC,CACpE,CAAC;EAAA,CAEnC,CAAC;AAEP,CAAC;AAACnB,OAAA,CAAAQ,uBAAA,GAAAA,uBAAA","ignoreList":[]}
+{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_Image","_jsxRuntime","HorizontalCardIconContainer","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","state","HorizontalCardImageContainer","HorizontalCardThumbnail","_ref","image","icon","jsxs","Fragment","children","jsx","React","cloneElement","width","height","ImageWithFallbacks","fallbacks","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\r\n  height: 80px;\r\n\r\n  color: ${props => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'subtle' }, props.theme)};\r\n\r\n  .disabled & {\r\n    color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const HorizontalCardImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\r\n\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAA+C,IAAAI,WAAA,GAAAJ,OAAA;AAExC,MAAMK,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAGE,yBAAM,CAACC,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,WAAWC,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAC1G;AACA;AACA,aAAaL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEG,KAAK,EAAE;AAAW,CAAC,EAAEN,KAAK,CAACK,KAAK,CAAC;AACrG;AACA,CAAC;AAGM,MAAME,4BAA4B,GAAAV,OAAA,CAAAU,4BAAA,GAAGT,yBAAM,CAACC,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMS,uBAAuD,GAAGC,IAAA,IAGO;EAAA,IAHN;IACEC,KAAK;IACLC;EACF,CAAC,GAAAF,IAAA;EAEvE,oBACE,IAAAd,WAAA,CAAAiB,IAAA,EAAAjB,WAAA,CAAAkB,QAAA;IAAAC,QAAA,GAEIH,IAAI,iBACF,IAAAhB,WAAA,CAAAoB,GAAA,EAACnB,2BAA2B;MAAAkB,QAAA,eACzBE,cAAK,CAACC,YAAY,CAACN,IAAI,EAAE;QAACO,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,CACvB,CAAC,EAGhCT,KAAK,iBACH,IAAAf,WAAA,CAAAoB,GAAA,EAACR,4BAA4B;MAAAO,QAAA,eACzB,IAAAnB,WAAA,CAAAoB,GAAA,EAACrB,MAAA,CAAA0B,kBAAkB;QAACC,SAAS,EAAEX,KAAK,CAACY,WAAW,IAAI,EAAG;QAACC,GAAG,EAAEb,KAAK,CAACa,GAAI;QAACC,GAAG,EAAEd,KAAK,CAACc,GAAI;QACnEC,MAAM,EAAEf,KAAK,CAACe,MAAM,IAAI,KAAM;QAACP,KAAK,EAAER,KAAK,CAACQ,KAAM;QAACC,MAAM,EAAET,KAAK,CAACS;MAAO,CAAC;IAAC,CACpE,CAAC;EAAA,CAEnC,CAAC;AAEP,CAAC;AAACtB,OAAA,CAAAW,uBAAA,GAAAA,uBAAA","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js

@@ -10,10 +10,16 @@ export const HorizontalCardIconContainer = styled.div`
   width: 64px;
   height: 80px;
 
-  color: ${props => COLORS.getColor('black', props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
 
   .disabled & {
-    color: ${props => COLORS.getColor('neutral_500', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
   }
 `;
 export const HorizontalCardImageContainer = styled.div`

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","HorizontalCardIconContainer","div","props","getColor","theme","HorizontalCardImageContainer","HorizontalCardThumbnail","_ref","image","icon","children","cloneElement","width","height","fallbacks","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\r\n  height: 80px;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .disabled & {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const HorizontalCardImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\r\n\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,QAAO,cAAc;AACnC,SAAQC,kBAAkB,QAAO,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/C,OAAO,MAAMC,2BAA2B,GAAGT,MAAM,CAACU,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,WAAWC,KAAK,IAAIV,MAAM,CAACW,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AACzD;AACA;AACA,aAAaF,KAAK,IAAIV,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA,CAAC;AAGD,OAAO,MAAMC,4BAA4B,GAAGd,MAAM,CAACU,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMK,uBAAuD,GAAGC,IAAA,IAGO;EAAA,IAHN;IACEC,KAAK;IACLC;EACF,CAAC,GAAAF,IAAA;EAEvE,oBACER,KAAA,CAAAF,SAAA;IAAAa,QAAA,GAEID,IAAI,iBACFd,IAAA,CAACK,2BAA2B;MAAAU,QAAA,eACzBpB,KAAK,CAACqB,YAAY,CAACF,IAAI,EAAE;QAACG,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,CACvB,CAAC,EAGhCL,KAAK,iBACHb,IAAA,CAACU,4BAA4B;MAAAK,QAAA,eACzBf,IAAA,CAACF,kBAAkB;QAACqB,SAAS,EAAEN,KAAK,CAACO,WAAW,IAAI,EAAG;QAACC,GAAG,EAAER,KAAK,CAACQ,GAAI;QAACC,GAAG,EAAET,KAAK,CAACS,GAAI;QACnEC,MAAM,EAAEV,KAAK,CAACU,MAAM,IAAI,KAAM;QAACN,KAAK,EAAEJ,KAAK,CAACI,KAAM;QAACC,MAAM,EAAEL,KAAK,CAACK;MAAO,CAAC;IAAC,CACpE,CAAC;EAAA,CAEnC,CAAC;AAEP,CAAC","ignoreList":[]}
+{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","HorizontalCardIconContainer","div","props","generateToken","componentType","defaultVariant","theme","state","HorizontalCardImageContainer","HorizontalCardThumbnail","_ref","image","icon","children","cloneElement","width","height","fallbacks","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\r\n  height: 80px;\r\n\r\n  color: ${props => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'subtle' }, props.theme)};\r\n\r\n  .disabled & {\r\n    color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const HorizontalCardImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\r\n\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,QAAO,cAAc;AACnC,SAAQC,kBAAkB,QAAO,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/C,OAAO,MAAMC,2BAA2B,GAAGT,MAAM,CAACU,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,WAAWC,KAAK,IAAIV,MAAM,CAACW,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AAC1G;AACA;AACA,aAAaJ,KAAK,IAAIV,MAAM,CAACW,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEG,KAAK,EAAE;AAAW,CAAC,EAAEL,KAAK,CAACI,KAAK,CAAC;AACrG;AACA,CAAC;AAGD,OAAO,MAAME,4BAA4B,GAAGjB,MAAM,CAACU,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMQ,uBAAuD,GAAGC,IAAA,IAGO;EAAA,IAHN;IACEC,KAAK;IACLC;EACF,CAAC,GAAAF,IAAA;EAEvE,oBACEX,KAAA,CAAAF,SAAA;IAAAgB,QAAA,GAEID,IAAI,iBACFjB,IAAA,CAACK,2BAA2B;MAAAa,QAAA,eACzBvB,KAAK,CAACwB,YAAY,CAACF,IAAI,EAAE;QAACG,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,CACvB,CAAC,EAGhCL,KAAK,iBACHhB,IAAA,CAACa,4BAA4B;MAAAK,QAAA,eACzBlB,IAAA,CAACF,kBAAkB;QAACwB,SAAS,EAAEN,KAAK,CAACO,WAAW,IAAI,EAAG;QAACC,GAAG,EAAER,KAAK,CAACQ,GAAI;QAACC,GAAG,EAAET,KAAK,CAACS,GAAI;QACnEC,MAAM,EAAEV,KAAK,CAACU,MAAM,IAAI,KAAM;QAACN,KAAK,EAAEJ,KAAK,CAACI,KAAM;QAACC,MAAM,EAAEL,KAAK,CAACK;MAAO,CAAC;IAAC,CACpE,CAAC;EAAA,CAEnC,CAAC;AAEP,CAAC","ignoreList":[]}

package/dist/Card/VerticalCard/Card.cjs

@@ -21,7 +21,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const CardTopLevelContainerStyles = exports.CardTopLevelContainerStyles = _styledComponents.default.div`
-  background-color: ${props => _index.COLORS.getColor('white', props.theme)};
+  background-color: ${props => _index.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   min-width: 240px;
   overflow: hidden;
 
@@ -37,7 +40,10 @@ const CardTopLevelContainerStyles = exports.CardTopLevelContainerStyles = _style
   }
 
   .outline & {
-    border: 1px solid ${props => _index.COLORS.getColor('neutral_200', props.theme)};
+    border: 1px solid ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 `;
 const CardContainerStyles = exports.CardContainerStyles = _styledComponents.default.div`
@@ -51,11 +57,17 @@ const CardContainerStyles = exports.CardContainerStyles = _styledComponents.defa
     &.outline:not(.action-within) {
       ${CardTopLevelContainerStyles} {
         &:hover {
-          background-color: ${props => _index.COLORS.getColor('primary_20', props.theme)};
+          background-color: ${props => _index.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
         }
 
         &:active, &.active-state {
-          background-color: ${props => _index.COLORS.getColor('primary_100', props.theme)};
+          background-color: ${props => _index.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
         }
       }
     }
@@ -76,7 +88,10 @@ const CardContainerStyles = exports.CardContainerStyles = _styledComponents.defa
   &.disabled {
     cursor: not-allowed;
     ${CardTopLevelContainerStyles}{
-      border: 1px solid ${props => _index.COLORS.getColor('neutral_100', props.theme)};
+      border: 1px solid ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 `;