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

package/dist/src/Button/DualFunctionButton.js

@@ -0,0 +1,71 @@
+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;
+};
+import * as React from 'react';
+import Button, { ButtonContentContainer } from './Button';
+import { SystemIcons } from '../icons';
+import { DropdownContainer } from '../Dropdown/CommonStyling';
+import { nanoid } from 'nanoid';
+import { Size } from '../types';
+import DropdownContent from '../Dropdown/DropdownContent';
+import styled from 'styled-components';
+import { useClickOutsideRef, useFocusOutsideRef } from '../common';
+var DualButtonsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  ", " {\n    min-width: unset;\n    gap: 0px;\n    padding: ", ";\n  }\n\n  .extraMargin {\n    margin-bottom: 4px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  ", " {\n    min-width: unset;\n    gap: 0px;\n    padding: ", ";\n  }\n\n  .extraMargin {\n    margin-bottom: 4px;\n  }\n"])), ButtonContentContainer, function (props) { return (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px'); });
+var DualFunctionButton = function (_a) {
+    var _b = _a.children, children = _b === void 0 ? 'Primary Button' : _b, _c = _a.variant, variant = _c === void 0 ? 'primary' : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.size, size = _e === void 0 ? Size.Medium : _e, _f = _a.width, width = _f === void 0 ? 'auto' : _f, testId = _a.testId, disabled = _a.disabled, id = _a.id, dropdownMenuValues = _a.dropdownMenuValues, setDropdownMenuValues = _a.setDropdownMenuValues, dropdownCustomizationProps = _a.dropdownCustomizationProps, props = __rest(_a, ["children", "variant", "type", "size", "width", "testId", "disabled", "id", "dropdownMenuValues", "setDropdownMenuValues", "dropdownCustomizationProps"]);
+    // Let's filter out properties that we don't need to render.
+    var loading = props.loading, icon = props.icon, onClick = props.onClick, renderProps = __rest(props, ["loading", "icon", "onClick"]);
+    var _g = React.useState(false), isOpen = _g[0], setIsOpen = _g[1];
+    var _h = React.useState(), activeDescendant = _h[0], setActiveDescendant = _h[1];
+    var _j = React.useState(null), focused = _j[0], setFocused = _j[1];
+    var _k = React.useState(false), keyboardNavigated = _k[0], setKeyboardNavigated = _k[1];
+    var dropdownContainerRef = React.useRef(null);
+    var _l = React.useState([]), selectedValues = _l[0], setSelectedValues = _l[1];
+    var dropdownContentRef = React.useRef(null);
+    var dropdownButtonRef = useClickOutsideRef(function () { return setIsOpen(false); }, [dropdownContainerRef], useFocusOutsideRef(function () { return setIsOpen(false); }, [dropdownContentRef]));
+    var dropdownContentId = id ? id + '_dropdownContent' : nanoid();
+    React.useEffect(function () {
+        !isOpen && setKeyboardNavigated(false);
+    }, [isOpen]);
+    return (React.createElement(DualButtonsContainer, { ref: dropdownContainerRef, size: size },
+        React.createElement(DropdownContainer, { isButton: true, readOnly: false, disabled: false, margin: "" },
+            React.createElement(Button, __assign({}, renderProps, { testId: testId, onClick: onClick, disabled: disabled, type: type, loading: loading, icon: icon, size: size, width: width, variant: variant, flatEdge: "right" }), children),
+            React.createElement(DropdownContent, { containerRef: dropdownContainerRef, customizationProps: dropdownCustomizationProps, filter: "", ref: dropdownContentRef, selectedValues: dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues, setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues, isButton: true, setIsOpen: setIsOpen, focused: focused, onActiveDescendantChanged: function (e) { return setActiveDescendant(e); }, setFocused: setFocused, size: size, outline: keyboardNavigated, isOpen: isOpen, id: dropdownContentId, messageOnNoResults: "", alignLeft: true, ariaRolesType: "menu" })),
+        React.createElement(Button, __assign({ variant: variant }, renderProps, { onKeyPress: function (e) {
+                if (isOpen)
+                    return;
+                if (e.key === 'Enter' || e.key === ' ') {
+                    setFocused(0);
+                    setKeyboardNavigated(true);
+                }
+            }, className: "extraMargin", testId: 'options_toggleBtn', ref: dropdownButtonRef, "aria-activedescendant": activeDescendant, role: "button", "aria-controls": dropdownContentId, disabled: disabled, type: type, size: size, onClick: function (e) {
+                e.stopPropagation();
+                setIsOpen(!isOpen);
+            }, icon: isOpen ? React.createElement(SystemIcons.ArrowDropUp, { "aria-hidden": "true", size: "16px" })
+                : React.createElement(SystemIcons.ArrowDropDown, { "aria-hidden": "true", size: "16px" }), flatEdge: "left" }))));
+};
+export default DualFunctionButton;
+var templateObject_1;

package/dist/src/Button/Iconbutton.js

@@ -0,0 +1,70 @@
+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;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS, focusStyles, invertedFocusStyles } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+import TooltipWrapper from "../Tooltips/TooltipWrapper";
+var getBorderRadius = function (props) { return (props.borderRadius ? "".concat(props.borderRadius, "px") : '4px'); };
+var getBorderRadiusStyle = function (props) {
+    var radius = getBorderRadius(props);
+    switch (props.flatEdge) {
+        case 'left':
+            return "0px ".concat(radius, " ").concat(radius, " 0px");
+        case 'right':
+            return "".concat(radius, " 0px 0px ").concat(radius);
+        case 'none':
+        default:
+            return "".concat(radius);
+    }
+};
+export var IconButtonContentStyles = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+export var IconButtonStyled = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n  display: block;\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"], ["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n  display: block;\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), function (props) { return (props.borderRadius ? "".concat(props.borderRadius, "px") : '4px'); }, IconButtonContentStyles, getBorderRadiusStyle, function (props) { return (props.unsetIconSize ? 'unset' : '24px'); }, function (props) { return (props.unsetIconSize ? 'unset' : '24px'); }, function (props) { return (props.invertFocus ? invertedFocusStyles : focusStyles); });
+export var IconButtonStyledPrimary = styled(IconButtonStyled)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"], ["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) { return (props.useTransparentBackground ? 'transparent' : COLORS.primary_500); }, function (props) { return props.iconColor || COLORS.white; }, function (props) { return props.iconColor || COLORS.white; }, IconButtonContentStyles, COLORS.primary_700, IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.primary_800, IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.neutral_200, COLORS.white, COLORS.white);
+export var IconButtonStyledSecondary = styled(IconButtonStyled)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"], ["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) { return (props.useTransparentBackground ? 'transparent' : COLORS.white); }, function (props) { return props.iconColor || COLORS.neutral_600; }, function (props) { return props.iconColor || COLORS.neutral_600; }, IconButtonContentStyles, COLORS.primary_20, IconButtonContentStyles, IconButtonContentStyles, COLORS.primary_700, IconButtonContentStyles, COLORS.primary_100, IconButtonContentStyles, IconButtonContentStyles, COLORS.primary_800, IconButtonContentStyles, function (props) { return (props.useTransparentBackground ? 'transparent' : COLORS.white); }, COLORS.neutral_300, COLORS.neutral_300);
+export var IconButton = React.forwardRef(function (_a, ref) {
+    var id = _a.id, variant = _a.variant, shape = _a.shape, action = _a.action, children = _a.children, useTransparentBackground = _a.useTransparentBackground, disabled = _a.disabled, iconColor = _a.iconColor, unsetIconSize = _a.unsetIconSize, tabIndex = _a.tabIndex, flatEdge = _a.flatEdge, borderRadius = _a.borderRadius, type = _a.type, hidden = _a.hidden, invertFocus = _a.invertFocus, dataTestId = _a.dataTestId, focusOnClick = _a.focusOnClick, tooltip = _a.tooltip, rest = __rest(_a, ["id", "variant", "shape", "action", "children", "useTransparentBackground", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "type", "hidden", "invertFocus", "dataTestId", "focusOnClick", "tooltip"]);
+    var render = function () {
+        // Let's render button
+        var ButtonVariant = IconButtonStyledPrimary;
+        switch (variant) {
+            case 'secondary':
+                ButtonVariant = IconButtonStyledSecondary;
+                break;
+        }
+        return React.createElement(ButtonVariant, __assign({ id: id, type: type !== null && type !== void 0 ? type : 'button', "data-testid": dataTestId, flatEdge: flatEdge, ref: ref, onClick: function (event) {
+                event.stopPropagation();
+                action(event);
+            }, disabled: disabled, useTransparentBackground: useTransparentBackground, iconColor: iconColor, unsetIconSize: unsetIconSize, tabIndex: tabIndex, borderRadius: borderRadius || shape === 'circular' ? 18 : 0, onMouseDown: !focusOnClick ? defaultOnMouseDownHandler : undefined, hidden: hidden, invertFocus: invertFocus }, rest),
+            React.createElement(IconButtonContentStyles, null, children));
+    };
+    return !tooltip
+        ? render()
+        : (React.createElement(TooltipWrapper, __assign({}, tooltip), render()));
+});
+export default IconButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/Button/index.js

