@laerdal/life-react-components 1.9.8-dev.9.full → 1.9.9

package/dist/Card/{VerticalCard/Card.cjs → Card.cjs}

@@ -11,10 +11,6 @@ exports.default = exports.Wrapper = exports.CardTopLevelContainer = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -29,7 +25,7 @@ var _CardMiddleSection = _interopRequireDefault(require("./CardMiddleSection"));
 
 var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
 
-var _index = require("../../index");
+var _ = require("..");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -43,11 +39,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), _index.COLORS.white, _index.BOXSHADOWS.BOXSHADOW_L1, _index.COLORS.neutral_200);
+var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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);
 
 exports.CardTopLevelContainer = CardTopLevelContainer;
 
-var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n"])), _index.focusStyles, CardTopLevelContainer, _index.COLORS.primary_20, _index.COLORS.primary_100, CardTopLevelContainer, _index.BOXSHADOWS.BOXSHADOW_L3, _index.BOXSHADOWS.BOXSHADOW_L2);
+var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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);
 
 exports.Wrapper = Wrapper;
 
@@ -56,24 +52,12 @@ var Card = function Card(_ref) {
       topSectionProps = _ref.topSectionProps,
       middleSectionProps = _ref.middleSectionProps,
       bottomSectionProps = _ref.bottomSectionProps,
-      disabled = _ref.disabled,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'outline' : _ref$variant;
-
-  var _React$useState = React.useState([]),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      actionsRefs = _React$useState2[0],
-      setActionsRefs = _React$useState2[1];
-
-  var checkBoxRef = React.useRef(null);
-  var containerRef = React.useRef(null);
-  (0, _index.useActionWithin)(containerRef, [].concat((0, _toConsumableArray2.default)(actionsRefs), [checkBoxRef]));
-  var cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(variant);
+      disabled = _ref.disabled;
+  var cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
-    ref: containerRef,
     className: cls,
     tabIndex: !!onCardClicked && !disabled ? 0 : -1,
-    onMouseDown: _index.defaultOnMouseDownHandler,
+    onMouseDown: _.defaultOnMouseDownHandler,
     onKeyDown: function onKeyDown(a) {
       return a.key === 'Enter' && !disabled && onCardClicked && onCardClicked();
     },
@@ -81,17 +65,11 @@ var Card = function Card(_ref) {
       return !disabled && onCardClicked && onCardClicked();
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopLevelContainer, {
-      children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({
-        ref: checkBoxRef
-      }, topSectionProps), {}, {
+      children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({}, topSectionProps), {}, {
         disabled: disabled
       })), middleSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardMiddleSection.default, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
         disabled: disabled
-      })), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBottomSection.default, _objectSpread(_objectSpread({
-        ref: function ref(instance) {
-          return setActionsRefs(instance !== null && instance !== void 0 ? instance : []);
-        }
-      }, bottomSectionProps), {}, {
+      })), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBottomSection.default, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
         disabled: disabled
       }))]
     })
@@ -100,8 +78,7 @@ var Card = function Card(_ref) {
 
 Card.propTypes = {
   onCardClicked: _propTypes.default.func,
-  disabled: _propTypes.default.bool,
-  variant: _propTypes.default.oneOf(['outline', 'elevated'])
+  disabled: _propTypes.default.bool.isRequired
 };
 var _default = Card;
 exports.default = _default;

package/dist/Card/Card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","Wrapper","focusStyles","neutral_200","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","cls","defaultOnMouseDownHandler","a","key","e"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,0UACZC,SAAOC,KADK,CAA3B;;;;AAeA,IAAMC,OAAO,GAAGJ,0BAAOC,GAAV,ilBAKdI,aALc,EAWdN,qBAXc,EAcQG,SAAOI,WAdf,EAmBQJ,SAAOI,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,qBAAC,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,EAAEE,2BAFtB;AAGS,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACJ,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;AAAA,KAHrB;AAIS,IAAA,OAAO,EAAE,iBAAAS,CAAC;AAAA,aAAI,CAACL,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;AAAA,KAJnB;AAAA,2BAKE,sBAAC,qBAAD;AAAA,iBACGC,eAAe,iBAAI,qBAAC,uBAAD,kCAAoBA,eAApB;AAAqC,QAAA,QAAQ,EAAEG;AAA/C,SADtB,EAEGF,kBAAkB,iBACjB,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEE;AAArD,SAHJ,EAIGD,kBAAkB,iBACjB,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEC;AAArD,SALJ;AAAA;AALF,IAFF;AAiBD,CA5BD;;;AAPEJ,EAAAA,a;AACAI,EAAAA,Q;;eAoCaL,I","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.cjs"}

