math-main-components 0.0.13 → 0.0.15

package/README.md

@@ -2,6 +2,13 @@
 
 Component Library for math-main-app
 
-Includes
 - reusable ui components
-- math components
+- math components
+
+## Notes
+- Do not use any of next.js features like next/link
+
+## Publishing
+1. increment version in `package.json`
+2. run `npm publish --access public`
+3. run `yarn add math-main-components@0.0.1` in project

package/dist/components/InputPassword/InputPassword.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-export declare function InputPassword({ placeholder, title, name, isVisible, width, autoComplete, showForgotLink }: {
+export declare function InputPassword({ placeholder, title, name, isVisible, width, autoComplete, forgotLink }: {
     placeholder?: string;
     autoComplete?: string;
     title?: string;
     name: string;
     isVisible?: boolean;
     width?: string;
-    showForgotLink?: boolean;
+    forgotLink?: any;
 }): React.JSX.Element;

package/dist/components/OptionField/OptionField.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-export declare function OptionField({ headline, description, link, iconName }: {
+export declare function OptionField({ headline, description, iconName }: {
     headline: string;
     description: string;
     iconName?: string;
-    link: string;
 }): React.JSX.Element;

package/dist/components/OptionFieldHorizontal/OptionFieldHorizontal.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-export declare function OptionFieldHorizontal({ title, href, iconName, preselected }: {
+export declare function OptionFieldHorizontal({ title, iconName, preselected }: {
     title: string;
-    href: string;
     iconName: string;
     preselected?: boolean;
 }): React.JSX.Element;

package/dist/components/StepBack/StepBack.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-export declare function StepBack({ link }: {
-    link: string;
+export declare function StepBack({ iconName, text }: {
+    iconName?: string;
+    text?: string;
 }): React.JSX.Element;

package/dist/components/TextWithIcon/TextWithIcon.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-export declare function TextWithIcon({ iconName, label, href }: {
+export declare function TextWithIcon({ iconName, label, }: {
     iconName: string;
     label: string;
-    href?: string;
 }): React.JSX.Element;

package/dist/index.cjs.js

@@ -250,7 +250,7 @@ var css_248z$f = "@keyframes styles-module_show__OLTZH {\n  from {\n    max-heig
 var styles$f = {"container":"styles-module_container__UdmOO","forgot_label":"styles-module_forgot_label__EeN6a","visible":"styles-module_visible__QROqh","hidden":"styles-module_hidden__hDKDO","input":"styles-module_input__sC2fP","hideButton":"styles-module_hideButton__83mRI","form":"styles-module_form__m866x","label":"styles-module_label__8PuaL","label_text":"styles-module_label_text__FwJ1F","with_title":"styles-module_with_title__dftgq","valid":"styles-module_valid__SM7w5","show":"styles-module_show__OLTZH","hide":"styles-module_hide__LAgaY"};
 styleInject(css_248z$f);
 
-function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", autoComplete, showForgotLink = false }) {
+function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", autoComplete, forgotLink = false }) {
     const [value, setValue] = React.useState("");
     const [hidePassword, setHidePassword] = React.useState(true);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -261,12 +261,11 @@ function InputPassword({ placeholder = "", title = "Passwort", name, isVisible =
                     React__default["default"].createElement("span", { className: styles$f.label_text }, title)),
                 React__default["default"].createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$f.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
                     React__default["default"].createElement(SvgIcon, { iconName: hidePassword ? "visibility" : "visibility_off" }))),
-            showForgotLink &&
-                React__default["default"].createElement("a", { href: "/auth/forgot/1" },
-                    React__default["default"].createElement("span", { className: styles$f.forgot_label }, "Passwort vergessen?")))));
+            forgotLink &&
+                React__default["default"].createElement("div", { className: styles$f.forgot_container }, forgotLink))));
 }
 
-var css_248z$e = ".styles-module_container__--NO0 {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  user-select: none;\n  margin-bottom: 20px;\n}\n.styles-module_container__--NO0 a {\n  background: transparent;\n  color: #0075FF;\n  border: none;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.styles-module_input_wrapper__LPIk1 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  gap: 10px;\n}\n\n.styles-module_input__84v36 {\n  padding: 14px 10px;\n  width: 30px;\n  border-radius: 12px;\n  border: 1.5px solid #a8a8a8;\n  outline: none;\n  transition: 0.2s ease;\n  text-align: center;\n  font-size: 18px;\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n  border-color: #0075FF;\n  box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_input__84v36:nth-child(3) {\n  margin-right: 25px;\n}\n\n.styles-module_input__84v36::placeholder,\n.styles-module_input__84v36:-ms-input-placeholder,\n.styles-module_input__84v36::-ms-input-placeholder {\n  letter-spacing: 0px !important;\n}";
+var css_248z$e = ".styles-module_container__--NO0 {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  user-select: none;\n  margin-bottom: 20px;\n}\n.styles-module_container__--NO0 button {\n  background: transparent;\n  color: #0075FF;\n  border: none;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.styles-module_input_wrapper__LPIk1 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  gap: 10px;\n}\n\n.styles-module_input__84v36 {\n  padding: 14px 10px;\n  width: 30px;\n  border-radius: 12px;\n  border: 1.5px solid #a8a8a8;\n  outline: none;\n  transition: 0.2s ease;\n  text-align: center;\n  font-size: 18px;\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n  border-color: #0075FF;\n  box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_input__84v36:nth-child(3) {\n  margin-right: 25px;\n}\n\n.styles-module_input__84v36::placeholder,\n.styles-module_input__84v36:-ms-input-placeholder,\n.styles-module_input__84v36::-ms-input-placeholder {\n  letter-spacing: 0px !important;\n}";
 var styles$e = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
 styleInject(css_248z$e);
 
@@ -277,6 +276,7 @@ function InputPin({ name, length, onFinished = () => { } }) {
     function onChange(event, position) {
         const regex = /^[0-9\b]+$/;
         const value = event.target.value ? event.target.value : "";
+        console.log("current state", state);
         if (value != '' && regex.test(value)) {
             const digitCountBefore = state[position] == undefined ? 0 : String(state[position]).length;
             const addedDigitsCount = value.length - digitCountBefore;
@@ -296,6 +296,7 @@ function InputPin({ name, length, onFinished = () => { } }) {
                 if (digits.length >= 6) {
                     fieldRefs.current[length - 1].current.focus();
                 }
+                console.log("new state", state);
                 setState(newState);
             }
         }
@@ -321,20 +322,16 @@ function InputPin({ name, length, onFinished = () => { } }) {
             ref.current.value = "";
         });
     }
-    React.useCallback((element) => {
-        if (element)
-            element.focus();
-    }, []);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: styles$e.container },
             React__default["default"].createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
-            React__default["default"].createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((e, i) => {
+            React__default["default"].createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((event, i) => {
                 if (i == 0) {
                     return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
                 }
                 return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
             })),
-            React__default["default"].createElement("a", { onClick: resetValues }, "Zur\u00FCcksetzen"))));
+            React__default["default"].createElement("button", { onClick: resetValues }, "Zur\u00FCcksetzen"))));
 }
 
 var css_248z$d = ".styles-module_container__zcXGF {\n  display: flex;\n  width: 100%;\n  margin-bottom: 20px;\n}\n\n.styles-module_input__Tpth8 {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1.5px solid #a8a8a8;\n  outline: none;\n  transition: 0.2s ease;\n  flex: 1;\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n  border-color: #0075FF;\n  box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n  border-color: #e50000;\n  box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__zcXGF {\n  position: relative;\n}\n\n.styles-module_label__appHO {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.styles-module_label_text__-sKjY {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: white;\n  color: grey;\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: grey;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__Tpth8:focus + .styles-module_label__appHO .styles-module_label_text__-sKjY,\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: linear-gradient(to bottom, rgba(250, 250, 250, 0.9411764706), hsla(0, 0%, 100%, 0.951));\n  color: #0063d4;\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n  color: #a8a8a8;\n}";
