@ludo.ninja/components 1.0.6 → 1.0.8

package/dist/store/ui/utils.js

@@ -1,28 +1,35 @@
 import { rootAddOverflow, rootRemoveOverflow } from '@ludo.ninja/utils';
+
 export var builderModal = function (fields, setState) {
-    var _a;
-    return (_a = {},
-        _a[fields.trigger] = false,
-        _a[fields.opener] = function (component) {
-            var _a;
-            rootAddOverflow();
-            setState((_a = {
-                    contentModals: component,
-                    isOverlayActive: true
-                },
-                _a[fields.trigger] = true,
-                _a));
-        },
-        _a[fields.closer] = function () {
-            var _a;
-            rootRemoveOverflow();
-            setState((_a = {
-                    contentModals: null,
-                    stylesModals: null,
-                    isOverlayActive: false
-                },
-                _a[fields.trigger] = false,
-                _a));
-        },
-        _a);
+  var _a;
+  return (
+    (_a = {}),
+    (_a[fields.trigger] = false),
+    (_a[fields.opener] = function (component) {
+      var _a;
+      rootAddOverflow();
+      setState(
+        ((_a = {
+          contentModals: component,
+          isOverlayActive: true,
+        }),
+        (_a[fields.trigger] = true),
+        _a)
+      );
+    }),
+    (_a[fields.closer] = function () {
+      var _a;
+      rootRemoveOverflow();
+      setState(
+        ((_a = {
+          contentModals: null,
+          stylesModals: null,
+          isOverlayActive: false,
+        }),
+        (_a[fields.trigger] = false),
+        _a)
+      );
+    }),
+    _a
+  );
 };

package/dist/styles/ScreenWidth.js

@@ -1,23 +1,28 @@
 export var ScreenWidth;
 (function (ScreenWidth) {
-    ScreenWidth[ScreenWidth["MOBILE"] = 767] = "MOBILE";
-    ScreenWidth[ScreenWidth["PHONE"] = 360] = "PHONE";
-    ScreenWidth[ScreenWidth["BIG_PHONE"] = 500] = "BIG_PHONE";
-    ScreenWidth[ScreenWidth["TABLET"] = 768] = "TABLET";
-    ScreenWidth[ScreenWidth["DESKTOP"] = 1200] = "DESKTOP";
-    ScreenWidth[ScreenWidth["MAX_WIDTH_TABLET"] = 1199] = "MAX_WIDTH_TABLET";
-    ScreenWidth[ScreenWidth["FOUR_K_MIN"] = 2032] = "FOUR_K_MIN";
-    ScreenWidth[ScreenWidth["FOUR_K_MAX"] = 4064] = "FOUR_K_MAX";
+  ScreenWidth[(ScreenWidth['MOBILE'] = 767)] = 'MOBILE';
+  ScreenWidth[(ScreenWidth['PHONE'] = 360)] = 'PHONE';
+  ScreenWidth[(ScreenWidth['BIG_PHONE'] = 500)] = 'BIG_PHONE';
+  ScreenWidth[(ScreenWidth['TABLET'] = 768)] = 'TABLET';
+  ScreenWidth[(ScreenWidth['DESKTOP'] = 1200)] = 'DESKTOP';
+  ScreenWidth[(ScreenWidth['MAX_WIDTH_TABLET'] = 1199)] = 'MAX_WIDTH_TABLET';
+  ScreenWidth[(ScreenWidth['FOUR_K_MIN'] = 2032)] = 'FOUR_K_MIN';
+  ScreenWidth[(ScreenWidth['FOUR_K_MAX'] = 4064)] = 'FOUR_K_MAX';
 })(ScreenWidth || (ScreenWidth = {}));
 export var mediaQuery = {
-    mobile: "@media (max-width: ".concat(ScreenWidth.MOBILE, "px)"),
-    tablets: "@media (min-width: ".concat(ScreenWidth.TABLET, "px) and (max-width: ").concat(ScreenWidth.DESKTOP, "px)"),
-    phone: "@media (max-width: ".concat(ScreenWidth.PHONE, "px)"),
-    bigPhone: "@media (max-width: ".concat(ScreenWidth.BIG_PHONE, "px)"),
-    tablet: "@media (max-width: ".concat(ScreenWidth.TABLET, "px)"),
-    desktop: "@media (max-width: ".concat(ScreenWidth.DESKTOP, "px)"),
-    maxWidthTablet: "@media (max-width: ".concat(ScreenWidth.MAX_WIDTH_TABLET, "px)"),
-    minWidthTablet: "@media (min-width: ".concat(ScreenWidth.TABLET, "px)"),
-    minWidthDesktop: "@media (min-width: ".concat(ScreenWidth.DESKTOP, "px)"),
-    minWidthFourK: "@media (min-width: ".concat(ScreenWidth.FOUR_K_MIN, "px)"),
+  mobile: '@media (max-width: '.concat(ScreenWidth.MOBILE, 'px)'),
+  tablets: '@media (min-width: '
+    .concat(ScreenWidth.TABLET, 'px) and (max-width: ')
+    .concat(ScreenWidth.DESKTOP, 'px)'),
+  phone: '@media (max-width: '.concat(ScreenWidth.PHONE, 'px)'),
+  bigPhone: '@media (max-width: '.concat(ScreenWidth.BIG_PHONE, 'px)'),
+  tablet: '@media (max-width: '.concat(ScreenWidth.TABLET, 'px)'),
+  desktop: '@media (max-width: '.concat(ScreenWidth.DESKTOP, 'px)'),
+  maxWidthTablet: '@media (max-width: '.concat(
+    ScreenWidth.MAX_WIDTH_TABLET,
+    'px)'
+  ),
+  minWidthTablet: '@media (min-width: '.concat(ScreenWidth.TABLET, 'px)'),
+  minWidthDesktop: '@media (min-width: '.concat(ScreenWidth.DESKTOP, 'px)'),
+  minWidthFourK: '@media (min-width: '.concat(ScreenWidth.FOUR_K_MIN, 'px)'),
 };

