@laerdal/life-react-components 2.0.1-dev.9.full → 2.1.0

package/dist/Card/VerticalCard/Card.cjs

@@ -1,78 +1,50 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Wrapper = exports.CardTopLevelContainer = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _CardTopSection = _interopRequireDefault(require("./CardTopSection"));
-
 var _CardMiddleSection = _interopRequireDefault(require("./CardMiddleSection"));
-
 var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
-
 var _index = require("../../index");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["onCardClicked", "topSectionProps", "middleSectionProps", "bottomSectionProps", "disabled", "variant", "className", "maxWidth"];
-
 var _templateObject, _templateObject2;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  min-width: 240px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), _index.COLORS.white, _index.BOXSHADOWS.BOXSHADOW_L1, _index.COLORS.neutral_200);
-
 exports.CardTopLevelContainer = CardTopLevelContainer;
-
 var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), _index.focusStyles, CardTopLevelContainer, _index.COLORS.primary_20, _index.COLORS.primary_100, CardTopLevelContainer, _index.BOXSHADOWS.BOXSHADOW_L3, _index.BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainer, _index.COLORS.neutral_100);
-
 exports.Wrapper = Wrapper;
-
 var Card = function Card(_ref) {
   var onCardClicked = _ref.onCardClicked,
-      topSectionProps = _ref.topSectionProps,
-      middleSectionProps = _ref.middleSectionProps,
-      bottomSectionProps = _ref.bottomSectionProps,
-      disabled = _ref.disabled,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'elevated' : _ref$variant,
-      className = _ref.className,
-      _ref$maxWidth = _ref.maxWidth,
-      maxWidth = _ref$maxWidth === void 0 ? 560 : _ref$maxWidth,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    topSectionProps = _ref.topSectionProps,
+    middleSectionProps = _ref.middleSectionProps,
+    bottomSectionProps = _ref.bottomSectionProps,
+    disabled = _ref.disabled,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'elevated' : _ref$variant,
+    className = _ref.className,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 560 : _ref$maxWidth,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _React$useState = React.useState([]),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      actionsRefs = _React$useState2[0],
-      setActionsRefs = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    actionsRefs = _React$useState2[0],
+    setActionsRefs = _React$useState2[1];
   var checkBoxRef = React.useRef(null);
   var containerRef = React.useRef(null);
   (0, _index.useActionWithin)(containerRef, [].concat((0, _toConsumableArray2.default)(actionsRefs), [checkBoxRef]));
@@ -110,7 +82,6 @@ var Card = function Card(_ref) {
     })
   }));
 };
-
 Card.propTypes = {
   onCardClicked: _propTypes.default.func,
   disabled: _propTypes.default.bool,

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

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","useActionWithin","cls","defaultOnMouseDownHandler","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n  min-width: 240px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ${CardTopLevelContainer}{\n      border: 1px solid ${COLORS.neutral_100};\n    }\n  }\n`;\n\n\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  maxWidth?: number | string;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'elevated',\n                                                    className,\n                                                    maxWidth = 560,\n                                                    ...rest\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\n\n  return (\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}\n             {...rest}>\n      <CardTopLevelContainer style={{maxWidth: maxWidth}}>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"mappings":"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"}
+{"version":3,"file":"Card.cjs","names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","useActionWithin","cls","defaultOnMouseDownHandler","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n  min-width: 240px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ${CardTopLevelContainer}{\n      border: 1px solid ${COLORS.neutral_100};\n    }\n  }\n`;\n\n\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  maxWidth?: number | string;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'elevated',\n                                                    className,\n                                                    maxWidth = 560,\n                                                    ...rest\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\n\n  return (\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}\n             {...rest}>\n      <CardTopLevelContainer style={{maxWidth: maxWidth}}>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"mappings":"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"}

package/dist/Card/VerticalCard/Card.js

@@ -5,13 +5,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _excluded = ["onCardClicked", "topSectionProps", "middleSectionProps", "bottomSectionProps", "disabled", "variant", "className", "maxWidth"];
-
 var _templateObject, _templateObject2;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import * as React from 'react';
 import styled from 'styled-components';
 import CardTopSection from './CardTopSection';
@@ -22,25 +18,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  min-width: 240px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), COLORS.white, BOXSHADOWS.BOXSHADOW_L1, COLORS.neutral_200);
 export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), focusStyles, CardTopLevelContainer, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainer, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainer, COLORS.neutral_100);
