@typeolymp/ui-components 1.16.0 → 1.16.2

package/build/components/atoms/Subheading/index.d.ts

@@ -3,6 +3,7 @@ declare type PropsType = {
     size?: "small" | "medium" | "large";
     align?: "left" | "center" | "right";
     color?: "black" | "white" | "gray";
+    as?: "div";
     children: ReactNode;
 };
 declare const Subheading: FC<PropsType>;

package/build/components/molecules/Collapse/index.d.ts

@@ -2,7 +2,7 @@ import { FC } from "react";
 export declare type PropsType = {
     items: Array<{
         title: string;
-        content: string;
+        content: string | JSX.Element;
     }>;
 };
 declare const Collapse: FC<PropsType>;

package/build/components/organisms/Form/index.d.ts

@@ -54,7 +54,7 @@ declare type RangeFieldType = {
 export declare type FormFieldType = InputFieldType | PasswordInputFieldType | DateInputFieldType | TextareaFieldType | RadioGroupFieldType | NumberFieldType | CheckboxesFieldType | SelectFieldType | ToggleFieldType | RangeFieldType;
 export declare type PropsType = {
     title?: string;
-    description?: string;
+    description?: string | JSX.Element;
     fields: FormFieldType[];
     button?: ButtonPropsType;
     onChangeFields?(newValues: {

package/build/index.es.js

@@ -2,9 +2,6 @@ import { jsx as jsx$1, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as React$3 from 'react';
 import React__default, { useLayoutEffect, useContext, forwardRef, createElement, createContext, Fragment, useRef, useState, useEffect, useImperativeHandle } from 'react';
 import styled, { keyframes as keyframes$1 } from 'styled-components';
-import { getCountryCodeByLocale, getNativeLanguageByLocale } from '@typeolymp/utils/parsers';
-import { hasCapitalLetter, hasNumber, hasSpecialCharacter } from '@typeolymp/utils/expressions';
-import { Medal as Medal$1 } from '@typeolymp/utils/enums';
 
 var theme = {
     colors: {
@@ -3491,7 +3488,11 @@ var Button = forwardRef(function (_a, ref) {
     var buttonRef = useRef(null);
     var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
     var as = href || asAnchor ? "a" : "button";
-    var onClick = function () {
+    var onClick = function (e) {
+        if (props.onClickAsync || props.onClick) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
         if (props.onClickAsync) {
             setIsLoading(true);
             new Promise(function (resolve) {
@@ -3599,6 +3600,266 @@ var Wrapper$a = styled.div(templateObject_1$Q || (templateObject_1$Q = __makeTem
 });
 var templateObject_1$Q;
 
+var parsers = {};
+
+var getCountryByLocale$1 = {};
+
+var enums = {};
+
+var Color = {};
+
+(function (exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Color = void 0;
+(function (Color) {
+    Color["RED"] = "red";
+    Color["YELLOW"] = "yellow";
+    Color["BLUE"] = "blue";
+    Color["GREEN"] = "green";
+    Color["PURPLE"] = "purple";
+    Color["PINK"] = "pink";
+    Color["ORANGE"] = "orange";
+    Color["DARK_GRAY"] = "darkGray";
+    Color["LIGHT_GRAY"] = "lightGray";
+})(exports.Color || (exports.Color = {}));
+
+}(Color));
+
+var Country = {};
+
+(function (exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Country = void 0;
+(function (Country) {
+    Country["NL"] = "Nederland";
+    Country["BE"] = "Belgi\u00EB";
+})(exports.Country || (exports.Country = {}));
+
+}(Country));
+
+var CourseTranslation = {};
+
+(function (exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CourseTranslation = void 0;
+(function (CourseTranslation) {
+    CourseTranslation["NL_NL"] = "nl-NL";
+    //   EN_GB = "en-GB",
+})(exports.CourseTranslation || (exports.CourseTranslation = {}));
+
+}(CourseTranslation));
+
+var KeyboardLayout = {};
+
+(function (exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardLayout = void 0;
+(function (KeyboardLayout) {
+    KeyboardLayout["QWERTY_NL"] = "qwerty-nl";
+    // QWERTY_UK = "qwerty-uk",
+    // QWERTY_US = "qwerty-us",
+    // QWERTY_TR = "qwerty-tr",
+    KeyboardLayout["AZERTY_BE"] = "azerty-be";
+    // AZERTY_FR = "azerty-fr",
+    // QWERTZ_DE = "qwertz-de",
+})(exports.KeyboardLayout || (exports.KeyboardLayout = {}));
+
+}(KeyboardLayout));
+
+var Locale = {};
+
+(function (exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Locale = void 0;
+(function (Locale) {
+    Locale["NL_NL"] = "nl-NL";
+    Locale["NL_BE"] = "nl-BE";
+    // EN_GB = "en-GB",
+    // FR_FR = "fr-FR",
+    // FR_BE = "fr-BE",
+    // DE_DE = "de-DE",
+})(exports.Locale || (exports.Locale = {}));
+
+}(Locale));
+
+var Plan = {};
+
+(function (exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Plan = void 0;
+(function (Plan) {
+    Plan["HOBBY"] = "hobby";
+    Plan["PROFESSIONAL"] = "professional";
+})(exports.Plan || (exports.Plan = {}));
+
+}(Plan));
+
+var TextTopic = {};
+
+(function (exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextTopic = void 0;
+(function (TextTopic) {
+    TextTopic["SPORT"] = "sport";
+    TextTopic["MUSIC"] = "music";
+    TextTopic["TECHNIC"] = "technic";
+    TextTopic["MOVIES"] = "movies";
+    TextTopic["NATURE"] = "nature";
+    TextTopic["HISTORY"] = "history";
+    TextTopic["ART"] = "art";
+    TextTopic["FASHION"] = "fashion";
+    TextTopic["OTHER"] = "other";
+})(exports.TextTopic || (exports.TextTopic = {}));
+
+}(TextTopic));
+
+var Medal$1 = {};
+
+(function (exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Medal = void 0;
+(function (Medal) {
+    Medal["GOLD"] = "gold";
+    Medal["SILVER"] = "silver";
+    Medal["BRONZE"] = "bronze";
+})(exports.Medal || (exports.Medal = {}));
+
+}(Medal$1));
+
+(function (exports) {
+var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(Color, exports);
+__exportStar(Country, exports);
+__exportStar(CourseTranslation, exports);
+__exportStar(KeyboardLayout, exports);
+__exportStar(Locale, exports);
+__exportStar(Plan, exports);
+__exportStar(TextTopic, exports);
+__exportStar(Medal$1, exports);
+
+}(enums));
+
+Object.defineProperty(getCountryByLocale$1, "__esModule", { value: true });
+getCountryByLocale$1.getCountryByLocale = void 0;
+var enums_1$2 = enums;
+var getCountryByLocale = function (locale) {
+    var countries = {
+        "nl-NL": enums_1$2.Country.NL,
+        "nl-BE": enums_1$2.Country.BE,
+    };
+    return countries[locale];
+};
+getCountryByLocale$1.getCountryByLocale = getCountryByLocale;
+
+var getCourseTranslationByLocale$1 = {};
+
+Object.defineProperty(getCourseTranslationByLocale$1, "__esModule", { value: true });
+getCourseTranslationByLocale$1.getCourseTranslationByLocale = void 0;
+var enums_1$1 = enums;
+var getCourseTranslationByLocale = function (locale) {
+    var courseTranslations = {
+        "nl-NL": enums_1$1.CourseTranslation.NL_NL,
+        "nl-BE": enums_1$1.CourseTranslation.NL_NL,
+        // "en-GB": KeyboardLayout.QWERTY_UK,
+        // "en-US": KeyboardLayout.QWERTY_US,
+        // "fr-BE": KeyboardLayout.AZERTY_FR,
+        // "fr-FR": KeyboardLayout.AZERTY_FR,
+        // "de-DE": KeyboardLayout.QWERTZ_DE,
+    };
+    return courseTranslations[locale];
+};
+getCourseTranslationByLocale$1.getCourseTranslationByLocale = getCourseTranslationByLocale;
+
+var getKeyboardLayoutByLocale$1 = {};
+
+Object.defineProperty(getKeyboardLayoutByLocale$1, "__esModule", { value: true });
+getKeyboardLayoutByLocale$1.getKeyboardLayoutByLocale = void 0;
+var enums_1 = enums;
+var getKeyboardLayoutByLocale = function (locale) {
+    var keyboardLayouts = {
+        "nl-NL": enums_1.KeyboardLayout.QWERTY_NL,
+        "nl-BE": enums_1.KeyboardLayout.AZERTY_BE,
+        // "en-GB": KeyboardLayout.QWERTY_UK,
+        // "en-US": KeyboardLayout.QWERTY_US,
+        // "fr-BE": KeyboardLayout.AZERTY_FR,
+        // "fr-FR": KeyboardLayout.AZERTY_FR,
+        // "de-DE": KeyboardLayout.QWERTZ_DE,
+    };
+    return keyboardLayouts[locale];
+};
+getKeyboardLayoutByLocale$1.getKeyboardLayoutByLocale = getKeyboardLayoutByLocale;
+
+var getLanguageCodeByLocale$1 = {};
+
+Object.defineProperty(getLanguageCodeByLocale$1, "__esModule", { value: true });
+getLanguageCodeByLocale$1.getLanguageCodeByLocale = void 0;
+var getLanguageCodeByLocale = function (locale) { return locale.split("-")[0]; };
+getLanguageCodeByLocale$1.getLanguageCodeByLocale = getLanguageCodeByLocale;
+
+var getCountryCodeByLocale$1 = {};
+
+Object.defineProperty(getCountryCodeByLocale$1, "__esModule", { value: true });
+getCountryCodeByLocale$1.getCountryCodeByLocale = void 0;
+var getCountryCodeByLocale = function (locale) { return locale.split("-")[1]; };
+getCountryCodeByLocale$1.getCountryCodeByLocale = getCountryCodeByLocale;
+
+var getNativeLanguageByLocale$1 = {};
+
+Object.defineProperty(getNativeLanguageByLocale$1, "__esModule", { value: true });
+getNativeLanguageByLocale$1.getNativeLanguageByLocale = void 0;
+var getNativeLanguageByLocale = function (locale) {
+    var nativeLanguages = {
+        "nl-NL": "Nederlands",
+        "nl-BE": "Nederlands (BE)",
+        // "en-GB": "English (UK)",
+        // "en-US": "English (US)",
+        // "fr-BE": "Français (BE)",
+        // "fr-FR": "Français",
+        // "de-DE": "Deutsch",
+    };
+    return nativeLanguages[locale];
+};
+getNativeLanguageByLocale$1.getNativeLanguageByLocale = getNativeLanguageByLocale;
+
+(function (exports) {
+var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(getCountryByLocale$1, exports);
+__exportStar(getCourseTranslationByLocale$1, exports);
+__exportStar(getKeyboardLayoutByLocale$1, exports);
+__exportStar(getLanguageCodeByLocale$1, exports);
+__exportStar(getCountryCodeByLocale$1, exports);
+__exportStar(getNativeLanguageByLocale$1, exports);
+
+}(parsers));
+
 var flags = {
     NL: (jsxs("svg", __assign$2({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx$1("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#e62743" }), jsx$1("path", { fill: "#fff", d: "M0 6H22V12H0z" }), jsx$1("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#148cc6" })] }))),
     BE: (jsxs("svg", __assign$2({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx$1("path", { d: "M15 0h6c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1h-6V0z", fill: "#e62743" }), jsx$1("path", { fill: "#ffd800", d: "M7 0H15V18H7z" }), jsx$1("path", { d: "M0 1c0-.6.4-1 1-1h6v18H1c-.6 0-1-.4-1-1V1z", fill: "#23292f" })] }))),
@@ -3606,7 +3867,7 @@ var flags = {
     FR: (jsxs("svg", __assign$2({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx$1("path", { d: "M15 0h6c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1h-6V0z", fill: "#148cc6" }), jsx$1("path", { fill: "#fff", d: "M7 0H15V18H7z" }), jsx$1("path", { d: "M0 1c0-.6.4-1 1-1h6v18H1c-.6 0-1-.4-1-1V1z", fill: "#e62743" })] }))),
     DE: (jsxs("svg", __assign$2({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx$1("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#000" }), jsx$1("path", { fill: "#e62743", d: "M0 6H22V12H0z" }), jsx$1("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#ffd800" })] }))),
 };
-var Flag = function (props) { return (jsx$1(Wrapper$a, __assign$2({}, props, { children: flags[getCountryCodeByLocale(props.locale)] }))); };
+var Flag = function (props) { return (jsx$1(Wrapper$a, __assign$2({}, props, { children: flags[parsers.getCountryCodeByLocale(props.locale)] }))); };
 
 var StyledHeading = styled.span(templateObject_1$P || (templateObject_1$P = __makeTemplateObject$1(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  font-style: normal;\n  line-height: ", ";\n  letter-spacing: ", ";\n  margin: 0;\n  color: ", ";\n  text-align: ", ";\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  font-style: normal;\n  line-height: ", ";\n  letter-spacing: ", ";\n  margin: 0;\n  color: ", ";\n  text-align: ", ";\n"])), theme.fonts.heading, function (_a) {
     var type = _a.type;
@@ -3830,6 +4091,99 @@ var Helper = styled(StyledParagraph)(templateObject_6$3 || (templateObject_6$3 =
 }, fadeIn);
 var templateObject_1$L, templateObject_2$x, templateObject_3$b, templateObject_4$7, templateObject_5$3, templateObject_6$3;
 
+var expressions = {};
+
+var hasCapitalLetter$1 = {};
+
+Object.defineProperty(hasCapitalLetter$1, "__esModule", { value: true });
+hasCapitalLetter$1.hasCapitalLetter = void 0;
+var hasCapitalLetter = function (input) {
+    var regex = new RegExp(/[A-Z]/g);
+    return regex.test(input);
+};
+hasCapitalLetter$1.hasCapitalLetter = hasCapitalLetter;
+
+var hasNumber$1 = {};
+
+Object.defineProperty(hasNumber$1, "__esModule", { value: true });
+hasNumber$1.hasNumber = void 0;
+var hasNumber = function (input) {
+    var regex = new RegExp(/\d/g);
+    return regex.test(input);
+};
+hasNumber$1.hasNumber = hasNumber;
+
+var hasSpecialCharacter$1 = {};
+
+Object.defineProperty(hasSpecialCharacter$1, "__esModule", { value: true });
+hasSpecialCharacter$1.hasSpecialCharacter = void 0;
+var hasSpecialCharacter = function (input) {
+    var regex = new RegExp(/`|~|!|"|-|_|@|#|\$|%|\^|&|\*|\(|\)|\+|=|\[|\{|\]|\}|\||\\|'|<|,|\.|>|\?|\/|""|;|:|\s/g);
+    return regex.test(input);
+};
+hasSpecialCharacter$1.hasSpecialCharacter = hasSpecialCharacter;
+
+var isValidEmail$1 = {};
+
+Object.defineProperty(isValidEmail$1, "__esModule", { value: true });
+isValidEmail$1.isValidEmail = void 0;
+var isValidEmail = function (email) {
+    var regex = new RegExp(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+    return regex.test(email);
+};
+isValidEmail$1.isValidEmail = isValidEmail;
+
+var isValidUsername$1 = {};
+
+Object.defineProperty(isValidUsername$1, "__esModule", { value: true });
+isValidUsername$1.isValidUsername = void 0;
+var isValidEmail_1 = isValidEmail$1;
+var isValidUsername = function (username) {
+    return username.length >= 5 &&
+        username.length <= 15 &&
+        username.indexOf(" ") < 0 &&
+        !(0, isValidEmail_1.isValidEmail)(username);
+};
+isValidUsername$1.isValidUsername = isValidUsername;
+
+var isStrongPassword$1 = {};
+
+Object.defineProperty(isStrongPassword$1, "__esModule", { value: true });
+isStrongPassword$1.isStrongPassword = void 0;
+var _1 = expressions;
+var isStrongPassword = function (password) {
+    return password.length >= 8 &&
+        (0, _1.hasNumber)(password) &&
+        (0, _1.hasSpecialCharacter)(password) &&
+        (0, _1.hasCapitalLetter)(password);
+};
+isStrongPassword$1.isStrongPassword = isStrongPassword;
+
+(function (exports) {
+var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(hasCapitalLetter$1, exports);
+__exportStar(hasNumber$1, exports);
+__exportStar(hasSpecialCharacter$1, exports);
+__exportStar(isValidEmail$1, exports);
+__exportStar(isValidUsername$1, exports);
+__exportStar(isStrongPassword$1, exports);
+
+}(expressions));
+
 var password_helper_capital_letter = "Minimaal 1 hoofdletter";
 var password_helper_number = "Minimaal 1 getal";
 var password_helper_special_character = "Minimaal 1 leesteken";
@@ -3866,7 +4220,7 @@ var PasswordInput = function (props) {
         if (props.onKeyPress)
             props.onKeyPress(e);
     };
-    return (jsxs(Container$m, { children: [jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsx$1(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign$2({ isOk: hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale].password_helper_capital_letter] })), jsxs(Helper, __assign$2({ isOk: hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale].password_helper_number] })), jsxs(Helper, __assign$2({ isOk: hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale].password_helper_special_character] })), jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale].password_helper_password_length] }))] })) : null] }));
+    return (jsxs(Container$m, { children: [jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsx$1(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale].password_helper_capital_letter] })), jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale].password_helper_number] })), jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale].password_helper_special_character] })), jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale].password_helper_password_length] }))] })) : null] }));
 };
 
 function requiredArgs(required, args) {
@@ -10884,7 +11238,7 @@ var Checkboxes = function (props) {
 };
 
 var Container$i = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\n  width: 100%;\n  background-color: ", ";\n  box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n  border-radius: 6px;\n  padding: 10px 20px;\n"], ["\n  width: 100%;\n  background-color: ", ";\n  box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n  border-radius: 6px;\n  padding: 10px 20px;\n"])), theme.colors.lightGray.light);
-var Item = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n  padding: 10px 0;\n  cursor: pointer;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 5px;\n  }\n\n  p {\n    display: ", ";\n  }\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  padding: 10px 0;\n  cursor: pointer;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 5px;\n  }\n\n  p {\n    display: ", ";\n  }\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"])), function (_a) {
+var Item = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n  padding: 10px 0;\n  cursor: pointer;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 5px;\n  }\n\n  p, > div:last-child {\n    display: ", ";\n    margin: 0;\n  }\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  padding: 10px 0;\n  cursor: pointer;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 5px;\n  }\n\n  p, > div:last-child {\n    display: ", ";\n    margin: 0;\n  }\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"])), function (_a) {
     var isOpen = _a.isOpen;
     return (isOpen ? "" : "none");
 }, theme.colors.lightGray.dark);
@@ -10902,7 +11256,7 @@ var Collapse = function (props) {
     };
     return (jsx$1(Container$i, __assign$2({}, props, { children: props.items.map(function (item, index) {
             var isOpen = openItems.includes(index);
-            return (jsxs(Item, __assign$2({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: item.title })), jsx$1(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsx$1(Paragraph, __assign$2({ weight: "regular" }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
+            return (jsxs(Item, __assign$2({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: item.title })), jsx$1(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsx$1(Paragraph, __assign$2({ weight: "regular", as: typeof item.content !== "string" ? "div" : undefined }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
         }) })));
 };
 
@@ -11130,15 +11484,15 @@ var LocaleSelect = function (props) {
         setLocale(locale);
         props.onChange(locale);
     };
-    return (jsxs(Container$d, __assign$2({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxs(SelectedLocaleWrapper, { children: [jsxs("div", { children: [jsx$1(Flag, { locale: locale }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Heading, __assign$2({ type: "h6" }, { children: getNativeLanguageByLocale(locale) }))] }), dropdownIsVisible ? (jsx$1(Icon, { type: "chevronUp", size: "small", color: "darkGray" })) : (jsx$1(Icon, { type: "chevronDown", size: "small", color: "darkGray" }))] }), dropdownIsVisible && (jsx$1(DropdownContainer, __assign$2({ color: props.color || "light" }, { children: props.locales
+    return (jsxs(Container$d, __assign$2({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxs(SelectedLocaleWrapper, { children: [jsxs("div", { children: [jsx$1(Flag, { locale: locale }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Heading, __assign$2({ type: "h6" }, { children: parsers.getNativeLanguageByLocale(locale) }))] }), dropdownIsVisible ? (jsx$1(Icon, { type: "chevronUp", size: "small", color: "darkGray" })) : (jsx$1(Icon, { type: "chevronDown", size: "small", color: "darkGray" }))] }), dropdownIsVisible && (jsx$1(DropdownContainer, __assign$2({ color: props.color || "light" }, { children: props.locales
                     .filter(function (l) { return l !== locale; })
-                    .map(function (locale) { return (jsxs(LocaleWrapper, __assign$2({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx$1(Flag, { locale: locale }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale(locale) }))] }), jsx$1(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
+                    .map(function (locale) { return (jsxs(LocaleWrapper, __assign$2({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx$1(Flag, { locale: locale }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: parsers.getNativeLanguageByLocale(locale) }))] }), jsx$1(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
 };
 
 var Wrapper$1 = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 200px;\n  display: flex;\n  justify-content: space-between;\n\n  > div {\n    display: flex;\n    align-items: center;\n  }\n"], ["\n  width: 100%;\n  min-width: 200px;\n  display: flex;\n  justify-content: space-between;\n\n  > div {\n    display: flex;\n    align-items: center;\n  }\n"])));
 var templateObject_1$o;
 
-var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.GOLD }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.SILVER }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.BRONZE }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
+var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx$1(Medal, { type: enums.Medal.GOLD }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: enums.Medal.SILVER }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: enums.Medal.BRONZE }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
 
 var NotificationContainer = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject$1(["\n  width: fit-content;\n  max-width: 460px;\n  padding: 15px;\n  border-radius: 6px;\n  background-color: ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 15px;\n  }\n"], ["\n  width: fit-content;\n  max-width: 460px;\n  padding: 15px;\n  border-radius: 6px;\n  background-color: ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 15px;\n  }\n"])), function (_a) {
     var contrast = _a.contrast;
@@ -11752,7 +12106,7 @@ var Form = forwardRef(function (props, ref) {
             props.onError(feedback);
         }
     };
-    return (jsxs(Fragment$1, { children: [props.title && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h4" }, { children: props.title })), jsx$1(Spacer, { vertical: 15 })] })), props.description && (jsx$1(DescriptionWrapper, { children: jsx$1(Paragraph, __assign$2({ color: "darkGray", weight: "regular" }, { children: htmlReactParser(props.description) })) })), jsx$1(FormWrapper, { children: props.fields.map(function (field, index) {
+    return (jsxs(Fragment$1, { children: [props.title && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h4" }, { children: props.title })), jsx$1(Spacer, { vertical: 15 })] })), props.description && (jsx$1(DescriptionWrapper, { children: typeof props.description === "string" ? (jsx$1(Paragraph, __assign$2({ color: "darkGray", weight: "regular" }, { children: htmlReactParser(props.description) }))) : (props.description) })), jsx$1(FormWrapper, { children: props.fields.map(function (field, index) {
                     switch (field.type) {
                         case "text":
                             return (createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),