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

package/dist/Modals/ModalDialog.js

@@ -1,339 +1,166 @@
-import _pt from "prop-types";
-import React from 'react';
-import { Button, IconButton } from '../Button';
-import { SystemIcons } from '../icons';
-import { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';
-import { Size } from '../types';
-import ModalContainer from './ModalContainer';
-import { BackButtonWrapper, CloseButtonWrapper, Column, FlexContainer, ModalBody, ModalFooter, ModalHeaderActions, ModalHeaderActionsWithImage, ModalTitleSection, StyledModalHeader, ModalHoverModifier, ImageOverlay, ImageContainer } from './ModalStyles';
-import { ModalNote } from './ModalNote';
-import { TooltipWrapper } from '../Tooltips';
-import { HyperLink, ImageWithFallbacks } from '..';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var ModalDialog = function ModalDialog(_ref) {
-  var size = _ref.size,
-    isModalOpen = _ref.isModalOpen,
-    title = _ref.title,
-    topImage = _ref.topImage,
-    topImageWithFallbacksProps = _ref.topImageWithFallbacksProps,
-    topImageGrayscale = _ref.topImageGrayscale,
-    buttons = _ref.buttons,
-    leftFooterAction = _ref.leftFooterAction,
-    backButton = _ref.backButton,
-    closeAction = _ref.closeAction,
-    submitAction = _ref.submitAction,
-    tooltip = _ref.tooltip,
-    children = _ref.children,
-    note = _ref.note,
-    state = _ref.state,
-    icon = _ref.icon,
-    zIndex = _ref.zIndex,
-    contentOverflow = _ref.contentOverflow,
-    width = _ref.width,
-    hasContentBorders = _ref.hasContentBorders;
-  var getMinWidth = function getMinWidth() {
-    switch (size) {
-      case Size.Small:
-        return '320px';
-      case Size.Large:
-        return '640px';
-      case Size.Medium:
-      default:
-        return '480px';
-    }
-  };
-  var getMaxWidth = function getMaxWidth() {
-    switch (size) {
-      case Size.Small:
-        return '480px';
-      case Size.Large:
-        return '720px';
-      case Size.Medium:
-      default:
-        return '640px';
-    }
-  };
-  var getImageHeight = function getImageHeight() {
-    switch (size) {
-      case Size.Small:
-        return 160;
-      case Size.Medium:
-        return 200;
-      case Size.Large:
-        return 240;
-      default:
-        return 200;
-    }
-  };
-  var getMarginBottom = function getMarginBottom() {
-    switch (size) {
-      case Size.Small:
-        return '16px';
-      case Size.Medium:
-        return '24px';
-      case Size.Large:
-        return '32px';
-      default:
-        return '24px';
-    }
-  };
-  var getPadding = function getPadding() {
-    switch (size) {
-      case Size.Small:
-        return '16px 16px 8px';
-      case Size.Medium:
-        return '24px 24px 20px';
-      case Size.Large:
-        return '32px';
-      default:
-        return '24px 24px 16px';
-    }
-  };
-  var getMaxHeight = function getMaxHeight() {
-    switch (size) {
-      case Size.Small:
-        return 'calc(100vh - 56px)';
-      case Size.Medium:
-        return 'calc(100vh - 76px)';
-      case Size.Large:
-        return 'calc(100vh - 96px)';
-      default:
-        return 'calc(100vh - 72px)';
-    }
-  };
-  var ModalTitle = function ModalTitle(title, size) {
-    if (typeof title === 'string') {
-      switch (size) {
-        case Size.Small:
-          return /*#__PURE__*/_jsx(ComponentM, {
-            textStyle: ComponentTextStyle.Bold,
-            children: title
-          });
-        case Size.Medium:
-          return /*#__PURE__*/_jsx(ComponentL, {
-            textStyle: ComponentTextStyle.Bold,
-            children: title
-          });
-        case Size.Large:
-          return /*#__PURE__*/_jsx(ComponentXL, {
-            textStyle: ComponentTextStyle.Bold,
-            children: title
-          });
-        default:
-          return /*#__PURE__*/_jsx(ComponentL, {
-            textStyle: ComponentTextStyle.Bold,
-            children: title
-          });
-      }
-    } else {
-      return title;
-    }
-  };
-  var ModalTootip = function ModalTootip(tooltip) {
-    return /*#__PURE__*/_jsx(ModalHoverModifier, {
-      children: /*#__PURE__*/_jsx(TooltipWrapper, {
-        delay: "0s",
-        size: Size.XSmall,
-        align: "center",
-        position: "top",
-        withArrow: false,
-        label: tooltip,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          variant: "secondary",
-          shape: "circular",
-          action: function action() {},
-          children: /*#__PURE__*/_jsx(SystemIcons.Help, {
-            size: "24px",
-            color: COLORS.neutral_600
-          })
-        })
-      })
-    });
-  };
-  var ModalCloseButton = function ModalCloseButton(onClick) {
-    return /*#__PURE__*/_jsx(CloseButtonWrapper, {
-      hasImage: !!topImage || !!topImageWithFallbacksProps,
-      size: size,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        action: function action() {
-          return onClick();
-        },
-        borderRadius: 48,
-        children: /*#__PURE__*/_jsx(SystemIcons.Close, {
-          size: "24px",
-          color: COLORS.black
-        })
-      })
-    });
-  };
-  var ModalBackButton = function ModalBackButton() {
-    if (backButton) {
-      return /*#__PURE__*/_jsx(BackButtonWrapper, {
-        hasImage: !!topImage || !!topImageWithFallbacksProps,
-        size: size,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          variant: "secondary",
-          shape: "circular",
-          action: function action() {
-            return backButton();
-          },
-          borderRadius: 48,
-          children: /*#__PURE__*/_jsx(SystemIcons.ArrowLineLeft, {
-            size: "24px",
-            color: COLORS.black
-          })
-        })
-      });
-    }
-  };
-  var getLeftActionIconElement = function getLeftActionIconElement(icon) {
-    return /*#__PURE__*/React.cloneElement(icon, {
-      size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px'
-    });
-  };
-  var LeftFooterAction = function LeftFooterAction(leftFooterAction) {
-    var _variant;
-    var text = leftFooterAction.text,
-      actionType = leftFooterAction.actionType,
-      disabled = leftFooterAction.disabled,
-      icon = leftFooterAction.icon,
-      action = leftFooterAction.action;
-    switch (actionType) {
-      case 'button':
-        return /*#__PURE__*/_jsx(Button, {
-          id: 'left-action-button',
-          type: leftFooterAction === null || leftFooterAction === void 0 ? void 0 : leftFooterAction.type,
-          disabled: disabled,
-          loading: leftFooterAction === null || leftFooterAction === void 0 ? void 0 : leftFooterAction.loading,
-          icon: icon,
-          size: size,
-          onClick: action,
-          variant: (_variant = leftFooterAction === null || leftFooterAction === void 0 ? void 0 : leftFooterAction.variant) !== null && _variant !== void 0 ? _variant : 'secondary',
-          style: {
-            order: -1,
-            marginRight: 'auto'
-          },
-          children: text
-        });
-      case 'hyperlink':
-        return /*#__PURE__*/_jsxs(HyperLink, {
-          id: "left-action-hyperlink",
-          className: "footer-action",
-          href: leftFooterAction.href,
-          disabled: disabled,
-          variant: "default",
-          onClick: function onClick(e) {
-            if (action) {
-              e.preventDefault();
-              action(e);
-            }
-          },
-          children: [text, icon && getLeftActionIconElement(icon)]
-        });
-      case 'note':
-        return /*#__PURE__*/_jsxs("div", {
-          className: "footer-action note",
-          children: [icon && getLeftActionIconElement(icon), /*#__PURE__*/_jsx("span", {
-            children: text
-          })]
-        });
-    }
-  };
-  return /*#__PURE__*/_jsx(ModalContainer, {
-    showModal: isModalOpen,
-    closeModal: closeAction,
-    minWidth: getMinWidth(),
-    maxWidth: getMaxWidth(),
-    height: "auto",
-    padding: getPadding(),
-    zIndex: zIndex,
-    width: width,
-    children: /*#__PURE__*/_jsx(Column, {
-      children: /*#__PURE__*/_jsxs("form", {
-        onSubmit: submitAction,
-        style: {
-          display: 'flex',
-          flexDirection: 'column',
-          maxHeight: getMaxHeight()
-        },
-        children: [(topImage || topImageWithFallbacksProps) && /*#__PURE__*/_jsxs(StyledModalHeader, {
-          size: size,
-          $height: getImageHeight(),
-          marginBottom: getMarginBottom(),
-          children: [/*#__PURE__*/_jsxs(ImageContainer, {
-            $height: getImageHeight(),
-            children: [topImageGrayscale && /*#__PURE__*/_jsx(ImageOverlay, {
-              $height: getImageHeight()
-            }), topImage && /*#__PURE__*/_jsx("img", {
-              src: topImage,
-              alt: "Modal top"
-            }), !topImage && topImageWithFallbacksProps && /*#__PURE__*/_jsx(ImageWithFallbacks, {
-              loader: topImageWithFallbacksProps.loader,
-              alt: topImageWithFallbacksProps.alt,
-              fallbacks: topImageWithFallbacksProps.fallbacks,
-              src: topImageWithFallbacksProps.src
-            })]
-          }), /*#__PURE__*/_jsxs(ModalHeaderActionsWithImage, {
-            hasBackButton: !!backButton,
-            children: [ModalBackButton(), ModalCloseButton(closeAction)]
-          })]
-        }), /*#__PURE__*/_jsxs(ModalTitleSection, {
-          children: [/*#__PURE__*/_jsxs(FlexContainer, {
-            children: [!(topImage || topImageWithFallbacksProps) && ModalBackButton(), title && ModalTitle(title, size)]
-          }), (tooltip || !(topImage || topImageWithFallbacksProps)) && /*#__PURE__*/_jsxs(ModalHeaderActions, {
-            children: [tooltip && ModalTootip(tooltip), !(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)]
-          })]
-        }), /*#__PURE__*/_jsx(ModalBody, {
-          size: size,
-          overflow: contentOverflow,
-          hasContentBorders: hasContentBorders,
-          children: children
-        }), note && /*#__PURE__*/_jsx(ModalNote, {
-          note: note,
-          state: state,
-          size: size,
-          icon: icon
-        }), /*#__PURE__*/_jsxs(ModalFooter, {
-          size: size,
-          children: [leftFooterAction && LeftFooterAction(leftFooterAction), buttons === null || buttons === void 0 ? void 0 : buttons.map(function (b, i) {
-            return /*#__PURE__*/_jsx(Button, {
-              icon: b.icon,
-              id: b.id,
-              disabled: b.disabled,
-              loading: b.loading,
-              size: size,
-              onClick: b.action,
-              type: b.type,
-              variant: b.variant,
-              children: b.text
-            }, b.id || i);
-          })]
-        })]
-      })
-    })
-  });
-};
-ModalDialog.propTypes = {
-  isModalOpen: _pt.bool.isRequired,
-  children: _pt.node,
-  title: _pt.oneOfType([_pt.string, _pt.node]),
-  topImage: _pt.any,
-  topImageGrayscale: _pt.bool,
-  buttons: _pt.array,
-  tooltip: _pt.string,
-  backButton: _pt.func,
-  closeAction: _pt.func.isRequired,
-  submitAction: _pt.func.isRequired,
-  note: _pt.oneOfType([_pt.string, _pt.node]),
-  state: _pt.string,
-  icon: _pt.node,
-  zIndex: _pt.number,
-  contentOverflow: _pt.string,
-  width: _pt.string,
-  hasContentBorders: _pt.bool
-};
-export default ModalDialog;
-//# sourceMappingURL=ModalDialog.js.map
+import React from 'react';
+import { Button, IconButton } from '../Button';
+import { SystemIcons } from '../icons';
+import { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';
+import { Size } from '../types';
+import ModalContainer from './ModalContainer';
+import { BackButtonWrapper, CloseButtonWrapper, Column, FlexContainer, ModalBody, ModalFooter, ModalHeaderActions, ModalHeaderActionsWithImage, ModalTitleSection, StyledModalHeader, ModalHoverModifier, ImageOverlay, ImageContainer, } from './ModalStyles';
+import { ModalNote } from './ModalNote';
+import { TooltipWrapper } from '../Tooltips';
+import { HyperLink, ImageWithFallbacks } from '..';
+export var ModalDialog = function (_a) {
+    var size = _a.size, isModalOpen = _a.isModalOpen, title = _a.title, topImage = _a.topImage, topImageWithFallbacksProps = _a.topImageWithFallbacksProps, topImageGrayscale = _a.topImageGrayscale, buttons = _a.buttons, leftFooterAction = _a.leftFooterAction, backButton = _a.backButton, closeAction = _a.closeAction, submitAction = _a.submitAction, tooltip = _a.tooltip, children = _a.children, note = _a.note, state = _a.state, icon = _a.icon, zIndex = _a.zIndex, contentOverflow = _a.contentOverflow, width = _a.width, hasContentBorders = _a.hasContentBorders;
+    var getMinWidth = function () {
+        switch (size) {
+            case Size.Small:
+                return '320px';
+            case Size.Large:
+                return '640px';
+            case Size.Medium:
+            default:
+                return '480px';
+        }
+    };
+    var getMaxWidth = function () {
+        switch (size) {
+            case Size.Small:
+                return '480px';
+            case Size.Large:
+                return '720px';
+            case Size.Medium:
+            default:
+                return '640px';
+        }
+    };
+    var getImageHeight = function () {
+        switch (size) {
+            case Size.Small:
+                return 160;
+            case Size.Medium:
+                return 200;
+            case Size.Large:
+                return 240;
+            default:
+                return 200;
+        }
+    };
+    var getMarginBottom = function () {
+        switch (size) {
+            case Size.Small:
+                return '16px';
+            case Size.Medium:
+                return '24px';
+            case Size.Large:
+                return '32px';
+            default:
+                return '24px';
+        }
+    };
+    var getPadding = function () {
+        switch (size) {
+            case Size.Small:
+                return '16px 16px 8px';
+            case Size.Medium:
+                return '24px 24px 20px';
+            case Size.Large:
+                return '32px';
+            default:
+                return '24px 24px 16px';
+        }
+    };
+    var getMaxHeight = function () {
+        switch (size) {
+            case Size.Small:
+                return 'calc(100vh - 56px)';
+            case Size.Medium:
+                return 'calc(100vh - 76px)';
+            case Size.Large:
+                return 'calc(100vh - 96px)';
+            default:
+                return 'calc(100vh - 72px)';
+        }
+    };
+    var ModalTitle = function (title, size) {
+        if (typeof title === 'string') {
+            switch (size) {
+                case Size.Small:
+                    return React.createElement(ComponentM, { textStyle: ComponentTextStyle.Bold }, title);
+                case Size.Medium:
+                    return React.createElement(ComponentL, { textStyle: ComponentTextStyle.Bold }, title);
+                case Size.Large:
+                    return React.createElement(ComponentXL, { textStyle: ComponentTextStyle.Bold }, title);
+                default:
+                    return React.createElement(ComponentL, { textStyle: ComponentTextStyle.Bold }, title);
+            }
+        }
+        else {
+            return title;
+        }
+    };
+    var ModalTootip = function (tooltip) {
+        return (React.createElement(ModalHoverModifier, null,
+            React.createElement(TooltipWrapper, { delay: "0s", size: Size.XSmall, align: "center", position: "top", withArrow: false, label: tooltip },
+                React.createElement(IconButton, { variant: "secondary", shape: "circular", action: function () { } },
+                    React.createElement(SystemIcons.Help, { size: "24px", color: COLORS.neutral_600 })))));
+    };
+    var ModalCloseButton = function (onClick) {
+        return (React.createElement(CloseButtonWrapper, { hasImage: !!topImage || !!topImageWithFallbacksProps, size: size },
+            React.createElement(IconButton, { variant: "secondary", shape: "circular", action: function () { return onClick(); }, borderRadius: 48 },
+                React.createElement(SystemIcons.Close, { size: "24px", color: COLORS.black }))));
+    };
+    var ModalBackButton = function () {
+        if (backButton) {
+            return (React.createElement(BackButtonWrapper, { hasImage: !!topImage || !!topImageWithFallbacksProps, size: size },
+                React.createElement(IconButton, { variant: "secondary", shape: "circular", action: function () { return backButton(); }, borderRadius: 48 },
+                    React.createElement(SystemIcons.ArrowLineLeft, { size: "24px", color: COLORS.black }))));
+        }
+    };
+    var getLeftActionIconElement = function (icon) {
+        return React.cloneElement(icon, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });
+    };
+    var LeftFooterAction = function (leftFooterAction) {
+        var _a;
+        var text = leftFooterAction.text, actionType = leftFooterAction.actionType, disabled = leftFooterAction.disabled, icon = leftFooterAction.icon, action = leftFooterAction.action;
+        switch (actionType) {
+            case 'button':
+                return (React.createElement(Button, { id: 'left-action-button', type: leftFooterAction === null || leftFooterAction === void 0 ? void 0 : leftFooterAction.type, disabled: disabled, loading: leftFooterAction === null || leftFooterAction === void 0 ? void 0 : leftFooterAction.loading, icon: icon, size: size, onClick: action, variant: (_a = leftFooterAction === null || leftFooterAction === void 0 ? void 0 : leftFooterAction.variant) !== null && _a !== void 0 ? _a : 'secondary', style: { order: -1, marginRight: 'auto' } }, text));
+            case 'hyperlink':
+                return (React.createElement(HyperLink, { id: "left-action-hyperlink", className: "footer-action", href: leftFooterAction.href, disabled: disabled, variant: "default", onClick: function (e) {
+                        if (action) {
+                            e.preventDefault();
+                            action(e);
+                        }
+                    } },
+                    text,
+                    icon && getLeftActionIconElement(icon)));
+            case 'note':
+                return (React.createElement("div", { className: "footer-action note" },
+                    icon && getLeftActionIconElement(icon),
+                    React.createElement("span", null, text)));
+        }
+    };
+    return (React.createElement(ModalContainer, { showModal: isModalOpen, closeModal: closeAction, minWidth: getMinWidth(), maxWidth: getMaxWidth(), height: "auto", padding: getPadding(), zIndex: zIndex, width: width },
+        React.createElement(Column, null,
+            React.createElement("form", { onSubmit: submitAction, style: { display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() } },
+                (topImage || topImageWithFallbacksProps) && (React.createElement(StyledModalHeader, { size: size, "$height": getImageHeight(), marginBottom: getMarginBottom() },
+                    React.createElement(ImageContainer, { "$height": getImageHeight() },
+                        topImageGrayscale && React.createElement(ImageOverlay, { "$height": getImageHeight() }),
+                        topImage && React.createElement("img", { src: topImage, alt: "Modal top" }),
+                        !topImage && topImageWithFallbacksProps && (React.createElement(ImageWithFallbacks, { loader: topImageWithFallbacksProps.loader, alt: topImageWithFallbacksProps.alt, fallbacks: topImageWithFallbacksProps.fallbacks, src: topImageWithFallbacksProps.src }))),
+                    React.createElement(ModalHeaderActionsWithImage, { hasBackButton: !!backButton },
+                        ModalBackButton(),
+                        ModalCloseButton(closeAction)))),
+                React.createElement(ModalTitleSection, null,
+                    React.createElement(FlexContainer, null,
+                        !(topImage || topImageWithFallbacksProps) && ModalBackButton(),
+                        title && ModalTitle(title, size)),
+                    (tooltip || !(topImage || topImageWithFallbacksProps)) && (React.createElement(ModalHeaderActions, null,
+                        tooltip && ModalTootip(tooltip),
+                        !(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)))),
+                React.createElement(ModalBody, { size: size, overflow: contentOverflow, hasContentBorders: hasContentBorders }, children),
+                note && React.createElement(ModalNote, { note: note, state: state, size: size, icon: icon }),
+                React.createElement(ModalFooter, { size: size },
+                    leftFooterAction && LeftFooterAction(leftFooterAction), buttons === null || buttons === void 0 ? void 0 :
+                    buttons.map(function (b, i) { return (React.createElement(Button, { key: b.id || i, icon: b.icon, id: b.id, disabled: b.disabled, loading: b.loading, size: size, onClick: b.action, type: b.type, variant: b.variant }, b.text)); }))))));
+};
+export default ModalDialog;

