math-main-components 0.0.41 → 0.0.43

package/dist/components/AuthButton/AuthButton.d.ts

@@ -1,9 +1,9 @@
-import React, { MouseEventHandler } from 'react';
+import React, { MouseEvent } from 'react';
 export declare function AuthButton({ text, type, theme, iconName, isVisible, onClick }: {
     text: string | undefined;
     type?: 'submit' | 'reset' | 'button' | undefined;
     theme?: 'primary' | 'secondary' | undefined;
     iconName?: string;
     isVisible?: boolean;
-    onClick?: MouseEventHandler | undefined;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }): React.JSX.Element;

package/dist/components/Dialog/Dialog.d.ts

@@ -6,7 +6,7 @@ export interface DialogData {
 export declare function Dialog({ data, text, onClose, onSubmit, children }: {
     data?: DialogData;
     text?: any;
-    onClose?: (event: React.MouseEventHandler<HTMLDivElement>, data: any) => void;
-    onSubmit?: (event: React.MouseEventHandler<HTMLButtonElement>, data: any) => void;
+    onClose?: (event: React.MouseEvent<HTMLDivElement>, data: any) => void;
+    onSubmit?: (event: React.MouseEvent<HTMLButtonElement>, data: any) => void;
     children: any;
 }): React.JSX.Element;

package/dist/components/SearchChips/SearchChips.d.ts

@@ -5,7 +5,8 @@ export declare class SearchChip {
     selected: boolean;
     constructor(title: string, value: string);
 }
-export declare function SearchChips({ items, onChange }: {
+export declare function SearchChips({ items, onChange, chipsVisible }: {
     items: SearchChip[];
     onChange?: (chips: SearchChip[]) => void;
+    chipsVisible: number;
 }): React.JSX.Element;

package/dist/components/SvgIcon/SvgIcon.types.d.ts

@@ -1,8 +1,8 @@
-import { MouseEventHandler } from "react";
+import { MouseEvent } from "react";
 export interface SvgIconProps {
     iconName?: string;
     size?: string;
     fill?: string;
     className?: string;
-    onClick?: MouseEventHandler<HTMLSpanElement>;
+    onClick?: (event: MouseEvent<HTMLSpanElement>) => void;
 }

package/dist/index.cjs.js

@@ -57,12 +57,11 @@ var css_248z$r = ".styles-module_container__4978M {\n  max-width: 100%;\n  width
 var styles$r = {"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$r);
 
-function AuthButton({ text, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, onClick = (event) => { } }) {
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: [styles$r.container, isVisible ? styles$r.visible : styles$r.hidden, ["arrow_forward"].includes(iconName) ? styles$r.rotate : null].join(" ") },
-            React__default["default"].createElement("button", { type: type, className: `${styles$r.button} ${styles$r[theme]}`, onClick: onClick },
-                text,
-                React__default["default"].createElement(SvgIcon, { iconName: iconName })))));
+function AuthButton({ text, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, onClick }) {
+    return (React__default["default"].createElement("div", { className: [styles$r.container, isVisible ? styles$r.visible : styles$r.hidden, ["arrow_forward"].includes(iconName) ? styles$r.rotate : null].join(" ") },
+        React__default["default"].createElement("button", { type: type, className: `${styles$r.button} ${styles$r[theme]}`, onClick: onClick },
+            text,
+            React__default["default"].createElement(SvgIcon, { iconName: iconName }))));
 }
 
 var css_248z$q = ".styles-module_card__bOd85 {\n  background: #F4F4F4;\n  border: 1px solid #B1B1B1;\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: grey;\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: grey;\n  font-weight: 400;\n  font-size: 18px;\n}";
@@ -463,8 +462,8 @@ function RedirectButton({ type = "forward", onClick }) {
                 React__default["default"].createElement("span", null, "Zur\u00FCck"))));
 }
 
