math-main-components 0.0.13 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/components/InputPassword/InputPassword.d.ts +2 -2
  2. package/dist/components/OptionField/OptionField.d.ts +1 -2
  3. package/dist/components/OptionFieldHorizontal/OptionFieldHorizontal.d.ts +1 -2
  4. package/dist/components/StepBack/StepBack.d.ts +3 -2
  5. package/dist/components/TextWithIcon/TextWithIcon.d.ts +1 -2
  6. package/dist/index.cjs.js +23 -32
  7. package/dist/index.esm.js +23 -32
  8. package/package.json +1 -1
package/dist/components/InputPassword/InputPassword.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
- export declare function InputPassword({ placeholder, title, name, isVisible, width, autoComplete, showForgotLink }: {
2
+ export declare function InputPassword({ placeholder, title, name, isVisible, width, autoComplete, forgotLink }: {
3
3
  placeholder?: string;
4
4
  autoComplete?: string;
5
5
  title?: string;
6
6
  name: string;
7
7
  isVisible?: boolean;
8
8
  width?: string;
9
- showForgotLink?: boolean;
9
+ forgotLink?: any;
10
10
  }): React.JSX.Element;
package/dist/components/OptionField/OptionField.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
- export declare function OptionField({ headline, description, link, iconName }: {
2
+ export declare function OptionField({ headline, description, iconName }: {
3
3
  headline: string;
4
4
  description: string;
5
5
  iconName?: string;
6
- link: string;
7
6
  }): React.JSX.Element;
package/dist/components/OptionFieldHorizontal/OptionFieldHorizontal.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
- export declare function OptionFieldHorizontal({ title, href, iconName, preselected }: {
2
+ export declare function OptionFieldHorizontal({ title, iconName, preselected }: {
3
3
  title: string;
4
- href: string;
5
4
  iconName: string;
6
5
  preselected?: boolean;
7
6
  }): React.JSX.Element;
package/dist/components/StepBack/StepBack.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
- export declare function StepBack({ link }: {
3
- link: string;
2
+ export declare function StepBack({ iconName, text }: {
3
+ iconName?: string;
4
+ text?: string;
4
5
  }): React.JSX.Element;
package/dist/components/TextWithIcon/TextWithIcon.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
- export declare function TextWithIcon({ iconName, label, href }: {
2
+ export declare function TextWithIcon({ iconName, label, }: {
3
3
  iconName: string;
4
4
  label: string;
5
- href?: string;
6
5
  }): React.JSX.Element;
package/dist/index.cjs.js CHANGED
@@ -250,7 +250,7 @@ var css_248z$f = "@keyframes styles-module_show__OLTZH {\n from {\n max-heig
250
250
  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"};
251
251
  styleInject(css_248z$f);
252
252
 
253
- function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", autoComplete, showForgotLink = false }) {
253
+ function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", autoComplete, forgotLink = false }) {
254
254
  const [value, setValue] = React.useState("");
255
255
  const [hidePassword, setHidePassword] = React.useState(true);
256
256
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -261,12 +261,11 @@ function InputPassword({ placeholder = "", title = "Passwort", name, isVisible =
261
261
  React__default["default"].createElement("span", { className: styles$f.label_text }, title)),
262
262
  React__default["default"].createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$f.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
263
263
  React__default["default"].createElement(SvgIcon, { iconName: hidePassword ? "visibility" : "visibility_off" }))),
264
- showForgotLink &&
265
- React__default["default"].createElement("a", { href: "/auth/forgot/1" },
266
- React__default["default"].createElement("span", { className: styles$f.forgot_label }, "Passwort vergessen?")))));
264
+ forgotLink &&
265
+ React__default["default"].createElement("div", { className: styles$f.forgot_container }, forgotLink))));
267
266
  }
268
267
 
269
- 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}";
268
+ 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}";
270
269
  var styles$e = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
271
270
  styleInject(css_248z$e);
272
271
 
@@ -334,7 +333,7 @@ function InputPin({ name, length, onFinished = () => { } }) {
334
333
  }
335
334
  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) });
336
335
  })),
337
- React__default["default"].createElement("a", { onClick: resetValues }, "Zur\u00FCcksetzen"))));
336
+ React__default["default"].createElement("button", { onClick: resetValues }, "Zur\u00FCcksetzen"))));
338
337
  }
339
338
 
340
339
  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 +360,23 @@ var css_248z$c = ".styles-module_box__Z0iod {\n background: #F4F4F4;\n width:
361
360
  var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
362
361
  styleInject(css_248z$c);
363
362
 
