math-main-components 0.0.193 → 0.0.195

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -9369,33 +9369,33 @@ function styleInject(css, ref) {
9369
9369
  }
9370
9370
  }
9371
9371
 
9372
- var css_248z$v = ".styles-module_container__3IVfB {\n margin-bottom: 20px;\n background: var(--background-1);\n border-radius: 30px;\n transition: 0.2s ease-in-out;\n color: var(--foreground-1);\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 16px 20px;\n color: var(--foreground-3);\n background: var(--background-2);\n border-radius: 30px;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n transition: 0.2s ease-in-out;\n gap: 10px;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb span {\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb h3 {\n margin: 0;\n font-weight: 400;\n font-size: 16px;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb:hover {\n filter: brightness(0.95);\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R {\n box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_head__xFYQb span {\n rotate: 180deg;\n}\n.styles-module_container__3IVfB .styles-module_content__XAf02 {\n transition: all 0.3s ease-in-out;\n line-height: 1.5;\n}\n.styles-module_container__3IVfB.styles-module_not_active__JcVLz .styles-module_content__XAf02 {\n height: 0;\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_content__XAf02 {\n max-height: auto;\n overflow: visible;\n opacity: 1;\n padding: 10px 0px;\n}";
9373
- var styles$v = {"container":"styles-module_container__3IVfB","head":"styles-module_head__xFYQb","active":"styles-module_active__soD8R","content":"styles-module_content__XAf02","not_active":"styles-module_not_active__JcVLz"};
9374
- styleInject(css_248z$v);
9372
+ var css_248z$w = ".styles-module_container__3IVfB {\n margin-bottom: 20px;\n background: var(--background-1);\n border-radius: 30px;\n transition: 0.2s ease-in-out;\n color: var(--foreground-1);\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 16px 20px;\n color: var(--foreground-3);\n background: var(--background-2);\n border-radius: 30px;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n transition: 0.2s ease-in-out;\n gap: 10px;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb span {\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb h3 {\n margin: 0;\n font-weight: 400;\n font-size: 16px;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb:hover {\n filter: brightness(0.95);\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R {\n box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_head__xFYQb span {\n rotate: 180deg;\n}\n.styles-module_container__3IVfB .styles-module_content__XAf02 {\n transition: all 0.3s ease-in-out;\n line-height: 1.5;\n}\n.styles-module_container__3IVfB.styles-module_not_active__JcVLz .styles-module_content__XAf02 {\n height: 0;\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_content__XAf02 {\n max-height: auto;\n overflow: visible;\n opacity: 1;\n padding: 10px 0px;\n}";
9373
+ var styles$w = {"container":"styles-module_container__3IVfB","head":"styles-module_head__xFYQb","active":"styles-module_active__soD8R","content":"styles-module_content__XAf02","not_active":"styles-module_not_active__JcVLz"};
9374
+ styleInject(css_248z$w);
9375
9375
 
