heroes-of-chess-components 0.6.14 → 0.6.17

package/dist/lib/HocComponents/HNavbar/HHeaderCharacter/HeaderCharacter.styled.js

@@ -0,0 +1,63 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+export var CharacterContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  height: 100vh;\n"])));
+export var BlackBox = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  background: #00000090;\n  position: absolute;\n"])));
+export var CharacterWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 90%;\n  max-width: 800px;\n  height: auto;\n  background: ", ";\n  position: relative;\n  padding: 20px;\n  border-radius: 10px;\n  img {\n    width: 25%;\n    height: 25%;\n    border-radius: 50%;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.shadePurpleDark2;
+});
+export var TopContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  margin-bottom: 20px;\n  padding: 0px 20px;\n  gap: 30px;\n  .personalize {\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    flex-direction: column;\n    width: 500px;\n    gap: 15px;\n    h3 {\n      font-size: var(--p30);\n      font-weight: var(--weight-bold);\n      color: ", ";\n    }\n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.purpleLight;
+});
+export var CloseIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n  img {\n    width: 25px;\n    height: 25px;\n  }\n"])));
+export var ImgContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  background: ", ";\n  border-radius: 10px;\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.purpleLight;
+});
+export var ImgMargin = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  overflow: auto;\n  height: 300px;\n  &::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: ", ";\n    border-top-right-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 5px;\n  }\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.purpleLight;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.purpleMedium;
+});
+export var ImgWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  grid-gap: 10px;\n  padding: 10px;\n\n  img {\n    width: 100%;\n    height: 100%;\n    cursor: pointer;\n    border-radius: 0;\n  }\n  div {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    p {\n      text-align: center;\n      padding: 2px;\n      background: ", ";\n      color: white;\n      font-size: var(--p12);\n    }\n  }\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.shadePurpleDark;
+});
+export var CustomSelect = styled.select(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: auto;\n  padding: 8px 16px;\n  border-radius: 4px;\n  border: none;\n  font-size: 16px;\n  background-color: ", ";\n  color: ", ";\n\n  option {\n    color: ", ";\n  }\n\n  :focus {\n    outline: none;\n  }\n\n  &::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: ", ";\n    border-top-right-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 5px;\n  }\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.purpleLight;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.purpleMedium;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.purpleMedium;
+}, function (_ref0) {
+  var theme = _ref0.theme;
+  return theme.purpleLight;
+}, function (_ref1) {
+  var theme = _ref1.theme;
+  return theme.purpleMedium;
+});
+export var LinkStore = styled(Link)(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: space-between;\n  justify-content: space-between;\n  img {\n    width: 90px;\n    height: 90px;\n    background: ", ";\n    border-radius: 50%;\n    padding: 15px;\n    margin: auto;\n  }\n"])), function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.purpleMedium;
+});
+export var SelectType = styled.div(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 10px;\n  border-radius: 20px;\n  border: 0.2px solid ", ";\n"])), function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.purpleLight;
+});
+export var SelectTypeWrapper = styled.p(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: var(--p14);\n  font-weight: var(--weight-regular);\n  background: ", ";\n  padding: 8px 28px;\n  border-radius: 20px;\n"])), function (_ref12) {
+  var theme = _ref12.theme,
+    selected = _ref12.selected;
+  return selected ? theme.purpleMedium : theme.purpleLight;
+}, function (_ref13) {
+  var theme = _ref13.theme,
+    selected = _ref13.selected;
+  return selected ? theme.goldColor : "transparent";
+});

package/dist/lib/HocComponents/HNavbar/HHeaderSideMenu/HeaderSideMenu.js