-
 var Card = function Card(_ref) {
   var onCardClicked = _ref.onCardClicked,
-      topSectionProps = _ref.topSectionProps,
-      middleSectionProps = _ref.middleSectionProps,
-      bottomSectionProps = _ref.bottomSectionProps,
-      disabled = _ref.disabled,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'elevated' : _ref$variant,
-      className = _ref.className,
-      _ref$maxWidth = _ref.maxWidth,
-      maxWidth = _ref$maxWidth === void 0 ? 560 : _ref$maxWidth,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    topSectionProps = _ref.topSectionProps,
+    middleSectionProps = _ref.middleSectionProps,
+    bottomSectionProps = _ref.bottomSectionProps,
+    disabled = _ref.disabled,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'elevated' : _ref$variant,
+    className = _ref.className,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 560 : _ref$maxWidth,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      actionsRefs = _React$useState2[0],
-      setActionsRefs = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    actionsRefs = _React$useState2[0],
+    setActionsRefs = _React$useState2[1];
   var checkBoxRef = React.useRef(null);
   var containerRef = React.useRef(null);
   useActionWithin(containerRef, [].concat(_toConsumableArray(actionsRefs), [checkBoxRef]));
@@ -78,7 +71,6 @@ var Card = function Card(_ref) {
     })
   }));
 };
-
 Card.propTypes = {
   onCardClicked: _pt.func,
   disabled: _pt.bool,

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","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n  min-width: 240px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ${CardTopLevelContainer}{\n      border: 1px solid ${COLORS.neutral_100};\n    }\n  }\n`;\n\n\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  maxWidth?: number | string;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'elevated',\n                                                    className,\n                                                    maxWidth = 560,\n                                                    ...rest\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\n\n  return (\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}\n             {...rest}>\n      <CardTopLevelContainer style={{maxWidth: maxWidth}}>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"mappings":"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"}
+{"version":3,"file":"Card.js","names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n  min-width: 240px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ${CardTopLevelContainer}{\n      border: 1px solid ${COLORS.neutral_100};\n    }\n  }\n`;\n\n\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  maxWidth?: number | string;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'elevated',\n                                                    className,\n                                                    maxWidth = 560,\n                                                    ...rest\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\n\n  return (\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}\n             {...rest}>\n      <CardTopLevelContainer style={{maxWidth: maxWidth}}>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"mappings":"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"}

package/dist/Card/VerticalCard/CardBottomSection.cjs

@@ -1,88 +1,57 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CardProgressContainer = exports.CardNotesContainer = exports.CardNoteRight = exports.CardNoteLeft = exports.CardButtonRowContainer = exports.CardBottomSectionContainer = exports.CardBottomDivider = exports.CardAuthorContainer = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var CardProgressContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 0;\n"])));
-
 exports.CardProgressContainer = CardProgressContainer;
-
 var CardNotesContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), _index.COLORS.neutral_500);
-
 exports.CardNotesContainer = CardNotesContainer;
-
 var CardAuthorContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ", "\n"])), function (props) {
   return props.disabled ? "\n    color: ".concat(_index.COLORS.neutral_300, ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
 });
-
 exports.CardAuthorContainer = CardAuthorContainer;
-
 var CardBottomDivider = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), _index.COLORS.neutral_100);
-
 exports.CardBottomDivider = CardBottomDivider;
-
 var CardNoteLeft = _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"])));
-
 exports.CardNoteLeft = CardNoteLeft;
-
 var CardNoteRight = _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"])));
-
 exports.CardNoteRight = CardNoteRight;
-
 var CardButtonRowContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), _index.COLORS.neutral_100, _index.COLORS.neutral_600);
-
 exports.CardButtonRowContainer = CardButtonRowContainer;
-
 var CardBottomSectionContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
-
 exports.CardBottomSectionContainer = CardBottomSectionContainer;
 var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var progressLevel = _ref.progressLevel,
-      progressMax = _ref.progressMax,
-      _ref$progressType = _ref.progressType,
-      progressType = _ref$progressType === void 0 ? _index.LinearProgressType.Line : _ref$progressType,
-      noteLeft = _ref.noteLeft,
-      noteLeftIcon = _ref.noteLeftIcon,
-      noteRight = _ref.noteRight,
-      noteRightIcon = _ref.noteRightIcon,
-      authorName = _ref.authorName,
-      logo = _ref.logo,
-      actions = _ref.actions,
-      disabled = _ref.disabled;
-
+    progressMax = _ref.progressMax,
+    _ref$progressType = _ref.progressType,
+    progressType = _ref$progressType === void 0 ? _index.LinearProgressType.Line : _ref$progressType,
+    noteLeft = _ref.noteLeft,
+    noteLeftIcon = _ref.noteLeftIcon,
+    noteRight = _ref.noteRight,
+    noteRightIcon = _ref.noteRightIcon,
+    authorName = _ref.authorName,
+    logo = _ref.logo,
+    actions = _ref.actions,
+    disabled = _ref.disabled;
   var _React$useState = React.useState([]),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      elRefs = _React$useState2[0],
