@laerdal/life-react-components 1.6.1-dev.1 → 1.7.0-dev.2.full

package/dist/Modals/ModalContent.cjs

@@ -0,0 +1,235 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _types = require("../types");
+
+var _index = require("./index");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _Tooltips = require("../Tooltips");
+
+var _Button = require("../Button");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _HyperLink = require("../HyperLink");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["icon"],
+    _excluded2 = ["text", "variant", "action"],
+    _excluded3 = ["text", "variant", "action"],
+    _excluded4 = ["action", "text"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var HeaderText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])));
+
+var HeaderTitle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black));
+
+var HeaderNote = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+
+var HeaderActions = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n"])));
+
+var Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ", " {\n    height: max-content;\n  }\n"])), _Tooltips.TooltipContainer);
+
+var Content = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ", "\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
+
+var FooterLeftContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+
+var FooterLeftNote = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n"])), (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
+
+var FooterLeftLink = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.primary_500));
+
+var FooterRightContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 8px;\n  margin-left: auto;\n"])));
+
+var Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n"])));
+
+var Wrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\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      }\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      }\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, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null), HeaderNote, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), Content, Footer, FooterLeftNote, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null), FooterLeftLink, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), FooterRightContainer, Header, HeaderText, HeaderTitle, (0, _styles.ComponentXLStyling)(_styles.ComponentTextStyle.Bold, null), HeaderNote, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), Content, Footer, FooterLeftNote, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), FooterLeftLink, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null), FooterRightContainer);
+
+var ModalContent = function ModalContent(props) {
+  var _props$size, _props$footerActions;
+
+  var tooltip = function tooltip() {
+    return !!props.tooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltips.TooltipWrapper, {
+      delay: "0s",
+      size: _types.Size.XSmall,
+      align: "center",
+      position: "bottom",
+      withArrow: false,
+      label: props.tooltip,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        style: {
+          cursor: 'help'
+        },
+        action: function action() {},
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Help, {
+          size: "24px",
+          color: _styles.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) {
+      var icon = action.icon,
+          rest = (0, _objectWithoutProperties2.default)(action, _excluded);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, _objectSpread(_objectSpread({}, rest), {}, {
+        children: icon
+      }), action.id || index);
+    });
+  };
+
+  var getLeftActionIconElement = function getLeftActionIconElement() {
+    var _props$leftFooterActi, _props$leftFooterActi2;
+
+    return !!((_props$leftFooterActi = props.leftFooterAction) !== null && _props$leftFooterActi !== void 0 && _props$leftFooterActi.icon) && /*#__PURE__*/_react.default.cloneElement((_props$leftFooterActi2 = props.leftFooterAction) === null || _props$leftFooterActi2 === void 0 ? void 0 : _props$leftFooterActi2.icon, {
+      size: props.size === _types.Size.Small ? '20px' : props.size === _types.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.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,
+              _rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded3);
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLeftLink, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_HyperLink.HyperLink, _objectSpread(_objectSpread({}, _rest), {}, {
+              variant: _variant !== null && _variant !== void 0 ? _variant : 'default',
+              onClick: function onClick(e) {
+                if (_action) {
+                  e.preventDefault();
+
+                  _action(e);
+                }
+              },
+              children: [getLeftActionIconElement(), _text]
+            }))
+          });
+        }
+
+      case 'note':
+        {
+          var _text2 = props.leftFooterAction.text;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FooterLeftNote, {
+            children: [getLeftActionIconElement(), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: _text2
+            })]
+          });
+        }
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ModalContainer, {
+    showModal: props.isModalOpen,
+    closeModal: props.closeAction,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+      className: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : _types.Size.Medium,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderText, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderTitle, {
+            children: props.title
+          }), !!props.note && /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderNote, {
+            children: props.note
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderActions, {
+          children: [tooltip(), headerActions(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            id: 'content-modal-close-button',
+            variant: "secondary",
+            shape: "circular",
+            action: props.closeAction,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+              size: "24px",
+              color: _styles.COLORS.neutral_600
+            })
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+        children: props.children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Footer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLeftContainer, {
+          children: leftFooterAction()
+        }), /*#__PURE__*/(0, _jsxRuntime.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 = (0, _objectWithoutProperties2.default)(item, _excluded4);
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.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: _propTypes.default.bool.isRequired,
+  closeAction: _propTypes.default.func.isRequired,
+  title: _propTypes.default.string.isRequired,
+  note: _propTypes.default.string,
+  headerActions: _propTypes.default.array,
+  footerActions: _propTypes.default.array,
+  tooltip: _propTypes.default.string,
+  yOffset: _propTypes.default.number,
+  zIndex: _propTypes.default.number
+};
+var _default = ModalContent;
+exports.default = _default;
+//# sourceMappingURL=ModalContent.cjs.map

package/dist/Modals/ModalContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modals/ModalContent.tsx"],"names":["HeaderText","styled","div","HeaderTitle","ComponentTextStyle","Bold","COLORS","black","HeaderNote","Regular","neutral_600","HeaderActions","Header","TooltipContainer","Content","Size","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","React","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","title","note","children","footerActions","item","a","key","yOffset","zIndex"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling,\n  scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {Close, Help} from '../icons/systemicons/SystemIcons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\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`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\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    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  title: string;\n  note?: string;\n  headerActions?: IconButtonAction[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  yOffset?: number;\n  zIndex?: number;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      const {icon, ...rest} = action;\n      return <IconButton key={action.id || index}\n                         {...rest}>\n        {icon}\n      </IconButton>\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {getLeftActionIconElement()}\n              {text}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        <Header>\n          <HeaderText>\n            <HeaderTitle>{props.title}</HeaderTitle>\n            {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n          </HeaderText>\n          <HeaderActions>\n            {tooltip()}\n            {headerActions()}\n            <IconButton id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n                        action={props.closeAction}>\n              <Close size=\"24px\" color={COLORS.neutral_600}/>\n            </IconButton>\n          </HeaderActions>\n        </Header>\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"file":"ModalContent.cjs"}

package/dist/Modals/ModalContent.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Size } from '../types';
+import { ButtonAction, IconButtonAction, LeftFooterAction } from './ModalTypes';
+interface ModalContentProps {
+    size?: Size.Small | Size.Medium | Size.Large;
+    isModalOpen: boolean;
+    closeAction: () => void;
+    title: string;
+    note?: string;
+    headerActions?: IconButtonAction[];
+    footerActions?: ButtonAction[];
+    leftFooterAction?: LeftFooterAction;
+    tooltip?: string;
+    yOffset?: number;
+    zIndex?: number;
+}
+declare const ModalContent: React.FC<ModalContentProps>;
+export default ModalContent;