package/dist/styles/animations/index.jsx

@@ -1,8 +1,36 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { keyframes } from 'styled-components';
-export var rotateReverse = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    transform: rotate(360deg);\n  }\n  to {\n    transform: rotate(0deg);\n  }\n"], ["\n  from {\n    transform: rotate(360deg);\n  }\n  to {\n    transform: rotate(0deg);\n  }\n"])));
-export var rotate = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"], ["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
+export var rotateReverse = keyframes(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  from {\n    transform: rotate(360deg);\n  }\n  to {\n    transform: rotate(0deg);\n  }\n',
+      ],
+      [
+        '\n  from {\n    transform: rotate(360deg);\n  }\n  to {\n    transform: rotate(0deg);\n  }\n',
+      ]
+    ))
+);
+export var rotate = keyframes(
+  templateObject_2 ||
+    (templateObject_2 = __makeTemplateObject(
+      [
+        '\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n',
+      ],
+      [
+        '\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n',
+      ]
+    ))
+);
 var templateObject_1, templateObject_2;

package/dist/styles/colors/index.jsx

@@ -1 +1,36 @@
-export { AccentColor, BlackColor, TextGrayColor, TextGray2Color, TextDarkGrayColor, BorderColorLight, BorderColorDark, InactiveButtonColor, BackgroundColorLight, BackgroundColorDark, WhiteColor, ProgressColor, ProgressColorMedium, ProgressColorMinimum, DangerColorLight, DangerColorDark, DarkBlueColor, DisabledGrayColor, BlueShadowColor, DisabledLightGrayColor, GrayBackgroundColor, DisabledDangerColor, ErrorColor, TableExperienceColorDark, ExpProgressBlankDark, ExpUserProgressFill, ExpTaskProgressFill, HeaderBackgroundDark, SearchInputBg, ExperienceGradientLabelLight, ExperienceGradientLabelDark, InviteGradientLabelLight, InviteGradientLabelDark, CategoryHoverBg, } from '@ludo.ninja/ui/build/styles/colors';
+export {
+  AccentColor,
+  BlackColor,
+  TextGrayColor,
+  TextGray2Color,
+  TextDarkGrayColor,
+  BorderColorLight,
+  BorderColorDark,
+  InactiveButtonColor,
+  BackgroundColorLight,
+  BackgroundColorDark,
+  WhiteColor,
+  ProgressColor,
+  ProgressColorMedium,
+  ProgressColorMinimum,
+  DangerColorLight,
+  DangerColorDark,
+  DarkBlueColor,
+  DisabledGrayColor,
+  BlueShadowColor,
+  DisabledLightGrayColor,
+  GrayBackgroundColor,
+  DisabledDangerColor,
+  ErrorColor,
+  TableExperienceColorDark,
+  ExpProgressBlankDark,
+  ExpUserProgressFill,
+  ExpTaskProgressFill,
+  HeaderBackgroundDark,
+  SearchInputBg,
+  ExperienceGradientLabelLight,
+  ExperienceGradientLabelDark,
+  InviteGradientLabelLight,
+  InviteGradientLabelDark,
+  CategoryHoverBg,
+} from '@ludo.ninja/ui/build/styles/colors';

