@laerdal/life-react-components 5.0.8-dev.2.full → 5.0.9

package/dist/Card/VerticalCard/CardBottomSection.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
@@ -5,37 +6,54 @@ import * as React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '../../index';
 import { IconButton } from '../../Button';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CardBottomSectionProgressStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 0;\n"])));
-export const CardBottomSectionNotesStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), props => COLORS.getColor('neutral_500', props.theme));
-export const CardBottomSectionAuthorStyles = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ", "\n"])), props => props.$disabled ? "\n    color: ".concat(COLORS.getColor('neutral_300', props.theme), ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '');
-export const CardBottomSectionDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), props => COLORS.getColor('neutral_100', props.theme));
-export const CardBottomSectionNoteLeftStyles = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export const CardBottomSectionNoteRightStyles = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export const CardBottomSectionButtonRowContainerStyles = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_600', props.theme));
-export const CardBottomSectionContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
-const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    progressLevel,
-    progressMax,
-    progressType = LinearProgressType.Line,
-    noteLeft,
-    noteLeftIcon,
-    noteRight,
-    noteRightIcon,
-    authorName,
-    logo,
-    actions,
-    disabled
-  } = _ref;
-  const [elRefs, setElRefs] = React.useState([]);
-  const theme = useTheme();
-  const length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
-  React.useEffect(() => {
-    setElRefs(Array(length || 0).fill(null).map(() => /*#__PURE__*/React.createRef()));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var CardBottomSectionProgressStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 0;\n"])));
+export var CardBottomSectionNotesStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), function (props) {
+  return COLORS.getColor('neutral_500', props.theme);
+});
+export var CardBottomSectionAuthorStyles = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ", "\n"])), function (props) {
+  return props.$disabled ? "\n    color: ".concat(COLORS.getColor('neutral_300', props.theme), ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
+});
+export var CardBottomSectionDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+});
+export var CardBottomSectionNoteLeftStyles = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
+export var CardBottomSectionNoteRightStyles = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
+export var CardBottomSectionButtonRowContainerStyles = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_600', props.theme);
+});
+export var CardBottomSectionContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
+var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var progressLevel = _ref.progressLevel,
+    progressMax = _ref.progressMax,
+    _ref$progressType = _ref.progressType,
+    progressType = _ref$progressType === void 0 ? LinearProgressType.Line : _ref$progressType,
+    noteLeft = _ref.noteLeft,
+    noteLeftIcon = _ref.noteLeftIcon,
+    noteRight = _ref.noteRight,
+    noteRightIcon = _ref.noteRightIcon,
+    authorName = _ref.authorName,
+    logo = _ref.logo,
+    actions = _ref.actions,
+    disabled = _ref.disabled;
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    elRefs = _React$useState2[0],
+    setElRefs = _React$useState2[1];
+  var theme = useTheme();
+  var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
+  React.useEffect(function () {
+    setElRefs(Array(length || 0).fill(null).map(function () {
+      return /*#__PURE__*/React.createRef();
+    }));
   }, [length]);
-  React.useImperativeHandle(ref, () => elRefs, [elRefs]);
-  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
+  React.useImperativeHandle(ref, function () {
+    return elRefs;
+  }, [elRefs]);
+  var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
   return /*#__PURE__*/_jsxs(CardBottomSectionContainer, {
     "data-testid": 'card-bottomSection',
     children: [haveAtLeastSomething && /*#__PURE__*/_jsx(CardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(CardBottomSectionProgressStyles, {
@@ -67,16 +85,18 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         children: authorName
       }), logo]
     }), actions && /*#__PURE__*/_jsx(CardBottomSectionButtonRowContainerStyles, {
-      children: actions.map((x, index) => /*#__PURE__*/_jsx(IconButton, {
-        ref: elRefs[index],
-        disabled: disabled,
-        variant: "secondary",
-        shape: "circular",
-        action: e => {
-          x.onClick();
-        },
-        children: x.icon
-      }, index))
+      children: actions.map(function (x, index) {
+        return /*#__PURE__*/_jsx(IconButton, {
+          ref: elRefs[index],
+          disabled: disabled,
+          variant: "secondary",
+          shape: "circular",
+          action: function action(e) {
+            x.onClick();
+          },
+          children: x.icon
+        }, index);
+      })
     })]
   });
 });

