math-main-components 0.0.192 → 0.0.194

package/dist/hooks/useDimensions.d.ts

@@ -0,0 +1,4 @@
+export declare function useDimensions(): {
+    width: number;
+    height: number;
+};

package/dist/hooks/useOrientation.d.ts

@@ -0,0 +1,3 @@
+type Orientation = "landscape" | "portrait";
+export declare function useOrientation(): Orientation;
+export {};

package/dist/hooks/useScroll.d.ts

@@ -0,0 +1,4 @@
+export declare function useScroll(): {
+    xScroll: number;
+    yScroll: number;
+};

package/dist/index.cjs.js

@@ -9395,9 +9395,9 @@ function styleInject(css, ref) {
   }
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$v);
+styleInject(css_248z$w);
 
 function Accordeon({ title, children }) {
     const [isActive, setActive] = React.useState(false);
@@ -9408,9 +9408,9 @@ function Accordeon({ title, children }) {
         React__default["default"].createElement("div", { className: styles$v.content }, children)));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$u);
+styleInject(css_248z$v);
 
 function AuthButton({ id, text, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, style, onClick }) {
     return (React__default["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 },
@@ -9419,9 +9419,9 @@ function AuthButton({ id, text, type = "submit", theme = "primary", iconName = "
             React__default["default"].createElement(SvgIcon, { iconName: iconName }))));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$t);
+styleInject(css_248z$u);
 
 function Button({ id, text, iconName, iconFill = "white", type = "blue", onClick = () => { } }) {
     function onClickButton(event) {
@@ -9435,9 +9435,9 @@ function Button({ id, text, iconName, iconFill = "white", type = "blue", onClick
             iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName }))));
 }
 
-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}";
+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}";
 var styles$s = {"card":"styles-module_card__bOd85"};
-styleInject(css_248z$s);
+styleInject(css_248z$t);
 
 function CardButton({ id, title, iconName, onClick, }) {
     function onClickCard(event) {
@@ -9450,9 +9450,9 @@ function CardButton({ id, title, iconName, onClick, }) {
         React__default["default"].createElement("h2", null, title)));
 }
 
-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}";
+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}";
 var styles$r = {"container":"styles-module_container__gCCnD"};
-styleInject(css_248z$r);
+styleInject(css_248z$s);
 
 function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children }) {
     return (React__default["default"].createElement("div", { className: styles$r.container },
@@ -9461,9 +9461,9 @@ function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => {
         React__default["default"].createElement(SvgIcon, { iconName: "done", size: "21px" })));
 }
 
-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}";
+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}";
 var styles$q = {"container":"styles-module_container__OqDNA","item":"styles-module_item__1SMCI","selected":"styles-module_selected__AXIA-"};
-styleInject(css_248z$q);
+styleInject(css_248z$r);
 
 class ChooseRoleItem {
     title;
@@ -9484,9 +9484,9 @@ function ChooseRole({ roles, defaultSelected, readOnly = false, onChange }) {
     return (React__default["default"].createElement("div", { className: styles$q.container }, roles.map((item, index) => React__default["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))));
 }
 
-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}";
+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}";
 var styles$p = {"container":"styles-module_container__yV6C8"};
-styleInject(css_248z$p);
+styleInject(css_248z$q);
 
 function CopyCode({ code, style, onCopy = () => { } }) {
     function onClick() {
@@ -9500,9 +9500,9 @@ function CopyCode({ code, style, onCopy = () => { } }) {
         React__default["default"].createElement("input", { type: "hidden", name: "code", value: code })));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$o);
+styleInject(css_248z$p);
 
 function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }) {
     function onClick(event) {
@@ -9521,9 +9521,9 @@ function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }
             React__default["default"].createElement("button", { className: styles$o.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
 }
 
-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}";
+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}";
 var styles$n = {"card":"styles-module_card__hT9fw"};
-styleInject(css_248z$n);
+styleInject(css_248z$o);
 
 function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorhanden.", iconName = "manage_search", button, onClick }) {
     return (React__default["default"].createElement("div", { className: styles$n.card },
@@ -9533,9 +9533,9 @@ function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorh
         button && React__default["default"].createElement(Button, { text: button, onClick: onClick, type: "lightBlue" })));
 }
 
-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}";
+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}";
 var styles$m = {"container":"styles-module_container__HOoBj"};
