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

package/dist/Modals/ModalContent.js

@@ -1,159 +1,246 @@
-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 { Size } from '../types';
-import { ModalContainer } from './index';
-import styled from 'styled-components';
-import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXLStyling, ComponentXSStyling, ComponentXXSStyling, Note, scrollBarStyling } from '../styles';
-import { TooltipContainer, TooltipWrapper } from '../Tooltips';
-import { Button, IconButton } from '../Button';
-import { SystemIcons } from '../icons';
-import { HyperLink } from '../HyperLink';
-import { DropdownButton } from "../Dropdown";
-import { ToggleButton } from "../Toggles";
-import { ImageWithFallbacks } from "../Image";
-var HeaderText = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n\n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n\n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n\n"])));
-var HeaderTitle = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black));
-var HeaderActions = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex-direction: row;\n"])));
-var HeaderWithImageActions = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    margin-left: auto;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    margin-left: auto;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n"])));
-var HeaderWithImage = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  img {\n    object-fit: cover;\n    width: 100%;\n    height: 160px;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n  }\n\n  .medium & {\n    img {\n      height: 200px;\n    }\n  }\n\n  .large & {\n    img {\n      height: 240px;\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  img {\n    object-fit: cover;\n    width: 100%;\n    height: 160px;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n  }\n\n  .medium & {\n    img {\n      height: 200px;\n    }\n  }\n\n  .large & {\n    img {\n      height: 240px;\n    }\n  }\n"])));
-var Header = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ", " {\n    height: max-content;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ", " {\n    height: max-content;\n  }\n"])), TooltipContainer);
-var Content = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ", "\n"], ["\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ", "\n"])), scrollBarStyling(Size.Small));
-var FooterLeftContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var FooterLeftNote = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n"])), ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
-var FooterLeftLink = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n"], ["\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500));
-var FooterRightContainer = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  gap: 8px;\n  margin-left: auto;\n"], ["\n  gap: 8px;\n  margin-left: auto;\n"])));
-var Footer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n"])));
-var Wrapper = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ", " {\n      padding: 12px 12px 4px 12px;\n\n      ", " {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 16px 0 24px;\n    }\n\n    ", " {\n      padding: 12px 24px 20px 24px;\n\n      ", " {\n        ", "\n        gap: 6px;\n      }\n\n      ", " {\n        a {\n          gap: 6px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ", " {\n      padding: 20px 20px 4px 20px;\n\n      ", " {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 24px 0 32px;\n    }\n\n    ", " {\n      padding: 16px 32px 32px 32px;\n\n      ", " {\n        ", "\n        gap: 8px;\n      }\n\n      ", " {\n        a {\n          gap: 8px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 16px;\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ", " {\n      padding: 12px 12px 4px 12px;\n\n      ", " {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 16px 0 24px;\n    }\n\n    ", " {\n      padding: 12px 24px 20px 24px;\n\n      ", " {\n        ", "\n        gap: 6px;\n      }\n\n      ", " {\n        a {\n          gap: 6px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ", " {\n      padding: 20px 20px 4px 20px;\n\n      ", " {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 24px 0 32px;\n    }\n\n    ", " {\n      padding: 16px 32px 32px 32px;\n\n      ", " {\n        ", "\n        gap: 8px;\n      }\n\n      ", " {\n        a {\n          gap: 8px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 16px;\n      }\n    }\n  }\n"])), Header, HeaderText, HeaderTitle, ComponentLStyling(ComponentTextStyle.Bold, null), Content, Footer, FooterLeftNote, ComponentXSStyling(ComponentTextStyle.Bold, null), FooterLeftLink, ComponentMStyling(ComponentTextStyle.Bold, null), FooterRightContainer, Header, HeaderText, HeaderTitle, ComponentXLStyling(ComponentTextStyle.Bold, null), Content, Footer, FooterLeftNote, ComponentSStyling(ComponentTextStyle.Bold, null), FooterLeftLink, ComponentLStyling(ComponentTextStyle.Bold, null), FooterRightContainer);
-var ModalContent = function (props) {
-    var _a, _b;
-    var tooltip = function () {
-        return !!props.tooltip &&
-            React.createElement(TooltipWrapper, { delay: "0s", size: Size.XSmall, align: "center", position: "bottom", withArrow: false, label: props.tooltip },
-                React.createElement(IconButton, { variant: "secondary", shape: "circular", style: { cursor: 'help' }, action: function () {
-                    } },
-                    React.createElement(SystemIcons.Help, { size: "24px", color: COLORS.neutral_600 })));
-    };
-    var headerActions = function () {
-        var _a;
-        return (_a = props.headerActions) === null || _a === void 0 ? void 0 : _a.map(function (action, index) {
-            switch (action.componentType) {
-                case 'icon': {
-                    var icon = action.icon, componentType = action.componentType, rest = __rest(action, ["icon", "componentType"]);
-                    return React.createElement(IconButton, __assign({ key: action.id || index }, rest), icon);
-                }
-                case 'dropdown': {
-                    var componentType = action.componentType, rest = __rest(action, ["componentType"]);
-                    return React.createElement(DropdownButton, __assign({ type: 'icon', size: props.size }, rest));
-                }
-                case 'toggle': {
-                    var componentType = action.componentType, rest = __rest(action, ["componentType"]);
-                    return React.createElement(ToggleButton, __assign({}, rest));
-                }
-            }
-        });
-    };
-    var getLeftActionIconElement = function () {
-        var _a, _b;
-        return !!((_a = props.leftFooterAction) === null || _a === void 0 ? void 0 : _a.icon) &&
-            React.cloneElement((_b = props.leftFooterAction) === null || _b === void 0 ? void 0 : _b.icon, {
-                size: props.size === Size.Small
-                    ? '20px'
-                    : props.size === Size.Large
-                        ? '28px'
-                        : '24px'
-            });
-    };
-    var leftFooterAction = function () {
-        if (!props.leftFooterAction)
-            return null;
-        switch (props.leftFooterAction.actionType) {
-            case 'button': {
-                var _a = props.leftFooterAction, text = _a.text, variant = _a.variant, action = _a.action, rest = __rest(_a, ["text", "variant", "action"]);
-                return (React.createElement(Button, __assign({}, rest, { size: props.size, onClick: action, variant: variant !== null && variant !== void 0 ? variant : 'secondary' }), text));
-            }
-            case 'hyperlink': {
-                var _b = props.leftFooterAction, text = _b.text, variant = _b.variant, action_1 = _b.action, rest = __rest(_b, ["text", "variant", "action"]);
-                return (React.createElement(FooterLeftLink, null,
-                    React.createElement(HyperLink, __assign({}, rest, { variant: variant !== null && variant !== void 0 ? variant : 'default', onClick: function (e) {
-                            if (action_1) {
-                                e.preventDefault();
-                                action_1(e);
-                            }
-                        } }),
-                        text,
-                        getLeftActionIconElement())));
-            }
-            case 'note': {
-                var text = props.leftFooterAction.text;
-                return (React.createElement(FooterLeftNote, null,
-                    getLeftActionIconElement(),
-                    React.createElement("span", null, text)));
-            }
-        }
-    };
-    return (React.createElement(ModalContainer, { showModal: props.isModalOpen, closeModal: props.closeAction },
-        React.createElement(Wrapper, { className: (_a = props.size) !== null && _a !== void 0 ? _a : Size.Medium },
-            props.image &&
-                React.createElement(HeaderWithImage, null,
-                    React.createElement(ImageWithFallbacks, __assign({}, props.image)),
-                    React.createElement(HeaderWithImageActions, null,
-                        props.onBack &&
-                            React.createElement(IconButton, { variant: "secondary", shape: "circular", action: props.onBack },
-                                React.createElement(SystemIcons.ArrowLineLeft, null)),
-                        React.createElement(IconButton, { dataTestId: 'content-modal-close-button', id: 'content-modal-close-button', variant: "secondary", shape: "circular", action: props.closeAction },
-                            React.createElement(SystemIcons.Close, { size: "24px", color: COLORS.neutral_600 }))),
-                    React.createElement(Header, null,
-                        React.createElement(HeaderText, null,
-                            React.createElement(HeaderTitle, null, props.title),
-                            !!props.note && React.createElement(Note, null, props.note)),
-                        React.createElement(HeaderActions, null,
-                            tooltip(),
-                            headerActions()))),
-            !props.image &&
-                React.createElement(Header, null,
-                    props.onBack &&
-                        React.createElement(IconButton, { variant: "secondary", shape: "circular", action: props.onBack },
-                            React.createElement(SystemIcons.ArrowLineLeft, null)),
-                    React.createElement(HeaderText, null,
-                        React.createElement(HeaderTitle, null, props.title),
-                        !!props.note && React.createElement(Note, null, props.note)),
-                    React.createElement(HeaderActions, null,
-                        tooltip(),
-                        headerActions(),
-                        React.createElement(IconButton, { dataTestId: 'content-modal-close-button', id: 'content-modal-close-button', variant: "secondary", shape: "circular", action: props.closeAction },
-                            React.createElement(SystemIcons.Close, { size: "24px", color: COLORS.neutral_600 })))),
-            React.createElement(Content, null, props.children),
-            React.createElement(Footer, null,
-                React.createElement(FooterLeftContainer, null, leftFooterAction()),
-                React.createElement(FooterRightContainer, null, (_b = props.footerActions) === null || _b === void 0 ? void 0 : _b.map(function (item, index) {
-                    var action = item.action, text = item.text, rest = __rest(item, ["action", "text"]);
-                    return React.createElement(Button, __assign({ key: rest.id || index }, rest, { onClick: action, size: props.size, onKeyDown: function (a) { return (a.key === 'Enter' || a.key === ' ') && action(a); } }), text);
-                }))))));
-};
-export default ModalContent;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["icon", "componentType"],
+  _excluded2 = ["componentType"],
+  _excluded3 = ["componentType"],
+  _excluded4 = ["text", "variant", "action"],
+  _excluded5 = ["text", "variant", "action"],
+  _excluded6 = ["action", "text"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+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 React from 'react';
+import { Size } from '../types';
+import { ModalContainer } from './index';
+import styled from 'styled-components';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXLStyling, ComponentXSStyling, ComponentXXSStyling, Note, scrollBarStyling } from '../styles';
+import { TooltipContainer, TooltipWrapper } from '../Tooltips';
+import { Button, IconButton } from '../Button';
+import { SystemIcons } from '../icons';
+import { HyperLink } from '../HyperLink';
+import { DropdownButton } from "../Dropdown";
+import { ToggleButton } from "../Toggles";
+import { ImageWithFallbacks } from "../Image";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var HeaderText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n\n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n\n"])));
+var HeaderTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black));
+var HeaderActions = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n"])));
+var HeaderWithImageActions = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: absolute;\n\n  button:only-child {\n    margin-left: auto;\n  }\n\n  top: 4px;\n  left: 4px;\n  right: 4px;\n\n  .medium & {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n  }\n\n  .large & {\n    top: 20px;\n    left: 20px;\n    right: 20px;\n  }\n"])));
+var HeaderWithImage = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  img {\n    object-fit: cover;\n    width: 100%;\n    height: 160px;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n  }\n\n  .medium & {\n    img {\n      height: 200px;\n    }\n  }\n\n  .large & {\n    img {\n      height: 240px;\n    }\n  }\n"])));
+var Header = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ", " {\n    height: max-content;\n  }\n"])), TooltipContainer);
+var Content = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ", "\n"])), scrollBarStyling(Size.Small));
+var FooterLeftContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var FooterLeftNote = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n"])), ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var FooterLeftLink = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500));
+var FooterRightContainer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  gap: 8px;\n  margin-left: auto;\n"])));
+var Footer = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n"])));
+var Wrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ", " {\n      padding: 12px 12px 4px 12px;\n\n      ", " {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 16px 0 24px;\n    }\n\n    ", " {\n      padding: 12px 24px 20px 24px;\n\n      ", " {\n        ", "\n        gap: 6px;\n      }\n\n      ", " {\n        a {\n          gap: 6px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ", " {\n      padding: 20px 20px 4px 20px;\n\n      ", " {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ", " {\n          ", "\n        }\n      }\n    }\n\n    ", " {\n      padding: 0 24px 0 32px;\n    }\n\n    ", " {\n      padding: 16px 32px 32px 32px;\n\n      ", " {\n        ", "\n        gap: 8px;\n      }\n\n      ", " {\n        a {\n          gap: 8px;\n        }\n\n        ", "\n      }\n\n      ", " {\n        gap: 16px;\n      }\n    }\n  }\n"])), Header, HeaderText, HeaderTitle, ComponentLStyling(ComponentTextStyle.Bold, null), Content, Footer, FooterLeftNote, ComponentXSStyling(ComponentTextStyle.Bold, null), FooterLeftLink, ComponentMStyling(ComponentTextStyle.Bold, null), FooterRightContainer, Header, HeaderText, HeaderTitle, ComponentXLStyling(ComponentTextStyle.Bold, null), Content, Footer, FooterLeftNote, ComponentSStyling(ComponentTextStyle.Bold, null), FooterLeftLink, ComponentLStyling(ComponentTextStyle.Bold, null), FooterRightContainer);
+var ModalContent = function ModalContent(props) {
+  var _props$size, _props$footerActions;
+  var tooltip = function tooltip() {
+    return !!props.tooltip && /*#__PURE__*/_jsx(TooltipWrapper, {
+      delay: "0s",
+      size: Size.XSmall,
+      align: "center",
+      position: "bottom",
+      withArrow: false,
+      label: props.tooltip,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        style: {
+          cursor: 'help'
+        },
+        action: function action() {},
+        children: /*#__PURE__*/_jsx(SystemIcons.Help, {
+          size: "24px",
+          color: COLORS.neutral_600
+        })
+      })
+    });
+  };
+  var headerActions = function headerActions() {
+    var _props$headerActions;
+    return (_props$headerActions = props.headerActions) === null || _props$headerActions === void 0 ? void 0 : _props$headerActions.map(function (action, index) {
+      switch (action.componentType) {
+        case 'icon':
+          {
+            var icon = action.icon,
+              componentType = action.componentType,
+              rest = _objectWithoutProperties(action, _excluded);
+            return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({}, rest), {}, {
+              children: icon
+            }), action.id || index);
+          }
+        case 'dropdown':
+          {
+            var _componentType = action.componentType,
+              _rest = _objectWithoutProperties(action, _excluded2);
+            return /*#__PURE__*/_jsx(DropdownButton, _objectSpread({
+              type: 'icon',
+              size: props.size
+            }, _rest));
+          }
+        case 'toggle':
+          {
+            var _componentType2 = action.componentType,
+              _rest2 = _objectWithoutProperties(action, _excluded3);
+            return /*#__PURE__*/_jsx(ToggleButton, _objectSpread({}, _rest2));
+          }
+      }
+    });
+  };
+  var getLeftActionIconElement = function getLeftActionIconElement() {
+    var _props$leftFooterActi, _props$leftFooterActi2;
+    return !!((_props$leftFooterActi = props.leftFooterAction) !== null && _props$leftFooterActi !== void 0 && _props$leftFooterActi.icon) && /*#__PURE__*/React.cloneElement((_props$leftFooterActi2 = props.leftFooterAction) === null || _props$leftFooterActi2 === void 0 ? void 0 : _props$leftFooterActi2.icon, {
+      size: props.size === Size.Small ? '20px' : props.size === Size.Large ? '28px' : '24px'
+    });
+  };
+  var leftFooterAction = function leftFooterAction() {
+    if (!props.leftFooterAction) return null;
+    switch (props.leftFooterAction.actionType) {
+      case 'button':
+        {
+          var _ref = props.leftFooterAction,
+            text = _ref.text,
+            variant = _ref.variant,
+            action = _ref.action,
+            rest = _objectWithoutProperties(_ref, _excluded4);
+          return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, rest), {}, {
+            size: props.size,
+            onClick: action,
+            variant: variant !== null && variant !== void 0 ? variant : 'secondary',
+            children: text
+          }));
+        }
+      case 'hyperlink':
+        {
+          var _ref2 = props.leftFooterAction,
+            _text = _ref2.text,
+            _variant = _ref2.variant,
+            _action = _ref2.action,
+            _rest3 = _objectWithoutProperties(_ref2, _excluded5);
+          return /*#__PURE__*/_jsx(FooterLeftLink, {
+            children: /*#__PURE__*/_jsxs(HyperLink, _objectSpread(_objectSpread({}, _rest3), {}, {
+              variant: _variant !== null && _variant !== void 0 ? _variant : 'default',
+              onClick: function onClick(e) {
+                if (_action) {
+                  e.preventDefault();
+                  _action(e);
+                }
+              },
+              children: [_text, getLeftActionIconElement()]
+            }))
+          });
+        }
+      case 'note':
+        {
+          var _text2 = props.leftFooterAction.text;
+          return /*#__PURE__*/_jsxs(FooterLeftNote, {
+            children: [getLeftActionIconElement(), /*#__PURE__*/_jsx("span", {
+              children: _text2
+            })]
+          });
+        }
+    }
+  };
+  return /*#__PURE__*/_jsx(ModalContainer, {
+    showModal: props.isModalOpen,
+    closeModal: props.closeAction,
+    children: /*#__PURE__*/_jsxs(Wrapper, {
+      className: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : Size.Medium,
+      children: [props.image && /*#__PURE__*/_jsxs(HeaderWithImage, {
+        children: [/*#__PURE__*/_jsx(ImageWithFallbacks, _objectSpread({}, props.image)), /*#__PURE__*/_jsxs(HeaderWithImageActions, {
+          children: [props.onBack && /*#__PURE__*/_jsx(IconButton, {
+            variant: "secondary",
+            shape: "circular",
+            action: props.onBack,
+            children: /*#__PURE__*/_jsx(SystemIcons.ArrowLineLeft, {})
+          }), /*#__PURE__*/_jsx(IconButton, {
+            dataTestId: 'content-modal-close-button',
+            id: 'content-modal-close-button',
+            variant: "secondary",
+            shape: "circular",
+            action: props.closeAction,
+            children: /*#__PURE__*/_jsx(SystemIcons.Close, {
+              size: "24px",
+              color: COLORS.neutral_600
+            })
+          })]
+        }), /*#__PURE__*/_jsxs(Header, {
+          children: [/*#__PURE__*/_jsxs(HeaderText, {
+            children: [/*#__PURE__*/_jsx(HeaderTitle, {
+              children: props.title
+            }), !!props.note && /*#__PURE__*/_jsx(Note, {
+              children: props.note
+            })]
+          }), /*#__PURE__*/_jsxs(HeaderActions, {
+            children: [tooltip(), headerActions()]
+          })]
+        })]
+      }), !props.image && /*#__PURE__*/_jsxs(Header, {
+        children: [props.onBack && /*#__PURE__*/_jsx(IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          action: props.onBack,
+          children: /*#__PURE__*/_jsx(SystemIcons.ArrowLineLeft, {})
+        }), /*#__PURE__*/_jsxs(HeaderText, {
+          children: [/*#__PURE__*/_jsx(HeaderTitle, {
+            children: props.title
+          }), !!props.note && /*#__PURE__*/_jsx(Note, {
+            children: props.note
+          })]
+        }), /*#__PURE__*/_jsxs(HeaderActions, {
+          children: [tooltip(), headerActions(), /*#__PURE__*/_jsx(IconButton, {
+            dataTestId: 'content-modal-close-button',
+            id: 'content-modal-close-button',
+            variant: "secondary",
+            shape: "circular",
+            action: props.closeAction,
+            children: /*#__PURE__*/_jsx(SystemIcons.Close, {
+              size: "24px",
+              color: COLORS.neutral_600
+            })
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Content, {
+        children: props.children
+      }), /*#__PURE__*/_jsxs(Footer, {
+        children: [/*#__PURE__*/_jsx(FooterLeftContainer, {
+          children: leftFooterAction()
+        }), /*#__PURE__*/_jsx(FooterRightContainer, {
+          children: (_props$footerActions = props.footerActions) === null || _props$footerActions === void 0 ? void 0 : _props$footerActions.map(function (item, index) {
+            var action = item.action,
+              text = item.text,
+              rest = _objectWithoutProperties(item, _excluded6);
+            return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, rest), {}, {
+              onClick: action,
+              size: props.size,
+              onKeyDown: function onKeyDown(a) {
+                return (a.key === 'Enter' || a.key === ' ') && action(a);
+              },
+              children: text
+            }), rest.id || index);
+          })
+        })]
+      })]
+    })
+  });
+};
+ModalContent.propTypes = {
+  isModalOpen: _pt.bool.isRequired,
+  closeAction: _pt.func.isRequired,
+  onBack: _pt.func,
+  title: _pt.string.isRequired,
+  note: _pt.string,
+  headerActions: _pt.array,
+  footerActions: _pt.array,
+  tooltip: _pt.string,
+  zIndex: _pt.number,
+  children: _pt.node
+};
+export default ModalContent;
+//# sourceMappingURL=ModalContent.js.map