heroes-of-chess-components 0.5.75 → 0.5.77

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

@@ -0,0 +1,133 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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 HInputContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  gap: ", ";\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n"])), function (_ref) {
+  var direction = _ref.direction;
+  return direction || "column";
+}, function (_ref2) {
+  var gap = _ref2.gap;
+  return gap;
+}, function (_ref3) {
+  var width = _ref3.width;
+  return width !== null && width !== void 0 ? width : "auto";
+});
+export var InputLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: ", "!important;\n  font-weight: ", "!important;\n  color: ", "!important;\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n  width: ", ";\n"])), function (_ref4) {
+  var $labelSize = _ref4.$labelSize;
+  if (!$labelSize) return "var(--p16)";
+  if ($labelSize !== null && $labelSize !== void 0 && $labelSize.startsWith("h") || $labelSize !== null && $labelSize !== void 0 && $labelSize.startsWith("p")) {
+    return "var(--".concat($labelSize, ", var(--p16))");
+  }
+  return $labelSize;
+}, function (_ref5) {
+  var $labelWeight = _ref5.$labelWeight;
+  if (!$labelWeight) return "var(--weight-medium)";
+  if ($labelWeight !== null && $labelWeight !== void 0 && $labelWeight.startsWith("weight-")) {
+    return "var(--".concat($labelWeight, ", var(--weight-medium))");
+  }
+  return $labelWeight;
+}, function (_ref6) {
+  var _ref7;
+  var $labelColor = _ref6.$labelColor,
+    theme = _ref6.theme;
+  return $labelColor && theme && typeof $labelColor === "string" && theme[$labelColor] ? theme[$labelColor] : (_ref7 = $labelColor !== null && $labelColor !== void 0 ? $labelColor : theme && theme.purpleMedium) !== null && _ref7 !== void 0 ? _ref7 : "#7c4dff";
+}, function (_ref8) {
+  var $labelPosition = _ref8.$labelPosition;
+  return $labelPosition || "center";
+}, function (_ref9) {
+  var $labelWidth = _ref9.$labelWidth;
+  return $labelWidth || "auto";
+});
+export var Input = styled.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  font-size: ", " !important;\n  font-weight: ", " !important;\n  color: ", " !important;\n  background: ", " !important;\n  border: ", " !important;\n  text-align: ", ";\n  padding: 0.2em 1em;\n  border-radius: ", ";\n  font-family: \"Poppins\", sans-serif;\n  line-height: 1.5;\n  box-shadow: rgba(112, 37, 190, 0.11) 0px -6px 26px inset,\n    rgba(112, 37, 190, 0.27) 4px 4px 26px inset;\n  &::placeholder {\n    color: ", ";\n    text-align: ", ";\n  }\n  &:focus,\n  &:focus-visible {\n    outline: none;\n  }\n"])), function (_ref0) {
+  var $fontSize = _ref0.$fontSize;
+  if (!$fontSize) return "var(--p16)";
+  if ($fontSize !== null && $fontSize !== void 0 && $fontSize.startsWith("h") || $fontSize !== null && $fontSize !== void 0 && $fontSize.startsWith("p")) {
+    return "var(--".concat($fontSize, ", var(--p16))");
+  }
+  return $fontSize;
+}, function (_ref1) {
+  var $fontWeight = _ref1.$fontWeight;
+  if (!$fontWeight) return "var(--weight-book)";
+  if ($fontWeight !== null && $fontWeight !== void 0 && $fontWeight.startsWith("weight-")) {
+    return "var(--".concat($fontWeight, ", var(--weight-book))");
+  }
+  return $fontWeight;
+}, function (_ref10) {
+  var _ref11;
+  var $fontColor = _ref10.$fontColor,
+    theme = _ref10.theme;
+  return $fontColor && theme && typeof $fontColor === "string" && theme[$fontColor] ? theme[$fontColor] : (_ref11 = $fontColor !== null && $fontColor !== void 0 ? $fontColor : theme && theme.purpleDark) !== null && _ref11 !== void 0 ? _ref11 : "#2d1e4a";
+}, function (_ref12) {
+  var $background = _ref12.$background,
+    theme = _ref12.theme;
+  return $background && theme && typeof $background === "string" && theme[$background] ? theme[$background] : $background !== null && $background !== void 0 ? $background : "white";
+}, function (_ref13) {
+  var $border = _ref13.$border,
+    theme = _ref13.theme;
+  return $border !== null && $border !== void 0 ? $border : "2px solid ".concat(theme.purpleMedium);
+}, function (_ref14) {
+  var $textAlign = _ref14.$textAlign;
+  return $textAlign !== null && $textAlign !== void 0 ? $textAlign : "left";
+}, function (props) {
+  return props.$borderRadius || "20px";
+}, function (_ref15) {
+  var $placeholderColor = _ref15.$placeholderColor,
+    theme = _ref15.theme;
+  return $placeholderColor && theme && typeof $placeholderColor === "string" && theme[$placeholderColor] ? theme[$placeholderColor] : $placeholderColor !== null && $placeholderColor !== void 0 ? $placeholderColor : "#999";
+}, function (_ref16) {
+  var $textAlign = _ref16.$textAlign;
+  return $textAlign !== null && $textAlign !== void 0 ? $textAlign : "left";
+});
+export var TextareaStyled = styled.textarea(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  font-size: ", " !important;\n  font-weight: ", " !important;\n  color: ", " !important;\n  background: ", " !important;\n  border: ", " !important;\n  text-align: ", ";\n  padding: 0.2em 1em !important;\n  border-radius: ", ";\n  font-family: \"Poppins\", sans-serif;\n  line-height: 1.5;\n  box-shadow: rgba(112, 37, 190, 0.11) 0px -6px 26px inset,\n    rgba(112, 37, 190, 0.27) 4px 4px 26px inset;\n  &::placeholder {\n    color: ", ";\n    text-align: ", ";\n  }\n  &:focus,\n  &:focus-visible {\n    outline: none;\n  }\n  resize: none;\n  min-height: 40px;\n  max-height: 120px;\n  box-sizing: border-box;\n  overflow: hidden;\n"])), function (_ref17) {
+  var $fontSize = _ref17.$fontSize;
+  if (!$fontSize) return "var(--p16)";
+  if ($fontSize !== null && $fontSize !== void 0 && $fontSize.startsWith("h") || $fontSize !== null && $fontSize !== void 0 && $fontSize.startsWith("p")) {
+    return "var(--".concat($fontSize, ", var(--p16))");
+  }
+  return $fontSize;
+}, function (_ref18) {
+  var $fontWeight = _ref18.$fontWeight;
+  if (!$fontWeight) return "var(--weight-book)";
+  if ($fontWeight !== null && $fontWeight !== void 0 && $fontWeight.startsWith("weight-")) {
+    return "var(--".concat($fontWeight, ", var(--weight-book))");
+  }
+  return $fontWeight;
+}, function (_ref19) {
+  var _ref20;
+  var $fontColor = _ref19.$fontColor,
+    theme = _ref19.theme;
+  return $fontColor && theme && typeof $fontColor === "string" && theme[$fontColor] ? theme[$fontColor] : (_ref20 = $fontColor !== null && $fontColor !== void 0 ? $fontColor : theme && theme.purpleDark) !== null && _ref20 !== void 0 ? _ref20 : "#2d1e4a";
+}, function (_ref21) {
+  var $background = _ref21.$background,
+    theme = _ref21.theme;
+  return $background && theme && typeof $background === "string" && theme[$background] ? theme[$background] : $background !== null && $background !== void 0 ? $background : "white";
+}, function (_ref22) {
+  var $border = _ref22.$border,
+    theme = _ref22.theme;
+  return $border !== null && $border !== void 0 ? $border : "2px solid ".concat(theme.purpleMedium);
+}, function (_ref23) {
+  var $textAlign = _ref23.$textAlign;
+  return $textAlign !== null && $textAlign !== void 0 ? $textAlign : "left";
+}, function (props) {
+  return props.$borderRadius || "20px";
+}, function (_ref24) {
+  var $placeholderColor = _ref24.$placeholderColor,
+    theme = _ref24.theme;
+  return $placeholderColor && theme && typeof $placeholderColor === "string" && theme[$placeholderColor] ? theme[$placeholderColor] : $placeholderColor !== null && $placeholderColor !== void 0 ? $placeholderColor : "#999";
+}, function (_ref25) {
+  var $textAlign = _ref25.$textAlign;
+  return $textAlign !== null && $textAlign !== void 0 ? $textAlign : "left";
+});
+export var InputContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  flex-direction: ", ";\n  height: ", ";\n  width: ", ";\n  img {\n    margin: 0 ", ";\n  }\n"])), function (_ref26) {
+  var theme = _ref26.theme;
+  return theme.purpleDark;
+}, function (props) {
+  return props.$borderRadius || "20px";
+}, function (props) {
+  return props.direction || "row";
+}, function (props) {
+  return props.height || "auto";
+}, function (props) {
+  return props.width || "auto";
+}, function (props) {
+  return props.gap || "5px";
+});

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