package/dist/styles/globalStyles.jsx

@@ -1,21 +1,55 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { createGlobalStyle } from 'styled-components';
+
 import { GlobalFontsFallback } from '@/fonts/FontsInitializeLayout';
-var GlobalStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  :root {\n    --app-height: 100vh;\n  }\n\n  html {\n    font-size: 0.625rem;\n    min-height: var(--app-height);\n    -webkit-font-smoothing: antialiased;\n    scroll-behavior: smooth;\n  }\n\n  body {\n    font-family: 'Poppins', sans-serif;\n    letter-spacing: -0.015em;\n    padding: 0;\n    background: ", ";\n    border: 0;\n    margin: 0;\n    min-height: var(--app-height);\n    position: relative;\n\n    &.dark-theme {\n      .react-loading-skeleton {\n        --base-color: #3A3D4C !important;\n        --highlight-color: #292C39 !important;\n      }\n    }\n  }\n\n  p {\n    padding: 0;\n    margin: 0;\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  .modal-dialog {\n    max-width: 100%;\n    width: fit-content;\n  }\n\n  .modal-dg {\n    display: flex;\n    align-content: center;\n    justify-content: center;\n  }\n\n  .modal-content {\n    border-radius: 2.2rem !important;\n    overflow: hidden;\n    outline: none;\n    border: 0;\n  }\n\n  ::selection {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  ::-webkit-scrollbar {\n    height: 2px;\n    width: 4px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  ", "\n"], ["\n  :root {\n    --app-height: 100vh;\n  }\n\n  html {\n    font-size: 0.625rem;\n    min-height: var(--app-height);\n    -webkit-font-smoothing: antialiased;\n    scroll-behavior: smooth;\n  }\n\n  body {\n    font-family: 'Poppins', sans-serif;\n    letter-spacing: -0.015em;\n    padding: 0;\n    background: ", ";\n    border: 0;\n    margin: 0;\n    min-height: var(--app-height);\n    position: relative;\n\n    &.dark-theme {\n      .react-loading-skeleton {\n        --base-color: #3A3D4C !important;\n        --highlight-color: #292C39 !important;\n      }\n    }\n  }\n\n  p {\n    padding: 0;\n    margin: 0;\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  .modal-dialog {\n    max-width: 100%;\n    width: fit-content;\n  }\n\n  .modal-dg {\n    display: flex;\n    align-content: center;\n    justify-content: center;\n  }\n\n  .modal-content {\n    border-radius: 2.2rem !important;\n    overflow: hidden;\n    outline: none;\n    border: 0;\n  }\n\n  ::selection {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  ::-webkit-scrollbar {\n    height: 2px;\n    width: 4px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
+var GlobalStyle = createGlobalStyle(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        "\n  :root {\n    --app-height: 100vh;\n  }\n\n  html {\n    font-size: 0.625rem;\n    min-height: var(--app-height);\n    -webkit-font-smoothing: antialiased;\n    scroll-behavior: smooth;\n  }\n\n  body {\n    font-family: 'Poppins', sans-serif;\n    letter-spacing: -0.015em;\n    padding: 0;\n    background: ",
+        ';\n    border: 0;\n    margin: 0;\n    min-height: var(--app-height);\n    position: relative;\n\n    &.dark-theme {\n      .react-loading-skeleton {\n        --base-color: #3A3D4C !important;\n        --highlight-color: #292C39 !important;\n      }\n    }\n  }\n\n  p {\n    padding: 0;\n    margin: 0;\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  .modal-dialog {\n    max-width: 100%;\n    width: fit-content;\n  }\n\n  .modal-dg {\n    display: flex;\n    align-content: center;\n    justify-content: center;\n  }\n\n  .modal-content {\n    border-radius: 2.2rem !important;\n    overflow: hidden;\n    outline: none;\n    border: 0;\n  }\n\n  ::selection {\n    color: ',
+        ';\n    background-color: ',
+        ';\n  }\n\n  ::-webkit-scrollbar {\n    height: 2px;\n    width: 4px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ',
+        ';\n  }\n\n  ',
+        '\n',
+      ],
+      [
+        "\n  :root {\n    --app-height: 100vh;\n  }\n\n  html {\n    font-size: 0.625rem;\n    min-height: var(--app-height);\n    -webkit-font-smoothing: antialiased;\n    scroll-behavior: smooth;\n  }\n\n  body {\n    font-family: 'Poppins', sans-serif;\n    letter-spacing: -0.015em;\n    padding: 0;\n    background: ",
+        ';\n    border: 0;\n    margin: 0;\n    min-height: var(--app-height);\n    position: relative;\n\n    &.dark-theme {\n      .react-loading-skeleton {\n        --base-color: #3A3D4C !important;\n        --highlight-color: #292C39 !important;\n      }\n    }\n  }\n\n  p {\n    padding: 0;\n    margin: 0;\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  .modal-dialog {\n    max-width: 100%;\n    width: fit-content;\n  }\n\n  .modal-dg {\n    display: flex;\n    align-content: center;\n    justify-content: center;\n  }\n\n  .modal-content {\n    border-radius: 2.2rem !important;\n    overflow: hidden;\n    outline: none;\n    border: 0;\n  }\n\n  ::selection {\n    color: ',
+        ';\n    background-color: ',
+        ';\n  }\n\n  ::-webkit-scrollbar {\n    height: 2px;\n    width: 4px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ',
+        ';\n  }\n\n  ',
+        '\n',
+      ]
+    )),
+  function (_a) {
     var theme = _a.theme;
     return theme.colors.bg;
-}, function (_a) {
+  },
+  function (_a) {
     var theme = _a.theme;
     return theme.colors.naturalWhite;
-}, function (_a) {
+  },
+  function (_a) {
     var theme = _a.theme;
     return theme.colors.accent;
-}, function (_a) {
+  },
+  function (_a) {
     var theme = _a.theme;
     return theme.colors.scrollBar;
-}, GlobalFontsFallback);
+  },
+  GlobalFontsFallback
+);
 export default GlobalStyle;
 var templateObject_1;