@@ -0,0 +1,8 @@
+export { default as IconButton } from './Iconbutton';
+export * from './Iconbutton';
+export { default as Button } from './Button';
+export * from './Button';
+export { default as BackButton } from './BackButton';
+export * from './BackButton';
+export { default as DualFunctionButton } from './DualFunctionButton';
+export * from './DualFunctionButton';

package/dist/src/Card/HorizontalCard/HorizontalCard.js

@@ -0,0 +1,55 @@
+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;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { BOXSHADOWS, COLORS, focusStyles } from '../../styles';
+import { HorizontalCardThumbnail } from './HorizontalCardThumbnail';
+import { HorizontalCardBody } from './HorizontalCardBody';
+import { HorizontalCardActions } from './HorizontalCardActions';
+import { defaultOnMouseDownHandler, useActionWithin } from '../../common';
+export var HorizontalCardContentContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"], ["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"])), COLORS.white);
+export var HorizontalCardContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"])), HorizontalCardContentContainer, COLORS.neutral_200, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, COLORS.primary_20, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L3, HorizontalCardContentContainer, COLORS.primary_100, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, COLORS.neutral_100);
+export var HorizontalCard = function (_a) {
+    var title = _a.title, description = _a.description, tags = _a.tags, progress = _a.progress, icon = _a.icon, _b = _a.variant, variant = _b === void 0 ? 'outline' : _b, image = _a.image, action = _a.action, actions = _a.actions, disabled = _a.disabled, className = _a.className, dataTestId = _a.dataTestId, rest = __rest(_a, ["title", "description", "tags", "progress", "icon", "variant", "image", "action", "actions", "disabled", "className", "dataTestId"]);
+    var _c = React.useState([]), actionsRefs = _c[0], setActionsRefs = _c[1];
+    var containerRef = React.useRef(null);
+    useActionWithin(containerRef, actionsRefs);
+    var cls = "".concat(variant, " ").concat(action ? 'clickable' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(className || '');
+    var handleClick = function () {
+        !disabled && action && action();
+    };
+    var handleButtonPress = function (e) {
+        e.key === 'Enter' && handleClick();
+    };
+    return (React.createElement(HorizontalCardContainer, { ref: containerRef, tabIndex: action && !disabled ? 0 : -1, className: cls, onKeyDown: handleButtonPress, onClick: handleClick, onMouseDown: defaultOnMouseDownHandler },
+        React.createElement(HorizontalCardContentContainer, __assign({ onMouseDown: defaultOnMouseDownHandler, "data-testid": dataTestId }, rest),
+            React.createElement(HorizontalCardThumbnail, { image: image, icon: icon }),
+            React.createElement(HorizontalCardBody, { title: title, description: description, tags: tags, progress: progress }),
+            React.createElement(HorizontalCardActions, { ref: function (instance) { return setActionsRefs(instance !== null && instance !== void 0 ? instance : []); }, actions: actions, disabled: disabled }))));
+};
+export default HorizontalCard;
+var templateObject_1, templateObject_2;

package/dist/src/Card/HorizontalCard/HorizontalCardActions.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { HorizontalCardProps } from './types';
-type Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;
+declare type Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;
 export declare const HorizontalCardActions: React.ForwardRefExoticComponent<Props & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
 export {};

package/dist/src/Card/HorizontalCard/HorizontalCardActions.js

@@ -0,0 +1,39 @@
+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 { IconButton } from '../../Button';
+import { ToggleButton } from '../../Toggles';
+import { DropdownButton } from '../../Dropdown';
+import styled from 'styled-components';
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+export var HorizontalCardActions = React.forwardRef(function (_a, ref) {
+    var actions = _a.actions, disabled = _a.disabled;
+    var _b = React.useState([]), elRefs = _b[0], setElRefs = _b[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 renderAction = function (item, index) {
+        var _a, _b, _c;
+        switch (item.componentType) {
+            case 'custom': {
+                return item.content;
+            }
+            case 'icon': {
+                return React.createElement(IconButton, { ref: elRefs[index], key: index, variant: 'secondary', useTransparentBackground: true, shape: 'circular', action: item.action, tooltip: item.tooltip, disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : disabled }, item.icon);
+            }
+            case 'toggle': {
+                return React.createElement(ToggleButton, { ref: elRefs[index], key: index, active: item.active, onChange: item.onChange, defaultState: item.defaultState, activeState: item.activeState, disabled: (_b = item.disabled) !== null && _b !== void 0 ? _b : disabled });
+            }
+            case 'dropdown': {
+                return React.createElement(DropdownButton, { ref: elRefs[index], key: index, type: 'icon', items: item.items, itemsType: item.itemsType, onClick: item.onClick, icon: item.icon, action: item.action, actionIcon: item.actionIcon, actionLabel: item.actionLabel, actionVariant: item.actionVariant, actionLoading: item.actionLoading, multiSelect: item.multiSelect, scrollable: item.scrollable, pinTopItem: item.pinTopItem, maxHeight: item.maxHeight, disabled: (_c = item.disabled) !== null && _c !== void 0 ? _c : disabled });
+            }
+        }
+    };
+    return (React.createElement(React.Fragment, null, (actions === null || actions === void 0 ? void 0 : actions.length) &&
+        React.createElement(Container, null, actions === null || actions === void 0 ? void 0 : actions.map(function (item, index) { return renderAction(item, index); }))));
+});
+var templateObject_1;

package/dist/src/Card/HorizontalCard/HorizontalCardBody.d.ts

@@ -4,6 +4,6 @@ export declare const HorizontalCardBodyContainer: import("styled-components").St
 export declare const HorizontalCardBodyTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HorizontalCardBodyDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HorizontalCardBodyTagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
+declare type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
 export declare const HorizontalCardBody: React.FunctionComponent<Props>;
 export {};

package/dist/src/Card/HorizontalCard/HorizontalCardBody.js

@@ -0,0 +1,23 @@
+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, ComponentMStyling, ComponentTextStyle, ComponentXSStyling } from '../../styles';
+import { LinearProgress } from '../../LinearProgress';
+import { Tag } from '../../Tag';
+export var HorizontalCardBodyContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"])));
+export var HorizontalCardBodyTitle = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"], ["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), COLORS.neutral_500);
+export var HorizontalCardBodyDescription = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+export var HorizontalCardBodyTagsContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n"])));
+export var HorizontalCardBody = function (_a) {
+    var title = _a.title, description = _a.description, progress = _a.progress, tags = _a.tags;
+    return (React.createElement(HorizontalCardBodyContainer, null,
+        React.createElement(HorizontalCardBodyTitle, null, title),
+        description && React.createElement(HorizontalCardBodyDescription, null, description),
+        tags &&
+            React.createElement(HorizontalCardBodyTagsContainer, null, tags.map(function (tag, index) { return (React.createElement(Tag, { key: index, label: tag.label, variant: tag.variant, icon: tag.icon })); })),
+        progress && React.createElement(LinearProgress, { value: progress.value, max: progress.max })));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/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>;
-type Props = Pick<HorizontalCardProps, 'image' | 'icon'>;
+declare type Props = Pick<HorizontalCardProps, 'image' | 'icon'>;
 export declare const HorizontalCardThumbnail: React.FunctionComponent<Props>;
 export {};

package/dist/src/Card/HorizontalCard/HorizontalCardThumbnail.js

@@ -0,0 +1,21 @@
+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;

package/dist/src/Card/HorizontalCard/index.js

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './HorizontalCard';
+export * from './HorizontalCardBody';
+export * from './HorizontalCardThumbnail';

package/dist/src/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 type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {
+export declare type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {
     componentType: 'icon';
     icon: React.ReactNode;
 };
-export type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
+export declare type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
     componentType: 'toggle';
 };
 export interface CustomContentProps extends Testable {
     content: ReactNode;
 }
-export type HorizontalCardCustomContent = CustomContentProps & {
+export declare type HorizontalCardCustomContent = CustomContentProps & {
     componentType: 'custom';
 };
-export type HorizontalCardDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
+export declare 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 type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
+export declare 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/src/Card/HorizontalCard/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Card/VerticalCard/Card.js

@@ -0,0 +1,61 @@
+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;

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

@@ -0,0 +1,45 @@
+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;

package/dist/src/Card/VerticalCard/CardMiddleSection.js

@@ -0,0 +1,32 @@
+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;

package/dist/src/Card/VerticalCard/CardTopSection.js

@@ -0,0 +1,33 @@
+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 { ComponentS, ComponentTextStyle } from '../../styles/typography';
+import Checkbox from '../../InputFields/Checkbox';
+import { Tag } from '../../Tag';
+import { COLORS } from '../../index';
+import { ImageWithFallbacks } from "../../Image";
+export var CardTopSectionImageContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n"], ["\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n"])));
+export var CardTopSectionTagContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"], ["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"])));
+export var CardTopSectionContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ", "\n"], ["\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ", "\n"])), function (props) { return props.disabled ? "\n  img, svg {\n    filter: grayscale(100%);\n  }" : ''; });
+export var CardTopSectionRibbonContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"], ["\n  min-height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), function (props) { return props.$backgroundColor; }, function (props) { return props.$color; });
+export var CardTopSectionCheckboxContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), COLORS.white);
+var CardTopSection = React.forwardRef(function (_a, ref) {
+    var _b, _c, _d;
+    var selected = _a.selected, setSelected = _a.setSelected, image = _a.image, tagLabel = _a.tagLabel, tagIcon = _a.tagIcon, _e = _a.tagVariant, tagVariant = _e === void 0 ? 'positive' : _e, highlightRibbonIcon = _a.highlightRibbonIcon, highlightRibbonText = _a.highlightRibbonText, highlightRibbonContentColor = _a.highlightRibbonContentColor, highlightRibbonBgColor = _a.highlightRibbonBgColor, disabled = _a.disabled;
+    return (React.createElement(CardTopSectionContainer, { disabled: disabled, "data-testid": 'card-topSection', style: { height: (_b = image === null || image === void 0 ? void 0 : image.height) !== null && _b !== void 0 ? _b : 200 } },
+        image &&
+            React.createElement(CardTopSectionImageContainer, null,
+                React.createElement(ImageWithFallbacks, { fallbacks: (_c = image.fallbackSrc) !== null && _c !== void 0 ? _c : '', src: image.src, alt: image.alt, loader: (_d = image.loader) !== null && _d !== void 0 ? _d : false, width: image.width, height: image.height })),
+        (!!selected || !!setSelected) && (React.createElement(CardTopSectionCheckboxContainer, { "data-testid": 'card-topSection-checkbox' },
+            React.createElement(Checkbox, { ref: ref, disabled: disabled, select: function (selected) { return setSelected && setSelected(selected); }, selected: selected || false }))),
+        (tagLabel || tagIcon) && (React.createElement(CardTopSectionTagContainer, null,
+            React.createElement(Tag, { label: tagLabel, variant: tagVariant, icon: tagIcon }))),
+        (highlightRibbonIcon || highlightRibbonText) && (React.createElement(CardTopSectionRibbonContainer, { "data-testid": 'card-topSection-ribbon', "$color": highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '', "$backgroundColor": disabled ? COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '' },
+            highlightRibbonIcon,
+            highlightRibbonText && (React.createElement(ComponentS, { color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '', textStyle: ComponentTextStyle.Regular }, highlightRibbonText))))));
+});
+export default CardTopSection;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/Card/VerticalCard/index.js

@@ -0,0 +1,7 @@
+export { default as Card } from './Card';
+export { default as CardBottomSection } from './CardBottomSection';
+export * from './CardBottomSection';
+export { default as CardMiddleSection } from './CardMiddleSection';
+export * from './CardMiddleSection';
+export { default as CardTopSection } from './CardTopSection';
+export * from './CardTopSection';

package/dist/src/Card/index.js

@@ -0,0 +1,2 @@
+export * from './VerticalCard';
+export * from './HorizontalCard';