@@ -0,0 +1,106 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+//ANCHOR Styled Components
+import { Section, SectionSpecial, SideMenuContainer, SideMenuWrapper } from "./HeaderSideMenu.styled";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+// import { InputSecurityCode } from "../store/InputSecurityCode";
+
+import { HocIconSignOut } from "../../../assets/Icons/ui";
+import HModal from "../../HModal/HModal";
+
+//SECTION React Function
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function HeaderSideMenu(_ref) {
+  var customer = _ref.customer,
+    showSidebar = _ref.showSidebar,
+    _ref$menuItems = _ref.menuItems,
+    menuItems = _ref$menuItems === void 0 ? {
+      customer: [],
+      master: []
+    } : _ref$menuItems,
+    _ref$showMasterConsol = _ref.showMasterConsoleOptions,
+    showMasterConsoleOptions = _ref$showMasterConsol === void 0 ? false : _ref$showMasterConsol;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showConfirmation = _useState2[0],
+    setShowConfirmation = _useState2[1];
+  var navigate = useNavigate();
+  var handleSignOutClick = function handleSignOutClick() {
+    return setShowConfirmation(true);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showConfirmation && /*#__PURE__*/_jsx(HModal, {
+      title: "Conferma",
+      text: "Sei sicuro di voler uscire?",
+      onCloseFunction: function onCloseFunction() {
+        return setShowConfirmation(false);
+      },
+      onConfirmFunction: function onConfirmFunction() {
+        setShowConfirmation(false);
+        navigate("/signout");
+      },
+      showModal: showConfirmation,
+      cancelText: "Annulla",
+      confirmText: "Conferma"
+    }), /*#__PURE__*/_jsxs(SideMenuContainer, {
+      children: [/*#__PURE__*/_jsxs(SideMenuWrapper, {
+        children: [/*#__PURE__*/_jsx("h6", {
+          children: "Il mio account"
+        }), menuItems.customer.map(function (item, index) {
+          return /*#__PURE__*/_jsxs(Section, {
+            to: item.to,
+            onClick: showSidebar,
+            children: [/*#__PURE__*/_jsx("img", {
+              src: item.icon,
+              alt: "icon"
+            }), /*#__PURE__*/_jsx("p", {
+              children: item.label
+            })]
+          }, index);
+        }), /*#__PURE__*/_jsxs(SectionSpecial, {
+          onClick: function onClick() {
+            if ((customer === null || customer === void 0 ? void 0 : customer.profileInfo.firstName) === "Utente" && (customer === null || customer === void 0 ? void 0 : customer.profileInfo.lastName) === "Generale") {
+              handleSignOutClick();
+            } else {
+              showSidebar();
+              navigate("/signout");
+            }
+          },
+          border: "false",
+          children: [/*#__PURE__*/_jsx("img", {
+            src: HocIconSignOut,
+            alt: "icon"
+          }), /*#__PURE__*/_jsx("p", {
+            children: "Esci"
+          })]
+        })]
+      }), showMasterConsoleOptions && /*#__PURE__*/_jsxs(SideMenuWrapper, {
+        radius: "false",
+        children: [/*#__PURE__*/_jsx("h6", {
+          children: "Master"
+        }), menuItems.master.map(function (item, index) {
+          return /*#__PURE__*/_jsxs(Section, {
+            to: item.to,
+            onClick: showSidebar,
+            children: [typeof item.icon === "function" ? /*#__PURE__*/_jsx(item.icon, {
+              size: 24,
+              style: {
+                marginLeft: "20px"
+              }
+            }) : /*#__PURE__*/_jsx("img", {
+              src: item.icon,
+              alt: "icon"
+            }), /*#__PURE__*/_jsx("p", {
+              children: item.label
+            })]
+          }, index);
+        })]
+      })]
+    })]
+  });
+}

package/dist/lib/HocComponents/HNavbar/HHeaderSideMenu/HeaderSideMenu.styled.js