package/dist/styles/mixins/boxShadow.jsx

@@ -1,8 +1,28 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+import { css } from 'styled-components';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
     return cooked;
+  };
+
+var BoxShadow = function () {
+  return css(
+    templateObject_1 ||
+      (templateObject_1 = __makeTemplateObject(
+        [
+          '\n  transition: box-shadow 0.25s ease-in-out 0s, transform 0.25s ease 0s;\n  box-shadow: none;\n\n  &:hover {\n    box-shadow: 0 10px 32px -16px rgba(33, 21, 95, 0.15);\n    transition: box-shadow 0.25s ease-in-out 0s, transform 0.25s ease 0s;\n  }\n',
+        ],
+        [
+          '\n  transition: box-shadow 0.25s ease-in-out 0s, transform 0.25s ease 0s;\n  box-shadow: none;\n\n  &:hover {\n    box-shadow: 0 10px 32px -16px rgba(33, 21, 95, 0.15);\n    transition: box-shadow 0.25s ease-in-out 0s, transform 0.25s ease 0s;\n  }\n',
+        ]
+      ))
+  );
 };
-import { css } from 'styled-components';
-var BoxShadow = function () { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transition: box-shadow 0.25s ease-in-out 0s, transform 0.25s ease 0s;\n  box-shadow: none;\n\n  &:hover {\n    box-shadow: 0 10px 32px -16px rgba(33, 21, 95, 0.15);\n    transition: box-shadow 0.25s ease-in-out 0s, transform 0.25s ease 0s;\n  }\n"], ["\n  transition: box-shadow 0.25s ease-in-out 0s, transform 0.25s ease 0s;\n  box-shadow: none;\n\n  &:hover {\n    box-shadow: 0 10px 32px -16px rgba(33, 21, 95, 0.15);\n    transition: box-shadow 0.25s ease-in-out 0s, transform 0.25s ease 0s;\n  }\n"]))); };
 export default BoxShadow;
 var templateObject_1;

package/dist/styles/mixins/boxTransform.jsx

@@ -1,8 +1,28 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+import { css } from 'styled-components';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
     return cooked;
+  };
+
+var BoxTransform = function () {
+  return css(
+    templateObject_1 ||
+      (templateObject_1 = __makeTemplateObject(
+        [
+          '\n  transition: 0.2s transform ease-in-out;\n\n  &:hover {\n    transition: 0.2s transform ease-in;\n    transform: translate(0px, -4px);\n  }\n',
+        ],
+        [
+          '\n  transition: 0.2s transform ease-in-out;\n\n  &:hover {\n    transition: 0.2s transform ease-in;\n    transform: translate(0px, -4px);\n  }\n',
+        ]
+      ))
+  );
 };
