math-main-components 0.0.132 → 0.0.135

package/README.md

@@ -5,6 +5,19 @@ Component Library for math-main-app
 - reusable ui components
 - math components
 
+### Run Locally
+
+Install [`yalc`](https://github.com/wclr/yalc) globally by running `yarn global add yalc`
+
+In order to make the workflow more efficient, you can link the local package to the main app.
+1. Go to `math-main-components` and run `yalc publish`. (only need to do this once)
+2. Then go to `math-main-components` and run `yarn dev`.
+3. Then go to `math-main-app` and run `yalc link math-main-components`.
+
+No need to change anything in the `package.json` file.
+
+In order to unlink the packages, run `yarn retreat math-main-components` in app directory.
+
 ## Notes
 - Do not use any of next.js features like next/link
 

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,8 @@
+import React, { MouseEvent } from 'react';
+export declare function Button({ text, iconName, iconFill, type, onClick }: {
+    text?: string;
+    iconName?: string;
+    iconFill?: string;
+    type?: string;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}): React.JSX.Element;

package/dist/components/Button/index.d.ts

@@ -0,0 +1 @@
+export { Button } from './Button';

package/dist/components/EmptyCard/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare function EmptyCard({ title, subtitle, iconName, button, onClick }: {
+    title?: string;
+    subtitle?: string;
+    iconName?: string;
+    button?: string;
+    onClick?: () => void;
+}): React.JSX.Element;

package/dist/components/Table/Table.d.ts

@@ -13,7 +13,7 @@ export type TableItemAction<DataType> = {
     onClick: (event: MouseEvent<HTMLDivElement>, item: TableItem<DataType>, index: number) => void;
     type: TableActionType;
 };
-export declare function Table<DataType>({ items, title, actions, moreActions, selected, style, marginTop }: {
+export declare function Table<DataType>({ items, title, actions, moreActions, selected, style, marginTop, emptyTitle, emptySubtitle, emptyIconName }: {
     items: TableItem<DataType>[];
     title: string;
     selected?: number;
@@ -21,4 +21,7 @@ export declare function Table<DataType>({ items, title, actions, moreActions, se
     actions?: TableItemAction<DataType>[];
     moreActions?: ((data: DataType, index: number) => ReactNode)[];
     marginTop?: number;
+    emptyTitle?: string;
+    emptySubtitle?: string;
+    emptyIconName?: string;
 }): React.JSX.Element;

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Accordeon';
 export * from './AuthButton';
+export * from './Button';
 export * from './CardButton';
 export * from './Checkbox';
 export * from './ChooseRole';
@@ -17,7 +18,6 @@ export * from './InputPin';
 export * from './InputText';
 export * from './OptionField';
 export * from './OptionFieldHorizontal';
-export * from './PrimaryButton';
 export * from './ProgressBar';
 export * from './RadioButtons';
 export * from './RedirectButton';

package/dist/index.cjs.js

@@ -40,30 +40,46 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$u = ".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$u = {"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$u);
+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 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);
 
 function Accordeon({ title, children }) {
     const [isActive, setActive] = React.useState(false);
-    return (React__default["default"].createElement("div", { className: [styles$u.container, isActive ? styles$u.active : styles$u.not_active].join(" ") },
-        React__default["default"].createElement("div", { className: styles$u.head, onClick: () => setActive(!isActive) },
+    return (React__default["default"].createElement("div", { className: [styles$v.container, isActive ? styles$v.active : styles$v.not_active].join(" ") },
+        React__default["default"].createElement("div", { className: styles$v.head, onClick: () => setActive(!isActive) },
             React__default["default"].createElement(SvgIcon, { iconName: "expand_more" }),
             React__default["default"].createElement("h3", null, title)),
-        React__default["default"].createElement("div", { className: styles$u.content }, children)));
+        React__default["default"].createElement("div", { className: styles$v.content }, children)));
 }
 
-var css_248z$t = ".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$t = {"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$t);
+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 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);
 
 function AuthButton({ text, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, onClick }) {
-    return (React__default["default"].createElement("div", { className: [styles$t.container, isVisible ? styles$t.visible : styles$t.hidden, ["arrow_forward"].includes(iconName) ? styles$t.rotate : null].join(" ") },
-        React__default["default"].createElement("button", { type: type, className: `${styles$t.button} ${styles$t[theme]}`, onClick: 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(" ") },
+        React__default["default"].createElement("button", { type: type, className: `${styles$u.button} ${styles$u[theme]}`, onClick: onClick },
             text,
             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  background: var(--primary-1);\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  color: white;\n  align-items: center;\n  border: none;\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}\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}";
+var styles$t = {"container":"styles-module_container__TP0rp","button":"styles-module_button__Sh-fr","onlyIcon":"styles-module_onlyIcon__bNVnI","red":"styles-module_red__EhImH","grey":"styles-module_grey__kAVD1"};
+styleInject(css_248z$t);
+
+function Button({ text, iconName, iconFill = "white", type = "blue", onClick = () => { } }) {
+    function onClickButton(event) {
+        event.preventDefault();
+        if (onClick)
+            onClick(event);
+    }
+    return (React__default["default"].createElement("div", { className: styles$t.container },
+        React__default["default"].createElement("button", { className: [styles$t.button, styles$t[type], (text && !iconName) ? styles$t.onlyText : "", (!text && iconName) ? styles$t.onlyIcon : ""].join(" "), onClick: onClickButton },
+            text,
+            iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName, fill: iconFill }))));
+}
+
 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 styles$s = {"card":"styles-module_card__bOd85"};
 styleInject(css_248z$s);
@@ -419,36 +435,20 @@ function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }
         React__default["default"].createElement("h3", null, title)));
 }
 
-var css_248z$b = ".styles-module_container__oNbrP {\n  max-width: 100%;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65 {\n  padding: 10px 18px;\n  background: var(--primary-1);\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  color: white;\n  align-items: center;\n  border: none;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_onlyIcon__-Niv0 {\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  align-items: center;\n  justify-content: center;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_onlyIcon__-Niv0 span {\n  font-size: 22px !important;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_red__CHF3e {\n  background: var(--red-1);\n  color: white;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_grey__hdqot {\n  background: var(--background-1);\n  color: var(--foreground-2);\n}";
-var styles$b = {"container":"styles-module_container__oNbrP","button":"styles-module_button__UBk65","onlyIcon":"styles-module_onlyIcon__-Niv0","red":"styles-module_red__CHF3e","grey":"styles-module_grey__hdqot"};
+var css_248z$b = ".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$b = {"container":"styles-module_container__u4q5n","background":"styles-module_background__jt-ry","progress":"styles-module_progress__Zj-B7"};
 styleInject(css_248z$b);
 
-function PrimaryButton({ text, iconName, iconFill = "white", type = "blue", onClick = () => { } }) {
-    function onClickButton(event) {
-        event.preventDefault();
-        if (onClick)
-            onClick(event);
-    }
-    return (React__default["default"].createElement("div", { className: styles$b.container },
-        React__default["default"].createElement("button", { className: [styles$b.button, styles$b[type], (text && !iconName) ? styles$b.onlyText : "", (!text && iconName) ? styles$b.onlyIcon : ""].join(" "), onClick: onClickButton },
-            text,
-            iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName, fill: iconFill }))));
-}
-
-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);
-
 function ProgressBar({ length, progress }) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$a.container },
-            React__default["default"].createElement("div", { className: styles$a.background },
-                React__default["default"].createElement("div", { className: styles$a.progress, style: { width: `${progress / length * 100}%` } })))));
+        React__default["default"].createElement("div", { className: styles$b.container },
+            React__default["default"].createElement("div", { className: styles$b.background },
+                React__default["default"].createElement("div", { className: styles$b.progress, style: { width: `${progress / length * 100}%` } })))));
 }
 