-var css_248z$6 = ".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  padding: 10px 18px;\n  background: #F0F0F0;\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: #565656;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:hover {\n  background: #e5e5e5;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD {\n  background: #C6D4F8;\n  color: #0075FF;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD span {\n  color: #0075FF;\n}";
-var styles$6 = {"container":"styles-module_container__VreeH","chip":"styles-module_chip__EvZ4J","selected":"styles-module_selected__sArTD"};
+var css_248z$6 = ".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: #F0F0F0;\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: #565656;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:hover {\n  background: #e5e5e5;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD {\n  background: #C6D4F8;\n  color: #0075FF;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD span {\n  color: #0075FF;\n}";
+var styles$6 = {"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$6);
 
 class SearchChip {
@@ -476,7 +475,8 @@ class SearchChip {
         this.value = value;
     }
 }
-function SearchChips({ items, onChange }) {
+function SearchChips({ items, onChange, chipsVisible = 9 }) {
+    const [showAll, setShowAll] = React.useState(false);
     const [chips, setChips] = React.useState(items);
     function onClick(item, index) {
         const newChips = [...chips];
@@ -485,9 +485,14 @@ function SearchChips({ items, onChange }) {
         if (onChange)
             onChange(newChips);
     }
-    return (React__default["default"].createElement("div", { className: styles$6.container }, chips.map((item, index) => React__default["default"].createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$6.chip, item.selected ? styles$6.selected : styles$6.not_selected].join(" ") },
-        React__default["default"].createElement(SvgIcon, { iconName: item.selected ? "close" : "filter_list", size: "20px" }),
-        item.title))));
+    return (React__default["default"].createElement("div", { className: styles$6.container },
+        (showAll ? chips : chips.slice(0, chipsVisible)).map((item, index) => React__default["default"].createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$6.chip, item.selected ? styles$6.selected : styles$6.not_selected].join(" ") },
+            React__default["default"].createElement(SvgIcon, { iconName: item.selected ? "close" : "filter_list", size: "20px" }),
+            item.title)),
+        showAll ?
+            React__default["default"].createElement("div", { className: styles$6.show_all, onClick: () => setShowAll(false) }, "Weniger anzeigen")
+            :
+                React__default["default"].createElement("div", { className: styles$6.show_all, onClick: () => setShowAll(true) }, "Mehr anzeigen")));
 }
 
 var css_248z$5 = ".styles-module_container__k4Z26 {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  margin-top: 30px;\n  margin-bottom: 25px;\n  gap: 10px;\n  position: relative;\n}\n.styles-module_container__k4Z26 button {\n  background: #BFD5FF;\n  padding: 0px 18px;\n  border: none;\n  font-size: 14px;\n  border-radius: 10px;\n  cursor: pointer;\n  color: #0075FF;\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: white;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n  width: 100%;\n  border-radius: 14px;\n  border: 1px solid #C3C3C3;\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 #C3C3C3;\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: grey;\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 #a8a8a8;\n  outline: none;\n  transition: 0.2s ease;\n  width: 100%;\n}\n.styles-module_input__wOJmG:focus, .styles-module_input__wOJmG:active {\n  border-color: #0075FF;\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: white;\n  color: grey;\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: grey;\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: 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__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n  color: #a8a8a8;\n}";

package/dist/index.esm.js

@@ -49,12 +49,11 @@ var css_248z$r = ".styles-module_container__4978M {\n  max-width: 100%;\n  width
 var styles$r = {"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$r);
 
-function AuthButton({ text, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, onClick = (event) => { } }) {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: [styles$r.container, isVisible ? styles$r.visible : styles$r.hidden, ["arrow_forward"].includes(iconName) ? styles$r.rotate : null].join(" ") },
-            React.createElement("button", { type: type, className: `${styles$r.button} ${styles$r[theme]}`, onClick: onClick },
-                text,
-                React.createElement(SvgIcon, { iconName: iconName })))));
+function AuthButton({ text, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, onClick }) {
+    return (React.createElement("div", { className: [styles$r.container, isVisible ? styles$r.visible : styles$r.hidden, ["arrow_forward"].includes(iconName) ? styles$r.rotate : null].join(" ") },
+        React.createElement("button", { type: type, className: `${styles$r.button} ${styles$r[theme]}`, onClick: onClick },
+            text,
+            React.createElement(SvgIcon, { iconName: iconName }))));
 }
 
 var css_248z$q = ".styles-module_card__bOd85 {\n  background: #F4F4F4;\n  border: 1px solid #B1B1B1;\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: grey;\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: grey;\n  font-weight: 400;\n  font-size: 18px;\n}";