@@ -0,0 +1,47 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+export var SideMenuContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 85px;\n  right: 0;\n  z-index: 9999999999;\n"])));
+export var SideMenuWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 200px;\n  height: auto;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border-top-left-radius: ", ";\n  h6 {\n    font-size: var(--p14);\n    font-weight: var(--weight-medium);\n    text-align: center;\n    color: white;\n    padding: 10px 0;\n  }\n  div {\n    max-height: 310px;\n    overflow-y: auto;\n  }\n  .otherSection {\n    display: flex;\n    background: ", ";\n    align-items: center;\n    padding: 10px 0;\n    cursor: pointer;\n    ", "\n\n    img {\n      width: 25px;\n      height: 25px;\n      margin-left: 20px;\n    }\n    p {\n      font-size: var(--p14);\n      font-weight: var(--weight-medium);\n      color: ", ";\n      margin-left: 10px;\n    }\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.shadePurpleDark;
+}, function (_ref2) {
+  var radius = _ref2.radius;
+  return radius === "false" ? "0" : "10px";
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.purpleLight;
+}, function (_ref4) {
+  var border = _ref4.border,
+    theme = _ref4.theme;
+  return border === "false" ? "" : "border-bottom: 1px solid ".concat(theme.purpleMedium, ";");
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.purpleMedium;
+});
+export var Section = styled(Link)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  background: ", ";\n  align-items: center;\n  padding: 10px 0;\n  ", "\n\n  img {\n    width: 25px;\n    height: 25px;\n    margin-left: 20px;\n  }\n\n  svg {\n    color: ", ";\n  }\n  p {\n    font-size: var(--p14);\n    font-weight: var(--weight-medium);\n    color: ", ";\n    margin-left: 10px;\n  }\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.purpleLight;
+}, function (_ref7) {
+  var border = _ref7.border,
+    theme = _ref7.theme;
+  return border === "false" ? "" : "border-bottom: 1px solid ".concat(theme.purpleMedium, ";");
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.purpleMedium;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.purpleMedium;
+});
+export var SectionSpecial = styled.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  background: ", ";\n  align-items: center;\n  padding: 10px 0;\n  ", "\n\n  img {\n    width: 25px;\n    height: 25px;\n    margin-left: 20px;\n  }\n  p {\n    font-size: var(--p14);\n    font-weight: var(--weight-medium);\n    color: ", ";\n    margin-left: 10px;\n  }\n"])), function (_ref0) {
+  var theme = _ref0.theme;
+  return theme.purpleLight;
+}, function (_ref1) {
+  var border = _ref1.border,
+    theme = _ref1.theme;
+  return border === "false" ? "" : "border-bottom: 1px solid ".concat(theme.purpleMedium, ";");
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.purpleMedium;
+});

package/dist/lib/HocComponents/HPagination/HPagination.js

@@ -0,0 +1,79 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import HButton from "../HButton/HButton";
+import HBox from "../HBox/HBox";
+import HTitle from "../HTitle/HTitle";
+import { useSounds } from "../../hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var HPagination = function HPagination(_ref) {
+  var _ref$labelPage = _ref.labelPage,
+    labelPage = _ref$labelPage === void 0 ? "Pagina" : _ref$labelPage,
+    _ref$labelOf = _ref.labelOf,
+    labelOf = _ref$labelOf === void 0 ? "di" : _ref$labelOf,
+    setPagination = _ref.setPagination,
+    totalPages = _ref.totalPages,
+    currentPage = _ref.currentPage,
+    _ref$showLabel = _ref.showLabel,
+    showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? "30px 0 0 20px" : _ref$margin,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    fetchSongPage = _ref.fetchSongPage;
+  var _useSounds = useSounds(),
+    playSound = _useSounds.playSound,
+    HOC_SOUNDS = _useSounds.HOC_SOUNDS;
+  return /*#__PURE__*/_jsxs(HBox, {
+    justify: "center",
+    align: "center",
+    margin: margin,
+    children: [/*#__PURE__*/_jsx(HButton, {
+      disabled: parseInt(currentPage) === 1 || parseInt(totalPages) === 0 || isLoading,
+      onClick: function onClick() {
+        if (isLoading) return;
+        playSound(HOC_SOUNDS.toggleSecondary);
+        if (fetchSongPage) {
+          fetchSongPage(currentPage - 1);
+        } else {
+          setPagination(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), {}, {
+              page: prev.page - 1
+            });
+          });
+        }
+      },
+      padding: "5px 10px",
+      borderRadius: "8px",
+      children: "<"
+    }), /*#__PURE__*/_jsxs(HTitle, {
+      fontWeight: "bold",
+      margin: "0 10px",
+      padding: "0",
+      as: "h5",
+      children: [showLabel ? labelPage : "", " ", currentPage, showLabel ? " ".concat(labelOf, " ") : " / ", " ", totalPages]
+    }), /*#__PURE__*/_jsx(HButton, {
+      padding: "5px 10px",
+      disabled: parseInt(currentPage) === parseInt(totalPages) || parseInt(totalPages) === 0 || isLoading,
+      onClick: function onClick() {
+        if (isLoading) return;
+        playSound(HOC_SOUNDS.toggleSecondary);
+        if (fetchSongPage) {
+          fetchSongPage(currentPage + 1);
+        } else {
+          setPagination(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), {}, {
+              page: prev.page + 1
+            });
+          });
+        }
+      },
+      borderRadius: "8px",
+      children: ">"
+    })]
+  });
+};
+export default HPagination;