-      setElRefs = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    elRefs = _React$useState2[0],
+    setElRefs = _React$useState2[1];
   var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
   React.useEffect(function () {
     setElRefs(Array(length || 0).fill(null).map(function () {

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

@@ -1 +1 @@
-{"version":3,"file":"CardBottomSection.cjs","names":["CardProgressContainer","styled","div","CardNotesContainer","COLORS","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","React","forwardRef","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","x","index","e","onClick","icon"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentTextStyle,\n  ComponentXXS,\n  LinearProgress,\n  LinearProgressType,\n  LinearProgressVariant,\n  Size\n} from '../../index';\nimport {IconButton} from '../../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n\n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport const CardProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nexport const CardNotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const CardAuthorContainer = styled.div<{ disabled?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nexport const CardBottomDivider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nexport const CardNoteLeft = styled.div`\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardNoteRight = styled.div`\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const CardBottomSectionContainer = styled.div`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n`;\n\nconst CardBottomSection = React.forwardRef(({\n                                              progressLevel,\n                                              progressMax,\n                                              progressType = LinearProgressType.Line,\n                                              noteLeft,\n                                              noteLeftIcon,\n                                              noteRight,\n                                              noteRightIcon,\n                                              authorName,\n                                              logo,\n                                              actions,\n                                              disabled\n                                            }: CardBottomSectionProps,\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n\n  return (\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\n      {haveAtLeastSomething && <CardBottomDivider/>}\n      {progressLevel != undefined && <CardProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel}/>\n      </CardProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <CardNoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </CardNoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <CardNoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </CardNoteRight>\n        )}\n      </CardNotesContainer>}\n\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled} data-testid={'card-bottomSection-author'}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </CardAuthorContainer>}\n\n      {actions && <CardButtonRowContainer>\n        {actions.map((x, index) => (\n          <IconButton ref={elRefs[index]}\n                      key={index}\n                      disabled={disabled}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(e) => {\n                        x.onClick();\n                      }}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </CardButtonRowContainer>}\n    </CardBottomSectionContainer>\n  );\n});\n\nexport default CardBottomSection;\n"],"mappings":"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"}
+{"version":3,"file":"CardBottomSection.cjs","names":["CardProgressContainer","styled","div","CardNotesContainer","COLORS","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","React","forwardRef","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","x","index","e","onClick","icon"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentTextStyle,\n  ComponentXXS,\n  LinearProgress,\n  LinearProgressType,\n  LinearProgressVariant,\n  Size\n} from '../../index';\nimport {IconButton} from '../../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n\n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport const CardProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nexport const CardNotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const CardAuthorContainer = styled.div<{ disabled?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nexport const CardBottomDivider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nexport const CardNoteLeft = styled.div`\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardNoteRight = styled.div`\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const CardBottomSectionContainer = styled.div`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n`;\n\nconst CardBottomSection = React.forwardRef(({\n                                              progressLevel,\n                                              progressMax,\n                                              progressType = LinearProgressType.Line,\n                                              noteLeft,\n                                              noteLeftIcon,\n                                              noteRight,\n                                              noteRightIcon,\n                                              authorName,\n                                              logo,\n                                              actions,\n                                              disabled\n                                            }: CardBottomSectionProps,\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n\n  return (\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\n      {haveAtLeastSomething && <CardBottomDivider/>}\n      {progressLevel != undefined && <CardProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel}/>\n      </CardProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <CardNoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </CardNoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <CardNoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </CardNoteRight>\n        )}\n      </CardNotesContainer>}\n\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled} data-testid={'card-bottomSection-author'}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </CardAuthorContainer>}\n\n      {actions && <CardButtonRowContainer>\n        {actions.map((x, index) => (\n          <IconButton ref={elRefs[index]}\n                      key={index}\n                      disabled={disabled}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(e) => {\n                        x.onClick();\n                      }}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </CardButtonRowContainer>}\n    </CardBottomSectionContainer>\n  );\n});\n\nexport default CardBottomSection;\n"],"mappings":"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"}

package/dist/Card/VerticalCard/CardBottomSection.js

@@ -1,9 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
 import * as React from 'react';
 import styled from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '../../index';
@@ -22,23 +20,21 @@ export var CardButtonRowContainer = styled.div(_templateObject7 || (_templateObj
 export var CardBottomSectionContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
 var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var progressLevel = _ref.progressLevel,
-      progressMax = _ref.progressMax,
-      _ref$progressType = _ref.progressType,
-      progressType = _ref$progressType === void 0 ? LinearProgressType.Line : _ref$progressType,
-      noteLeft = _ref.noteLeft,
-      noteLeftIcon = _ref.noteLeftIcon,
-      noteRight = _ref.noteRight,
-      noteRightIcon = _ref.noteRightIcon,
-      authorName = _ref.authorName,
-      logo = _ref.logo,
-      actions = _ref.actions,
-      disabled = _ref.disabled;
-
+    progressMax = _ref.progressMax,
+    _ref$progressType = _ref.progressType,
+    progressType = _ref$progressType === void 0 ? LinearProgressType.Line : _ref$progressType,
+    noteLeft = _ref.noteLeft,
+    noteLeftIcon = _ref.noteLeftIcon,
+    noteRight = _ref.noteRight,
+    noteRightIcon = _ref.noteRightIcon,
+    authorName = _ref.authorName,
+    logo = _ref.logo,
+    actions = _ref.actions,
+    disabled = _ref.disabled;
   var _React$useState = React.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      elRefs = _React$useState2[0],
-      setElRefs = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    elRefs = _React$useState2[0],
+    setElRefs = _React$useState2[1];
   var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
   React.useEffect(function () {
     setElRefs(Array(length || 0).fill(null).map(function () {

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

@@ -1 +1 @@
-{"version":3,"file":"CardBottomSection.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","CardProgressContainer","div","CardNotesContainer","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","forwardRef","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","Small","Normal","Bold","x","index","e","onClick","icon"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentTextStyle,\n  ComponentXXS,\n  LinearProgress,\n  LinearProgressType,\n  LinearProgressVariant,\n  Size\n} from '../../index';\nimport {IconButton} from '../../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n\n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport const CardProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nexport const CardNotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const CardAuthorContainer = styled.div<{ disabled?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nexport const CardBottomDivider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nexport const CardNoteLeft = styled.div`\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardNoteRight = styled.div`\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const CardBottomSectionContainer = styled.div`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n`;\n\nconst CardBottomSection = React.forwardRef(({\n                                              progressLevel,\n                                              progressMax,\n                                              progressType = LinearProgressType.Line,\n                                              noteLeft,\n                                              noteLeftIcon,\n                                              noteRight,\n                                              noteRightIcon,\n                                              authorName,\n                                              logo,\n                                              actions,\n                                              disabled\n                                            }: CardBottomSectionProps,\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n\n  return (\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\n      {haveAtLeastSomething && <CardBottomDivider/>}\n      {progressLevel != undefined && <CardProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel}/>\n      </CardProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <CardNoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </CardNoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <CardNoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </CardNoteRight>\n        )}\n      </CardNotesContainer>}\n\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled} data-testid={'card-bottomSection-author'}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </CardAuthorContainer>}\n\n      {actions && <CardButtonRowContainer>\n        {actions.map((x, index) => (\n          <IconButton ref={elRefs[index]}\n                      key={index}\n                      disabled={disabled}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(e) => {\n                        x.onClick();\n                      }}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </CardButtonRowContainer>}\n    </CardBottomSectionContainer>\n  );\n});\n\nexport default CardBottomSection;\n"],"mappings":"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"}
+{"version":3,"file":"CardBottomSection.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","CardProgressContainer","div","CardNotesContainer","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","forwardRef","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","Small","Normal","Bold","x","index","e","onClick","icon"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentTextStyle,\n  ComponentXXS,\n  LinearProgress,\n  LinearProgressType,\n  LinearProgressVariant,\n  Size\n} from '../../index';\nimport {IconButton} from '../../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n\n  authorName?: string;\n  actions?: ActionItem[];\n  logo?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport const CardProgressContainer = styled.div`\n  padding: 8px 0;\n`;\n\nexport const CardNotesContainer = styled.div`\n  height: 48px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const CardAuthorContainer = styled.div<{ disabled?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nexport const CardBottomDivider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n`;\n\nexport const CardNoteLeft = styled.div`\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardNoteRight = styled.div`\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const CardBottomSectionContainer = styled.div`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n`;\n\nconst CardBottomSection = React.forwardRef(({\n                                              progressLevel,\n                                              progressMax,\n                                              progressType = LinearProgressType.Line,\n                                              noteLeft,\n                                              noteLeftIcon,\n                                              noteRight,\n                                              noteRightIcon,\n                                              authorName,\n                                              logo,\n                                              actions,\n                                              disabled\n                                            }: CardBottomSectionProps,\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n\n  return (\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\n      {haveAtLeastSomething && <CardBottomDivider/>}\n      {progressLevel != undefined && <CardProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel}/>\n      </CardProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <CardNoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </CardNoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <CardNoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </CardNoteRight>\n        )}\n      </CardNotesContainer>}\n\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled} data-testid={'card-bottomSection-author'}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        {logo}\n      </CardAuthorContainer>}\n\n      {actions && <CardButtonRowContainer>\n        {actions.map((x, index) => (\n          <IconButton ref={elRefs[index]}\n                      key={index}\n                      disabled={disabled}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(e) => {\n                        x.onClick();\n                      }}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </CardButtonRowContainer>}\n    </CardBottomSectionContainer>\n  );\n});\n\nexport default CardBottomSection;\n"],"mappings":"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"}