package/dist/Card/{VerticalCard/Card.d.ts → Card.d.ts}

@@ -6,11 +6,10 @@ export declare const CardTopLevelContainer: import("styled-components").StyledCo
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface CardProps {
     onCardClicked?: () => {};
-    disabled?: boolean;
+    disabled: boolean;
     topSectionProps?: CardTopSectionProps;
     middleSectionProps?: CardMiddleSectionProps;
     bottomSectionProps?: CardBottomSectionProps;
-    variant?: 'outline' | 'elevated';
 }
 declare const Card: React.FunctionComponent<CardProps>;
 export default Card;

package/dist/Card/{VerticalCard/Card.js → Card.js}

@@ -1,6 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
@@ -15,32 +13,20 @@ import styled from 'styled-components';
 import CardTopSection from './CardTopSection';
 import CardMiddleSection from './CardMiddleSection';
 import CardBottomSection from './CardBottomSection';
-import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin } from '../../index';
+import { COLORS, defaultOnMouseDownHandler, focusStyles } 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  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), COLORS.white, BOXSHADOWS.BOXSHADOW_L1, COLORS.neutral_200);
-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    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n  }\n"])), focusStyles, CardTopLevelContainer, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainer, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2);
+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);
 
 var Card = function Card(_ref) {
   var onCardClicked = _ref.onCardClicked,
       topSectionProps = _ref.topSectionProps,
       middleSectionProps = _ref.middleSectionProps,
       bottomSectionProps = _ref.bottomSectionProps,
-      disabled = _ref.disabled,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'outline' : _ref$variant;
-
-  var _React$useState = React.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      actionsRefs = _React$useState2[0],
-      setActionsRefs = _React$useState2[1];
-
-  var checkBoxRef = React.useRef(null);
-  var containerRef = React.useRef(null);
-  useActionWithin(containerRef, [].concat(_toConsumableArray(actionsRefs), [checkBoxRef]));
-  var cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(variant);
+      disabled = _ref.disabled;
+  var cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '');
   return /*#__PURE__*/_jsx(Wrapper, {
-    ref: containerRef,
     className: cls,
     tabIndex: !!onCardClicked && !disabled ? 0 : -1,
     onMouseDown: defaultOnMouseDownHandler,
@@ -51,17 +37,11 @@ var Card = function Card(_ref) {
       return !disabled && onCardClicked && onCardClicked();
     },
     children: /*#__PURE__*/_jsxs(CardTopLevelContainer, {
-      children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({
-        ref: checkBoxRef
-      }, topSectionProps), {}, {
+      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({
-        ref: function ref(instance) {
-          return setActionsRefs(instance !== null && instance !== void 0 ? instance : []);
-        }
-      }, bottomSectionProps), {}, {
+      })), bottomSectionProps && /*#__PURE__*/_jsx(CardBottomSection, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
         disabled: disabled
       }))]
     })