@@ -361,25 +358,23 @@ var css_248z$c = ".styles-module_box__Z0iod {\n  background: #F4F4F4;\n  width:
 var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
 styleInject(css_248z$c);
 
-function OptionField({ headline, description, link, iconName }) {
+function OptionField({ headline, description, iconName }) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("a", { href: link },
-            React__default["default"].createElement("div", { className: styles$c.box },
-                React__default["default"].createElement("div", { className: styles$c.left_side }, iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName })),
-                React__default["default"].createElement("div", { className: styles$c.right_side },
-                    React__default["default"].createElement("h4", null, headline),
-                    React__default["default"].createElement("p", null, description))))));
+        React__default["default"].createElement("div", { className: styles$c.box },
+            React__default["default"].createElement("div", { className: styles$c.left_side }, iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName })),
+            React__default["default"].createElement("div", { className: styles$c.right_side },
+                React__default["default"].createElement("h4", null, headline),
+                React__default["default"].createElement("p", null, description)))));
 }
 
 var css_248z$b = ".styles-module_container__XCtqW {\n  background: white;\n  border-radius: 12px;\n  padding: 30px;\n  margin-bottom: 30px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 18px;\n  color: black;\n  border: 1px solid #B1B1B1;\n  transition: 0.2s ease-in-out;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n}\n.styles-module_container__XCtqW:hover {\n  background: #f0f0f0;\n  border-color: #888888;\n}\n.styles-module_container__XCtqW h3 {\n  font-weight: 500;\n  margin: 0;\n}\n\n.styles-module_container__XCtqW.styles-module_preselected__WoSbB {\n  border: 1px solid black;\n}";
 var styles$b = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
 styleInject(css_248z$b);
 
