math-main-components 0.0.39 → 0.0.41

package/dist/components/InputText/InputText.d.ts

@@ -1,5 +1,5 @@
 import React, { MouseEvent } from 'react';
-export declare function InputText({ title, name, placeholder, defaultValue, autoFocus, type, width, available, onInput }: {
+export declare function InputText({ title, name, placeholder, defaultValue, autoFocus, type, width, marginBottom, available, onInput }: {
     title: string;
     name: string;
     placeholder?: string;
@@ -7,6 +7,7 @@ export declare function InputText({ title, name, placeholder, defaultValue, auto
     autoFocus?: boolean;
     type?: string;
     width?: string;
+    marginBottom?: string;
     available?: boolean;
     onInput?: (event: MouseEvent<HTMLInputElement>) => void;
 }): React.JSX.Element;

package/dist/index.cjs.js

@@ -341,14 +341,14 @@ var css_248z$d = ".styles-module_container__zcXGF {\n  display: flex;\n  width:
 var styles$d = {"container":"styles-module_container__zcXGF","input":"styles-module_input__Tpth8","not_available":"styles-module_not_available__CRXjB","label":"styles-module_label__appHO","label_text":"styles-module_label_text__-sKjY","with_title":"styles-module_with_title__L3eGj","valid":"styles-module_valid__zWcOz"};
 styleInject(css_248z$d);
 
-function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", available = true, onInput = (event) => { } }) {
+function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, available = true, onInput = (event) => { } }) {
     const [value, setValue] = React.useState(defaultValue);
     const inputElement = React.useCallback((element) => {
         if (element && autoFocus)
             element.focus();
     }, [autoFocus]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$d.container, style: { width } },
+        React__default["default"].createElement("div", { className: styles$d.container, style: { width, marginBottom } },
             React__default["default"].createElement("input", { className: `${styles$d.input} ${title != undefined ? styles$d.with_title : styles$d.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$d.valid : styles$d.not_valid} ${available ? styles$d.available : styles$d.not_available}`, name: name, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
                     setValue(event.target.value);
                     onInput(event);
@@ -385,7 +385,7 @@ function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }
         React__default["default"].createElement("h3", null, title)));
 }
 
-var css_248z$a = ".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_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;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_red__CHF3e {\n  background: #e40000;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_grey__hdqot {\n  background: #EEEEEE;\n  color: black;\n}";
+var css_248z$a = ".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_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: #e40000;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_grey__hdqot {\n  background: #EEEEEE;\n  color: black;\n}";
 var styles$a = {"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"};
 styleInject(css_248z$a);
 
@@ -628,8 +628,8 @@ function Table({ items, title = "Titel", actions = [], moreActions }) {
                 action.title)))))));
 }
 
-var css_248z$1 = ".styles-module_container__ItBx0 {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  color: grey;\n  padding: 5px 12px;\n  border-radius: 20px;\n}\n\n.styles-module_container__ItBx0 a {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  color: grey;\n  padding: 5px 12px;\n  border-radius: 20px;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__ItBx0 a:hover {\n  color: #0075FF;\n  background: rgb(239, 239, 239);\n}";
-var styles$1 = {"container":"styles-module_container__ItBx0"};
+var css_248z$1 = ".styles-module_container__ItBx0 {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  color: grey;\n  padding: 5px 12px;\n  border-radius: 20px;\n}\n.styles-module_container__ItBx0:hover span {\n  background: linear-gradient(to top, #0075FF 30%, rgb(130, 169, 237) 70%, #0050ab 80%);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  text-fill-color: transparent;\n  background-size: auto 400%;\n  animation: styles-module_textShine__ELfW9 3s ease-in-out infinite alternate;\n}\n\n.styles-module_container__ItBx0 a {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  color: grey;\n  padding: 5px 12px;\n  border-radius: 20px;\n  transition: 0.2s ease-in-out;\n}\n\n@keyframes styles-module_textShine__ELfW9 {\n  0% {\n    background-position: 0% 50%;\n  }\n  100% {\n    background-position: 100% 50%;\n  }\n}";
+var styles$1 = {"container":"styles-module_container__ItBx0","textShine":"styles-module_textShine__ELfW9"};
 styleInject(css_248z$1);
 
 function TextWithIcon({ iconName, label, }) {

package/dist/index.esm.js

@@ -333,14 +333,14 @@ var css_248z$d = ".styles-module_container__zcXGF {\n  display: flex;\n  width:
 var styles$d = {"container":"styles-module_container__zcXGF","input":"styles-module_input__Tpth8","not_available":"styles-module_not_available__CRXjB","label":"styles-module_label__appHO","label_text":"styles-module_label_text__-sKjY","with_title":"styles-module_with_title__L3eGj","valid":"styles-module_valid__zWcOz"};
 styleInject(css_248z$d);
 
-function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", available = true, onInput = (event) => { } }) {
+function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, available = true, onInput = (event) => { } }) {
     const [value, setValue] = useState(defaultValue);
     const inputElement = useCallback((element) => {
         if (element && autoFocus)
             element.focus();
     }, [autoFocus]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles$d.container, style: { width } },
+        React.createElement("div", { className: styles$d.container, style: { width, marginBottom } },
             React.createElement("input", { className: `${styles$d.input} ${title != undefined ? styles$d.with_title : styles$d.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$d.valid : styles$d.not_valid} ${available ? styles$d.available : styles$d.not_available}`, name: name, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
                     setValue(event.target.value);
                     onInput(event);
@@ -377,7 +377,7 @@ function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }
         React.createElement("h3", null, title)));
 }
 
-var css_248z$a = ".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_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;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_red__CHF3e {\n  background: #e40000;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_grey__hdqot {\n  background: #EEEEEE;\n  color: black;\n}";
+var css_248z$a = ".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_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: #e40000;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_grey__hdqot {\n  background: #EEEEEE;\n  color: black;\n}";
 var styles$a = {"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"};
 styleInject(css_248z$a);
 
@@ -620,8 +620,8 @@ function Table({ items, title = "Titel", actions = [], moreActions }) {
                 action.title)))))));
 }
 
-var css_248z$1 = ".styles-module_container__ItBx0 {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  color: grey;\n  padding: 5px 12px;\n  border-radius: 20px;\n}\n\n.styles-module_container__ItBx0 a {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  color: grey;\n  padding: 5px 12px;\n  border-radius: 20px;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__ItBx0 a:hover {\n  color: #0075FF;\n  background: rgb(239, 239, 239);\n}";
-var styles$1 = {"container":"styles-module_container__ItBx0"};
+var css_248z$1 = ".styles-module_container__ItBx0 {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  color: grey;\n  padding: 5px 12px;\n  border-radius: 20px;\n}\n.styles-module_container__ItBx0:hover span {\n  background: linear-gradient(to top, #0075FF 30%, rgb(130, 169, 237) 70%, #0050ab 80%);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  text-fill-color: transparent;\n  background-size: auto 400%;\n  animation: styles-module_textShine__ELfW9 3s ease-in-out infinite alternate;\n}\n\n.styles-module_container__ItBx0 a {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  color: grey;\n  padding: 5px 12px;\n  border-radius: 20px;\n  transition: 0.2s ease-in-out;\n}\n\n@keyframes styles-module_textShine__ELfW9 {\n  0% {\n    background-position: 0% 50%;\n  }\n  100% {\n    background-position: 100% 50%;\n  }\n}";
+var styles$1 = {"container":"styles-module_container__ItBx0","textShine":"styles-module_textShine__ELfW9"};
 styleInject(css_248z$1);
 
 function TextWithIcon({ iconName, label, }) {

package/package.json

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