9376
9376
  function Accordeon({ title, children }) {
9377
9377
  const [isActive, setActive] = useState(false);
9378
- return (React__default.createElement("div", { className: [styles$v.container, isActive ? styles$v.active : styles$v.not_active].join(" ") },
9379
- React__default.createElement("div", { className: styles$v.head, onClick: () => setActive(!isActive) },
9378
+ return (React__default.createElement("div", { className: [styles$w.container, isActive ? styles$w.active : styles$w.not_active].join(" ") },
9379
+ React__default.createElement("div", { className: styles$w.head, onClick: () => setActive(!isActive) },
9380
9380
  React__default.createElement(SvgIcon, { iconName: "expand_more" }),
9381
9381
  React__default.createElement("h3", null, title)),
9382
- React__default.createElement("div", { className: styles$v.content }, children)));
9382
+ React__default.createElement("div", { className: styles$w.content }, children)));
9383
9383
  }
9384
9384
 
9385
- var css_248z$u = ".styles-module_container__4978M {\n max-width: 100%;\n width: 350px;\n transition: all 0.2s ease-in-out;\n box-sizing: border-box;\n}\n.styles-module_container__4978M.styles-module_visible__uvQwq {\n max-height: 100px;\n opacity: 1;\n}\n.styles-module_container__4978M.styles-module_hidden__Oruyx {\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n}\n\n.styles-module_container__4978M.styles-module_rotate__mmYPQ .styles-module_button__BWOOi:hover span {\n rotate: -45deg;\n}\n\n.styles-module_button__BWOOi {\n padding: 12px 20px;\n background: linear-gradient(60deg, #0075FF, #0056b8);\n background-position-x: right;\n color: white;\n display: flex;\n flex-direction: row;\n width: 100%;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border: none;\n cursor: pointer;\n font-size: 16px;\n font-weight: 400;\n gap: 10px;\n position: relative;\n transition: all 0.5s ease-in-out;\n}\n.styles-module_button__BWOOi span {\n transition: 0.1s ease-in-out;\n}\n.styles-module_button__BWOOi:hover {\n background-position-x: left;\n}\n.styles-module_button__BWOOi.styles-module_secondary__Eoik3 {\n background: var(--background-2);\n color: var(--primary-1);\n border: 1px solid var(--primary-1);\n}\n.styles-module_button__BWOOi.styles-module_secondary__Eoik3 svg {\n fill: var(--primary-1);\n}\n\n@media (max-width: 450px) {\n .styles-module_button__BWOOi {\n font-size: 14px;\n }\n}";
9386
- var styles$u = {"container":"styles-module_container__4978M","visible":"styles-module_visible__uvQwq","hidden":"styles-module_hidden__Oruyx","rotate":"styles-module_rotate__mmYPQ","button":"styles-module_button__BWOOi","secondary":"styles-module_secondary__Eoik3"};
9387
- styleInject(css_248z$u);
9385
+ var css_248z$v = ".styles-module_container__4978M {\n max-width: 100%;\n width: 350px;\n transition: all 0.2s ease-in-out;\n box-sizing: border-box;\n}\n.styles-module_container__4978M.styles-module_visible__uvQwq {\n max-height: 100px;\n opacity: 1;\n}\n.styles-module_container__4978M.styles-module_hidden__Oruyx {\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n}\n\n.styles-module_container__4978M.styles-module_rotate__mmYPQ .styles-module_button__BWOOi:hover span {\n rotate: -45deg;\n}\n\n.styles-module_button__BWOOi {\n padding: 12px 20px;\n background: linear-gradient(60deg, #0075FF, #0056b8);\n background-position-x: right;\n color: white;\n display: flex;\n flex-direction: row;\n width: 100%;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border: none;\n cursor: pointer;\n font-size: 16px;\n font-weight: 400;\n gap: 10px;\n position: relative;\n transition: all 0.5s ease-in-out;\n}\n.styles-module_button__BWOOi span {\n transition: 0.1s ease-in-out;\n}\n.styles-module_button__BWOOi:hover {\n background-position-x: left;\n}\n.styles-module_button__BWOOi.styles-module_secondary__Eoik3 {\n background: var(--background-2);\n color: var(--primary-1);\n border: 1px solid var(--primary-1);\n}\n.styles-module_button__BWOOi.styles-module_secondary__Eoik3 svg {\n fill: var(--primary-1);\n}\n\n@media (max-width: 450px) {\n .styles-module_button__BWOOi {\n font-size: 14px;\n }\n}";
9386
+ var styles$v = {"container":"styles-module_container__4978M","visible":"styles-module_visible__uvQwq","hidden":"styles-module_hidden__Oruyx","rotate":"styles-module_rotate__mmYPQ","button":"styles-module_button__BWOOi","secondary":"styles-module_secondary__Eoik3"};
9387
+ styleInject(css_248z$v);
9388
9388
 
9389
9389
  function AuthButton({ id, text, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, style, onClick }) {
9390
- return (React__default.createElement("div", { className: [styles$u.container, isVisible ? styles$u.visible : styles$u.hidden, ["arrow_forward"].includes(iconName) ? styles$u.rotate : null].join(" "), style: style },
9391
- React__default.createElement("button", { type: type, className: `${styles$u.button} ${styles$u[theme]}`, onClick: onClick, id: id },
9390
+ return (React__default.createElement("div", { className: [styles$v.container, isVisible ? styles$v.visible : styles$v.hidden, ["arrow_forward"].includes(iconName) ? styles$v.rotate : null].join(" "), style: style },
9391
+ React__default.createElement("button", { type: type, className: `${styles$v.button} ${styles$v[theme]}`, onClick: onClick, id: id },
9392
9392
  text,
9393
9393
  React__default.createElement(SvgIcon, { iconName: iconName }))));
9394
9394
  }
9395
9395
 
9396
- var css_248z$t = ".styles-module_container__TP0rp {\n max-width: 100%;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr {\n padding: 10px 18px;\n border-radius: 40px;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n font-size: 15px;\n font-weight: 400;\n align-items: center;\n border: none;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n background: var(--primary-1);\n color: white;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_lightBlue__7EKfp {\n background: var(--primary-2);\n color: var(--primary-1);\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_red__EhImH {\n background: var(--red-1);\n color: white;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_grey__kAVD1 {\n background: var(--background-1);\n color: var(--foreground-2);\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI {\n width: 44px;\n height: 44px;\n padding: 0;\n align-items: center;\n justify-content: center;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI span {\n font-size: 22px !important;\n}";
9397
- var styles$t = {"container":"styles-module_container__TP0rp","button":"styles-module_button__Sh-fr","blue":"styles-module_blue__DRdbo","lightBlue":"styles-module_lightBlue__7EKfp","red":"styles-module_red__EhImH","grey":"styles-module_grey__kAVD1","onlyIcon":"styles-module_onlyIcon__bNVnI"};
9398
- styleInject(css_248z$t);
9396
+ var css_248z$u = ".styles-module_container__TP0rp {\n max-width: 100%;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr {\n padding: 10px 18px;\n border-radius: 40px;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n font-size: 15px;\n font-weight: 400;\n align-items: center;\n border: none;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n background: var(--primary-1);\n color: white;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_lightBlue__7EKfp {\n background: var(--primary-2);\n color: var(--primary-1);\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_red__EhImH {\n background: var(--red-1);\n color: white;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_grey__kAVD1 {\n background: var(--background-1);\n color: var(--foreground-2);\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI {\n width: 44px;\n height: 44px;\n padding: 0;\n align-items: center;\n justify-content: center;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI span {\n font-size: 22px !important;\n}";
9397
+ var styles$u = {"container":"styles-module_container__TP0rp","button":"styles-module_button__Sh-fr","blue":"styles-module_blue__DRdbo","lightBlue":"styles-module_lightBlue__7EKfp","red":"styles-module_red__EhImH","grey":"styles-module_grey__kAVD1","onlyIcon":"styles-module_onlyIcon__bNVnI"};
9398
+ styleInject(css_248z$u);
9399
9399
 
9400
9400
  function Button({ id, text, iconName, iconFill = "white", type = "blue", onClick = () => { } }) {
9401
9401
  function onClickButton(event) {
@@ -9403,15 +9403,15 @@ function Button({ id, text, iconName, iconFill = "white", type = "blue", onClick
9403
9403
  if (onClick)
9404
9404
  onClick(event);
9405
9405
  }
9406
- return (React__default.createElement("div", { className: styles$t.container },
9407
- React__default.createElement("button", { className: [styles$t.button, styles$t[type], (text && !iconName) ? styles$t.onlyText : "", (!text && iconName) ? styles$t.onlyIcon : ""].join(" "), onClick: onClickButton, id: id },
9406
+ return (React__default.createElement("div", { className: styles$u.container },
9407
+ React__default.createElement("button", { className: [styles$u.button, styles$u[type], (text && !iconName) ? styles$u.onlyText : "", (!text && iconName) ? styles$u.onlyIcon : ""].join(" "), onClick: onClickButton, id: id },
9408
9408
  text,
9409
9409
  iconName && React__default.createElement(SvgIcon, { iconName: iconName }))));
9410
9410
  }
9411
9411
 
9412
- var css_248z$s = ".styles-module_card__bOd85 {\n background: var(--background-2);\n border: 1px solid var(--border-2);\n border-radius: 18px;\n transition: 0.2s ease;\n padding: 18px 14px;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n cursor: pointer;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding-top: 30px;\n}\n.styles-module_card__bOd85 span {\n color: var(--foreground-3);\n}\n.styles-module_card__bOd85:hover {\n transform: scale(1.01);\n box-shadow: none;\n background: none;\n}\n.styles-module_card__bOd85 h2 {\n margin-top: 0;\n color: var(--foreground-3);\n font-weight: 400;\n font-size: 18px;\n}";
9413
- var styles$s = {"card":"styles-module_card__bOd85"};
9414
- styleInject(css_248z$s);
9412
+ var css_248z$t = ".styles-module_card__bOd85 {\n background: var(--background-2);\n border: 1px solid var(--border-2);\n border-radius: 18px;\n transition: 0.2s ease;\n padding: 18px 14px;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n cursor: pointer;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding-top: 30px;\n}\n.styles-module_card__bOd85 span {\n color: var(--foreground-3);\n}\n.styles-module_card__bOd85:hover {\n transform: scale(1.01);\n box-shadow: none;\n background: none;\n}\n.styles-module_card__bOd85 h2 {\n margin-top: 0;\n color: var(--foreground-3);\n font-weight: 400;\n font-size: 18px;\n}";
9413
+ var styles$t = {"card":"styles-module_card__bOd85"};
9414
+ styleInject(css_248z$t);
9415
9415
 
9416
9416
  function CardButton({ id, title, iconName, onClick, }) {
9417
9417
  function onClickCard(event) {
@@ -9419,25 +9419,25 @@ function CardButton({ id, title, iconName, onClick, }) {
9419
9419
  if (onClick)
9420
9420
  onClick(event);
9421
9421
  }
9422
- return (React__default.createElement("div", { className: styles$s.card, onClick: onClickCard, id: id },
9422
+ return (React__default.createElement("div", { className: styles$t.card, onClick: onClickCard, id: id },
9423
9423
  React__default.createElement(SvgIcon, { iconName: iconName, size: "32px" }),
9424
9424
  React__default.createElement("h2", null, title)));
9425
9425
  }
9426
9426
 
9427
- var css_248z$r = ".styles-module_container__gCCnD {\n margin-bottom: 20px;\n width: 343px;\n color: var(--foreground-3);\n}\n.styles-module_container__gCCnD [type=checkbox] {\n position: relative;\n left: 15px;\n top: -4px;\n z-index: 0;\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n margin-left: -3.5px;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n position: absolute;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n width: 17px;\n height: 17px;\n border-radius: 5px;\n border: 2px solid var(--border-2);\n display: block;\n content: \"\";\n float: left;\n margin-right: 8px;\n z-index: 5;\n position: relative;\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n position: absolute;\n opacity: 1;\n color: var(--background-2);\n z-index: 100;\n user-select: none;\n pointer-events: none;\n -webkit-user-select: none;\n font-weight: 500;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n background-color: var(--primary-1);\n border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n background-color: var(--background-4);\n border-color: var(--background-2);\n}";
9428
- var styles$r = {"container":"styles-module_container__gCCnD"};
9429
- styleInject(css_248z$r);
9427
+ var css_248z$s = ".styles-module_container__gCCnD {\n margin-bottom: 20px;\n width: 343px;\n color: var(--foreground-3);\n}\n.styles-module_container__gCCnD [type=checkbox] {\n position: relative;\n left: 15px;\n top: -4px;\n z-index: 0;\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n margin-left: -3.5px;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n position: absolute;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n width: 17px;\n height: 17px;\n border-radius: 5px;\n border: 2px solid var(--border-2);\n display: block;\n content: \"\";\n float: left;\n margin-right: 8px;\n z-index: 5;\n position: relative;\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n position: absolute;\n opacity: 1;\n color: var(--background-2);\n z-index: 100;\n user-select: none;\n pointer-events: none;\n -webkit-user-select: none;\n font-weight: 500;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n background-color: var(--primary-1);\n border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n background-color: var(--background-4);\n border-color: var(--background-2);\n}";
9428
+ var styles$s = {"container":"styles-module_container__gCCnD"};
9429
+ styleInject(css_248z$s);
9430
9430
 
9431
9431
  function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children }) {
9432
- return (React__default.createElement("div", { className: styles$r.container },
9432
+ return (React__default.createElement("div", { className: styles$s.container },
9433
9433
  React__default.createElement("input", { type: "checkbox", onInput: onInput, name: name, checked: checked, defaultChecked: defaultChecked, id: id ?? name }),
9434
9434
  React__default.createElement("label", { htmlFor: id ?? name }, children),
9435
9435
  React__default.createElement(SvgIcon, { iconName: "done", size: "21px" })));
9436
9436
  }
9437
9437
 
9438
- var css_248z$q = ".styles-module_container__OqDNA {\n display: flex;\n flex-direction: row;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(1) {\n background: var(--background-1);\n border-color: var(--background-1);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(2) {\n background: var(--background-2);\n border-color: var(--background-2);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(3) {\n background: var(--background-4);\n border-color: var(--background-4);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:first-child {\n border-top-left-radius: 20px;\n border-bottom-left-radius: 20px;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:last-child {\n border-top-right-radius: 20px;\n border-bottom-right-radius: 20px;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI {\n border: 1px solid transparent;\n padding: 11px 18px;\n font-size: 14px;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI.styles-module_selected__AXIA- {\n background: var(--background-4);\n border-color: var(--primary-1);\n color: var(--primary-1);\n}";
9439
- var styles$q = {"container":"styles-module_container__OqDNA","item":"styles-module_item__1SMCI","selected":"styles-module_selected__AXIA-"};
9440
- styleInject(css_248z$q);
9438
+ var css_248z$r = ".styles-module_container__OqDNA {\n display: flex;\n flex-direction: row;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(1) {\n background: var(--background-1);\n border-color: var(--background-1);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(2) {\n background: var(--background-2);\n border-color: var(--background-2);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(3) {\n background: var(--background-4);\n border-color: var(--background-4);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:first-child {\n border-top-left-radius: 20px;\n border-bottom-left-radius: 20px;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:last-child {\n border-top-right-radius: 20px;\n border-bottom-right-radius: 20px;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI {\n border: 1px solid transparent;\n padding: 11px 18px;\n font-size: 14px;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI.styles-module_selected__AXIA- {\n background: var(--background-4);\n border-color: var(--primary-1);\n color: var(--primary-1);\n}";
9439
+ var styles$r = {"container":"styles-module_container__OqDNA","item":"styles-module_item__1SMCI","selected":"styles-module_selected__AXIA-"};
9440
+ styleInject(css_248z$r);
9441
9441
 
9442
9442
  class ChooseRoleItem {
9443
9443
  title;
@@ -9455,12 +9455,12 @@ function ChooseRole({ roles, defaultSelected, readOnly = false, onChange }) {
9455
9455
  setSelected(newRole);
9456
9456
  onChange(newRole);
9457
9457
  }
9458
- return (React__default.createElement("div", { className: styles$q.container }, roles.map((item, index) => React__default.createElement("div", { key: index, className: [styles$q.item, selected == item.value ? styles$q.selected : styles$q.not_selected].join(" "), onClick: () => onUpdate(item.value) }, item.title))));
9458
+ return (React__default.createElement("div", { className: styles$r.container }, roles.map((item, index) => React__default.createElement("div", { key: index, className: [styles$r.item, selected == item.value ? styles$r.selected : styles$r.not_selected].join(" "), onClick: () => onUpdate(item.value) }, item.title))));
9459
9459
  }
9460
9460
 
9461
- var css_248z$p = ".styles-module_container__yV6C8 {\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n cursor: pointer;\n padding: 8px 14px;\n border-radius: 30px;\n transition: 0.2s ease-in-out;\n margin-bottom: 20px;\n color: var(--foreground-1);\n}\n.styles-module_container__yV6C8:hover {\n color: var(--primary-1);\n}";
9462
- var styles$p = {"container":"styles-module_container__yV6C8"};
9463
- styleInject(css_248z$p);
9461
+ var css_248z$q = ".styles-module_container__yV6C8 {\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n cursor: pointer;\n padding: 8px 14px;\n border-radius: 30px;\n transition: 0.2s ease-in-out;\n margin-bottom: 20px;\n color: var(--foreground-1);\n}\n.styles-module_container__yV6C8:hover {\n color: var(--primary-1);\n}";
9462
+ var styles$q = {"container":"styles-module_container__yV6C8"};
9463
+ styleInject(css_248z$q);
9464
9464
 
9465
9465
  function CopyCode({ code, style, onCopy = () => { } }) {
9466
9466
  function onClick() {
@@ -9468,15 +9468,15 @@ function CopyCode({ code, style, onCopy = () => { } }) {
9468
9468
  if (onCopy)
9469
9469
  onCopy();
9470
9470
  }
9471
- return (React__default.createElement("div", { className: styles$p.container, onClick: onClick, style: style },
9471
+ return (React__default.createElement("div", { className: styles$q.container, onClick: onClick, style: style },
9472
9472
  React__default.createElement(SvgIcon, { iconName: "content_copy" }),
9473
9473
  React__default.createElement("span", null, code),
9474
9474
  React__default.createElement("input", { type: "hidden", name: "code", value: code })));
9475
9475
  }
9476
9476
 
9477
- var css_248z$o = ".styles-module_container__9-1MH {\n position: fixed;\n height: 100vh;\n width: 100vw;\n background: var(--background-2);\n backdrop-filter: blur(10px) brightness(70%);\n left: 0;\n top: 0;\n z-index: 10000;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo {\n opacity: 1;\n}\n.styles-module_container__9-1MH.styles-module_disabled__sELpy {\n pointer-events: none;\n opacity: 0;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M {\n background: var(--background-1);\n border-radius: 20px;\n padding: 35px;\n width: 450px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n max-width: 100%;\n box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n cursor: auto;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M h1 {\n font-size: 26px;\n font-weight: 500;\n line-height: 1.5;\n margin-top: 20px;\n margin-bottom: 20px;\n text-align: center;\n color: var(--foreground-1);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS {\n border-radius: 12px;\n color: var(--foreground-1);\n background: var(--background-2);\n padding: 14px 0px;\n border: none;\n outline: none;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n font-size: 16px;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS:hover {\n filter: brightness(0.95);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux {\n border-radius: 12px;\n color: var(--background-1);\n background: var(--primary-1);\n padding: 14px 0px;\n border: none;\n outline: none;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n font-size: 16px;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux:hover {\n background: var(--primary-1);\n}";
9478
- var styles$o = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","disabled":"styles-module_disabled__sELpy","dialog_window":"styles-module_dialog_window__0Bn2M","cancel_button":"styles-module_cancel_button__KhwLS","submit_button":"styles-module_submit_button__xLzux"};
9479
- styleInject(css_248z$o);
9477
+ var css_248z$p = ".styles-module_container__9-1MH {\n position: fixed;\n height: 100vh;\n width: 100vw;\n background: var(--background-2);\n backdrop-filter: blur(10px) brightness(70%);\n left: 0;\n top: 0;\n z-index: 10000;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo {\n opacity: 1;\n}\n.styles-module_container__9-1MH.styles-module_disabled__sELpy {\n pointer-events: none;\n opacity: 0;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M {\n background: var(--background-1);\n border-radius: 20px;\n padding: 35px;\n width: 450px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n max-width: 100%;\n box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n cursor: auto;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M h1 {\n font-size: 26px;\n font-weight: 500;\n line-height: 1.5;\n margin-top: 20px;\n margin-bottom: 20px;\n text-align: center;\n color: var(--foreground-1);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS {\n border-radius: 12px;\n color: var(--foreground-1);\n background: var(--background-2);\n padding: 14px 0px;\n border: none;\n outline: none;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n font-size: 16px;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS:hover {\n filter: brightness(0.95);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux {\n border-radius: 12px;\n color: var(--background-1);\n background: var(--primary-1);\n padding: 14px 0px;\n border: none;\n outline: none;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n font-size: 16px;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux:hover {\n background: var(--primary-1);\n}";
9478
+ var styles$p = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","disabled":"styles-module_disabled__sELpy","dialog_window":"styles-module_dialog_window__0Bn2M","cancel_button":"styles-module_cancel_button__KhwLS","submit_button":"styles-module_submit_button__xLzux"};
9479
+ styleInject(css_248z$p);
9480
9480
 
9481
9481
  function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }) {
9482
9482
  function onClick(event) {
@@ -9487,50 +9487,50 @@ function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }
9487
9487
  onClose(event, data);
9488
9488
  }
9489
9489
  }
9490
- return (React__default.createElement("div", { id: "dialog-backdrop", className: `${styles$o.container} ${enabled ? styles$o.active : styles$o.disabled}`, onClick: onClick },
9491
- React__default.createElement("div", { className: styles$o.dialog_window },
9490
+ return (React__default.createElement("div", { id: "dialog-backdrop", className: `${styles$p.container} ${enabled ? styles$p.active : styles$p.disabled}`, onClick: onClick },
9491
+ React__default.createElement("div", { className: styles$p.dialog_window },
9492
9492
  children,
9493
9493
  text && React__default.createElement("h1", null, text),
9494
- React__default.createElement("button", { className: styles$o.cancel_button, id: "cancel-button", onClick: onClick }, "Abbrechen"),
9495
- React__default.createElement("button", { className: styles$o.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
9494
+ React__default.createElement("button", { className: styles$p.cancel_button, id: "cancel-button", onClick: onClick }, "Abbrechen"),
9495
+ React__default.createElement("button", { className: styles$p.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
9496
9496
  }
9497
9497
 
9498
- var css_248z$n = ".styles-module_card__hT9fw {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 20px;\n padding: 100px 0px;\n}\n.styles-module_card__hT9fw h1 {\n margin: 0;\n font-size: 22px;\n font-weight: 500;\n}\n.styles-module_card__hT9fw p {\n margin: 0;\n font-size: 16px;\n}";
9499
- var styles$n = {"card":"styles-module_card__hT9fw"};
9500
- styleInject(css_248z$n);
9498
+ var css_248z$o = ".styles-module_card__hT9fw {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 20px;\n padding: 100px 0px;\n}\n.styles-module_card__hT9fw h1 {\n margin: 0;\n font-size: 22px;\n font-weight: 500;\n}\n.styles-module_card__hT9fw p {\n margin: 0;\n font-size: 16px;\n}";
9499
+ var styles$o = {"card":"styles-module_card__hT9fw"};
9500
+ styleInject(css_248z$o);
9501
9501
 
9502
9502
  function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorhanden.", iconName = "manage_search", button, onClick }) {
9503
- return (React__default.createElement("div", { className: styles$n.card },
9503
+ return (React__default.createElement("div", { className: styles$o.card },
9504
9504
  React__default.createElement(SvgIcon, { size: "60px", iconName: iconName }),
9505
9505
  React__default.createElement("h1", null, title),
9506
9506
  React__default.createElement("p", null, subtitle),
9507
9507
  button && React__default.createElement(Button, { text: button, onClick: onClick, type: "lightBlue" })));
9508
9508
  }
9509
9509
 
9510
- var css_248z$m = ".styles-module_container__HOoBj {\n margin-bottom: 30px;\n}\n.styles-module_container__HOoBj button {\n padding: 12px 18px;\n border-radius: 40px;\n border: none;\n color: white;\n font-weight: 400;\n font-size: 16px;\n background: var(--primary-1);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n}";
9511
- var styles$m = {"container":"styles-module_container__HOoBj"};
9512
- styleInject(css_248z$m);
9510
+ var css_248z$n = ".styles-module_container__HOoBj {\n margin-bottom: 30px;\n}\n.styles-module_container__HOoBj button {\n padding: 12px 18px;\n border-radius: 40px;\n border: none;\n color: white;\n font-weight: 400;\n font-size: 16px;\n background: var(--primary-1);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n}";
9511
+ var styles$n = {"container":"styles-module_container__HOoBj"};
9512
+ styleInject(css_248z$n);
9513
9513
 
9514
9514
  function FormButton({ id, text, style = {}, iconName = "", type = "submit", background = "#0075FF", onClick = () => { } }) {
9515
- return (React__default.createElement("div", { className: styles$m.container, style: style },
9515
+ return (React__default.createElement("div", { className: styles$n.container, style: style },
9516
9516
  React__default.createElement("button", { type: type, onClick: onClick, style: { background: background }, id: id },
9517
9517
  text,
9518
9518
  iconName && React__default.createElement(SvgIcon, { iconName: iconName, color: "white" }))));
9519
9519
  }
9520
9520
 
9521
- var css_248z$l = ".styles-module_container__9wYEm {\n margin-bottom: 30px;\n width: 100%;\n}\n.styles-module_container__9wYEm h1,\n.styles-module_container__9wYEm h2,\n.styles-module_container__9wYEm h3,\n.styles-module_container__9wYEm h4,\n.styles-module_container__9wYEm h5 {\n margin: 0;\n font-weight: 400;\n color: var(--foreground-1);\n}\n.styles-module_container__9wYEm h3 {\n margin-top: 5px;\n}";
9522
- var styles$l = {"container":"styles-module_container__9wYEm"};
9523
- styleInject(css_248z$l);
9521
+ var css_248z$m = ".styles-module_container__9wYEm {\n margin-bottom: 30px;\n width: 100%;\n}\n.styles-module_container__9wYEm h1,\n.styles-module_container__9wYEm h2,\n.styles-module_container__9wYEm h3,\n.styles-module_container__9wYEm h4,\n.styles-module_container__9wYEm h5 {\n margin: 0;\n font-weight: 400;\n color: var(--foreground-1);\n}\n.styles-module_container__9wYEm h3 {\n margin-top: 5px;\n}";
9522
+ var styles$m = {"container":"styles-module_container__9wYEm"};
9523
+ styleInject(css_248z$m);
9524
9524
 
9525
9525
  function FormText({ title, value, style }) {
9526
- return (React__default.createElement("div", { className: styles$l.container, style: style },
9526
+ return (React__default.createElement("div", { className: styles$m.container, style: style },
9527
9527
  React__default.createElement("h5", null, title),
9528
9528
  React__default.createElement("h3", null, value)));
9529
9529
  }
9530
9530
 
9531
- var css_248z$k = ".styles-module_container__C99XV {\n margin-right: 8px;\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF {\n background: none;\n padding: none;\n border: none;\n width: 40px;\n height: 40px;\n transition: 0.2s;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 20px;\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF:hover {\n background: var(--background-2);\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF span {\n color: var(--foreground-1) !important;\n}";
9532
- var styles$k = {"container":"styles-module_container__C99XV","button":"styles-module_button__pGYkF"};
9533
- styleInject(css_248z$k);
9531
+ var css_248z$l = ".styles-module_container__C99XV {\n margin-right: 8px;\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF {\n background: none;\n padding: none;\n border: none;\n width: 40px;\n height: 40px;\n transition: 0.2s;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 20px;\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF:hover {\n background: var(--background-2);\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF span {\n color: var(--foreground-1) !important;\n}";
9532
+ var styles$l = {"container":"styles-module_container__C99XV","button":"styles-module_button__pGYkF"};
9533
+ styleInject(css_248z$l);
9534
9534
 
9535
9535
  function ForwardButton({ onClick }) {
9536
9536
  function onClickButton(event) {
@@ -9538,8 +9538,8 @@ function ForwardButton({ onClick }) {
9538
9538
  if (onClick)
9539
9539
  onClick(event);
9540
9540
  }
9541
- return (React__default.createElement("div", { className: styles$k.container },
9542
- React__default.createElement("button", { onClick: onClickButton, className: styles$k.button },
9541
+ return (React__default.createElement("div", { className: styles$l.container },
9542
+ React__default.createElement("button", { onClick: onClickButton, className: styles$l.button },
9543
9543
  React__default.createElement(SvgIcon, { iconName: "arrow_back" }))));
9544
9544
  }
9545
9545
 
@@ -9547,9 +9547,9 @@ function Gap({ size }) {
9547
9547
  return (React__default.createElement("div", { style: { height: size } }));
9548
9548
  }
9549
9549
 
9550
- var css_248z$j = ".styles-module_container__Jr7LQ {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n}\n\n.styles-module_input__v-hUz {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n min-height: 50px;\n line-height: 1.7;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__v-hUz:focus, .styles-module_input__v-hUz:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__v-hUz.styles-module_not_available__6xu3Y, .styles-module_input__v-hUz:invalid {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__Jr7LQ {\n position: relative;\n}\n\n.styles-module_label__SSsD3 {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__EOAq5 {\n position: absolute;\n top: 20px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__v-hUz.styles-module_with_title__HWcCH::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__v-hUz.styles-module_with_title__HWcCH:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__v-hUz:focus + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5,\n.styles-module_input__v-hUz.styles-module_valid__6geu9 + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5 {\n transform: translateY(-50%);\n left: 15px;\n font-size: 14px;\n top: 0;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__v-hUz.styles-module_valid__6geu9 + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5 {\n color: var(--foreground-3);\n}";
9551
- var styles$j = {"container":"styles-module_container__Jr7LQ","input":"styles-module_input__v-hUz","not_available":"styles-module_not_available__6xu3Y","label":"styles-module_label__SSsD3","label_text":"styles-module_label_text__EOAq5","with_title":"styles-module_with_title__HWcCH","valid":"styles-module_valid__6geu9"};
9552
- styleInject(css_248z$j);
9550
+ var css_248z$k = ".styles-module_container__Jr7LQ {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n}\n\n.styles-module_input__v-hUz {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n min-height: 50px;\n line-height: 1.7;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__v-hUz:focus, .styles-module_input__v-hUz:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__v-hUz.styles-module_not_available__6xu3Y, .styles-module_input__v-hUz:invalid {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__Jr7LQ {\n position: relative;\n}\n\n.styles-module_label__SSsD3 {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__EOAq5 {\n position: absolute;\n top: 20px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__v-hUz.styles-module_with_title__HWcCH::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__v-hUz.styles-module_with_title__HWcCH:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__v-hUz:focus + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5,\n.styles-module_input__v-hUz.styles-module_valid__6geu9 + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5 {\n transform: translateY(-50%);\n left: 15px;\n font-size: 14px;\n top: 0;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__v-hUz.styles-module_valid__6geu9 + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5 {\n color: var(--foreground-3);\n}";
9551
+ var styles$k = {"container":"styles-module_container__Jr7LQ","input":"styles-module_input__v-hUz","not_available":"styles-module_not_available__6xu3Y","label":"styles-module_label__SSsD3","label_text":"styles-module_label_text__EOAq5","with_title":"styles-module_with_title__HWcCH","valid":"styles-module_valid__6geu9"};
9552
+ styleInject(css_248z$k);
9553
9553
 
9554
9554
  function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, width = "100%", height = "100px", available = true, onInput }) {
9555
9555
  const [value, setValue] = useState(defaultValue);
@@ -9558,32 +9558,32 @@ function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoF
9558
9558
  element.focus();
9559
9559
  }, [autoFocus]);
9560
9560
  return (React__default.createElement(React__default.Fragment, null,
9561
- React__default.createElement("div", { className: styles$j.container, style: { width } },
9562
- React__default.createElement("textarea", { className: `${styles$j.input} ${title != undefined ? styles$j.with_title : styles$j.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$j.valid : styles$j.not_valid} ${available ? styles$j.available : styles$j.not_available}`, name: name, id: id, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, style: { minHeight: height, maxHeight: height }, onInput: (event) => {
9561
+ React__default.createElement("div", { className: styles$k.container, style: { width } },
9562
+ React__default.createElement("textarea", { className: `${styles$k.input} ${title != undefined ? styles$k.with_title : styles$k.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$k.valid : styles$k.not_valid} ${available ? styles$k.available : styles$k.not_available}`, name: name, id: id, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, style: { minHeight: height, maxHeight: height }, onInput: (event) => {
9563
9563
  setValue(event.target.value);
9564
9564
  if (onInput)
9565
9565
  onInput(event);
9566
9566
  } }),
9567
- React__default.createElement("label", { htmlFor: "text", className: styles$j.label },
9568
- React__default.createElement("span", { className: styles$j.label_text }, title)))));
9567
+ React__default.createElement("label", { htmlFor: "text", className: styles$k.label },
9568
+ React__default.createElement("span", { className: styles$k.label_text }, title)))));
9569
9569
  }
9570
9570
 
9571
- var css_248z$i = ".styles-module_input__-GKhx {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__-GKhx:focus, .styles-module_input__-GKhx:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__-GKhx.styles-module_not_available__XD1kR, .styles-module_input__-GKhx:invalid {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__--4rV {\n position: relative;\n display: flex;\n flex-direction: column;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_label__mGzwP {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__d0eMb {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__-GKhx.styles-module_with_title__CGOEs::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__-GKhx.styles-module_with_title__CGOEs:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__-GKhx:focus + .styles-module_label__mGzwP .styles-module_label_text__d0eMb,\n.styles-module_input__-GKhx.styles-module_valid__uj8g- + .styles-module_label__mGzwP .styles-module_label_text__d0eMb {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: #0063d4;\n}\n\n.styles-module_input__-GKhx.styles-module_valid__uj8g- + .styles-module_label__mGzwP .styles-module_label_text__d0eMb {\n color: var(--foreground-3);\n}";
9572
- var styles$i = {"input":"styles-module_input__-GKhx","not_available":"styles-module_not_available__XD1kR","container":"styles-module_container__--4rV","label":"styles-module_label__mGzwP","label_text":"styles-module_label_text__d0eMb","with_title":"styles-module_with_title__CGOEs","valid":"styles-module_valid__uj8g-"};
9573
- styleInject(css_248z$i);
9571
+ var css_248z$j = ".styles-module_input__-GKhx {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__-GKhx:focus, .styles-module_input__-GKhx:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__-GKhx.styles-module_not_available__XD1kR, .styles-module_input__-GKhx:invalid {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__--4rV {\n position: relative;\n display: flex;\n flex-direction: column;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_label__mGzwP {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__d0eMb {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__-GKhx.styles-module_with_title__CGOEs::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__-GKhx.styles-module_with_title__CGOEs:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__-GKhx:focus + .styles-module_label__mGzwP .styles-module_label_text__d0eMb,\n.styles-module_input__-GKhx.styles-module_valid__uj8g- + .styles-module_label__mGzwP .styles-module_label_text__d0eMb {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: #0063d4;\n}\n\n.styles-module_input__-GKhx.styles-module_valid__uj8g- + .styles-module_label__mGzwP .styles-module_label_text__d0eMb {\n color: var(--foreground-3);\n}";
9572
+ var styles$j = {"input":"styles-module_input__-GKhx","not_available":"styles-module_not_available__XD1kR","container":"styles-module_container__--4rV","label":"styles-module_label__mGzwP","label_text":"styles-module_label_text__d0eMb","with_title":"styles-module_with_title__CGOEs","valid":"styles-module_valid__uj8g-"};
9573
+ styleInject(css_248z$j);
9574
9574
 
9575
9575
  function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true }) {
9576
9576
  const [value, setValue] = useState("");
9577
9577
  return (React__default.createElement(React__default.Fragment, null,
9578
- React__default.createElement("div", { className: styles$i.container, style: { width: width } },
9579
- React__default.createElement("input", { className: `${styles$i.input} ${title != undefined ? styles$i.with_title : styles$i.without_title} ${value.length > 0 ? styles$i.valid : styles$i.not_valid} ${available ? styles$i.available : styles$i.not_available}`, name: name, placeholder: placeholder, type: "email", onInput: (event) => setValue(event.target.value), id: id }),
9580
- React__default.createElement("label", { htmlFor: "text", className: styles$i.label },
9581
- React__default.createElement("span", { className: styles$i.label_text }, title)))));
9578
+ React__default.createElement("div", { className: styles$j.container, style: { width: width } },
9579
+ React__default.createElement("input", { className: `${styles$j.input} ${title != undefined ? styles$j.with_title : styles$j.without_title} ${value.length > 0 ? styles$j.valid : styles$j.not_valid} ${available ? styles$j.available : styles$j.not_available}`, name: name, placeholder: placeholder, type: "email", onInput: (event) => setValue(event.target.value), id: id }),
9580
+ React__default.createElement("label", { htmlFor: "text", className: styles$j.label },
9581
+ React__default.createElement("span", { className: styles$j.label_text }, title)))));
9582
9582
  }
9583
9583
 
9584
- var css_248z$h = ".styles-module_container__IXTeq {\n display: flex;\n flex-direction: row;\n gap: 20px;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__flMT5 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__flMT5:focus, .styles-module_input__flMT5:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_form__chEvQ {\n position: relative;\n flex: 1;\n display: flex;\n}\n\n.styles-module_label__hflX9 {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__oXgFI {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__flMT5.styles-module_with_title__ubN0L::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__flMT5.styles-module_with_title__ubN0L:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__flMT5:focus + .styles-module_label__hflX9 .styles-module_label_text__oXgFI,\n.styles-module_input__flMT5.styles-module_valid__76xYu + .styles-module_label__hflX9 .styles-module_label_text__oXgFI {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__flMT5.styles-module_valid__76xYu + .styles-module_label__hflX9 .styles-module_label_text__oXgFI {\n color: var(--foreground-3);\n}";
9585
- var styles$h = {"container":"styles-module_container__IXTeq","input":"styles-module_input__flMT5","form":"styles-module_form__chEvQ","label":"styles-module_label__hflX9","label_text":"styles-module_label_text__oXgFI","with_title":"styles-module_with_title__ubN0L","valid":"styles-module_valid__76xYu"};
9586
- styleInject(css_248z$h);
9584
+ var css_248z$i = ".styles-module_container__IXTeq {\n display: flex;\n flex-direction: row;\n gap: 20px;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__flMT5 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__flMT5:focus, .styles-module_input__flMT5:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_form__chEvQ {\n position: relative;\n flex: 1;\n display: flex;\n}\n\n.styles-module_label__hflX9 {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__oXgFI {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__flMT5.styles-module_with_title__ubN0L::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__flMT5.styles-module_with_title__ubN0L:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__flMT5:focus + .styles-module_label__hflX9 .styles-module_label_text__oXgFI,\n.styles-module_input__flMT5.styles-module_valid__76xYu + .styles-module_label__hflX9 .styles-module_label_text__oXgFI {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__flMT5.styles-module_valid__76xYu + .styles-module_label__hflX9 .styles-module_label_text__oXgFI {\n color: var(--foreground-3);\n}";
9585
+ var styles$i = {"container":"styles-module_container__IXTeq","input":"styles-module_input__flMT5","form":"styles-module_form__chEvQ","label":"styles-module_label__hflX9","label_text":"styles-module_label_text__oXgFI","with_title":"styles-module_with_title__ubN0L","valid":"styles-module_valid__76xYu"};
9586
+ styleInject(css_248z$i);
9587
9587
 
9588
9588
  function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "" }, title = { firstName: "Vorname", lastName: "Nachname" }, defaultValue = { firstName: "", lastName: "" }, onInput = (name, event) => { }, onInputFirstName = (event) => { }, onInputLastName = (event) => { }, }) {
9589
9589
  const [firstName, setFirstName] = useState(defaultValue.firstName ? defaultValue.firstName : "");
@@ -9598,20 +9598,20 @@ function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "
9598
9598
  onInputLastName(event);
9599
9599
  onInput("lastName", event);
9600
9600
  }
9601
- return (React__default.createElement("div", { className: styles$h.container, style: { width: width } },
9602
- React__default.createElement("div", { className: styles$h.form },
9603
- React__default.createElement("input", { className: `${styles$h.input} ${title.firstName != undefined ? styles$h.with_title : styles$h.without_title} ${firstName.length > 0 ? styles$h.valid : styles$h.not_valid}`, name: "firstName", type: "name", style: { width: width != "100%" ? "100px" : width }, placeholder: placeholder.firstName, defaultValue: defaultValue.firstName, onInput: onInput1 }),
9604
- React__default.createElement("label", { htmlFor: "text", className: styles$h.label },
9605
- React__default.createElement("span", { className: styles$h.label_text }, title.firstName))),
9606
- React__default.createElement("div", { className: styles$h.form },
9607
- React__default.createElement("input", { className: `${styles$h.input} ${title.lastName != undefined ? styles$h.with_title : styles$h.without_title} ${lastName.length > 0 ? styles$h.valid : styles$h.not_valid}`, name: "lastName", type: "name", style: { width: width != "100%" ? "100px" : width }, placeholder: placeholder.lastName, defaultValue: defaultValue.lastName, onInput: onInput2 }),
9608
- React__default.createElement("label", { htmlFor: "text", className: styles$h.label },
9609
- React__default.createElement("span", { className: styles$h.label_text }, title.lastName)))));
9601
+ return (React__default.createElement("div", { className: styles$i.container, style: { width: width } },
9602
+ React__default.createElement("div", { className: styles$i.form },
9603
+ React__default.createElement("input", { className: `${styles$i.input} ${title.firstName != undefined ? styles$i.with_title : styles$i.without_title} ${firstName.length > 0 ? styles$i.valid : styles$i.not_valid}`, name: "firstName", type: "name", style: { width: width != "100%" ? "100px" : width }, placeholder: placeholder.firstName, defaultValue: defaultValue.firstName, onInput: onInput1 }),
9604
+ React__default.createElement("label", { htmlFor: "text", className: styles$i.label },
9605
+ React__default.createElement("span", { className: styles$i.label_text }, title.firstName))),
9606
+ React__default.createElement("div", { className: styles$i.form },
9607
+ React__default.createElement("input", { className: `${styles$i.input} ${title.lastName != undefined ? styles$i.with_title : styles$i.without_title} ${lastName.length > 0 ? styles$i.valid : styles$i.not_valid}`, name: "lastName", type: "name", style: { width: width != "100%" ? "100px" : width }, placeholder: placeholder.lastName, defaultValue: defaultValue.lastName, onInput: onInput2 }),
9608
+ React__default.createElement("label", { htmlFor: "text", className: styles$i.label },
9609
+ React__default.createElement("span", { className: styles$i.label_text }, title.lastName)))));
9610
9610
  }
9611
9611
 
9612
- var css_248z$g = ".styles-module_container__Xk2HY {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__ReFFR {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n width: 100%;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__ReFFR:focus, .styles-module_input__ReFFR:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__ReFFR.styles-module_not_available__mZ5-1 {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__Xk2HY {\n position: relative;\n}\n\n.styles-module_label__4n2Ai {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__NsKJU {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__ReFFR.styles-module_with_title__vMb1v::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__ReFFR.styles-module_with_title__vMb1v:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__ReFFR:focus + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU,\n.styles-module_input__ReFFR.styles-module_valid__NyP0J + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__ReFFR.styles-module_valid__NyP0J + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU {\n color: var(--foreground-3);\n}";
9613
- var styles$g = {"container":"styles-module_container__Xk2HY","input":"styles-module_input__ReFFR","not_available":"styles-module_not_available__mZ5-1","label":"styles-module_label__4n2Ai","label_text":"styles-module_label_text__NsKJU","with_title":"styles-module_with_title__vMb1v","valid":"styles-module_valid__NyP0J"};
9614
- styleInject(css_248z$g);
9612
+ var css_248z$h = ".styles-module_container__Xk2HY {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__ReFFR {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n width: 100%;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__ReFFR:focus, .styles-module_input__ReFFR:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__ReFFR.styles-module_not_available__mZ5-1 {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__Xk2HY {\n position: relative;\n}\n\n.styles-module_label__4n2Ai {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__NsKJU {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__ReFFR.styles-module_with_title__vMb1v::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__ReFFR.styles-module_with_title__vMb1v:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__ReFFR:focus + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU,\n.styles-module_input__ReFFR.styles-module_valid__NyP0J + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__ReFFR.styles-module_valid__NyP0J + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU {\n color: var(--foreground-3);\n}";
9613
+ var styles$h = {"container":"styles-module_container__Xk2HY","input":"styles-module_input__ReFFR","not_available":"styles-module_not_available__mZ5-1","label":"styles-module_label__4n2Ai","label_text":"styles-module_label_text__NsKJU","with_title":"styles-module_with_title__vMb1v","valid":"styles-module_valid__NyP0J"};
9614
+ styleInject(css_248z$h);
9615
9615
 
9616
9616
  function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "number", width = "100%", available = true, onInput = (event) => { } }) {
9617
9617
  const [value, setValue] = useState(defaultValue);
@@ -9620,37 +9620,37 @@ function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFoc
9620
9620
  element.focus();
9621
9621
  }, [autoFocus]);
9622
9622
  return (React__default.createElement(React__default.Fragment, null,
9623
- React__default.createElement("div", { className: styles$g.container, style: { width } },
9624
- React__default.createElement("input", { className: `${styles$g.input} ${title != undefined ? styles$g.with_title : styles$g.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$g.valid : styles$g.not_valid} ${available ? styles$g.available : styles$g.not_available}`, name: name, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
9623
+ React__default.createElement("div", { className: styles$h.container, style: { width } },
9624
+ React__default.createElement("input", { className: `${styles$h.input} ${title != undefined ? styles$h.with_title : styles$h.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$h.valid : styles$h.not_valid} ${available ? styles$h.available : styles$h.not_available}`, name: name, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
9625
9625
  setValue(event.target.value);
9626
9626
  onInput(event);
9627
9627
  } }),
9628
- React__default.createElement("label", { htmlFor: "text", className: styles$g.label },
9629
- React__default.createElement("span", { className: styles$g.label_text }, title)))));
9628
+ React__default.createElement("label", { htmlFor: "text", className: styles$h.label },
9629
+ React__default.createElement("span", { className: styles$h.label_text }, title)))));
9630
9630
  }
9631
9631
 
9632
- var css_248z$f = "@keyframes styles-module_show__OLTZH {\n from {\n max-heigth: 0px;\n height: 0px;\n }\n}\n@keyframes styles-module_hide__LAgaY {\n from {\n max-heigth: 0px;\n height: 0px;\n }\n to {\n max-height: fit-content;\n }\n}\n.styles-module_container__UdmOO {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-bottom: 30px;\n max-width: 100%;\n transition: all 0.2s ease-in-out;\n box-sizing: border-box;\n}\n.styles-module_container__UdmOO .styles-module_forgot_label__EeN6a {\n font-size: 12px;\n color: var(--foreground-3);\n}\n.styles-module_container__UdmOO.styles-module_visible__QROqh {\n max-height: 100px;\n opacity: 1;\n}\n.styles-module_container__UdmOO.styles-module_hidden__hDKDO {\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n}\n\n.styles-module_input__sC2fP {\n padding: 14px 20px;\n font-size: 16px;\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n border: 1.5px solid var(--border-2);\n border-right: none;\n outline: none;\n transition: all 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__sC2fP:focus, .styles-module_input__sC2fP:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_hideButton__83mRI {\n outline: none;\n display: flex;\n align-items: center;\n padding: 10px;\n border: 1.5px solid var(--border-2);\n border-left: none;\n background: none;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n cursor: pointer;\n}\n.styles-module_hideButton__83mRI span {\n color: var(--foreground-3);\n}\n\n/* animated title */\n.styles-module_form__m866x {\n position: relative;\n display: flex;\n}\n\n.styles-module_label__8PuaL {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__FwJ1F {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__sC2fP.styles-module_with_title__dftgq::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__sC2fP.styles-module_with_title__dftgq:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__sC2fP:focus + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F,\n.styles-module_input__sC2fP.styles-module_valid__SM7w5 + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__sC2fP.styles-module_valid__SM7w5 + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F {\n color: var(--foreground-3);\n}";
9633
- var styles$f = {"container":"styles-module_container__UdmOO","forgot_label":"styles-module_forgot_label__EeN6a","visible":"styles-module_visible__QROqh","hidden":"styles-module_hidden__hDKDO","input":"styles-module_input__sC2fP","hideButton":"styles-module_hideButton__83mRI","form":"styles-module_form__m866x","label":"styles-module_label__8PuaL","label_text":"styles-module_label_text__FwJ1F","with_title":"styles-module_with_title__dftgq","valid":"styles-module_valid__SM7w5","show":"styles-module_show__OLTZH","hide":"styles-module_hide__LAgaY"};
9634
- styleInject(css_248z$f);
9632
+ var css_248z$g = "@keyframes styles-module_show__OLTZH {\n from {\n max-heigth: 0px;\n height: 0px;\n }\n}\n@keyframes styles-module_hide__LAgaY {\n from {\n max-heigth: 0px;\n height: 0px;\n }\n to {\n max-height: fit-content;\n }\n}\n.styles-module_container__UdmOO {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-bottom: 30px;\n max-width: 100%;\n transition: all 0.2s ease-in-out;\n box-sizing: border-box;\n}\n.styles-module_container__UdmOO .styles-module_forgot_label__EeN6a {\n font-size: 12px;\n color: var(--foreground-3);\n}\n.styles-module_container__UdmOO.styles-module_visible__QROqh {\n max-height: 100px;\n opacity: 1;\n}\n.styles-module_container__UdmOO.styles-module_hidden__hDKDO {\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n}\n\n.styles-module_input__sC2fP {\n padding: 14px 20px;\n font-size: 16px;\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n border: 1.5px solid var(--border-2);\n border-right: none;\n outline: none;\n transition: all 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__sC2fP:focus, .styles-module_input__sC2fP:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_hideButton__83mRI {\n outline: none;\n display: flex;\n align-items: center;\n padding: 10px;\n border: 1.5px solid var(--border-2);\n border-left: none;\n background: none;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n cursor: pointer;\n}\n.styles-module_hideButton__83mRI span {\n color: var(--foreground-3);\n}\n\n/* animated title */\n.styles-module_form__m866x {\n position: relative;\n display: flex;\n}\n\n.styles-module_label__8PuaL {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__FwJ1F {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__sC2fP.styles-module_with_title__dftgq::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__sC2fP.styles-module_with_title__dftgq:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__sC2fP:focus + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F,\n.styles-module_input__sC2fP.styles-module_valid__SM7w5 + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__sC2fP.styles-module_valid__SM7w5 + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F {\n color: var(--foreground-3);\n}";
9633
+ var styles$g = {"container":"styles-module_container__UdmOO","forgot_label":"styles-module_forgot_label__EeN6a","visible":"styles-module_visible__QROqh","hidden":"styles-module_hidden__hDKDO","input":"styles-module_input__sC2fP","hideButton":"styles-module_hideButton__83mRI","form":"styles-module_form__m866x","label":"styles-module_label__8PuaL","label_text":"styles-module_label_text__FwJ1F","with_title":"styles-module_with_title__dftgq","valid":"styles-module_valid__SM7w5","show":"styles-module_show__OLTZH","hide":"styles-module_hide__LAgaY"};
9634
+ styleInject(css_248z$g);
9635
9635
 
9636
9636
  function InputPassword({ id, placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", minLength = 8, autoComplete, forgotLink = false }) {
9637
9637
  const [value, setValue] = useState("");
9638
9638
  const [hidePassword, setHidePassword] = useState(true);
9639
9639
  return (React__default.createElement(React__default.Fragment, null,
9640
- React__default.createElement("div", { className: `${styles$f.container} ${isVisible ? styles$f.visible : styles$f.hidden}`, style: { width: width } },
9641
- React__default.createElement("div", { className: styles$f.form },
9642
- React__default.createElement("input", { className: `${styles$f.input} ${title != undefined ? styles$f.with_title : styles$f.without_title} ${value.length > 0 ? styles$f.valid : styles$f.not_valid}`, name: name, id: id, minLength: minLength, autoComplete: autoComplete, placeholder: placeholder, type: hidePassword ? "password" : "text", onInput: (event) => setValue(event.target.value) }),
9643
- React__default.createElement("label", { htmlFor: "text", className: styles$f.label },
9644
- React__default.createElement("span", { className: styles$f.label_text }, title)),
9645
- React__default.createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$f.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
9640
+ React__default.createElement("div", { className: `${styles$g.container} ${isVisible ? styles$g.visible : styles$g.hidden}`, style: { width: width } },
9641
+ React__default.createElement("div", { className: styles$g.form },
9642
+ React__default.createElement("input", { className: `${styles$g.input} ${title != undefined ? styles$g.with_title : styles$g.without_title} ${value.length > 0 ? styles$g.valid : styles$g.not_valid}`, name: name, id: id, minLength: minLength, autoComplete: autoComplete, placeholder: placeholder, type: hidePassword ? "password" : "text", onInput: (event) => setValue(event.target.value) }),
9643
+ React__default.createElement("label", { htmlFor: "text", className: styles$g.label },
9644
+ React__default.createElement("span", { className: styles$g.label_text }, title)),
9645
+ React__default.createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$g.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
9646
9646
  React__default.createElement(SvgIcon, { iconName: hidePassword ? "visibility" : "visibility_off" }))),
9647
9647
  forgotLink &&
9648
- React__default.createElement("div", { className: styles$f.forgot_container }, forgotLink))));
9648
+ React__default.createElement("div", { className: styles$g.forgot_container }, forgotLink))));
9649
9649
  }
9650
9650
 
9651
- var css_248z$e = ".styles-module_container__--NO0 {\n display: flex;\n flex-direction: column;\n gap: 10px;\n justify-content: center;\n align-items: center;\n user-select: none;\n margin-bottom: 20px;\n}\n.styles-module_container__--NO0 button {\n background: transparent;\n color: var(--primary-1);\n border: none;\n font-size: 14px;\n cursor: pointer;\n}\n\n.styles-module_input_wrapper__LPIk1 {\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 10px;\n}\n\n.styles-module_input__84v36 {\n padding: 14px 10px;\n width: 30px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n text-align: center;\n font-size: 18px;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_input__84v36:nth-child(3) {\n margin-right: 25px;\n}\n\n.styles-module_input__84v36::placeholder,\n.styles-module_input__84v36:-ms-input-placeholder,\n.styles-module_input__84v36::-ms-input-placeholder {\n letter-spacing: 0px !important;\n}\n\n@media (max-width: 450px) {\n .styles-module_input__84v36 {\n width: 25px;\n font-size: 16px;\n }\n .styles-module_input_wrapper__LPIk1 {\n gap: 7px;\n }\n .styles-module_input__84v36:nth-child(3) {\n margin-right: 12px;\n }\n}";
9652
- var styles$e = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
9653
- styleInject(css_248z$e);
9651
+ var css_248z$f = ".styles-module_container__--NO0 {\n display: flex;\n flex-direction: column;\n gap: 10px;\n justify-content: center;\n align-items: center;\n user-select: none;\n margin-bottom: 20px;\n}\n.styles-module_container__--NO0 button {\n background: transparent;\n color: var(--primary-1);\n border: none;\n font-size: 14px;\n cursor: pointer;\n}\n\n.styles-module_input_wrapper__LPIk1 {\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 10px;\n}\n\n.styles-module_input__84v36 {\n padding: 14px 10px;\n width: 30px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n text-align: center;\n font-size: 18px;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_input__84v36:nth-child(3) {\n margin-right: 25px;\n}\n\n.styles-module_input__84v36::placeholder,\n.styles-module_input__84v36:-ms-input-placeholder,\n.styles-module_input__84v36::-ms-input-placeholder {\n letter-spacing: 0px !important;\n}\n\n@media (max-width: 450px) {\n .styles-module_input__84v36 {\n width: 25px;\n font-size: 16px;\n }\n .styles-module_input_wrapper__LPIk1 {\n gap: 7px;\n }\n .styles-module_input__84v36:nth-child(3) {\n margin-right: 12px;\n }\n}";
9652
+ var styles$f = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
9653
+ styleInject(css_248z$f);
9654
9654
 
9655
9655
  function InputPin({ name, length, onFinished = () => { } }) {
9656
9656
  const [state, setState] = useState({});
@@ -9716,20 +9716,20 @@ function InputPin({ name, length, onFinished = () => { } }) {
9716
9716
  ref.current.value = "";
9717
9717
  });
9718
9718
  }
9719
- return (React__default.createElement("div", { className: styles$e.container },
9719
+ return (React__default.createElement("div", { className: styles$f.container },
9720
9720
  React__default.createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
9721
- React__default.createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((value, i) => {
9721
+ React__default.createElement("div", { className: styles$f.input_wrapper }, [...Array(length)].map((value, i) => {
9722
9722
  if (i == 0) {
9723
- return React__default.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
9723
+ return React__default.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$f.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
9724
9724
  }
9725
- return React__default.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
9725
+ return React__default.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$f.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
9726
9726
  })),
9727
9727
  React__default.createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
9728
9728
  }
9729
9729
 
9730
- var css_248z$d = ".styles-module_container__zcXGF {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__Tpth8 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__zcXGF {\n position: relative;\n}\n\n.styles-module_label__appHO {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__-sKjY {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__Tpth8:focus + .styles-module_label__appHO .styles-module_label_text__-sKjY,\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n color: var(--foreground-3);\n}";
9731
- var styles$d = {"container":"styles-module_container__zcXGF","input":"styles-module_input__Tpth8","not_available":"styles-module_not_available__CRXjB","label":"styles-module_label__appHO","label_text":"styles-module_label_text__-sKjY","with_title":"styles-module_with_title__L3eGj","valid":"styles-module_valid__zWcOz"};
9732
- styleInject(css_248z$d);
9730
+ var css_248z$e = ".styles-module_container__zcXGF {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__Tpth8 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__zcXGF {\n position: relative;\n}\n\n.styles-module_label__appHO {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__-sKjY {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__Tpth8:focus + .styles-module_label__appHO .styles-module_label_text__-sKjY,\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n color: var(--foreground-3);\n}";
9731
+ var styles$e = {"container":"styles-module_container__zcXGF","input":"styles-module_input__Tpth8","not_available":"styles-module_not_available__CRXjB","label":"styles-module_label__appHO","label_text":"styles-module_label_text__-sKjY","with_title":"styles-module_with_title__L3eGj","valid":"styles-module_valid__zWcOz"};
9732
+ styleInject(css_248z$e);
9733
9733
 
9734
9734
  function InputText({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, autoComplete = "off", available = true, onInput = (event) => { } }) {
9735
9735
  const [value, setValue] = useState(defaultValue);
@@ -9738,32 +9738,32 @@ function InputText({ id, title, name, placeholder = "", defaultValue = "", autoF
9738
9738
  element.focus();
9739
9739
  }, [autoFocus]);
9740
9740
  return (React__default.createElement(React__default.Fragment, null,
9741
- React__default.createElement("div", { className: styles$d.container, style: { width, marginBottom } },
9742
- React__default.createElement("input", { className: `${styles$d.input} ${title != undefined ? styles$d.with_title : styles$d.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$d.valid : styles$d.not_valid} ${available ? styles$d.available : styles$d.not_available}`, name: name, id: id, type: type, placeholder: placeholder, autoComplete: autoComplete, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
9741
+ React__default.createElement("div", { className: styles$e.container, style: { width, marginBottom } },
9742
+ React__default.createElement("input", { className: `${styles$e.input} ${title != undefined ? styles$e.with_title : styles$e.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$e.valid : styles$e.not_valid} ${available ? styles$e.available : styles$e.not_available}`, name: name, id: id, type: type, placeholder: placeholder, autoComplete: autoComplete, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
9743
9743
  setValue(event.target.value);
9744
9744
  if (onInput)
9745
9745
  onInput(event);
9746
9746
  } }),
9747
- React__default.createElement("label", { htmlFor: "text", className: styles$d.label },
9748
- React__default.createElement("span", { className: styles$d.label_text }, title)))));
9747
+ React__default.createElement("label", { htmlFor: "text", className: styles$e.label },
9748
+ React__default.createElement("span", { className: styles$e.label_text }, title)))));
9749
9749
  }
9750
9750
 
9751
- var css_248z$c = ".styles-module_box__Z0iod {\n background: var(--background-2);\n width: 400px;\n max-width: 100%;\n border-radius: 22px;\n border: 1px solid var(--border-2);\n display: flex;\n flex-direction: row;\n padding: 18px;\n gap: 18px;\n cursor: pointer;\n margin-bottom: 20px;\n transition: 0.2s ease;\n color: var(--foreground-1);\n}\n.styles-module_box__Z0iod:hover {\n background-color: var(--background-1);\n transform: scale(1.01);\n}\n.styles-module_box__Z0iod .styles-module_left_side__8ObGs {\n width: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 5px;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D {\n flex: 1;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D p {\n color: var(--foreground-2);\n margin: 0;\n text-align: left;\n font-size: 1.1rem;\n line-height: 1.6;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D h4 {\n margin: 0;\n text-align: left;\n font-size: 1.3rem;\n margin-bottom: 16px;\n margin-top: 5px;\n color: var(--foreground-1);\n}\n\n@media (max-width: 550px) {\n .styles-module_box__Z0iod {\n width: auto;\n }\n .styles-module_box__Z0iod .styles-module_right_side__Ypp0D h4 {\n font-size: 1.2rem;\n }\n .styles-module_box__Z0iod .styles-module_right_side__Ypp0D p {\n font-size: 1rem;\n }\n}";
9752
- var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
9753
- styleInject(css_248z$c);
9751
+ var css_248z$d = ".styles-module_box__Z0iod {\n background: var(--background-2);\n width: 400px;\n max-width: 100%;\n border-radius: 22px;\n border: 1px solid var(--border-2);\n display: flex;\n flex-direction: row;\n padding: 18px;\n gap: 18px;\n cursor: pointer;\n margin-bottom: 20px;\n transition: 0.2s ease;\n color: var(--foreground-1);\n}\n.styles-module_box__Z0iod:hover {\n background-color: var(--background-1);\n transform: scale(1.01);\n}\n.styles-module_box__Z0iod .styles-module_left_side__8ObGs {\n width: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 5px;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D {\n flex: 1;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D p {\n color: var(--foreground-2);\n margin: 0;\n text-align: left;\n font-size: 1.1rem;\n line-height: 1.6;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D h4 {\n margin: 0;\n text-align: left;\n font-size: 1.3rem;\n margin-bottom: 16px;\n margin-top: 5px;\n color: var(--foreground-1);\n}\n\n@media (max-width: 550px) {\n .styles-module_box__Z0iod {\n width: auto;\n }\n .styles-module_box__Z0iod .styles-module_right_side__Ypp0D h4 {\n font-size: 1.2rem;\n }\n .styles-module_box__Z0iod .styles-module_right_side__Ypp0D p {\n font-size: 1rem;\n }\n}";
9752
+ var styles$d = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
9753
+ styleInject(css_248z$d);
9754
9754
 
9755
9755
  function OptionField({ id, headline, description, iconName }) {
9756
9756
  return (React__default.createElement(React__default.Fragment, null,
9757
- React__default.createElement("div", { className: styles$c.box, id: id },
9758
- React__default.createElement("div", { className: styles$c.left_side }, iconName && React__default.createElement(SvgIcon, { iconName: iconName })),
9759
- React__default.createElement("div", { className: styles$c.right_side },
9757
+ React__default.createElement("div", { className: styles$d.box, id: id },
9758
+ React__default.createElement("div", { className: styles$d.left_side }, iconName && React__default.createElement(SvgIcon, { iconName: iconName })),
9759
+ React__default.createElement("div", { className: styles$d.right_side },
9760
9760
  React__default.createElement("h4", null, headline),
9761
9761
  React__default.createElement("p", null, description)))));
9762
9762
  }
9763
9763
 
9764
- var css_248z$b = ".styles-module_container__XCtqW {\n background: var(--background-1);\n border-radius: 12px;\n padding: 30px;\n margin-bottom: 30px;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px;\n color: var(--foreground-1);\n border: 1px solid var(--border-2);\n transition: 0.2s ease-in-out;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n cursor: pointer;\n}\n.styles-module_container__XCtqW:hover {\n background: var(--background-2);\n border-color: var(--border-3);\n}\n.styles-module_container__XCtqW h3 {\n font-weight: 500;\n margin: 0;\n text-align: center;\n}\n\n.styles-module_container__XCtqW.styles-module_preselected__WoSbB {\n border: 1px solid var(--foreground-1);\n}";
9765
- var styles$b = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
9766
- styleInject(css_248z$b);
9764
+ var css_248z$c = ".styles-module_container__XCtqW {\n background: var(--background-1);\n border-radius: 12px;\n padding: 30px;\n margin-bottom: 30px;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px;\n color: var(--foreground-1);\n border: 1px solid var(--border-2);\n transition: 0.2s ease-in-out;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n cursor: pointer;\n}\n.styles-module_container__XCtqW:hover {\n background: var(--background-2);\n border-color: var(--border-3);\n}\n.styles-module_container__XCtqW h3 {\n font-weight: 500;\n margin: 0;\n text-align: center;\n}\n\n.styles-module_container__XCtqW.styles-module_preselected__WoSbB {\n border: 1px solid var(--foreground-1);\n}";
9765
+ var styles$c = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
9766
+ styleInject(css_248z$c);
9767
9767
 
9768
9768
  function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }) {
9769
9769
  function onClickDiv(event) {
@@ -9771,11 +9771,22 @@ function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }
9771
9771
  if (onClick)
9772
9772
  onClick(event);
9773
9773
  }
9774
- return (React__default.createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" "), onClick: onClickDiv },
9774
+ return (React__default.createElement("div", { className: [styles$c.container, preselected ? styles$c.preselected : styles$c.not_preselected].join(" "), onClick: onClickDiv },
9775
9775
  iconName && React__default.createElement(SvgIcon, { iconName: iconName, size: "32px" }),
9776
9776
  React__default.createElement("h3", null, title)));
9777
9777
  }
9778
9778
 
9779
+ var css_248z$b = ".styles-module_popover__3ZbOL {\n overflow-y: scroll;\n overflow-x: hidden;\n margin: 0 auto;\n margin-top: 30px;\n z-index: 10000;\n position: fixed;\n border-top-left-radius: 30px;\n border-top-right-radius: 30px;\n transform: translateY(100%);\n width: 700px;\n max-width: 100%;\n height: 100%;\n left: 50%;\n margin-left: -385px;\n transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);\n background: var(--background-1);\n box-shadow: var(--border-3) 0px 1px 2px 0px, var(--border-3) 0px 1px 3px 1px;\n padding: 35px;\n padding-top: 110px;\n top: 0;\n}\n.styles-module_popover__3ZbOL.styles-module_active__-ZVbh {\n transform: translateY(0px);\n}\n.styles-module_popover__3ZbOL h1 {\n margin: 10px 0px;\n font-weight: 900;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.styles-module_popover__3ZbOL h4 {\n font-size: 20px;\n margin: 10px 0px;\n color: var(--foreground-3);\n font-weight: 400;\n}\n.styles-module_popover__3ZbOL p {\n line-height: 2;\n margin: 20px 0px;\n}\n.styles-module_popover__3ZbOL img {\n object-fit: contain;\n border-radius: 10px;\n}\n.styles-module_popover__3ZbOL .styles-module_close_button__5RYuU {\n width: 40px;\n height: 40px;\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--background-4);\n cursor: pointer;\n transition: 0.2s ease-in-out;\n position: absolute;\n top: 35px;\n right: 35px;\n color: var(--foreground-2);\n}\n.styles-module_popover__3ZbOL .styles-module_close_button__5RYuU:hover {\n filter: brightness(0.9);\n}\n\n@media (max-width: 800px) {\n .styles-module_popover__3ZbOL {\n width: calc(100% - 40px);\n left: 0;\n margin-left: 0;\n padding: 20px;\n padding-top: 110px;\n }\n}";
9780
+ var styles$b = {"popover":"styles-module_popover__3ZbOL","active":"styles-module_active__-ZVbh","close_button":"styles-module_close_button__5RYuU"};
9781
+ styleInject(css_248z$b);
9782
+
9783
+ function Popover({ children, active, onClose }) {
9784
+ return (React__default.createElement("div", { className: [styles$b.popover, active ? styles$b.active : styles$b.closed].join(" ") },
9785
+ children,
9786
+ React__default.createElement("div", { className: styles$b.close_button, onClick: onClose },
9787
+ React__default.createElement(SvgIcon, { iconName: "close" }))));
9788
+ }
9789
+
9779
9790
  var css_248z$a = ".styles-module_container__u4q5n {\n margin-bottom: 50px;\n width: 400px;\n max-width: 100%;\n}\n\n.styles-module_background__jt-ry {\n background: var(--border-2);\n height: 3px;\n position: relative;\n}\n\n.styles-module_progress__Zj-B7 {\n background: var(--foreground-1);\n position: absolute;\n left: 0;\n top: 0;\n height: 3px;\n}";
9780
9791
  var styles$a = {"container":"styles-module_container__u4q5n","background":"styles-module_background__jt-ry","progress":"styles-module_progress__Zj-B7"};
9781
9792
  styleInject(css_248z$a);
@@ -10423,4 +10434,4 @@ function useScroll() {
10423
10434
  return scroll;
10424
10435
  }
10425
10436
 
10426
- export { Accordeon, AuthButton, Button, CardButton, Checkbox, ChooseRole, ChooseRoleItem, CopyCode, Dialog, EmptyCard, FormButton, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, OptionField, OptionFieldHorizontal, ProgressBar, RadioButtons, RadioOption, RedirectButton, SearchChip, SearchChips, Searchbar, Slider, SliderCard, StepBack, SvgIcon, Table, Tabs, TextWithIcon, UsageCard, useDimensions, useOrientation, useScroll };
10437
+ export { Accordeon, AuthButton, Button, CardButton, Checkbox, ChooseRole, ChooseRoleItem, CopyCode, Dialog, EmptyCard, FormButton, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, OptionField, OptionFieldHorizontal, Popover, ProgressBar, RadioButtons, RadioOption, RedirectButton, SearchChip, SearchChips, Searchbar, Slider, SliderCard, StepBack, SvgIcon, Table, Tabs, TextWithIcon, UsageCard, useDimensions, useOrientation, useScroll };