-var css_248z$9 = ".styles-module_container__Grkzw {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  color: var(--foreground-3);\n  margin-bottom: 20px;\n}\n.styles-module_container__Grkzw [type=radio] {\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__Grkzw [type=radio] + label {\n  position: absolute;\n  cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n  width: 15px;\n  height: 15px;\n  border-radius: 20px;\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__Grkzw [type=radio]:checked + label::before {\n  background-color: var(--primary-2);\n  border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--background-4);\n}";
-var styles$9 = {"container":"styles-module_container__Grkzw"};
-styleInject(css_248z$9);
+var css_248z$a = ".styles-module_container__Grkzw {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  color: var(--foreground-3);\n  margin-bottom: 20px;\n}\n.styles-module_container__Grkzw [type=radio] {\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__Grkzw [type=radio] + label {\n  position: absolute;\n  cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n  width: 15px;\n  height: 15px;\n  border-radius: 20px;\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__Grkzw [type=radio]:checked + label::before {\n  background-color: var(--primary-2);\n  border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--background-4);\n}";
+var styles$a = {"container":"styles-module_container__Grkzw"};
+styleInject(css_248z$a);
 
 class RadioOption {
     text;
@@ -465,7 +465,7 @@ function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
         if (onClick)
             onClick(event);
     }