@@ -455,8 +454,8 @@ function RedirectButton({ type = "forward", onClick }) {
                 React.createElement("span", null, "Zur\u00FCck"))));
 }
 
-var css_248z$6 = ".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  padding: 10px 18px;\n  background: #F0F0F0;\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: #565656;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:hover {\n  background: #e5e5e5;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD {\n  background: #C6D4F8;\n  color: #0075FF;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD span {\n  color: #0075FF;\n}";
-var styles$6 = {"container":"styles-module_container__VreeH","chip":"styles-module_chip__EvZ4J","selected":"styles-module_selected__sArTD"};
+var css_248z$6 = ".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: #F0F0F0;\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: #565656;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:hover {\n  background: #e5e5e5;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD {\n  background: #C6D4F8;\n  color: #0075FF;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD span {\n  color: #0075FF;\n}";
+var styles$6 = {"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$6);
 
 class SearchChip {
@@ -468,7 +467,8 @@ class SearchChip {
         this.value = value;
     }
 }
-function SearchChips({ items, onChange }) {
+function SearchChips({ items, onChange, chipsVisible = 9 }) {
+    const [showAll, setShowAll] = useState(false);
     const [chips, setChips] = useState(items);
     function onClick(item, index) {
         const newChips = [...chips];
@@ -477,9 +477,14 @@ function SearchChips({ items, onChange }) {
         if (onChange)
             onChange(newChips);
     }
-    return (React.createElement("div", { className: styles$6.container }, chips.map((item, index) => React.createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$6.chip, item.selected ? styles$6.selected : styles$6.not_selected].join(" ") },
-        React.createElement(SvgIcon, { iconName: item.selected ? "close" : "filter_list", size: "20px" }),
-        item.title))));
+    return (React.createElement("div", { className: styles$6.container },
+        (showAll ? chips : chips.slice(0, chipsVisible)).map((item, index) => React.createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$6.chip, item.selected ? styles$6.selected : styles$6.not_selected].join(" ") },
+            React.createElement(SvgIcon, { iconName: item.selected ? "close" : "filter_list", size: "20px" }),
+            item.title)),
+        showAll ?
+            React.createElement("div", { className: styles$6.show_all, onClick: () => setShowAll(false) }, "Weniger anzeigen")
+            :
+                React.createElement("div", { className: styles$6.show_all, onClick: () => setShowAll(true) }, "Mehr anzeigen")));
 }
 
 var css_248z$5 = ".styles-module_container__k4Z26 {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  margin-top: 30px;\n  margin-bottom: 25px;\n  gap: 10px;\n  position: relative;\n}\n.styles-module_container__k4Z26 button {\n  background: #BFD5FF;\n  padding: 0px 18px;\n  border: none;\n  font-size: 14px;\n  border-radius: 10px;\n  cursor: pointer;\n  color: #0075FF;\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: white;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n  width: 100%;\n  border-radius: 14px;\n  border: 1px solid #C3C3C3;\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 #C3C3C3;\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: grey;\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 #a8a8a8;\n  outline: none;\n  transition: 0.2s ease;\n  width: 100%;\n}\n.styles-module_input__wOJmG:focus, .styles-module_input__wOJmG:active {\n  border-color: #0075FF;\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: white;\n  color: grey;\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: grey;\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: 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__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n  color: #a8a8a8;\n}";

package/package.json

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