@@ -0,0 +1,68 @@
+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 HTextAreaContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  gap: ", ";\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n"])), function (_ref) {
+  var direction = _ref.direction;
+  return direction || "column";
+}, function (_ref2) {
+  var gap = _ref2.gap;
+  return gap;
+}, function (_ref3) {
+  var width = _ref3.width;
+  return width !== null && width !== void 0 ? width : "auto";
+});
+export var TextAreaLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: ", " !important;\n  font-weight: ", " !important;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n  width: ", ";\n"])), function (_ref4) {
+  var $labelSize = _ref4.$labelSize;
+  if (!$labelSize) return "var(--p16)";
+  if ($labelSize !== null && $labelSize !== void 0 && $labelSize.startsWith("h") || $labelSize !== null && $labelSize !== void 0 && $labelSize.startsWith("p")) {
+    return "var(--".concat($labelSize, ", var(--p16))");
+  }
+  return $labelSize;
+}, function (_ref5) {
+  var $labelWeight = _ref5.$labelWeight;
+  if (!$labelWeight) return "var(--weight-medium)";
+  if ($labelWeight !== null && $labelWeight !== void 0 && $labelWeight.startsWith("weight-")) {
+    return "var(--".concat($labelWeight, ", var(--weight-medium))");
+  }
+  return $labelWeight;
+}, function (_ref6) {
+  var _ref7;
+  var $labelColor = _ref6.$labelColor,
+    theme = _ref6.theme;
+  return $labelColor && theme && typeof $labelColor === "string" && theme[$labelColor] ? theme[$labelColor] : (_ref7 = $labelColor !== null && $labelColor !== void 0 ? $labelColor : theme && theme.purpleMedium) !== null && _ref7 !== void 0 ? _ref7 : "#7c4dff";
+}, function (_ref8) {
+  var $labelPosition = _ref8.$labelPosition;
+  return $labelPosition || "center";
+}, function (_ref9) {
+  var $labelWidth = _ref9.$labelWidth;
+  return $labelWidth || "auto";
+});
+export var StyledTextArea = styled.textarea(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  resize: ", ";\n  font-size: ", " !important;\n  font-weight: ", " !important;\n  color: ", " !important;\n  background: white;\n  border: 2px solid ", ";\n  padding: 0.6em 1em;\n  border-radius: ", ";\n  font-family: \"Poppins\", sans-serif;\n  line-height: 1.5;\n  box-shadow: rgba(112, 37, 190, 0.11) 0px -6px 26px inset,\n    rgba(112, 37, 190, 0.27) 4px 4px 26px inset;\n  &:focus,\n  &:focus-visible {\n    outline: none;\n  }\n"])), function (_ref0) {
+  var $resizable = _ref0.$resizable;
+  return $resizable ? "vertical" : "none";
+}, function (_ref1) {
+  var $fontSize = _ref1.$fontSize;
+  if (!$fontSize) return "var(--p16)";
+  if ($fontSize !== null && $fontSize !== void 0 && $fontSize.startsWith("h") || $fontSize !== null && $fontSize !== void 0 && $fontSize.startsWith("p")) {
+    return "var(--".concat($fontSize, ", var(--p16))");
+  }
+  return $fontSize;
+}, function (_ref10) {
+  var $fontWeight = _ref10.$fontWeight;
+  if (!$fontWeight) return "var(--weight-book)";
+  if ($fontWeight !== null && $fontWeight !== void 0 && $fontWeight.startsWith("weight-")) {
+    return "var(--".concat($fontWeight, ", var(--weight-book))");
+  }
+  return $fontWeight;
+}, function (_ref11) {
+  var _ref12;
+  var $fontColor = _ref11.$fontColor,
+    theme = _ref11.theme;
+  return $fontColor && theme && typeof $fontColor === "string" && theme[$fontColor] ? theme[$fontColor] : (_ref12 = $fontColor !== null && $fontColor !== void 0 ? $fontColor : theme && theme.purpleDark) !== null && _ref12 !== void 0 ? _ref12 : "#2d1e4a";
+}, function (_ref13) {
+  var _purpleMedium;
+  var theme = _ref13.theme;
+  return (_purpleMedium = theme.purpleMedium) !== null && _purpleMedium !== void 0 ? _purpleMedium : "#7c4dff";
+}, function (props) {
+  return props.$borderRadius || "20px";
+});

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