-import { css } from 'styled-components';
-var BoxTransform = function () { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transition: 0.2s transform ease-in-out;\n\n  &:hover {\n    transition: 0.2s transform ease-in;\n    transform: translate(0px, -4px);\n  }\n"], ["\n  transition: 0.2s transform ease-in-out;\n\n  &:hover {\n    transition: 0.2s transform ease-in;\n    transform: translate(0px, -4px);\n  }\n"]))); };
 export default BoxTransform;
 var templateObject_1;

package/dist/styles/typography/index.jsx

@@ -1 +1,11 @@
-export { FH1, FH2, FH3, MainText, FH4, FH5, FH6, FH7, TextSmall, } from '@ludo.ninja/ui/build/styles/typography';
+export {
+  FH1,
+  FH2,
+  FH3,
+  MainText,
+  FH4,
+  FH5,
+  FH6,
+  FH7,
+  TextSmall,
+} from '@ludo.ninja/ui/build/styles/typography';

package/dist/system/ActiveLink/index.jsx

@@ -1,34 +1,52 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { Children } from 'react';
+
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+
 import { pathToRegexp } from 'path-to-regexp';
+
+var __rest =
+  (this && this.__rest) ||
+  function (s, e) {
+    var t = {};
+    for (var p in s)
+      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === 'function')
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (
+          e.indexOf(p[i]) < 0 &&
+          Object.prototype.propertyIsEnumerable.call(s, p[i])
+        )
+          t[p[i]] = s[p[i]];
+      }
+    return t;
+  };
+
 var ActiveLink = function (_a) {
-    var children = _a.children, activeClassName = _a.activeClassName, props = __rest(_a, ["children", "activeClassName"]);
-    var asPath = useRouter().asPath;
-    var child = Children.only(children);
-    var childClassName = child.props.className || '';
-    var isActive = pathToRegexp(props.href || props.as, [], {
-        sensitive: true,
-    }).test(asPath);
-    var className = props.href || asPath === props.as
-        ? "".concat(childClassName, " ").concat(isActive ? activeClassName : '').trim()
-        : childClassName;
-    return (<Link {...props}>
+  var children = _a.children,
+    activeClassName = _a.activeClassName,
+    props = __rest(_a, ['children', 'activeClassName']);
+  var asPath = useRouter().asPath;
+  var child = Children.only(children);
+  var childClassName = child.props.className || '';
+  var isActive = pathToRegexp(props.href || props.as, [], {
+    sensitive: true,
+  }).test(asPath);
+  var className =
+    props.href || asPath === props.as
+      ? ''
+          .concat(childClassName, ' ')
+          .concat(isActive ? activeClassName : '')
+          .trim()
+      : childClassName;
+  return (
+    <Link {...props}>
       {React.cloneElement(child, {
-            className: className || null,
-        })}
-    </Link>);
+        className: className || null,
+      })}
+    </Link>
+  );
 };
 // Export
 export default ActiveLink;

