@laerdal/life-react-components 2.1.1-dev.9.full → 2.2.1-dev.2

package/dist/Banners/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","hasWindow","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_800","correct_700","correct_200","correct_20","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ${StyledLink} {\n    &:link {\n      color: ${(props) => props.link};\n    }\n    &:visited {\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active {\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\n    }\n  }\n`;\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n  size,\n  type = 'neutral',\n  children,\n  bottom,\n  testId,\n  linkText,\n  link,\n  onClose,\n  icon,\n  noIcon,\n  linkAction,\n  fullWidth,\n  className,\n  ...rest\n}) => {\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800,\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer\n      data-testid={testId}\n      $type={bannerParams.typeColor}\n      linkFocused={bannerParams.linkFocused}\n      linkVisited={bannerParams.linkVisited}\n      link={bannerParams.accentColor}\n      hover={bannerParams.hoverColor}\n      bottom={bottom}\n      className={cls}\n      role=\"note\"\n      {...rest}>\n      <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"mappings":"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"}
+{"version":3,"file":"Banner.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","hasWindow","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_800","correct_700","correct_200","correct_20","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ${StyledLink} {\n    &:link {\n      color: ${(props) => props.link};\n    }\n    &:visited {\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active {\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\n    }\n  }\n`;\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n  size,\n  type = 'neutral',\n  children,\n  bottom,\n  testId,\n  linkText,\n  link,\n  onClose,\n  icon,\n  noIcon,\n  linkAction,\n  fullWidth,\n  className,\n  ...rest\n}) => {\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800,\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer\n      data-testid={testId}\n      $type={bannerParams.typeColor}\n      linkFocused={bannerParams.linkFocused}\n      linkVisited={bannerParams.linkVisited}\n      link={bannerParams.accentColor}\n      hover={bannerParams.hoverColor}\n      bottom={bottom}\n      className={cls}\n      role=\"note\"\n      {...rest}>\n      <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"mappings":"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"}

package/dist/Button/Button.js

@@ -14,8 +14,8 @@ import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextS
 import { COLORS, focusStyles, invertedFocusStyles } from '../styles';
 import { Size } from '../types';
 import { defaultOnMouseDownHandler } from '../common';
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var getBorderRadius = function getBorderRadius(flatEdge, radius) {
   switch (flatEdge) {

package/dist/Card/HorizontalCard/HorizontalCard.cjs

@@ -4,7 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.HorizontalCard = void 0;
+exports.default = exports.HorizontalCardContentContainer = exports.HorizontalCardContainer = exports.HorizontalCard = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -16,10 +17,14 @@ var _HorizontalCardBody = require("./HorizontalCardBody");
 var _HorizontalCardActions = require("./HorizontalCardActions");
 var _common = require("../../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["title", "description", "tags", "progress", "icon", "variant", "image", "action", "actions", "disabled", "className"];
+var _excluded = ["title", "description", "tags", "progress", "icon", "variant", "image", "action", "actions", "disabled", "className", "dataTestId"];
 var _templateObject, _templateObject2;
-var ContentContainer = _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 Container = _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"])), ContentContainer, _styles.COLORS.neutral_200, ContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L1, ContentContainer, _styles.COLORS.primary_20, ContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L3, ContentContainer, _styles.COLORS.primary_100, ContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L2, _styles.focusStyles, ContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L1, ContentContainer, _styles.COLORS.neutral_100);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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);
+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);
+exports.HorizontalCardContainer = HorizontalCardContainer;
 var HorizontalCard = function HorizontalCard(_ref) {
   var title = _ref.title,
     description = _ref.description,
@@ -33,6 +38,7 @@ var HorizontalCard = function HorizontalCard(_ref) {
     actions = _ref.actions,
     disabled = _ref.disabled,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _React$useState = _react.default.useState([]),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -47,14 +53,17 @@ var HorizontalCard = function HorizontalCard(_ref) {
   var handleButtonPress = function handleButtonPress(e) {
     e.key === 'Enter' && handleClick();
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardContainer, {
     ref: containerRef,
     tabIndex: action && !disabled ? 0 : -1,
     className: cls,
     onKeyDown: handleButtonPress,
     onClick: handleClick,
     onMouseDown: _common.defaultOnMouseDownHandler,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentContainer, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(HorizontalCardContentContainer, _objectSpread(_objectSpread({
+      onMouseDown: _common.defaultOnMouseDownHandler,
+      "data-testid": dataTestId
+    }, rest), {}, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalCardThumbnail.HorizontalCardThumbnail, {
         image: image,
         icon: icon
@@ -70,7 +79,7 @@ var HorizontalCard = function HorizontalCard(_ref) {
         actions: actions,
         disabled: disabled
       })]
-    })
+    }))
   });
 };
 exports.HorizontalCard = HorizontalCard;

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCard.cjs","names":["ContentContainer","styled","div","COLORS","white","Container","neutral_200","BOXSHADOWS","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","focusStyles","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","rest","React","useState","actionsRefs","setActionsRefs","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","e","key","defaultOnMouseDownHandler","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${ContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${ContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${ContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${ContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled,\n                                                                               className,\n                                                                               ...rest\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <Container ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <ContentContainer>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </ContentContainer>\n    </Container>\n  )\n};\n\nexport default HorizontalCard;\n"],"mappings":";;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAwE;AAAA;AAAA;AAExE,IAAMA,gBAAgB,GAAGC,yBAAM,CAACC,GAAG,6OAMbC,cAAM,CAACC,KAAK,CAEjC;AAED,IAAMC,SAAS,GAAGJ,yBAAM,CAACC,GAAG,ghCAKtBF,gBAAgB,EACcG,cAAM,CAACG,WAAW,EAKhDN,gBAAgB,EACFO,kBAAU,CAACC,YAAY,EASjCR,gBAAgB,EACIG,cAAM,CAACM,UAAU,EAKrCT,gBAAgB,EACFO,kBAAU,CAACG,YAAY,EAOrCV,gBAAgB,EACIG,cAAM,CAACQ,WAAW,EAKtCX,gBAAgB,EACFO,kBAAU,CAACK,YAAY,EAMvCC,mBAAW,EAQXb,gBAAgB,EACFO,kBAAU,CAACC,YAAY,EAKrCR,gBAAgB,EACcG,cAAM,CAACW,WAAW,CAIvD;AAEM,IAAMC,cAA4D,GAAG,SAA/DA,cAA4D,OAaU;EAAA,IAZJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IAAA,oBACJC,OAAO;IAAPA,OAAO,6BAAG,SAAS;IACnBC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAGpF,sBAAsCC,cAAK,CAACC,QAAQ,CAAuC,EAAE,CAAC;IAAA;IAAvFC,WAAW;IAAEC,cAAc;EAClC,IAAMC,YAAY,GAAGJ,cAAK,CAACK,MAAM,CAAiB,IAAI,CAAC;EAEvD,IAAAC,uBAAe,EAACF,YAAY,EAAEF,WAAW,CAAC;EAE1C,IAAMK,GAAG,aAAMd,OAAO,cAAIE,MAAM,GAAG,WAAW,GAAG,EAAE,cAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAE;EAEtG,IAAMU,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxB,CAACX,QAAQ,IAAIF,MAAM,IAAIA,MAAM,EAAE;EACjC,CAAC;EAED,IAAMc,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,CAAsC,EAAK;IACpEA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAIH,WAAW,EAAE;EACpC,CAAC;EAED,oBACE,qBAAC,SAAS;IAAC,GAAG,EAAEJ,YAAa;IAClB,QAAQ,EAAET,MAAM,IAAI,CAACE,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IACvC,SAAS,EAAEU,GAAI;IACf,SAAS,EAAEE,iBAAkB;IAC7B,OAAO,EAAED,WAAY;IACrB,WAAW,EAAEI,iCAA0B;IAAA,uBAChD,sBAAC,gBAAgB;MAAA,wBAEf,qBAAC,gDAAuB;QAAC,KAAK,EAAElB,KAAM;QACb,IAAI,EAAEF;MAAK,EAAE,eAEtC,qBAAC,sCAAkB;QAAC,KAAK,EAAEJ,KAAM;QACb,WAAW,EAAEC,WAAY;QACzB,IAAI,EAAEC,IAAK;QACX,QAAQ,EAAEC;MAAS,EAAE,eAEzC,qBAAC,4CAAqB;QAAC,GAAG,EAAE,aAAAsB,QAAQ;UAAA,OAAIV,cAAc,CAACU,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,EAAE,CAAC;QAAA,CAAC;QAChD,OAAO,EAAEjB,OAAQ;QACjB,QAAQ,EAAEC;MAAS,EAAE;IAAA;EAE3B,EACT;AAEhB,CAAC;AAAC;AAAA,eAEaV,cAAc;AAAA"}
+{"version":3,"file":"HorizontalCard.cjs","names":["HorizontalCardContentContainer","styled","div","COLORS","white","HorizontalCardContainer","neutral_200","BOXSHADOWS","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","focusStyles","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","React","useState","actionsRefs","setActionsRefs","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","e","key","defaultOnMouseDownHandler","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nexport const HorizontalCardContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nexport const HorizontalCardContainer = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${HorizontalCardContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${HorizontalCardContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${HorizontalCardContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${HorizontalCardContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${HorizontalCardContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${HorizontalCardContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${HorizontalCardContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${HorizontalCardContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled,\n                                                                               className,\n                                                                               dataTestId,\n                                                                               ...rest\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <HorizontalCardContainer ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <HorizontalCardContentContainer\n               onMouseDown={defaultOnMouseDownHandler}\n               data-testid={dataTestId}\n               {...rest}>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </HorizontalCardContentContainer>\n    </HorizontalCardContainer>\n  )\n};\n\nexport default HorizontalCard;\n"],"mappings":"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"}

package/dist/Card/HorizontalCard/HorizontalCard.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
 import { HorizontalCardProps } from './types';
+export declare const HorizontalCardContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HorizontalCard: React.FunctionComponent<HorizontalCardProps>;
 export default HorizontalCard;

package/dist/Card/HorizontalCard/HorizontalCard.js

@@ -1,8 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["title", "description", "tags", "progress", "icon", "variant", "image", "action", "actions", "disabled", "className"];
+var _excluded = ["title", "description", "tags", "progress", "icon", "variant", "image", "action", "actions", "disabled", "className", "dataTestId"];
 var _templateObject, _templateObject2;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
 import styled from 'styled-components';
 import { BOXSHADOWS, COLORS, focusStyles } from '../../styles';
@@ -12,8 +15,8 @@ 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";
-var ContentContainer = 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);
-var Container = 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"])), ContentContainer, COLORS.neutral_200, ContentContainer, BOXSHADOWS.BOXSHADOW_L1, ContentContainer, COLORS.primary_20, ContentContainer, BOXSHADOWS.BOXSHADOW_L3, ContentContainer, COLORS.primary_100, ContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, ContentContainer, BOXSHADOWS.BOXSHADOW_L1, ContentContainer, 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"])), 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 HorizontalCard = function HorizontalCard(_ref) {
   var title = _ref.title,
     description = _ref.description,
@@ -27,6 +30,7 @@ export var HorizontalCard = function HorizontalCard(_ref) {
     actions = _ref.actions,
     disabled = _ref.disabled,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState([]),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -41,14 +45,17 @@ export var HorizontalCard = function HorizontalCard(_ref) {
   var handleButtonPress = function handleButtonPress(e) {
     e.key === 'Enter' && handleClick();
   };
-  return /*#__PURE__*/_jsx(Container, {
+  return /*#__PURE__*/_jsx(HorizontalCardContainer, {
     ref: containerRef,
     tabIndex: action && !disabled ? 0 : -1,
     className: cls,
     onKeyDown: handleButtonPress,
     onClick: handleClick,
     onMouseDown: defaultOnMouseDownHandler,
-    children: /*#__PURE__*/_jsxs(ContentContainer, {
+    children: /*#__PURE__*/_jsxs(HorizontalCardContentContainer, _objectSpread(_objectSpread({
+      onMouseDown: defaultOnMouseDownHandler,
+      "data-testid": dataTestId
+    }, rest), {}, {
       children: [/*#__PURE__*/_jsx(HorizontalCardThumbnail, {
         image: image,
         icon: icon
@@ -64,7 +71,7 @@ export var HorizontalCard = function HorizontalCard(_ref) {
         actions: actions,
         disabled: disabled
       })]
-    })
+    }))
   });
 };
 export default HorizontalCard;

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","ContentContainer","div","white","Container","neutral_200","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","rest","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${ContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${ContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${ContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${ContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled,\n                                                                               className,\n                                                                               ...rest\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <Container ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <ContentContainer>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </ContentContainer>\n    </Container>\n  )\n};\n\nexport default HorizontalCard;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","HorizontalCardContentContainer","div","white","HorizontalCardContainer","neutral_200","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nexport const HorizontalCardContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nexport const HorizontalCardContainer = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${HorizontalCardContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${HorizontalCardContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${HorizontalCardContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${HorizontalCardContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${HorizontalCardContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${HorizontalCardContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${HorizontalCardContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${HorizontalCardContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled,\n                                                                               className,\n                                                                               dataTestId,\n                                                                               ...rest\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <HorizontalCardContainer ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <HorizontalCardContentContainer\n               onMouseDown={defaultOnMouseDownHandler}\n               data-testid={dataTestId}\n               {...rest}>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </HorizontalCardContentContainer>\n    </HorizontalCardContainer>\n  )\n};\n\nexport default HorizontalCard;\n"],"mappings":"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"}

package/dist/Card/HorizontalCard/HorizontalCardBody.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HorizontalCardBody = void 0;
+exports.HorizontalCardBodyTitle = exports.HorizontalCardBodyTagsContainer = exports.HorizontalCardBodyDescription = exports.HorizontalCardBodyContainer = exports.HorizontalCardBody = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -13,21 +13,25 @@ var _LinearProgress = require("../../LinearProgress");
 var _Tag = require("../../Tag");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var Container = _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"])));
-var Title = _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 Description = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
-var TagsContainer = _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"])));
+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);
+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));
+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;
 var HorizontalCardBody = function HorizontalCardBody(_ref) {
   var title = _ref.title,
     description = _ref.description,
     progress = _ref.progress,
     tags = _ref.tags;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(HorizontalCardBodyContainer, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardBodyTitle, {
       children: title
-    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(Description, {
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardBodyDescription, {
       children: description
-    }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagsContainer, {
+    }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardBodyTagsContainer, {
       children: tags.map(function (tag, index) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.Tag, {
           label: tag.label,

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardBody.cjs","names":["Container","styled","div","Title","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","neutral_500","Description","ComponentXSStyling","Regular","neutral_600","TagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {LinearProgress} from '../../LinearProgress';\nimport {Tag} from '../../Tag';\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n`;\n\nconst Title = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\nconst Description = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n                                                                     title,\n                                                                     description,\n                                                                     progress,\n                                                                     tags,\n                                                                   }) => {\n\n  return (\n    <Container>\n      <Title>{title}</Title>\n      {description && <Description>{description}</Description>}\n      {\n        tags &&\n        <TagsContainer>{tags.map((tag, index) => (\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n        </TagsContainer>\n      }\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n    </Container>\n  )\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AAA8B;AAAA;AAE9B,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG,6KAM3B;AAED,IAAMC,KAAK,GAAGF,yBAAM,CAACC,GAAG,wIACpB,IAAAE,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,KAAK,CAAC,EAE/CD,cAAM,CAACE,WAAW,CAE9B;AAED,IAAMC,WAAW,GAAGT,yBAAM,CAACC,GAAG,gGAC1B,IAAAS,0BAAkB,EAACN,0BAAkB,CAACO,OAAO,EAAEL,cAAM,CAACM,WAAW,CAAC,CACrE;AAED,IAAMC,aAAa,GAAGb,yBAAM,CAACC,GAAG,qLAM/B;AAIM,IAAMa,kBAAkD,GAAG,SAArDA,kBAAkD,OAKU;EAAA,IAJJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;EAGvE,oBACE,sBAAC,SAAS;IAAA,wBACR,qBAAC,KAAK;MAAA,UAAEH;IAAK,EAAS,EACrBC,WAAW,iBAAI,qBAAC,WAAW;MAAA,UAAEA;IAAW,EAAe,EAEtDE,IAAI,iBACJ,qBAAC,aAAa;MAAA,UAAEA,IAAI,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBAClC,qBAAC,QAAG;UAAa,KAAK,EAAED,GAAG,CAACE,KAAM;UAAC,OAAO,EAAEF,GAAG,CAACG,OAAQ;UAAC,IAAI,EAAEH,GAAG,CAACI;QAAK,GAA9DH,KAAK,CAA2D;MAAA,CAAC;IAAC,EAC9D,EAEjBJ,QAAQ,iBAAI,qBAAC,8BAAc;MAAC,KAAK,EAAEA,QAAQ,CAACQ,KAAM;MAAC,GAAG,EAAER,QAAQ,CAACS;IAAI,EAAE;EAAA,EAC9D;AAEhB,CAAC;AAAC"}
+{"version":3,"file":"HorizontalCardBody.cjs","names":["HorizontalCardBodyContainer","styled","div","HorizontalCardBodyTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","neutral_500","HorizontalCardBodyDescription","ComponentXSStyling","Regular","neutral_600","HorizontalCardBodyTagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {LinearProgress} from '../../LinearProgress';\nimport {Tag} from '../../Tag';\n\nexport const HorizontalCardBodyContainer = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n`;\n\nexport const HorizontalCardBodyTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\nexport const HorizontalCardBodyDescription = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nexport const HorizontalCardBodyTagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n                                                                     title,\n                                                                     description,\n                                                                     progress,\n                                                                     tags,\n                                                                   }) => {\n\n  return (\n    <HorizontalCardBodyContainer>\n      <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\n      {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\n      {\n        tags &&\n        <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n        </HorizontalCardBodyTagsContainer>\n      }\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n    </HorizontalCardBodyContainer>\n  )\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AAA8B;AAAA;AAEvB,IAAMA,2BAA2B,GAAGC,yBAAM,CAACC,GAAG,6KAMpD;AAAC;AAEK,IAAMC,uBAAuB,GAAGF,yBAAM,CAACC,GAAG,wIAC7C,IAAAE,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,KAAK,CAAC,EAE/CD,cAAM,CAACE,WAAW,CAE9B;AAAC;AAEK,IAAMC,6BAA6B,GAAGT,yBAAM,CAACC,GAAG,gGACnD,IAAAS,0BAAkB,EAACN,0BAAkB,CAACO,OAAO,EAAEL,cAAM,CAACM,WAAW,CAAC,CACrE;AAAC;AAEK,IAAMC,+BAA+B,GAAGb,yBAAM,CAACC,GAAG,qLAMxD;AAAC;AAIK,IAAMa,kBAAkD,GAAG,SAArDA,kBAAkD,OAKU;EAAA,IAJJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;EAGvE,oBACE,sBAAC,2BAA2B;IAAA,wBAC1B,qBAAC,uBAAuB;MAAA,UAAEH;IAAK,EAA2B,EACzDC,WAAW,iBAAI,qBAAC,6BAA6B;MAAA,UAAEA;IAAW,EAAiC,EAE1FE,IAAI,iBACJ,qBAAC,+BAA+B;MAAA,UAAEA,IAAI,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBACpD,qBAAC,QAAG;UAAa,KAAK,EAAED,GAAG,CAACE,KAAM;UAAC,OAAO,EAAEF,GAAG,CAACG,OAAQ;UAAC,IAAI,EAAEH,GAAG,CAACI;QAAK,GAA9DH,KAAK,CAA2D;MAAA,CAAC;IAAC,EAC5C,EAEnCJ,QAAQ,iBAAI,qBAAC,8BAAc;MAAC,KAAK,EAAEA,QAAQ,CAACQ,KAAM;MAAC,GAAG,EAAER,QAAQ,CAACS;IAAI,EAAE;EAAA,EAC5C;AAElC,CAAC;AAAC"}

package/dist/Card/HorizontalCard/HorizontalCardBody.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 import { HorizontalCardProps } from './types';
+export declare const HorizontalCardBodyContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalCardBodyTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalCardBodyDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalCardBodyTagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
 export declare const HorizontalCardBody: React.FunctionComponent<Props>;
 export {};

package/dist/Card/HorizontalCard/HorizontalCardBody.js

@@ -7,21 +7,21 @@ import { LinearProgress } from '../../LinearProgress';
 import { Tag } from '../../Tag';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"])));
-var Title = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), COLORS.neutral_500);
-var Description = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
-var TagsContainer = 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 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 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,
     description = _ref.description,
     progress = _ref.progress,
     tags = _ref.tags;
-  return /*#__PURE__*/_jsxs(Container, {
-    children: [/*#__PURE__*/_jsx(Title, {
+  return /*#__PURE__*/_jsxs(HorizontalCardBodyContainer, {
+    children: [/*#__PURE__*/_jsx(HorizontalCardBodyTitle, {
       children: title
-    }), description && /*#__PURE__*/_jsx(Description, {
+    }), description && /*#__PURE__*/_jsx(HorizontalCardBodyDescription, {
       children: description
-    }), tags && /*#__PURE__*/_jsx(TagsContainer, {
+    }), tags && /*#__PURE__*/_jsx(HorizontalCardBodyTagsContainer, {
       children: tags.map(function (tag, index) {
         return /*#__PURE__*/_jsx(Tag, {
           label: tag.label,

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardBody.js","names":["React","styled","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","LinearProgress","Tag","Container","div","Title","Bold","black","neutral_500","Description","Regular","neutral_600","TagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {LinearProgress} from '../../LinearProgress';\nimport {Tag} from '../../Tag';\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n`;\n\nconst Title = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\nconst Description = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n                                                                     title,\n                                                                     description,\n                                                                     progress,\n                                                                     tags,\n                                                                   }) => {\n\n  return (\n    <Container>\n      <Title>{title}</Title>\n      {description && <Description>{description}</Description>}\n      {\n        tags &&\n        <TagsContainer>{tags.map((tag, index) => (\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n        </TagsContainer>\n      }\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n    </Container>\n  )\n};\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;AAAA;AAE9B,IAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAG,+JAM3B;AAED,IAAMC,KAAK,GAAGT,MAAM,CAACQ,GAAG,0HACpBN,iBAAiB,CAACC,kBAAkB,CAACO,IAAI,EAAET,MAAM,CAACU,KAAK,CAAC,EAE/CV,MAAM,CAACW,WAAW,CAE9B;AAED,IAAMC,WAAW,GAAGb,MAAM,CAACQ,GAAG,kFAC1BJ,kBAAkB,CAACD,kBAAkB,CAACW,OAAO,EAAEb,MAAM,CAACc,WAAW,CAAC,CACrE;AAED,IAAMC,aAAa,GAAGhB,MAAM,CAACQ,GAAG,uKAM/B;AAID,OAAO,IAAMS,kBAAkD,GAAG,SAArDA,kBAAkD,OAKU;EAAA,IAJJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;EAGvE,oBACE,MAAC,SAAS;IAAA,wBACR,KAAC,KAAK;MAAA,UAAEH;IAAK,EAAS,EACrBC,WAAW,iBAAI,KAAC,WAAW;MAAA,UAAEA;IAAW,EAAe,EAEtDE,IAAI,iBACJ,KAAC,aAAa;MAAA,UAAEA,IAAI,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBAClC,KAAC,GAAG;UAAa,KAAK,EAAED,GAAG,CAACE,KAAM;UAAC,OAAO,EAAEF,GAAG,CAACG,OAAQ;UAAC,IAAI,EAAEH,GAAG,CAACI;QAAK,GAA9DH,KAAK,CAA2D;MAAA,CAAC;IAAC,EAC9D,EAEjBJ,QAAQ,iBAAI,KAAC,cAAc;MAAC,KAAK,EAAEA,QAAQ,CAACQ,KAAM;MAAC,GAAG,EAAER,QAAQ,CAACS;IAAI,EAAE;EAAA,EAC9D;AAEhB,CAAC"}
+{"version":3,"file":"HorizontalCardBody.js","names":["React","styled","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","LinearProgress","Tag","HorizontalCardBodyContainer","div","HorizontalCardBodyTitle","Bold","black","neutral_500","HorizontalCardBodyDescription","Regular","neutral_600","HorizontalCardBodyTagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {LinearProgress} from '../../LinearProgress';\nimport {Tag} from '../../Tag';\n\nexport const HorizontalCardBodyContainer = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n`;\n\nexport const HorizontalCardBodyTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .disabled & {\n    color: ${COLORS.neutral_500};\n  }\n`;\n\nexport const HorizontalCardBodyDescription = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nexport const HorizontalCardBodyTagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n                                                                     title,\n                                                                     description,\n                                                                     progress,\n                                                                     tags,\n                                                                   }) => {\n\n  return (\n    <HorizontalCardBodyContainer>\n      <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\n      {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\n      {\n        tags &&\n        <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n        </HorizontalCardBodyTagsContainer>\n      }\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n    </HorizontalCardBodyContainer>\n  )\n};\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;AAAA;AAE9B,OAAO,IAAMC,2BAA2B,GAAGP,MAAM,CAACQ,GAAG,+JAMpD;AAED,OAAO,IAAMC,uBAAuB,GAAGT,MAAM,CAACQ,GAAG,0HAC7CN,iBAAiB,CAACC,kBAAkB,CAACO,IAAI,EAAET,MAAM,CAACU,KAAK,CAAC,EAE/CV,MAAM,CAACW,WAAW,CAE9B;AAED,OAAO,IAAMC,6BAA6B,GAAGb,MAAM,CAACQ,GAAG,kFACnDJ,kBAAkB,CAACD,kBAAkB,CAACW,OAAO,EAAEb,MAAM,CAACc,WAAW,CAAC,CACrE;AAED,OAAO,IAAMC,+BAA+B,GAAGhB,MAAM,CAACQ,GAAG,uKAMxD;AAID,OAAO,IAAMS,kBAAkD,GAAG,SAArDA,kBAAkD,OAKU;EAAA,IAJJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;EAGvE,oBACE,MAAC,2BAA2B;IAAA,wBAC1B,KAAC,uBAAuB;MAAA,UAAEH;IAAK,EAA2B,EACzDC,WAAW,iBAAI,KAAC,6BAA6B;MAAA,UAAEA;IAAW,EAAiC,EAE1FE,IAAI,iBACJ,KAAC,+BAA+B;MAAA,UAAEA,IAAI,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBACpD,KAAC,GAAG;UAAa,KAAK,EAAED,GAAG,CAACE,KAAM;UAAC,OAAO,EAAEF,GAAG,CAACG,OAAQ;UAAC,IAAI,EAAEH,GAAG,CAACI;QAAK,GAA9DH,KAAK,CAA2D;MAAA,CAAC;IAAC,EAC5C,EAEnCJ,QAAQ,iBAAI,KAAC,cAAc;MAAC,KAAK,EAAEA,QAAQ,CAACQ,KAAM;MAAC,GAAG,EAAER,QAAQ,CAACS;IAAI,EAAE;EAAA,EAC5C;AAElC,CAAC"}

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HorizontalCardThumbnail = void 0;
+exports.HorizontalCardThumbnail = exports.HorizontalCardImageContainer = exports.HorizontalCardIconContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -12,19 +12,21 @@ var _styles = require("../../styles");
 var _Image = require("../../Image");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
-var IconContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), _styles.COLORS.black, _styles.COLORS.neutral_500);
-var ImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n"])));
+var HorizontalCardIconContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), _styles.COLORS.black, _styles.COLORS.neutral_500);
+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;
 var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
   var _image$fallbackSrc, _image$loader;
   var image = _ref.image,
     icon = _ref.icon;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
+    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardIconContainer, {
       children: /*#__PURE__*/_react.default.cloneElement(icon, {
         width: 48,
         height: 48
       })
-    }), image && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageContainer, {
+    }), image && /*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardImageContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.ImageWithFallbacks, {
         fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
         src: image.src,

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

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

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { HorizontalCardProps } from './types';
+export declare const HorizontalCardIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalCardImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 type Props = Pick<HorizontalCardProps, 'image' | 'icon'>;
 export declare const HorizontalCardThumbnail: React.FunctionComponent<Props>;
 export {};

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js

@@ -4,22 +4,22 @@ import React from 'react';
 import styled from 'styled-components';
 import { COLORS } from '../../styles';
 import { ImageWithFallbacks } from "../../Image";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var IconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), COLORS.black, COLORS.neutral_500);
-var ImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n"])));
+export var HorizontalCardIconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), COLORS.black, COLORS.neutral_500);
+export var HorizontalCardImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n"])));
 export var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
   var _image$fallbackSrc, _image$loader;
   var image = _ref.image,
     icon = _ref.icon;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [icon && /*#__PURE__*/_jsx(IconContainer, {
+    children: [icon && /*#__PURE__*/_jsx(HorizontalCardIconContainer, {
       children: /*#__PURE__*/React.cloneElement(icon, {
         width: 48,
         height: 48
       })
-    }), image && /*#__PURE__*/_jsx(ImageContainer, {
+    }), image && /*#__PURE__*/_jsx(HorizontalCardImageContainer, {
       children: /*#__PURE__*/_jsx(ImageWithFallbacks, {
         fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
         src: image.src,

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

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