@@ -0,0 +1,6 @@
+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, { keyframes } from "styled-components";
+var confettiScale1 = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(1);\n  }\n  10% {\n    transform: scale(1.2);\n  }\n  20% {\n    transform: scale(1);\n  }\n  30% {\n    transform: scale(1.2);\n  }\n  40% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.2);\n  }\n  60% {\n    transform: scale(1);\n  }\n  70% {\n    transform: scale(1.2);\n  }\n  80% {\n    transform: scale(1);\n  }\n  90% {\n    transform: scale(1.2);\n  }\n  100% {\n    transform: scale(1);\n  }\n"])));
+var confettiScale2 = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(1) scaleX(-1);\n  }\n  10% {\n    transform: scale(1.2) scaleX(-1);\n  }\n  20% {\n    transform: scale(1) scaleX(-1);\n  }\n  30% {\n    transform: scale(1.2) scaleX(-1);\n  }\n  40% {\n    transform: scale(1) scaleX(-1);\n  }\n  50% {\n    transform: scale(1.2) scaleX(-1);\n  }\n  60% {\n    transform: scale(1) scaleX(-1);\n  }\n  70% {\n    transform: scale(1.2) scaleX(-1);\n  }\n  80% {\n    transform: scale(1) scaleX(-1);\n  }\n  90% {\n    transform: scale(1.2) scaleX(-1);\n  }\n  100% {\n    transform: scale(1) scaleX(-1);\n  }\n"])));
+export var CongratulationContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.4);\n  z-index: 999999;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n\n  h1 {\n    z-index: 999;\n    font-family: \"AldoTheApalache\", sans-serif;\n    font-size: 8vw;\n    background: linear-gradient(\n      180deg,\n      #eaa80c 0%,\n      #fdcc06 35%,\n      #fac707 48%,\n      #f4ba0c 64%,\n      #eaa415 79%,\n      #dc8521 96%,\n      #d87c25 100%\n    );\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    -webkit-text-stroke: 1px #3c096c;\n    letter-spacing: 7px;\n    @media (max-width: 900px) {\n      font-size: 6vw;\n    }\n  }\n\n  .level {\n    margin-top: -50px;\n    @media (max-width: 900px) {\n      margin-top: -20px;\n    }\n    @media (max-width: 500px) {\n      margin-top: -0px;\n    }\n  }\n\n  .trom1 {\n    position: fixed;\n    bottom: 65px;\n    left: 0;\n    width: 270px;\n    transform: scaleX(-1);\n    animation: ", " 3.5s infinite;\n    @media (max-width: 900px) {\n      width: 220px;\n      bottom: 70px;\n    }\n  }\n\n  .trom2 {\n    position: fixed;\n    bottom: -13.5px;\n    left: 0;\n    width: 220px;\n    transform: scaleX(-1);\n    animation: ", " 3.5s infinite;\n    @media (max-width: 900px) {\n      width: 170px;\n      bottom: 0.5px;\n    }\n  }\n\n  .trom3 {\n    position: fixed;\n    bottom: -70px;\n    left: 0;\n    width: 170px;\n    transform: scaleX(-1);\n    animation: ", " 3.5s infinite;\n    @media (max-width: 900px) {\n      width: 120px;\n      bottom: -50px;\n    }\n  }\n\n  .trom4 {\n    position: fixed;\n    bottom: 65px;\n    right: 0;\n    width: 270px;\n    animation: ", " 3.5s infinite;\n    @media (max-width: 900px) {\n      width: 220px;\n      bottom: 70px;\n    }\n  }\n\n  .trom5 {\n    position: fixed;\n    bottom: -13.5px;\n    right: 0;\n    width: 220px;\n    animation: ", " 3.5s infinite;\n    @media (max-width: 900px) {\n      width: 170px;\n      bottom: 0.5px;\n    }\n  }\n\n  .trom6 {\n    position: fixed;\n    bottom: -70px;\n    right: 0;\n    width: 170px;\n    animation: ", " 3.5s infinite;\n    @media (max-width: 900px) {\n      width: 120px;\n      bottom: -50px;\n    }\n  }\n"])), confettiScale2, confettiScale2, confettiScale2, confettiScale1, confettiScale1, confettiScale1);

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

