@laerdal/life-react-components 6.0.0-dev.7.full → 6.0.0

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CardBottomSectionProgressStyles = exports.CardBottomSectionNotesStyles = exports.CardBottomSectionNoteRightStyles = exports.CardBottomSectionNoteLeftStyles = exports.CardBottomSectionDivider = exports.CardBottomSectionContainer = exports.CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionAuthorStyles = void 0;
+exports.default = exports.VerticalCardBottomSectionProgressStyles = exports.VerticalCardBottomSectionNotesStyles = exports.VerticalCardBottomSectionNoteRightStyles = exports.VerticalCardBottomSectionNoteLeftStyles = exports.VerticalCardBottomSectionDivider = exports.VerticalCardBottomSectionContainer = exports.VerticalCardBottomSectionButtonRowContainerStyles = exports.VerticalCardBottomSectionAuthorStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,15 +13,15 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _index = require("../../index");
 var _Button = require("../../Button");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["buttonText"];
+const _excluded = ["buttonText", "onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-const CardBottomSectionProgressStyles = exports.CardBottomSectionProgressStyles = _styledComponents.default.div`
+const VerticalCardBottomSectionProgressStyles = exports.VerticalCardBottomSectionProgressStyles = _styledComponents.default.div`
   padding: 8px 0;
 `;
-const CardBottomSectionNotesStyles = exports.CardBottomSectionNotesStyles = _styledComponents.default.div`
+const VerticalCardBottomSectionNotesStyles = exports.VerticalCardBottomSectionNotesStyles = _styledComponents.default.div`
   height: 48px;
   position: relative;
   color: ${props => _index.COLORS.generateToken({
@@ -32,7 +32,7 @@ const CardBottomSectionNotesStyles = exports.CardBottomSectionNotesStyles = _sty
   flex-direction: row;
   align-items: center;
 `;
-const CardBottomSectionAuthorStyles = exports.CardBottomSectionAuthorStyles = _styledComponents.default.div`
+const VerticalCardBottomSectionAuthorStyles = exports.VerticalCardBottomSectionAuthorStyles = _styledComponents.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -59,7 +59,7 @@ const CardBottomSectionAuthorStyles = exports.CardBottomSectionAuthorStyles = _s
     
   ` : ''}
 `;
-const CardBottomSectionDivider = exports.CardBottomSectionDivider = _styledComponents.default.div`
+const VerticalCardBottomSectionDivider = exports.VerticalCardBottomSectionDivider = _styledComponents.default.div`
   border-top: 1px;
   border-top-color: ${props => _index.COLORS.generateToken({
   componentType: 'border',
@@ -68,7 +68,7 @@ const CardBottomSectionDivider = exports.CardBottomSectionDivider = _styledCompo
   border-top-style: solid;
   width: 100%;
 `;
-const CardBottomSectionNoteLeftStyles = exports.CardBottomSectionNoteLeftStyles = _styledComponents.default.div`
+const VerticalCardBottomSectionNoteLeftStyles = exports.VerticalCardBottomSectionNoteLeftStyles = _styledComponents.default.div`
   position: absolute;
   left: 0px;
   display: flex;
@@ -81,7 +81,7 @@ const CardBottomSectionNoteLeftStyles = exports.CardBottomSectionNoteLeftStyles
     flex-shrink: 0;
   }
 `;
-const CardBottomSectionNoteRightStyles = exports.CardBottomSectionNoteRightStyles = _styledComponents.default.div`
+const VerticalCardBottomSectionNoteRightStyles = exports.VerticalCardBottomSectionNoteRightStyles = _styledComponents.default.div`
   position: absolute;
   right: 0px;
   display: flex;
@@ -94,7 +94,7 @@ const CardBottomSectionNoteRightStyles = exports.CardBottomSectionNoteRightStyle
     flex-shrink: 0;
   }
 `;
-const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButtonRowContainerStyles = _styledComponents.default.div`
+const VerticalCardBottomSectionButtonRowContainerStyles = exports.VerticalCardBottomSectionButtonRowContainerStyles = _styledComponents.default.div`
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
@@ -110,10 +110,18 @@ const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButto
     margin: 8px 0px 0px 0px;
   }
 
+  .card-bottom-section-action-button {
+    z-index: 2000;
+  }
+
   button:not(:last-child) {
     margin: 8px 0px 0px 0px;
   }
 
+  .card-bottom-section-action-button {
+    z-index: 2000;
+  }
+
   svg {
     color: ${props => _index.COLORS.generateToken({
   componentType: 'icon',
@@ -121,7 +129,7 @@ const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButto
 }, props.theme)};
   }
 `;
-const CardBottomSectionContainer = exports.CardBottomSectionContainer = _styledComponents.default.div`
+const VerticalCardBottomSectionContainer = exports.VerticalCardBottomSectionContainer = _styledComponents.default.div`
   padding: 0px 16px 8px 16px;
   width: calc(100% - 32px);
 `;
@@ -134,7 +142,7 @@ const RightItemContainer = _styledComponents.default.div`
   justify-content: flex-end;
   color: ${props => _index.COLORS.getColor('neutral_600', props.theme)};
 `;
-const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const VerticalCardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     progressLevel,
     progressMax,
@@ -153,26 +161,33 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const theme = (0, _styledComponents.useTheme)();
   const length = actions?.length || 0;
   React.useEffect(() => {
-    setElRefs(Array(length || 0).fill(null).map(() => /*#__PURE__*/React.createRef()));
-  }, [length]);
+    setElRefs(Array((length || 0) + (leftButton ? 1 : 0)).fill(null).map(() => /*#__PURE__*/React.createRef()));
+  }, [length, leftButton]);
   React.useImperativeHandle(ref, () => elRefs, [elRefs]);
   const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;
   const renderLeftButton = () => {
     if (leftButton) {
       const {
-          buttonText
+          buttonText,
+          onClick
         } = leftButton,
         rest = (0, _objectWithoutProperties2.default)(leftButton, _excluded);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.TextButton, _objectSpread(_objectSpread({
+        className: "card-bottom-section-action-button",
+        ref: elRefs[0],
         size: leftButton.size && [_index.Size.XSmall, _index.Size.XSmall, _index.Size.XXSmall].includes(leftButton.size) ? _index.Size.Small : leftButton.size == _index.Size.Large ? _index.Size.Large : _index.Size.Medium
       }, rest), {}, {
+        onClick: e => {
+          e.stopPropagation();
+          onClick && onClick(e);
+        },
         children: buttonText
       }));
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardBottomSectionContainer, {
     "data-testid": 'card-bottomSection',
-    children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomSectionProgressStyles, {
+    children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardBottomSectionProgressStyles, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LinearProgress, {
         size: _index.Size.Small,
         type: progressType,
@@ -180,8 +195,8 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         value: progressLevel,
         max: progressMax ?? progressLevel
       })
-    }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionNotesStyles, {
-      children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionNoteLeftStyles, {
+    }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardBottomSectionNotesStyles, {
+      children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardBottomSectionNoteLeftStyles, {
         children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
           color: _index.COLORS.generateToken({
             componentType: 'icon',
@@ -190,7 +205,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           textStyle: _index.ComponentTextStyle.Bold,
           children: noteLeft
         })]
-      }), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionNoteRightStyles, {
+      }), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardBottomSectionNoteRightStyles, {
         children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
           color: _index.COLORS.generateToken({
             componentType: 'icon',
@@ -200,20 +215,22 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           children: noteRight
         })]
       })]
-    }), (authorName || logo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionAuthorStyles, {
+    }), (authorName || logo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardBottomSectionAuthorStyles, {
       $disabled: disabled,
       "data-testid": 'card-bottomSection-author',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
         children: authorName
       }), logo]
-    }), (actions || leftButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionButtonRowContainerStyles, {
+    }), (actions || leftButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardBottomSectionButtonRowContainerStyles, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LeftItemContainer, {
         children: leftButton && renderLeftButton()
       }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(RightItemContainer, {
         children: actions.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          ref: elRefs[index],
+          ref: elRefs[index + (leftButton ? 1 : 0)],
+          className: "card-bottom-section-action-button",
+          "z-index": 2000,
           disabled: disabled,
-          variant: "secondary",
+          variant: x.variant ?? "secondary",
           shape: "circular",
           action: e => {
             x.onClick();
@@ -224,7 +241,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })]
   });
 });
-CardBottomSection.propTypes = {
+VerticalCardBottomSection.propTypes = {
   progressLevel: _propTypes.default.number,
   progressMax: _propTypes.default.number,
   noteLeft: _propTypes.default.string,
@@ -233,11 +250,12 @@ CardBottomSection.propTypes = {
   noteRightIcon: _propTypes.default.node,
   authorName: _propTypes.default.string,
   actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    variant: _propTypes.default.oneOf(['primary', 'secondary']),
     icon: _propTypes.default.node.isRequired,
     onClick: _propTypes.default.func.isRequired
   })),
   logo: _propTypes.default.node,
   disabled: _propTypes.default.bool
 };
-var _default = exports.default = CardBottomSection;
-//# sourceMappingURL=CardBottomSection.cjs.map
+var _default = exports.default = VerticalCardBottomSection;
+//# sourceMappingURL=VerticalCardBottomSection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalCardBottomSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_Button","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","VerticalCardBottomSectionProgressStyles","exports","styled","div","VerticalCardBottomSectionNotesStyles","props","COLORS","generateToken","componentType","defaultVariant","theme","VerticalCardBottomSectionAuthorStyles","$disabled","state","VerticalCardBottomSectionDivider","VerticalCardBottomSectionNoteLeftStyles","VerticalCardBottomSectionNoteRightStyles","VerticalCardBottomSectionButtonRowContainerStyles","VerticalCardBottomSectionContainer","LeftItemContainer","RightItemContainer","getColor","VerticalCardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","useTheme","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","onClick","rest","_objectWithoutProperties2","jsx","TextButton","className","size","Size","XSmall","XXSmall","includes","Small","Large","Medium","stopPropagation","children","jsxs","LinearProgress","type","variant","LinearProgressVariant","Normal","value","max","ComponentXXS","color","textStyle","ComponentTextStyle","Bold","x","index","IconButton","shape","action","icon","propTypes","_propTypes","number","string","node","arrayOf","oneOf","isRequired","func","bool","_default"],"sources":["../../../src/Card/VerticalCard/VerticalCardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size,\r\n} from '../../index';\r\nimport { TextButton, TextButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface VerticalCardActionItem {\r\n  /** Optional. Variant of the action button, defaults to 'secondary'. */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Icon to be used in the icon button. */\r\n  icon: React.ReactNode;\r\n  /** Click handler for the action button. */\r\n  onClick: () => void;\r\n}\r\n\r\nexport type VerticalCardStandardButton = Pick<TextButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\r\n  buttonText: string;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n}\r\n\r\nexport interface VerticalCardBottomSectionProps {\r\n  /** Optional. Current progress level shown in the progress bar. */\r\n  progressLevel?: number;\r\n  /** Optional. Maximum level of progress in the progress bar. */\r\n  progressMax?: number;\r\n  /** Optional. Type of the progress bar. */\r\n  progressType?: LinearProgressType;\r\n\r\n  /** Optional. Note text shown on the left side of the section. */\r\n  noteLeft?: string;\r\n  /** Optional. Note icon shown on the left side of the section. */\r\n  noteLeftIcon?: React.ReactNode;\r\n  /** Optional. Note text shown on the right side of the section. */\r\n  noteRight?: string;\r\n  /** Optional. Note icon shown on the right side of the section. */\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */\r\n  leftButton?: VerticalCardStandardButton;\r\n\r\n  /** Author name shown at the bottom-left part of the section.  */\r\n  authorName?: string;\r\n  /** Array of actions shown on the bottom-right corner of the section. */\r\n  actions?: VerticalCardActionItem[];\r\n  /** Logo shown on the right side of the section, in front of AuthorName. */\r\n  logo?: React.ReactNode;\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const VerticalCardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const VerticalCardBottomSectionNotesStyles = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${props => COLORS.generateToken({ componentType:'text', defaultVariant:'subtle' }, props.theme)};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const VerticalCardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.$disabled ? `\r\n    color: ${COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const VerticalCardBottomSectionDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const VerticalCardBottomSectionNoteLeftStyles = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const VerticalCardBottomSectionNoteRightStyles = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const VerticalCardBottomSectionButtonRowContainerStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n  border-top-style: solid;\r\n\r\n  button:last-child {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  .card-bottom-section-action-button {\r\n    z-index: 2000;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  .card-bottom-section-action-button {\r\n    z-index: 2000;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.generateToken({componentType:'icon', defaultVariant:'subtle' }, props.theme)};\r\n  }\r\n`;\r\n\r\nexport const VerticalCardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nconst VerticalCardBottomSection = React.forwardRef(({\r\n  progressLevel,\r\n  progressMax,\r\n  progressType = LinearProgressType.Line,\r\n  noteLeft,\r\n  noteLeftIcon,\r\n  noteRight,\r\n  noteRightIcon,\r\n  leftButton,\r\n  authorName,\r\n  logo,\r\n  actions,\r\n  disabled\r\n}: VerticalCardBottomSectionProps,\r\n  ref: React.Ref<React.RefObject<HTMLButtonElement | null>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const theme = useTheme();\r\n  const length = actions?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array((length || 0) + (leftButton ? 1 : 0)).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length, leftButton]);\r\n\r\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;\r\n\r\n  const renderLeftButton = () => {\r\n    if (leftButton){\r\n      const {buttonText, onClick, ...rest} = leftButton;\r\n      return (<TextButton className=\"card-bottom-section-action-button\"\r\n        ref={elRefs[0]}\r\n        size={ leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small: \r\n          leftButton.size == Size.Large ? Size.Large : Size.Medium}\r\n        {...rest}\r\n        onClick={(e) => {\r\n          e.stopPropagation();\r\n          onClick && onClick(e);\r\n        }}>\r\n        {buttonText}\r\n      </TextButton>)\r\n    }\r\n}\r\n\r\n  return (\r\n    <VerticalCardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <VerticalCardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <VerticalCardBottomSectionProgressStyles>\r\n        <LinearProgress size={Size.Small}\r\n          type={progressType}\r\n          variant={LinearProgressVariant.Normal}\r\n          value={progressLevel}\r\n          max={progressMax ?? progressLevel}/>\r\n      </VerticalCardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <VerticalCardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <VerticalCardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </VerticalCardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <VerticalCardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </VerticalCardBottomSectionNoteRightStyles>\r\n        )}\r\n      </VerticalCardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <VerticalCardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </VerticalCardBottomSectionAuthorStyles>}\r\n\r\n      {(actions || leftButton) && <VerticalCardBottomSectionButtonRowContainerStyles>\r\n        <LeftItemContainer>\r\n          {leftButton && renderLeftButton()}\r\n      </LeftItemContainer>\r\n\r\n        { actions && <RightItemContainer>{actions.map((x, index) => (\r\n            <IconButton ref={elRefs[index + (leftButton ? 1 : 0)]}\r\n              className=\"card-bottom-section-action-button\"\r\n              key={index}\r\n              z-index={2000}\r\n              disabled={disabled}\r\n              variant={x.variant ?? \"secondary\"}\r\n              shape=\"circular\"\r\n              action={(e) => {\r\n                x.onClick();\r\n              }}>\r\n              {x.icon}\r\n            </IconButton>\r\n          ))}\r\n          </RightItemContainer>\r\n        }\r\n      </VerticalCardBottomSectionButtonRowContainerStyles>}\r\n    </VerticalCardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default VerticalCardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/VerticalCardBottomSection.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { LinearProgressType, Size } from '../../index';
+import { TextButtonProps } from '../../Button';
+export interface VerticalCardActionItem {
+    /** Optional. Variant of the action button, defaults to 'secondary'. */
+    variant?: 'primary' | 'secondary';
+    /** Icon to be used in the icon button. */
+    icon: React.ReactNode;
+    /** Click handler for the action button. */
+    onClick: () => void;
+}
+export type VerticalCardStandardButton = Pick<TextButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
+    buttonText: string;
+    size?: Size.Small | Size.Medium | Size.Large;
+};
+export interface VerticalCardBottomSectionProps {
+    /** Optional. Current progress level shown in the progress bar. */
+    progressLevel?: number;
+    /** Optional. Maximum level of progress in the progress bar. */
+    progressMax?: number;
+    /** Optional. Type of the progress bar. */
+    progressType?: LinearProgressType;
+    /** Optional. Note text shown on the left side of the section. */
+    noteLeft?: string;
+    /** Optional. Note icon shown on the left side of the section. */
+    noteLeftIcon?: React.ReactNode;
+    /** Optional. Note text shown on the right side of the section. */
+    noteRight?: string;
+    /** Optional. Note icon shown on the right side of the section. */
+    noteRightIcon?: React.ReactNode;
+    /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */
+    leftButton?: VerticalCardStandardButton;
+    /** Author name shown at the bottom-left part of the section.  */
+    authorName?: string;
+    /** Array of actions shown on the bottom-right corner of the section. */
+    actions?: VerticalCardActionItem[];
+    /** Logo shown on the right side of the section, in front of AuthorName. */
+    logo?: React.ReactNode;
+    /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */
+    disabled?: boolean;
+}
+export declare const VerticalCardBottomSectionProgressStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalCardBottomSectionNotesStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalCardBottomSectionAuthorStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $disabled?: boolean;
+}>> & string;
+export declare const VerticalCardBottomSectionDivider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalCardBottomSectionNoteLeftStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalCardBottomSectionNoteRightStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalCardBottomSectionButtonRowContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalCardBottomSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const VerticalCardBottomSection: React.ForwardRefExoticComponent<VerticalCardBottomSectionProps & React.RefAttributes<React.RefObject<HTMLButtonElement | null>[]>>;
+export default VerticalCardBottomSection;

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

@@ -1,18 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
-const _excluded = ["buttonText"];
+const _excluded = ["buttonText", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '../../index';
-import { Button, IconButton } from '../../Button';
+import { TextButton, IconButton } from '../../Button';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CardBottomSectionProgressStyles = styled.div`
+export const VerticalCardBottomSectionProgressStyles = styled.div`
   padding: 8px 0;
 `;
-export const CardBottomSectionNotesStyles = styled.div`
+export const VerticalCardBottomSectionNotesStyles = styled.div`
   height: 48px;
   position: relative;
   color: ${props => COLORS.generateToken({
@@ -23,7 +23,7 @@ export const CardBottomSectionNotesStyles = styled.div`
   flex-direction: row;
   align-items: center;
 `;
-export const CardBottomSectionAuthorStyles = styled.div`
+export const VerticalCardBottomSectionAuthorStyles = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -50,7 +50,7 @@ export const CardBottomSectionAuthorStyles = styled.div`
     
   ` : ''}
 `;
-export const CardBottomSectionDivider = styled.div`
+export const VerticalCardBottomSectionDivider = styled.div`
   border-top: 1px;
   border-top-color: ${props => COLORS.generateToken({
   componentType: 'border',
@@ -59,7 +59,7 @@ export const CardBottomSectionDivider = styled.div`
   border-top-style: solid;
   width: 100%;
 `;
-export const CardBottomSectionNoteLeftStyles = styled.div`
+export const VerticalCardBottomSectionNoteLeftStyles = styled.div`
   position: absolute;
   left: 0px;
   display: flex;
@@ -72,7 +72,7 @@ export const CardBottomSectionNoteLeftStyles = styled.div`
     flex-shrink: 0;
   }
 `;
-export const CardBottomSectionNoteRightStyles = styled.div`
+export const VerticalCardBottomSectionNoteRightStyles = styled.div`
   position: absolute;
   right: 0px;
   display: flex;
@@ -85,7 +85,7 @@ export const CardBottomSectionNoteRightStyles = styled.div`
     flex-shrink: 0;
   }
 `;
-export const CardBottomSectionButtonRowContainerStyles = styled.div`
+export const VerticalCardBottomSectionButtonRowContainerStyles = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
@@ -101,10 +101,18 @@ export const CardBottomSectionButtonRowContainerStyles = styled.div`
     margin: 8px 0px 0px 0px;
   }
 
+  .card-bottom-section-action-button {
+    z-index: 2000;
+  }
+
   button:not(:last-child) {
     margin: 8px 0px 0px 0px;
   }
 
+  .card-bottom-section-action-button {
+    z-index: 2000;
+  }
+
   svg {
     color: ${props => COLORS.generateToken({
   componentType: 'icon',
@@ -112,7 +120,7 @@ export const CardBottomSectionButtonRowContainerStyles = styled.div`
 }, props.theme)};
   }
 `;
-export const CardBottomSectionContainer = styled.div`
+export const VerticalCardBottomSectionContainer = styled.div`
   padding: 0px 16px 8px 16px;
   width: calc(100% - 32px);
 `;
@@ -125,7 +133,7 @@ const RightItemContainer = styled.div`
   justify-content: flex-end;
   color: ${props => COLORS.getColor('neutral_600', props.theme)};
 `;
-const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const VerticalCardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     progressLevel,
     progressMax,
@@ -144,26 +152,33 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const theme = useTheme();
   const length = actions?.length || 0;
   React.useEffect(() => {
-    setElRefs(Array(length || 0).fill(null).map(() => /*#__PURE__*/React.createRef()));
-  }, [length]);
+    setElRefs(Array((length || 0) + (leftButton ? 1 : 0)).fill(null).map(() => /*#__PURE__*/React.createRef()));
+  }, [length, leftButton]);
   React.useImperativeHandle(ref, () => elRefs, [elRefs]);
   const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;
   const renderLeftButton = () => {
     if (leftButton) {
       const {
-          buttonText
+          buttonText,
+          onClick
         } = leftButton,
         rest = _objectWithoutProperties(leftButton, _excluded);
-      return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+      return /*#__PURE__*/_jsx(TextButton, _objectSpread(_objectSpread({
+        className: "card-bottom-section-action-button",
+        ref: elRefs[0],
         size: leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small : leftButton.size == Size.Large ? Size.Large : Size.Medium
       }, rest), {}, {
+        onClick: e => {
+          e.stopPropagation();
+          onClick && onClick(e);
+        },
         children: buttonText
       }));
     }
   };
-  return /*#__PURE__*/_jsxs(CardBottomSectionContainer, {
+  return /*#__PURE__*/_jsxs(VerticalCardBottomSectionContainer, {
     "data-testid": 'card-bottomSection',
-    children: [haveAtLeastSomething && /*#__PURE__*/_jsx(CardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(CardBottomSectionProgressStyles, {
+    children: [haveAtLeastSomething && /*#__PURE__*/_jsx(VerticalCardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(VerticalCardBottomSectionProgressStyles, {
       children: /*#__PURE__*/_jsx(LinearProgress, {
         size: Size.Small,
         type: progressType,
@@ -171,8 +186,8 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         value: progressLevel,
         max: progressMax ?? progressLevel
       })
-    }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNotesStyles, {
-      children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNoteLeftStyles, {
+    }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(VerticalCardBottomSectionNotesStyles, {
+      children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(VerticalCardBottomSectionNoteLeftStyles, {
         children: [noteLeftIcon, /*#__PURE__*/_jsx(ComponentXXS, {
           color: COLORS.generateToken({
             componentType: 'icon',
@@ -181,7 +196,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           textStyle: ComponentTextStyle.Bold,
           children: noteLeft
         })]
-      }), (noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNoteRightStyles, {
+      }), (noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(VerticalCardBottomSectionNoteRightStyles, {
         children: [noteRightIcon, /*#__PURE__*/_jsx(ComponentXXS, {
           color: COLORS.generateToken({
             componentType: 'icon',
@@ -191,20 +206,22 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           children: noteRight
         })]
       })]
-    }), (authorName || logo) && /*#__PURE__*/_jsxs(CardBottomSectionAuthorStyles, {
+    }), (authorName || logo) && /*#__PURE__*/_jsxs(VerticalCardBottomSectionAuthorStyles, {
       $disabled: disabled,
       "data-testid": 'card-bottomSection-author',
       children: [/*#__PURE__*/_jsx(ComponentXXS, {
         children: authorName
       }), logo]
-    }), (actions || leftButton) && /*#__PURE__*/_jsxs(CardBottomSectionButtonRowContainerStyles, {
+    }), (actions || leftButton) && /*#__PURE__*/_jsxs(VerticalCardBottomSectionButtonRowContainerStyles, {
       children: [/*#__PURE__*/_jsx(LeftItemContainer, {
         children: leftButton && renderLeftButton()
       }), actions && /*#__PURE__*/_jsx(RightItemContainer, {
         children: actions.map((x, index) => /*#__PURE__*/_jsx(IconButton, {
-          ref: elRefs[index],
+          ref: elRefs[index + (leftButton ? 1 : 0)],
+          className: "card-bottom-section-action-button",
+          "z-index": 2000,
           disabled: disabled,
-          variant: "secondary",
+          variant: x.variant ?? "secondary",
           shape: "circular",
           action: e => {
             x.onClick();
@@ -215,7 +232,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })]
   });
 });
-CardBottomSection.propTypes = {
+VerticalCardBottomSection.propTypes = {
   progressLevel: _pt.number,
   progressMax: _pt.number,
   noteLeft: _pt.string,
@@ -224,11 +241,12 @@ CardBottomSection.propTypes = {
   noteRightIcon: _pt.node,
   authorName: _pt.string,
   actions: _pt.arrayOf(_pt.shape({
+    variant: _pt.oneOf(['primary', 'secondary']),
     icon: _pt.node.isRequired,
     onClick: _pt.func.isRequired
   })),
   logo: _pt.node,
   disabled: _pt.bool
 };
-export default CardBottomSection;
-//# sourceMappingURL=CardBottomSection.js.map
+export default VerticalCardBottomSection;
+//# sourceMappingURL=VerticalCardBottomSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalCardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","TextButton","IconButton","jsx","_jsx","jsxs","_jsxs","VerticalCardBottomSectionProgressStyles","div","VerticalCardBottomSectionNotesStyles","props","generateToken","componentType","defaultVariant","theme","VerticalCardBottomSectionAuthorStyles","$disabled","state","VerticalCardBottomSectionDivider","VerticalCardBottomSectionNoteLeftStyles","VerticalCardBottomSectionNoteRightStyles","VerticalCardBottomSectionButtonRowContainerStyles","VerticalCardBottomSectionContainer","LeftItemContainer","RightItemContainer","getColor","VerticalCardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","onClick","rest","_objectWithoutProperties","_excluded","_objectSpread","className","size","XSmall","XXSmall","includes","Small","Large","Medium","e","stopPropagation","children","type","variant","Normal","value","max","color","textStyle","Bold","x","index","shape","action","icon","propTypes","_pt","number","string","node","arrayOf","oneOf","isRequired","func","bool"],"sources":["../../../src/Card/VerticalCard/VerticalCardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size,\r\n} from '../../index';\r\nimport { TextButton, TextButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface VerticalCardActionItem {\r\n  /** Optional. Variant of the action button, defaults to 'secondary'. */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Icon to be used in the icon button. */\r\n  icon: React.ReactNode;\r\n  /** Click handler for the action button. */\r\n  onClick: () => void;\r\n}\r\n\r\nexport type VerticalCardStandardButton = Pick<TextButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\r\n  buttonText: string;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n}\r\n\r\nexport interface VerticalCardBottomSectionProps {\r\n  /** Optional. Current progress level shown in the progress bar. */\r\n  progressLevel?: number;\r\n  /** Optional. Maximum level of progress in the progress bar. */\r\n  progressMax?: number;\r\n  /** Optional. Type of the progress bar. */\r\n  progressType?: LinearProgressType;\r\n\r\n  /** Optional. Note text shown on the left side of the section. */\r\n  noteLeft?: string;\r\n  /** Optional. Note icon shown on the left side of the section. */\r\n  noteLeftIcon?: React.ReactNode;\r\n  /** Optional. Note text shown on the right side of the section. */\r\n  noteRight?: string;\r\n  /** Optional. Note icon shown on the right side of the section. */\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */\r\n  leftButton?: VerticalCardStandardButton;\r\n\r\n  /** Author name shown at the bottom-left part of the section.  */\r\n  authorName?: string;\r\n  /** Array of actions shown on the bottom-right corner of the section. */\r\n  actions?: VerticalCardActionItem[];\r\n  /** Logo shown on the right side of the section, in front of AuthorName. */\r\n  logo?: React.ReactNode;\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const VerticalCardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const VerticalCardBottomSectionNotesStyles = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${props => COLORS.generateToken({ componentType:'text', defaultVariant:'subtle' }, props.theme)};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const VerticalCardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.$disabled ? `\r\n    color: ${COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const VerticalCardBottomSectionDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const VerticalCardBottomSectionNoteLeftStyles = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const VerticalCardBottomSectionNoteRightStyles = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const VerticalCardBottomSectionButtonRowContainerStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n  border-top-style: solid;\r\n\r\n  button:last-child {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  .card-bottom-section-action-button {\r\n    z-index: 2000;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  .card-bottom-section-action-button {\r\n    z-index: 2000;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.generateToken({componentType:'icon', defaultVariant:'subtle' }, props.theme)};\r\n  }\r\n`;\r\n\r\nexport const VerticalCardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nconst VerticalCardBottomSection = React.forwardRef(({\r\n  progressLevel,\r\n  progressMax,\r\n  progressType = LinearProgressType.Line,\r\n  noteLeft,\r\n  noteLeftIcon,\r\n  noteRight,\r\n  noteRightIcon,\r\n  leftButton,\r\n  authorName,\r\n  logo,\r\n  actions,\r\n  disabled\r\n}: VerticalCardBottomSectionProps,\r\n  ref: React.Ref<React.RefObject<HTMLButtonElement | null>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const theme = useTheme();\r\n  const length = actions?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array((length || 0) + (leftButton ? 1 : 0)).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length, leftButton]);\r\n\r\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;\r\n\r\n  const renderLeftButton = () => {\r\n    if (leftButton){\r\n      const {buttonText, onClick, ...rest} = leftButton;\r\n      return (<TextButton className=\"card-bottom-section-action-button\"\r\n        ref={elRefs[0]}\r\n        size={ leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small: \r\n          leftButton.size == Size.Large ? Size.Large : Size.Medium}\r\n        {...rest}\r\n        onClick={(e) => {\r\n          e.stopPropagation();\r\n          onClick && onClick(e);\r\n        }}>\r\n        {buttonText}\r\n      </TextButton>)\r\n    }\r\n}\r\n\r\n  return (\r\n    <VerticalCardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <VerticalCardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <VerticalCardBottomSectionProgressStyles>\r\n        <LinearProgress size={Size.Small}\r\n          type={progressType}\r\n          variant={LinearProgressVariant.Normal}\r\n          value={progressLevel}\r\n          max={progressMax ?? progressLevel}/>\r\n      </VerticalCardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <VerticalCardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <VerticalCardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </VerticalCardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <VerticalCardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </VerticalCardBottomSectionNoteRightStyles>\r\n        )}\r\n      </VerticalCardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <VerticalCardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </VerticalCardBottomSectionAuthorStyles>}\r\n\r\n      {(actions || leftButton) && <VerticalCardBottomSectionButtonRowContainerStyles>\r\n        <LeftItemContainer>\r\n          {leftButton && renderLeftButton()}\r\n      </LeftItemContainer>\r\n\r\n        { actions && <RightItemContainer>{actions.map((x, index) => (\r\n            <IconButton ref={elRefs[index + (leftButton ? 1 : 0)]}\r\n              className=\"card-bottom-section-action-button\"\r\n              key={index}\r\n              z-index={2000}\r\n              disabled={disabled}\r\n              variant={x.variant ?? \"secondary\"}\r\n              shape=\"circular\"\r\n              action={(e) => {\r\n                x.onClick();\r\n              }}>\r\n              {x.icon}\r\n            </IconButton>\r\n          ))}\r\n          </RightItemContainer>\r\n        }\r\n      </VerticalCardBottomSectionButtonRowContainerStyles>}\r\n    </VerticalCardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default VerticalCardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}