package/dist/Modals/ModalContent.js

@@ -0,0 +1,204 @@
+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"],
+    _excluded2 = ["text", "variant", "action"],
+    _excluded3 = ["text", "variant", "action"],
+    _excluded4 = ["action", "text"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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, scrollBarStyling } from '../styles';
+import { TooltipContainer, TooltipWrapper } from '../Tooltips';
+import { Button, IconButton } from '../Button';
+import { Close, Help } from '../icons/systemicons/SystemIcons';
+import { HyperLink } from '../HyperLink';
+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"])));
+var HeaderTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black));
+var HeaderNote = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+var HeaderActions = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n"])));
+var Header = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ", " {\n    height: max-content;\n  }\n"])), TooltipContainer);
+var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ", "\n"])), scrollBarStyling(Size.Small));
+var FooterLeftContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var FooterLeftNote = styled.div(_templateObject8 || (_templateObject8 = _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(_templateObject9 || (_templateObject9 = _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(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  gap: 8px;\n  margin-left: auto;\n"])));
+var Footer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n"])));
+var Wrapper = styled.div(_templateObject12 || (_templateObject12 = _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      }\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      }\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), HeaderNote, ComponentXSStyling(ComponentTextStyle.Regular, null), Content, Footer, FooterLeftNote, ComponentXSStyling(ComponentTextStyle.Bold, null), FooterLeftLink, ComponentMStyling(ComponentTextStyle.Bold, null), FooterRightContainer, Header, HeaderText, HeaderTitle, ComponentXLStyling(ComponentTextStyle.Bold, null), HeaderNote, ComponentSStyling(ComponentTextStyle.Regular, 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(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) {
+      var icon = action.icon,
+          rest = _objectWithoutProperties(action, _excluded);
+
+      return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({}, rest), {}, {
+        children: icon
+      }), action.id || index);
+    });
+  };
+
+  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, _excluded2);
+
+          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,
+              _rest = _objectWithoutProperties(_ref2, _excluded3);
+
+          return /*#__PURE__*/_jsx(FooterLeftLink, {
+            children: /*#__PURE__*/_jsxs(HyperLink, _objectSpread(_objectSpread({}, _rest), {}, {
+              variant: _variant !== null && _variant !== void 0 ? _variant : 'default',
+              onClick: function onClick(e) {
+                if (_action) {
+                  e.preventDefault();
+
+                  _action(e);
+                }
+              },
+              children: [getLeftActionIconElement(), _text]
+            }))
+          });
+        }
+
+      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: [/*#__PURE__*/_jsxs(Header, {
+        children: [/*#__PURE__*/_jsxs(HeaderText, {
+          children: [/*#__PURE__*/_jsx(HeaderTitle, {
+            children: props.title
+          }), !!props.note && /*#__PURE__*/_jsx(HeaderNote, {
+            children: props.note
+          })]
+        }), /*#__PURE__*/_jsxs(HeaderActions, {
+          children: [tooltip(), headerActions(), /*#__PURE__*/_jsx(IconButton, {
+            id: 'content-modal-close-button',
+            variant: "secondary",
+            shape: "circular",
+            action: props.closeAction,
+            children: /*#__PURE__*/_jsx(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, _excluded4);
+
+            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,
+  title: _pt.string.isRequired,
+  note: _pt.string,
+  headerActions: _pt.array,
+  footerActions: _pt.array,
+  tooltip: _pt.string,
+  yOffset: _pt.number,
+  zIndex: _pt.number
+};
+export default ModalContent;
+//# sourceMappingURL=ModalContent.js.map

package/dist/Modals/ModalContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modals/ModalContent.tsx"],"names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","scrollBarStyling","TooltipContainer","TooltipWrapper","Button","IconButton","Close","Help","HyperLink","HeaderText","div","HeaderTitle","Bold","black","HeaderNote","Regular","neutral_600","HeaderActions","Header","Content","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","title","note","children","footerActions","item","a","key","yOffset","zIndex"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling,\n  scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {Close, Help} from '../icons/systemicons/SystemIcons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\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`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\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    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  title: string;\n  note?: string;\n  headerActions?: IconButtonAction[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  yOffset?: number;\n  zIndex?: number;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      const {icon, ...rest} = action;\n      return <IconButton key={action.id || index}\n                         {...rest}>\n        {icon}\n      </IconButton>\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {getLeftActionIconElement()}\n              {text}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        <Header>\n          <HeaderText>\n            <HeaderTitle>{props.title}</HeaderTitle>\n            {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n          </HeaderText>\n          <HeaderActions>\n            {tooltip()}\n            {headerActions()}\n            <IconButton id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n                        action={props.closeAction}>\n              <Close size=\"24px\" color={COLORS.neutral_600}/>\n            </IconButton>\n          </HeaderActions>\n        </Header>\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"file":"ModalContent.js"}