-styleInject(css_248z$m);
+styleInject(css_248z$n);
 
 function FormButton({ id, text, style = {}, iconName = "", type = "submit", background = "#0075FF", onClick = () => { } }) {
     return (React__default["default"].createElement("div", { className: styles$m.container, style: style },
@@ -9544,9 +9544,9 @@ function FormButton({ id, text, style = {}, iconName = "", type = "submit", back
             iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName, color: "white" }))));
 }
 
-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}";
+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}";
 var styles$l = {"container":"styles-module_container__9wYEm"};
-styleInject(css_248z$l);
+styleInject(css_248z$m);
 
 function FormText({ title, value, style }) {
     return (React__default["default"].createElement("div", { className: styles$l.container, style: style },
@@ -9554,9 +9554,9 @@ function FormText({ title, value, style }) {
         React__default["default"].createElement("h3", null, value)));
 }
 
-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}";
+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}";
 var styles$k = {"container":"styles-module_container__C99XV","button":"styles-module_button__pGYkF"};
-styleInject(css_248z$k);
+styleInject(css_248z$l);
 
 function ForwardButton({ onClick }) {
     function onClickButton(event) {
@@ -9573,9 +9573,9 @@ function Gap({ size }) {
     return (React__default["default"].createElement("div", { style: { height: size } }));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$j);
+styleInject(css_248z$k);
 
 function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, width = "100%", height = "100px", available = true, onInput }) {
     const [value, setValue] = React.useState(defaultValue);
@@ -9594,9 +9594,9 @@ function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoF
                 React__default["default"].createElement("span", { className: styles$j.label_text }, title)))));
 }
 
-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}";
+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}";
 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-"};
-styleInject(css_248z$i);
+styleInject(css_248z$j);
 
 function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true }) {
     const [value, setValue] = React.useState("");
@@ -9607,9 +9607,9 @@ function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse
                 React__default["default"].createElement("span", { className: styles$i.label_text }, title)))));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$h);
+styleInject(css_248z$i);
 
 function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "" }, title = { firstName: "Vorname", lastName: "Nachname" }, defaultValue = { firstName: "", lastName: "" }, onInput = (name, event) => { }, onInputFirstName = (event) => { }, onInputLastName = (event) => { }, }) {
     const [firstName, setFirstName] = React.useState(defaultValue.firstName ? defaultValue.firstName : "");
@@ -9635,9 +9635,9 @@ function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "
                 React__default["default"].createElement("span", { className: styles$h.label_text }, title.lastName)))));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$g);
+styleInject(css_248z$h);
 
 function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "number", width = "100%", available = true, onInput = (event) => { } }) {
     const [value, setValue] = React.useState(defaultValue);
@@ -9655,9 +9655,9 @@ function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFoc
                 React__default["default"].createElement("span", { className: styles$g.label_text }, title)))));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$f);
+styleInject(css_248z$g);
 
 function InputPassword({ id, placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", minLength = 8, autoComplete, forgotLink = false }) {
     const [value, setValue] = React.useState("");
@@ -9674,9 +9674,9 @@ function InputPassword({ id, placeholder = "", title = "Passwort", name, isVisib
                 React__default["default"].createElement("div", { className: styles$f.forgot_container }, forgotLink))));
 }
 
-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}";
+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}";
 var styles$e = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
-styleInject(css_248z$e);
+styleInject(css_248z$f);
 
 function InputPin({ name, length, onFinished = () => { } }) {
     const [state, setState] = React.useState({});
@@ -9753,9 +9753,9 @@ function InputPin({ name, length, onFinished = () => { } }) {
         React__default["default"].createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$d);
+styleInject(css_248z$e);
 
 function InputText({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, autoComplete = "off", available = true, onInput = (event) => { } }) {
     const [value, setValue] = React.useState(defaultValue);
@@ -9774,9 +9774,9 @@ function InputText({ id, title, name, placeholder = "", defaultValue = "", autoF
                 React__default["default"].createElement("span", { className: styles$d.label_text }, title)))));
 }
 
-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}";
+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}";
 var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
-styleInject(css_248z$c);
+styleInject(css_248z$d);
 
 function OptionField({ id, headline, description, iconName }) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -9787,9 +9787,9 @@ function OptionField({ id, headline, description, iconName }) {
                 React__default["default"].createElement("p", null, description)))));
 }
 