@@ -0,0 +1,45 @@
+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";
+import HInput from "../HInput/HInput";
+export var UsersList = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: -0.8em;\n  width: 300px;\n  max-height: 200px;\n  overflow-y: auto;\n  box-shadow: rgba(112, 37, 190, 0.11) 0px -6px 26px inset,\n    rgba(112, 37, 190, 0.27) 4px 4px 26px inset;\n  border: 2px solid ", ";\n  border-radius: 5px;\n\n  &::-webkit-scrollbar {\n    width: 10px;\n    background: ", ";\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 10px;\n    border: 2px solid\n      ", ";\n  }\n"])), function (_ref) {
+  var _purpleMedium;
+  var theme = _ref.theme;
+  return (_purpleMedium = theme.purpleMedium) !== null && _purpleMedium !== void 0 ? _purpleMedium : "#7c4dff";
+}, function (_ref2) {
+  var _shadePurpleLight;
+  var theme = _ref2.theme;
+  return (_shadePurpleLight = theme.shadePurpleLight) !== null && _shadePurpleLight !== void 0 ? _shadePurpleLight : "#e1bee7";
+}, function (_ref3) {
+  var _purpleMedium2;
+  var theme = _ref3.theme;
+  return (_purpleMedium2 = theme.purpleMedium) !== null && _purpleMedium2 !== void 0 ? _purpleMedium2 : "#7c4dff";
+}, function (_ref4) {
+  var _shadePurpleLight2;
+  var theme = _ref4.theme;
+  return (_shadePurpleLight2 = theme.shadePurpleLight) !== null && _shadePurpleLight2 !== void 0 ? _shadePurpleLight2 : "#e1bee7";
+});
+export var OptionUsersList = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: var(--h6);\n  font-weight: var(--weight-regular);\n  color: ", " !important;\n  background: ", ";\n  width: 100%;\n  text-align: center;\n  margin: 0 !important;\n  display: flex;\n  justify-content: space-between;\n  padding: 3px 10px;\n  cursor: pointer;\n\n  &:not(:last-child) {\n    border-bottom: 1px solid\n      ", ";\n  }\n\n  &:hover {\n    background: ", ";\n    color: ", " !important;\n  }\n"])), function (_ref5) {
+  var _purpleDark, _goldColor;
+  var theme = _ref5.theme,
+    active = _ref5.active;
+  return !active ? (_purpleDark = theme.purpleDark) !== null && _purpleDark !== void 0 ? _purpleDark : "#2d1e4a" : (_goldColor = theme.goldColor) !== null && _goldColor !== void 0 ? _goldColor : "#f9c407";
+}, function (_ref6) {
+  var _shadePurpleDark;
+  var theme = _ref6.theme,
+    active = _ref6.active;
+  return !active ? "transparent" : (_shadePurpleDark = theme.shadePurpleDark) !== null && _shadePurpleDark !== void 0 ? _shadePurpleDark : "#2d1e4a";
+}, function (_ref7) {
+  var _purpleMedium3;
+  var theme = _ref7.theme;
+  return (_purpleMedium3 = theme.purpleMedium) !== null && _purpleMedium3 !== void 0 ? _purpleMedium3 : "#7c4dff";
+}, function (_ref8) {
+  var _shadePurpleLight3;
+  var theme = _ref8.theme;
+  return (_shadePurpleLight3 = theme.shadePurpleLight) !== null && _shadePurpleLight3 !== void 0 ? _shadePurpleLight3 : "#e1bee7";
+}, function (_ref9) {
+  var _purpleDark2;
+  var theme = _ref9.theme;
+  return (_purpleDark2 = theme.purpleDark) !== null && _purpleDark2 !== void 0 ? _purpleDark2 : "#2d1e4a";
+});
+export var ResponsiveHInput = styled(HInput)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 300px;\n  @media (max-width: 500px) {\n    width: 100%;\n    margin: 0;\n  }\n"])));

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

