@laerdal/life-react-components 1.7.0-dev.8.full → 1.7.0-dev.95

package/dist/Card/Card.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -13,43 +13,61 @@ import styled from 'styled-components';
 import CardTopSection from './CardTopSection';
 import CardMiddleSection from './CardMiddleSection';
 import CardBottomSection from './CardBottomSection';
-import { COLORS, defaultOnMouseDownHandler, focusStyles } from '..';
+import { COLORS } from '..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n}\n"])), COLORS.white);
-export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    ", " {\n      &:active, &.active-state {\n        box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n        border: 1px solid ", ";\n      }\n\n      &:hover {\n        overflow: visible;\n        border: 1px solid ", ";\n        box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n"])), focusStyles, CardTopLevelContainer, COLORS.neutral_200, COLORS.neutral_200);
+export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), COLORS.white, function (props) {
+  return props.interactionType == InteractionType.Clickable && !props.disabled ? "\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n      border: 1px solid ".concat(COLORS.neutral_200, ";\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      border: 1px solid ").concat(COLORS.neutral_200, ";\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      border: 1px solid ").concat(COLORS.neutral_200, ";\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px 2px rgba(46, 127, 161, 0.25), 0px 0px 8px 2px #2E7FA1;\n    }") : "";
+});
+export var InteractionType;
+
+(function (InteractionType) {
+  InteractionType[InteractionType["None"] = 0] = "None";
+  InteractionType[InteractionType["Clickable"] = 1] = "Clickable";
+  InteractionType[InteractionType["Selectable"] = 2] = "Selectable";
+})(InteractionType || (InteractionType = {}));
 
 var Card = function Card(_ref) {
-  var onCardClicked = _ref.onCardClicked,
+  var _ref$interactionType = _ref.interactionType,
+      interactionType = _ref$interactionType === void 0 ? InteractionType.None : _ref$interactionType,
+      onCardClicked = _ref.onCardClicked,
       topSectionProps = _ref.topSectionProps,
       middleSectionProps = _ref.middleSectionProps,
       bottomSectionProps = _ref.bottomSectionProps,
       disabled = _ref.disabled;
-  var cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '');
-  return /*#__PURE__*/_jsx(Wrapper, {
-    className: cls,
-    tabIndex: !!onCardClicked && !disabled ? 0 : -1,
-    onMouseDown: defaultOnMouseDownHandler,
-    onKeyDown: function onKeyDown(a) {
-      return a.key === 'Enter' && !disabled && onCardClicked && onCardClicked();
-    },
-    onClick: function onClick(e) {
-      return !disabled && onCardClicked && onCardClicked();
-    },
-    children: /*#__PURE__*/_jsxs(CardTopLevelContainer, {
-      children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({}, topSectionProps), {}, {
-        disabled: disabled
-      })), middleSectionProps && /*#__PURE__*/_jsx(CardMiddleSection, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
-        disabled: disabled
-      })), bottomSectionProps && /*#__PURE__*/_jsx(CardBottomSection, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
-        disabled: disabled
-      }))]
-    })
+  var rootRef = React.useRef(null);
+
+  var onCardClick = function onCardClick() {
+    if (interactionType == InteractionType.Clickable) {
+      var _rootRef$current;
+
+      if (onCardClicked) onCardClicked();
+      (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.blur();
+    }
+  };
+
+  return /*#__PURE__*/_jsxs(CardTopLevelContainer, {
+    disabled: disabled,
+    ref: rootRef,
+    tabIndex: interactionType == InteractionType.Clickable && !disabled ? 0 : -1,
+    interactionType: interactionType,
+    onClick: onCardClick,
+    children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({}, topSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    })), middleSectionProps && /*#__PURE__*/_jsx(CardMiddleSection, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    })), bottomSectionProps && /*#__PURE__*/_jsx(CardBottomSection, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
+      disabled: disabled,
+      interactionType: interactionType
+    }))]
   });
 };
 
 Card.propTypes = {
-  onCardClicked: _pt.func,
+  interactionType: _pt.oneOf([0, 1, 2]).isRequired,
+  onCardClicked: _pt.func.isRequired,
   disabled: _pt.bool.isRequired
 };
 export default Card;