364
- function OptionField({ headline, description, link, iconName }) {
363
+ function OptionField({ headline, description, iconName }) {
365
364
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
366
- React__default["default"].createElement("a", { href: link },
367
- React__default["default"].createElement("div", { className: styles$c.box },
368
- React__default["default"].createElement("div", { className: styles$c.left_side }, iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName })),
369
- React__default["default"].createElement("div", { className: styles$c.right_side },
370
- React__default["default"].createElement("h4", null, headline),
371
- React__default["default"].createElement("p", null, description))))));
365
+ React__default["default"].createElement("div", { className: styles$c.box },
366
+ React__default["default"].createElement("div", { className: styles$c.left_side }, iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName })),
367
+ React__default["default"].createElement("div", { className: styles$c.right_side },
368
+ React__default["default"].createElement("h4", null, headline),
369
+ React__default["default"].createElement("p", null, description)))));
372
370
  }
373
371
 
374
372
  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}";
375
373
  var styles$b = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
376
374
  styleInject(css_248z$b);
377
375
 
378
- function OptionFieldHorizontal({ title, href, iconName, preselected = false }) {
379
- return (React__default["default"].createElement("a", { href: href },
380
- React__default["default"].createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" ") },
381
- React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
382
- React__default["default"].createElement("h3", null, title))));
376
+ function OptionFieldHorizontal({ title, iconName, preselected = false }) {
377
+ return (React__default["default"].createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" ") },
378
+ React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
379
+ React__default["default"].createElement("h3", null, title)));
383
380
  }
384
381
 
385
382
  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 +558,11 @@ var css_248z$3 = ".styles-module_container__xRQNT {\n display: flex;\n flex-di
561
558
  var styles$3 = {"container":"styles-module_container__xRQNT"};
562
559
  styleInject(css_248z$3);
563
560
 
564
- function StepBack({ link }) {
561
+ function StepBack({ iconName = "arrow_back", text = "Weitere Möglichkeiten" }) {
565
562
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
566
- React__default["default"].createElement("a", { href: link },
567
- React__default["default"].createElement("div", { className: styles$3.container },
568
- React__default["default"].createElement(SvgIcon, { iconName: 'arrow_back' }),
569
- "Weitere M\u00F6glichkeiten"))));
563
+ React__default["default"].createElement("div", { className: styles$3.container },
564
+ React__default["default"].createElement(SvgIcon, { iconName: iconName }),
565
+ text)));
570
566
  }
571
567
 
572
568
  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 +623,10 @@ var css_248z$1 = ".styles-module_container__ItBx0 {\n display: flex;\n flex-di
627
623
  var styles$1 = {"container":"styles-module_container__ItBx0"};
628
624
  styleInject(css_248z$1);
629
625
 
630
- function TextWithIcon({ iconName, label, href }) {
631
- return (React__default["default"].createElement("div", { className: styles$1.container }, href ?
632
- React__default["default"].createElement("a", { href: href },
633
- React__default["default"].createElement(SvgIcon, { iconName: iconName }),
634
- React__default["default"].createElement("span", null, label))
635
- :
636
- React__default["default"].createElement(React__default["default"].Fragment, null,
637
- React__default["default"].createElement(SvgIcon, { iconName: iconName }),
638
- React__default["default"].createElement("span", null, label))));
626
+ function TextWithIcon({ iconName, label, }) {
627
+ return (React__default["default"].createElement("div", { className: styles$1.container },
628
+ React__default["default"].createElement(SvgIcon, { iconName: iconName }),
629
+ React__default["default"].createElement("span", null, label)));
639
630
  }
640
631
 
641
632
  function degreesToRadians(degrees) {
package/dist/index.esm.js CHANGED
@@ -242,7 +242,7 @@ var css_248z$f = "@keyframes styles-module_show__OLTZH {\n from {\n max-heig
242
242
  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"};
243
243
  styleInject(css_248z$f);
244
244
 
245
- function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", autoComplete, showForgotLink = false }) {
245
+ function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", autoComplete, forgotLink = false }) {
246
246
  const [value, setValue] = useState("");
247
247
  const [hidePassword, setHidePassword] = useState(true);
248
248
  return (React.createElement(React.Fragment, null,
@@ -253,12 +253,11 @@ function InputPassword({ placeholder = "", title = "Passwort", name, isVisible =
253
253
  React.createElement("span", { className: styles$f.label_text }, title)),
254
254
  React.createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$f.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
255
255
  React.createElement(SvgIcon, { iconName: hidePassword ? "visibility" : "visibility_off" }))),
256
- showForgotLink &&
257
- React.createElement("a", { href: "/auth/forgot/1" },
258
- React.createElement("span", { className: styles$f.forgot_label }, "Passwort vergessen?")))));
256
+ forgotLink &&
257
+ React.createElement("div", { className: styles$f.forgot_container }, forgotLink))));
259
258
  }