-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}";
+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}";
 var styles$b = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
-styleInject(css_248z$b);
+styleInject(css_248z$c);
 
 function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }) {
     function onClickDiv(event) {
@@ -9802,6 +9802,9 @@ function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }
         React__default["default"].createElement("h3", null, title)));
 }
 
+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}";
+styleInject(css_248z$b);
+
 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}";
 var styles$a = {"container":"styles-module_container__u4q5n","background":"styles-module_background__jt-ry","progress":"styles-module_progress__Zj-B7"};
 styleInject(css_248z$a);
@@ -10398,6 +10401,57 @@ function UsageCard({ title, subtitle, ratio = 0, loading }) {
                 ], lineWidth: 15, totalValue: 1 }))));
 }
 
+function useDimensions() {
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    const [windowSize, setWindowSize] = React.useState({
+        width: 0,
+        height: 0,
+    });
+    React.useEffect(() => {
+        // only execute all the code below in client side
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, []); // Empty array ensures that effect is only run on mount
+    return windowSize;
+}
+
+function useOrientation() {
+    const size = useDimensions();
+    return (size.width > size.height) ? "landscape" : "portrait";
+}
+
+function useScroll() {
+    const [scroll, setScroll] = React.useState({
+        xScroll: 0,
+        yScroll: 0,
+    });
+    const onScroll = React.useCallback(() => {
+        const { scrollY, scrollX } = window;
+        setScroll({
+            yScroll: scrollY,
+            xScroll: scrollX,
+        });
+    }, []);
+    React.useEffect(() => {
+        window.addEventListener("scroll", onScroll, { passive: true });
+        return () => window.removeEventListener("scroll", onScroll);
+    }, [onScroll]);
+    return scroll;
+}
+
 exports.Accordeon = Accordeon;
 exports.AuthButton = AuthButton;
 exports.Button = Button;
@@ -10436,3 +10490,6 @@ exports.Table = Table;
 exports.Tabs = Tabs;
 exports.TextWithIcon = TextWithIcon;
 exports.UsageCard = UsageCard;
+exports.useDimensions = useDimensions;
+exports.useOrientation = useOrientation;
+exports.useScroll = useScroll;

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export * from './components/InputPin';
 export * from './components/InputText';
 export * from './components/OptionField';
 export * from './components/OptionFieldHorizontal';
+export * from './components/Popover';
 export * from './components/ProgressBar';
 export * from './components/RadioButtons';
 export * from './components/RedirectButton';
@@ -32,6 +33,9 @@ export * from './components/Table';
 export * from './components/Tabs';
 export * from './components/TextWithIcon';
 export * from './components/UsageCard';
+export * from './hooks/useDimensions';
+export * from './hooks/useOrientation';
+export * from './hooks/useScroll';
 export * from './types/marketing/About';
 export * from './types/marketing/BenefitForIndividual';
 export * from './types/marketing/BenefitForSchool';

package/dist/index.esm.js

@@ -9369,9 +9369,9 @@ function styleInject(css, ref) {
   }
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$v);
+styleInject(css_248z$w);
 
 function Accordeon({ title, children }) {
     const [isActive, setActive] = useState(false);
@@ -9382,9 +9382,9 @@ function Accordeon({ title, children }) {
         React__default.createElement("div", { className: styles$v.content }, children)));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$u);
+styleInject(css_248z$v);
 
 function AuthButton({ id, text, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, style, onClick }) {
     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 },
@@ -9393,9 +9393,9 @@ function AuthButton({ id, text, type = "submit", theme = "primary", iconName = "
             React__default.createElement(SvgIcon, { iconName: iconName }))));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$t);
+styleInject(css_248z$u);
 
 function Button({ id, text, iconName, iconFill = "white", type = "blue", onClick = () => { } }) {
     function onClickButton(event) {
@@ -9409,9 +9409,9 @@ function Button({ id, text, iconName, iconFill = "white", type = "blue", onClick
             iconName && React__default.createElement(SvgIcon, { iconName: iconName }))));
 }
 
-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}";
+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}";
 var styles$s = {"card":"styles-module_card__bOd85"};