package/dist/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","COLORS","defaultOnMouseDownHandler","focusStyles","CardTopLevelContainer","div","white","Wrapper","neutral_200","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","cls","a","key","e"],"mappings":";;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,cAAP,MAAkD,kBAAlD;AACA,OAAOC,iBAAP,MAAwD,qBAAxD;AACA,OAAOC,iBAAP,MAAwD,qBAAxD;AACA,SAAQC,MAAR,EAAgBC,yBAAhB,EAA2CC,WAA3C,QAA6D,IAA7D;;;AAEA,OAAO,IAAMC,qBAAqB,GAAGP,MAAM,CAACQ,GAAV,4TACZJ,MAAM,CAACK,KADK,CAA3B;AAeP,OAAO,IAAMC,OAAO,GAAGV,MAAM,CAACQ,GAAV,mkBAKdF,WALc,EAWdC,qBAXc,EAcQH,MAAM,CAACO,WAdf,EAmBQP,MAAM,CAACO,WAnBf,CAAb;;AAuCP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAMkB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfC,QACe,QADfA,QACe;AAGjE,MAAMC,GAAG,aAAM,CAAC,CAACL,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,CAAT;AAEA,sBAEE,KAAC,OAAD;AAAS,IAAA,SAAS,EAAEC,GAApB;AACS,IAAA,QAAQ,EAAE,CAAC,CAACL,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CADvD;AAES,IAAA,WAAW,EAAEZ,yBAFtB;AAGS,IAAA,SAAS,EAAE,mBAAAc,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACH,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;AAAA,KAHrB;AAIS,IAAA,OAAO,EAAE,iBAAAQ,CAAC;AAAA,aAAI,CAACJ,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;AAAA,KAJnB;AAAA,2BAKE,MAAC,qBAAD;AAAA,iBACGC,eAAe,iBAAI,KAAC,cAAD,kCAAoBA,eAApB;AAAqC,QAAA,QAAQ,EAAEG;AAA/C,SADtB,EAEGF,kBAAkB,iBACjB,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEE;AAArD,SAHJ,EAIGD,kBAAkB,iBACjB,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEC;AAArD,SALJ;AAAA;AALF,IAFF;AAiBD,CA5BD;;;AAPEJ,EAAAA,a;AACAI,EAAAA,Q;;AAoCF,eAAeL,IAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {COLORS, defaultOnMouseDownHandler, focusStyles} from '..';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n}\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    ${CardTopLevelContainer} {\n      &:active, &.active-state {\n        box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n        border: 1px solid ${COLORS.neutral_200};\n      }\n\n      &:hover {\n        overflow: visible;\n        border: 1px solid ${COLORS.neutral_200};\n        box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n`;\n\n\nexport interface CardProps {\n  onCardClicked?: () => {};\n  disabled: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled\n                                                  }: CardProps) => {\n\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''}`;\n\n  return (\n\n    <Wrapper className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}>\n      <CardTopLevelContainer>\n        {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled}/>}\n        {middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>}\n        {bottomSectionProps &&\n          <CardBottomSection {...bottomSectionProps} disabled={disabled}/>}\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"file":"Card.js"}
+{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","COLORS","CardTopLevelContainer","div","white","props","interactionType","InteractionType","Clickable","disabled","neutral_200","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,cAAP,MAAoD,kBAApD;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,SAASC,MAAT,QAAiD,IAAjD;;;AAEA,OAAO,IAAMC,qBAAqB,GAAGL,MAAM,CAACM,GAAV,mUACZF,MAAM,CAACG,KADK,EAY9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,kIAKsBR,MAAM,CAACS,WAL7B,yJAYsBT,MAAM,CAACS,WAZ7B,sKAkBsBT,MAAM,CAACS,WAlB7B,wJADK;AAAA,CAZyB,CAA3B;AAuCP,WAAYH,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,e;;AAeZ,IAAMI,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfL,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACK,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfP,QACe,QADfA,QACe;AACf,MAAMQ,OAAO,GAAGrB,KAAK,CAACsB,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIb,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGK,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACG,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,MAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEZ,QAAjC;AAA2C,IAAA,GAAG,EAAEQ,OAAhD;AAAyD,IAAA,QAAQ,EAAEX,eAAe,IAAIC,eAAe,CAACC,SAAnC,IAAgD,CAACC,QAAjD,GAA4D,CAA5D,GAAgE,CAAC,CAApI;AAAuI,IAAA,eAAe,EAAEH,eAAxJ;AAAyK,IAAA,OAAO,EAAEa,WAAlL;AAAA,eACGL,eAAe,iBAAI,KAAC,cAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEL,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGS,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGU,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEP,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAO,EAAAA,a;AACAJ,EAAAA,Q;;AAgCF,eAAeE,IAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, { CardTopSectionProps } from './CardTopSection';\nimport CardMiddleSection, { CardMiddleSectionProps } from './CardMiddleSection';\nimport CardBottomSection, { CardBottomSectionProps } from './CardBottomSection';\nimport { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n  background-color: ${COLORS.white};\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable && !props.disabled\n      ? `\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n      border: 1px solid ${COLORS.neutral_200};\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      border: 1px solid ${COLORS.neutral_200};\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      border: 1px solid ${COLORS.neutral_200};\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px 2px rgba(46, 127, 161, 0.25), 0px 0px 8px 2px #2E7FA1;\n    }`\n      : ``}\n`;\n\nexport enum InteractionType {\n  None,\n  Clickable,\n  Selectable,\n}\n\nexport interface CardProps {\n  interactionType: InteractionType;\n  onCardClicked: () => {};\n  disabled: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n  interactionType = InteractionType.None,\n  onCardClicked,\n  topSectionProps,\n  middleSectionProps,\n  bottomSectionProps,\n  disabled\n}: CardProps) => {\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  const onCardClick = () => {\n    if (interactionType == InteractionType.Clickable) {\n      if(onCardClicked) onCardClicked();\n      rootRef.current?.blur();\n    }\n  };\n\n  return (\n    <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable && !disabled ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n      {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n    </CardTopLevelContainer>\n  );\n};\n\nexport default Card;\n"],"file":"Card.js"}

package/dist/Card/CardBottomSection.cjs

@@ -45,10 +45,15 @@ var NoteRight = _styledComponents.default.div(_templateObject6 || (_templateObje
 
 var ButtonRowContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\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"])), _.COLORS.neutral_100, _.COLORS.neutral_600);
 
-var Container = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
+var Container = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ", ";\n\n  ", " {\n    ", "\n  }\n"])), function (props) {
+  return props.disabled ? 'not-allowed' : 'pointer';
+}, ButtonRowContainer, function (props) {
+  return props.interactionType == _.InteractionType.Clickable ? "cursor: ".concat(props.disabled ? 'not-allowed' : 'auto', ";") : '';
+});
 
 var CardBottomSection = function CardBottomSection(_ref) {
-  var progressLevel = _ref.progressLevel,
+  var interactionType = _ref.interactionType,
+      progressLevel = _ref.progressLevel,
       progressMax = _ref.progressMax,
       _ref$progressType = _ref.progressType,
       progressType = _ref$progressType === void 0 ? _.LinearProgressType.Line : _ref$progressType,
@@ -62,6 +67,8 @@ var CardBottomSection = function CardBottomSection(_ref) {
       disabled = _ref.disabled;
   var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    disabled: disabled,
+    interactionType: interactionType,
     children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LinearProgress, {
         size: _.Size.Small,

package/dist/Card/CardBottomSection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["ProgressContainer","styled","div","NotesContainer","COLORS","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","ButtonRowContainer","neutral_600","Container","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","map","x","e","stopPropagation","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled: boolean;\n}\n\nconst ProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nconst NotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\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  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nconst NoteLeft = styled.div`\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`;\n\nconst NoteRight = styled.div`\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`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\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: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  logo,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {(authorName || logo) && <AuthorContainer disabled={disabled}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}
+{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["ProgressContainer","styled","div","NotesContainer","COLORS","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","ButtonRowContainer","neutral_600","Container","interactionType","InteractionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","map","x","e","stopPropagation","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled: boolean;\n}\n\nconst ProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nconst NotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\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  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nconst NoteLeft = styled.div`\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`;\n\nconst NoteRight = styled.div`\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`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\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: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  logo,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {(authorName || logo) && <AuthorContainer disabled={disabled}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}

package/dist/Card/CardBottomSection.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { LinearProgressType } from '..';
+import { InteractionType, LinearProgressType } from '..';
 export interface ActionItem {
     icon: React.ReactNode;
     onClick: () => void;
 }
 export interface CardBottomSectionProps {
+    interactionType: InteractionType;
     progressLevel?: number;
     progressMax?: number;
     progressType?: LinearProgressType;

package/dist/Card/CardBottomSection.js

@@ -5,7 +5,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import * as React from 'react';
 import styled from 'styled-components';
-import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';
+import { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';
 import { IconButton } from '../Button';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,10 +18,15 @@ var Divider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplate
 var NoteLeft = 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"])));
 var NoteRight = 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"])));
 var ButtonRowContainer = 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"])), COLORS.neutral_100, COLORS.neutral_600);
-var Container = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
+var Container = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ", ";\n\n  ", " {\n    ", "\n  }\n"])), function (props) {
+  return props.disabled ? 'not-allowed' : 'pointer';
+}, ButtonRowContainer, function (props) {
+  return props.interactionType == InteractionType.Clickable ? "cursor: ".concat(props.disabled ? 'not-allowed' : 'auto', ";") : '';
+});
 
 var CardBottomSection = function CardBottomSection(_ref) {
-  var progressLevel = _ref.progressLevel,
+  var interactionType = _ref.interactionType,
+      progressLevel = _ref.progressLevel,
       progressMax = _ref.progressMax,
       _ref$progressType = _ref.progressType,
       progressType = _ref$progressType === void 0 ? LinearProgressType.Line : _ref$progressType,
@@ -35,6 +40,8 @@ var CardBottomSection = function CardBottomSection(_ref) {
       disabled = _ref.disabled;
   var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
   return /*#__PURE__*/_jsxs(Container, {
+    disabled: disabled,
+    interactionType: interactionType,
     children: [haveAtLeastSomething && /*#__PURE__*/_jsx(Divider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(ProgressContainer, {
       children: /*#__PURE__*/_jsx(LinearProgress, {
         size: Size.Small,

package/dist/Card/CardBottomSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","ProgressContainer","div","NotesContainer","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","ButtonRowContainer","neutral_600","Container","CardBottomSection","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","haveAtLeastSomething","undefined","Small","Normal","Bold","map","x","e","stopPropagation","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled: boolean;\n}\n\nconst ProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nconst NotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\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  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nconst NoteLeft = styled.div`\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`;\n\nconst NoteRight = styled.div`\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`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\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: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  logo,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {(authorName || logo) && <AuthorContainer disabled={disabled}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}
+{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","InteractionType","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","ProgressContainer","div","NotesContainer","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","ButtonRowContainer","neutral_600","Container","interactionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","haveAtLeastSomething","undefined","Small","Normal","Bold","map","x","e","stopPropagation","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled: boolean;\n}\n\nconst ProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nconst NotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\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  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nconst NoteLeft = styled.div`\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`;\n\nconst NoteRight = styled.div`\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`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\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: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  logo,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {(authorName || logo) && <AuthorContainer disabled={disabled}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}

package/dist/Card/CardMiddleSection.cjs

@@ -27,7 +27,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var Container = _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"])));
+var Container = _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\n  ", "\n"])), function (props) {
+  return props.interactionType == _.InteractionType.Clickable ? "\n    cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n  ") : '';
+});
 
 var ColorBand = _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;
@@ -38,7 +40,8 @@ var TagsContainer = _styledComponents.default.div(_templateObject3 || (_template
 var CategoryContainer = _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"])), _.COLORS.neutral_500);
 
 var CardMiddleSection = function CardMiddleSection(_ref) {
-  var colorBandColor = _ref.colorBandColor,
+  var interactionType = _ref.interactionType,
+      colorBandColor = _ref.colorBandColor,
       categoryIcon = _ref.categoryIcon,
       categoryLabel = _ref.categoryLabel,
       title = _ref.title,
@@ -46,6 +49,8 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
       tags = _ref.tags,
       disabled = _ref.disabled;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    disabled: disabled,
+    interactionType: interactionType,
     children: [colorBandColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorBand, {
       $color: colorBandColor
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(CategoryContainer, {

package/dist/Card/CardMiddleSection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["Container","styled","div","ColorBand","props","$color","TagsContainer","CategoryContainer","COLORS","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","disabled","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAYA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,sUAAf;;AAkBA,IAAMC,SAAS,GAAGF,0BAAOC,GAAV,qMAMO,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACC,MAAV;AAAA,CANZ,CAAf;;AASA,IAAMC,aAAa,GAAGL,0BAAOC,GAAV,qLAAnB;;AAQA,IAAMK,iBAAiB,GAAGN,0BAAOC,GAAV,qQAQVM,SAAOC,WARG,CAAvB;;AAcA,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAQ7C;AAAA,MAP5BC,cAO4B,QAP5BA,cAO4B;AAAA,MAN5BC,YAM4B,QAN5BA,YAM4B;AAAA,MAL5BC,aAK4B,QAL5BA,aAK4B;AAAA,MAJ5BC,KAI4B,QAJ5BA,KAI4B;AAAA,MAH5BC,WAG4B,QAH5BA,WAG4B;AAAA,MAF5BC,IAE4B,QAF5BA,IAE4B;AAAA,MAD5BC,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,sBAAC,SAAD;AAAA,eACGN,cAAc,iBAAI,qBAAC,SAAD;AAAW,MAAA,MAAM,EAAEA;AAAnB,MADrB,eAEE,sBAAC,iBAAD;AAAmB,MAAA,cAAc,EAAEO,OAAO,CAACP,cAAD,CAA1C;AAA4D,MAAA,YAAY,EAAEO,OAAO,CAACN,YAAY,IAAIC,aAAjB,CAAjF;AAAA,iBACGD,YADH,eAEE,qBAAC,YAAD;AAAY,QAAA,SAAS,EAAEO,qBAAmBC,IAA1C;AAAgD,QAAA,KAAK,EAAEZ,SAAOC,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,qBAAC,aAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEM,qBAAmBC,IAAlE;AAAwE,MAAA,KAAK,EAAEH,QAAQ,GAAGT,SAAOC,WAAV,GAAwBD,SAAOa,KAAtH;AAAA,gBACGP;AADH,MARF,EAWGC,WAAW,iBACV,qBAAC,YAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEP,SAAOc,WAAvD;AAAA,gBACGP;AADH,MAZJ,EAgBGC,IAAI,iBACH,qBAAC,aAAD;AAAA,gBACGA,IAAI,CAACO,GAAL,CAAS,UAAAC,CAAC;AAAA,4BACT,qBAAC,KAAD;AAAK,UAAA,KAAK,EAAEA;AAAZ,UADS;AAAA,OAAV;AADH,MAjBJ;AAAA,IADF;AA0BD,CAnCD;;;AA1DEb,EAAAA,c;AACAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;;eAyFaP,iB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL,  Tag } from '..';\n\nexport interface CardMiddleSectionProps {\n  colorBandColor?: string;\n  categoryIcon?: React.ReactNode;\n  categoryLabel?: string;\n  title: string;\n  description?: string;\n  tags?: string[];\n  disabled: boolean;\n}\n\nconst Container = styled.div`\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`;\n\nconst ColorBand = styled.div<{ $color: string }>`\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ${props => props.$color};\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n`;\n\nconst CategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n  \n  svg {\n    color: ${COLORS.neutral_500};\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n  colorBandColor,\n  categoryIcon,\n  categoryLabel,\n  title,\n  description,\n  tags,\n  disabled\n}: CardMiddleSectionProps) => {\n  return (\n    <Container>\n      {colorBandColor && <ColorBand $color={colorBandColor} />}\n      <CategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n        {categoryIcon}\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n          {categoryLabel}\n        </ComponentS>\n      </CategoryContainer>\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n        {title}\n      </ComponentXL>\n      {description && (\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n          {description}\n        </ComponentS>\n      )}\n      {tags && (\n        <TagsContainer>\n          {tags.map(x => (\n            <Tag label={x} />\n          ))}\n        </TagsContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.cjs"}
+{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["Container","styled","div","props","interactionType","InteractionType","Clickable","disabled","ColorBand","$color","TagsContainer","CategoryContainer","COLORS","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAaA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,iVAiBX,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,kBAAgBC,SAAzC,2BAEUH,KAAK,CAACI,QAAN,GAAiB,aAAjB,GAAiC,SAF3C,aAII,EALC;AAAA,CAjBM,CAAf;;AAyBA,IAAMC,SAAS,GAAGP,0BAAOC,GAAV,qMAMO,UAAAC,KAAK;AAAA,SAAIA,KAAK,CAACM,MAAV;AAAA,CANZ,CAAf;;AASA,IAAMC,aAAa,GAAGT,0BAAOC,GAAV,qLAAnB;;AAQA,IAAMS,iBAAiB,GAAGV,0BAAOC,GAAV,qQAQVU,SAAOC,WARG,CAAvB;;AAcA,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5BV,eAQ4B,QAR5BA,eAQ4B;AAAA,MAP5BW,cAO4B,QAP5BA,cAO4B;AAAA,MAN5BC,YAM4B,QAN5BA,YAM4B;AAAA,MAL5BC,aAK4B,QAL5BA,aAK4B;AAAA,MAJ5BC,KAI4B,QAJ5BA,KAI4B;AAAA,MAH5BC,WAG4B,QAH5BA,WAG4B;AAAA,MAF5BC,IAE4B,QAF5BA,IAE4B;AAAA,MAD5Bb,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,sBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEA,QAArB;AAA+B,IAAA,eAAe,EAAEH,eAAhD;AAAA,eACGW,cAAc,iBAAI,qBAAC,SAAD;AAAW,MAAA,MAAM,EAAEA;AAAnB,MADrB,eAEE,sBAAC,iBAAD;AAAmB,MAAA,cAAc,EAAEM,OAAO,CAACN,cAAD,CAA1C;AAA4D,MAAA,YAAY,EAAEM,OAAO,CAACL,YAAY,IAAIC,aAAjB,CAAjF;AAAA,iBACGD,YADH,eAEE,qBAAC,YAAD;AAAY,QAAA,SAAS,EAAEM,qBAAmBC,IAA1C;AAAgD,QAAA,KAAK,EAAEX,SAAOC,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,qBAAC,aAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEK,qBAAmBC,IAAlE;AAAwE,MAAA,KAAK,EAAEhB,QAAQ,GAAGK,SAAOC,WAAV,GAAwBD,SAAOY,KAAtH;AAAA,gBACGN;AADH,MARF,EAWGC,WAAW,iBACV,qBAAC,YAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEP,SAAOa,WAAvD;AAAA,gBACGN;AADH,MAZJ,EAgBGC,IAAI,iBACH,qBAAC,aAAD;AAAA,gBACGA,IAAI,CAACM,GAAL,CAAS,UAAAC,CAAC;AAAA,4BACT,qBAAC,KAAD;AAAK,UAAA,KAAK,EAAEA;AAAZ,UADS;AAAA,OAAV;AADH,MAjBJ;AAAA,IADF;AA0BD,CApCD;;;AAlEEZ,EAAAA,c;AAEAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AACAb,EAAAA,Q;;eAiGaO,iB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS, InteractionType, Tag } from '..';\n\nexport interface CardMiddleSectionProps {\n  colorBandColor?: string;\n  interactionType: InteractionType;\n  categoryIcon?: React.ReactNode;\n  categoryLabel?: string;\n  title: string;\n  description?: string;\n  tags?: string[];\n  disabled: boolean;\n}\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\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\n  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\n      : ''}\n`;\n\nconst ColorBand = styled.div<{ $color: string }>`\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ${props => props.$color};\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n`;\n\nconst CategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n  \n  svg {\n    color: ${COLORS.neutral_500};\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n  interactionType,\n  colorBandColor,\n  categoryIcon,\n  categoryLabel,\n  title,\n  description,\n  tags,\n  disabled\n}: CardMiddleSectionProps) => {\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {colorBandColor && <ColorBand $color={colorBandColor} />}\n      <CategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n        {categoryIcon}\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n          {categoryLabel}\n        </ComponentS>\n      </CategoryContainer>\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n        {title}\n      </ComponentXL>\n      {description && (\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n          {description}\n        </ComponentS>\n      )}\n      {tags && (\n        <TagsContainer>\n          {tags.map(x => (\n            <Tag label={x} />\n          ))}\n        </TagsContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.cjs"}

package/dist/Card/CardMiddleSection.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { InteractionType } from '..';
 export interface CardMiddleSectionProps {
     colorBandColor?: string;
+    interactionType: InteractionType;
     categoryIcon?: React.ReactNode;
     categoryLabel?: string;
     title: string;

package/dist/Card/CardMiddleSection.js

@@ -5,10 +5,12 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import * as React from 'react';
 import styled from 'styled-components';
-import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag } from '..';
+import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, InteractionType, Tag } from '..';
 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-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"])));
+var Container = 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\n  ", "\n"])), function (props) {
+  return props.interactionType == InteractionType.Clickable ? "\n    cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n  ") : '';
+});
 var ColorBand = 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;
 });