package/dist/lib/HocComponents/HPopUp/HPopUp.js

@@ -0,0 +1,98 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { toast, ToastContainer, Slide } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { useSounds } from "../../hooks";
+
+// Función para mostrar el toast
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export var HPopUp = function HPopUp(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "success" : _ref$type,
+    message = _ref.message,
+    _ref$customOptions = _ref.customOptions,
+    customOptions = _ref$customOptions === void 0 ? {} : _ref$customOptions,
+    _ref$serverError = _ref.serverError,
+    serverError = _ref$serverError === void 0 ? false : _ref$serverError;
+  var _useSounds = useSounds(),
+    playSound = _useSounds.playSound,
+    HOC_SOUNDS = _useSounds.HOC_SOUNDS;
+  var options = _objectSpread({}, customOptions);
+  if (serverError) {
+    toast.error(message || "Errore del Server", _objectSpread(_objectSpread({}, options), {}, {
+      autoClose: 3500,
+      hideProgressBar: true,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: false
+    }));
+  } else {
+    // Renderiza el toast según el tipo
+    switch (type) {
+      case "success":
+        toast.success(message, options);
+        playSound(HOC_SOUNDS.openPopUp);
+        break;
+      case "error":
+        toast.error(message, options);
+        playSound(HOC_SOUNDS.openPopUp);
+        break;
+      case "warning":
+        toast.warn(message, options);
+        playSound(HOC_SOUNDS.openPopUp);
+        break;
+      case "info":
+        toast.info(message, options);
+        playSound(HOC_SOUNDS.openPopUp);
+        break;
+      default:
+        toast(message, options);
+        playSound(HOC_SOUNDS.openPopUp);
+        break;
+    }
+  }
+};
+
+// El componente HPopUp que configura el contenedor de los Toasts
+export var HPopUpContainer = function HPopUpContainer(_ref2) {
+  var _ref2$position = _ref2.position,
+    position = _ref2$position === void 0 ? "top-center" : _ref2$position,
+    _ref2$autoClose = _ref2.autoClose,
+    autoClose = _ref2$autoClose === void 0 ? 3500 : _ref2$autoClose,
+    _ref2$hideProgressBar = _ref2.hideProgressBar,
+    hideProgressBar = _ref2$hideProgressBar === void 0 ? true : _ref2$hideProgressBar,
+    _ref2$closeOnClick = _ref2.closeOnClick,
+    closeOnClick = _ref2$closeOnClick === void 0 ? true : _ref2$closeOnClick,
+    _ref2$pauseOnHover = _ref2.pauseOnHover,
+    pauseOnHover = _ref2$pauseOnHover === void 0 ? true : _ref2$pauseOnHover,
+    _ref2$draggable = _ref2.draggable,
+    draggable = _ref2$draggable === void 0 ? false : _ref2$draggable,
+    _ref2$theme = _ref2.theme,
+    theme = _ref2$theme === void 0 ? "light" : _ref2$theme,
+    _ref2$toastStyle = _ref2.toastStyle,
+    toastStyle = _ref2$toastStyle === void 0 ? {
+      fontSize: "16px",
+      fontWeight: "bold",
+      color: "#7025BE"
+    } : _ref2$toastStyle;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(ToastContainer, {
+      position: position,
+      autoClose: autoClose,
+      hideProgressBar: hideProgressBar,
+      newestOnTop: false,
+      closeOnClick: closeOnClick,
+      rtl: false,
+      pauseOnFocusLoss: true,
+      draggable: draggable,
+      pauseOnHover: pauseOnHover,
+      theme: theme,
+      toastStyle: toastStyle,
+      transition: Slide // Agregar transición
+    })
+  });
+};

package/dist/lib/HocComponents/HProgressBar/HProgressBar.js