-styleInject(css_248z$s);
+styleInject(css_248z$t);
 
 function CardButton({ id, title, iconName, onClick, }) {
     function onClickCard(event) {
@@ -9424,9 +9424,9 @@ function CardButton({ id, title, iconName, onClick, }) {
         React__default.createElement("h2", null, title)));
 }
 
-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}";
+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}";
 var styles$r = {"container":"styles-module_container__gCCnD"};
-styleInject(css_248z$r);
+styleInject(css_248z$s);
 
 function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children }) {
     return (React__default.createElement("div", { className: styles$r.container },
@@ -9435,9 +9435,9 @@ function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => {
         React__default.createElement(SvgIcon, { iconName: "done", size: "21px" })));
 }
 
-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}";
+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}";
 var styles$q = {"container":"styles-module_container__OqDNA","item":"styles-module_item__1SMCI","selected":"styles-module_selected__AXIA-"};
-styleInject(css_248z$q);
+styleInject(css_248z$r);
 
 class ChooseRoleItem {
     title;
@@ -9458,9 +9458,9 @@ function ChooseRole({ roles, defaultSelected, readOnly = false, onChange }) {
     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))));
 }
 
-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}";
+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}";
 var styles$p = {"container":"styles-module_container__yV6C8"};
-styleInject(css_248z$p);
+styleInject(css_248z$q);
 
 function CopyCode({ code, style, onCopy = () => { } }) {
     function onClick() {
@@ -9474,9 +9474,9 @@ function CopyCode({ code, style, onCopy = () => { } }) {
         React__default.createElement("input", { type: "hidden", name: "code", value: code })));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$o);
+styleInject(css_248z$p);
 
 function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }) {
     function onClick(event) {
@@ -9495,9 +9495,9 @@ function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }
             React__default.createElement("button", { className: styles$o.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
 }
 
-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}";
+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}";
 var styles$n = {"card":"styles-module_card__hT9fw"};
-styleInject(css_248z$n);
+styleInject(css_248z$o);
 
 function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorhanden.", iconName = "manage_search", button, onClick }) {
     return (React__default.createElement("div", { className: styles$n.card },
@@ -9507,9 +9507,9 @@ function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorh
         button && React__default.createElement(Button, { text: button, onClick: onClick, type: "lightBlue" })));
 }
 
-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}";
+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}";
 var styles$m = {"container":"styles-module_container__HOoBj"};
-styleInject(css_248z$m);
+styleInject(css_248z$n);
 
 function FormButton({ id, text, style = {}, iconName = "", type = "submit", background = "#0075FF", onClick = () => { } }) {
     return (React__default.createElement("div", { className: styles$m.container, style: style },
@@ -9518,9 +9518,9 @@ function FormButton({ id, text, style = {}, iconName = "", type = "submit", back
             iconName && React__default.createElement(SvgIcon, { iconName: iconName, color: "white" }))));
 }
 
-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}";
+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}";
 var styles$l = {"container":"styles-module_container__9wYEm"};
-styleInject(css_248z$l);
+styleInject(css_248z$m);
 
 function FormText({ title, value, style }) {
     return (React__default.createElement("div", { className: styles$l.container, style: style },
@@ -9528,9 +9528,9 @@ function FormText({ title, value, style }) {
         React__default.createElement("h3", null, value)));
 }
 
-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}";
+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}";
 var styles$k = {"container":"styles-module_container__C99XV","button":"styles-module_button__pGYkF"};
-styleInject(css_248z$k);
+styleInject(css_248z$l);
 
 function ForwardButton({ onClick }) {
     function onClickButton(event) {
@@ -9547,9 +9547,9 @@ function Gap({ size }) {
     return (React__default.createElement("div", { style: { height: size } }));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$j);
+styleInject(css_248z$k);
 
 function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, width = "100%", height = "100px", available = true, onInput }) {
     const [value, setValue] = useState(defaultValue);
@@ -9568,9 +9568,9 @@ function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoF
                 React__default.createElement("span", { className: styles$j.label_text }, title)))));
 }
 
-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}";
+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}";
 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-"};
-styleInject(css_248z$i);
+styleInject(css_248z$j);
 
 function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true }) {
     const [value, setValue] = useState("");
@@ -9581,9 +9581,9 @@ function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse
                 React__default.createElement("span", { className: styles$i.label_text }, title)))));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$h);