package/dist/system/Alert/index.jsx

@@ -1,15 +1,21 @@
 import AlertUi from '@ludo.ninja/ui/build/system/Alert';
+
 import { useUiStore } from '@/store/ui';
+
 // Component
 var Alert = function () {
-    var _a = useUiStore(function (state) { return ({
+  var _a = useUiStore(function (state) {
+      return {
         closeAlert: state.closeAlert,
         updateData: state.alertType,
         isAlertOpen: state.isAlertOpen,
-    }); }), closeAlert = _a.closeAlert, updateData = _a.updateData, isAlertOpen = _a.isAlertOpen;
-    if (!(isAlertOpen && updateData))
-        return null;
-    return <AlertUi closeAlert={closeAlert} updateData={updateData}/>;
+      };
+    }),
+    closeAlert = _a.closeAlert,
+    updateData = _a.updateData,
+    isAlertOpen = _a.isAlertOpen;
+  if (!(isAlertOpen && updateData)) return null;
+  return <AlertUi closeAlert={closeAlert} updateData={updateData} />;
 };
 // Export
 export default Alert;

package/dist/system/Alert/type.js

@@ -1 +1,6 @@
-export { alertVariants, alertCaptions, alertBgColors, alertDefaultText, } from '@ludo.ninja/ui/build/system/Alert/type';
+export {
+  alertVariants,
+  alertCaptions,
+  alertBgColors,
+  alertDefaultText,
+} from '@ludo.ninja/ui/build/system/Alert/type';

package/dist/system/BasicOverlay/index.jsx

@@ -1,14 +1,33 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import React from 'react';
+
 import styled from 'styled-components';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
 // Styles
-var StyledBasicOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  display: block;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 3;\n  user-select: none;\n"], ["\n  position: fixed;\n  display: block;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 3;\n  user-select: none;\n"])));
+var StyledBasicOverlay = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  position: fixed;\n  display: block;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 3;\n  user-select: none;\n',
+      ],
+      [
+        '\n  position: fixed;\n  display: block;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 3;\n  user-select: none;\n',
+      ]
+    ))
+);
 // Component
 var BasicOverlay = function () {
-    return <StyledBasicOverlay data-testid="basic-overlay"/>;
+  return <StyledBasicOverlay data-testid="basic-overlay" />;
 };
 // Export
 export default BasicOverlay;

package/dist/system/Buttons/IconButton/index.jsx

@@ -1,2 +1,3 @@
 import IconButton from '@ludo.ninja/ui/build/system/Buttons/IconButton';
+
 export default IconButton;

package/dist/system/Buttons/IconWithButton/index.jsx

@@ -1,2 +1,3 @@
 import IconWithButton from '@ludo.ninja/ui/build/system/Buttons/IconWithButton';
+
 export default IconWithButton;

package/dist/system/Buttons/IconWithButton/themes.js

@@ -1 +1 @@
-"use strict";
+'use strict';

package/dist/system/Buttons/MainButton/index.jsx

@@ -1,2 +1,3 @@
 import MainButton from '@ludo.ninja/ui/build/system/Buttons/MainButton';