-    return (React__default["default"].createElement("div", { className: styles$9.container, style: { width: width } }, options.map((option) => React__default["default"].createElement("div", { className: styles$9.option, key: option.name },
+    return (React__default["default"].createElement("div", { className: styles$a.container, style: { width: width } }, options.map((option) => React__default["default"].createElement("div", { className: styles$a.option, key: option.name },
         selected && selected == option.name ?
             React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
             :
@@ -473,9 +473,9 @@ function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
         React__default["default"].createElement("label", { htmlFor: option.name }, option.text)))));
 }
 
-var css_248z$8 = ".styles-module_container__RhsQe {\n  margin-right: 8px;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 {\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__RhsQe .styles-module_button__HuX-0 span {\n  color: var(--foreground-1);\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0:hover {\n  background: var(--background-1);\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0 {\n  flex-direction: row;\n  gap: 5px;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0:hover {\n  background: none;\n}";
-var styles$8 = {"container":"styles-module_container__RhsQe","button":"styles-module_button__HuX-0","middle":"styles-module_middle__xg7RF"};
-styleInject(css_248z$8);
+var css_248z$9 = ".styles-module_container__RhsQe {\n  margin-right: 8px;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 {\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__RhsQe .styles-module_button__HuX-0 span {\n  color: var(--foreground-1);\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0:hover {\n  background: var(--background-1);\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0 {\n  flex-direction: row;\n  gap: 5px;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0:hover {\n  background: none;\n}";
+var styles$9 = {"container":"styles-module_container__RhsQe","button":"styles-module_button__HuX-0","middle":"styles-module_middle__xg7RF"};
+styleInject(css_248z$9);
 
 function RedirectButton({ type = "forward", onClick }) {
     function onClickButton(event) {
@@ -490,16 +490,16 @@ function RedirectButton({ type = "forward", onClick }) {
             case "middle": return "arrow_back";
         }
     };
-    return (React__default["default"].createElement("div", { className: [styles$8.container, styles$8[type]].join(" ") },
-        React__default["default"].createElement("button", { onClick: onClickButton, className: styles$8.button },
+    return (React__default["default"].createElement("div", { className: [styles$9.container, styles$9[type]].join(" ") },
+        React__default["default"].createElement("button", { onClick: onClickButton, className: styles$9.button },
             React__default["default"].createElement(SvgIcon, { iconName: getIcon() }),
             ["middle"].includes(type) &&
                 React__default["default"].createElement("span", null, "Zur\u00FCck"))));
 }
 
-var css_248z$7 = ".styles-module_container__VreeH {\n  margin-bottom: 20px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J,\n.styles-module_container__VreeH .styles-module_show_all__HKn-s {\n  padding: 10px 18px;\n  background: var(--background-1);\n  border-radius: 20px;\n  display: flex;\n  flex-direction: row;\n  gap: 5px;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  color: var(--foreground-2);\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:hover {\n  filter: brightness(0.95);\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD {\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD span {\n  color: var(--primary-1);\n}";
-var styles$7 = {"container":"styles-module_container__VreeH","chip":"styles-module_chip__EvZ4J","show_all":"styles-module_show_all__HKn-s","selected":"styles-module_selected__sArTD"};
-styleInject(css_248z$7);
+var css_248z$8 = ".styles-module_container__VreeH {\n  margin-bottom: 20px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J,\n.styles-module_container__VreeH .styles-module_show_all__HKn-s {\n  padding: 10px 18px;\n  background: var(--background-1);\n  border-radius: 20px;\n  display: flex;\n  flex-direction: row;\n  gap: 5px;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  color: var(--foreground-2);\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:hover {\n  filter: brightness(0.95);\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD {\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD span {\n  color: var(--primary-1);\n}";
+var styles$8 = {"container":"styles-module_container__VreeH","chip":"styles-module_chip__EvZ4J","show_all":"styles-module_show_all__HKn-s","selected":"styles-module_selected__sArTD"};
+styleInject(css_248z$8);
 
 class SearchChip {
     title;
@@ -520,19 +520,19 @@ function SearchChips({ items, onChange, chipsVisible = 9 }) {
         if (onChange)
             onChange(newChips);
     }
-    return (React__default["default"].createElement("div", { className: styles$7.container },
-        (showAll ? chips : chips.slice(0, chipsVisible)).map((item, index) => React__default["default"].createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$7.chip, item.selected ? styles$7.selected : styles$7.not_selected].join(" ") },
+    return (React__default["default"].createElement("div", { className: styles$8.container },
+        (showAll ? chips : chips.slice(0, chipsVisible)).map((item, index) => React__default["default"].createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$8.chip, item.selected ? styles$8.selected : styles$8.not_selected].join(" ") },
             React__default["default"].createElement(SvgIcon, { iconName: item.selected ? "close" : "filter_list", size: "20px" }),
             item.title)),
         chipsVisible < chips.length && (showAll ?
-            React__default["default"].createElement("div", { className: styles$7.show_all, onClick: () => setShowAll(false) }, "Weniger anzeigen")
+            React__default["default"].createElement("div", { className: styles$8.show_all, onClick: () => setShowAll(false) }, "Weniger anzeigen")
             :
-                React__default["default"].createElement("div", { className: styles$7.show_all, onClick: () => setShowAll(true) }, "Mehr anzeigen"))));
+                React__default["default"].createElement("div", { className: styles$8.show_all, onClick: () => setShowAll(true) }, "Mehr anzeigen"))));
 }
 
-var css_248z$6 = ".styles-module_container__k4Z26 {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  position: relative;\n}\n.styles-module_container__k4Z26 button {\n  background: var(--primary-2);\n  padding: 0px 18px;\n  border: none;\n  font-size: 14px;\n  border-radius: 10px;\n  cursor: pointer;\n  color: var(--primary-1);\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om {\n  display: none;\n  position: absolute;\n  top: 60px;\n  background: var(--background-1);\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n  width: 100%;\n  border-radius: 14px;\n  border: 1px solid var(--border-3);\n  z-index: 1000;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-:hover,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om:hover {\n  display: block;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n  padding: 16px 20px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li:not(:last-child),\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li:not(:last-child) {\n  border-bottom: 1px solid var(--border-3);\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X {\n  padding: 35px 0px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 15px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X h3,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X h3 {\n  margin: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p {\n  color: var(--foreground-3);\n  padding: 0px 30px;\n  line-height: 1.5;\n  text-align: center;\n  margin-bottom: 10px;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n  display: flex;\n  flex-direction: row;\n  padding: 10px 20px;\n  align-items: center;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li span {\n  flex: 1;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om button {\n  padding: 10px 16px;\n}\n\n.styles-module_input__wOJmG {\n  padding: 14px 20px;\n  font-size: 16px;\n  width: 300px;\n  border-radius: 12px;\n  border: 1.5px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  width: 100%;\n  background: var(--background-1);\n  color: var(--foreground-1);\n}\n.styles-module_input__wOJmG:focus, .styles-module_input__wOJmG: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_form__mWTCu.styles-module_focus__-6H1f + .styles-module_suggestions_container__pceQ-,\n.styles-module_form__mWTCu.styles-module_focus__-6H1f + .styles-module_results_container__OY4Om {\n  display: block;\n}\n\n/* animated text field */\n.styles-module_form__mWTCu {\n  position: relative;\n  width: 100%;\n}\n\n.styles-module_label__A41g9 {\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__NQHTC {\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__wOJmG.styles-module_with_title__rnN-t::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__wOJmG.styles-module_with_title__rnN-t:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__wOJmG:focus + .styles-module_label__A41g9 .styles-module_label_text__NQHTC,\n.styles-module_input__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\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__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n  color: var(--foreground-3);\n}";
-var styles$6 = {"container":"styles-module_container__k4Z26","suggestions_container":"styles-module_suggestions_container__pceQ-","results_container":"styles-module_results_container__OY4Om","error":"styles-module_error__2Ov4X","input":"styles-module_input__wOJmG","form":"styles-module_form__mWTCu","focus":"styles-module_focus__-6H1f","label":"styles-module_label__A41g9","label_text":"styles-module_label_text__NQHTC","with_title":"styles-module_with_title__rnN-t","valid":"styles-module_valid__AAK-6"};
-styleInject(css_248z$6);
+var css_248z$7 = ".styles-module_container__k4Z26 {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  position: relative;\n}\n.styles-module_container__k4Z26 button {\n  background: var(--primary-2);\n  padding: 0px 18px;\n  border: none;\n  font-size: 14px;\n  border-radius: 10px;\n  cursor: pointer;\n  color: var(--primary-1);\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om {\n  display: none;\n  position: absolute;\n  top: 60px;\n  background: var(--background-1);\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n  width: 100%;\n  border-radius: 14px;\n  border: 1px solid var(--border-3);\n  z-index: 1000;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-:hover,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om:hover {\n  display: block;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n  padding: 16px 20px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li:not(:last-child),\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li:not(:last-child) {\n  border-bottom: 1px solid var(--border-3);\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X {\n  padding: 35px 0px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 15px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X h3,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X h3 {\n  margin: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p {\n  color: var(--foreground-3);\n  padding: 0px 30px;\n  line-height: 1.5;\n  text-align: center;\n  margin-bottom: 10px;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n  display: flex;\n  flex-direction: row;\n  padding: 10px 20px;\n  align-items: center;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li span {\n  flex: 1;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om button {\n  padding: 10px 16px;\n}\n\n.styles-module_input__wOJmG {\n  padding: 14px 20px;\n  font-size: 16px;\n  width: 300px;\n  border-radius: 12px;\n  border: 1.5px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  width: 100%;\n  background: var(--background-1);\n  color: var(--foreground-1);\n}\n.styles-module_input__wOJmG:focus, .styles-module_input__wOJmG: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_form__mWTCu.styles-module_focus__-6H1f + .styles-module_suggestions_container__pceQ-,\n.styles-module_form__mWTCu.styles-module_focus__-6H1f + .styles-module_results_container__OY4Om {\n  display: block;\n}\n\n/* animated text field */\n.styles-module_form__mWTCu {\n  position: relative;\n  width: 100%;\n}\n\n.styles-module_label__A41g9 {\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__NQHTC {\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__wOJmG.styles-module_with_title__rnN-t::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__wOJmG.styles-module_with_title__rnN-t:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__wOJmG:focus + .styles-module_label__A41g9 .styles-module_label_text__NQHTC,\n.styles-module_input__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\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__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n  color: var(--foreground-3);\n}";
+var styles$7 = {"container":"styles-module_container__k4Z26","suggestions_container":"styles-module_suggestions_container__pceQ-","results_container":"styles-module_results_container__OY4Om","error":"styles-module_error__2Ov4X","input":"styles-module_input__wOJmG","form":"styles-module_form__mWTCu","focus":"styles-module_focus__-6H1f","label":"styles-module_label__A41g9","label_text":"styles-module_label_text__NQHTC","with_title":"styles-module_with_title__rnN-t","valid":"styles-module_valid__AAK-6"};
+styleInject(css_248z$7);
 
 function Searchbar({ placeholder, title = "Suchen", showNoResults = false, errorTitle = "Keine Ergebnisse gefunden", errorMessage = "", errorButton = "", helpTitle = "", helpMessage = "", marginBottom = 25, marginTop = 30, errorAction = () => { }, onInput = () => { }, onClickResult = () => { }, withButton = false, buttonText = "Suchen", suggestions = [], autoFocus = false, results = [] }) {
     const [value, setValue] = React.useState("");
@@ -561,34 +561,34 @@ function Searchbar({ placeholder, title = "Suchen", showNoResults = false, error
             element.focus();
     }, [autoFocus]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$6.container, style: { marginTop: marginTop, marginBottom: marginBottom } },
-            React__default["default"].createElement("div", { className: `${styles$6.form} ${inputFocused ? styles$6.focus : styles$6.not_focused}` },
-                React__default["default"].createElement("input", { onFocus: () => setFocused(true), onBlur: () => setFocused(false), className: `${styles$6.input} ${title != undefined ? styles$6.with_title : styles$6.without_title} ${value.length > 0 ? styles$6.valid : styles$6.not_valid}`, placeholder: placeholder, type: "search", ref: inputElement, onInput: onInputChanged }),
-                React__default["default"].createElement("label", { htmlFor: "text", className: styles$6.label },
-                    React__default["default"].createElement("span", { className: styles$6.label_text }, title))),
+        React__default["default"].createElement("div", { className: styles$7.container, style: { marginTop: marginTop, marginBottom: marginBottom } },
+            React__default["default"].createElement("div", { className: `${styles$7.form} ${inputFocused ? styles$7.focus : styles$7.not_focused}` },
+                React__default["default"].createElement("input", { onFocus: () => setFocused(true), onBlur: () => setFocused(false), className: `${styles$7.input} ${title != undefined ? styles$7.with_title : styles$7.without_title} ${value.length > 0 ? styles$7.valid : styles$7.not_valid}`, placeholder: placeholder, type: "search", ref: inputElement, onInput: onInputChanged }),
+                React__default["default"].createElement("label", { htmlFor: "text", className: styles$7.label },
+                    React__default["default"].createElement("span", { className: styles$7.label_text }, title))),
             withButton && React__default["default"].createElement("button", { type: "button" }, buttonText),
-            suggestions.length > 0 && React__default["default"].createElement("div", { className: styles$6.suggestions_container },
+            suggestions.length > 0 && React__default["default"].createElement("div", { className: styles$7.suggestions_container },
                 React__default["default"].createElement("ul", null, suggestions.map((suggestion, index) => React__default["default"].createElement("li", { key: index }, suggestion)))),
-            searchResults.length > 0 && React__default["default"].createElement("div", { className: styles$6.results_container },
+            searchResults.length > 0 && React__default["default"].createElement("div", { className: styles$7.results_container },
                 React__default["default"].createElement("ul", null, searchResults.map((result, index) => React__default["default"].createElement("li", { key: index, onClick: (event) => onClickResult(event, result) },
                     React__default["default"].createElement("span", null, result.title),
                     React__default["default"].createElement("button", { type: "button" }, buttonText))))),
-            searchResults.length == 0 && showNoResults && value.length > 0 && React__default["default"].createElement("div", { className: styles$6.results_container },
-                React__default["default"].createElement("div", { className: styles$6.error },
+            searchResults.length == 0 && showNoResults && value.length > 0 && React__default["default"].createElement("div", { className: styles$7.results_container },
+                React__default["default"].createElement("div", { className: styles$7.error },
                     React__default["default"].createElement(SvgIcon, { iconName: "error" }),
                     React__default["default"].createElement("h3", null, errorTitle),
                     React__default["default"].createElement("p", null, errorMessage),
                     errorButton.length > 0 && React__default["default"].createElement("button", { type: "button", onClick: errorAction }, errorButton))),
-            searchResults.length == 0 && showNoResults && value.length == 0 && React__default["default"].createElement("div", { className: styles$6.results_container },
-                React__default["default"].createElement("div", { className: styles$6.error },
+            searchResults.length == 0 && showNoResults && value.length == 0 && React__default["default"].createElement("div", { className: styles$7.results_container },
+                React__default["default"].createElement("div", { className: styles$7.error },
                     React__default["default"].createElement(SvgIcon, { iconName: "lightbulb" }),
                     React__default["default"].createElement("h3", null, helpTitle),
                     React__default["default"].createElement("p", null, helpMessage))))));
 }
 
-var css_248z$5 = "";
-var styles$5 = {};
-styleInject(css_248z$5);
+var css_248z$6 = "";
+var styles$6 = {};
+styleInject(css_248z$6);
 
 class SliderCard {
     title;
@@ -600,44 +600,60 @@ class SliderCard {
 }
 function Slider({ cards }) {
     const [selected, setSelected] = React.useState(0);
-    return (React__default["default"].createElement("div", { className: styles$5.container }, cards.map((card, index) => React__default["default"].createElement("div", { key: index, className: [styles$5.card, selected == index ? styles$5.selected : styles$5.not_selected].join(" ") },
+    return (React__default["default"].createElement("div", { className: styles$6.container }, cards.map((card, index) => React__default["default"].createElement("div", { key: index, className: [styles$6.card, selected == index ? styles$6.selected : styles$6.not_selected].join(" ") },
         React__default["default"].createElement("h1", null, card.title),
         React__default["default"].createElement("p", null, card.description)))));
 }
 
-var css_248z$4 = ".styles-module_container__xRQNT {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 7px;\n  color: var(--foreground-3);\n}\n.styles-module_container__xRQNT svg {\n  fill: var(--foreground-3);\n}";
-var styles$4 = {"container":"styles-module_container__xRQNT"};
-styleInject(css_248z$4);
+var css_248z$5 = ".styles-module_container__xRQNT {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 7px;\n  color: var(--foreground-3);\n}\n.styles-module_container__xRQNT svg {\n  fill: var(--foreground-3);\n}";
+var styles$5 = {"container":"styles-module_container__xRQNT"};
+styleInject(css_248z$5);
 
 function StepBack({ iconName = "arrow_back", text = "Weitere Möglichkeiten" }) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$4.container },
+        React__default["default"].createElement("div", { className: styles$5.container },
             React__default["default"].createElement(SvgIcon, { iconName: iconName }),
             text)));
 }
 
+var css_248z$4 = ".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$4 = {"card":"styles-module_card__hT9fw"};
+styleInject(css_248z$4);
+
+function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorhanden.", iconName = "manage_search", button, onClick }) {
+    return (React__default["default"].createElement("div", { className: styles$4.card },
+        React__default["default"].createElement(SvgIcon, { size: "60px", iconName: iconName }),
+        React__default["default"].createElement("h1", null, title),
+        React__default["default"].createElement("p", null, subtitle),
+        button && React__default["default"].createElement(Button, { text: button, onClick: onClick })));
+}
+
 var css_248z$3 = ".styles-module_container__jNs7m h3 {\n  font-weight: 500;\n  font-size: 16px;\n  color: var(--foreground-1);\n}\n\n.styles-module_item_list__FxHkg.styles-module_has_children__Uu-8D {\n  border-top: 1px solid var(--border-1);\n  border-bottom: 1px solid var(--border-1);\n}\n\n.styles-module_item_list__FxHkg {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n  padding: 8px 14px;\n  border-radius: 25px;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok.styles-module_default__SexGH:hover {\n  background: var(--background-2);\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok.styles-module_red__KD3qJ:hover {\n  background: var(--red-2);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_selected__iOu39 {\n  color: var(--primary-1) !important;\n  border-color: var(--primary-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_selected__iOu39 .styles-module_icon__Jy87z {\n  color: var(--primary-1) !important;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV {\n  padding: 10px 20px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--foreground-1);\n  flex-wrap: wrap;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_moreText__-blXb {\n  flex: 1;\n  margin-bottom: 4px;\n  color: var(--primary-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_subtitle__DT5OF {\n  color: var(--foreground-3);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_icon__Jy87z {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: var(--foreground-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_blue__theVn .styles-module_title__nIwzs {\n  color: var(--blue-1) !important;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_blue__theVn .styles-module_icon__Jy87z {\n  color: var(--blue-1) !important;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(even) {\n  background: var(--background-2);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(odd) {\n  background: var(--background-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:not(:last-child) {\n  border-bottom: 1px solid var(--border-1);\n}";
 var styles$3 = {"container":"styles-module_container__jNs7m","item_list":"styles-module_item_list__FxHkg","has_children":"styles-module_has_children__Uu-8D","action":"styles-module_action__YYTok","default":"styles-module_default__SexGH","red":"styles-module_red__KD3qJ","item":"styles-module_item__sgyiV","selected":"styles-module_selected__iOu39","icon":"styles-module_icon__Jy87z","moreText":"styles-module_moreText__-blXb","subtitle":"styles-module_subtitle__DT5OF","blue":"styles-module_blue__theVn","title":"styles-module_title__nIwzs"};
 styleInject(css_248z$3);
 
-function Table({ items, title = "Titel", actions = [], moreActions, selected, style = "default", marginTop = 30 }) {
+function Table({ items, title = "Titel", actions = [], moreActions, selected, style = "default", marginTop = 30, emptyTitle = "Keine Daten", emptySubtitle = "Es sind keine Daten vorhanden.", emptyIconName = "manage_search" }) {
     return (React__default["default"].createElement("div", { className: styles$3.container, style: { marginTop: marginTop } },
-        React__default["default"].createElement("h3", null, title),
-        React__default["default"].createElement("ul", { className: `${styles$3.item_list} ${items.length > 0 ? styles$3.has_children : styles$3.no_children}` }, items.map((item, index) => React__default["default"].createElement("li", { key: index, className: [styles$3.item, styles$3[style], selected == index ? styles$3.selected : styles$3.not_selected].join(" ") },
-            React__default["default"].createElement("div", { className: styles$3.icon },
-                React__default["default"].createElement(SvgIcon, { iconName: item.iconName })),
-            React__default["default"].createElement("div", { className: styles$3.title }, item.title),
-            React__default["default"].createElement("div", { className: styles$3.moreText }, item.moreText),
-            React__default["default"].createElement("div", { className: styles$3.subtitle }, item.subtitle),
-            moreActions &&
-                moreActions.map((moreAction, index) => React__default["default"].createElement("div", { className: styles$3.more_action, key: item.title + index }, moreAction(item.data, index))),
-            actions.length > 0 && actions.map((action, idx) => React__default["default"].createElement("div", { key: idx, className: [
-                    styles$3.action,
-                    action.type === "red" && styles$3.red,
-                    action.type === "default" && styles$3.default,
-                ].join(" "), onClick: (event) => action.onClick(event, item, index) },
-                React__default["default"].createElement(SvgIcon, { iconName: action.iconName }),
-                action.title)))))));
+        items.length == 0 &&
+            React__default["default"].createElement(EmptyCard, { title: emptyTitle, subtitle: emptySubtitle, iconName: emptyIconName }),
+        items.length > 0 &&
+            React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("h3", null, title),
+                React__default["default"].createElement("ul", { className: `${styles$3.item_list} ${items.length > 0 ? styles$3.has_children : styles$3.no_children}` }, items.map((item, index) => React__default["default"].createElement("li", { key: index, className: [styles$3.item, styles$3[style], selected == index ? styles$3.selected : styles$3.not_selected].join(" ") },
+                    React__default["default"].createElement("div", { className: styles$3.icon },
+                        React__default["default"].createElement(SvgIcon, { iconName: item.iconName })),
+                    React__default["default"].createElement("div", { className: styles$3.title }, item.title),
+                    React__default["default"].createElement("div", { className: styles$3.moreText }, item.moreText),
+                    React__default["default"].createElement("div", { className: styles$3.subtitle }, item.subtitle),
+                    moreActions &&
+                        moreActions.map((moreAction, index) => React__default["default"].createElement("div", { className: styles$3.more_action, key: item.title + index }, moreAction(item.data, index))),
+                    actions.length > 0 && actions.map((action, idx) => React__default["default"].createElement("div", { key: idx, className: [
+                            styles$3.action,
+                            action.type === "red" && styles$3.red,
+                            action.type === "default" && styles$3.default,
+                        ].join(" "), onClick: (event) => action.onClick(event, item, index) },
+                        React__default["default"].createElement(SvgIcon, { iconName: action.iconName }),
+                        action.title))))))));
 }
 
 var css_248z$2 = ".styles-module_container__Kl-lB {\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n  margin-bottom: 20px;\n}\n\n.styles-module_tab__Veki- {\n  flex: 1;\n  border-radius: 42px;\n  border-bottom: 2px;\n  border-bottom-style: solid;\n  border-bottom-color: var(--border-1);\n  background: var(--background-1);\n  color: var(--foreground-1);\n  padding: 16px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n}\n.styles-module_tab__Veki-.styles-module_selected__geNE7 {\n  border-bottom-color: var(--primary-1);\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n\n@media (max-width: 750px) {\n  .styles-module_container__Kl-lB {\n    gap: 0px;\n  }\n  .styles-module_tab__Veki- {\n    border-radius: 0px;\n  }\n  .styles-module_tab__Veki-:first-child {\n    border-top-left-radius: 42px;\n    border-bottom-left-radius: 42px;\n  }\n  .styles-module_tab__Veki-:last-child {\n    border-top-right-radius: 42px;\n    border-bottom-right-radius: 42px;\n  }\n}";
@@ -1042,6 +1058,7 @@ exports.S3FileCategory = void 0;
 
 exports.Accordeon = Accordeon;
 exports.AuthButton = AuthButton;
+exports.Button = Button;
 exports.CardButton = CardButton;
 exports.Checkbox = Checkbox;
 exports.ChooseRole = ChooseRole;
@@ -1061,7 +1078,6 @@ exports.InputPin = InputPin;
 exports.InputText = InputText;
 exports.OptionField = OptionField;
 exports.OptionFieldHorizontal = OptionFieldHorizontal;
-exports.PrimaryButton = PrimaryButton;
 exports.ProgressBar = ProgressBar;
 exports.RadioButtons = RadioButtons;
 exports.RadioOption = RadioOption;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/Accordeon';
 export * from './components/AuthButton';
+export * from './components/Button';
 export * from './components/CardButton';
 export * from './components/Checkbox';
 export * from './components/ChooseRole';
@@ -18,7 +19,6 @@ export * from './components/InputPin';
 export * from './components/InputText';
 export * from './components/OptionField';
 export * from './components/OptionFieldHorizontal';
-export * from './components/PrimaryButton';
 export * from './components/ProgressBar';
 export * from './components/RadioButtons';
 export * from './components/RedirectButton';

package/dist/index.esm.js

@@ -32,30 +32,46 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$u = ".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$u = {"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$u);
+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 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);
 
 function Accordeon({ title, children }) {
     const [isActive, setActive] = useState(false);
-    return (React.createElement("div", { className: [styles$u.container, isActive ? styles$u.active : styles$u.not_active].join(" ") },
-        React.createElement("div", { className: styles$u.head, onClick: () => setActive(!isActive) },
+    return (React.createElement("div", { className: [styles$v.container, isActive ? styles$v.active : styles$v.not_active].join(" ") },
+        React.createElement("div", { className: styles$v.head, onClick: () => setActive(!isActive) },
             React.createElement(SvgIcon, { iconName: "expand_more" }),
             React.createElement("h3", null, title)),
-        React.createElement("div", { className: styles$u.content }, children)));
+        React.createElement("div", { className: styles$v.content }, children)));
 }
 
-var css_248z$t = ".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$t = {"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$t);
+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 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);
 
 function AuthButton({ text, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, onClick }) {
-    return (React.createElement("div", { className: [styles$t.container, isVisible ? styles$t.visible : styles$t.hidden, ["arrow_forward"].includes(iconName) ? styles$t.rotate : null].join(" ") },
-        React.createElement("button", { type: type, className: `${styles$t.button} ${styles$t[theme]}`, onClick: onClick },
+    return (React.createElement("div", { className: [styles$u.container, isVisible ? styles$u.visible : styles$u.hidden, ["arrow_forward"].includes(iconName) ? styles$u.rotate : null].join(" ") },
+        React.createElement("button", { type: type, className: `${styles$u.button} ${styles$u[theme]}`, onClick: onClick },
             text,
             React.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  background: var(--primary-1);\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  color: white;\n  align-items: center;\n  border: none;\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}\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}";
+var styles$t = {"container":"styles-module_container__TP0rp","button":"styles-module_button__Sh-fr","onlyIcon":"styles-module_onlyIcon__bNVnI","red":"styles-module_red__EhImH","grey":"styles-module_grey__kAVD1"};
+styleInject(css_248z$t);
+
+function Button({ text, iconName, iconFill = "white", type = "blue", onClick = () => { } }) {
+    function onClickButton(event) {
+        event.preventDefault();
+        if (onClick)
+            onClick(event);
+    }
+    return (React.createElement("div", { className: styles$t.container },
+        React.createElement("button", { className: [styles$t.button, styles$t[type], (text && !iconName) ? styles$t.onlyText : "", (!text && iconName) ? styles$t.onlyIcon : ""].join(" "), onClick: onClickButton },
+            text,
+            iconName && React.createElement(SvgIcon, { iconName: iconName, fill: iconFill }))));
+}
+
 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 styles$s = {"card":"styles-module_card__bOd85"};
 styleInject(css_248z$s);
@@ -411,36 +427,20 @@ function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }
         React.createElement("h3", null, title)));
 }
 
-var css_248z$b = ".styles-module_container__oNbrP {\n  max-width: 100%;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65 {\n  padding: 10px 18px;\n  background: var(--primary-1);\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  color: white;\n  align-items: center;\n  border: none;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_onlyIcon__-Niv0 {\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  align-items: center;\n  justify-content: center;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_onlyIcon__-Niv0 span {\n  font-size: 22px !important;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_red__CHF3e {\n  background: var(--red-1);\n  color: white;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_grey__hdqot {\n  background: var(--background-1);\n  color: var(--foreground-2);\n}";
-var styles$b = {"container":"styles-module_container__oNbrP","button":"styles-module_button__UBk65","onlyIcon":"styles-module_onlyIcon__-Niv0","red":"styles-module_red__CHF3e","grey":"styles-module_grey__hdqot"};
+var css_248z$b = ".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$b = {"container":"styles-module_container__u4q5n","background":"styles-module_background__jt-ry","progress":"styles-module_progress__Zj-B7"};
 styleInject(css_248z$b);
 
-function PrimaryButton({ text, iconName, iconFill = "white", type = "blue", onClick = () => { } }) {
-    function onClickButton(event) {
-        event.preventDefault();
-        if (onClick)
-            onClick(event);
-    }
-    return (React.createElement("div", { className: styles$b.container },
-        React.createElement("button", { className: [styles$b.button, styles$b[type], (text && !iconName) ? styles$b.onlyText : "", (!text && iconName) ? styles$b.onlyIcon : ""].join(" "), onClick: onClickButton },
-            text,
-            iconName && React.createElement(SvgIcon, { iconName: iconName, fill: iconFill }))));
-}
-
-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);
-
 function ProgressBar({ length, progress }) {
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles$a.container },
-            React.createElement("div", { className: styles$a.background },
-                React.createElement("div", { className: styles$a.progress, style: { width: `${progress / length * 100}%` } })))));
+        React.createElement("div", { className: styles$b.container },
+            React.createElement("div", { className: styles$b.background },
+                React.createElement("div", { className: styles$b.progress, style: { width: `${progress / length * 100}%` } })))));
 }
 