@@ -0,0 +1,56 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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 ModalContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgb(0 0 0 / 69%);\n  z-index: 99999;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+export var ModalContent = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  color: #555;\n  margin: auto;\n  margin-bottom: 16px;\n  padding: 15px 10px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n\n  p {\n    text-align: center;\n    font-size: ", ";\n    color: ", ";\n    font-weight: ", ";\n  }\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    height: 10px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 10px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 10px;\n    border: 2px solid\n      ", ";\n  }\n"])), function (_ref) {
+  var _textSize;
+  var theme = _ref.theme;
+  return (_textSize = theme.textSize) !== null && _textSize !== void 0 ? _textSize : "var(--p16)";
+}, function (_ref2) {
+  var _purpleDark;
+  var theme = _ref2.theme;
+  return (_purpleDark = theme.purpleDark) !== null && _purpleDark !== void 0 ? _purpleDark : "#2d1e4a";
+}, function (_ref3) {
+  var _textWeight;
+  var theme = _ref3.theme;
+  return (_textWeight = theme.textWeight) !== null && _textWeight !== void 0 ? _textWeight : "var(--weight-book)";
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return (theme === null || theme === void 0 ? void 0 : theme.shadePurpleLight) || "#3c1b85";
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return (theme === null || theme === void 0 ? void 0 : theme.shadePurpleDark) || "#8545c7";
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return (theme === null || theme === void 0 ? void 0 : theme.shadePurpleDark) || "#3c1b85";
+});
+export var ModalHeader = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 15px;\n  background: ", " !important;\n  text-transform: uppercase;\n  border-radius: 20px 20px 0 0;\n\n  h3 {\n    font-size: 20px;\n    color: ", " !important;\n  }\n"])), function (_ref7) {
+  var _shadePurpleDark;
+  var theme = _ref7.theme;
+  return (_shadePurpleDark = theme.shadePurpleDark) !== null && _shadePurpleDark !== void 0 ? _shadePurpleDark : "#2d1e4a";
+}, function (_ref8) {
+  var _purpleLight;
+  var theme = _ref8.theme;
+  return (_purpleLight = theme.purpleLight2) !== null && _purpleLight !== void 0 ? _purpleLight : "#ce93d8";
+});
+export var CloseButton = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: none;\n  border: none;\n  font-size: 20px;\n  font-weight: bold;\n  cursor: pointer;\n\n  svg {\n    color: ", " !important;\n  }\n"])), function (_ref9) {
+  var _purpleLight2;
+  var theme = _ref9.theme;
+  return (_purpleLight2 = theme.purpleLight2) !== null && _purpleLight2 !== void 0 ? _purpleLight2 : "#ce93d8";
+});
+export var ModalBody = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: 20px;\n  width: ", ";\n  height: ", ";\n  background: ", " !important;\n  display: flex;\n  flex-direction: column;\n  padding: 0 0 16px 0;\n  align-items: center;\n  justify-content: flex-start;\n  z-index: 9999;\n  border: 1px solid ", " !important;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  margin: 0px 10px;\n"])), function (_ref0) {
+  var width = _ref0.width;
+  return width !== null && width !== void 0 ? width : "500px";
+}, function (_ref1) {
+  var height = _ref1.height;
+  return height !== null && height !== void 0 ? height : "auto";
+}, function (_ref10) {
+  var _shadePurpleLight;
+  var theme = _ref10.theme;
+  return (_shadePurpleLight = theme.shadePurpleLight) !== null && _shadePurpleLight !== void 0 ? _shadePurpleLight : "#e1bee7";
+}, function (_ref11) {
+  var _purpleDark2;
+  var theme = _ref11.theme;
+  return (_purpleDark2 = theme.purpleDark) !== null && _purpleDark2 !== void 0 ? _purpleDark2 : "#2d1e4a";
+});
+export var ModalFooter = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  gap: 8px;\n  flex-wrap: wrap;\n"])));

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

