@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
538 lines • 25.6 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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, { useEffect, useRef, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import HUDScrollContainer from "./HUDScrollContainer.js";
import HUDLoading from "./HUDLoading.js";
import HUDModal from "./HUDModal.js";
import HUDIcon from "./HUDIcon.js";
var baseNotificationConfigurationSettings = {
completionContainer: {
position: "fixed",
overflow: "hidden",
transition: "all 0.3s ease",
borderRadius: "8px",
backgroundColor: "transparent",
color: "#333333",
maxHeight: "90%",
maxWidth: "90%",
height: "269px",
width: "320px",
zIndex: 1269,
padding: "20px"
},
container: {
position: "fixed",
overflow: "hidden",
transition: "all 0.3s ease",
boxShadow: "0 2px 15px rgba(0, 0, 0, 0.1)",
border: "1px solid #dddddd",
borderRadius: "8px",
backgroundColor: "#ffffff",
color: "#333333",
maxHeight: "90%",
maxWidth: "90%",
width: "320px",
zIndex: 1269,
padding: "20px"
},
backdrop: {
position: "fixed",
backgroundColor: "rgba(0, 0, 0, 0.3)",
backdropFilter: "blur(5px)",
zIndex: 1069,
bottom: 0,
right: 0,
left: 0,
top: 0
},
content: {
position: "relative",
display: "flex",
justifyContent: "center",
flexDirection: "column",
width: "calc(100%)"
},
header: {
position: "relative",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "15px"
},
title: {
flex: 1,
textAlign: "center",
fontSize: "18px",
fontWeight: "600",
color: "#333",
margin: "0 10px"
},
closeButton: {
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
fontSize: "20px",
border: "none",
borderRadius: "50%",
background: "none",
color: "#606060",
padding: "0"
},
notificationIcon: {
display: "flex",
height: "50px",
width: "50px",
margin: "0 auto 10px"
},
icon: {
height: "24px",
width: "24px"
},
message: {
position: "relative",
display: "flex",
textAlign: "center",
overflow: "auto",
wordWrap: "break-word",
lineHeight: "1.5069",
fontSize: "16px",
maxHeight: "83.969px",
width: "calc(91.69%)",
margin: "10px auto"
},
showMoreButton: {
display: "block",
cursor: "pointer",
fontWeight: "bold",
border: "none",
borderRadius: "5px",
backgroundColor: "#2196f3",
color: "#fff",
padding: "10px 20px",
margin: "10px auto"
},
footer: {
position: "relative",
display: "flex",
justifyContent: "center",
textAlign: "center",
fontSize: "12px",
color: "#655777",
width: "calc(91.69%)",
paddingBottom: "5px",
margin: "10px auto"
},
modal: {
display: "flex",
flexDirection: "column",
overflowY: "auto",
borderRadius: "8px",
height: "15.69rem",
width: "auto",
marginTop: "0rem"
}
};
function HUDUtilityNotification(hudUtilityNotificationConfigurationSettings) {
var _hudUtilityNotificati = hudUtilityNotificationConfigurationSettings.notificationCompletionContainerConfigurationSettings,
notificationCompletionContainerConfigurationSettings = _hudUtilityNotificati === void 0 ? {} : _hudUtilityNotificati,
_hudUtilityNotificati2 = hudUtilityNotificationConfigurationSettings.notificationNotificationIconConfigurationSettings,
notificationNotificationIconConfigurationSettings = _hudUtilityNotificati2 === void 0 ? {} : _hudUtilityNotificati2,
_hudUtilityNotificati3 = hudUtilityNotificationConfigurationSettings.notificationShowMoreButtonConfigurationSettings,
notificationShowMoreButtonConfigurationSettings = _hudUtilityNotificati3 === void 0 ? {} : _hudUtilityNotificati3,
_hudUtilityNotificati4 = hudUtilityNotificationConfigurationSettings.notificationProgressBarConfigurationSettings,
notificationProgressBarConfigurationSettings = _hudUtilityNotificati4 === void 0 ? {} : _hudUtilityNotificati4,
_hudUtilityNotificati5 = hudUtilityNotificationConfigurationSettings.notificationCloseButtonConfigurationSettings,
notificationCloseButtonConfigurationSettings = _hudUtilityNotificati5 === void 0 ? {} : _hudUtilityNotificati5,
_hudUtilityNotificati6 = hudUtilityNotificationConfigurationSettings.notificationContainerConfigurationSettings,
notificationContainerConfigurationSettings = _hudUtilityNotificati6 === void 0 ? {} : _hudUtilityNotificati6,
_hudUtilityNotificati7 = hudUtilityNotificationConfigurationSettings.notificationBackDropConfigurationSettings,
notificationBackDropConfigurationSettings = _hudUtilityNotificati7 === void 0 ? {} : _hudUtilityNotificati7,
_hudUtilityNotificati8 = hudUtilityNotificationConfigurationSettings.notificationMessageConfigurationSettings,
notificationMessageConfigurationSettings = _hudUtilityNotificati8 === void 0 ? {} : _hudUtilityNotificati8,
_hudUtilityNotificati9 = hudUtilityNotificationConfigurationSettings.notificationHeaderConfigurationSettings,
notificationHeaderConfigurationSettings = _hudUtilityNotificati9 === void 0 ? {} : _hudUtilityNotificati9,
_hudUtilityNotificati10 = hudUtilityNotificationConfigurationSettings.notificationFooterConfigurationSettings,
notificationFooterConfigurationSettings = _hudUtilityNotificati10 === void 0 ? {} : _hudUtilityNotificati10,
_hudUtilityNotificati11 = hudUtilityNotificationConfigurationSettings.notificationTitleConfigurationSettings,
notificationTitleConfigurationSettings = _hudUtilityNotificati11 === void 0 ? {} : _hudUtilityNotificati11,
_hudUtilityNotificati12 = hudUtilityNotificationConfigurationSettings.notificationModalConfigurationSettings,
notificationModalConfigurationSettings = _hudUtilityNotificati12 === void 0 ? {} : _hudUtilityNotificati12,
_hudUtilityNotificati13 = hudUtilityNotificationConfigurationSettings.notificationIconConfigurationSettings,
notificationIconConfigurationSettings = _hudUtilityNotificati13 === void 0 ? {} : _hudUtilityNotificati13,
_hudUtilityNotificati14 = hudUtilityNotificationConfigurationSettings.notificationMessageContainerConfigurations,
notificationMessageContainerConfigurations = _hudUtilityNotificati14 === void 0 ? {} : _hudUtilityNotificati14,
_hudUtilityNotificati15 = hudUtilityNotificationConfigurationSettings.notificationModalContainerConfigurations,
notificationModalContainerConfigurations = _hudUtilityNotificati15 === void 0 ? {} : _hudUtilityNotificati15,
_hudUtilityNotificati16 = hudUtilityNotificationConfigurationSettings.notificationProgressBarConfigurations,
notificationProgressBarConfigurations = _hudUtilityNotificati16 === void 0 ? {} : _hudUtilityNotificati16,
_hudUtilityNotificati17 = hudUtilityNotificationConfigurationSettings.notificationCompletionConfigurations,
notificationCompletionConfigurations = _hudUtilityNotificati17 === void 0 ? {} : _hudUtilityNotificati17,
_hudUtilityNotificati18 = hudUtilityNotificationConfigurationSettings.notificationFooterConfigurations,
notificationFooterConfigurations = _hudUtilityNotificati18 === void 0 ? {} : _hudUtilityNotificati18,
_hudUtilityNotificati19 = hudUtilityNotificationConfigurationSettings.notificationModalConfigurations,
notificationModalConfigurations = _hudUtilityNotificati19 === void 0 ? {} : _hudUtilityNotificati19,
_hudUtilityNotificati20 = hudUtilityNotificationConfigurationSettings.notificationCompletionAnimationContent,
notificationCompletionAnimationContent = _hudUtilityNotificati20 === void 0 ? null : _hudUtilityNotificati20,
_hudUtilityNotificati21 = hudUtilityNotificationConfigurationSettings.notificationModalBottomContent,
notificationModalBottomContent = _hudUtilityNotificati21 === void 0 ? null : _hudUtilityNotificati21,
_hudUtilityNotificati22 = hudUtilityNotificationConfigurationSettings.notificationModalCenterContent,
notificationModalCenterContent = _hudUtilityNotificati22 === void 0 ? null : _hudUtilityNotificati22,
_hudUtilityNotificati23 = hudUtilityNotificationConfigurationSettings.notificationCompletionContent,
notificationCompletionContent = _hudUtilityNotificati23 === void 0 ? null : _hudUtilityNotificati23,
_hudUtilityNotificati24 = hudUtilityNotificationConfigurationSettings.notificationModalTopContent,
notificationModalTopContent = _hudUtilityNotificati24 === void 0 ? null : _hudUtilityNotificati24,
_hudUtilityNotificati25 = hudUtilityNotificationConfigurationSettings.initialAnimationStateConfiguration,
initialAnimationStateConfiguration = _hudUtilityNotificati25 === void 0 ? {
opacity: 0
} : _hudUtilityNotificati25,
_hudUtilityNotificati26 = hudUtilityNotificationConfigurationSettings.durationCompletionExitAnimationConfiguration,
durationCompletionExitAnimationConfiguration = _hudUtilityNotificati26 === void 0 ? {
x: "0%",
scale: "0.269"
} : _hudUtilityNotificati26,
_hudUtilityNotificati27 = hudUtilityNotificationConfigurationSettings.animationStateConfiguration,
animationStateConfiguration = _hudUtilityNotificati27 === void 0 ? {
opacity: 1,
transition: {
type: "spring",
stiffness: 1569,
damping: 100.69
}
} : _hudUtilityNotificati27,
_hudUtilityNotificati28 = hudUtilityNotificationConfigurationSettings.exitAnimationStateConfiguration,
exitAnimationStateConfiguration = _hudUtilityNotificati28 === void 0 ? {
opacity: 0,
transition: {
duration: 0.3069
}
} : _hudUtilityNotificati28,
_hudUtilityNotificati29 = hudUtilityNotificationConfigurationSettings.motionDirection,
motionDirection = _hudUtilityNotificati29 === void 0 ? "horizontal" : _hudUtilityNotificati29,
_hudUtilityNotificati30 = hudUtilityNotificationConfigurationSettings.footer,
footer = _hudUtilityNotificati30 === void 0 ? "Thank you for using our app!" : _hudUtilityNotificati30,
_hudUtilityNotificati31 = hudUtilityNotificationConfigurationSettings.notificationVolume,
notificationVolume = _hudUtilityNotificati31 === void 0 ? 0.869 : _hudUtilityNotificati31,
message = hudUtilityNotificationConfigurationSettings.message,
title = hudUtilityNotificationConfigurationSettings.title,
_hudUtilityNotificati32 = hudUtilityNotificationConfigurationSettings.notificationProgressBarColor,
notificationProgressBarColor = _hudUtilityNotificati32 === void 0 ? "rgba(0, 169, 247, 1)" : _hudUtilityNotificati32,
_hudUtilityNotificati33 = hudUtilityNotificationConfigurationSettings.durationCompletionDelay,
durationCompletionDelay = _hudUtilityNotificati33 === void 0 ? 1000 : _hudUtilityNotificati33,
_hudUtilityNotificati34 = hudUtilityNotificationConfigurationSettings.autoDismiss,
autoDismiss = _hudUtilityNotificati34 === void 0 ? true : _hudUtilityNotificati34,
_hudUtilityNotificati35 = hudUtilityNotificationConfigurationSettings.duration,
duration = _hudUtilityNotificati35 === void 0 ? 5000 : _hudUtilityNotificati35,
onClose = hudUtilityNotificationConfigurationSettings.onClose,
_hudUtilityNotificati36 = hudUtilityNotificationConfigurationSettings.showCloseButton,
showCloseButton = _hudUtilityNotificati36 === void 0 ? true : _hudUtilityNotificati36,
_hudUtilityNotificati37 = hudUtilityNotificationConfigurationSettings.iconColor,
iconColor = _hudUtilityNotificati37 === void 0 ? "black" : _hudUtilityNotificati37,
_hudUtilityNotificati38 = hudUtilityNotificationConfigurationSettings.iconName,
iconName = _hudUtilityNotificati38 === void 0 ? "" : _hudUtilityNotificati38,
_hudUtilityNotificati39 = hudUtilityNotificationConfigurationSettings.icon,
icon = _hudUtilityNotificati39 === void 0 ? null : _hudUtilityNotificati39,
audioUrl = hudUtilityNotificationConfigurationSettings.audioUrl,
appIcon = hudUtilityNotificationConfigurationSettings.appIcon,
_hudUtilityNotificati40 = hudUtilityNotificationConfigurationSettings.position,
position = _hudUtilityNotificati40 === void 0 ? "bottom-right" : _hudUtilityNotificati40,
_hudUtilityNotificati41 = hudUtilityNotificationConfigurationSettings.compactMode,
compactMode = _hudUtilityNotificati41 === void 0 ? false : _hudUtilityNotificati41,
_hudUtilityNotificati42 = hudUtilityNotificationConfigurationSettings.enableBlur,
enableBlur = _hudUtilityNotificati42 === void 0 ? false : _hudUtilityNotificati42;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
closedNotification = _useState2[0],
setClosedNotification = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
durationCompleted = _useState4[0],
setDurationCompleted = _useState4[1];
var _useState5 = useState(100),
_useState6 = _slicedToArray(_useState5, 2),
durationRemaining = _useState6[0],
setDurationRemaining = _useState6[1];
var _useState7 = useState(0),
_useState8 = _slicedToArray(_useState7, 2),
durationProgress = _useState8[0],
setDurationProgress = _useState8[1];
var _useState9 = useState(false),
_useState10 = _slicedToArray(_useState9, 2),
overflowing = _useState10[0],
setOverflowing = _useState10[1];
var _useState11 = useState(false),
_useState12 = _slicedToArray(_useState11, 2),
showModal = _useState12[0],
setShowModal = _useState12[1];
var _useState13 = useState(true),
_useState14 = _slicedToArray(_useState13, 2),
visible = _useState14[0],
setVisible = _useState14[1];
var audioRef = useRef(new Audio(audioUrl));
var messageRef = useRef(null);
var mergedNotificationConfigurationSettings = {
completionContainer: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.completionContainer), notificationCompletionContainerConfigurationSettings),
container: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.container), notificationContainerConfigurationSettings),
backdrop: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.backdrop), notificationBackDropConfigurationSettings),
content: _objectSpread({}, baseNotificationConfigurationSettings.content),
header: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.header), notificationHeaderConfigurationSettings),
title: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.title), notificationTitleConfigurationSettings),
closeButton: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.closeButton), notificationCloseButtonConfigurationSettings),
notificationIcon: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.notificationIcon), notificationNotificationIconConfigurationSettings),
icon: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.icon), notificationIconConfigurationSettings),
message: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.message), notificationMessageConfigurationSettings),
showMoreButton: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.showMoreButton), notificationShowMoreButtonConfigurationSettings),
footer: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.footer), notificationFooterConfigurationSettings),
modal: _objectSpread(_objectSpread({}, baseNotificationConfigurationSettings.modal), notificationModalConfigurationSettings)
};
var animationConfig = {
vertical: {
initial: _objectSpread(_objectSpread({}, initialAnimationStateConfiguration), {}, {
y: position.includes("top") ? "-100%" : "100%"
}),
animate: animationStateConfiguration,
exit: _objectSpread(_objectSpread({}, exitAnimationStateConfiguration), {}, {
y: position.includes("top") ? "-100%" : "100%"
}, durationCompletionExitAnimationConfiguration)
},
horizontal: {
initial: _objectSpread(_objectSpread({}, initialAnimationStateConfiguration), {}, {
x: position.includes("right") ? "100%" : "-100%"
}),
animate: _objectSpread(_objectSpread({}, animationStateConfiguration), {}, {
x: "0%"
}),
exit: _objectSpread(_objectSpread({}, exitAnimationStateConfiguration), {}, {
x: position.includes("right") ? "100%" : "-100%"
}, durationCompletionExitAnimationConfiguration)
}
};
var getPositionStyles = function getPositionStyles(position) {
var positions = {
"top-left": {
top: "20px",
left: "20px",
right: "auto",
bottom: "auto"
},
"top-center": {
top: "20px",
left: "50%",
transform: "translateX(-50%)",
right: "auto",
bottom: "auto"
},
"top-right": {
top: "20px",
left: "auto",
right: "20px",
bottom: "auto"
},
"bottom-left": {
top: "auto",
left: "20px",
right: "auto",
bottom: "20px"
},
"bottom-center": {
top: "auto",
left: "50%",
transform: "translateX(-50%)",
right: "auto",
bottom: "20px"
},
"bottom-right": {
top: "auto",
left: "auto",
right: "20px",
bottom: "20px"
},
"center-left": {
top: "50%",
left: "20px",
transform: "translateY(-50%)",
right: "auto",
bottom: "auto"
},
"center-right": {
top: "50%",
left: "auto",
right: "20px",
transform: "translateY(-50%)",
bottom: "auto"
},
"center": {
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
right: "auto",
bottom: "auto"
}
};
return positions[position] || positions["bottom-right"];
};
var handleShowMore = function handleShowMore() {
return setShowModal(true);
};
var close = function close() {
if (onClose) {
onClose();
}
setVisible(false);
};
useEffect(function () {
if (audioUrl) {
audioRef.current.volume = notificationVolume;
audioRef.current.play();
}
var checkOverflow = function checkOverflow() {
var element = messageRef.current;
if (element) {
var overflow = element.scrollHeight > element.clientHeight;
setOverflowing(overflow);
}
};
checkOverflow();
window.addEventListener("resize", checkOverflow);
return function () {
window.removeEventListener("resize", checkOverflow);
if (audioRef.current) {
audioRef.current.pause();
audioRef.current = null;
}
};
}, [audioUrl]);
useEffect(function () {
if (!autoDismiss) {
return function () {};
}
var startTime = Date.now();
var durationInterval = setInterval(function () {
var elapsed = Date.now() - startTime;
var updatedDuration = Math.max(0, 100 - elapsed / duration * 100);
setDurationProgress(function (currentDurationP) {
return currentDurationP < 100 ? currentDurationP + 1 : 100;
});
setDurationRemaining(updatedDuration);
if (updatedDuration === 0) {
setDurationCompleted(true);
close();
clearInterval(durationInterval);
}
}, duration / 100);
var notificationTimer = setTimeout(function () {
setClosedNotification(true);
close();
}, duration + durationCompletionDelay);
return function () {
clearTimeout(notificationTimer);
clearInterval(durationInterval);
};
}, [autoDismiss, duration, durationCompletionDelay, onClose]);
return /*#__PURE__*/React.createElement(React.Fragment, null, !closedNotification ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AnimatePresence, null, visible ? /*#__PURE__*/React.createElement(React.Fragment, null, enableBlur && /*#__PURE__*/React.createElement("div", {
style: mergedNotificationConfigurationSettings.backdrop
}), /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread(_objectSpread({}, mergedNotificationConfigurationSettings.container), getPositionStyles(position)),
variants: animationConfig[motionDirection],
initial: "initial",
animate: "animate",
exit: "exit"
}, /*#__PURE__*/React.createElement("div", {
style: mergedNotificationConfigurationSettings.content
}, /*#__PURE__*/React.createElement("div", {
style: mergedNotificationConfigurationSettings.header
}, appIcon ? /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: mergedNotificationConfigurationSettings.icon,
svg: appIcon
}) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("h1", {
style: mergedNotificationConfigurationSettings.title
}, title), showCloseButton ? /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: mergedNotificationConfigurationSettings.closeButton,
color: mergedNotificationConfigurationSettings.closeButton.color ? mergedNotificationConfigurationSettings.closeButton.color : "black",
name: "fa-close",
onClick: function onClick() {
if (onClose) {
onClose();
}
setVisible(false);
return;
}
}) : /*#__PURE__*/React.createElement(React.Fragment, null)), icon || iconName ? /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: mergedNotificationConfigurationSettings.notificationIcon,
color: iconColor && iconColor.trim() !== "" ? iconColor : "black",
name: iconName,
svg: icon
}) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(HUDScrollContainer, _extends({
containerConfigurationSettings: _objectSpread(_objectSpread({}, mergedNotificationConfigurationSettings.message), {}, {
overflow: compactMode ? "auto" : "hidden"
}),
scrollContainerRef: messageRef
}, notificationMessageContainerConfigurations), message), overflowing && !compactMode && /*#__PURE__*/React.createElement("button", {
onClick: handleShowMore,
style: mergedNotificationConfigurationSettings.showMoreButton
}, "Show More"), /*#__PURE__*/React.createElement("div", _extends({
style: mergedNotificationConfigurationSettings.footer
}, notificationFooterConfigurations), footer), autoDismiss && /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "absolute",
transition: "width 0.1s linear",
backgroundColor: notificationProgressBarColor,
borderRadius: "0 0 12px 12px",
height: "5px",
width: "".concat(durationProgress, "%"),
bottom: 0,
left: 0
}, notificationProgressBarConfigurationSettings)
}, notificationProgressBarConfigurations))))) : null), durationCompleted && /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread(_objectSpread({}, mergedNotificationConfigurationSettings.completionContainer), getPositionStyles(position))
}, notificationCompletionConfigurations), /*#__PURE__*/React.createElement(HUDLoading, _extends({
explosionParticleConfigurationSettings: {
size: 15
},
origin: {
x: "169px",
y: "15%"
},
massiveExplosion: true,
particleSpeed: 31.69,
hideExplosion: true,
explosionSize: 37,
sizeMultiplier: 1,
particles: 100,
type: "explosion"
}, notificationCompletionAnimationContent)), notificationCompletionContent && notificationCompletionContent)) : null, /*#__PURE__*/React.createElement(HUDModal, _extends({
open: showModal,
onClose: function onClose() {
return setShowModal(false);
}
}, notificationModalContainerConfigurations), /*#__PURE__*/React.createElement("div", _extends({
className: "invisa-scroller",
style: mergedNotificationConfigurationSettings.modal
}, notificationModalConfigurations), notificationModalTopContent && notificationModalTopContent, /*#__PURE__*/React.createElement("label", {
style: {
fontWeight: "769",
fontSize: "1.369rem",
color: "black",
height: "12.69rem",
marginRight: "1.69rem",
marginLeft: "1.69rem",
marginTop: "2.69rem"
}
}, title), notificationModalCenterContent && notificationModalCenterContent, /*#__PURE__*/React.createElement("label", {
style: {
fontWeight: "369",
fontSize: "1.269rem",
color: "black",
height: "12.69rem",
marginRight: "1.69rem",
marginLeft: "1.69rem",
marginTop: "2.69rem"
}
}, message), notificationModalBottomContent && notificationModalBottomContent)));
}
;
export default HUDUtilityNotification;