@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/Button/Iconbutton.cjs

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

package/dist/Button/Iconbutton.cjs.map

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

package/dist/Button/Iconbutton.js

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

package/dist/Button/Iconbutton.js.map

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

package/dist/Card/HorizontalCard/HorizontalCard.cjs

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

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

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

package/dist/Card/HorizontalCard/HorizontalCard.js

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

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","_templateObject","_taggedTemplateLiteral","white","HorizontalCardContainer","_templateObject2","neutral_200","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","neutral_100","HorizontalCard","_ref","title","description","tags","progress","icon","_ref$variant","variant","image","action","actions","disabled","className","dataTestId","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","actionsRefs","setActionsRefs","containerRef","useRef","cls","concat","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: ${COLORS.white};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${COLORS.primary_20};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${COLORS.primary_100};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  )\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":";;;;;;;;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;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExE,OAAO,IAAMC,8BAA8B,GAAGb,MAAM,CAACc,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,kKAMlCd,MAAM,CAACe,KAAK,CAEjC;AAED,OAAO,IAAMC,uBAAuB,GAAGlB,MAAM,CAACc,GAAG,CAAAK,gBAAA,KAAAA,gBAAA,GAAAH,sBAAA,m8BAK3CH,8BAA8B,EACAX,MAAM,CAACkB,WAAW,EAKhDP,8BAA8B,EAChBZ,UAAU,CAACoB,YAAY,EASjCR,8BAA8B,EACVX,MAAM,CAACoB,UAAU,EAKrCT,8BAA8B,EAChBZ,UAAU,CAACsB,YAAY,EAOrCV,8BAA8B,EACVX,MAAM,CAACsB,WAAW,EAKtCX,8BAA8B,EAChBZ,UAAU,CAACwB,YAAY,EAMvCtB,WAAW,EAQXU,8BAA8B,EAChBZ,UAAU,CAACoB,YAAY,EAKrCR,8BAA8B,EACAX,MAAM,CAACwB,WAAW,CAIvD;AAED,OAAO,IAAMC,cAA4D,GAAG,SAA/DA,cAA4DA,CAAAC,IAAA,EAcU;EAAA,IAbJC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACJC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IAAAC,YAAA,GAAAN,IAAA,CACJO,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,SAAS,GAAAA,YAAA;IACnBE,KAAK,GAAAR,IAAA,CAALQ,KAAK;IACLC,MAAM,GAAAT,IAAA,CAANS,MAAM;IACNC,OAAO,GAAAV,IAAA,CAAPU,OAAO;IACPC,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACRC,SAAS,GAAAZ,IAAA,CAATY,SAAS;IACTC,UAAU,GAAAb,IAAA,CAAVa,UAAU;IACPC,IAAI,GAAAC,wBAAA,CAAAf,IAAA,EAAAgB,SAAA;EAGpF,IAAAC,eAAA,GAAsC9C,KAAK,CAAC+C,QAAQ,CAAuC,EAAE,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAAvFI,WAAW,GAAAF,gBAAA;IAAEG,cAAc,GAAAH,gBAAA;EAClC,IAAMI,YAAY,GAAGpD,KAAK,CAACqD,MAAM,CAAiB,IAAI,CAAC;EAEvD5C,eAAe,CAAC2C,YAAY,EAAEF,WAAW,CAAC;EAE1C,IAAMI,GAAG,MAAAC,MAAA,CAAMnB,OAAO,OAAAmB,MAAA,CAAIjB,MAAM,GAAG,WAAW,GAAG,EAAE,OAAAiB,MAAA,CAAIf,QAAQ,GAAG,UAAU,GAAG,EAAE,OAAAe,MAAA,CAAId,SAAS,IAAI,EAAE,CAAE;EAEtG,IAAMe,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxB,CAAChB,QAAQ,IAAIF,MAAM,IAAIA,MAAM,CAAC,CAAC;EACjC,CAAC;EAED,IAAMmB,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,CAAsC,EAAK;IACpEA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAIH,WAAW,CAAC,CAAC;EACpC,CAAC;EAED,oBACE7C,IAAA,CAACQ,uBAAuB;IAACyC,GAAG,EAAER,YAAa;IAChCS,QAAQ,EAAEvB,MAAM,IAAI,CAACE,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IACvCC,SAAS,EAAEa,GAAI;IACfQ,SAAS,EAAEL,iBAAkB;IAC7BM,OAAO,EAAEP,WAAY;IACrBQ,WAAW,EAAExD,yBAA0B;IAAAyD,QAAA,eAChDpD,KAAA,CAACC,8BAA8B,EAAAoD,aAAA,CAAAA,aAAA;MACtBF,WAAW,EAAExD,yBAA0B;MACvC,eAAakC;IAAW,GACpBC,IAAI;MAAAsB,QAAA,gBAEftD,IAAA,CAACN,uBAAuB;QAACgC,KAAK,EAAEA,KAAM;QACbH,IAAI,EAAEA;MAAK,CAAC,CAAC,eAEtCvB,IAAA,CAACL,kBAAkB;QAACwB,KAAK,EAAEA,KAAM;QACbC,WAAW,EAAEA,WAAY;QACzBC,IAAI,EAAEA,IAAK;QACXC,QAAQ,EAAEA;MAAS,CAAC,CAAC,eAEzCtB,IAAA,CAACJ,qBAAqB;QAACqD,GAAG,EAAE,SAAAA,IAAAO,QAAQ;UAAA,OAAIhB,cAAc,CAACgB,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,EAAE,CAAC;QAAA,CAAC;QAChD5B,OAAO,EAAEA,OAAQ;QACjBC,QAAQ,EAAEA;MAAS,CAAC,CAAC;IAAA,EAEd;EAAC,CACV,CAAC;AAE9B,CAAC;AAED,eAAeZ,cAAc","ignoreList":[]}
+{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","jsx","_jsx","jsxs","_jsxs","HorizontalCardContentContainer","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","HorizontalCardContainer","_templateObject2","BOXSHADOW_L1","BOXSHADOW_L3","BOXSHADOW_L2","HorizontalCard","_ref","title","description","tags","progress","icon","_ref$variant","variant","image","action","actions","disabled","className","dataTestId","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","actionsRefs","setActionsRefs","containerRef","useRef","cls","concat","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>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  )\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCardBody.cjs