package/dist/Card/VerticalCard/CardBottomSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","_templateObject","_taggedTemplateLiteral","CardBottomSectionNotesStyles","_templateObject2","props","getColor","theme","CardBottomSectionAuthorStyles","_templateObject3","$disabled","concat","CardBottomSectionDivider","_templateObject4","CardBottomSectionNoteLeftStyles","_templateObject5","CardBottomSectionNoteRightStyles","_templateObject6","CardBottomSectionButtonRowContainerStyles","_templateObject7","CardBottomSectionContainer","_templateObject8","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","disabled","elRefs","setElRefs","useState","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","children","size","Small","type","variant","Normal","value","max","color","textStyle","Bold","x","index","shape","action","e","onClick","icon","propTypes","_pt","number","string","node","arrayOf","isRequired","func","bool"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size\r\n} from '../../index';\r\nimport {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n  /** Optional. Current progress level shown in the progress bar. */\r\n  progressLevel?: number;\r\n  /** Optional. Maximum level of progress in the progress bar. */\r\n  progressMax?: number;\r\n  /** Optional. Type of the progress bar. */\r\n  progressType?: LinearProgressType;\r\n\r\n  /** Optional. Note text shown on the left side of the section. */\r\n  noteLeft?: string;\r\n  /** Optional. Note icon shown on the left side of the section. */\r\n  noteLeftIcon?: React.ReactNode;\r\n  /** Optional. Note text shown on the right side of the section. */\r\n  noteRight?: string;\r\n  /** Optional. Note icon shown on the right side of the section. */\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  /** Author name shown at the bottom-left part of the section.  */\r\n  authorName?: string;\r\n  /** Array of actions shown on the bottom-right corner of the section. */\r\n  actions?: ActionItem[];\r\n  /** Logo shown on the right side of the section, in front of AuthorName. */\r\n  logo?: React.ReactNode;\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.$disabled ? `\r\n    color: ${COLORS.getColor('neutral_300', props.theme)};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  border-top-style: solid;\r\n\r\n  button:last-child {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n                                              progressLevel,\r\n                                              progressMax,\r\n                                              progressType = LinearProgressType.Line,\r\n                                              noteLeft,\r\n                                              noteLeftIcon,\r\n                                              noteRight,\r\n                                              noteRightIcon,\r\n                                              authorName,\r\n                                              logo,\r\n                                              actions,\r\n                                              disabled\r\n                                            }: CardBottomSectionProps,\r\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n  const theme = useTheme();\r\n  const length = actions?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\r\n\r\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\r\n\r\n  return (\r\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n        <LinearProgress size={Size.Small}\r\n                        type={progressType}\r\n                        variant={LinearProgressVariant.Normal}\r\n                        value={progressLevel}\r\n                        max={progressMax ?? progressLevel}/>\r\n      </CardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardBottomSectionNoteRightStyles>\r\n        )}\r\n      </CardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardBottomSectionAuthorStyles>}\r\n\r\n      {actions && <CardBottomSectionButtonRowContainerStyles>\r\n        {actions.map((x, index) => (\r\n          <IconButton ref={elRefs[index]}\r\n                      key={index}\r\n                      disabled={disabled}\r\n                      variant=\"secondary\"\r\n                      shape=\"circular\"\r\n                      action={(e) => {\r\n                        x.onClick();\r\n                      }}>\r\n            {x.icon}\r\n          </IconButton>\r\n        ))}\r\n      </CardBottomSectionButtonRowContainerStyles>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","_templateObject","_taggedTemplateLiteral","CardBottomSectionNotesStyles","_templateObject2","props","getColor","theme","CardBottomSectionAuthorStyles","_templateObject3","$disabled","concat","CardBottomSectionDivider","_templateObject4","CardBottomSectionNoteLeftStyles","_templateObject5","CardBottomSectionNoteRightStyles","_templateObject6","CardBottomSectionButtonRowContainerStyles","_templateObject7","CardBottomSectionContainer","_templateObject8","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","_ref$progressType","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","disabled","_React$useState","useState","_React$useState2","_slicedToArray","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","children","size","Small","type","variant","Normal","value","max","color","textStyle","Bold","x","index","shape","action","e","onClick","icon","propTypes","_pt","number","string","node","arrayOf","isRequired","func","bool"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size\r\n} from '../../index';\r\nimport {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n  /** Optional. Current progress level shown in the progress bar. */\r\n  progressLevel?: number;\r\n  /** Optional. Maximum level of progress in the progress bar. */\r\n  progressMax?: number;\r\n  /** Optional. Type of the progress bar. */\r\n  progressType?: LinearProgressType;\r\n\r\n  /** Optional. Note text shown on the left side of the section. */\r\n  noteLeft?: string;\r\n  /** Optional. Note icon shown on the left side of the section. */\r\n  noteLeftIcon?: React.ReactNode;\r\n  /** Optional. Note text shown on the right side of the section. */\r\n  noteRight?: string;\r\n  /** Optional. Note icon shown on the right side of the section. */\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  /** Author name shown at the bottom-left part of the section.  */\r\n  authorName?: string;\r\n  /** Array of actions shown on the bottom-right corner of the section. */\r\n  actions?: ActionItem[];\r\n  /** Logo shown on the right side of the section, in front of AuthorName. */\r\n  logo?: React.ReactNode;\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.$disabled ? `\r\n    color: ${COLORS.getColor('neutral_300', props.theme)};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  border-top-style: solid;\r\n\r\n  button:last-child {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n                                              progressLevel,\r\n                                              progressMax,\r\n                                              progressType = LinearProgressType.Line,\r\n                                              noteLeft,\r\n                                              noteLeftIcon,\r\n                                              noteRight,\r\n                                              noteRightIcon,\r\n                                              authorName,\r\n                                              logo,\r\n                                              actions,\r\n                                              disabled\r\n                                            }: CardBottomSectionProps,\r\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n  const theme = useTheme();\r\n  const length = actions?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\r\n\r\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\r\n\r\n  return (\r\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n        <LinearProgress size={Size.Small}\r\n                        type={progressType}\r\n                        variant={LinearProgressVariant.Normal}\r\n                        value={progressLevel}\r\n                        max={progressMax ?? progressLevel}/>\r\n      </CardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardBottomSectionNoteRightStyles>\r\n        )}\r\n      </CardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardBottomSectionAuthorStyles>}\r\n\r\n      {actions && <CardBottomSectionButtonRowContainerStyles>\r\n        {actions.map((x, index) => (\r\n          <IconButton ref={elRefs[index]}\r\n                      key={index}\r\n                      disabled={disabled}\r\n                      variant=\"secondary\"\r\n                      shape=\"circular\"\r\n                      action={(e) => {\r\n                        x.onClick();\r\n                      }}>\r\n            {x.icon}\r\n          </IconButton>\r\n        ))}\r\n      </CardBottomSectionButtonRowContainerStyles>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/CardMiddleSection.cjs

@@ -1,34 +1,41 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CardMiddleSectionTagsStyles = exports.CardMiddleSectionContainer = exports.CardMiddleSectionColorBandStyles = exports.CardMiddleSectionCategoryStyles = void 0;
+exports["default"] = exports.CardMiddleSectionTagsStyles = exports.CardMiddleSectionContainer = exports.CardMiddleSectionColorBandStyles = exports.CardMiddleSectionCategoryStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _index = require("../../index");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const CardMiddleSectionContainer = exports.CardMiddleSectionContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n"])));
-const CardMiddleSectionColorBandStyles = exports.CardMiddleSectionColorBandStyles = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"])), props => props.$color);
-const CardMiddleSectionTagsStyles = exports.CardMiddleSectionTagsStyles = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"])));
-const CardMiddleSectionCategoryStyles = exports.CardMiddleSectionCategoryStyles = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), props => _index.COLORS.getColor('neutral_500', props.theme));
-const CardMiddleSection = _ref => {
-  let {
-    colorBandColor,
-    categoryIcon,
-    categoryLabel,
-    title,
-    description,
-    tags,
-    row2Tags,
-    disabled
-  } = _ref;
-  const theme = (0, _styledComponents.useTheme)();
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var CardMiddleSectionContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n"])));
+exports.CardMiddleSectionContainer = CardMiddleSectionContainer;
+var CardMiddleSectionColorBandStyles = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"])), function (props) {
+  return props.$color;
+});
+exports.CardMiddleSectionColorBandStyles = CardMiddleSectionColorBandStyles;
+var CardMiddleSectionTagsStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"])));
+exports.CardMiddleSectionTagsStyles = CardMiddleSectionTagsStyles;
+var CardMiddleSectionCategoryStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), function (props) {
+  return _index.COLORS.getColor('neutral_500', props.theme);
+});
+exports.CardMiddleSectionCategoryStyles = CardMiddleSectionCategoryStyles;
+var CardMiddleSection = function CardMiddleSection(_ref) {
+  var colorBandColor = _ref.colorBandColor,
+    categoryIcon = _ref.categoryIcon,
+    categoryLabel = _ref.categoryLabel,
+    title = _ref.title,
+    description = _ref.description,
+    tags = _ref.tags,
+    row2Tags = _ref.row2Tags,
+    disabled = _ref.disabled;
+  var theme = (0, _styledComponents.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardMiddleSectionContainer, {
     "data-testid": 'card-middleSection',
     children: [colorBandColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionColorBandStyles, {
@@ -51,7 +58,7 @@ const CardMiddleSection = _ref => {
       color: _index.COLORS.getColor('neutral_600', theme),
       children: description
     }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionTagsStyles, {
-      children: tags.map((x, index) => {
+      children: tags.map(function (x, index) {
         var _x$variant;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
           label: x.label,
@@ -60,7 +67,7 @@ const CardMiddleSection = _ref => {
         }, "".concat(x.label, "_").concat(index));
       })
     }), row2Tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionTagsStyles, {
-      children: row2Tags.map((x, index) => {
+      children: row2Tags.map(function (x, index) {
         var _x$variant2;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
           label: x.label,
@@ -71,5 +78,6 @@ const CardMiddleSection = _ref => {
     })]
   });
 };
-var _default = exports.default = CardMiddleSection;
+var _default = CardMiddleSection;
+exports["default"] = _default;
 //# sourceMappingURL=CardMiddleSection.cjs.map

package/dist/Card/VerticalCard/CardMiddleSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CardMiddleSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardMiddleSectionContainer","exports","styled","div","_taggedTemplateLiteral2","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","COLORS","getColor","theme","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","useTheme","jsxs","children","jsx","$extraTopMargin","Boolean","$bottomMargin","ComponentS","textStyle","ComponentTextStyle","Bold","color","ComponentXL","className","map","x","index","_x$variant","Tag","label","variant","icon","concat","_x$variant2","_default"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  /** Color of the band to be shown on the top of middle section. */\r\n  colorBandColor?: string;\r\n  /** Icon to be shown on the left side of the categoryLabel. */\r\n  categoryIcon?: React.ReactNode;\r\n  /** Label to be shown at the top part of the middle section. */\r\n  categoryLabel?: string;\r\n  /** Main title of the Card component. */\r\n  title: string;\r\n  /** Description of the Card. */\r\n  description?: string;\r\n  /** Tags to be shown under the description. */\r\n  tags?: CardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: CardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n  display: flex;\r\n  flex-grow: 1;\r\n  width: calc(100% - 32px);\r\n  position: relative;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  gap: 8px;\r\n\r\n  .descriptionBlock {\r\n    padding: 2px 0;\r\n  }\r\n\r\n  .titleBlock {\r\n    padding: 2px 0;\r\n  }\r\n`;\r\n\r\nexport const CardMiddleSectionColorBandStyles = styled.div<{ $color: string }>`\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  height: 8px;\r\n  background-color: ${(props) => props.$color};\r\n`;\r\n\r\nexport const CardMiddleSectionTagsStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardMiddleSectionCategoryStyles = styled.div<{ $extraTopMargin: boolean; $bottomMargin: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: none;\r\n  gap: 6px;\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n  colorBandColor,\r\n  categoryIcon,\r\n  categoryLabel,\r\n  title,\r\n  description,\r\n  tags,\r\n  row2Tags,\r\n  disabled,\r\n}: CardMiddleSectionProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.getColor('neutral_500', theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </CardMiddleSectionCategoryStyles>\r\n      }\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.getColor('neutral_500', theme) : COLORS.getColor('black', theme)}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.getColor('neutral_600', theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardMiddleSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardMiddleSectionContainer","styled","div","_taggedTemplateLiteral2","exports","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","COLORS","getColor","theme","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","useTheme","jsxs","children","jsx","$extraTopMargin","Boolean","$bottomMargin","ComponentS","textStyle","ComponentTextStyle","Bold","color","ComponentXL","className","map","x","index","_x$variant","Tag","label","variant","icon","concat","_x$variant2","_default"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  /** Color of the band to be shown on the top of middle section. */\r\n  colorBandColor?: string;\r\n  /** Icon to be shown on the left side of the categoryLabel. */\r\n  categoryIcon?: React.ReactNode;\r\n  /** Label to be shown at the top part of the middle section. */\r\n  categoryLabel?: string;\r\n  /** Main title of the Card component. */\r\n  title: string;\r\n  /** Description of the Card. */\r\n  description?: string;\r\n  /** Tags to be shown under the description. */\r\n  tags?: CardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: CardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n  display: flex;\r\n  flex-grow: 1;\r\n  width: calc(100% - 32px);\r\n  position: relative;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  gap: 8px;\r\n\r\n  .descriptionBlock {\r\n    padding: 2px 0;\r\n  }\r\n\r\n  .titleBlock {\r\n    padding: 2px 0;\r\n  }\r\n`;\r\n\r\nexport const CardMiddleSectionColorBandStyles = styled.div<{ $color: string }>`\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  height: 8px;\r\n  background-color: ${(props) => props.$color};\r\n`;\r\n\r\nexport const CardMiddleSectionTagsStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardMiddleSectionCategoryStyles = styled.div<{ $extraTopMargin: boolean; $bottomMargin: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: none;\r\n  gap: 6px;\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n  colorBandColor,\r\n  categoryIcon,\r\n  categoryLabel,\r\n  title,\r\n  description,\r\n  tags,\r\n  row2Tags,\r\n  disabled,\r\n}: CardMiddleSectionProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.getColor('neutral_500', theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </CardMiddleSectionCategoryStyles>\r\n      }\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.getColor('neutral_500', theme) : COLORS.getColor('black', theme)}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.getColor('neutral_600', theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/CardMiddleSection.js

@@ -3,23 +3,26 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import * as React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag } from '../../index';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CardMiddleSectionContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n"])));
-export const CardMiddleSectionColorBandStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"])), props => props.$color);
-export const CardMiddleSectionTagsStyles = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"])));
-export const CardMiddleSectionCategoryStyles = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), props => COLORS.getColor('neutral_500', props.theme));
-const CardMiddleSection = _ref => {
-  let {
-    colorBandColor,
-    categoryIcon,
-    categoryLabel,
-    title,
-    description,
-    tags,
-    row2Tags,
-    disabled
-  } = _ref;
-  const theme = useTheme();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var CardMiddleSectionContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n"])));
+export var CardMiddleSectionColorBandStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"])), function (props) {
+  return props.$color;
+});
+export var CardMiddleSectionTagsStyles = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"])));
+export var CardMiddleSectionCategoryStyles = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_500', props.theme);
+});
+var CardMiddleSection = function CardMiddleSection(_ref) {
+  var colorBandColor = _ref.colorBandColor,
+    categoryIcon = _ref.categoryIcon,
+    categoryLabel = _ref.categoryLabel,
+    title = _ref.title,
+    description = _ref.description,
+    tags = _ref.tags,
+    row2Tags = _ref.row2Tags,
+    disabled = _ref.disabled;
+  var theme = useTheme();
   return /*#__PURE__*/_jsxs(CardMiddleSectionContainer, {
     "data-testid": 'card-middleSection',
     children: [colorBandColor && /*#__PURE__*/_jsx(CardMiddleSectionColorBandStyles, {
@@ -42,7 +45,7 @@ const CardMiddleSection = _ref => {
       color: COLORS.getColor('neutral_600', theme),
       children: description
     }), tags && /*#__PURE__*/_jsx(CardMiddleSectionTagsStyles, {
-      children: tags.map((x, index) => {
+      children: tags.map(function (x, index) {
         var _x$variant;
         return /*#__PURE__*/_jsx(Tag, {
           label: x.label,
@@ -51,7 +54,7 @@ const CardMiddleSection = _ref => {
         }, "".concat(x.label, "_").concat(index));
       })
     }), row2Tags && /*#__PURE__*/_jsx(CardMiddleSectionTagsStyles, {
-      children: row2Tags.map((x, index) => {
+      children: row2Tags.map(function (x, index) {
         var _x$variant2;
         return /*#__PURE__*/_jsx(Tag, {
           label: x.label,

package/dist/Card/VerticalCard/CardMiddleSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardMiddleSection.js","names":["React","styled","useTheme","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","jsx","_jsx","jsxs","_jsxs","CardMiddleSectionContainer","div","_templateObject","_taggedTemplateLiteral","CardMiddleSectionColorBandStyles","_templateObject2","props","$color","CardMiddleSectionTagsStyles","_templateObject3","CardMiddleSectionCategoryStyles","_templateObject4","getColor","theme","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","children","$extraTopMargin","Boolean","$bottomMargin","textStyle","Bold","color","className","map","x","index","_x$variant","label","variant","icon","concat","_x$variant2"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  /** Color of the band to be shown on the top of middle section. */\r\n  colorBandColor?: string;\r\n  /** Icon to be shown on the left side of the categoryLabel. */\r\n  categoryIcon?: React.ReactNode;\r\n  /** Label to be shown at the top part of the middle section. */\r\n  categoryLabel?: string;\r\n  /** Main title of the Card component. */\r\n  title: string;\r\n  /** Description of the Card. */\r\n  description?: string;\r\n  /** Tags to be shown under the description. */\r\n  tags?: CardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: CardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n  display: flex;\r\n  flex-grow: 1;\r\n  width: calc(100% - 32px);\r\n  position: relative;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  gap: 8px;\r\n\r\n  .descriptionBlock {\r\n    padding: 2px 0;\r\n  }\r\n\r\n  .titleBlock {\r\n    padding: 2px 0;\r\n  }\r\n`;\r\n\r\nexport const CardMiddleSectionColorBandStyles = styled.div<{ $color: string }>`\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  height: 8px;\r\n  background-color: ${(props) => props.$color};\r\n`;\r\n\r\nexport const CardMiddleSectionTagsStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardMiddleSectionCategoryStyles = styled.div<{ $extraTopMargin: boolean; $bottomMargin: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: none;\r\n  gap: 6px;\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n  colorBandColor,\r\n  categoryIcon,\r\n  categoryLabel,\r\n  title,\r\n  description,\r\n  tags,\r\n  row2Tags,\r\n  disabled,\r\n}: CardMiddleSectionProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.getColor('neutral_500', theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </CardMiddleSectionCategoryStyles>\r\n      }\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.getColor('neutral_500', theme) : COLORS.getColor('black', theme)}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.getColor('neutral_600', theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardMiddleSection.js","names":["React","styled","useTheme","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","jsx","_jsx","jsxs","_jsxs","CardMiddleSectionContainer","div","_templateObject","_taggedTemplateLiteral","CardMiddleSectionColorBandStyles","_templateObject2","props","$color","CardMiddleSectionTagsStyles","_templateObject3","CardMiddleSectionCategoryStyles","_templateObject4","getColor","theme","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","children","$extraTopMargin","Boolean","$bottomMargin","textStyle","Bold","color","className","map","x","index","_x$variant","label","variant","icon","concat","_x$variant2"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  /** Color of the band to be shown on the top of middle section. */\r\n  colorBandColor?: string;\r\n  /** Icon to be shown on the left side of the categoryLabel. */\r\n  categoryIcon?: React.ReactNode;\r\n  /** Label to be shown at the top part of the middle section. */\r\n  categoryLabel?: string;\r\n  /** Main title of the Card component. */\r\n  title: string;\r\n  /** Description of the Card. */\r\n  description?: string;\r\n  /** Tags to be shown under the description. */\r\n  tags?: CardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: CardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n  display: flex;\r\n  flex-grow: 1;\r\n  width: calc(100% - 32px);\r\n  position: relative;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  gap: 8px;\r\n\r\n  .descriptionBlock {\r\n    padding: 2px 0;\r\n  }\r\n\r\n  .titleBlock {\r\n    padding: 2px 0;\r\n  }\r\n`;\r\n\r\nexport const CardMiddleSectionColorBandStyles = styled.div<{ $color: string }>`\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  height: 8px;\r\n  background-color: ${(props) => props.$color};\r\n`;\r\n\r\nexport const CardMiddleSectionTagsStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardMiddleSectionCategoryStyles = styled.div<{ $extraTopMargin: boolean; $bottomMargin: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: none;\r\n  gap: 6px;\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n  colorBandColor,\r\n  categoryIcon,\r\n  categoryLabel,\r\n  title,\r\n  description,\r\n  tags,\r\n  row2Tags,\r\n  disabled,\r\n}: CardMiddleSectionProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.getColor('neutral_500', theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </CardMiddleSectionCategoryStyles>\r\n      }\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.getColor('neutral_500', theme) : COLORS.getColor('black', theme)}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.getColor('neutral_600', theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/CardTopSection.cjs

@@ -1,10 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CardTopSectionTagContainer = exports.CardTopSectionRibbonContainer = exports.CardTopSectionImageContainer = exports.CardTopSectionContainer = exports.CardTopSectionCheckboxContainer = void 0;
+exports["default"] = exports.CardTopSectionTagContainer = exports.CardTopSectionRibbonContainer = exports.CardTopSectionImageContainer = exports.CardTopSectionContainer = exports.CardTopSectionCheckboxContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
@@ -16,29 +17,41 @@ var _index = require("../../index");
 var _Image = require("../../Image");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const CardTopSectionImageContainer = exports.CardTopSectionImageContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n"])));
-const CardTopSectionTagContainer = exports.CardTopSectionTagContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"])));
-const CardTopSectionContainer = exports.CardTopSectionContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ", "\n"])), props => props.disabled ? "\n  img, svg {\n    filter: grayscale(100%);\n  }" : '');
-const CardTopSectionRibbonContainer = exports.CardTopSectionRibbonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), props => props.$backgroundColor, props => props.$color);
-const CardTopSectionCheckboxContainer = exports.CardTopSectionCheckboxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), props => _index.COLORS.getColor('white', props.theme));
-const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var CardTopSectionImageContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n"])));
+exports.CardTopSectionImageContainer = CardTopSectionImageContainer;
+var CardTopSectionTagContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"])));
+exports.CardTopSectionTagContainer = CardTopSectionTagContainer;
+var CardTopSectionContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ", "\n"])), function (props) {
+  return props.disabled ? "\n  img, svg {\n    filter: grayscale(100%);\n  }" : '';
+});
+exports.CardTopSectionContainer = CardTopSectionContainer;
+var CardTopSectionRibbonContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), function (props) {
+  return props.$backgroundColor;
+}, function (props) {
+  return props.$color;
+});
+exports.CardTopSectionRibbonContainer = CardTopSectionRibbonContainer;
+var CardTopSectionCheckboxContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return _index.COLORS.getColor('white', props.theme);
+});
+exports.CardTopSectionCheckboxContainer = CardTopSectionCheckboxContainer;
+var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _image$height, _image$fallbackSrc, _image$loader;
-  let {
-    selected,
-    setSelected,
-    image,
-    tagLabel,
-    tagIcon,
-    tagVariant = 'positive',
-    highlightRibbonIcon,
-    highlightRibbonText,
-    highlightRibbonContentColor,
-    highlightRibbonBgColor,
-    disabled
-  } = _ref;
-  const theme = (0, _styledComponents.useTheme)();
+  var selected = _ref.selected,
+    setSelected = _ref.setSelected,
+    image = _ref.image,
+    tagLabel = _ref.tagLabel,
+    tagIcon = _ref.tagIcon,
+    _ref$tagVariant = _ref.tagVariant,
+    tagVariant = _ref$tagVariant === void 0 ? 'positive' : _ref$tagVariant,
+    highlightRibbonIcon = _ref.highlightRibbonIcon,
+    highlightRibbonText = _ref.highlightRibbonText,
+    highlightRibbonContentColor = _ref.highlightRibbonContentColor,
+    highlightRibbonBgColor = _ref.highlightRibbonBgColor,
+    disabled = _ref.disabled;
+  var theme = (0, _styledComponents.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopSectionContainer, {
     disabled: disabled,
     "data-testid": 'card-topSection',
@@ -56,10 +69,12 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       })
     }), (!!selected || !!setSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTopSectionCheckboxContainer, {
       "data-testid": 'card-topSection-checkbox',
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox["default"], {
         ref: ref,
         disabled: disabled,
-        select: selected => setSelected && setSelected(selected),
+        select: function select(selected) {
+          return setSelected && setSelected(selected);
+        },
         selected: selected || false
       })
     }), (tagLabel || tagIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTopSectionTagContainer, {
@@ -81,23 +96,24 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
 });
 CardTopSection.propTypes = {
-  selected: _propTypes.default.bool,
-  setSelected: _propTypes.default.func,
-  tagLabel: _propTypes.default.string,
-  tagIcon: _propTypes.default.node,
-  highlightRibbonText: _propTypes.default.string,
-  highlightRibbonIcon: _propTypes.default.node,
-  highlightRibbonContentColor: _propTypes.default.string,
-  highlightRibbonBgColor: _propTypes.default.string,
-  image: _propTypes.default.shape({
-    src: _propTypes.default.string.isRequired,
-    fallbackSrc: _propTypes.default.string,
-    alt: _propTypes.default.string.isRequired,
-    height: _propTypes.default.string,
-    width: _propTypes.default.string,
-    loader: _propTypes.default.bool
+  selected: _propTypes["default"].bool,
+  setSelected: _propTypes["default"].func,
+  tagLabel: _propTypes["default"].string,
+  tagIcon: _propTypes["default"].node,
+  highlightRibbonText: _propTypes["default"].string,
+  highlightRibbonIcon: _propTypes["default"].node,
+  highlightRibbonContentColor: _propTypes["default"].string,
+  highlightRibbonBgColor: _propTypes["default"].string,
+  image: _propTypes["default"].shape({
+    src: _propTypes["default"].string.isRequired,
+    fallbackSrc: _propTypes["default"].string,
+    alt: _propTypes["default"].string.isRequired,
+    height: _propTypes["default"].string,
+    width: _propTypes["default"].string,
+    loader: _propTypes["default"].bool
   }),
-  disabled: _propTypes.default.bool
+  disabled: _propTypes["default"].bool
 };
-var _default = exports.default = CardTopSection;
+var _default = CardTopSection;
+exports["default"] = _default;
 //# sourceMappingURL=CardTopSection.cjs.map