@@ -70,8 +50,7 @@ var Card = function Card(_ref) {
 
 Card.propTypes = {
   onCardClicked: _pt.func,
-  disabled: _pt.bool,
-  variant: _pt.oneOf(['outline', 'elevated'])
+  disabled: _pt.bool.isRequired
 };
 export default Card;
 //# sourceMappingURL=Card.js.map

package/dist/Card/Card.js.map

@@ -0,0 +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"}

package/dist/Card/{VerticalCard/CardBottomSection.cjs → CardBottomSection.cjs}

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.CardProgressContainer = exports.CardNotesContainer = exports.CardNoteRight = exports.CardNoteLeft = exports.CardButtonRowContainer = exports.CardBottomSectionContainer = exports.CardBottomDivider = exports.CardAuthorContainer = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,9 +17,9 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _index = require("../../index");
+var _ = require("..");
 
-var _Button = require("../../Button");
+var _Button = require("../Button");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -35,17 +33,17 @@ var CardProgressContainer = _styledComponents.default.div(_templateObject || (_t
 
 exports.CardProgressContainer = CardProgressContainer;
 
-var CardNotesContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), _index.COLORS.neutral_500);
+var CardNotesContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), _.COLORS.neutral_500);
 
 exports.CardNotesContainer = CardNotesContainer;
 
 var CardAuthorContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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(_index.COLORS.neutral_300, ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
+  return props.disabled ? "\n    color: ".concat(_.COLORS.neutral_300, ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
 });
 
 exports.CardAuthorContainer = CardAuthorContainer;
 
-var CardBottomDivider = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), _index.COLORS.neutral_100);
+var CardBottomDivider = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), _.COLORS.neutral_100);
 
 exports.CardBottomDivider = CardBottomDivider;
 
@@ -57,18 +55,19 @@ var CardNoteRight = _styledComponents.default.div(_templateObject6 || (_template
 
 exports.CardNoteRight = CardNoteRight;
 
-var CardButtonRowContainer = _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"])), _index.COLORS.neutral_100, _index.COLORS.neutral_600);
+var CardButtonRowContainer = _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);
 
 exports.CardButtonRowContainer = CardButtonRowContainer;
 
 var CardBottomSectionContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
 
 exports.CardBottomSectionContainer = CardBottomSectionContainer;
-var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+
+var CardBottomSection = function CardBottomSection(_ref) {
   var progressLevel = _ref.progressLevel,
       progressMax = _ref.progressMax,
       _ref$progressType = _ref.progressType,
-      progressType = _ref$progressType === void 0 ? _index.LinearProgressType.Line : _ref$progressType,
+      progressType = _ref$progressType === void 0 ? _.LinearProgressType.Line : _ref$progressType,
       noteLeft = _ref.noteLeft,
       noteLeftIcon = _ref.noteLeftIcon,
       noteRight = _ref.noteRight,
@@ -77,66 +76,52 @@ var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       logo = _ref.logo,
       actions = _ref.actions,
       disabled = _ref.disabled;
-
-  var _React$useState = React.useState([]),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      elRefs = _React$useState2[0],
-      setElRefs = _React$useState2[1];
-
-  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, function () {
-    return elRefs;
-  }, [elRefs]);
   var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionContainer, {
     children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomDivider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardProgressContainer, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LinearProgress, {
-        size: _index.Size.Small,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LinearProgress, {
+        size: _.Size.Small,
         type: progressType,
-        variant: _index.LinearProgressVariant.Normal,
+        variant: _.LinearProgressVariant.Normal,
         value: progressLevel,
         max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
       })
     }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardNotesContainer, {
       children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardNoteLeft, {
-        children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
-          color: _index.COLORS.neutral_500,
-          textStyle: _index.ComponentTextStyle.Bold,
+        children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
+          color: _.COLORS.neutral_500,
+          textStyle: _.ComponentTextStyle.Bold,
           children: noteLeft
         })]
       }), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardNoteRight, {
-        children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
-          color: _index.COLORS.neutral_500,
-          textStyle: _index.ComponentTextStyle.Bold,
+        children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
+          color: _.COLORS.neutral_500,
+          textStyle: _.ComponentTextStyle.Bold,
           children: noteRight
         })]
       })]
     }), (authorName || logo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardAuthorContainer, {
       disabled: disabled,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
         children: authorName
       }), logo]
     }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardButtonRowContainer, {
-      children: actions.map(function (x, index) {
+      children: actions.map(function (x) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          ref: elRefs[index],
           disabled: disabled,
           variant: "secondary",
           shape: "circular",
           action: function action(e) {
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
             x.onClick();
           },
           children: x.icon
-        }, index);
+        });
       })
     })]
   });