260
259
 
261
- 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}";
260
+ 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}";
262
261
  var styles$e = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
263
262
  styleInject(css_248z$e);
264
263
 
@@ -326,7 +325,7 @@ function InputPin({ name, length, onFinished = () => { } }) {
326
325
  }
327
326
  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) });
328
327
  })),
329
- React.createElement("a", { onClick: resetValues }, "Zur\u00FCcksetzen"))));
328
+ React.createElement("button", { onClick: resetValues }, "Zur\u00FCcksetzen"))));
330
329
  }
331
330
 
332
331
  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 +352,23 @@ var css_248z$c = ".styles-module_box__Z0iod {\n background: #F4F4F4;\n width:
353
352
  var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
354
353
  styleInject(css_248z$c);
355
354
 
356
- function OptionField({ headline, description, link, iconName }) {
355
+ function OptionField({ headline, description, iconName }) {
357
356
  return (React.createElement(React.Fragment, null,
358
- React.createElement("a", { href: link },
359
- React.createElement("div", { className: styles$c.box },
360
- React.createElement("div", { className: styles$c.left_side }, iconName && React.createElement(SvgIcon, { iconName: iconName })),
361
- React.createElement("div", { className: styles$c.right_side },
362
- React.createElement("h4", null, headline),
363
- React.createElement("p", null, description))))));
357
+ React.createElement("div", { className: styles$c.box },
358
+ React.createElement("div", { className: styles$c.left_side }, iconName && React.createElement(SvgIcon, { iconName: iconName })),
359
+ React.createElement("div", { className: styles$c.right_side },
360
+ React.createElement("h4", null, headline),
361
+ React.createElement("p", null, description)))));
364
362
  }
365
363
 
366
364
  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}";
367
365
  var styles$b = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
368
366
  styleInject(css_248z$b);
369
367
 
370
- function OptionFieldHorizontal({ title, href, iconName, preselected = false }) {
371
- return (React.createElement("a", { href: href },
372
- React.createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" ") },
373
- React.createElement(SvgIcon, { iconName: iconName, size: "32px" }),
374
- React.createElement("h3", null, title))));
368
+ function OptionFieldHorizontal({ title, iconName, preselected = false }) {
369
+ return (React.createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" ") },
370
+ React.createElement(SvgIcon, { iconName: iconName, size: "32px" }),
371
+ React.createElement("h3", null, title)));
375
372
  }
376
373
 
377
374
  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 +550,11 @@ var css_248z$3 = ".styles-module_container__xRQNT {\n display: flex;\n flex-di
553
550
  var styles$3 = {"container":"styles-module_container__xRQNT"};
554
551
  styleInject(css_248z$3);
555
552
 
556
- function StepBack({ link }) {
553
+ function StepBack({ iconName = "arrow_back", text = "Weitere Möglichkeiten" }) {
557
554
  return (React.createElement(React.Fragment, null,
558
- React.createElement("a", { href: link },
559
- React.createElement("div", { className: styles$3.container },
560
- React.createElement(SvgIcon, { iconName: 'arrow_back' }),
561
- "Weitere M\u00F6glichkeiten"))));
555
+ React.createElement("div", { className: styles$3.container },
556
+ React.createElement(SvgIcon, { iconName: iconName }),
557
+ text)));
562
558
  }
563
559
 
564
560
  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 +615,10 @@ var css_248z$1 = ".styles-module_container__ItBx0 {\n display: flex;\n flex-di
619
615
  var styles$1 = {"container":"styles-module_container__ItBx0"};
620
616
  styleInject(css_248z$1);
621
617
 
622
- function TextWithIcon({ iconName, label, href }) {
623
- return (React.createElement("div", { className: styles$1.container }, href ?
624
- React.createElement("a", { href: href },
625
- React.createElement(SvgIcon, { iconName: iconName }),
626
- React.createElement("span", null, label))
627
- :
628
- React.createElement(React.Fragment, null,
629
- React.createElement(SvgIcon, { iconName: iconName }),
630
- React.createElement("span", null, label))));
618
+ function TextWithIcon({ iconName, label, }) {
619
+ return (React.createElement("div", { className: styles$1.container },
620
+ React.createElement(SvgIcon, { iconName: iconName }),
621
+ React.createElement("span", null, label)));
631
622
  }
632
623
 
633
624
  function degreesToRadians(degrees) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "math-main-components",
3
- "version": "0.0.13",
3
+ "version": "0.0.14",
4
4
  "author": "Emilian Scheel",
5
5
  "files": [
6
6
  "dist/**/*"