@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
1,207 lines (1,206 loc) • 120 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["type"];
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, { useState, useEffect, useRef, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ConvertPosition } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
var PulseRingLoader = function PulseRingLoader(_ref) {
var _ref$pulseRingContain = _ref.pulseRingContainerConfigurationSettings,
pulseRingContainerConfigurationSettings = _ref$pulseRingContain === void 0 ? {} : _ref$pulseRingContain,
_ref$pulseRingConfigu = _ref.pulseRingConfigurationSettings,
pulseRingConfigurationSettings = _ref$pulseRingConfigu === void 0 ? {} : _ref$pulseRingConfigu,
_ref$ringCount = _ref.ringCount,
ringCount = _ref$ringCount === void 0 ? 3 : _ref$ringCount,
_ref$ringColor = _ref.ringColor,
ringColor = _ref$ringColor === void 0 ? "#3498db" : _ref$ringColor,
_ref$ringSize = _ref.ringSize,
ringSize = _ref$ringSize === void 0 ? "40px" : _ref$ringSize,
_ref$ringThickness = _ref.ringThickness,
ringThickness = _ref$ringThickness === void 0 ? "4px" : _ref$ringThickness,
_ref$speed = _ref.speed,
speed = _ref$speed === void 0 ? 1 : _ref$speed;
var rings = Array.from({
length: ringCount
}, function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: _objectSpread({
position: "absolute",
width: ringSize,
height: ringSize,
border: "".concat(ringThickness, " solid ").concat(ringColor),
borderRadius: "50%"
}, pulseRingConfigurationSettings),
initial: {
scale: 0,
opacity: 1
},
animate: {
scale: [0, 1.5],
opacity: [1, 0]
},
transition: {
duration: speed,
repeat: Infinity,
repeatType: "loop",
delay: index * (speed / ringCount)
}
});
});
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
width: "calc(".concat(ringSize, " * 1.5)"),
height: "calc(".concat(ringSize, " * 1.5)")
}, pulseRingContainerConfigurationSettings)
}, rings);
};
var PulseCircleLoader = function PulseCircleLoader(_ref2) {
var _ref2$pulseCircleCont = _ref2.pulseCircleContainerConfigurationSettings,
pulseCircleContainerConfigurationSettings = _ref2$pulseCircleCont === void 0 ? {} : _ref2$pulseCircleCont,
_ref2$pulseCircleConf = _ref2.pulseCircleConfigurationSettings,
pulseCircleConfigurationSettings = _ref2$pulseCircleConf === void 0 ? {} : _ref2$pulseCircleConf,
_ref2$circleCount = _ref2.circleCount,
circleCount = _ref2$circleCount === void 0 ? 3 : _ref2$circleCount,
_ref2$circleColor = _ref2.circleColor,
circleColor = _ref2$circleColor === void 0 ? "#3498db" : _ref2$circleColor,
_ref2$circleSize = _ref2.circleSize,
circleSize = _ref2$circleSize === void 0 ? "15px" : _ref2$circleSize,
_ref2$speed = _ref2.speed,
speed = _ref2$speed === void 0 ? 1 : _ref2$speed;
var circles = Array.from({
length: circleCount
}, function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: _objectSpread({
width: circleSize,
height: circleSize,
margin: "0 5px",
backgroundColor: circleColor,
borderRadius: "50%",
display: "inline-block"
}, pulseCircleConfigurationSettings),
initial: {
opacity: 0.5,
scale: 1
},
animate: {
opacity: [0.5, 1, 0.5],
scale: [1, 1.5, 1]
},
transition: {
duration: speed,
repeat: Infinity,
delay: index * (speed / circleCount)
}
});
});
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
justifyContent: "center",
alignItems: "center"
}, pulseCircleContainerConfigurationSettings)
}, circles);
};
var DualRingLoader = function DualRingLoader(_ref3) {
var _ref3$dualRingConfigu = _ref3.dualRingConfigurationSettings,
dualRingConfigurationSettings = _ref3$dualRingConfigu === void 0 ? {} : _ref3$dualRingConfigu,
_ref3$outerRingColor = _ref3.outerRingColor,
outerRingColor = _ref3$outerRingColor === void 0 ? "#3498db" : _ref3$outerRingColor,
_ref3$innerRingColor = _ref3.innerRingColor,
innerRingColor = _ref3$innerRingColor === void 0 ? "#e74c3c" : _ref3$innerRingColor,
_ref3$ringSize = _ref3.ringSize,
ringSize = _ref3$ringSize === void 0 ? "50px" : _ref3$ringSize,
_ref3$ringThickness = _ref3.ringThickness,
ringThickness = _ref3$ringThickness === void 0 ? "5px" : _ref3$ringThickness,
_ref3$speed = _ref3.speed,
speed = _ref3$speed === void 0 ? 1 : _ref3$speed;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
width: ringSize,
height: ringSize
}, dualRingConfigurationSettings)
}, /*#__PURE__*/React.createElement(motion.div, {
style: {
width: ringSize,
height: ringSize,
border: "".concat(ringThickness, " solid ").concat(outerRingColor),
borderRadius: "50%",
position: "absolute",
top: 0,
left: 0
},
animate: {
rotate: 360
},
transition: {
duration: speed,
ease: "linear",
repeat: Infinity
}
}), /*#__PURE__*/React.createElement(motion.div, {
style: {
width: "calc(".concat(ringSize, " - 2 * ").concat(ringThickness, ")"),
height: "calc(".concat(ringSize, " - 2 * ").concat(ringThickness, ")"),
border: "".concat(ringThickness, " solid ").concat(innerRingColor),
borderRadius: "50%",
position: "absolute",
top: "".concat(ringThickness),
left: "".concat(ringThickness)
},
animate: {
rotate: -360
},
transition: {
duration: speed,
ease: "linear",
repeat: Infinity
}
}));
};
var BounceDotLoader = function BounceDotLoader(_ref4) {
var _ref4$bounceDotContai = _ref4.bounceDotContainerConfigurationSettings,
bounceDotContainerConfigurationSettings = _ref4$bounceDotContai === void 0 ? {} : _ref4$bounceDotContai,
_ref4$bounceDotConfig = _ref4.bounceDotConfigurationSettings,
bounceDotConfigurationSettings = _ref4$bounceDotConfig === void 0 ? {} : _ref4$bounceDotConfig,
_ref4$dotCount = _ref4.dotCount,
dotCount = _ref4$dotCount === void 0 ? 3 : _ref4$dotCount,
_ref4$dotColor = _ref4.dotColor,
dotColor = _ref4$dotColor === void 0 ? "#3498db" : _ref4$dotColor,
_ref4$dotSize = _ref4.dotSize,
dotSize = _ref4$dotSize === void 0 ? "10px" : _ref4$dotSize,
_ref4$speed = _ref4.speed,
speed = _ref4$speed === void 0 ? 0.5 : _ref4$speed;
var dots = Array.from({
length: dotCount
}, function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: _objectSpread({
width: dotSize,
height: dotSize,
margin: "0 5px",
backgroundColor: dotColor,
borderRadius: "50%",
display: "inline-block"
}, bounceDotConfigurationSettings),
animate: {
y: ["0%", "-100%", "0%"]
},
transition: {
duration: speed,
repeat: Infinity,
delay: index * (speed / dotCount)
}
});
});
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
justifyContent: "center",
alignItems: "center"
}, bounceDotContainerConfigurationSettings)
}, dots);
};
var BarGraphLoader = function BarGraphLoader(_ref5) {
var _ref5$barGraphContain = _ref5.barGraphContainerConfigurationSettings,
barGraphContainerConfigurationSettings = _ref5$barGraphContain === void 0 ? {} : _ref5$barGraphContain,
_ref5$barConfiguratio = _ref5.barConfigurationSettings,
barConfigurationSettings = _ref5$barConfiguratio === void 0 ? {} : _ref5$barConfiguratio,
_ref5$barCount = _ref5.barCount,
barCount = _ref5$barCount === void 0 ? 5 : _ref5$barCount,
_ref5$barColor = _ref5.barColor,
barColor = _ref5$barColor === void 0 ? "#3498db" : _ref5$barColor,
_ref5$barWidth = _ref5.barWidth,
barWidth = _ref5$barWidth === void 0 ? "10px" : _ref5$barWidth,
_ref5$barSpacing = _ref5.barSpacing,
barSpacing = _ref5$barSpacing === void 0 ? "5px" : _ref5$barSpacing,
_ref5$barHeight = _ref5.barHeight,
barHeight = _ref5$barHeight === void 0 ? "40px" : _ref5$barHeight,
_ref5$speed = _ref5.speed,
speed = _ref5$speed === void 0 ? "0.8s" : _ref5$speed;
var bars = Array.from({
length: barCount
}, function (_, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
style: _objectSpread({
height: barHeight,
width: barWidth,
marginRight: barSpacing,
backgroundColor: barColor,
display: "inline-block",
animation: "barAnimation ".concat(speed, " ease-in-out infinite"),
animationDelay: "".concat(index / barCount * parseFloat(speed), "s"),
transformOrigin: "bottom"
}, barConfigurationSettings)
});
});
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, "\n @keyframes barAnimation {\n 0%, 100% { transform: scaleY(0.3); }\n 50% { transform: scaleY(1); }\n }\n "), /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
alignItems: "center"
}, barGraphContainerConfigurationSettings)
}, bars));
};
var BarLoader = function BarLoader(_ref6) {
var _ref6$barContainerCon = _ref6.barContainerConfigurationSettings,
barContainerConfigurationSettings = _ref6$barContainerCon === void 0 ? {} : _ref6$barContainerCon,
_ref6$barConfiguratio = _ref6.barConfigurationSettings,
barConfigurationSettings = _ref6$barConfiguratio === void 0 ? {} : _ref6$barConfiguratio,
_ref6$barColor = _ref6.barColor,
barColor = _ref6$barColor === void 0 ? "#3498db" : _ref6$barColor,
_ref6$backgroundColor = _ref6.backgroundColor,
backgroundColor = _ref6$backgroundColor === void 0 ? "#1A1B1E" : _ref6$backgroundColor,
_ref6$height = _ref6.height,
height = _ref6$height === void 0 ? "5px" : _ref6$height,
_ref6$speed = _ref6.speed,
speed = _ref6$speed === void 0 ? 2 : _ref6$speed,
_ref6$borderRadius = _ref6.borderRadius,
borderRadius = _ref6$borderRadius === void 0 ? "10px" : _ref6$borderRadius,
_ref6$pingPong = _ref6.pingPong,
pingPong = _ref6$pingPong === void 0 ? true : _ref6$pingPong;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
width: "100%",
height: height,
backgroundColor: backgroundColor,
borderRadius: borderRadius,
overflow: "hidden",
margin: "20px 0"
}, barContainerConfigurationSettings)
}, /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread({
height: "100%",
backgroundColor: barColor,
borderRadius: borderRadius
}, barConfigurationSettings),
initial: {
width: "0%"
},
animate: {
width: "100%"
},
transition: {
duration: speed,
repeat: Infinity,
repeatType: pingPong ? "reverse" : undefined,
ease: "linear"
}
}));
};
var BlackholeLoader = function BlackholeLoader(_ref7) {
var _ref7$blackHoleContai = _ref7.blackHoleContainerConfigurationSettings,
blackHoleContainerConfigurationSettings = _ref7$blackHoleContai === void 0 ? {} : _ref7$blackHoleContai,
_ref7$blackHoleConfig = _ref7.blackHoleConfigurationSettings,
blackHoleConfigurationSettings = _ref7$blackHoleConfig === void 0 ? {} : _ref7$blackHoleConfig,
_ref7$size = _ref7.size,
size = _ref7$size === void 0 ? 100 : _ref7$size,
_ref7$particleCompone = _ref7.particleComponent,
particleComponent = _ref7$particleCompone === void 0 ? null : _ref7$particleCompone,
_ref7$particleColor = _ref7.particleColor,
particleColor = _ref7$particleColor === void 0 ? "#ffffff" : _ref7$particleColor,
_ref7$particleCount = _ref7.particleCount,
particleCount = _ref7$particleCount === void 0 ? 30 : _ref7$particleCount,
_ref7$particleSize = _ref7.particleSize,
particleSize = _ref7$particleSize === void 0 ? 4 : _ref7$particleSize,
_ref7$swirlSpeed = _ref7.swirlSpeed,
swirlSpeed = _ref7$swirlSpeed === void 0 ? 2 : _ref7$swirlSpeed,
_ref7$pullSpeed = _ref7.pullSpeed,
pullSpeed = _ref7$pullSpeed === void 0 ? 1.5 : _ref7$pullSpeed,
_ref7$matterBorderCol = _ref7.matterBorderColor,
matterBorderColor = _ref7$matterBorderCol === void 0 ? "#ffffff" : _ref7$matterBorderCol,
_ref7$matterBorderSiz = _ref7.matterBorderSize,
matterBorderSize = _ref7$matterBorderSiz === void 0 ? "#ffffff" : _ref7$matterBorderSiz,
_ref7$centerGlow = _ref7.centerGlow,
centerGlow = _ref7$centerGlow === void 0 ? "rgba(0, 0, 0, 0.69)" : _ref7$centerGlow,
_ref7$coreGlow = _ref7.coreGlow,
coreGlow = _ref7$coreGlow === void 0 ? "rgba(0, 0, 0, 1)" : _ref7$coreGlow,
_ref7$coreSize = _ref7.coreSize,
coreSize = _ref7$coreSize === void 0 ? 25 : _ref7$coreSize;
var particles = Array.from({
length: particleCount
}, function (_, index) {
var angle = index / particleCount * Math.PI * 2;
var distance = Math.random() * (size / 2);
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: _objectSpread({
position: "absolute",
transform: "translate(".concat(distance * Math.cos(angle), "px, ").concat(distance * Math.sin(angle), "px)"),
borderRadius: "50%",
background: particleColor,
height: "".concat(particleSize, "px"),
width: "".concat(particleSize, "px"),
left: "".concat(size / 2, "px"),
top: "".concat(size / 2, "px")
}, blackHoleConfigurationSettings),
animate: {
x: [distance * Math.cos(angle), 0],
y: [distance * Math.sin(angle), 0],
opacity: [1, 0.0],
scale: [1, 0]
},
transition: {
duration: pullSpeed,
repeat: Infinity,
delay: index * 0.05,
ease: "easeInOut"
}
}, particleComponent);
});
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
overflow: "hidden",
borderRadius: "50%",
background: "radial-gradient(circle, ".concat(centerGlow, " 0%, transparent 70%)"),
height: "".concat(size, "px"),
width: "".concat(size, "px")
}, blackHoleContainerConfigurationSettings)
}, /*#__PURE__*/React.createElement(motion.div, {
style: {
position: "absolute",
border: "".concat(matterBorderSize, "px solid ").concat(matterBorderColor),
borderRadius: "50%",
height: "100%",
width: "100%"
},
animate: {
rotate: [0, 360]
},
transition: {
duration: swirlSpeed,
repeat: Infinity,
ease: "linear"
}
}), /*#__PURE__*/React.createElement("div", {
style: {
position: "relative",
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "50%",
background: "transparent",
height: "100%",
width: "100%",
zIndex: 869
}
}, /*#__PURE__*/React.createElement(motion.div, {
style: {
position: "relative",
display: "flex",
background: "radial-gradient(circle, ".concat(coreGlow, " 12.69%, transparent 57%)"),
height: "".concat(coreSize, "%"),
width: "".concat(coreSize, "%"),
borderRadius: "50%"
},
animate: {
rotate: [0, 360]
},
transition: {
duration: swirlSpeed,
repeat: Infinity,
ease: "linear"
}
})), particles);
};
var BladeLoader = function BladeLoader(_ref8) {
var _ref8$bladeContainerC = _ref8.bladeContainerConfigurationSettings,
bladeContainerConfigurationSettings = _ref8$bladeContainerC === void 0 ? {} : _ref8$bladeContainerC,
_ref8$bladeConfigurat = _ref8.bladeConfigurationSettings,
bladeConfigurationSettings = _ref8$bladeConfigurat === void 0 ? {} : _ref8$bladeConfigurat,
_ref8$bladeColor = _ref8.bladeColor,
bladeColor = _ref8$bladeColor === void 0 ? "#3498db" : _ref8$bladeColor,
_ref8$bladeSize = _ref8.bladeSize,
bladeSize = _ref8$bladeSize === void 0 ? "80px" : _ref8$bladeSize,
_ref8$bladeThickness = _ref8.bladeThickness,
bladeThickness = _ref8$bladeThickness === void 0 ? "8px" : _ref8$bladeThickness,
_ref8$speed = _ref8.speed,
speed = _ref8$speed === void 0 ? 2 : _ref8$speed;
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
height: bladeSize,
width: bladeSize,
borderRadius: "50%",
overflow: "hidden"
}, bladeContainerConfigurationSettings)
}, /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread({
position: "absolute",
mask: "radial-gradient(circle at center, transparent ".concat(bladeThickness, ", black ").concat(bladeThickness, ")"),
borderRadius: "50%",
background: "conic-gradient(".concat(bladeColor, " 25%, transparent 0%)"),
height: bladeSize,
width: bladeSize,
left: "50%",
top: "50%",
marginLeft: "-".concat(parseInt(bladeSize, 10) / 2, "px"),
marginTop: "-".concat(parseInt(bladeSize, 10) / 2, "px")
}, bladeConfigurationSettings),
animate: {
rotate: 360
},
transition: {
duration: speed,
repeat: Infinity,
ease: "linear"
}
}));
};
var ExplosionLoader = function ExplosionLoader(_ref9) {
var _ref9$explosionContai = _ref9.explosionContainerConfigurationSettings,
explosionContainerConfigurationSettings = _ref9$explosionContai === void 0 ? {} : _ref9$explosionContai,
_ref9$explosionPartic = _ref9.explosionParticleConfigurationSettings,
explosionParticleConfigurationSettings = _ref9$explosionPartic === void 0 ? {} : _ref9$explosionPartic,
_ref9$explosionLayerC = _ref9.explosionLayerConfigurationSettings,
explosionLayerConfigurationSettings = _ref9$explosionLayerC === void 0 ? {} : _ref9$explosionLayerC,
_ref9$explosionConfig = _ref9.explosionConfigurationSettings,
explosionConfigurationSettings = _ref9$explosionConfig === void 0 ? {} : _ref9$explosionConfig,
_ref9$massiveExplosio = _ref9.massiveExplosion,
massiveExplosion = _ref9$massiveExplosio === void 0 ? false : _ref9$massiveExplosio,
_ref9$explosionCount = _ref9.explosionCount,
explosionCount = _ref9$explosionCount === void 0 ? 15 : _ref9$explosionCount,
_ref9$coreColor = _ref9.coreColor,
coreColor = _ref9$coreColor === void 0 ? "rgba(255, 100, 50, 1)" : _ref9$coreColor,
_ref9$glowColor = _ref9.glowColor,
glowColor = _ref9$glowColor === void 0 ? "rgba(255, 150, 50, 0.6)" : _ref9$glowColor,
_ref9$sparkColor = _ref9.sparkColor,
sparkColor = _ref9$sparkColor === void 0 ? "rgba(255, 255, 0, 0.5)" : _ref9$sparkColor,
_ref9$outerFadeColor = _ref9.outerFadeColor,
outerFadeColor = _ref9$outerFadeColor === void 0 ? "rgba(255, 69, 0, 0.3)" : _ref9$outerFadeColor,
_ref9$particleColor = _ref9.particleColor,
particleColor = _ref9$particleColor === void 0 ? "rgba(255, 255, 255, 0.8)" : _ref9$particleColor,
_ref9$sizeMultiplier = _ref9.sizeMultiplier,
sizeMultiplier = _ref9$sizeMultiplier === void 0 ? 1 : _ref9$sizeMultiplier,
_ref9$animationDurati = _ref9.animationDuration,
animationDuration = _ref9$animationDurati === void 0 ? 1 : _ref9$animationDurati,
_ref9$particleSpeed = _ref9.particleSpeed,
particleSpeed = _ref9$particleSpeed === void 0 ? 500 : _ref9$particleSpeed,
_ref9$particles = _ref9.particles,
particles = _ref9$particles === void 0 ? 50 : _ref9$particles,
_ref9$backgroundColor = _ref9.backgroundColor,
backgroundColor = _ref9$backgroundColor === void 0 ? "transparent" : _ref9$backgroundColor,
_ref9$explosionSize = _ref9.explosionSize,
explosionSize = _ref9$explosionSize === void 0 ? 300 : _ref9$explosionSize,
_ref9$customParticle = _ref9.customParticle,
customParticle = _ref9$customParticle === void 0 ? null : _ref9$customParticle,
_ref9$hideExplosion = _ref9.hideExplosion,
hideExplosion = _ref9$hideExplosion === void 0 ? false : _ref9$hideExplosion,
_ref9$origin = _ref9.origin,
origin = _ref9$origin === void 0 ? null : _ref9$origin;
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
explosions = _useState2[0],
setExplosions = _useState2[1];
var loaderContainerStyle = _objectSpread({
position: "relative",
overflow: "hidden",
backgroundColor: backgroundColor,
height: "calc(100%)",
width: "calc(100%)"
}, explosionContainerConfigurationSettings);
var explosionLayerStyles = function explosionLayerStyles(x, y, size, opacity, backgroundColor, transformScale) {
return _objectSpread({
position: "absolute",
transform: "scale(".concat(transformScale, ")"),
animation: "explode ".concat(animationDuration, "s ease-out forwards"),
boxShadow: "0 0 ".concat(size / 4, "px ").concat(backgroundColor),
borderRadius: "50%",
backgroundColor: backgroundColor,
opacity: opacity,
height: size,
width: size,
left: x,
top: y
}, explosionLayerConfigurationSettings);
};
var particleStyle = function particleStyle(x, y, size, angle, speed) {
var radians = angle * Math.PI / 180;
var offsetX = Math.cos(radians) * speed;
var offsetY = Math.sin(radians) * speed;
return {
position: "absolute",
transform: "translate(".concat(offsetX, "px, ").concat(offsetY, "px)"),
animation: "particleMove ".concat(animationDuration, "s ease-out forwards"),
height: size,
width: size,
left: x,
top: y
};
};
useEffect(function () {
var explosionOrigin = {
x: origin !== null && origin !== void 0 && origin.x ? ConvertPosition(origin.x, "x") : window.innerWidth / 2,
y: origin !== null && origin !== void 0 && origin.y ? ConvertPosition(origin.y, "y") : window.innerHeight / 2
};
if (massiveExplosion) {
setExplosions([_objectSpread({
id: "massive",
size: explosionSize * sizeMultiplier,
particles: new Array(particles).fill(null).map(function () {
return _objectSpread({
speed: Math.random() * particleSpeed + 100,
angle: Math.random() * 360,
size: Math.random() * 5 + 2
}, explosionParticleConfigurationSettings);
}),
x: explosionOrigin.x - explosionSize / 2,
y: explosionOrigin.y - explosionSize / 2
}, explosionConfigurationSettings)]);
} else {
var interval = setInterval(function () {
var newExplosion = _objectSpread({
id: Math.random().toString(),
size: Math.random() * 100 + 50 * sizeMultiplier,
particles: new Array(particles).fill(null).map(function () {
return _objectSpread({
speed: Math.random() * particleSpeed + 100,
angle: Math.random() * 360,
size: Math.random() * 5 + 2
}, explosionParticleConfigurationSettings);
}),
y: Math.random() * window.innerHeight,
x: Math.random() * window.innerWidth
}, explosionConfigurationSettings);
setExplosions(function (prevExplosions) {
return [].concat(_toConsumableArray(prevExplosions.slice(-explosionCount)), [newExplosion]);
});
}, 500);
return function () {
return clearInterval(interval);
};
}
}, [massiveExplosion, explosionCount, sizeMultiplier, particleSpeed, origin]);
useEffect(function () {
var styleSheet = document.styleSheets[0];
var explodeKeyframes = "\n @keyframes explode {\n 0% {\n transform: scale(0.2);\n opacity: 1;\n }\n 50% {\n transform: scale(1.2);\n opacity: 0.7;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n }\n ";
styleSheet.insertRule(explodeKeyframes, styleSheet.cssRules.length);
var particleMoveKeyframes = "\n @keyframes particleMove {\n 0% {\n transform: translate(0);\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n ";
styleSheet.insertRule(particleMoveKeyframes, styleSheet.cssRules.length);
}, []);
return /*#__PURE__*/React.createElement("div", {
style: loaderContainerStyle
}, explosions.map(function (explosion) {
return /*#__PURE__*/React.createElement("div", {
key: explosion.id,
style: {
position: "relative"
}
}, !hideExplosion && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
style: explosionLayerStyles(explosion.x, explosion.y, explosion.size, 1, coreColor, 1)
}), /*#__PURE__*/React.createElement("div", {
style: explosionLayerStyles(explosion.x - explosion.size / 4, explosion.y - explosion.size / 4, explosion.size * 1.5, 0.8, glowColor, 1)
}), /*#__PURE__*/React.createElement("div", {
style: explosionLayerStyles(explosion.x - explosion.size / 6, explosion.y - explosion.size / 6, explosion.size * 1.3, 0.6, sparkColor, 1.5)
}), /*#__PURE__*/React.createElement("div", {
style: explosionLayerStyles(explosion.x - explosion.size / 2, explosion.y - explosion.size / 2, explosion.size * 2, 0.5, outerFadeColor, 1.8)
})), explosion.particles.map(function (particle, index) {
var ParticleComponent = customParticle ? customParticle : /*#__PURE__*/React.createElement("div", {
style: {
borderRadius: "50%",
backgroundColor: particleColor,
height: particle.size,
width: particle.size
}
});
return /*#__PURE__*/React.createElement("div", {
key: "".concat(explosion.id, "-").concat(index),
style: particleStyle(explosion.x, explosion.y, particle.size, particle.angle, particle.speed)
}, ParticleComponent);
}));
}));
};
var RotatingSquareLoader = function RotatingSquareLoader(_ref10) {
var _ref10$rotatingSquare = _ref10.rotatingSquareConfigurationSettings,
rotatingSquareConfigurationSettings = _ref10$rotatingSquare === void 0 ? {} : _ref10$rotatingSquare,
_ref10$squareColor = _ref10.squareColor,
squareColor = _ref10$squareColor === void 0 ? "#3498db" : _ref10$squareColor,
_ref10$squareSize = _ref10.squareSize,
squareSize = _ref10$squareSize === void 0 ? "20px" : _ref10$squareSize,
_ref10$speed = _ref10.speed,
speed = _ref10$speed === void 0 ? 1 : _ref10$speed;
return /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread({
width: squareSize,
height: squareSize,
backgroundColor: squareColor,
display: "inline-block"
}, rotatingSquareConfigurationSettings),
animate: {
rotate: 360,
scale: [1, 1.5, 1]
},
transition: {
ease: "linear",
duration: speed,
repeat: Infinity
}
});
};
var RoboticArmLoader = function RoboticArmLoader(_ref11) {
var _ref11$armSegmentConf = _ref11.armSegmentConfigurationSettings,
armSegmentConfigurationSettings = _ref11$armSegmentConf === void 0 ? {} : _ref11$armSegmentConf,
_ref11$containerConfi = _ref11.containerConfigurationSettings,
containerConfigurationSettings = _ref11$containerConfi === void 0 ? {} : _ref11$containerConfi,
_ref11$jointConfigura = _ref11.jointConfigurationSettings,
jointConfigurationSettings = _ref11$jointConfigura === void 0 ? {} : _ref11$jointConfigura,
_ref11$baseConfigurat = _ref11.baseConfigurationSettings,
baseConfigurationSettings = _ref11$baseConfigurat === void 0 ? {} : _ref11$baseConfigurat,
_ref11$clawConfigurat = _ref11.clawConfigurationSettings,
clawConfigurationSettings = _ref11$clawConfigurat === void 0 ? {} : _ref11$clawConfigurat,
_ref11$color = _ref11.color,
color = _ref11$color === void 0 ? "white" : _ref11$color,
_ref11$armLength = _ref11.armLength,
armLength = _ref11$armLength === void 0 ? 150 : _ref11$armLength,
_ref11$baseSize = _ref11.baseSize,
baseSize = _ref11$baseSize === void 0 ? 60 : _ref11$baseSize,
_ref11$size = _ref11.size,
size = _ref11$size === void 0 ? 300 : _ref11$size,
_ref11$speed = _ref11.speed,
speed = _ref11$speed === void 0 ? 2 : _ref11$speed,
_ref11$followCursor = _ref11.followCursor,
followCursor = _ref11$followCursor === void 0 ? false : _ref11$followCursor,
_ref11$autoRotateAngl = _ref11.autoRotateAngles,
autoRotateAngles = _ref11$autoRotateAngl === void 0 ? [0, 40, -69, 0, -12.69, 0] : _ref11$autoRotateAngl,
_ref11$autoSpeed = _ref11.autoSpeed,
autoSpeed = _ref11$autoSpeed === void 0 ? 2 : _ref11$autoSpeed,
_ref11$autoEase = _ref11.autoEase,
autoEase = _ref11$autoEase === void 0 ? "easeInOut" : _ref11$autoEase,
_ref11$clawGripRotati = _ref11.clawGripRotation,
clawGripRotation = _ref11$clawGripRotati === void 0 ? [0, -15, 15, -10, 5, 0] : _ref11$clawGripRotati,
_ref11$clawGripSpeed = _ref11.clawGripSpeed,
clawGripSpeed = _ref11$clawGripSpeed === void 0 ? 1.5 : _ref11$clawGripSpeed,
_ref11$showClawDetail = _ref11.showClawDetails,
showClawDetails = _ref11$showClawDetail === void 0 ? true : _ref11$showClawDetail,
_ref11$grabTargetRef = _ref11.grabTargetRef,
grabTargetRef = _ref11$grabTargetRef === void 0 ? null : _ref11$grabTargetRef,
_ref11$destinationPos = _ref11.destinationPosition,
destinationPosition = _ref11$destinationPos === void 0 ? {
x: 0,
y: 0
} : _ref11$destinationPos,
_ref11$onGrabComplete = _ref11.onGrabComplete,
onGrabComplete = _ref11$onGrabComplete === void 0 ? function () {} : _ref11$onGrabComplete,
_ref11$triggerGrab = _ref11.triggerGrab,
triggerGrab = _ref11$triggerGrab === void 0 ? false : _ref11$triggerGrab;
var segmentWidth = armLength / 4;
var segmentHeight = baseSize / 4;
var _useState3 = useState({
x: 0,
y: 0
}),
_useState4 = _slicedToArray(_useState3, 2),
cursorPosition = _useState4[0],
setCursorPosition = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
isGrabbing = _useState6[0],
setIsGrabbing = _useState6[1];
var _useState7 = useState(null),
_useState8 = _slicedToArray(_useState7, 2),
grabbedPosition = _useState8[0],
setGrabbedPosition = _useState8[1];
var baseRef = useRef(null);
var handleMouseMove = function handleMouseMove(event) {
setCursorPosition({
x: event.clientX,
y: event.clientY
});
};
useEffect(function () {
if (followCursor) {
window.addEventListener("mousemove", handleMouseMove);
return function () {
return window.removeEventListener("mousemove", handleMouseMove);
};
}
}, [followCursor]);
useEffect(function () {
if (triggerGrab) {
grabComponent();
}
}, [triggerGrab]);
var calculateRotation = function calculateRotation(baseX, baseY) {
var deltaX = cursorPosition.x - baseX;
var deltaY = cursorPosition.y - baseY;
var angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
return angle;
};
var baseStyle = _objectSpread({
position: "absolute",
width: "".concat(baseSize, "px"),
height: "".concat(baseSize, "px"),
backgroundColor: color,
borderRadius: "10%"
}, baseConfigurationSettings);
var armSegmentStyle = _objectSpread({
position: "absolute",
width: "".concat(segmentWidth, "px"),
height: "".concat(segmentHeight, "px"),
backgroundColor: color,
transformOrigin: "left center",
borderRadius: "5px"
}, armSegmentConfigurationSettings);
var jointStyle = _objectSpread({
position: "absolute",
width: "".concat(segmentHeight, "px"),
height: "".concat(segmentHeight, "px"),
backgroundColor: "#333",
borderRadius: "50%",
top: "50%",
left: "100%",
transform: "translate(-50%, -50%)"
}, jointConfigurationSettings);
var clawStyle = _objectSpread({
position: "absolute",
width: "".concat(segmentHeight * 1.5, "px"),
height: "".concat(segmentHeight * 1.5, "px"),
backgroundColor: color,
borderRadius: "50%",
top: "50%",
left: "100%",
transform: "translate(-50%, -50%)"
}, clawConfigurationSettings);
var armVariants = function armVariants(rotation) {
return {
rotate: followCursor ? rotation : autoRotateAngles,
transition: followCursor ? {
type: "spring",
stiffness: 50,
damping: 10
} : {
duration: autoSpeed,
repeat: Infinity,
ease: autoEase
}
};
};
var clawVariants = {
rest: {
rotate: 0
},
move: {
rotate: clawGripRotation,
transition: {
duration: speed / clawGripSpeed,
repeat: Infinity,
ease: "easeInOut"
}
}
};
var grabComponent = function grabComponent() {
if (grabTargetRef && grabTargetRef.current) {
var targetRect = grabTargetRef.current.getBoundingClientRect();
setIsGrabbing(true);
setGrabbedPosition({
x: targetRect.left,
y: targetRect.top
});
}
};
var moveToDestination = function moveToDestination() {
if (isGrabbing && grabbedPosition) {
var distanceX = destinationPosition.x - grabbedPosition.x;
var distanceY = destinationPosition.y - grabbedPosition.y;
var moveInterval = setInterval(function () {
setGrabbedPosition(function (prevPosition) {
var newPosition = {
x: prevPosition.x + distanceX * 0.1,
y: prevPosition.y + distanceY * 0.1
};
if (Math.abs(newPosition.x - destinationPosition.x) < 5 && Math.abs(newPosition.y - destinationPosition.y) < 5) {
clearInterval(moveInterval);
setIsGrabbing(false);
onGrabComplete();
}
return newPosition;
});
}, 100);
}
};
useEffect(function () {
if (isGrabbing) {
moveToDestination();
}
}, [isGrabbing, grabbedPosition]);
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
width: "".concat(size, "px"),
height: "".concat(size, "px")
}, containerConfigurationSettings)
}, /*#__PURE__*/React.createElement("div", {
ref: baseRef,
style: _objectSpread(_objectSpread({}, baseStyle), {}, {
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)"
})
}, baseRef.current && function () {
var baseRect = baseRef.current.getBoundingClientRect();
var baseX = baseRect.left + baseRect.width / 2;
var baseY = baseRect.top + baseRect.height / 2;
var segment1Rotation = followCursor ? calculateRotation(baseX, baseY) : 0;
var segment2Rotation = followCursor ? calculateRotation(baseX + segmentWidth * Math.cos(segment1Rotation), baseY + segmentWidth * Math.sin(segment1Rotation)) : 0;
var segment3Rotation = followCursor ? calculateRotation(baseX + 2 * segmentWidth * Math.cos(segment2Rotation), baseY + 2 * segmentWidth * Math.sin(segment2Rotation)) : 0;
return /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread(_objectSpread({}, armSegmentStyle), {}, {
top: "-20%",
left: "50%",
transform: "translate(-50%, 50%)"
}),
animate: armVariants(segment1Rotation)
}, /*#__PURE__*/React.createElement("div", {
style: jointStyle
}, /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread(_objectSpread({}, armSegmentStyle), {}, {
top: "0",
left: "100%",
transform: "translate(0, 50%)"
}),
animate: armVariants(segment2Rotation)
}, /*#__PURE__*/React.createElement("div", {
style: jointStyle
}, /*#__PURE__*/React.createElement(motion.div, {
style: _objectSpread(_objectSpread({}, armSegmentStyle), {}, {
top: "0",
left: "100%",
transform: "translate(0, 50%)"
}),
animate: armVariants(segment3Rotation)
}, /*#__PURE__*/React.createElement("div", {
style: jointStyle
}, /*#__PURE__*/React.createElement(motion.div, {
style: clawStyle,
variants: clawVariants,
initial: "rest",
animate: "move"
}, showClawDetails && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
style: {
position: "absolute",
width: "40%",
height: "10%",
backgroundColor: "#333",
top: "50%",
left: "50%",
transform: "translate(50%, -150%)",
borderRadius: "5px"
}
}), /*#__PURE__*/React.createElement("div", {
style: {
position: "absolute",
width: "40%",
height: "10%",
backgroundColor: "#333",
top: "50%",
left: "50%",
transform: "rotate(90deg) translate(50%, -150%)",
borderRadius: "5px"
}
})))))))));
}()), isGrabbing && grabbedPosition && /*#__PURE__*/React.createElement(motion.div, {
style: {
position: "absolute",
width: "50px",
height: "50px",
backgroundColor: "red",
borderRadius: "50%"
},
animate: {
top: destinationPosition.y,
left: destinationPosition.x,
transition: {
duration: 2,
ease: "easeInOut"
}
}
}));
};
var RadarLoader = function RadarLoader(_ref12) {
var _ref12$size = _ref12.size,
size = _ref12$size === void 0 ? 200 : _ref12$size,
_ref12$radarColor = _ref12.radarColor,
radarColor = _ref12$radarColor === void 0 ? "#00FF00" : _ref12$radarColor,
_ref12$beamThickness = _ref12.beamThickness,
beamThickness = _ref12$beamThickness === void 0 ? 2 : _ref12$beamThickness,
_ref12$rotationSpeed = _ref12.rotationSpeed,
rotationSpeed = _ref12$rotationSpeed === void 0 ? 2 : _ref12$rotationSpeed,
_ref12$radarBackgroun = _ref12.radarBackground,
radarBackground = _ref12$radarBackgroun === void 0 ? "#001200" : _ref12$radarBackgroun,
_ref12$pings = _ref12.pings,
pings = _ref12$pings === void 0 ? [] : _ref12$pings,
_ref12$defaultPingCol = _ref12.defaultPingColor,
defaultPingColor = _ref12$defaultPingCol === void 0 ? "#FF0000" : _ref12$defaultPingCol,
_ref12$pingDecaySpeed = _ref12.pingDecaySpeed,
pingDecaySpeed = _ref12$pingDecaySpeed === void 0 ? 0.0269 : _ref12$pingDecaySpeed,
_ref12$beamWidth = _ref12.beamWidth,
beamWidth = _ref12$beamWidth === void 0 ? 0.1 : _ref12$beamWidth;
var canvasRef = useRef(null);
useEffect(function () {
var canvas = canvasRef.current;
var ctx = canvas.getContext("2d");
canvas.width = size;
canvas.height = size;
var centerX = size / 2;
var centerY = size / 2;
var radius = size / 2;
var animateRadar = function animateRadar() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = radarBackground;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fill();
var time = Date.now() / 1000;
var angle = time % rotationSpeed / rotationSpeed * 2 * Math.PI;
ctx.strokeStyle = radarColor;
ctx.lineWidth = beamThickness;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, angle, angle + beamWidth);
ctx.stroke();
pings.forEach(function (ping, index) {
if (ping.opacity > 0) {
var pingAngle = ping.angle !== undefined ? ping.angle : index * (2 * Math.PI / pings.length) % (2 * Math.PI);
var pingColor = ping.color || defaultPingColor;
var withinBeam = Math.abs(pingAngle - (angle + beamWidth / 2)) <= beamWidth / 2;
if (withinBeam) {
ping.opacity = Math.min(1, ping.opacity + pingDecaySpeed * 10);
} else {
ping.opacity -= pingDecaySpeed;
}
ctx.fillStyle = "rgba(".concat(parseInt(pingColor.slice(1, 3), 16), ", ").concat(parseInt(pingColor.slice(3, 5), 16), ", ").concat(parseInt(pingColor.slice(5, 7), 16), ", ").concat(ping.opacity, ")");
ctx.beginPath();
ctx.arc(centerX + ping.distance * Math.cos(pingAngle), centerY + ping.distance * Math.sin(pingAngle), ping.size || 5, 0, 2 * Math.PI);
ctx.fill();
}
});
requestAnimationFrame(animateRadar);
};
animateRadar();
}, [size, radarColor, beamThickness, defaultPingColor, rotationSpeed, radarBackground, pings, pingDecaySpeed, beamWidth]);
return /*#__PURE__*/React.createElement("canvas", {
ref: canvasRef,
style: {
width: size,
height: size,
display: 'block',
margin: '0 auto',
borderRadius: '50%'
}
});
};
var DataPulseLoader = function DataPulseLoader(_ref13) {
var _ref13$size = _ref13.size,
size = _ref13$size === void 0 ? 150 : _ref13$size,
_ref13$color = _ref13.color,
color = _ref13$color === void 0 ? "#00FFCC" : _ref13$color,
_ref13$pulseCount = _ref13.pulseCount,
pulseCount = _ref13$pulseCount === void 0 ? 3 : _ref13$pulseCount,
_ref13$speed = _ref13.speed,
speed = _ref13$speed === void 0 ? 2 : _ref13$speed;
var pulses = Array.from({
length: pulseCount
});
var pulseVariants = {
animate: {
scale: [0.8, 1.2],
opacity: [0.5, 1, 0.5],
transition: {
duration: speed,
repeat: Infinity,
ease: "easeInOut",
staggerChildren: 0.2
}
}
};
var loaderStyle = {
position: "relative",
width: "".concat(size, "px"),
height: "".concat(size, "px"),
display: "flex",
justifyContent: "center",
alignItems: "center"
};
var pulseStyle = {
position: "absolute",
borderRadius: "50%",
border: "2px solid ".concat(color),
width: "100%",
height: "100%"
};
return /*#__PURE__*/React.createElement("div", {
style: loaderStyle
}, pulses.map(function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
style: pulseStyle,
variants: pulseVariants,
animate: "animate",
initial: {
scale: 0.8,
opacity: 0.5
}
});
}));
};
var WaveformLoader = function WaveformLoader(_ref14) {
var _ref14$barCount = _ref14.barCount,
barCount = _ref14$barCount === void 0 ? 5 : _ref14$barCount,
_ref14$barColor = _ref14.barColor,
barColor = _ref14$barColor === void 0 ? "#ff7a45" : _ref14$barColor,
_ref14$minHeight = _ref14.minHeight,
minHeight = _ref14$minHeight === void 0 ? 8 : _ref14$minHeight,
_ref14$maxHeight = _ref14.maxHeight,
maxHeight = _ref14$maxHeight === void 0 ? 30 : _ref14$maxHeight,
_ref14$animationDurat = _ref14.animationDuration,
animationDuration = _ref14$animationDurat === void 0 ? 1.2 : _ref14$animationDurat,
_ref14$barWidth = _ref14.barWidth,
barWidth = _ref14$barWidth === void 0 ? 4 : _ref14$barWidth,
_ref14$gap = _ref14.gap,
gap = _ref14$gap === void 0 ? 4 : _ref14$gap,
_ref14$borderRadius = _ref14.borderRadius,
borderRadius = _ref14$borderRadius === void 0 ? 4 : _ref14$borderRadius,
_ref14$delayBetween = _ref14.delayBetween,
delayBetween = _ref14$delayBetween === void 0 ? 0.1 : _ref14$delayBetween,
_ref14$label = _ref14.label,
label = _ref14$label === void 0 ? "Transcribing..." : _ref14$label,
_ref14$labelStyle = _ref14.labelStyle,
labelStyle = _ref14$labelStyle === void 0 ? {} : _ref14$labelStyle;
var bars = useMemo(function () {
return Array.from({
length: barCount
});
}, [barCount]);
return /*#__PURE__*/React.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
alignItems: "center"
}
}, /*#__PURE__*/React.createElement("div", {
style: {
display: "flex",
gap: "".concat(gap, "px"),
justifyContent: "center",
alignItems: "end",
height: "".concat(maxHeight, "px"),
margin: "1rem auto"
}
}, bars.map(function (_, index) {
return /*#__PURE__*/React.createElement(motion.div, {
key: index,
initial: {
scaleY: 0.3
},
animate: {
scaleY: [0.3, 1, 0.3]
},
transition: {
duration: animationDuration,
repeat: Infinity,
ease: "easeInOut",
delay: index * delayBetween
},
style: {
width: "".concat(barWidth, "px"),
height: "".concat(minHeight, "px"),
background: barColor,
borderRadius: "".concat(borderRadius, "px"),
transformOrigin: "bottom"
}
});
})), label && /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
fontSize: "1rem",
color: barColor,
fontWeight: 600,
letterSpacing: "0.5px",
opacity: 0.9
}, labelStyle)
}, label));
};
var WordLoader = function WordLoader(_ref15) {
var _ref15$wordAnimationT = _ref15.wordAnimationTransitionConfigurationSettings,
wordAnimationTransitionConfigurationSettings = _ref15$wordAnimationT === void 0 ? {} : _ref15$wordAnimationT,
_ref15$wordContainerC = _ref15.wordContainerConfigurationSettings,
wordContainerConfigurationSettings = _ref15$wordContainerC === void 0 ? {} : _ref15$wordContainerC,
_ref15$wordContentCon = _ref15.wordContentConfigurationSettings,
wordContentConfigurationSettings = _ref15$wordContentCon === void 0 ? {} : _ref15$wordContentCon,
_ref15$wordConfigurat = _ref15.wordConfigurationSettings,
wordConfigurationSettings = _ref15$wordConfigurat === void 0 ? {} : _ref15$wordConfigurat,
_ref15$wordContainerC2 = _ref15.wordContainerConfigurations,
wordContainerConfigurations = _ref15$wordContainerC2 === void 0 ? {} : _ref15$wordContainerC2,
_ref15$wordContentCon2 = _ref15.wordContentConfigurations,
wordContentConfigurations = _ref15$wordContentCon2 === void 0 ? {} : _ref15$wordContentCon2,
_ref15$word = _ref15.word,
word = _ref15$word === void 0 ? "Loading..." : _ref15$word,
_ref15$wordColor = _ref15.wordColor,
wordColor = _ref15$wordColor === void 0 ? "#3498db" : _ref15$wordColor,
_ref15$wordColors = _ref15.wordColors,
wordColors = _ref15$wordColors === void 0 ? null : _ref15$wordColors,
_ref15$wordStyles = _ref15.wordStyles,
wordStyles = _ref15$wordStyles === void 0 ? null : _ref15$wordStyles,
_ref15$spaceLetterSpa = _ref15.spaceLetterSpacing,
spaceLetterSpacing = _ref15$spaceLetterSpa === void 0 ? "5.069px" : _ref15$spaceLetterSpa,
_ref15$letterSpacing = _ref15.letterSpacing,
letterSpacing = _ref15$letterSpacing === void 0 ? "1px" : _ref15$letterSpacing,
_ref15$fontSize = _ref15.fontSize,
fontSize = _ref15$fontSize === void 0 ? "24px" : _ref15$fontSize,
_ref15$speed = _ref15.speed,
speed = _ref15$speed === void 0 ? 1.5 : _ref15$speed;
var _useState9 = useState(0),
_useState10 = _slicedToArray(_useState9, 2),
textKey = _useState10[0],
setTextKey = _useState10[1];
useEffect(function () {
setTextKey(function (prevKey) {
return prevKey + 1;
});
}, [word]);
return /*#__PURE__*/React.createElement("div", _extends({
key: textKey,
style: _objectSpread({
display: "flex",
flexWrap: "wrap",
justifyContent: "center",
alignItems: "center",
wordBreak: "break-word",
overflowWrap: "break-word",
whiteSpace: "normal",
maxWidth: "100%"
}, wordContainerConfigurationSettings)
}, wordContainerConfigurations), word.split(" ").map(function (wordItem, wordIndex) {
return /*#__PURE__*/React.createElement("span", _extends({
key: wordIndex,
style: _objectSpread({
display: "inline-flex",
flexWrap: "nowrap",
whiteSpace: "nowrap",
marginRight: spaceLetterSpacing
}, wordContentConfigurationSettings)
}, wordContentConfigurations), wordItem.split("").map(function (letter, index) {
return /*#__PURE__*/React.createElement(motion.span, {
key: "word-".concat(wordIndex, "-").concat(index),
style: _objectSpread({
display: "inline-block",
fontSize: fontSize,
color: wordColor,
marginRight: letterSpacing
}, wordConfigurationSettings),
animate: _objectSpread(_objectSpread({
opacity: [0.5, 1, 0.5]
}, wordColors && {
color: wordColors
}), wordStyles && Object.keys(wordStyles).reduce(function (acc, key) {
acc[key] = wordStyles[key];
return acc;