-var css_248z$9 = ".styles-module_container__Grkzw {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  color: var(--foreground-3);\n  margin-bottom: 20px;\n}\n.styles-module_container__Grkzw [type=radio] {\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__Grkzw [type=radio] + label {\n  position: absolute;\n  cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n  width: 15px;\n  height: 15px;\n  border-radius: 20px;\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__Grkzw [type=radio]:checked + label::before {\n  background-color: var(--primary-2);\n  border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--background-4);\n}";
-var styles$9 = {"container":"styles-module_container__Grkzw"};
-styleInject(css_248z$9);
+var css_248z$a = ".styles-module_container__Grkzw {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  color: var(--foreground-3);\n  margin-bottom: 20px;\n}\n.styles-module_container__Grkzw [type=radio] {\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__Grkzw [type=radio] + label {\n  position: absolute;\n  cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n  width: 15px;\n  height: 15px;\n  border-radius: 20px;\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__Grkzw [type=radio]:checked + label::before {\n  background-color: var(--primary-2);\n  border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--background-4);\n}";
+var styles$a = {"container":"styles-module_container__Grkzw"};
+styleInject(css_248z$a);
 
 class RadioOption {
     text;
@@ -457,7 +457,7 @@ function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
         if (onClick)
             onClick(event);
     }
