@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.13

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 import { HorizontalCardProps } from './types';
 export declare const HorizontalCardIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HorizontalCardImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare type Props = Pick<HorizontalCardProps, 'image' | 'icon'>;
+type Props = Pick<HorizontalCardProps, 'image' | 'icon'>;
 export declare const HorizontalCardThumbnail: React.FunctionComponent<Props>;
 export {};

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js

@@ -1,21 +1,34 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { COLORS } from '../../styles';
-import { ImageWithFallbacks } from "../../Image";
-export var HorizontalCardIconContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), COLORS.black, COLORS.neutral_500);
-export var HorizontalCardImageContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n"], ["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n"])));
-export var HorizontalCardThumbnail = function (_a) {
-    var _b, _c;
-    var image = _a.image, icon = _a.icon;
-    return (React.createElement(React.Fragment, null,
-        icon &&
-            React.createElement(HorizontalCardIconContainer, null, React.cloneElement(icon, { width: 48, height: 48 })),
-        image &&
-            React.createElement(HorizontalCardImageContainer, null,
-                React.createElement(ImageWithFallbacks, { fallbacks: (_b = image.fallbackSrc) !== null && _b !== void 0 ? _b : '', src: image.src, alt: image.alt, loader: (_c = image.loader) !== null && _c !== void 0 ? _c : false, width: image.width, height: image.height }))));
-};
-var templateObject_1, templateObject_2;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS } from '../../styles';
+import { ImageWithFallbacks } from "../../Image";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var HorizontalCardIconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), COLORS.black, COLORS.neutral_500);
+export var HorizontalCardImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n"])));
+export var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
+  var _image$fallbackSrc, _image$loader;
+  var image = _ref.image,
+    icon = _ref.icon;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [icon && /*#__PURE__*/_jsx(HorizontalCardIconContainer, {
+      children: /*#__PURE__*/React.cloneElement(icon, {
+        width: 48,
+        height: 48
+      })
+    }), image && /*#__PURE__*/_jsx(HorizontalCardImageContainer, {
+      children: /*#__PURE__*/_jsx(ImageWithFallbacks, {
+        fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
+        src: image.src,
+        alt: image.alt,
+        loader: (_image$loader = image.loader) !== null && _image$loader !== void 0 ? _image$loader : false,
+        width: image.width,
+        height: image.height
+      })
+    })]
+  });
+};
+//# sourceMappingURL=HorizontalCardThumbnail.js.map

package/dist/Card/HorizontalCard/index.js

@@ -1,4 +1,5 @@
-export * from './types';
-export * from './HorizontalCard';
-export * from './HorizontalCardBody';
-export * from './HorizontalCardThumbnail';
+export * from './types';
+export * from './HorizontalCard';
+export * from './HorizontalCardBody';
+export * from './HorizontalCardThumbnail';
+//# sourceMappingURL=index.js.map

package/dist/Card/HorizontalCard/types.d.ts

@@ -5,20 +5,20 @@ import { DropdownButtonProps } from '../../Dropdown/DropdownButtonTypes';
 import { TagVariants } from '../../Tag';
 import { LinearProgressProps } from '../../LinearProgress/LinearProgress';
 import { Testable } from '../../types';
-export declare type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {
+export type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {
     componentType: 'icon';
     icon: React.ReactNode;
 };
-export declare type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
+export type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
     componentType: 'toggle';
 };
 export interface CustomContentProps extends Testable {
     content: ReactNode;
 }
-export declare type HorizontalCardCustomContent = CustomContentProps & {
+export type HorizontalCardCustomContent = CustomContentProps & {
     componentType: 'custom';
 };
-export declare type HorizontalCardDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
+export type HorizontalCardDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
     componentType: 'dropdown';
     icon: React.ReactNode;
 };
@@ -27,7 +27,7 @@ export interface HorizontalCardTag {
     icon?: React.ReactNode;
     variant?: TagVariants;
 }