-function OptionFieldHorizontal({ title, href, iconName, preselected = false }) {
-    return (React__default["default"].createElement("a", { href: href },
-        React__default["default"].createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" ") },
-            React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
-            React__default["default"].createElement("h3", null, title))));
+function OptionFieldHorizontal({ title, iconName, preselected = false }) {
+    return (React__default["default"].createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" ") },
+        React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
+        React__default["default"].createElement("h3", null, title)));
 }
 
 var css_248z$a = ".styles-module_container__oNbrP {\n  padding-top: 10px;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65 {\n  padding: 10px 18px;\n  background: #0075FF;\n  border-radius: 40px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  font-size: 15px;\n  color: white;\n  align-items: center;\n  border: none;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_red__CHF3e {\n  background: #e40000;\n}";
@@ -561,12 +556,11 @@ var css_248z$3 = ".styles-module_container__xRQNT {\n  display: flex;\n  flex-di
 var styles$3 = {"container":"styles-module_container__xRQNT"};
 styleInject(css_248z$3);
 
-function StepBack({ link }) {
+function StepBack({ iconName = "arrow_back", text = "Weitere Möglichkeiten" }) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("a", { href: link },
-            React__default["default"].createElement("div", { className: styles$3.container },
-                React__default["default"].createElement(SvgIcon, { iconName: 'arrow_back' }),
-                "Weitere M\u00F6glichkeiten"))));
+        React__default["default"].createElement("div", { className: styles$3.container },
+            React__default["default"].createElement(SvgIcon, { iconName: iconName }),
+            text)));
 }
 
 var css_248z$2 = ".styles-module_container__jNs7m {\n  margin-top: 30px;\n}\n.styles-module_container__jNs7m h3 {\n  font-weight: 500;\n  font-size: 16px;\n}\n\n.styles-module_item_list__FxHkg.styles-module_has_children__Uu-8D {\n  border-top: 1px solid #D0D0D0;\n  border-bottom: 1px solid #D0D0D0;\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: rgb(223, 223, 223);\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok.styles-module_red__KD3qJ:hover {\n  background: rgb(255, 199, 199);\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}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_moreText__-blXb {\n  flex: 1;\n  margin-bottom: 4px;\n  color: #0075FF;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_subtitle__DT5OF {\n  color: rgb(162, 162, 162);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(even) {\n  background: #F3F3F3;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:not(:last-child) {\n  border-bottom: 1px solid #D0D0D0;\n}";