-});
+};
+
 CardBottomSection.propTypes = {
   progressLevel: _propTypes.default.number,
   progressMax: _propTypes.default.number,
@@ -150,7 +135,7 @@ CardBottomSection.propTypes = {
     onClick: _propTypes.default.func.isRequired
   })),
   logo: _propTypes.default.node,
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool.isRequired
 };
 var _default = CardBottomSection;
 exports.default = _default;

package/dist/Card/CardBottomSection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["CardProgressContainer","styled","div","CardNotesContainer","COLORS","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","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\nexport const CardProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nexport const CardNotesContainer = 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\nexport const CardAuthorContainer = 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\nexport const CardBottomDivider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nexport const CardNoteLeft = 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\nexport const CardNoteRight = 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\nexport const CardButtonRowContainer = 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\nexport const CardBottomSectionContainer = 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    <CardBottomSectionContainer>\n      {haveAtLeastSomething && <CardBottomDivider />}\n      {progressLevel != undefined && <CardProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </CardProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <CardNoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </CardNoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <CardNoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </CardNoteRight>\n        )}\n      </CardNotesContainer>}\n\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </CardAuthorContainer>}\n\n      {actions && <CardButtonRowContainer>\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      </CardButtonRowContainer>}\n    </CardBottomSectionContainer>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}

package/dist/Card/{VerticalCard/CardBottomSection.d.ts → CardBottomSection.d.ts}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LinearProgressType } from '../../index';
+import { LinearProgressType } from '..';
 export interface ActionItem {
     icon: React.ReactNode;
     onClick: () => void;
@@ -15,17 +15,17 @@ export interface CardBottomSectionProps {
     authorName?: string;
     actions?: ActionItem[];
     logo?: React.ReactNode;
-    disabled?: boolean;
+    disabled: boolean;
 }
 export declare const CardProgressContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardNotesContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardAuthorContainer: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean | undefined;
+    disabled: boolean;
 }, never>;
 export declare const CardBottomDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardNoteLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardNoteRight: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardButtonRowContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardBottomSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CardBottomSection: React.ForwardRefExoticComponent<CardBottomSectionProps & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
+declare const CardBottomSection: React.FunctionComponent<CardBottomSectionProps>;
 export default CardBottomSection;

package/dist/Card/{VerticalCard/CardBottomSection.js → CardBottomSection.js}

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
@@ -6,8 +5,8 @@ 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 '../../index';
-import { IconButton } from '../../Button';
+import { COLORS, ComponentTextStyle, ComponentXXS, 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";
 export var CardProgressContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 0;\n"])));
@@ -18,9 +17,10 @@ export var CardAuthorContainer = styled.div(_templateObject3 || (_templateObject
 export var CardBottomDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), COLORS.neutral_100);
 export var CardNoteLeft = 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 CardNoteRight = 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 CardButtonRowContainer = 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);
+export var CardButtonRowContainer = 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);
 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 CardBottomSection = function CardBottomSection(_ref) {
   var progressLevel = _ref.progressLevel,
       progressMax = _ref.progressMax,
       _ref$progressType = _ref.progressType,
@@ -33,21 +33,6 @@ var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       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 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, function () {
-    return elRefs;
-  }, [elRefs]);
   var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
   return /*#__PURE__*/_jsxs(CardBottomSectionContainer, {
     children: [haveAtLeastSomething && /*#__PURE__*/_jsx(CardBottomDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(CardProgressContainer, {
@@ -78,21 +63,22 @@ var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         children: authorName
       }), logo]
     }), actions && /*#__PURE__*/_jsx(CardButtonRowContainer, {
-      children: actions.map(function (x, index) {
+      children: actions.map(function (x) {
         return /*#__PURE__*/_jsx(IconButton, {
-          ref: elRefs[index],
           disabled: disabled,
           variant: "secondary",
           shape: "circular",
           action: function action(e) {
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
             x.onClick();
           },
           children: x.icon
-        }, index);
+        });
       })
     })]
   });
-});
+};
+
 CardBottomSection.propTypes = {
   progressLevel: _pt.number,
   progressMax: _pt.number,
@@ -106,7 +92,7 @@ CardBottomSection.propTypes = {
     onClick: _pt.func.isRequired
   })),
   logo: _pt.node,