package/dist/Modals/ModalNote.js

@@ -1,66 +1,27 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import { COLORS } from '..';
-import { SystemIcons } from '../icons';
-import { ModalNoteSection } from './ModalStyles';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var ModalNote = function ModalNote(_ref) {
-  var note = _ref.note,
-    icon = _ref.icon,
-    size = _ref.size,
-    _ref$state = _ref.state,
-    state = _ref$state === void 0 ? 'neutral' : _ref$state;
-  var stateVal = state.toLowerCase();
-  switch (stateVal) {
-    case 'positive':
-      return /*#__PURE__*/_jsxs(ModalNoteSection, {
-        state: stateVal,
-        size: size,
-        children: [icon ? icon : /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
-          color: COLORS.correct_500
-        }), /*#__PURE__*/_jsx("span", {
-          children: note
-        })]
-      });
-    case 'warning':
-      return /*#__PURE__*/_jsxs(ModalNoteSection, {
-        state: stateVal,
-        size: size,
-        children: [icon ? icon : /*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
-          color: COLORS.warning_500
-        }), /*#__PURE__*/_jsx("span", {
-          children: note
-        })]
-      });
-    case 'critical':
-      return /*#__PURE__*/_jsxs(ModalNoteSection, {
-        state: stateVal,
-        size: size,
-        children: [icon ? icon : /*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
-          color: COLORS.warning_500
-        }), /*#__PURE__*/_jsx("span", {
-          children: note
-        })]
-      });
-    default:
-      return /*#__PURE__*/_jsxs(ModalNoteSection, {
-        state: stateVal,
-        size: size,
-        children: [icon ? icon : /*#__PURE__*/_jsx(SystemIcons.Information, {
-          color: COLORS.primary_500,
-          className: size
-        }), /*#__PURE__*/_jsx("span", {
-          children: note
-        })]
-      });
-  }
-};
-ModalNote.propTypes = {
-  note: _pt.oneOfType([_pt.string, _pt.node]).isRequired,
-  icon: _pt.node,
-  state: _pt.string,
-  size: _pt.string
-};
-export default ModalNote;
-//# sourceMappingURL=ModalNote.js.map
+import * as React from 'react';
+import { COLORS } from '..';
+import { SystemIcons } from '../icons';
+import { ModalNoteSection } from './ModalStyles';
+export var ModalNote = function (_a) {
+    var note = _a.note, icon = _a.icon, size = _a.size, _b = _a.state, state = _b === void 0 ? 'neutral' : _b;
+    var stateVal = state.toLowerCase();
+    switch (stateVal) {
+        case 'positive':
+            return (React.createElement(ModalNoteSection, { state: stateVal, size: size },
+                icon ? icon : React.createElement(SystemIcons.CheckMark, { color: COLORS.correct_500 }),
+                React.createElement("span", null, note)));
+        case 'warning':
+            return (React.createElement(ModalNoteSection, { state: stateVal, size: size },
+                icon ? icon : React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.warning_500 }),
+                React.createElement("span", null, note)));
+        case 'critical':
+            return (React.createElement(ModalNoteSection, { state: stateVal, size: size },
+                icon ? icon : React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.warning_500 }),
+                React.createElement("span", null, note)));
+        default:
+            return (React.createElement(ModalNoteSection, { state: stateVal, size: size },
+                icon ? icon : React.createElement(SystemIcons.Information, { color: COLORS.primary_500, className: size }),
+                React.createElement("span", null, note)));
+    }
+};
+export default ModalNote;