@@ -627,15 +621,10 @@ var css_248z$1 = ".styles-module_container__ItBx0 {\n  display: flex;\n  flex-di
 var styles$1 = {"container":"styles-module_container__ItBx0"};
 styleInject(css_248z$1);
 
-function TextWithIcon({ iconName, label, href }) {
-    return (React__default["default"].createElement("div", { className: styles$1.container }, href ?
-        React__default["default"].createElement("a", { href: href },
-            React__default["default"].createElement(SvgIcon, { iconName: iconName }),
-            React__default["default"].createElement("span", null, label))
-        :
-            React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(SvgIcon, { iconName: iconName }),
-                React__default["default"].createElement("span", null, label))));
+function TextWithIcon({ iconName, label, }) {
+    return (React__default["default"].createElement("div", { className: styles$1.container },
+        React__default["default"].createElement(SvgIcon, { iconName: iconName }),
+        React__default["default"].createElement("span", null, label)));
 }
 
 function degreesToRadians(degrees) {

package/dist/index.esm.js

@@ -242,7 +242,7 @@ var css_248z$f = "@keyframes styles-module_show__OLTZH {\n  from {\n    max-heig
 var styles$f = {"container":"styles-module_container__UdmOO","forgot_label":"styles-module_forgot_label__EeN6a","visible":"styles-module_visible__QROqh","hidden":"styles-module_hidden__hDKDO","input":"styles-module_input__sC2fP","hideButton":"styles-module_hideButton__83mRI","form":"styles-module_form__m866x","label":"styles-module_label__8PuaL","label_text":"styles-module_label_text__FwJ1F","with_title":"styles-module_with_title__dftgq","valid":"styles-module_valid__SM7w5","show":"styles-module_show__OLTZH","hide":"styles-module_hide__LAgaY"};
 styleInject(css_248z$f);
 
-function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", autoComplete, showForgotLink = false }) {
+function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", autoComplete, forgotLink = false }) {
     const [value, setValue] = useState("");
     const [hidePassword, setHidePassword] = useState(true);
     return (React.createElement(React.Fragment, null,
@@ -253,12 +253,11 @@ function InputPassword({ placeholder = "", title = "Passwort", name, isVisible =
                     React.createElement("span", { className: styles$f.label_text }, title)),
                 React.createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$f.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
                     React.createElement(SvgIcon, { iconName: hidePassword ? "visibility" : "visibility_off" }))),
-            showForgotLink &&
-                React.createElement("a", { href: "/auth/forgot/1" },
-                    React.createElement("span", { className: styles$f.forgot_label }, "Passwort vergessen?")))));
+            forgotLink &&
+                React.createElement("div", { className: styles$f.forgot_container }, forgotLink))));
 }
 
-var css_248z$e = ".styles-module_container__--NO0 {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  user-select: none;\n  margin-bottom: 20px;\n}\n.styles-module_container__--NO0 a {\n  background: transparent;\n  color: #0075FF;\n  border: none;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.styles-module_input_wrapper__LPIk1 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  gap: 10px;\n}\n\n.styles-module_input__84v36 {\n  padding: 14px 10px;\n  width: 30px;\n  border-radius: 12px;\n  border: 1.5px solid #a8a8a8;\n  outline: none;\n  transition: 0.2s ease;\n  text-align: center;\n  font-size: 18px;\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n  border-color: #0075FF;\n  box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_input__84v36:nth-child(3) {\n  margin-right: 25px;\n}\n\n.styles-module_input__84v36::placeholder,\n.styles-module_input__84v36:-ms-input-placeholder,\n.styles-module_input__84v36::-ms-input-placeholder {\n  letter-spacing: 0px !important;\n}";
+var css_248z$e = ".styles-module_container__--NO0 {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  user-select: none;\n  margin-bottom: 20px;\n}\n.styles-module_container__--NO0 button {\n  background: transparent;\n  color: #0075FF;\n  border: none;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.styles-module_input_wrapper__LPIk1 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  gap: 10px;\n}\n\n.styles-module_input__84v36 {\n  padding: 14px 10px;\n  width: 30px;\n  border-radius: 12px;\n  border: 1.5px solid #a8a8a8;\n  outline: none;\n  transition: 0.2s ease;\n  text-align: center;\n  font-size: 18px;\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n  border-color: #0075FF;\n  box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_input__84v36:nth-child(3) {\n  margin-right: 25px;\n}\n\n.styles-module_input__84v36::placeholder,\n.styles-module_input__84v36:-ms-input-placeholder,\n.styles-module_input__84v36::-ms-input-placeholder {\n  letter-spacing: 0px !important;\n}";
 var styles$e = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
 styleInject(css_248z$e);
 