-  disabled: _pt.bool
+  disabled: _pt.bool.isRequired
 };
 export default CardBottomSection;
 //# sourceMappingURL=CardBottomSection.js.map

package/dist/Card/CardBottomSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","CardProgressContainer","div","CardNotesContainer","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","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\nexport const CardProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nexport const CardNotesContainer = 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\nexport const CardAuthorContainer = 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\nexport const CardBottomDivider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nexport const CardNoteLeft = 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\nexport const CardNoteRight = 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\nexport const CardButtonRowContainer = 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\nexport const CardBottomSectionContainer = 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    <CardBottomSectionContainer>\n      {haveAtLeastSomething && <CardBottomDivider />}\n      {progressLevel != undefined && <CardProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </CardProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <CardNoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </CardNoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <CardNoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </CardNoteRight>\n        )}\n      </CardNotesContainer>}\n\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </CardAuthorContainer>}\n\n      {actions && <CardButtonRowContainer>\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      </CardButtonRowContainer>}\n    </CardBottomSectionContainer>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}

package/dist/Card/{VerticalCard/CardMiddleSection.cjs → CardMiddleSection.cjs}

@@ -17,7 +17,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _index = require("../../index");
+var _ = require("..");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -41,7 +41,7 @@ var CardTagsContainer = _styledComponents.default.div(_templateObject3 || (_temp
 
 exports.CardTagsContainer = CardTagsContainer;
 
-var CardCategoryContainer = _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"])), _index.COLORS.neutral_500);
+var CardCategoryContainer = _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);
 
 exports.CardCategoryContainer = CardCategoryContainer;
 
@@ -60,25 +60,25 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardCategoryContainer, {
       extraTopMargin: Boolean(colorBandColor),
       bottomMargin: Boolean(categoryIcon || categoryLabel),
-      children: [categoryIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentS, {
-        textStyle: _index.ComponentTextStyle.Bold,
-        color: _index.COLORS.neutral_500,
+      children: [categoryIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
+        textStyle: _.ComponentTextStyle.Bold,
+        color: _.COLORS.neutral_500,
         children: categoryLabel
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXL, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXL, {
       className: "titleBlock",
-      textStyle: _index.ComponentTextStyle.Bold,
-      color: disabled ? _index.COLORS.neutral_500 : _index.COLORS.black,
+      textStyle: _.ComponentTextStyle.Bold,
+      color: disabled ? _.COLORS.neutral_500 : _.COLORS.black,
       children: title
-    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentS, {
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
       className: "descriptionBlock",
-      color: _index.COLORS.neutral_600,
+      color: _.COLORS.neutral_600,
       children: description
     }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTagsContainer, {
       children: tags.map(function (x, index) {
         var _x$variant;
 
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
           label: x.label,
           variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral'
         }, "".concat(x.label, "_").concat(index));
@@ -87,7 +87,7 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
       children: row2Tags.map(function (x, index) {
         var _x$variant2;
 
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
           label: x.label,
           variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral'
         }, "".concat(x.label, "_").concat(index));
@@ -108,7 +108,7 @@ CardMiddleSection.propTypes = {
   row2Tags: _propTypes.default.arrayOf(_propTypes.default.shape({
     label: _propTypes.default.string.isRequired
   })),
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool.isRequired
 };
 var _default = CardMiddleSection;
 exports.default = _default;

package/dist/Card/CardMiddleSection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["CardMiddleSectionContainer","styled","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","COLORS","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x","index","label","variant"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAkBO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV,sUAAhC;;;;AAkBA,IAAMC,aAAa,GAAGF,0BAAOC,GAAV,qMAMJ,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CANI,CAAnB;;;;AASA,IAAMC,iBAAiB,GAAGL,0BAAOC,GAAV,qLAAvB;;;;AAQA,IAAMK,qBAAqB,GAAGN,0BAAOC,GAAV,mQAQrBM,SAAOC,WARc,CAA3B;;;;AAcP,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5BC,cAQ4B,QAR5BA,cAQ4B;AAAA,MAP5BC,YAO4B,QAP5BA,YAO4B;AAAA,MAN5BC,aAM4B,QAN5BA,aAM4B;AAAA,MAL5BC,KAK4B,QAL5BA,KAK4B;AAAA,MAJ5BC,WAI4B,QAJ5BA,WAI4B;AAAA,MAH5BC,IAG4B,QAH5BA,IAG4B;AAAA,MAF5BC,QAE4B,QAF5BA,QAE4B;AAAA,MAD5BC,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,sBAAC,0BAAD;AAAA,eACGP,cAAc,iBAAI,qBAAC,aAAD;AAAe,MAAA,MAAM,EAAEA;AAAvB,MADrB,eAEE,sBAAC,qBAAD;AAAuB,MAAA,cAAc,EAAEQ,OAAO,CAACR,cAAD,CAA9C;AAAgE,MAAA,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAjB,CAArF;AAAA,iBACGD,YADH,eAEE,qBAAC,YAAD;AAAY,QAAA,SAAS,EAAEQ,qBAAmBC,IAA1C;AAAgD,QAAA,KAAK,EAAEb,SAAOC,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,qBAAC,aAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEO,qBAAmBC,IAAlE;AAAwE,MAAA,KAAK,EAAEH,QAAQ,GAAGV,SAAOC,WAAV,GAAwBD,SAAOc,KAAtH;AAAA,gBACGR;AADH,MARF,EAWGC,WAAW,iBACV,qBAAC,YAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEP,SAAOe,WAAvD;AAAA,gBACGR;AADH,MAZJ,EAgBGC,IAAI,iBACH,qBAAC,iBAAD;AAAA,gBACGA,IAAI,CAACQ,GAAL,CAAS,UAACC,CAAD,EAAIC,KAAJ;AAAA;;AAAA,4BACR,qBAAC,KAAD;AAAiC,UAAA,KAAK,EAAED,CAAC,CAACE,KAA1C;AAAiD,UAAA,OAAO,gBAAEF,CAAC,CAACG,OAAJ,mDAAe;AAAvE,qBAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADQ;AAAA,OAAT;AADH,MAjBJ,EAuBGT,QAAQ,iBACP,qBAAC,iBAAD;AAAA,gBACGA,QAAQ,CAACO,GAAT,CAAa,UAACC,CAAD,EAAIC,KAAJ;AAAA;;AAAA,4BACZ,qBAAC,KAAD;AAAiC,UAAA,KAAK,EAAED,CAAC,CAACE,KAA1C;AAAiD,UAAA,OAAO,iBAAEF,CAAC,CAACG,OAAJ,qDAAe;AAAvE,qBAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADY;AAAA,OAAb;AADH,MAxBJ;AAAA,IADF;AAiCD,CA3CD;;;AAhEEf,EAAAA,c;AACAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AAMAW,IAAAA,K;;AALAV,EAAAA,Q;AAKAU,IAAAA,K;;AAJAT,EAAAA,Q;;eAsGaR,iB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '..';\n\nexport interface CardMiddleSectionProps {\n  colorBandColor?: string;\n  categoryIcon?: React.ReactNode;\n  categoryLabel?: string;\n  title: string;\n  description?: string;\n  tags?: CardTag[];\n  row2Tags?: CardTag[];\n  disabled: boolean;\n}\n\nexport interface CardTag {\n  label: string;\n  variant?: TagVariants;\n}\n\nexport const CardMiddleSectionContainer = 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\nexport const CardColorBand = 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\nexport const CardTagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n`;\n\nexport const CardCategoryContainer = 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  row2Tags,\n  disabled,\n}: CardMiddleSectionProps) => {\n  return (\n    <CardMiddleSectionContainer>\n      {colorBandColor && <CardColorBand $color={colorBandColor} />}\n      <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n        {categoryIcon}\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n          {categoryLabel}\n        </ComponentS>\n      </CardCategoryContainer>\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        <CardTagsContainer>\n          {tags.map((x, index) => (\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n          ))}\n        </CardTagsContainer>\n      )}\n      {row2Tags && (\n        <CardTagsContainer>\n          {row2Tags.map((x, index) => (\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n          ))}\n        </CardTagsContainer>\n      )}\n    </CardMiddleSectionContainer>\n  );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.cjs"}