-export declare type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
+export type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
 export interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'description' | 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {
     /** 'Outline' or 'Elevated' style of container. */
     variant?: 'outline' | 'elevated';

package/dist/Card/HorizontalCard/types.js

@@ -1 +1,2 @@
-export {};
+export {};
+//# sourceMappingURL=types.js.map

package/dist/Card/VerticalCard/Card.js

@@ -1,61 +1,81 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import CardTopSection from './CardTopSection';
-import CardMiddleSection from './CardMiddleSection';
-import CardBottomSection from './CardBottomSection';
-import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin } from '../../index';
-export var CardTopLevelContainerStyles = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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 CardContainerStyles = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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, CardTopLevelContainerStyles, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainerStyles, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainerStyles, COLORS.neutral_100);
-var Card = function (_a) {
-    var onCardClicked = _a.onCardClicked, topSectionProps = _a.topSectionProps, middleSectionProps = _a.middleSectionProps, bottomSectionProps = _a.bottomSectionProps, disabled = _a.disabled, _b = _a.variant, variant = _b === void 0 ? 'elevated' : _b, className = _a.className, _c = _a.maxWidth, maxWidth = _c === void 0 ? 560 : _c, rest = __rest(_a, ["onCardClicked", "topSectionProps", "middleSectionProps", "bottomSectionProps", "disabled", "variant", "className", "maxWidth"]);
-    var _d = React.useState([]), actionsRefs = _d[0], setActionsRefs = _d[1];
-    var checkBoxRef = React.useRef(null);
-    var containerRef = React.useRef(null);
-    useActionWithin(containerRef, __spreadArray(__spreadArray([], actionsRefs, true), [checkBoxRef], false));
-    var cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(variant, " ").concat(className || '');
-    return (React.createElement(CardContainerStyles, __assign({ ref: containerRef, className: cls, tabIndex: !!onCardClicked && !disabled ? 0 : -1, onMouseDown: defaultOnMouseDownHandler, onKeyDown: function (a) { return a.key === 'Enter' && !disabled && onCardClicked && onCardClicked(); }, onClick: function (e) { return !disabled && onCardClicked && onCardClicked(); }, "data-testid": 'card-wrapper' }, rest),
-        React.createElement(CardTopLevelContainerStyles, { style: { maxWidth: maxWidth } },
-            topSectionProps &&
-                React.createElement(CardTopSection, __assign({ ref: checkBoxRef }, topSectionProps, { disabled: disabled })),
-            middleSectionProps &&
-                React.createElement(CardMiddleSection, __assign({}, middleSectionProps, { disabled: disabled })),
-            bottomSectionProps &&
-                React.createElement(CardBottomSection, __assign({ ref: function (instance) { return setActionsRefs(instance !== null && instance !== void 0 ? instance : []); } }, bottomSectionProps, { disabled: disabled })))));
-};
-export default Card;
-var templateObject_1, templateObject_2;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as React from 'react';
+import styled from 'styled-components';
+import CardTopSection from './CardTopSection';
+import CardMiddleSection from './CardMiddleSection';
+import CardBottomSection from './CardBottomSection';
+import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var CardTopLevelContainerStyles = 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 CardContainerStyles = 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, CardTopLevelContainerStyles, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainerStyles, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainerStyles, 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);
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    actionsRefs = _React$useState2[0],
+    setActionsRefs = _React$useState2[1];
+  var checkBoxRef = React.useRef(null);
+  var containerRef = React.useRef(null);
+  useActionWithin(containerRef, [].concat(_toConsumableArray(actionsRefs), [checkBoxRef]));
+  var cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(variant, " ").concat(className || '');
+  return /*#__PURE__*/_jsx(CardContainerStyles, _objectSpread(_objectSpread({
+    ref: containerRef,
+    className: cls,
+    tabIndex: !!onCardClicked && !disabled ? 0 : -1,
+    onMouseDown: defaultOnMouseDownHandler,
+    onKeyDown: function onKeyDown(a) {
+      return a.key === 'Enter' && !disabled && onCardClicked && onCardClicked();
+    },
+    onClick: function onClick(e) {
+      return !disabled && onCardClicked && onCardClicked();
+    },
+    "data-testid": 'card-wrapper'
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsxs(CardTopLevelContainerStyles, {
+      style: {
+        maxWidth: maxWidth
+      },
+      children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({
+        ref: checkBoxRef
+      }, topSectionProps), {}, {
+        disabled: disabled
+      })), middleSectionProps && /*#__PURE__*/_jsx(CardMiddleSection, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
+        disabled: disabled
+      })), bottomSectionProps && /*#__PURE__*/_jsx(CardBottomSection, _objectSpread(_objectSpread({
+        ref: function ref(instance) {
+          return setActionsRefs(instance !== null && instance !== void 0 ? instance : []);
+        }
+      }, bottomSectionProps), {}, {
+        disabled: disabled
+      }))]
+    })
+  }));
+};
+Card.propTypes = {
+  onCardClicked: _pt.func,
+  disabled: _pt.bool,
+  maxWidth: _pt.oneOfType([_pt.number, _pt.string]),
+  variant: _pt.oneOf(['outline', 'elevated'])
+};
+export default Card;
+//# sourceMappingURL=Card.js.map