@@ -269,6 +268,7 @@ function InputPin({ name, length, onFinished = () => { } }) {
     function onChange(event, position) {
         const regex = /^[0-9\b]+$/;
         const value = event.target.value ? event.target.value : "";
+        console.log("current state", state);
         if (value != '' && regex.test(value)) {
             const digitCountBefore = state[position] == undefined ? 0 : String(state[position]).length;
             const addedDigitsCount = value.length - digitCountBefore;
@@ -288,6 +288,7 @@ function InputPin({ name, length, onFinished = () => { } }) {
                 if (digits.length >= 6) {
                     fieldRefs.current[length - 1].current.focus();
                 }
+                console.log("new state", state);
                 setState(newState);
             }
         }
@@ -313,20 +314,16 @@ function InputPin({ name, length, onFinished = () => { } }) {
             ref.current.value = "";
         });
     }
-    useCallback((element) => {
-        if (element)
-            element.focus();
-    }, []);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: styles$e.container },
             React.createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
-            React.createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((e, i) => {
+            React.createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((event, i) => {
                 if (i == 0) {
                     return React.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
                 }
                 return React.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
             })),
-            React.createElement("a", { onClick: resetValues }, "Zur\u00FCcksetzen"))));
+            React.createElement("button", { onClick: resetValues }, "Zur\u00FCcksetzen"))));
 }
 
 var css_248z$d = ".styles-module_container__zcXGF {\n  display: flex;\n  width: 100%;\n  margin-bottom: 20px;\n}\n\n.styles-module_input__Tpth8 {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1.5px solid #a8a8a8;\n  outline: none;\n  transition: 0.2s ease;\n  flex: 1;\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n  border-color: #0075FF;\n  box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n  border-color: #e50000;\n  box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__zcXGF {\n  position: relative;\n}\n\n.styles-module_label__appHO {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.styles-module_label_text__-sKjY {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: white;\n  color: grey;\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: grey;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__Tpth8:focus + .styles-module_label__appHO .styles-module_label_text__-sKjY,\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: linear-gradient(to bottom, rgba(250, 250, 250, 0.9411764706), hsla(0, 0%, 100%, 0.951));\n  color: #0063d4;\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n  color: #a8a8a8;\n}";
@@ -353,25 +350,23 @@ var css_248z$c = ".styles-module_box__Z0iod {\n  background: #F4F4F4;\n  width:
 var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
 styleInject(css_248z$c);
 
-function OptionField({ headline, description, link, iconName }) {
+function OptionField({ headline, description, iconName }) {
     return (React.createElement(React.Fragment, null,
-        React.createElement("a", { href: link },
-            React.createElement("div", { className: styles$c.box },
-                React.createElement("div", { className: styles$c.left_side }, iconName && React.createElement(SvgIcon, { iconName: iconName })),
-                React.createElement("div", { className: styles$c.right_side },
-                    React.createElement("h4", null, headline),
-                    React.createElement("p", null, description))))));
+        React.createElement("div", { className: styles$c.box },
+            React.createElement("div", { className: styles$c.left_side }, iconName && React.createElement(SvgIcon, { iconName: iconName })),
+            React.createElement("div", { className: styles$c.right_side },
+                React.createElement("h4", null, headline),
+                React.createElement("p", null, description)))));
 }
 
 var css_248z$b = ".styles-module_container__XCtqW {\n  background: white;\n  border-radius: 12px;\n  padding: 30px;\n  margin-bottom: 30px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 18px;\n  color: black;\n  border: 1px solid #B1B1B1;\n  transition: 0.2s ease-in-out;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n}\n.styles-module_container__XCtqW:hover {\n  background: #f0f0f0;\n  border-color: #888888;\n}\n.styles-module_container__XCtqW h3 {\n  font-weight: 500;\n  margin: 0;\n}\n\n.styles-module_container__XCtqW.styles-module_preselected__WoSbB {\n  border: 1px solid black;\n}";
 var styles$b = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
 styleInject(css_248z$b);
 