-    return (React.createElement("div", { className: styles$9.container, style: { width: width } }, options.map((option) => React.createElement("div", { className: styles$9.option, key: option.name },
+    return (React.createElement("div", { className: styles$a.container, style: { width: width } }, options.map((option) => React.createElement("div", { className: styles$a.option, key: option.name },
         selected && selected == option.name ?
             React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
             :
@@ -465,9 +465,9 @@ function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
         React.createElement("label", { htmlFor: option.name }, option.text)))));
 }
 
-var css_248z$8 = ".styles-module_container__RhsQe {\n  margin-right: 8px;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 {\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__RhsQe .styles-module_button__HuX-0 span {\n  color: var(--foreground-1);\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0:hover {\n  background: var(--background-1);\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0 {\n  flex-direction: row;\n  gap: 5px;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0:hover {\n  background: none;\n}";
-var styles$8 = {"container":"styles-module_container__RhsQe","button":"styles-module_button__HuX-0","middle":"styles-module_middle__xg7RF"};
-styleInject(css_248z$8);
+var css_248z$9 = ".styles-module_container__RhsQe {\n  margin-right: 8px;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 {\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__RhsQe .styles-module_button__HuX-0 span {\n  color: var(--foreground-1);\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0:hover {\n  background: var(--background-1);\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0 {\n  flex-direction: row;\n  gap: 5px;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0:hover {\n  background: none;\n}";
+var styles$9 = {"container":"styles-module_container__RhsQe","button":"styles-module_button__HuX-0","middle":"styles-module_middle__xg7RF"};
+styleInject(css_248z$9);
 
 function RedirectButton({ type = "forward", onClick }) {
     function onClickButton(event) {
@@ -482,16 +482,16 @@ function RedirectButton({ type = "forward", onClick }) {
             case "middle": return "arrow_back";
         }
     };
-    return (React.createElement("div", { className: [styles$8.container, styles$8[type]].join(" ") },
-        React.createElement("button", { onClick: onClickButton, className: styles$8.button },
+    return (React.createElement("div", { className: [styles$9.container, styles$9[type]].join(" ") },
+        React.createElement("button", { onClick: onClickButton, className: styles$9.button },
             React.createElement(SvgIcon, { iconName: getIcon() }),
             ["middle"].includes(type) &&
                 React.createElement("span", null, "Zur\u00FCck"))));
 }
 
-var css_248z$7 = ".styles-module_container__VreeH {\n  margin-bottom: 20px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J,\n.styles-module_container__VreeH .styles-module_show_all__HKn-s {\n  padding: 10px 18px;\n  background: var(--background-1);\n  border-radius: 20px;\n  display: flex;\n  flex-direction: row;\n  gap: 5px;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  color: var(--foreground-2);\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:hover {\n  filter: brightness(0.95);\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD {\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD span {\n  color: var(--primary-1);\n}";
-var styles$7 = {"container":"styles-module_container__VreeH","chip":"styles-module_chip__EvZ4J","show_all":"styles-module_show_all__HKn-s","selected":"styles-module_selected__sArTD"};
-styleInject(css_248z$7);
+var css_248z$8 = ".styles-module_container__VreeH {\n  margin-bottom: 20px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J,\n.styles-module_container__VreeH .styles-module_show_all__HKn-s {\n  padding: 10px 18px;\n  background: var(--background-1);\n  border-radius: 20px;\n  display: flex;\n  flex-direction: row;\n  gap: 5px;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  color: var(--foreground-2);\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:hover {\n  filter: brightness(0.95);\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD {\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD span {\n  color: var(--primary-1);\n}";
+var styles$8 = {"container":"styles-module_container__VreeH","chip":"styles-module_chip__EvZ4J","show_all":"styles-module_show_all__HKn-s","selected":"styles-module_selected__sArTD"};
+styleInject(css_248z$8);
 
 class SearchChip {
     title;
@@ -512,19 +512,19 @@ function SearchChips({ items, onChange, chipsVisible = 9 }) {
         if (onChange)
             onChange(newChips);
     }
-    return (React.createElement("div", { className: styles$7.container },
-        (showAll ? chips : chips.slice(0, chipsVisible)).map((item, index) => React.createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$7.chip, item.selected ? styles$7.selected : styles$7.not_selected].join(" ") },
+    return (React.createElement("div", { className: styles$8.container },
+        (showAll ? chips : chips.slice(0, chipsVisible)).map((item, index) => React.createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$8.chip, item.selected ? styles$8.selected : styles$8.not_selected].join(" ") },
             React.createElement(SvgIcon, { iconName: item.selected ? "close" : "filter_list", size: "20px" }),
             item.title)),
         chipsVisible < chips.length && (showAll ?
-            React.createElement("div", { className: styles$7.show_all, onClick: () => setShowAll(false) }, "Weniger anzeigen")
+            React.createElement("div", { className: styles$8.show_all, onClick: () => setShowAll(false) }, "Weniger anzeigen")
             :
-                React.createElement("div", { className: styles$7.show_all, onClick: () => setShowAll(true) }, "Mehr anzeigen"))));
+                React.createElement("div", { className: styles$8.show_all, onClick: () => setShowAll(true) }, "Mehr anzeigen"))));
 }
 
-var css_248z$6 = ".styles-module_container__k4Z26 {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  position: relative;\n}\n.styles-module_container__k4Z26 button {\n  background: var(--primary-2);\n  padding: 0px 18px;\n  border: none;\n  font-size: 14px;\n  border-radius: 10px;\n  cursor: pointer;\n  color: var(--primary-1);\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om {\n  display: none;\n  position: absolute;\n  top: 60px;\n  background: var(--background-1);\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n  width: 100%;\n  border-radius: 14px;\n  border: 1px solid var(--border-3);\n  z-index: 1000;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-:hover,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om:hover {\n  display: block;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n  padding: 16px 20px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li:not(:last-child),\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li:not(:last-child) {\n  border-bottom: 1px solid var(--border-3);\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X {\n  padding: 35px 0px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 15px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X h3,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X h3 {\n  margin: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p {\n  color: var(--foreground-3);\n  padding: 0px 30px;\n  line-height: 1.5;\n  text-align: center;\n  margin-bottom: 10px;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n  display: flex;\n  flex-direction: row;\n  padding: 10px 20px;\n  align-items: center;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li span {\n  flex: 1;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om button {\n  padding: 10px 16px;\n}\n\n.styles-module_input__wOJmG {\n  padding: 14px 20px;\n  font-size: 16px;\n  width: 300px;\n  border-radius: 12px;\n  border: 1.5px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  width: 100%;\n  background: var(--background-1);\n  color: var(--foreground-1);\n}\n.styles-module_input__wOJmG:focus, .styles-module_input__wOJmG: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_form__mWTCu.styles-module_focus__-6H1f + .styles-module_suggestions_container__pceQ-,\n.styles-module_form__mWTCu.styles-module_focus__-6H1f + .styles-module_results_container__OY4Om {\n  display: block;\n}\n\n/* animated text field */\n.styles-module_form__mWTCu {\n  position: relative;\n  width: 100%;\n}\n\n.styles-module_label__A41g9 {\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__NQHTC {\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__wOJmG.styles-module_with_title__rnN-t::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__wOJmG.styles-module_with_title__rnN-t:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__wOJmG:focus + .styles-module_label__A41g9 .styles-module_label_text__NQHTC,\n.styles-module_input__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\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__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n  color: var(--foreground-3);\n}";
-var styles$6 = {"container":"styles-module_container__k4Z26","suggestions_container":"styles-module_suggestions_container__pceQ-","results_container":"styles-module_results_container__OY4Om","error":"styles-module_error__2Ov4X","input":"styles-module_input__wOJmG","form":"styles-module_form__mWTCu","focus":"styles-module_focus__-6H1f","label":"styles-module_label__A41g9","label_text":"styles-module_label_text__NQHTC","with_title":"styles-module_with_title__rnN-t","valid":"styles-module_valid__AAK-6"};
-styleInject(css_248z$6);
+var css_248z$7 = ".styles-module_container__k4Z26 {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  position: relative;\n}\n.styles-module_container__k4Z26 button {\n  background: var(--primary-2);\n  padding: 0px 18px;\n  border: none;\n  font-size: 14px;\n  border-radius: 10px;\n  cursor: pointer;\n  color: var(--primary-1);\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om {\n  display: none;\n  position: absolute;\n  top: 60px;\n  background: var(--background-1);\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n  width: 100%;\n  border-radius: 14px;\n  border: 1px solid var(--border-3);\n  z-index: 1000;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-:hover,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om:hover {\n  display: block;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n  padding: 16px 20px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li:not(:last-child),\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li:not(:last-child) {\n  border-bottom: 1px solid var(--border-3);\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X {\n  padding: 35px 0px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 15px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X h3,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X h3 {\n  margin: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p {\n  color: var(--foreground-3);\n  padding: 0px 30px;\n  line-height: 1.5;\n  text-align: center;\n  margin-bottom: 10px;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n  display: flex;\n  flex-direction: row;\n  padding: 10px 20px;\n  align-items: center;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li span {\n  flex: 1;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om button {\n  padding: 10px 16px;\n}\n\n.styles-module_input__wOJmG {\n  padding: 14px 20px;\n  font-size: 16px;\n  width: 300px;\n  border-radius: 12px;\n  border: 1.5px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  width: 100%;\n  background: var(--background-1);\n  color: var(--foreground-1);\n}\n.styles-module_input__wOJmG:focus, .styles-module_input__wOJmG: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_form__mWTCu.styles-module_focus__-6H1f + .styles-module_suggestions_container__pceQ-,\n.styles-module_form__mWTCu.styles-module_focus__-6H1f + .styles-module_results_container__OY4Om {\n  display: block;\n}\n\n/* animated text field */\n.styles-module_form__mWTCu {\n  position: relative;\n  width: 100%;\n}\n\n.styles-module_label__A41g9 {\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__NQHTC {\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__wOJmG.styles-module_with_title__rnN-t::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__wOJmG.styles-module_with_title__rnN-t:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__wOJmG:focus + .styles-module_label__A41g9 .styles-module_label_text__NQHTC,\n.styles-module_input__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\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__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n  color: var(--foreground-3);\n}";
+var styles$7 = {"container":"styles-module_container__k4Z26","suggestions_container":"styles-module_suggestions_container__pceQ-","results_container":"styles-module_results_container__OY4Om","error":"styles-module_error__2Ov4X","input":"styles-module_input__wOJmG","form":"styles-module_form__mWTCu","focus":"styles-module_focus__-6H1f","label":"styles-module_label__A41g9","label_text":"styles-module_label_text__NQHTC","with_title":"styles-module_with_title__rnN-t","valid":"styles-module_valid__AAK-6"};
+styleInject(css_248z$7);
 
 function Searchbar({ placeholder, title = "Suchen", showNoResults = false, errorTitle = "Keine Ergebnisse gefunden", errorMessage = "", errorButton = "", helpTitle = "", helpMessage = "", marginBottom = 25, marginTop = 30, errorAction = () => { }, onInput = () => { }, onClickResult = () => { }, withButton = false, buttonText = "Suchen", suggestions = [], autoFocus = false, results = [] }) {
     const [value, setValue] = useState("");
@@ -553,34 +553,34 @@ function Searchbar({ placeholder, title = "Suchen", showNoResults = false, error
             element.focus();
     }, [autoFocus]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles$6.container, style: { marginTop: marginTop, marginBottom: marginBottom } },
-            React.createElement("div", { className: `${styles$6.form} ${inputFocused ? styles$6.focus : styles$6.not_focused}` },
-                React.createElement("input", { onFocus: () => setFocused(true), onBlur: () => setFocused(false), className: `${styles$6.input} ${title != undefined ? styles$6.with_title : styles$6.without_title} ${value.length > 0 ? styles$6.valid : styles$6.not_valid}`, placeholder: placeholder, type: "search", ref: inputElement, onInput: onInputChanged }),
-                React.createElement("label", { htmlFor: "text", className: styles$6.label },
-                    React.createElement("span", { className: styles$6.label_text }, title))),
+        React.createElement("div", { className: styles$7.container, style: { marginTop: marginTop, marginBottom: marginBottom } },
+            React.createElement("div", { className: `${styles$7.form} ${inputFocused ? styles$7.focus : styles$7.not_focused}` },
+                React.createElement("input", { onFocus: () => setFocused(true), onBlur: () => setFocused(false), className: `${styles$7.input} ${title != undefined ? styles$7.with_title : styles$7.without_title} ${value.length > 0 ? styles$7.valid : styles$7.not_valid}`, placeholder: placeholder, type: "search", ref: inputElement, onInput: onInputChanged }),
+                React.createElement("label", { htmlFor: "text", className: styles$7.label },
+                    React.createElement("span", { className: styles$7.label_text }, title))),
             withButton && React.createElement("button", { type: "button" }, buttonText),
-            suggestions.length > 0 && React.createElement("div", { className: styles$6.suggestions_container },
+            suggestions.length > 0 && React.createElement("div", { className: styles$7.suggestions_container },
                 React.createElement("ul", null, suggestions.map((suggestion, index) => React.createElement("li", { key: index }, suggestion)))),
-            searchResults.length > 0 && React.createElement("div", { className: styles$6.results_container },
+            searchResults.length > 0 && React.createElement("div", { className: styles$7.results_container },
                 React.createElement("ul", null, searchResults.map((result, index) => React.createElement("li", { key: index, onClick: (event) => onClickResult(event, result) },
                     React.createElement("span", null, result.title),
                     React.createElement("button", { type: "button" }, buttonText))))),
-            searchResults.length == 0 && showNoResults && value.length > 0 && React.createElement("div", { className: styles$6.results_container },
-                React.createElement("div", { className: styles$6.error },
+            searchResults.length == 0 && showNoResults && value.length > 0 && React.createElement("div", { className: styles$7.results_container },
+                React.createElement("div", { className: styles$7.error },
                     React.createElement(SvgIcon, { iconName: "error" }),
                     React.createElement("h3", null, errorTitle),
                     React.createElement("p", null, errorMessage),
                     errorButton.length > 0 && React.createElement("button", { type: "button", onClick: errorAction }, errorButton))),
-            searchResults.length == 0 && showNoResults && value.length == 0 && React.createElement("div", { className: styles$6.results_container },
-                React.createElement("div", { className: styles$6.error },
+            searchResults.length == 0 && showNoResults && value.length == 0 && React.createElement("div", { className: styles$7.results_container },
+                React.createElement("div", { className: styles$7.error },
                     React.createElement(SvgIcon, { iconName: "lightbulb" }),
                     React.createElement("h3", null, helpTitle),
                     React.createElement("p", null, helpMessage))))));
 }
 
-var css_248z$5 = "";
-var styles$5 = {};
-styleInject(css_248z$5);
+var css_248z$6 = "";
+var styles$6 = {};
+styleInject(css_248z$6);
 
 class SliderCard {
     title;
@@ -592,44 +592,60 @@ class SliderCard {
 }
 function Slider({ cards }) {
     const [selected, setSelected] = useState(0);
-    return (React.createElement("div", { className: styles$5.container }, cards.map((card, index) => React.createElement("div", { key: index, className: [styles$5.card, selected == index ? styles$5.selected : styles$5.not_selected].join(" ") },
+    return (React.createElement("div", { className: styles$6.container }, cards.map((card, index) => React.createElement("div", { key: index, className: [styles$6.card, selected == index ? styles$6.selected : styles$6.not_selected].join(" ") },
         React.createElement("h1", null, card.title),
         React.createElement("p", null, card.description)))));
 }
 
-var css_248z$4 = ".styles-module_container__xRQNT {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 7px;\n  color: var(--foreground-3);\n}\n.styles-module_container__xRQNT svg {\n  fill: var(--foreground-3);\n}";
-var styles$4 = {"container":"styles-module_container__xRQNT"};
-styleInject(css_248z$4);
+var css_248z$5 = ".styles-module_container__xRQNT {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 7px;\n  color: var(--foreground-3);\n}\n.styles-module_container__xRQNT svg {\n  fill: var(--foreground-3);\n}";
+var styles$5 = {"container":"styles-module_container__xRQNT"};
+styleInject(css_248z$5);
 
 function StepBack({ iconName = "arrow_back", text = "Weitere Möglichkeiten" }) {
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles$4.container },
+        React.createElement("div", { className: styles$5.container },
             React.createElement(SvgIcon, { iconName: iconName }),
             text)));
 }
 
+var css_248z$4 = ".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$4 = {"card":"styles-module_card__hT9fw"};
+styleInject(css_248z$4);
+
+function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorhanden.", iconName = "manage_search", button, onClick }) {
+    return (React.createElement("div", { className: styles$4.card },
+        React.createElement(SvgIcon, { size: "60px", iconName: iconName }),
+        React.createElement("h1", null, title),
+        React.createElement("p", null, subtitle),
+        button && React.createElement(Button, { text: button, onClick: onClick })));
+}
+
 var css_248z$3 = ".styles-module_container__jNs7m h3 {\n  font-weight: 500;\n  font-size: 16px;\n  color: var(--foreground-1);\n}\n\n.styles-module_item_list__FxHkg.styles-module_has_children__Uu-8D {\n  border-top: 1px solid var(--border-1);\n  border-bottom: 1px solid var(--border-1);\n}\n\n.styles-module_item_list__FxHkg {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n  padding: 8px 14px;\n  border-radius: 25px;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok.styles-module_default__SexGH:hover {\n  background: var(--background-2);\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok.styles-module_red__KD3qJ:hover {\n  background: var(--red-2);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_selected__iOu39 {\n  color: var(--primary-1) !important;\n  border-color: var(--primary-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_selected__iOu39 .styles-module_icon__Jy87z {\n  color: var(--primary-1) !important;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV {\n  padding: 10px 20px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--foreground-1);\n  flex-wrap: wrap;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_moreText__-blXb {\n  flex: 1;\n  margin-bottom: 4px;\n  color: var(--primary-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_subtitle__DT5OF {\n  color: var(--foreground-3);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_icon__Jy87z {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: var(--foreground-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_blue__theVn .styles-module_title__nIwzs {\n  color: var(--blue-1) !important;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_blue__theVn .styles-module_icon__Jy87z {\n  color: var(--blue-1) !important;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(even) {\n  background: var(--background-2);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(odd) {\n  background: var(--background-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:not(:last-child) {\n  border-bottom: 1px solid var(--border-1);\n}";
 var styles$3 = {"container":"styles-module_container__jNs7m","item_list":"styles-module_item_list__FxHkg","has_children":"styles-module_has_children__Uu-8D","action":"styles-module_action__YYTok","default":"styles-module_default__SexGH","red":"styles-module_red__KD3qJ","item":"styles-module_item__sgyiV","selected":"styles-module_selected__iOu39","icon":"styles-module_icon__Jy87z","moreText":"styles-module_moreText__-blXb","subtitle":"styles-module_subtitle__DT5OF","blue":"styles-module_blue__theVn","title":"styles-module_title__nIwzs"};
 styleInject(css_248z$3);
 
-function Table({ items, title = "Titel", actions = [], moreActions, selected, style = "default", marginTop = 30 }) {
+function Table({ items, title = "Titel", actions = [], moreActions, selected, style = "default", marginTop = 30, emptyTitle = "Keine Daten", emptySubtitle = "Es sind keine Daten vorhanden.", emptyIconName = "manage_search" }) {
     return (React.createElement("div", { className: styles$3.container, style: { marginTop: marginTop } },
-        React.createElement("h3", null, title),
-        React.createElement("ul", { className: `${styles$3.item_list} ${items.length > 0 ? styles$3.has_children : styles$3.no_children}` }, items.map((item, index) => React.createElement("li", { key: index, className: [styles$3.item, styles$3[style], selected == index ? styles$3.selected : styles$3.not_selected].join(" ") },
-            React.createElement("div", { className: styles$3.icon },
-                React.createElement(SvgIcon, { iconName: item.iconName })),
-            React.createElement("div", { className: styles$3.title }, item.title),
-            React.createElement("div", { className: styles$3.moreText }, item.moreText),
-            React.createElement("div", { className: styles$3.subtitle }, item.subtitle),
-            moreActions &&
-                moreActions.map((moreAction, index) => React.createElement("div", { className: styles$3.more_action, key: item.title + index }, moreAction(item.data, index))),
-            actions.length > 0 && actions.map((action, idx) => React.createElement("div", { key: idx, className: [
-                    styles$3.action,
-                    action.type === "red" && styles$3.red,
-                    action.type === "default" && styles$3.default,
-                ].join(" "), onClick: (event) => action.onClick(event, item, index) },
-                React.createElement(SvgIcon, { iconName: action.iconName }),
-                action.title)))))));
+        items.length == 0 &&
+            React.createElement(EmptyCard, { title: emptyTitle, subtitle: emptySubtitle, iconName: emptyIconName }),
+        items.length > 0 &&
+            React.createElement(React.Fragment, null,
+                React.createElement("h3", null, title),
+                React.createElement("ul", { className: `${styles$3.item_list} ${items.length > 0 ? styles$3.has_children : styles$3.no_children}` }, items.map((item, index) => React.createElement("li", { key: index, className: [styles$3.item, styles$3[style], selected == index ? styles$3.selected : styles$3.not_selected].join(" ") },
+                    React.createElement("div", { className: styles$3.icon },
+                        React.createElement(SvgIcon, { iconName: item.iconName })),
+                    React.createElement("div", { className: styles$3.title }, item.title),
+                    React.createElement("div", { className: styles$3.moreText }, item.moreText),
+                    React.createElement("div", { className: styles$3.subtitle }, item.subtitle),
+                    moreActions &&
+                        moreActions.map((moreAction, index) => React.createElement("div", { className: styles$3.more_action, key: item.title + index }, moreAction(item.data, index))),
+                    actions.length > 0 && actions.map((action, idx) => React.createElement("div", { key: idx, className: [
+                            styles$3.action,
+                            action.type === "red" && styles$3.red,
+                            action.type === "default" && styles$3.default,
+                        ].join(" "), onClick: (event) => action.onClick(event, item, index) },
+                        React.createElement(SvgIcon, { iconName: action.iconName }),
+                        action.title))))))));
 }
 
 var css_248z$2 = ".styles-module_container__Kl-lB {\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n  margin-bottom: 20px;\n}\n\n.styles-module_tab__Veki- {\n  flex: 1;\n  border-radius: 42px;\n  border-bottom: 2px;\n  border-bottom-style: solid;\n  border-bottom-color: var(--border-1);\n  background: var(--background-1);\n  color: var(--foreground-1);\n  padding: 16px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n}\n.styles-module_tab__Veki-.styles-module_selected__geNE7 {\n  border-bottom-color: var(--primary-1);\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n\n@media (max-width: 750px) {\n  .styles-module_container__Kl-lB {\n    gap: 0px;\n  }\n  .styles-module_tab__Veki- {\n    border-radius: 0px;\n  }\n  .styles-module_tab__Veki-:first-child {\n    border-top-left-radius: 42px;\n    border-bottom-left-radius: 42px;\n  }\n  .styles-module_tab__Veki-:last-child {\n    border-top-right-radius: 42px;\n    border-bottom-right-radius: 42px;\n  }\n}";
@@ -1032,4 +1048,4 @@ var S3FileCategory;
     S3FileCategory["default"] = "file";
 })(S3FileCategory || (S3FileCategory = {}));
 
-export { Accordeon, AuthButton, CardButton, Checkbox, ChooseRole, ChooseRoleItem, CopyCode, CourseAnnouncementAssetType, Dialog, FormButton, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, OptionField, OptionFieldHorizontal, PrimaryButton, ProgressBar, RadioButtons, RadioOption, RedirectButton, S3FileCategory, SearchChip, SearchChips, Searchbar, Slider, SliderCard, StepBack, SvgIcon, Table, Tabs, TextWithIcon, UsageCard };
+export { Accordeon, AuthButton, Button, CardButton, Checkbox, ChooseRole, ChooseRoleItem, CopyCode, CourseAnnouncementAssetType, Dialog, FormButton, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, OptionField, OptionFieldHorizontal, ProgressBar, RadioButtons, RadioOption, RedirectButton, S3FileCategory, SearchChip, SearchChips, Searchbar, Slider, SliderCard, StepBack, SvgIcon, Table, Tabs, TextWithIcon, UsageCard };

package/dist/types/Feedback.d.ts

@@ -7,6 +7,7 @@ export interface Feedback {
     answers: FeedbackAnswer[];
     createdAt: Date;
     updatedAt: Date;
+    hallo: string;
 }
 export interface FeedbackAnswer {
     message: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "math-main-components",
-    "version": "0.0.132",
+    "version": "0.0.135",
     "author": "Emilian Scheel",
     "files": [
         "dist/**/*"
@@ -41,6 +41,7 @@
         "react-dom": "^18.2.0"
     },
     "scripts": {
+        "dev": "nodemon --watch src --exec \"npm run build && yalc push\" --ext ts,tsx,scss,js,jsx",
         "clean": "rm -rf dist",
         "increment-version": "npm --no-git-tag-version version patch",
         "git-add-all": "git add .",
@@ -50,6 +51,7 @@
     },
     "dependencies": {
         "@sanity/types": "^3.20.1",
+        "nodemon": "^3.0.2",
         "pre-commit": "^1.2.2",
         "sanity": "^3.20.1",
         "stripe": "^14.5.0"