@@ -0,0 +1,21 @@
+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: ", ";\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  position: relative;\n"])), function (_ref) {
+  var width = _ref.width;
+  return width !== null && width !== void 0 ? width : "100%";
+}, function (_ref2) {
+  var _ref3;
+  var backgroundColor = _ref2.backgroundColor,
+    theme = _ref2.theme;
+  return (_ref3 = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.shadePurpleLight) !== null && _ref3 !== void 0 ? _ref3 : "#e1bee7";
+});
+export var ProgressBarFill = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 20px;\n  border-radius: 10px;\n  background: ", ";\n  width: ", ";\n  position: relative;\n  transition: width 0.3s ease;\n  position: absolute;\n  left: 0;\n  height: 22px;\n"])), function (_ref4) {
+  var _ref5;
+  var fillColor = _ref4.fillColor,
+    theme = _ref4.theme;
+  return (_ref5 = fillColor !== null && fillColor !== void 0 ? fillColor : theme.shadePurpleDark) !== null && _ref5 !== void 0 ? _ref5 : "#2d1e4a";
+}, 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.styled.js

@@ -0,0 +1,56 @@
+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 !== null && direction !== void 0 ? direction : "column";
+}, function (_ref2) {
+  var gap = _ref2.gap;
+  return gap !== null && gap !== void 0 ? 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 _purpleMedium;
+  var theme = _ref4.theme;
+  return (_purpleMedium = theme === null || theme === void 0 ? void 0 : theme.purpleMedium) !== null && _purpleMedium !== void 0 ? _purpleMedium : "#6c63ff";
+}, function (_ref5) {
+  var type = _ref5.type;
+  return type === "checkbox" ? "4px" : "50%";
+}, function (_ref6) {
+  var _backgroundLight;
+  var theme = _ref6.theme;
+  return (_backgroundLight = theme === null || theme === void 0 ? void 0 : theme.backgroundLight) !== null && _backgroundLight !== void 0 ? _backgroundLight : "#fff";
+}, function (_ref7) {
+  var _purpleMedium2;
+  var theme = _ref7.theme;
+  return (_purpleMedium2 = theme === null || theme === void 0 ? void 0 : theme.purpleMedium) !== null && _purpleMedium2 !== void 0 ? _purpleMedium2 : "#6c63ff";
+}, function (_ref8) {
+  var _purpleDark;
+  var theme = _ref8.theme;
+  return (_purpleDark = theme === null || theme === void 0 ? void 0 : theme.purpleDark) !== null && _purpleDark !== void 0 ? _purpleDark : "#4c3faa";
+}, function (_ref9) {
+  var _purpleDark2;
+  var theme = _ref9.theme;
+  return (_purpleDark2 = theme === null || theme === void 0 ? void 0 : theme.purpleDark) !== null && _purpleDark2 !== void 0 ? _purpleDark2 : "#4c3faa";
+}, function (_ref0) {
+  var _purpleDark3;
+  var theme = _ref0.theme;
+  return (_purpleDark3 = theme === null || theme === void 0 ? void 0 : theme.purpleDark) !== null && _purpleDark3 !== void 0 ? _purpleDark3 : "#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 !== null && $labelSize !== void 0 ? $labelSize : "var(--h5)";
+}, function (_ref10) {
+  var _ref11;
+  var $labelColor = _ref10.$labelColor,
+    theme = _ref10.theme;
+  return (_ref11 = $labelColor !== null && $labelColor !== void 0 ? $labelColor : theme === null || theme === void 0 ? void 0 : theme.purpleMedium) !== null && _ref11 !== void 0 ? _ref11 : "black";
+});

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

@@ -0,0 +1,53 @@
+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 ScoreBarContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", "px;\n  width: 15px;\n  position: relative;\n  overflow: hidden;\n  border-radius: 10px;\n  margin-right: 15px;\n  align-self: start;\n  border: 3px solid ", ";\n"])), function (props) {
+  var _props$height;
+  return (_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : 536;
+}, function (_ref) {
+  var _purpleMedium;
+  var theme = _ref.theme;
+  return (_purpleMedium = theme === null || theme === void 0 ? void 0 : theme.purpleMedium) !== null && _purpleMedium !== void 0 ? _purpleMedium : "#6c63ff";
+});
+
+// Styled component for White's score indicator
+export var WhiteScoreIndicator = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", "px;\n  background-color: ", "; // White's color\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  transition: height 0.3s ease-in-out;\n  border-top-left-radius: ", "px;\n  border-top-right-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n"])), function (props) {
+  return (props.height ? props.height / 2 : 268) + props.score / 1000 * (props.height ? props.height / 2 : 268);
+}, function (_ref2) {
+  var _purpleLight;
+  var theme = _ref2.theme;
+  return (_purpleLight = theme === null || theme === void 0 ? void 0 : theme.purpleLight) !== null && _purpleLight !== void 0 ? _purpleLight : "#e1bee7";
+}, function (props) {
+  return props.player === "white" ? null : 0;
+}, function (props) {
+  return props.player === "white" ? 0 : null;
+}, function (props) {
+  return props.player === "white" ? 0 : 10;
+}, function (props) {
+  return props.player === "white" ? 0 : 10;
+}, function (props) {
+  return props.player === "white" ? 10 : 0;
+}, function (props) {
+  return props.player === "white" ? 10 : 0;
+});
+
+// Styled component for Black's score indicator
+export var BlackScoreIndicator = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", "px;\n  background-color: ", "; // Black's color\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  transition: height 0.3s ease-in-out;\n  border-top-left-radius: ", "px;\n  border-top-right-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n"])), function (props) {
+  return (props.height ? props.height / 2 : 268) - props.score / 1000 * (props.height ? props.height / 2 : 268);
+}, function (_ref3) {
+  var _purpleMedium2;
+  var theme = _ref3.theme;
+  return (_purpleMedium2 = theme === null || theme === void 0 ? void 0 : theme.purpleMedium) !== null && _purpleMedium2 !== void 0 ? _purpleMedium2 : "#6c63ff";
+}, function (props) {
+  return props.player === "white" ? 0 : null;
+}, function (props) {
+  return props.player === "white" ? null : 0;
+}, function (props) {
+  return props.player !== "white" ? 0 : 10;
+}, function (props) {
+  return props.player !== "white" ? 0 : 10;
+}, function (props) {
+  return props.player !== "white" ? 10 : 0;
+}, function (props) {
+  return props.player !== "white" ? 10 : 0;
+});

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