package/dist/Card/VerticalCard/CardBottomSection.js

@@ -1,45 +1,110 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '../../index';
-import { IconButton } from '../../Button';
-export var CardBottomSectionProgressStyles = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 8px 0;\n"], ["\n  padding: 8px 0;\n"])));
-export var CardBottomSectionNotesStyles = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"], ["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), COLORS.neutral_500);
-export var CardBottomSectionAuthorStyles = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\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(COLORS.neutral_300, ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : ''; });
-export var CardBottomSectionDivider = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"], ["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), COLORS.neutral_100);
-export var CardBottomSectionNoteLeftStyles = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\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  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export var CardBottomSectionNoteRightStyles = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\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  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export var CardBottomSectionButtonRowContainerStyles = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\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"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), COLORS.neutral_100, COLORS.neutral_600);
-export var CardBottomSectionContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"], ["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
-var CardBottomSection = React.forwardRef(function (_a, ref) {
-    var progressLevel = _a.progressLevel, progressMax = _a.progressMax, _b = _a.progressType, progressType = _b === void 0 ? LinearProgressType.Line : _b, noteLeft = _a.noteLeft, noteLeftIcon = _a.noteLeftIcon, noteRight = _a.noteRight, noteRightIcon = _a.noteRightIcon, authorName = _a.authorName, logo = _a.logo, actions = _a.actions, disabled = _a.disabled;
-    var _c = React.useState([]), elRefs = _c[0], setElRefs = _c[1];
-    var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
-    React.useEffect(function () {
-        setElRefs(Array(length || 0).fill(null).map(function () { return React.createRef(); }));
-    }, [length]);
-    React.useImperativeHandle(ref, function () { return elRefs; }, [elRefs]);
-    var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
-    return (React.createElement(CardBottomSectionContainer, { "data-testid": 'card-bottomSection' },
-        haveAtLeastSomething && React.createElement(CardBottomSectionDivider, null),
-        progressLevel != undefined && React.createElement(CardBottomSectionProgressStyles, null,
-            React.createElement(LinearProgress, { size: Size.Small, type: progressType, variant: LinearProgressVariant.Normal, value: progressLevel, max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel })),
-        (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && React.createElement(CardBottomSectionNotesStyles, null,
-            (noteLeft || noteLeftIcon) && (React.createElement(CardBottomSectionNoteLeftStyles, null,
-                noteLeftIcon,
-                React.createElement(ComponentXXS, { color: COLORS.neutral_500, textStyle: ComponentTextStyle.Bold }, noteLeft))),
-            (noteRight || noteRightIcon) && (React.createElement(CardBottomSectionNoteRightStyles, null,
-                noteRightIcon,
-                React.createElement(ComponentXXS, { color: COLORS.neutral_500, textStyle: ComponentTextStyle.Bold }, noteRight)))),
-        (authorName || logo) && React.createElement(CardBottomSectionAuthorStyles, { disabled: disabled, "data-testid": 'card-bottomSection-author' },
-            React.createElement(ComponentXXS, null, authorName),
-            logo),
-        actions && React.createElement(CardBottomSectionButtonRowContainerStyles, null, actions.map(function (x, index) { return (React.createElement(IconButton, { ref: elRefs[index], key: index, disabled: disabled, variant: "secondary", shape: "circular", action: function (e) {
-                x.onClick();
-            } }, x.icon)); }))));
-});
-export default CardBottomSection;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+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';
+import { IconButton } from '../../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var CardBottomSectionProgressStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 0;\n"])));
+export var 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"])), COLORS.neutral_500);
+export var 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"])), function (props) {
+  return props.disabled ? "\n    color: ".concat(COLORS.neutral_300, ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
+});
+export var CardBottomSectionDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), COLORS.neutral_100);
+export var 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 var 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 var 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"])), COLORS.neutral_100, COLORS.neutral_600);
+export var CardBottomSectionContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
+var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var 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;
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    elRefs = _React$useState2[0],
+    setElRefs = _React$useState2[1];
+  var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
+  React.useEffect(function () {
+    setElRefs(Array(length || 0).fill(null).map(function () {
+      return /*#__PURE__*/React.createRef();
+    }));
+  }, [length]);
+  React.useImperativeHandle(ref, function () {
+    return elRefs;
+  }, [elRefs]);
+  var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
+  return /*#__PURE__*/_jsxs(CardBottomSectionContainer, {
+    "data-testid": 'card-bottomSection',
+    children: [haveAtLeastSomething && /*#__PURE__*/_jsx(CardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(CardBottomSectionProgressStyles, {
+      children: /*#__PURE__*/_jsx(LinearProgress, {
+        size: Size.Small,
+        type: progressType,
+        variant: LinearProgressVariant.Normal,
+        value: progressLevel,
+        max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
+      })
+    }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNotesStyles, {
+      children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNoteLeftStyles, {
+        children: [noteLeftIcon, /*#__PURE__*/_jsx(ComponentXXS, {
+          color: COLORS.neutral_500,
+          textStyle: ComponentTextStyle.Bold,
+          children: noteLeft
+        })]
+      }), (noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNoteRightStyles, {
+        children: [noteRightIcon, /*#__PURE__*/_jsx(ComponentXXS, {
+          color: COLORS.neutral_500,
+          textStyle: ComponentTextStyle.Bold,
+          children: noteRight
+        })]
+      })]
+    }), (authorName || logo) && /*#__PURE__*/_jsxs(CardBottomSectionAuthorStyles, {
+      disabled: disabled,
+      "data-testid": 'card-bottomSection-author',
+      children: [/*#__PURE__*/_jsx(ComponentXXS, {
+        children: authorName
+      }), logo]
+    }), actions && /*#__PURE__*/_jsx(CardBottomSectionButtonRowContainerStyles, {
+      children: actions.map(function (x, index) {
+        return /*#__PURE__*/_jsx(IconButton, {
+          ref: elRefs[index],
+          disabled: disabled,
+          variant: "secondary",
+          shape: "circular",
+          action: function action(e) {
+            x.onClick();
+          },
+          children: x.icon
+        }, index);
+      })
+    })]
+  });
+});
+CardBottomSection.propTypes = {
+  progressLevel: _pt.number,
+  progressMax: _pt.number,
+  noteLeft: _pt.string,
+  noteLeftIcon: _pt.node,
+  noteRight: _pt.string,
+  noteRightIcon: _pt.node,
+  authorName: _pt.string,
+  actions: _pt.arrayOf(_pt.shape({
+    icon: _pt.node.isRequired,
+    onClick: _pt.func.isRequired
+  })),
+  logo: _pt.node,
+  disabled: _pt.bool
+};
+export default CardBottomSection;
+//# sourceMappingURL=CardBottomSection.js.map