+styleInject(css_248z$i);
 
 function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "" }, title = { firstName: "Vorname", lastName: "Nachname" }, defaultValue = { firstName: "", lastName: "" }, onInput = (name, event) => { }, onInputFirstName = (event) => { }, onInputLastName = (event) => { }, }) {
     const [firstName, setFirstName] = useState(defaultValue.firstName ? defaultValue.firstName : "");
@@ -9609,9 +9609,9 @@ function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "
                 React__default.createElement("span", { className: styles$h.label_text }, title.lastName)))));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$g);
+styleInject(css_248z$h);
 
 function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "number", width = "100%", available = true, onInput = (event) => { } }) {
     const [value, setValue] = useState(defaultValue);
@@ -9629,9 +9629,9 @@ function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFoc
                 React__default.createElement("span", { className: styles$g.label_text }, title)))));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$f);
+styleInject(css_248z$g);
 
 function InputPassword({ id, placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", minLength = 8, autoComplete, forgotLink = false }) {
     const [value, setValue] = useState("");
@@ -9648,9 +9648,9 @@ function InputPassword({ id, placeholder = "", title = "Passwort", name, isVisib
                 React__default.createElement("div", { className: styles$f.forgot_container }, forgotLink))));
 }
 
-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}";
+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}";
 var styles$e = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
-styleInject(css_248z$e);
+styleInject(css_248z$f);
 
 function InputPin({ name, length, onFinished = () => { } }) {
     const [state, setState] = useState({});
@@ -9727,9 +9727,9 @@ function InputPin({ name, length, onFinished = () => { } }) {
         React__default.createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
 }
 
-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}";
+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}";
 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"};
-styleInject(css_248z$d);
+styleInject(css_248z$e);
 
 function InputText({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, autoComplete = "off", available = true, onInput = (event) => { } }) {
     const [value, setValue] = useState(defaultValue);
@@ -9748,9 +9748,9 @@ function InputText({ id, title, name, placeholder = "", defaultValue = "", autoF
                 React__default.createElement("span", { className: styles$d.label_text }, title)))));
 }
 
-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}";
+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}";
 var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
-styleInject(css_248z$c);
+styleInject(css_248z$d);
 
 function OptionField({ id, headline, description, iconName }) {
     return (React__default.createElement(React__default.Fragment, null,
@@ -9761,9 +9761,9 @@ function OptionField({ id, headline, description, iconName }) {
                 React__default.createElement("p", null, description)))));
 }
 
-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}";
+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}";
 var styles$b = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
-styleInject(css_248z$b);
+styleInject(css_248z$c);
 
 function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }) {
     function onClickDiv(event) {
@@ -9776,6 +9776,9 @@ function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }
         React__default.createElement("h3", null, title)));
 }
 
+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}";
+styleInject(css_248z$b);
+
 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}";
 var styles$a = {"container":"styles-module_container__u4q5n","background":"styles-module_background__jt-ry","progress":"styles-module_progress__Zj-B7"};
 styleInject(css_248z$a);
@@ -10372,4 +10375,55 @@ function UsageCard({ title, subtitle, ratio = 0, loading }) {
                 ], lineWidth: 15, totalValue: 1 }))));
 }
 
-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 };
+function useDimensions() {
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    const [windowSize, setWindowSize] = useState({
+        width: 0,
+        height: 0,
+    });
+    useEffect(() => {
+        // only execute all the code below in client side
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, []); // Empty array ensures that effect is only run on mount
+    return windowSize;
+}
+
+function useOrientation() {
+    const size = useDimensions();
+    return (size.width > size.height) ? "landscape" : "portrait";
+}
+
+function useScroll() {
+    const [scroll, setScroll] = useState({
+        xScroll: 0,
+        yScroll: 0,
+    });
+    const onScroll = useCallback(() => {
+        const { scrollY, scrollX } = window;
+        setScroll({
+            yScroll: scrollY,
+            xScroll: scrollX,
+        });
+    }, []);
+    useEffect(() => {
+        window.addEventListener("scroll", onScroll, { passive: true });
+        return () => window.removeEventListener("scroll", onScroll);
+    }, [onScroll]);
+    return scroll;
+}
+
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "math-main-components",
-    "version": "0.0.192",
+    "version": "0.0.194",
     "author": "Emilian Scheel",
     "files": [
         "dist/**/*"