@@ -16,7 +18,8 @@ var TagsContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTe
 var CategoryContainer = 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"])), COLORS.neutral_500);
 
 var CardMiddleSection = function CardMiddleSection(_ref) {
-  var colorBandColor = _ref.colorBandColor,
+  var interactionType = _ref.interactionType,
+      colorBandColor = _ref.colorBandColor,
       categoryIcon = _ref.categoryIcon,
       categoryLabel = _ref.categoryLabel,
       title = _ref.title,
@@ -24,6 +27,8 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
       tags = _ref.tags,
       disabled = _ref.disabled;
   return /*#__PURE__*/_jsxs(Container, {
+    disabled: disabled,
+    interactionType: interactionType,
     children: [colorBandColor && /*#__PURE__*/_jsx(ColorBand, {
       $color: colorBandColor
     }), /*#__PURE__*/_jsxs(CategoryContainer, {

package/dist/Card/CardMiddleSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","Container","div","ColorBand","props","$color","TagsContainer","CategoryContainer","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","disabled","Boolean","Bold","black","neutral_600","map","x"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,UAAjB,EAA6BC,kBAA7B,EAAiDC,WAAjD,EAA+DC,GAA/D,QAA0E,IAA1E;;;AAYA,IAAMC,SAAS,GAAGN,MAAM,CAACO,GAAV,wTAAf;AAkBA,IAAMC,SAAS,GAAGR,MAAM,CAACO,GAAV,uLAMO,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACC,MAAV;AAAA,CANZ,CAAf;AASA,IAAMC,aAAa,GAAGX,MAAM,CAACO,GAAV,uKAAnB;AAQA,IAAMK,iBAAiB,GAAGZ,MAAM,CAACO,GAAV,uPAQVN,MAAM,CAACY,WARG,CAAvB;;AAcA,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAQ7C;AAAA,MAP5BC,cAO4B,QAP5BA,cAO4B;AAAA,MAN5BC,YAM4B,QAN5BA,YAM4B;AAAA,MAL5BC,aAK4B,QAL5BA,aAK4B;AAAA,MAJ5BC,KAI4B,QAJ5BA,KAI4B;AAAA,MAH5BC,WAG4B,QAH5BA,WAG4B;AAAA,MAF5BC,IAE4B,QAF5BA,IAE4B;AAAA,MAD5BC,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,MAAC,SAAD;AAAA,eACGN,cAAc,iBAAI,KAAC,SAAD;AAAW,MAAA,MAAM,EAAEA;AAAnB,MADrB,eAEE,MAAC,iBAAD;AAAmB,MAAA,cAAc,EAAEO,OAAO,CAACP,cAAD,CAA1C;AAA4D,MAAA,YAAY,EAAEO,OAAO,CAACN,YAAY,IAAIC,aAAjB,CAAjF;AAAA,iBACGD,YADH,eAEE,KAAC,UAAD;AAAY,QAAA,SAAS,EAAEb,kBAAkB,CAACoB,IAA1C;AAAgD,QAAA,KAAK,EAAEtB,MAAM,CAACY,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,KAAC,WAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEd,kBAAkB,CAACoB,IAAlE;AAAwE,MAAA,KAAK,EAAEF,QAAQ,GAAGpB,MAAM,CAACY,WAAV,GAAwBZ,MAAM,CAACuB,KAAtH;AAAA,gBACGN;AADH,MARF,EAWGC,WAAW,iBACV,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAElB,MAAM,CAACwB,WAAvD;AAAA,gBACGN;AADH,MAZJ,EAgBGC,IAAI,iBACH,KAAC,aAAD;AAAA,gBACGA,IAAI,CAACM,GAAL,CAAS,UAAAC,CAAC;AAAA,4BACT,KAAC,GAAD;AAAK,UAAA,KAAK,EAAEA;AAAZ,UADS;AAAA,OAAV;AADH,MAjBJ;AAAA,IADF;AA0BD,CAnCD;;;AA1DEZ,EAAAA,c;AACAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;;AAyFF,eAAeP,iBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL,  Tag } from '..';\n\nexport interface CardMiddleSectionProps {\n  colorBandColor?: string;\n  categoryIcon?: React.ReactNode;\n  categoryLabel?: string;\n  title: string;\n  description?: string;\n  tags?: string[];\n  disabled: boolean;\n}\n\nconst Container = styled.div`\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`;\n\nconst ColorBand = styled.div<{ $color: string }>`\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ${props => props.$color};\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n`;\n\nconst CategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n  \n  svg {\n    color: ${COLORS.neutral_500};\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n  colorBandColor,\n  categoryIcon,\n  categoryLabel,\n  title,\n  description,\n  tags,\n  disabled\n}: CardMiddleSectionProps) => {\n  return (\n    <Container>\n      {colorBandColor && <ColorBand $color={colorBandColor} />}\n      <CategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n        {categoryIcon}\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n          {categoryLabel}\n        </ComponentS>\n      </CategoryContainer>\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n        {title}\n      </ComponentXL>\n      {description && (\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n          {description}\n        </ComponentS>\n      )}\n      {tags && (\n        <TagsContainer>\n          {tags.map(x => (\n            <Tag label={x} />\n          ))}\n        </TagsContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.js"}
+{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","InteractionType","Tag","Container","div","props","interactionType","Clickable","disabled","ColorBand","$color","TagsContainer","CategoryContainer","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","Boolean","Bold","black","neutral_600","map","x"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,UAAjB,EAA6BC,kBAA7B,EAAiDC,WAAjD,EAA2EC,eAA3E,EAA4FC,GAA5F,QAAuG,IAAvG;;;AAaA,IAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAV,mUAiBX,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBL,eAAe,CAACM,SAAzC,2BAEUF,KAAK,CAACG,QAAN,GAAiB,aAAjB,GAAiC,SAF3C,aAII,EALC;AAAA,CAjBM,CAAf;AAyBA,IAAMC,SAAS,GAAGb,MAAM,CAACQ,GAAV,uLAMO,UAAAC,KAAK;AAAA,SAAIA,KAAK,CAACK,MAAV;AAAA,CANZ,CAAf;AASA,IAAMC,aAAa,GAAGf,MAAM,CAACQ,GAAV,uKAAnB;AAQA,IAAMQ,iBAAiB,GAAGhB,MAAM,CAACQ,GAAV,uPAQVP,MAAM,CAACgB,WARG,CAAvB;;AAcA,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5BR,eAQ4B,QAR5BA,eAQ4B;AAAA,MAP5BS,cAO4B,QAP5BA,cAO4B;AAAA,MAN5BC,YAM4B,QAN5BA,YAM4B;AAAA,MAL5BC,aAK4B,QAL5BA,aAK4B;AAAA,MAJ5BC,KAI4B,QAJ5BA,KAI4B;AAAA,MAH5BC,WAG4B,QAH5BA,WAG4B;AAAA,MAF5BC,IAE4B,QAF5BA,IAE4B;AAAA,MAD5BZ,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,MAAC,SAAD;AAAW,IAAA,QAAQ,EAAEA,QAArB;AAA+B,IAAA,eAAe,EAAEF,eAAhD;AAAA,eACGS,cAAc,iBAAI,KAAC,SAAD;AAAW,MAAA,MAAM,EAAEA;AAAnB,MADrB,eAEE,MAAC,iBAAD;AAAmB,MAAA,cAAc,EAAEM,OAAO,CAACN,cAAD,CAA1C;AAA4D,MAAA,YAAY,EAAEM,OAAO,CAACL,YAAY,IAAIC,aAAjB,CAAjF;AAAA,iBACGD,YADH,eAEE,KAAC,UAAD;AAAY,QAAA,SAAS,EAAEjB,kBAAkB,CAACuB,IAA1C;AAAgD,QAAA,KAAK,EAAEzB,MAAM,CAACgB,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,KAAC,WAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAElB,kBAAkB,CAACuB,IAAlE;AAAwE,MAAA,KAAK,EAAEd,QAAQ,GAAGX,MAAM,CAACgB,WAAV,GAAwBhB,MAAM,CAAC0B,KAAtH;AAAA,gBACGL;AADH,MARF,EAWGC,WAAW,iBACV,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEtB,MAAM,CAAC2B,WAAvD;AAAA,gBACGL;AADH,MAZJ,EAgBGC,IAAI,iBACH,KAAC,aAAD;AAAA,gBACGA,IAAI,CAACK,GAAL,CAAS,UAAAC,CAAC;AAAA,4BACT,KAAC,GAAD;AAAK,UAAA,KAAK,EAAEA;AAAZ,UADS;AAAA,OAAV;AADH,MAjBJ;AAAA,IADF;AA0BD,CApCD;;;AAlEEX,EAAAA,c;AAEAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AACAZ,EAAAA,Q;;AAiGF,eAAeM,iBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS, InteractionType, Tag } from '..';\n\nexport interface CardMiddleSectionProps {\n  colorBandColor?: string;\n  interactionType: InteractionType;\n  categoryIcon?: React.ReactNode;\n  categoryLabel?: string;\n  title: string;\n  description?: string;\n  tags?: string[];\n  disabled: boolean;\n}\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\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\n  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\n      : ''}\n`;\n\nconst ColorBand = styled.div<{ $color: string }>`\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ${props => props.$color};\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n`;\n\nconst CategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n  \n  svg {\n    color: ${COLORS.neutral_500};\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n  interactionType,\n  colorBandColor,\n  categoryIcon,\n  categoryLabel,\n  title,\n  description,\n  tags,\n  disabled\n}: CardMiddleSectionProps) => {\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {colorBandColor && <ColorBand $color={colorBandColor} />}\n      <CategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n        {categoryIcon}\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n          {categoryLabel}\n        </ComponentS>\n      </CategoryContainer>\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n        {title}\n      </ComponentXL>\n      {description && (\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n          {description}\n        </ComponentS>\n      )}\n      {tags && (\n        <TagsContainer>\n          {tags.map(x => (\n            <Tag label={x} />\n          ))}\n        </TagsContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.js"}

package/dist/Card/CardTopSection.cjs

@@ -37,8 +37,10 @@ var Img = _styledComponents.default.img(_templateObject || (_templateObject = (0
 
 var TagContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"])));
 
-var Container = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ", "\n"])), function (props) {
+var Container = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ", "\n\n  ", "\n"])), function (props) {
   return props.disabled ? "\n  img, svg {\n    filter: grayscale(100%);\n  }" : '';
+}, function (props) {
+  return props.interactionType == _.InteractionType.Clickable ? "\n    cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n  ") : '';
 });
 
 var RibbonContainer = _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) {
@@ -47,10 +49,11 @@ var RibbonContainer = _styledComponents.default.div(_templateObject4 || (_templa
   return props.$color;
 });
 
-var CheckboxContainer = _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"])), _.COLORS.white);
+var CheckboxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0px;\n  right: 0px;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), _.COLORS.white);
 
 var CardTopSection = function CardTopSection(_ref) {
-  var selected = _ref.selected,
+  var interactionType = _ref.interactionType,
+      selected = _ref.selected,
       setSelected = _ref.setSelected,
       image = _ref.image,
       tagLabel = _ref.tagLabel,
@@ -64,15 +67,15 @@ var CardTopSection = function CardTopSection(_ref) {
       disabled = _ref.disabled;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     disabled: disabled,
+    interactionType: interactionType,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
       src: image
-    }), (!!selected || !!setSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxContainer, {
+    }), (selected !== undefined || setSelected !== undefined) && interactionType == _.InteractionType.Selectable && /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
-        disabled: disabled,
         select: function select(selected) {
-          return setSelected && setSelected(selected);
+          return setSelected(selected);
         },
-        selected: selected || false
+        selected: selected
       })
     }), (tagLabel || tagIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.Tag, {
@@ -93,8 +96,8 @@ var CardTopSection = function CardTopSection(_ref) {
 };
 
 CardTopSection.propTypes = {
-  selected: _propTypes.default.bool,
-  setSelected: _propTypes.default.func,
+  selected: _propTypes.default.bool.isRequired,
+  setSelected: _propTypes.default.func.isRequired,
   tagLabel: _propTypes.default.string,
   tagIcon: _propTypes.default.node,
   highlightRibbonText: _propTypes.default.string,

package/dist/Card/CardTopSection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["Img","styled","img","TagContainer","div","Container","props","disabled","RibbonContainer","$backgroundColor","$color","CheckboxContainer","COLORS","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","neutral_300","ComponentTextStyle","Regular"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAgBA,IAAMA,GAAG,GAAGC,0BAAOC,GAAV,6MAAT;;AAQA,IAAMC,YAAY,GAAGF,0BAAOG,GAAV,0KAAlB;;AAQA,IAAMC,SAAS,GAAGJ,0BAAOG,GAAV,iLAMX,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,yDAGN,EAHE;AAAA,CANM,CAAf;;AAYA,IAAMC,eAAe,GAAGP,0BAAOG,GAAV,ocAEC,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACG,gBAAV;AAAA,CAFN,EAcR,UAAAH,KAAK;AAAA,SAAIA,KAAK,CAACI,MAAV;AAAA,CAdG,CAArB;;AAsBA,IAAMC,iBAAiB,GAAGV,0BAAOG,GAAV,8MAOCQ,SAAOC,KAPR,CAAvB;;AAWA,IAAMC,cAA4D,GAAG,SAA/DA,cAA+D,OAY4B;AAAA,MAXzBC,QAWyB,QAXzBA,QAWyB;AAAA,MAVzBC,WAUyB,QAVzBA,WAUyB;AAAA,MATzBC,KASyB,QATzBA,KASyB;AAAA,MARzBC,QAQyB,QARzBA,QAQyB;AAAA,MAPzBC,OAOyB,QAPzBA,OAOyB;AAAA,6BANzBC,UAMyB;AAAA,MANzBA,UAMyB,gCANZ,UAMY;AAAA,MALzBC,mBAKyB,QALzBA,mBAKyB;AAAA,MAJzBC,mBAIyB,QAJzBA,mBAIyB;AAAA,MAHzBC,2BAGyB,QAHzBA,2BAGyB;AAAA,MAFzBC,sBAEyB,QAFzBA,sBAEyB;AAAA,MADzBjB,QACyB,QADzBA,QACyB;AAC/F,sBACE,sBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEA,QAArB;AAAA,4BACE,qBAAC,GAAD;AAAK,MAAA,GAAG,EAAEU;AAAV,MADF,EAEG,CAAC,CAAC,CAACF,QAAF,IAAc,CAAC,CAACC,WAAjB,kBACC,qBAAC,iBAAD;AAAA,6BACE,qBAAC,iBAAD;AAAU,QAAA,QAAQ,EAAET,QAApB;AAA8B,QAAA,MAAM,EAAE,gBAACQ,QAAD;AAAA,iBAAuBC,WAAW,IAAIA,WAAW,CAACD,QAAD,CAAjD;AAAA,SAAtC;AAAmG,QAAA,QAAQ,EAAEA,QAAQ,IAAI;AAAzH;AADF,MAHJ,EAOG,CAACG,QAAQ,IAAIC,OAAb,kBACC,qBAAC,YAAD;AAAA,6BACE,qBAAC,QAAD;AAAK,QAAA,KAAK,EAAED,QAAZ;AAAsB,QAAA,OAAO,EAAEE,UAA/B;AAA2C,QAAA,IAAI,EAAED;AAAjD;AADF,MARJ,EAYG,CAACE,mBAAmB,IAAIC,mBAAxB,kBACC,sBAAC,eAAD;AAAiB,MAAA,MAAM,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAAxD;AACiB,MAAA,gBAAgB,EAAEhB,QAAQ,GAAGK,SAAOa,WAAV,GAAwBD,sBAAxB,aAAwBA,sBAAxB,cAAwBA,sBAAxB,GAAkD,EAD7F;AAAA,iBAEGH,mBAFH,EAGGC,mBAAmB,iBAClB,qBAAC,sBAAD;AAAY,QAAA,KAAK,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAAlD;AAAsD,QAAA,SAAS,EAAEG,+BAAmBC,OAApF;AAAA,kBACGL;AADH,QAJJ;AAAA,MAbJ;AAAA,IADF;AA0BD,CAvCD;;;AA1EEP,EAAAA,Q;AACAC,EAAAA,W;AACAE,EAAAA,Q;AACAC,EAAAA,O;AAEAG,EAAAA,mB;AACAD,EAAAA,mB;AACAE,EAAAA,2B;AACAC,EAAAA,sB;AACAP,EAAAA,K;AACAV,EAAAA,Q;;eAyGaO,c","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {ComponentS, ComponentTextStyle} from '../styles/typography';\nimport Checkbox from '../InputFields/Checkbox';\nimport {Tag, TagVariants} from '../Tag';\n\nimport {COLORS} from '..';\n\nexport interface CardTopSectionProps {\n  selected?: boolean;\n  setSelected?: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  tagVariant?: TagVariants;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: string;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: string;\n  disabled: boolean;\n}\n\nconst Img = styled.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\nconst TagContainer = styled.div`\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n`;\n\nconst Container = styled.div<{ disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n`;\n\nconst RibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  min-height: calc(40px - 16px);\n  background-color: ${props => props.$backgroundColor};\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: ${props => props.$color};\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nconst CheckboxContainer = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n                                                                        selected,\n                                                                        setSelected,\n                                                                        image,\n                                                                        tagLabel,\n                                                                        tagIcon,\n                                                                        tagVariant = 'positive',\n                                                                        highlightRibbonIcon,\n                                                                        highlightRibbonText,\n                                                                        highlightRibbonContentColor,\n                                                                        highlightRibbonBgColor,\n                                                                        disabled\n                                                                      }: CardTopSectionProps) => {\n  return (\n    <Container disabled={disabled}>\n      <Img src={image}/>\n      {(!!selected || !!setSelected) && (\n        <CheckboxContainer>\n          <Checkbox disabled={disabled} select={(selected: boolean) => setSelected && setSelected(selected)} selected={selected || false}/>\n        </CheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <TagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n        </TagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <RibbonContainer $color={highlightRibbonContentColor ?? ''}\n                         $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </RibbonContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.cjs"}
+{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["Img","styled","img","TagContainer","div","Container","props","disabled","interactionType","InteractionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","COLORS","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","neutral_300","ComponentTextStyle","Regular"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { ComponentS, ComponentTextStyle } from '../styles/typography';\nimport Checkbox, { StyledCheckBox } from '../InputFields/Checkbox';\nimport { Tag, TagVariants } from '../Tag';\n\nimport { COLORS, InteractionType } from '..';\n\nexport interface CardTopSectionProps {\n  interactionType: InteractionType;\n  selected: boolean;\n  setSelected: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  tagVariant?: TagVariants;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: string;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: string;\n  disabled: boolean;\n}\n\nconst Img = styled.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\nconst TagContainer = styled.div`\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n`;\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\n      : ''}\n`;\n\nconst RibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  min-height: calc(40px - 16px);\n  background-color: ${props => props.$backgroundColor};\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: ${props => props.$color};\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nconst CheckboxContainer = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n  interactionType,\n  selected,\n  setSelected,\n  image,\n  tagLabel,\n  tagIcon,\n  tagVariant = 'positive',\n  highlightRibbonIcon,\n  highlightRibbonText,\n  highlightRibbonContentColor,\n  highlightRibbonBgColor,\n  disabled\n}: CardTopSectionProps) => {\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      <Img src={image} />\n      {(selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && (\n        <CheckboxContainer>\n          <Checkbox select={(selected: boolean) => setSelected(selected)} selected={selected} />\n        </CheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <TagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon} />\n        </TagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <RibbonContainer $color={highlightRibbonContentColor ?? ''} $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </RibbonContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.cjs"}

package/dist/Card/CardTopSection.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { TagVariants } from '../Tag';
+import { InteractionType } from '..';
 export interface CardTopSectionProps {
-    selected?: boolean;
-    setSelected?: (arg0: boolean) => void;
+    interactionType: InteractionType;
+    selected: boolean;
+    setSelected: (arg0: boolean) => void;
     tagLabel?: string;
     tagIcon?: React.ReactNode;
     tagVariant?: TagVariants;