package/dist/Card/VerticalCard/CardMiddleSection.js

@@ -1,32 +1,66 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag } from '../../index';
-export var CardMiddleSectionContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n"], ["\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n"])));
-export var CardMiddleSectionColorBandStyles = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"], ["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"])), function (props) { return props.$color; });
-export var CardMiddleSectionTagsStyles = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"])));
-export var CardMiddleSectionCategoryStyles = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), COLORS.neutral_500);
-var CardMiddleSection = function (_a) {
-    var colorBandColor = _a.colorBandColor, categoryIcon = _a.categoryIcon, categoryLabel = _a.categoryLabel, title = _a.title, description = _a.description, tags = _a.tags, row2Tags = _a.row2Tags, disabled = _a.disabled;
-    return (React.createElement(CardMiddleSectionContainer, { "data-testid": 'card-middleSection' },
-        colorBandColor && React.createElement(CardMiddleSectionColorBandStyles, { "$color": colorBandColor }),
-        (categoryIcon || categoryLabel) &&
-            React.createElement(CardMiddleSectionCategoryStyles, { extraTopMargin: Boolean(colorBandColor), bottomMargin: Boolean(categoryIcon || categoryLabel) },
-                categoryIcon,
-                React.createElement(ComponentS, { textStyle: ComponentTextStyle.Bold, color: COLORS.neutral_500 }, categoryLabel)),
-        React.createElement(ComponentXL, { className: "titleBlock", textStyle: ComponentTextStyle.Bold, color: disabled ? COLORS.neutral_500 : COLORS.black }, title),
-        description && (React.createElement(ComponentS, { className: "descriptionBlock", color: COLORS.neutral_600 }, description)),
-        tags && (React.createElement(CardMiddleSectionTagsStyles, null, tags.map(function (x, index) {
-            var _a;
-            return (React.createElement(Tag, { key: "".concat(x.label, "_").concat(index), label: x.label, variant: (_a = x.variant) !== null && _a !== void 0 ? _a : 'neutral', icon: x.icon }));
-        }))),
-        row2Tags && (React.createElement(CardMiddleSectionTagsStyles, null, row2Tags.map(function (x, index) {
-            var _a;
-            return (React.createElement(Tag, { key: "".concat(x.label, "_").concat(index), label: x.label, variant: (_a = x.variant) !== null && _a !== void 0 ? _a : 'neutral', icon: x.icon }));
-        })))));
-};
-export default CardMiddleSection;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var CardMiddleSectionContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n"])));
+export var CardMiddleSectionColorBandStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"])), function (props) {
+  return props.$color;
+});
+export var CardMiddleSectionTagsStyles = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"])));
+export var CardMiddleSectionCategoryStyles = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), COLORS.neutral_500);
+var CardMiddleSection = function CardMiddleSection(_ref) {
+  var colorBandColor = _ref.colorBandColor,
+    categoryIcon = _ref.categoryIcon,
+    categoryLabel = _ref.categoryLabel,
+    title = _ref.title,
+    description = _ref.description,
+    tags = _ref.tags,
+    row2Tags = _ref.row2Tags,
+    disabled = _ref.disabled;
+  return /*#__PURE__*/_jsxs(CardMiddleSectionContainer, {
+    "data-testid": 'card-middleSection',
+    children: [colorBandColor && /*#__PURE__*/_jsx(CardMiddleSectionColorBandStyles, {
+      $color: colorBandColor
+    }), (categoryIcon || categoryLabel) && /*#__PURE__*/_jsxs(CardMiddleSectionCategoryStyles, {
+      extraTopMargin: Boolean(colorBandColor),
+      bottomMargin: Boolean(categoryIcon || categoryLabel),
+      children: [categoryIcon, /*#__PURE__*/_jsx(ComponentS, {
+        textStyle: ComponentTextStyle.Bold,
+        color: COLORS.neutral_500,
+        children: categoryLabel
+      })]
+    }), /*#__PURE__*/_jsx(ComponentXL, {
+      className: "titleBlock",
+      textStyle: ComponentTextStyle.Bold,
+      color: disabled ? COLORS.neutral_500 : COLORS.black,
+      children: title
+    }), description && /*#__PURE__*/_jsx(ComponentS, {
+      className: "descriptionBlock",
+      color: COLORS.neutral_600,
+      children: description
+    }), tags && /*#__PURE__*/_jsx(CardMiddleSectionTagsStyles, {
+      children: tags.map(function (x, index) {
+        var _x$variant;
+        return /*#__PURE__*/_jsx(Tag, {
+          label: x.label,
+          variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral',
+          icon: x.icon
+        }, "".concat(x.label, "_").concat(index));
+      })
+    }), row2Tags && /*#__PURE__*/_jsx(CardMiddleSectionTagsStyles, {
+      children: row2Tags.map(function (x, index) {
+        var _x$variant2;
+        return /*#__PURE__*/_jsx(Tag, {
+          label: x.label,
+          variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral',
+          icon: x.icon
+        }, "".concat(x.label, "_").concat(index));
+      })
+    })]
+  });
+};
+export default CardMiddleSection;
+//# sourceMappingURL=CardMiddleSection.js.map