@@ -0,0 +1,31 @@
+import { ProgressBarContainer, ProgressBarFill } from "./HProgressBar.styled";
+import { jsx as _jsx } from "react/jsx-runtime";
+var HProgressBar = function HProgressBar(_ref) {
+  var _ref$progressBar = _ref.progressBar,
+    progressBar = _ref$progressBar === void 0 ? 0 : _ref$progressBar,
+    _ref$offStart = _ref.offStart,
+    offStart = _ref$offStart === void 0 ? false : _ref$offStart,
+    _ref$customIcon = _ref.customIcon,
+    customIcon = _ref$customIcon === void 0 ? null : _ref$customIcon,
+    _ref$customIconGold = _ref.customIconGold,
+    customIconGold = _ref$customIconGold === void 0 ? null : _ref$customIconGold;
+  return /*#__PURE__*/_jsx(ProgressBarContainer, {
+    children: /*#__PURE__*/_jsx(ProgressBarFill, {
+      progress: progressBar,
+      children: progressBar > 0 && /*#__PURE__*/_jsx("img", {
+        src: progressBar >= 99 && !offStart ? customIconGold !== null && customIconGold !== void 0 ? customIconGold : customIcon : customIcon,
+        alt: "icon-progress",
+        style: {
+          width: "50px",
+          height: "50px",
+          position: "absolute",
+          right: "-25px",
+          top: "35%",
+          transform: "translateY(-50%)",
+          opacity: offStart ? 0.5 : 1
+        }
+      })
+    })
+  });
+};
+export default HProgressBar;

package/dist/lib/HocComponents/HProgressBar/HProgressBar.styled.js

@@ -0,0 +1,14 @@
+var _templateObject, _templateObject2, _templateObject3;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from "styled-components";
+export var ProgressBarContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   width: 100%;\n   background: ", ";\n   border-radius: 10px;\n   padding: 3px;\n   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);\n   padding: 2px;\n   border: 2px solid #9a2eff;\n   height: 28px;\n   margin-top: 10px;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.shadePurpleLight;
+});
+export var ProgressBarFill = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   height: 20px;\n   border-radius: 10px;\n   background: ", ";\n   width: ", "; // Ensure it does not exceed 100%\n   position: absolute;\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.shadePurpleDark;
+}, function (props) {
+  return "".concat(Math.min(props.progress, 100), "%");
+});
+export var StarMarker = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n   height: 100%;\n   height: 40px;\n   width: 40px;\n   background-repeat: no-repeat;\n   background-position: center;\n   background-size: cover;\n   position: absolute;\n   right: -20px;\n   top: -10px;\n   z-index: 2;\n"])));

package/dist/lib/HocComponents/HRadio/HRadio.js