@@ -15,9 +15,15 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var HorizontalCardBodyContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"])));
 exports.HorizontalCardBodyContainer = HorizontalCardBodyContainer;
-var HorizontalCardBodyTitle = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black), _styles.COLORS.neutral_500);
+var HorizontalCardBodyTitle = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), function (props) {
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme));
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_500', props.theme);
+});
 exports.HorizontalCardBodyTitle = HorizontalCardBodyTitle;
-var HorizontalCardBodyDescription = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+var HorizontalCardBodyDescription = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (props) {
+  return (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme));
+});
 exports.HorizontalCardBodyDescription = HorizontalCardBodyDescription;
 var HorizontalCardBodyTagsContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n"])));
 exports.HorizontalCardBodyTagsContainer = HorizontalCardBodyTagsContainer;

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardBody.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_LinearProgress","_Tag","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","HorizontalCardBodyContainer","styled","div","_taggedTemplateLiteral2","exports","HorizontalCardBodyTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","neutral_500","HorizontalCardBodyDescription","ComponentXSStyling","Regular","neutral_600","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  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\r\n  .disabled & {\r\n    color: ${COLORS.neutral_500};\r\n  }\r\n`;\r\n\r\nexport const HorizontalCardBodyDescription = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\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;AAAA,IAAAM,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAEvB,IAAMC,2BAA2B,GAAGC,4BAAM,CAACC,GAAG,CAAAN,eAAA,KAAAA,eAAA,OAAAO,uBAAA,8GAMpD;AAACC,OAAA,CAAAJ,2BAAA,GAAAA,2BAAA;AAEK,IAAMK,uBAAuB,GAAGJ,4BAAM,CAACC,GAAG,CAAAL,gBAAA,KAAAA,gBAAA,OAAAM,uBAAA,uEAC7C,IAAAG,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,KAAK,CAAC,EAE/CD,cAAM,CAACE,WAAW,CAE9B;AAACP,OAAA,CAAAC,uBAAA,GAAAA,uBAAA;AAEK,IAAMO,6BAA6B,GAAGX,4BAAM,CAACC,GAAG,CAAAJ,gBAAA,KAAAA,gBAAA,OAAAK,uBAAA,+BACnD,IAAAU,0BAAkB,EAACN,0BAAkB,CAACO,OAAO,EAAEL,cAAM,CAACM,WAAW,CAAC,CACrE;AAACX,OAAA,CAAAQ,6BAAA,GAAAA,6BAAA;AAEK,IAAMI,+BAA+B,GAAGf,4BAAM,CAACC,GAAG,CAAAH,gBAAA,KAAAA,gBAAA,OAAAI,uBAAA,oHAMxD;AAACC,OAAA,CAAAY,+BAAA,GAAAA,+BAAA;AAIK,IAAMC,kBAAkD,GAAG,SAArDA,kBAAkDA,CAAAC,IAAA,EAKU;EAAA,IAJJC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;EAGvE,oBACE,IAAA3B,WAAA,CAAA4B,IAAA,EAACvB,2BAA2B;IAAAwB,QAAA,gBAC1B,IAAA7B,WAAA,CAAA8B,GAAA,EAACpB,uBAAuB;MAAAmB,QAAA,EAAEL;IAAK,CAA0B,CAAC,EACzDC,WAAW,iBAAI,IAAAzB,WAAA,CAAA8B,GAAA,EAACb,6BAA6B;MAAAY,QAAA,EAAEJ;IAAW,CAAgC,CAAC,EAE1FE,IAAI,iBACJ,IAAA3B,WAAA,CAAA8B,GAAA,EAACT,+BAA+B;MAAAQ,QAAA,EAAEF,IAAI,CAACI,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBACpD,IAAAjC,WAAA,CAAA8B,GAAA,EAAC/B,IAAA,CAAAmC,GAAG;UAAaC,KAAK,EAAEH,GAAG,CAACG,KAAM;UAACC,OAAO,EAAEJ,GAAG,CAACI,OAAQ;UAACC,IAAI,EAAEL,GAAG,CAACK;QAAK,GAA9DJ,KAA+D,CAAC;MAAA,CAAC;IAAC,CAC7C,CAAC,EAEnCP,QAAQ,iBAAI,IAAA1B,WAAA,CAAA8B,GAAA,EAAChC,eAAA,CAAAwC,cAAc;MAACC,KAAK,EAAEb,QAAQ,CAACa,KAAM;MAACC,GAAG,EAAEd,QAAQ,CAACc;IAAI,CAAC,CAAC;EAAA,CAC7C,CAAC;AAElC,CAAC;AAAC/B,OAAA,CAAAa,kBAAA,GAAAA,kBAAA","ignoreList":[]}
+{"version":3,"file":"HorizontalCardBody.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_LinearProgress","_Tag","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","HorizontalCardBodyContainer","styled","div","_taggedTemplateLiteral2","exports","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":"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","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCardBody.js

@@ -8,8 +8,14 @@ import { Tag } from '../../Tag';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var HorizontalCardBodyContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"])));
-export var HorizontalCardBodyTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), COLORS.neutral_500);
-export var HorizontalCardBodyDescription = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+export var HorizontalCardBodyTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), function (props) {
+  return ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return COLORS.getColor('neutral_500', props.theme);
+});
+export var HorizontalCardBodyDescription = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+  return ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme));
+});
 export var HorizontalCardBodyTagsContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n"])));
 export var HorizontalCardBody = function HorizontalCardBody(_ref) {
   var title = _ref.title,

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","_templateObject","_taggedTemplateLiteral","HorizontalCardBodyTitle","_templateObject2","Bold","black","neutral_500","HorizontalCardBodyDescription","_templateObject3","Regular","neutral_600","HorizontalCardBodyTagsContainer","_templateObject4","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  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\r\n  .disabled & {\r\n    color: ${COLORS.neutral_500};\r\n  }\r\n`;\r\n\r\nexport const HorizontalCardBodyDescription = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\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;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE9B,OAAO,IAAMC,2BAA2B,GAAGX,MAAM,CAACY,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,kGAMpD;AAED,OAAO,IAAMC,uBAAuB,GAAGf,MAAM,CAACY,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,2DAC7CZ,iBAAiB,CAACC,kBAAkB,CAACc,IAAI,EAAEhB,MAAM,CAACiB,KAAK,CAAC,EAE/CjB,MAAM,CAACkB,WAAW,CAE9B;AAED,OAAO,IAAMC,6BAA6B,GAAGpB,MAAM,CAACY,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,sBAAA,mBACnDV,kBAAkB,CAACD,kBAAkB,CAACmB,OAAO,EAAErB,MAAM,CAACsB,WAAW,CAAC,CACrE;AAED,OAAO,IAAMC,+BAA+B,GAAGxB,MAAM,CAACY,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAX,sBAAA,wGAMxD;AAID,OAAO,IAAMY,kBAAkD,GAAG,SAArDA,kBAAkDA,CAAAC,IAAA,EAKU;EAAA,IAJJC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;EAGvE,oBACErB,KAAA,CAACC,2BAA2B;IAAAqB,QAAA,gBAC1BxB,IAAA,CAACO,uBAAuB;MAAAiB,QAAA,EAAEJ;IAAK,CAA0B,CAAC,EACzDC,WAAW,iBAAIrB,IAAA,CAACY,6BAA6B;MAAAY,QAAA,EAAEH;IAAW,CAAgC,CAAC,EAE1FE,IAAI,iBACJvB,IAAA,CAACgB,+BAA+B;MAAAQ,QAAA,EAAED,IAAI,CAACE,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBACpD3B,IAAA,CAACF,GAAG;UAAa8B,KAAK,EAAEF,GAAG,CAACE,KAAM;UAACC,OAAO,EAAEH,GAAG,CAACG,OAAQ;UAACC,IAAI,EAAEJ,GAAG,CAACI;QAAK,GAA9DH,KAA+D,CAAC;MAAA,CAAC;IAAC,CAC7C,CAAC,EAEnCL,QAAQ,iBAAItB,IAAA,CAACH,cAAc;MAACkC,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","_templateObject","_taggedTemplateLiteral","HorizontalCardBodyTitle","_templateObject2","props","Bold","getColor","theme","HorizontalCardBodyDescription","_templateObject3","Regular","HorizontalCardBodyTagsContainer","_templateObject4","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;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE9B,OAAO,IAAMC,2BAA2B,GAAGX,MAAM,CAACY,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,kGAMpD;AAED,OAAO,IAAMC,uBAAuB,GAAGf,MAAM,CAACY,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,2DAC7C,UAAAG,KAAK;EAAA,OAAIf,iBAAiB,CAACC,kBAAkB,CAACe,IAAI,EAAEjB,MAAM,CAACkB,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAAA,GAEjF,UAAAH,KAAK;EAAA,OAAIhB,MAAM,CAACkB,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAEhE;AAED,OAAO,IAAMC,6BAA6B,GAAGrB,MAAM,CAACY,GAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAR,sBAAA,mBACnD,UAAAG,KAAK;EAAA,OAAIb,kBAAkB,CAACD,kBAAkB,CAACoB,OAAO,EAAEtB,MAAM,CAACkB,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAAA,EACvG;AAED,OAAO,IAAMI,+BAA+B,GAAGxB,MAAM,CAACY,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAX,sBAAA,wGAMxD;AAID,OAAO,IAAMY,kBAAkD,GAAG,SAArDA,kBAAkDA,CAAAC,IAAA,EAKU;EAAA,IAJJC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;EAGvE,oBACErB,KAAA,CAACC,2BAA2B;IAAAqB,QAAA,gBAC1BxB,IAAA,CAACO,uBAAuB;MAAAiB,QAAA,EAAEJ;IAAK,CAA0B,CAAC,EACzDC,WAAW,iBAAIrB,IAAA,CAACa,6BAA6B;MAAAW,QAAA,EAAEH;IAAW,CAAgC,CAAC,EAE1FE,IAAI,iBACJvB,IAAA,CAACgB,+BAA+B;MAAAQ,QAAA,EAAED,IAAI,CAACE,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBACpD3B,IAAA,CAACF,GAAG;UAAa8B,KAAK,EAAEF,GAAG,CAACE,KAAM;UAACC,OAAO,EAAEH,GAAG,CAACG,OAAQ;UAACC,IAAI,EAAEJ,GAAG,CAACI;QAAK,GAA9DH,KAA+D,CAAC;MAAA,CAAC;IAAC,CAC7C,CAAC,EAEnCL,QAAQ,iBAAItB,IAAA,CAACH,cAAc;MAACkC,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

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