+
 export default MainButton;

package/dist/system/Buttons/MainButton/themes.js

@@ -1 +1 @@
-"use strict";
+'use strict';

package/dist/system/Buttons/SecondaryButton/index.jsx

@@ -1,2 +1,3 @@
 import SecondaryButton from '@ludo.ninja/ui/build/system/Buttons/SecondaryButton';
+
 export default SecondaryButton;

package/dist/system/Cards/CardCheckbox/index.jsx

@@ -1,24 +1,82 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import React, { useId } from 'react';
+
 import styled from 'styled-components';
+
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+
 import { mediaQuery } from '@/styles/ScreenWidth';
 import { WhiteColor } from '@/styles/colors';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
 // Styles
-var StyledCardCheckBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  z-index: 1;\n\n  .cardCheckboxLabel {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    .cardCheckboxInput {\n      margin: 0;\n      visibility: hidden;\n\n      &:checked + span {\n        border: none;\n      }\n\n      &:checked + span:after {\n        opacity: 1;\n      }\n    }\n\n    .cardCustomCheckbox {\n      cursor: pointer;\n      width: 32px;\n      height: 32px;\n      border: 2px solid ", ";\n      background-color: #12183a33;\n      border-radius: 50%;\n      display: inline-block;\n      position: relative;\n\n      &::after {\n        content: '';\n        display: block;\n        background-image: url('/forms/checkbox/checked.svg');\n        background-size: cover;\n        background-repeat: no-repeat;\n        width: 32px;\n        height: 32px;\n        opacity: 0;\n        transition: opacity 0.2s;\n      }\n\n      @media (max-width: 767px) {\n        width: 24px;\n        height: 24px;\n\n        &::after {\n          width: 24px;\n          height: 24px;\n        }\n      }\n    }\n  }\n\n  ", " {\n    top: ", ";\n    right: ", ";\n    .cardCheckboxLabel {\n      .cardCustomCheckbox {\n        width: ", ";\n        height: ", ";\n        border-width: ", ";\n        &::after {\n          width: ", ";\n          height: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  z-index: 1;\n\n  .cardCheckboxLabel {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    .cardCheckboxInput {\n      margin: 0;\n      visibility: hidden;\n\n      &:checked + span {\n        border: none;\n      }\n\n      &:checked + span:after {\n        opacity: 1;\n      }\n    }\n\n    .cardCustomCheckbox {\n      cursor: pointer;\n      width: 32px;\n      height: 32px;\n      border: 2px solid ", ";\n      background-color: #12183a33;\n      border-radius: 50%;\n      display: inline-block;\n      position: relative;\n\n      &::after {\n        content: '';\n        display: block;\n        background-image: url('/forms/checkbox/checked.svg');\n        background-size: cover;\n        background-repeat: no-repeat;\n        width: 32px;\n        height: 32px;\n        opacity: 0;\n        transition: opacity 0.2s;\n      }\n\n      @media (max-width: 767px) {\n        width: 24px;\n        height: 24px;\n\n        &::after {\n          width: 24px;\n          height: 24px;\n        }\n      }\n    }\n  }\n\n  ", " {\n    top: ", ";\n    right: ", ";\n    .cardCheckboxLabel {\n      .cardCustomCheckbox {\n        width: ", ";\n        height: ", ";\n        border-width: ", ";\n        &::after {\n          width: ", ";\n          height: ", ";\n        }\n      }\n    }\n  }\n"])), WhiteColor, mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(16), adaptiveValueCalc(32), adaptiveValueCalc(32), adaptiveValueCalc(2), adaptiveValueCalc(32), adaptiveValueCalc(32));
+var StyledCardCheckBox = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  z-index: 1;\n\n  .cardCheckboxLabel {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    .cardCheckboxInput {\n      margin: 0;\n      visibility: hidden;\n\n      &:checked + span {\n        border: none;\n      }\n\n      &:checked + span:after {\n        opacity: 1;\n      }\n    }\n\n    .cardCustomCheckbox {\n      cursor: pointer;\n      width: 32px;\n      height: 32px;\n      border: 2px solid ',
+        ";\n      background-color: #12183a33;\n      border-radius: 50%;\n      display: inline-block;\n      position: relative;\n\n      &::after {\n        content: '';\n        display: block;\n        background-image: url('/forms/checkbox/checked.svg');\n        background-size: cover;\n        background-repeat: no-repeat;\n        width: 32px;\n        height: 32px;\n        opacity: 0;\n        transition: opacity 0.2s;\n      }\n\n      @media (max-width: 767px) {\n        width: 24px;\n        height: 24px;\n\n        &::after {\n          width: 24px;\n          height: 24px;\n        }\n      }\n    }\n  }\n\n  ",
+        ' {\n    top: ',
+        ';\n    right: ',
+        ';\n    .cardCheckboxLabel {\n      .cardCustomCheckbox {\n        width: ',
+        ';\n        height: ',
+        ';\n        border-width: ',
+        ';\n        &::after {\n          width: ',
+        ';\n          height: ',
+        ';\n        }\n      }\n    }\n  }\n',
+      ],
+      [
+        '\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  z-index: 1;\n\n  .cardCheckboxLabel {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    .cardCheckboxInput {\n      margin: 0;\n      visibility: hidden;\n\n      &:checked + span {\n        border: none;\n      }\n\n      &:checked + span:after {\n        opacity: 1;\n      }\n    }\n\n    .cardCustomCheckbox {\n      cursor: pointer;\n      width: 32px;\n      height: 32px;\n      border: 2px solid ',
+        ";\n      background-color: #12183a33;\n      border-radius: 50%;\n      display: inline-block;\n      position: relative;\n\n      &::after {\n        content: '';\n        display: block;\n        background-image: url('/forms/checkbox/checked.svg');\n        background-size: cover;\n        background-repeat: no-repeat;\n        width: 32px;\n        height: 32px;\n        opacity: 0;\n        transition: opacity 0.2s;\n      }\n\n      @media (max-width: 767px) {\n        width: 24px;\n        height: 24px;\n\n        &::after {\n          width: 24px;\n          height: 24px;\n        }\n      }\n    }\n  }\n\n  ",
+        ' {\n    top: ',
+        ';\n    right: ',
+        ';\n    .cardCheckboxLabel {\n      .cardCustomCheckbox {\n        width: ',
+        ';\n        height: ',
+        ';\n        border-width: ',
+        ';\n        &::after {\n          width: ',
+        ';\n          height: ',
+        ';\n        }\n      }\n    }\n  }\n',
+      ]
+    )),
+  WhiteColor,
+  mediaQuery.minWidthFourK,
+  adaptiveValueCalc(16),
+  adaptiveValueCalc(16),
+  adaptiveValueCalc(32),
+  adaptiveValueCalc(32),
+  adaptiveValueCalc(2),
+  adaptiveValueCalc(32),
+  adaptiveValueCalc(32)
+);
 // Component
 var CardCheckBox = function (_a) {
-    var isActiveCheckbox = _a.isActiveCheckbox, onChange = _a.onChange;
-    var id = useId();
-    return (<StyledCardCheckBox>
+  var isActiveCheckbox = _a.isActiveCheckbox,
+    onChange = _a.onChange;
+  var id = useId();
+  return (
+    <StyledCardCheckBox>
       <label htmlFor={id} className="cardCheckboxLabel">
-        <input className="cardCheckboxInput" type="checkbox" name={'checkbox'} id={id} onChange={onChange} checked={isActiveCheckbox}/>
-        <span className="cardCustomCheckbox"/>
+        <input
+          className="cardCheckboxInput"
+          type="checkbox"
+          name={'checkbox'}
+          id={id}
+          onChange={onChange}
+          checked={isActiveCheckbox}
+        />
+        <span className="cardCustomCheckbox" />
       </label>
-    </StyledCardCheckBox>);
+    </StyledCardCheckBox>
+  );
 };
 // Export
 export default CardCheckBox;