-function OptionFieldHorizontal({ title, href, iconName, preselected = false }) {
-    return (React.createElement("a", { href: href },
-        React.createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" ") },
-            React.createElement(SvgIcon, { iconName: iconName, size: "32px" }),
-            React.createElement("h3", null, title))));
+function OptionFieldHorizontal({ title, iconName, preselected = false }) {
+    return (React.createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" ") },
+        React.createElement(SvgIcon, { iconName: iconName, size: "32px" }),
+        React.createElement("h3", null, title)));
 }
 
 var css_248z$a = ".styles-module_container__oNbrP {\n  padding-top: 10px;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65 {\n  padding: 10px 18px;\n  background: #0075FF;\n  border-radius: 40px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  font-size: 15px;\n  color: white;\n  align-items: center;\n  border: none;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_red__CHF3e {\n  background: #e40000;\n}";
@@ -553,12 +548,11 @@ var css_248z$3 = ".styles-module_container__xRQNT {\n  display: flex;\n  flex-di
 var styles$3 = {"container":"styles-module_container__xRQNT"};
 styleInject(css_248z$3);
 
-function StepBack({ link }) {
+function StepBack({ iconName = "arrow_back", text = "Weitere Möglichkeiten" }) {
     return (React.createElement(React.Fragment, null,
-        React.createElement("a", { href: link },
-            React.createElement("div", { className: styles$3.container },
-                React.createElement(SvgIcon, { iconName: 'arrow_back' }),
-                "Weitere M\u00F6glichkeiten"))));
+        React.createElement("div", { className: styles$3.container },
+            React.createElement(SvgIcon, { iconName: iconName }),
+            text)));
 }
 
 var css_248z$2 = ".styles-module_container__jNs7m {\n  margin-top: 30px;\n}\n.styles-module_container__jNs7m h3 {\n  font-weight: 500;\n  font-size: 16px;\n}\n\n.styles-module_item_list__FxHkg.styles-module_has_children__Uu-8D {\n  border-top: 1px solid #D0D0D0;\n  border-bottom: 1px solid #D0D0D0;\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: rgb(223, 223, 223);\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok.styles-module_red__KD3qJ:hover {\n  background: rgb(255, 199, 199);\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}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_moreText__-blXb {\n  flex: 1;\n  margin-bottom: 4px;\n  color: #0075FF;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_subtitle__DT5OF {\n  color: rgb(162, 162, 162);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(even) {\n  background: #F3F3F3;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:not(:last-child) {\n  border-bottom: 1px solid #D0D0D0;\n}";
@@ -619,15 +613,10 @@ var css_248z$1 = ".styles-module_container__ItBx0 {\n  display: flex;\n  flex-di
 var styles$1 = {"container":"styles-module_container__ItBx0"};
 styleInject(css_248z$1);
 
-function TextWithIcon({ iconName, label, href }) {
-    return (React.createElement("div", { className: styles$1.container }, href ?
-        React.createElement("a", { href: href },
-            React.createElement(SvgIcon, { iconName: iconName }),
-            React.createElement("span", null, label))
-        :
-            React.createElement(React.Fragment, null,
-                React.createElement(SvgIcon, { iconName: iconName }),
-                React.createElement("span", null, label))));
+function TextWithIcon({ iconName, label, }) {
+    return (React.createElement("div", { className: styles$1.container },
+        React.createElement(SvgIcon, { iconName: iconName }),
+        React.createElement("span", null, label)));
 }
 
 function degreesToRadians(degrees) {

package/package.json

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