@@ -0,0 +1,72 @@
+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";
+export var SearchContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", "; /* Direcci\xF3n (row o column) */\n  gap: ", "; /* Espaciado entre label y select */\n"])), function (_ref) {
+  var direction = _ref.direction;
+  return direction !== null && direction !== void 0 ? direction : "column";
+}, function (_ref2) {
+  var gap = _ref2.gap;
+  return gap;
+});
+export var SearchLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: ", ";\n\n  font-weight: ", ";\n\n  color: ", ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n"])), function (_ref3) {
+  var $labelSize = _ref3.$labelSize;
+  if (!$labelSize) return "var(--p16)";
+  if ($labelSize !== null && $labelSize !== void 0 && $labelSize.startsWith("h") || $labelSize !== null && $labelSize !== void 0 && $labelSize.startsWith("p")) {
+    return "var(--".concat($labelSize, ", var(--p16))");
+  }
+  return $labelSize;
+}, function (_ref4) {
+  var $labelWeight = _ref4.$labelWeight;
+  if (!$labelWeight) return "var(--weight-medium)";
+  if ($labelWeight !== null && $labelWeight !== void 0 && $labelWeight.startsWith("weight-")) {
+    return "var(--".concat($labelWeight, ", var(--weight-medium))");
+  }
+  return $labelWeight; // 400, 700, 'inherit', etc.
+}, function (_ref5) {
+  var _purpleMedium;
+  var $labelColor = _ref5.$labelColor,
+    theme = _ref5.theme;
+  return $labelColor && (theme === null || theme === void 0 ? void 0 : theme["".concat($labelColor)]) || $labelColor || ((_purpleMedium = theme === null || theme === void 0 ? void 0 : theme.purpleMedium) !== null && _purpleMedium !== void 0 ? _purpleMedium : "#6c63ff");
+});
+export var SearchInputContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  width: ", "; /* Ancho predeterminado */\n  height: ", "; /* Altura predeterminada */\n  display: flex;\n  align-items: center;\n  border: 2.5px solid\n    ", ";\n  border-radius: ", ";\n  background: white;\n  box-shadow: rgba(112, 37, 190, 0.11) 0px -6px 26px inset,\n    rgba(112, 37, 190, 0.27) 4px 4px 26px inset;\n  padding: 0 ", ";\n\n  img {\n    margin-right: ", ";\n  }\n"])), function (props) {
+  var _props$width;
+  return (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : "367px";
+}, function (props) {
+  var _props$height;
+  return (_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : "40px";
+}, function (props) {
+  var _ref6, _props$borderColor, _props$theme;
+  return (_ref6 = (_props$borderColor = props.borderColor) !== null && _props$borderColor !== void 0 ? _props$borderColor : (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.purpleMedium) !== null && _ref6 !== void 0 ? _ref6 : "#6c63ff";
+}, function (props) {
+  var _props$borderRadius;
+  return (_props$borderRadius = props.borderRadius) !== null && _props$borderRadius !== void 0 ? _props$borderRadius : "20px";
+}, function (props) {
+  var _props$gap;
+  return (_props$gap = props.gap) !== null && _props$gap !== void 0 ? _props$gap : "10px";
+}, function (props) {
+  var _props$gap2;
+  return (_props$gap2 = props.gap) !== null && _props$gap2 !== void 0 ? _props$gap2 : "10px";
+});
+export var SearchInput = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n\n  font-size: ", ";\n\n  font-weight: ", ";\n\n  color: ", "; /* Color del texto desde el theme */\n\n  background: transparent;\n  border: none;\n  border-radius: ", ";\n  font-family: \"Poppins\", sans-serif;\n  line-height: 1.5;\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n  }\n"])), function (_ref7) {
+  var $fontSize = _ref7.$fontSize;
+  if (!$fontSize) return "var(--p16)";
+  if ($fontSize !== null && $fontSize !== void 0 && $fontSize.startsWith("h") || $fontSize !== null && $fontSize !== void 0 && $fontSize.startsWith("p")) {
+    return "var(--".concat($fontSize, ", var(--p16))");
+  }
+  return $fontSize;
+}, function (_ref8) {
+  var $fontWeight = _ref8.$fontWeight;
+  if (!$fontWeight) return "var(--weight-book)";
+  if ($fontWeight !== null && $fontWeight !== void 0 && $fontWeight.startsWith("weight-")) {
+    return "var(--".concat($fontWeight, ", var(--weight-book))");
+  }
+  return $fontWeight; // 400, 700, 'inherit', etc.
+}, function (_ref9) {
+  var _ref0, _ref1, _ref10;
+  var $fontColor = _ref9.$fontColor,
+    theme = _ref9.theme;
+  return (_ref0 = (_ref1 = (_ref10 = $fontColor && (theme === null || theme === void 0 ? void 0 : theme["".concat($fontColor)])) !== null && _ref10 !== void 0 ? _ref10 : $fontColor) !== null && _ref1 !== void 0 ? _ref1 : theme === null || theme === void 0 ? void 0 : theme.purpleLight2) !== null && _ref0 !== void 0 ? _ref0 : "#e1bee7";
+}, function (props) {
+  var _props$borderRadius2;
+  return (_props$borderRadius2 = props.borderRadius) !== null && _props$borderRadius2 !== void 0 ? _props$borderRadius2 : "20px";
+});

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

