@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","jsx","_jsx","jsxs","_jsxs","CardTopLevelContainerStyles","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","BOXSHADOW_L1","CardContainerStyles","_templateObject2","BOXSHADOW_L3","BOXSHADOW_L2","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","cls","concat","_objectSpread","ref","tabIndex","onMouseDown","onKeyDown","a","key","onClick","e","children","style","instance","propTypes","_pt","func","bool","oneOfType","number","string","oneOf"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\r\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\r\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const CardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  min-width: 240px;\r\n  overflow: hidden;\r\n\r\n  border-radius: 8px;\r\n\r\n  background-clip: padding-box;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .elevated & {\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n  }\r\n\r\n  .outline & {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const CardContainerStyles = styled.div`\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n\r\n    &.outline:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    ${CardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. */\r\n  onCardClicked?: () => void;\r\n  /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n  disabled?: boolean;\r\n  /** Maximum width of the card. */\r\n  maxWidth?: number | string;\r\n  /** Properties of Card top section. */\r\n  topSectionProps?: CardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: CardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: CardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst Card: React.FunctionComponent<CardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: CardProps) => {\r\n\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\r\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  return (\r\n    <CardContainerStyles ref={containerRef}\r\n             className={cls}\r\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n             onMouseDown={defaultOnMouseDownHandler}\r\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\r\n             data-testid={'card-wrapper'}\r\n             {...rest}>\r\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {\r\n          topSectionProps &&\r\n          <CardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Card.js","names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","jsx","_jsx","jsxs","_jsxs","CardTopLevelContainerStyles","div","props","getColor","theme","BOXSHADOW_L1","CardContainerStyles","BOXSHADOW_L3","BOXSHADOW_L2","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","cls","_objectSpread","ref","tabIndex","onMouseDown","onKeyDown","a","key","onClick","e","children","style","instance","propTypes","_pt","func","bool","oneOfType","number","string","oneOf"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\r\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\r\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const CardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  min-width: 240px;\r\n  overflow: hidden;\r\n\r\n  border-radius: 8px;\r\n\r\n  background-clip: padding-box;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .elevated & {\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n  }\r\n\r\n  .outline & {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const CardContainerStyles = styled.div`\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n\r\n    &.outline:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    ${CardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. */\r\n  onCardClicked?: () => void;\r\n  /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n  disabled?: boolean;\r\n  /** Maximum width of the card. */\r\n  maxWidth?: number | string;\r\n  /** Properties of Card top section. */\r\n  topSectionProps?: CardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: CardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: CardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst Card: React.FunctionComponent<CardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: CardProps) => {\r\n\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  return (\r\n    <CardContainerStyles ref={containerRef}\r\n             className={cls}\r\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n             onMouseDown={defaultOnMouseDownHandler}\r\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\r\n             data-testid={'card-wrapper'}\r\n             {...rest}>\r\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {\r\n          topSectionProps &&\r\n          <CardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <CardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/CardBottomSection.cjs

@@ -5,24 +5,106 @@ 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;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _index = require("../../index");
 var _Button = require("../../Button");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const CardBottomSectionProgressStyles = exports.CardBottomSectionProgressStyles = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 0;\n"])));
-const CardBottomSectionNotesStyles = exports.CardBottomSectionNotesStyles = _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"])), props => _index.COLORS.getColor('neutral_500', props.theme));
-const CardBottomSectionAuthorStyles = exports.CardBottomSectionAuthorStyles = _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"])), props => props.$disabled ? "\n    color: ".concat(_index.COLORS.getColor('neutral_300', props.theme), ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '');
-const CardBottomSectionDivider = exports.CardBottomSectionDivider = _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"])), props => _index.COLORS.getColor('neutral_100', props.theme));
-const CardBottomSectionNoteLeftStyles = exports.CardBottomSectionNoteLeftStyles = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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"])));
-const CardBottomSectionNoteRightStyles = exports.CardBottomSectionNoteRightStyles = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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"])));
-const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButtonRowContainerStyles = _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"])), props => _index.COLORS.getColor('neutral_100', props.theme), props => _index.COLORS.getColor('neutral_600', props.theme));
-const CardBottomSectionContainer = exports.CardBottomSectionContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
+const CardBottomSectionProgressStyles = exports.CardBottomSectionProgressStyles = _styledComponents.default.div`
+  padding: 8px 0;
+`;
+const CardBottomSectionNotesStyles = exports.CardBottomSectionNotesStyles = _styledComponents.default.div`
+  height: 48px;
+  position: relative;
+  color: ${props => _index.COLORS.getColor('neutral_500', props.theme)};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const CardBottomSectionAuthorStyles = exports.CardBottomSectionAuthorStyles = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 48px;
+
+  div:first-child {
+    flex-grow: 2;
+  }
+
+  svg, img {
+    width: 80px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  ${props => props.$disabled ? `
+    color: ${_index.COLORS.getColor('neutral_300', props.theme)};
+    svg, img {
+      filter: grayscale(100%);
+    }
+    
+  ` : ''}
+`;
+const CardBottomSectionDivider = exports.CardBottomSectionDivider = _styledComponents.default.div`
+  border-top: 1px;
+  border-top-color: ${props => _index.COLORS.getColor('neutral_100', props.theme)};
+  border-top-style: solid;
+  width: 100%;
+`;
+const CardBottomSectionNoteLeftStyles = exports.CardBottomSectionNoteLeftStyles = _styledComponents.default.div`
+  position: absolute;
+  left: 0px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  svg {
+    margin-right: 4px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+`;
+const CardBottomSectionNoteRightStyles = exports.CardBottomSectionNoteRightStyles = _styledComponents.default.div`
+  position: absolute;
+  right: 0px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  svg {
+    margin-right: 4px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+`;
+const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButtonRowContainerStyles = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  border-top: 1px;
+  border-top-color: ${props => _index.COLORS.getColor('neutral_100', props.theme)};
+  border-top-style: solid;
+
+  button:last-child {
+    margin: 8px 0px 0px 0px;
+  }
+
+  button:not(:last-child) {
+    margin: 8px 0px 0px 0px;
+  }
+
+  svg {
+    color: ${props => _index.COLORS.getColor('neutral_600', props.theme)};
+  }
+`;
+const CardBottomSectionContainer = exports.CardBottomSectionContainer = _styledComponents.default.div`
+  padding: 0px 16px 8px 16px;
+  width: calc(100% - 32px);
+`;
 const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     progressLevel,
@@ -39,7 +121,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref;
   const [elRefs, setElRefs] = React.useState([]);
   const theme = (0, _styledComponents.useTheme)();
-  const length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
+  const length = actions?.length || 0;
   React.useEffect(() => {
     setElRefs(Array(length || 0).fill(null).map(() => /*#__PURE__*/React.createRef()));
   }, [length]);
@@ -53,7 +135,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         type: progressType,
         variant: _index.LinearProgressVariant.Normal,
         value: progressLevel,
-        max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
+        max: progressMax ?? progressLevel
       })
     }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionNotesStyles, {
       children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionNoteLeftStyles, {

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

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

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

@@ -1,42 +1,42 @@
-import * as React from 'react';
-import { LinearProgressType } from '../../index';
-export interface ActionItem {
-    icon: React.ReactNode;
-    onClick: () => void;
-}
-export interface CardBottomSectionProps {
-    /** 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;
-    /** 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?: ActionItem[];
-    /** 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 CardBottomSectionProgressStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardBottomSectionNotesStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardBottomSectionAuthorStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $disabled?: boolean | undefined;
-}>> & string;
-export declare const CardBottomSectionDivider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardBottomSectionNoteLeftStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardBottomSectionNoteRightStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardBottomSectionButtonRowContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardBottomSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const CardBottomSection: React.ForwardRefExoticComponent<CardBottomSectionProps & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
-export default CardBottomSection;
+import * as React from 'react';
+import { LinearProgressType } from '../../index';
+export interface ActionItem {
+    icon: React.ReactNode;
+    onClick: () => void;
+}
+export interface CardBottomSectionProps {
+    /** 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;
+    /** 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?: ActionItem[];
+    /** 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 CardBottomSectionProgressStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardBottomSectionNotesStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardBottomSectionAuthorStyles: 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 CardBottomSectionDivider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardBottomSectionNoteLeftStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardBottomSectionNoteRightStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardBottomSectionButtonRowContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardBottomSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const CardBottomSection: React.ForwardRefExoticComponent<CardBottomSectionProps & React.RefAttributes<React.RefObject<HTMLButtonElement | null>[]>>;
+export default CardBottomSection;

package/dist/Card/VerticalCard/CardBottomSection.js

@@ -1,19 +1,101 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import * as React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '../../index';
 import { IconButton } from '../../Button';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CardBottomSectionProgressStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 0;\n"])));
-export const CardBottomSectionNotesStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), props => COLORS.getColor('neutral_500', props.theme));
-export const CardBottomSectionAuthorStyles = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ", "\n"])), props => props.$disabled ? "\n    color: ".concat(COLORS.getColor('neutral_300', props.theme), ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '');
-export const CardBottomSectionDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), props => COLORS.getColor('neutral_100', props.theme));
-export const CardBottomSectionNoteLeftStyles = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export const CardBottomSectionNoteRightStyles = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export const CardBottomSectionButtonRowContainerStyles = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_600', props.theme));
-export const CardBottomSectionContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
+export const CardBottomSectionProgressStyles = styled.div`
+  padding: 8px 0;
+`;
+export const CardBottomSectionNotesStyles = styled.div`
+  height: 48px;
+  position: relative;
+  color: ${props => COLORS.getColor('neutral_500', props.theme)};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+export const CardBottomSectionAuthorStyles = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 48px;
+
+  div:first-child {
+    flex-grow: 2;
+  }
+
+  svg, img {
+    width: 80px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  ${props => props.$disabled ? `
+    color: ${COLORS.getColor('neutral_300', props.theme)};
+    svg, img {
+      filter: grayscale(100%);
+    }
+    
+  ` : ''}
+`;
+export const CardBottomSectionDivider = styled.div`
+  border-top: 1px;
+  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+  border-top-style: solid;
+  width: 100%;
+`;
+export const CardBottomSectionNoteLeftStyles = styled.div`
+  position: absolute;
+  left: 0px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  svg {
+    margin-right: 4px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+`;
+export const CardBottomSectionNoteRightStyles = styled.div`
+  position: absolute;
+  right: 0px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  svg {
+    margin-right: 4px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+`;
+export const CardBottomSectionButtonRowContainerStyles = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  border-top: 1px;
+  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+  border-top-style: solid;
+
+  button:last-child {
+    margin: 8px 0px 0px 0px;
+  }
+
+  button:not(:last-child) {
+    margin: 8px 0px 0px 0px;
+  }
+
+  svg {
+    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+  }
+`;
+export const CardBottomSectionContainer = styled.div`
+  padding: 0px 16px 8px 16px;
+  width: calc(100% - 32px);
+`;
 const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     progressLevel,
@@ -30,7 +112,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref;
   const [elRefs, setElRefs] = React.useState([]);
   const theme = useTheme();
-  const length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
+  const length = actions?.length || 0;
   React.useEffect(() => {
     setElRefs(Array(length || 0).fill(null).map(() => /*#__PURE__*/React.createRef()));
   }, [length]);
@@ -44,7 +126,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         type: progressType,
         variant: LinearProgressVariant.Normal,
         value: progressLevel,
-        max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
+        max: progressMax ?? progressLevel
       })
     }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNotesStyles, {
       children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNoteLeftStyles, {

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

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