@@ -0,0 +1,107 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["options", "additionalOptions", "value", "selectedValues", "onChange", "type", "direction", "gap", "label", "labelColor", "labelSize", "name", "labelDirection"];
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { useSounds } from "../../hooks";
+import { OptionContainer, RadioContainer, RadioInput, RadioLabel } from "./HRadio.styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var HRadio = function HRadio(_ref) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    _ref$additionalOption = _ref.additionalOptions,
+    additionalOptions = _ref$additionalOption === void 0 ? [] : _ref$additionalOption,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    _ref$selectedValues = _ref.selectedValues,
+    selectedValues = _ref$selectedValues === void 0 ? [] : _ref$selectedValues,
+    onChange = _ref.onChange,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "radio" : _ref$type,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "column" : _ref$direction,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? "10px" : _ref$gap,
+    label = _ref.label,
+    _ref$labelColor = _ref.labelColor,
+    labelColor = _ref$labelColor === void 0 ? "" : _ref$labelColor,
+    labelSize = _ref.labelSize,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? "h-radio" : _ref$name,
+    labelDirection = _ref.labelDirection,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useSounds = useSounds(),
+    playSound = _useSounds.playSound,
+    HOC_SOUNDS = _useSounds.HOC_SOUNDS;
+
+  // Procesamos las opciones para admitir tanto strings como objetos
+  var allOptions = [].concat(_toConsumableArray(additionalOptions.map(function (option) {
+    return typeof option === "string" ? {
+      value: option,
+      label: option
+    } : option;
+  })), _toConsumableArray(options.map(function (option) {
+    return typeof option === "string" ? {
+      value: option,
+      label: option
+    } : option;
+  })));
+
+  // Manejador de cambio para radio y checkbox
+  var handleChange = function handleChange(event) {
+    var _event$target = event.target,
+      optionValue = _event$target.value,
+      checked = _event$target.checked;
+    if (type === "radio") {
+      onChange(optionValue); // Actualizamos el valor único seleccionado
+    } else if (type === "checkbox") {
+      // Checkbox: Actualizamos el array de valores seleccionados
+      var updatedValues = checked ? [].concat(_toConsumableArray(selectedValues), [optionValue]) // Agregamos el valor
+      : selectedValues.filter(function (val) {
+        return val !== optionValue;
+      }); // Eliminamos el valor
+      onChange(updatedValues);
+    }
+  };
+  return /*#__PURE__*/_jsx(RadioContainer, _objectSpread(_objectSpread({
+    direction: direction,
+    gap: gap
+  }, props), {}, {
+    children: allOptions.map(function (option) {
+      return /*#__PURE__*/_jsxs(OptionContainer, {
+        $labelDirection: labelDirection,
+        children: [/*#__PURE__*/_jsx(RadioInput, {
+          type: type // "radio" o "checkbox"
+          ,
+          name: type === "radio" ? name : undefined // Grupo de radios
+          ,
+          value: option.value,
+          checked: type === "radio" ? value === option.value // Comparación para radio
+          : selectedValues.includes(option.value) // Comparación para checkbox
+          ,
+          onChange: handleChange,
+          onClick: function onClick() {
+            return playSound(HOC_SOUNDS.toggleSecondary);
+          },
+          id: option.value
+        }), /*#__PURE__*/_jsx(RadioLabel, {
+          $labelColor: labelColor,
+          $labelSize: labelSize,
+          htmlFor: option.value,
+          children: option.label
+        })]
+      }, option.value);
+    })
+  }));
+};
+export default HRadio;

package/dist/lib/HocComponents/HRadio/HRadio.styled.js

@@ -0,0 +1,50 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from "styled-components";
+
+// Contenedor principal del componente
+export var RadioContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  gap: ", ";\n"])), function (_ref) {
+  var direction = _ref.direction;
+  return direction || "column";
+}, function (_ref2) {
+  var gap = _ref2.gap;
+  return gap || "10px";
+});
+
+// Contenedor para cada opción (Radio o Checkbox)
+export var OptionContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  gap: 10px;\n  cursor: pointer;\n"])), function (_ref3) {
+  var $labelDirection = _ref3.$labelDirection;
+  return $labelDirection !== null && $labelDirection !== void 0 ? $labelDirection : "row";
+});
+export var RadioInput = styled.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  appearance: none;\n  width: 25px;\n  height: 25px;\n  border: 1px solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  position: relative;\n  display: inline-block;\n  transition: all 0.3s ease;\n\n  &:checked[type=\"checkbox\"] {\n    background-color: ", ";\n    border-color: ", ";\n\n    &::after {\n      content: \"\u2714\";\n      font-size: 20px;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      color: white;\n    }\n  }\n\n  &:checked[type=\"radio\"] {\n    background-color: white;\n    border-color: ", ";\n    &::after {\n      content: \"\";\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 14px;\n      height: 14px;\n      border-radius: 50%;\n      background-color: ", ";\n    }\n  }\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.purpleMedium || "#6c63ff";
+}, function (_ref5) {
+  var type = _ref5.type;
+  return type === "checkbox" ? "4px" : "50%";
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.backgroundLight || "#fff";
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.purpleMedium || "#6c63ff";
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.purpleDark || "#4c3faa";
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.purpleDark || "#4c3faa";
+}, function (_ref0) {
+  var theme = _ref0.theme;
+  return theme.purpleDark || "#4c3faa";
+});
+
+// Label de las opciones
+export var RadioLabel = styled.label(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  color: ", ";\n"])), function (_ref1) {
+  var $labelSize = _ref1.$labelSize;
+  return $labelSize || "var(--h5)";
+}, function (_ref10) {
+  var $labelColor = _ref10.$labelColor,
+    theme = _ref10.theme;
+  return $labelColor || (theme === null || theme === void 0 ? void 0 : theme.purpleMedium) || "black";
+});