@@ -0,0 +1,18 @@
+var _templateObject;
+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 Slider from "rc-slider";
+export var StyledSlider = styled(Slider)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 22px;\n  width: 100%;\n  max-width: 340px;\n\n  .rc-slider-rail {\n    border-radius: 7.5px;\n    background: ", ";\n    height: 10px;\n    position: absolute;\n    width: 100%;\n  }\n\n  .rc-slider-track {\n    border-radius: 7.5px;\n    background: ", ";\n    height: 10px;\n    position: absolute;\n  }\n\n  .rc-slider-handle {\n    border-radius: 50%;\n    background: ", ";\n    height: 30px;\n    width: 30px;\n    margin-top: -11px;\n    border: 8px white solid;\n    box-shadow: 7px 7px 29px 0px rgba(112, 37, 190, 0.5) !important;\n    border-color: white !important;\n    opacity: 1;\n    position: absolute;\n\n    &:hover {\n      background-color: unset;\n    }\n\n    &:focus-visible {\n      border: 8px white solid;\n    }\n  }\n"])), function (_ref) {
+  var _purpleLight, _purpleLight2;
+  var theme = _ref.theme,
+    specialBg = _ref.specialBg;
+  return specialBg ? (_purpleLight = theme === null || theme === void 0 ? void 0 : theme.purpleLight) !== null && _purpleLight !== void 0 ? _purpleLight : "#e1bee7" : (_purpleLight2 = theme === null || theme === void 0 ? void 0 : theme.purpleLight2) !== null && _purpleLight2 !== void 0 ? _purpleLight2 : "#f3e5f5";
+}, function (_ref2) {
+  var _shadePurpleDark;
+  var theme = _ref2.theme;
+  return (_shadePurpleDark = theme === null || theme === void 0 ? void 0 : theme.shadePurpleDark) !== null && _shadePurpleDark !== void 0 ? _shadePurpleDark : "#2d1e4a";
+}, function (_ref3) {
+  var _shadePurpleDark2;
+  var theme = _ref3.theme;
+  return (_shadePurpleDark2 = theme === null || theme === void 0 ? void 0 : theme.shadePurpleDark) !== null && _shadePurpleDark2 !== void 0 ? _shadePurpleDark2 : "#2d1e4a";
+});

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

@@ -0,0 +1,22 @@
+var _templateObject, _templateObject2;
+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 TabContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border: 3px solid ", ";\n  border-radius: 25px;\n"])), function (_ref) {
+  var _purpleMedium;
+  var theme = _ref.theme;
+  return (_purpleMedium = theme === null || theme === void 0 ? void 0 : theme.purpleMedium) !== null && _purpleMedium !== void 0 ? _purpleMedium : "#6c63ff";
+});
+export var Tab = styled.h1(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  font-weight: var(--weight-bold);\n  border-radius: 25px;\n  padding: 5px 20px;\n  font-size: ", ";\n  margin: 0;\n  transition: all 0.3s ease;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"])), function (_ref2) {
+  var _shadePurpleDark;
+  var theme = _ref2.theme,
+    active = _ref2.active;
+  return active ? (_shadePurpleDark = theme === null || theme === void 0 ? void 0 : theme.shadePurpleDark) !== null && _shadePurpleDark !== void 0 ? _shadePurpleDark : "#2d1e4a" : "transparent";
+}, function (_ref3) {
+  var _purpleLight, _purpleMedium2;
+  var theme = _ref3.theme,
+    active = _ref3.active;
+  return active ? (_purpleLight = theme === null || theme === void 0 ? void 0 : theme.purpleLight) !== null && _purpleLight !== void 0 ? _purpleLight : "#e1bee7" : (_purpleMedium2 = theme === null || theme === void 0 ? void 0 : theme.purpleMedium) !== null && _purpleMedium2 !== void 0 ? _purpleMedium2 : "#6c63ff";
+}, function (_ref4) {
+  var moreFont = _ref4.moreFont;
+  return !moreFont ? "var(--p14)" : "var(--h6)";
+});