math-main-components 0.0.193 → 0.0.194
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.
- package/dist/index.cjs.js +45 -42
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +45 -42
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -9395,9 +9395,9 @@ function styleInject(css, ref) {
|
|
|
9395
9395
|
}
|
|
9396
9396
|
}
|
|
9397
9397
|
|
|
9398
|
-
var css_248z$
|
|
9398
|
+
var css_248z$w = ".styles-module_container__3IVfB {\n margin-bottom: 20px;\n background: var(--background-1);\n border-radius: 30px;\n transition: 0.2s ease-in-out;\n color: var(--foreground-1);\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 16px 20px;\n color: var(--foreground-3);\n background: var(--background-2);\n border-radius: 30px;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n transition: 0.2s ease-in-out;\n gap: 10px;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb span {\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb h3 {\n margin: 0;\n font-weight: 400;\n font-size: 16px;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb:hover {\n filter: brightness(0.95);\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R {\n box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_head__xFYQb span {\n rotate: 180deg;\n}\n.styles-module_container__3IVfB .styles-module_content__XAf02 {\n transition: all 0.3s ease-in-out;\n line-height: 1.5;\n}\n.styles-module_container__3IVfB.styles-module_not_active__JcVLz .styles-module_content__XAf02 {\n height: 0;\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_content__XAf02 {\n max-height: auto;\n overflow: visible;\n opacity: 1;\n padding: 10px 0px;\n}";
|
|
9399
9399
|
var styles$v = {"container":"styles-module_container__3IVfB","head":"styles-module_head__xFYQb","active":"styles-module_active__soD8R","content":"styles-module_content__XAf02","not_active":"styles-module_not_active__JcVLz"};
|
|
9400
|
-
styleInject(css_248z$
|
|
9400
|
+
styleInject(css_248z$w);
|
|
9401
9401
|
|
|
9402
9402
|
function Accordeon({ title, children }) {
|
|
9403
9403
|
const [isActive, setActive] = React.useState(false);
|
|
@@ -9408,9 +9408,9 @@ function Accordeon({ title, children }) {
|
|
|
9408
9408
|
React__default["default"].createElement("div", { className: styles$v.content }, children)));
|
|
9409
9409
|
}
|
|
9410
9410
|
|
|
9411
|
-
var css_248z$
|
|
9411
|
+
var css_248z$v = ".styles-module_container__4978M {\n max-width: 100%;\n width: 350px;\n transition: all 0.2s ease-in-out;\n box-sizing: border-box;\n}\n.styles-module_container__4978M.styles-module_visible__uvQwq {\n max-height: 100px;\n opacity: 1;\n}\n.styles-module_container__4978M.styles-module_hidden__Oruyx {\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n}\n\n.styles-module_container__4978M.styles-module_rotate__mmYPQ .styles-module_button__BWOOi:hover span {\n rotate: -45deg;\n}\n\n.styles-module_button__BWOOi {\n padding: 12px 20px;\n background: linear-gradient(60deg, #0075FF, #0056b8);\n background-position-x: right;\n color: white;\n display: flex;\n flex-direction: row;\n width: 100%;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border: none;\n cursor: pointer;\n font-size: 16px;\n font-weight: 400;\n gap: 10px;\n position: relative;\n transition: all 0.5s ease-in-out;\n}\n.styles-module_button__BWOOi span {\n transition: 0.1s ease-in-out;\n}\n.styles-module_button__BWOOi:hover {\n background-position-x: left;\n}\n.styles-module_button__BWOOi.styles-module_secondary__Eoik3 {\n background: var(--background-2);\n color: var(--primary-1);\n border: 1px solid var(--primary-1);\n}\n.styles-module_button__BWOOi.styles-module_secondary__Eoik3 svg {\n fill: var(--primary-1);\n}\n\n@media (max-width: 450px) {\n .styles-module_button__BWOOi {\n font-size: 14px;\n }\n}";
|
|
9412
9412
|
var styles$u = {"container":"styles-module_container__4978M","visible":"styles-module_visible__uvQwq","hidden":"styles-module_hidden__Oruyx","rotate":"styles-module_rotate__mmYPQ","button":"styles-module_button__BWOOi","secondary":"styles-module_secondary__Eoik3"};
|
|
9413
|
-
styleInject(css_248z$
|
|
9413
|
+
styleInject(css_248z$v);
|
|
9414
9414
|
|
|
9415
9415
|
function AuthButton({ id, text, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, style, onClick }) {
|
|
9416
9416
|
return (React__default["default"].createElement("div", { className: [styles$u.container, isVisible ? styles$u.visible : styles$u.hidden, ["arrow_forward"].includes(iconName) ? styles$u.rotate : null].join(" "), style: style },
|
|
@@ -9419,9 +9419,9 @@ function AuthButton({ id, text, type = "submit", theme = "primary", iconName = "
|
|
|
9419
9419
|
React__default["default"].createElement(SvgIcon, { iconName: iconName }))));
|
|
9420
9420
|
}
|
|
9421
9421
|
|
|
9422
|
-
var css_248z$
|
|
9422
|
+
var css_248z$u = ".styles-module_container__TP0rp {\n max-width: 100%;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr {\n padding: 10px 18px;\n border-radius: 40px;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n font-size: 15px;\n font-weight: 400;\n align-items: center;\n border: none;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n background: var(--primary-1);\n color: white;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_lightBlue__7EKfp {\n background: var(--primary-2);\n color: var(--primary-1);\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_red__EhImH {\n background: var(--red-1);\n color: white;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_grey__kAVD1 {\n background: var(--background-1);\n color: var(--foreground-2);\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI {\n width: 44px;\n height: 44px;\n padding: 0;\n align-items: center;\n justify-content: center;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI span {\n font-size: 22px !important;\n}";
|
|
9423
9423
|
var styles$t = {"container":"styles-module_container__TP0rp","button":"styles-module_button__Sh-fr","blue":"styles-module_blue__DRdbo","lightBlue":"styles-module_lightBlue__7EKfp","red":"styles-module_red__EhImH","grey":"styles-module_grey__kAVD1","onlyIcon":"styles-module_onlyIcon__bNVnI"};
|
|
9424
|
-
styleInject(css_248z$
|
|
9424
|
+
styleInject(css_248z$u);
|
|
9425
9425
|
|
|
9426
9426
|
function Button({ id, text, iconName, iconFill = "white", type = "blue", onClick = () => { } }) {
|
|
9427
9427
|
function onClickButton(event) {
|
|
@@ -9435,9 +9435,9 @@ function Button({ id, text, iconName, iconFill = "white", type = "blue", onClick
|
|
|
9435
9435
|
iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName }))));
|
|
9436
9436
|
}
|
|
9437
9437
|
|
|
9438
|
-
var css_248z$
|
|
9438
|
+
var css_248z$t = ".styles-module_card__bOd85 {\n background: var(--background-2);\n border: 1px solid var(--border-2);\n border-radius: 18px;\n transition: 0.2s ease;\n padding: 18px 14px;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n cursor: pointer;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding-top: 30px;\n}\n.styles-module_card__bOd85 span {\n color: var(--foreground-3);\n}\n.styles-module_card__bOd85:hover {\n transform: scale(1.01);\n box-shadow: none;\n background: none;\n}\n.styles-module_card__bOd85 h2 {\n margin-top: 0;\n color: var(--foreground-3);\n font-weight: 400;\n font-size: 18px;\n}";
|
|
9439
9439
|
var styles$s = {"card":"styles-module_card__bOd85"};
|
|
9440
|
-
styleInject(css_248z$
|
|
9440
|
+
styleInject(css_248z$t);
|
|
9441
9441
|
|
|
9442
9442
|
function CardButton({ id, title, iconName, onClick, }) {
|
|
9443
9443
|
function onClickCard(event) {
|
|
@@ -9450,9 +9450,9 @@ function CardButton({ id, title, iconName, onClick, }) {
|
|
|
9450
9450
|
React__default["default"].createElement("h2", null, title)));
|
|
9451
9451
|
}
|
|
9452
9452
|
|
|
9453
|
-
var css_248z$
|
|
9453
|
+
var css_248z$s = ".styles-module_container__gCCnD {\n margin-bottom: 20px;\n width: 343px;\n color: var(--foreground-3);\n}\n.styles-module_container__gCCnD [type=checkbox] {\n position: relative;\n left: 15px;\n top: -4px;\n z-index: 0;\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n margin-left: -3.5px;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n position: absolute;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n width: 17px;\n height: 17px;\n border-radius: 5px;\n border: 2px solid var(--border-2);\n display: block;\n content: \"\";\n float: left;\n margin-right: 8px;\n z-index: 5;\n position: relative;\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n position: absolute;\n opacity: 1;\n color: var(--background-2);\n z-index: 100;\n user-select: none;\n pointer-events: none;\n -webkit-user-select: none;\n font-weight: 500;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n background-color: var(--primary-1);\n border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n background-color: var(--background-4);\n border-color: var(--background-2);\n}";
|
|
9454
9454
|
var styles$r = {"container":"styles-module_container__gCCnD"};
|
|
9455
|
-
styleInject(css_248z$
|
|
9455
|
+
styleInject(css_248z$s);
|
|
9456
9456
|
|
|
9457
9457
|
function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children }) {
|
|
9458
9458
|
return (React__default["default"].createElement("div", { className: styles$r.container },
|
|
@@ -9461,9 +9461,9 @@ function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => {
|
|
|
9461
9461
|
React__default["default"].createElement(SvgIcon, { iconName: "done", size: "21px" })));
|
|
9462
9462
|
}
|
|
9463
9463
|
|
|
9464
|
-
var css_248z$
|
|
9464
|
+
var css_248z$r = ".styles-module_container__OqDNA {\n display: flex;\n flex-direction: row;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(1) {\n background: var(--background-1);\n border-color: var(--background-1);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(2) {\n background: var(--background-2);\n border-color: var(--background-2);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(3) {\n background: var(--background-4);\n border-color: var(--background-4);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:first-child {\n border-top-left-radius: 20px;\n border-bottom-left-radius: 20px;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:last-child {\n border-top-right-radius: 20px;\n border-bottom-right-radius: 20px;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI {\n border: 1px solid transparent;\n padding: 11px 18px;\n font-size: 14px;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI.styles-module_selected__AXIA- {\n background: var(--background-4);\n border-color: var(--primary-1);\n color: var(--primary-1);\n}";
|
|
9465
9465
|
var styles$q = {"container":"styles-module_container__OqDNA","item":"styles-module_item__1SMCI","selected":"styles-module_selected__AXIA-"};
|
|
9466
|
-
styleInject(css_248z$
|
|
9466
|
+
styleInject(css_248z$r);
|
|
9467
9467
|
|
|
9468
9468
|
class ChooseRoleItem {
|
|
9469
9469
|
title;
|
|
@@ -9484,9 +9484,9 @@ function ChooseRole({ roles, defaultSelected, readOnly = false, onChange }) {
|
|
|
9484
9484
|
return (React__default["default"].createElement("div", { className: styles$q.container }, roles.map((item, index) => React__default["default"].createElement("div", { key: index, className: [styles$q.item, selected == item.value ? styles$q.selected : styles$q.not_selected].join(" "), onClick: () => onUpdate(item.value) }, item.title))));
|
|
9485
9485
|
}
|
|
9486
9486
|
|
|
9487
|
-
var css_248z$
|
|
9487
|
+
var css_248z$q = ".styles-module_container__yV6C8 {\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n cursor: pointer;\n padding: 8px 14px;\n border-radius: 30px;\n transition: 0.2s ease-in-out;\n margin-bottom: 20px;\n color: var(--foreground-1);\n}\n.styles-module_container__yV6C8:hover {\n color: var(--primary-1);\n}";
|
|
9488
9488
|
var styles$p = {"container":"styles-module_container__yV6C8"};
|
|
9489
|
-
styleInject(css_248z$
|
|
9489
|
+
styleInject(css_248z$q);
|
|
9490
9490
|
|
|
9491
9491
|
function CopyCode({ code, style, onCopy = () => { } }) {
|
|
9492
9492
|
function onClick() {
|
|
@@ -9500,9 +9500,9 @@ function CopyCode({ code, style, onCopy = () => { } }) {
|
|
|
9500
9500
|
React__default["default"].createElement("input", { type: "hidden", name: "code", value: code })));
|
|
9501
9501
|
}
|
|
9502
9502
|
|
|
9503
|
-
var css_248z$
|
|
9503
|
+
var css_248z$p = ".styles-module_container__9-1MH {\n position: fixed;\n height: 100vh;\n width: 100vw;\n background: var(--background-2);\n backdrop-filter: blur(10px) brightness(70%);\n left: 0;\n top: 0;\n z-index: 10000;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo {\n opacity: 1;\n}\n.styles-module_container__9-1MH.styles-module_disabled__sELpy {\n pointer-events: none;\n opacity: 0;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M {\n background: var(--background-1);\n border-radius: 20px;\n padding: 35px;\n width: 450px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n max-width: 100%;\n box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n cursor: auto;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M h1 {\n font-size: 26px;\n font-weight: 500;\n line-height: 1.5;\n margin-top: 20px;\n margin-bottom: 20px;\n text-align: center;\n color: var(--foreground-1);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS {\n border-radius: 12px;\n color: var(--foreground-1);\n background: var(--background-2);\n padding: 14px 0px;\n border: none;\n outline: none;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n font-size: 16px;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS:hover {\n filter: brightness(0.95);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux {\n border-radius: 12px;\n color: var(--background-1);\n background: var(--primary-1);\n padding: 14px 0px;\n border: none;\n outline: none;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n font-size: 16px;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux:hover {\n background: var(--primary-1);\n}";
|
|
9504
9504
|
var styles$o = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","disabled":"styles-module_disabled__sELpy","dialog_window":"styles-module_dialog_window__0Bn2M","cancel_button":"styles-module_cancel_button__KhwLS","submit_button":"styles-module_submit_button__xLzux"};
|
|
9505
|
-
styleInject(css_248z$
|
|
9505
|
+
styleInject(css_248z$p);
|
|
9506
9506
|
|
|
9507
9507
|
function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }) {
|
|
9508
9508
|
function onClick(event) {
|
|
@@ -9521,9 +9521,9 @@ function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }
|
|
|
9521
9521
|
React__default["default"].createElement("button", { className: styles$o.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
|
|
9522
9522
|
}
|
|
9523
9523
|
|
|
9524
|
-
var css_248z$
|
|
9524
|
+
var css_248z$o = ".styles-module_card__hT9fw {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 20px;\n padding: 100px 0px;\n}\n.styles-module_card__hT9fw h1 {\n margin: 0;\n font-size: 22px;\n font-weight: 500;\n}\n.styles-module_card__hT9fw p {\n margin: 0;\n font-size: 16px;\n}";
|
|
9525
9525
|
var styles$n = {"card":"styles-module_card__hT9fw"};
|
|
9526
|
-
styleInject(css_248z$
|
|
9526
|
+
styleInject(css_248z$o);
|
|
9527
9527
|
|
|
9528
9528
|
function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorhanden.", iconName = "manage_search", button, onClick }) {
|
|
9529
9529
|
return (React__default["default"].createElement("div", { className: styles$n.card },
|
|
@@ -9533,9 +9533,9 @@ function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorh
|
|
|
9533
9533
|
button && React__default["default"].createElement(Button, { text: button, onClick: onClick, type: "lightBlue" })));
|
|
9534
9534
|
}
|
|
9535
9535
|
|
|
9536
|
-
var css_248z$
|
|
9536
|
+
var css_248z$n = ".styles-module_container__HOoBj {\n margin-bottom: 30px;\n}\n.styles-module_container__HOoBj button {\n padding: 12px 18px;\n border-radius: 40px;\n border: none;\n color: white;\n font-weight: 400;\n font-size: 16px;\n background: var(--primary-1);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n}";
|
|
9537
9537
|
var styles$m = {"container":"styles-module_container__HOoBj"};
|
|
9538
|
-
styleInject(css_248z$
|
|
9538
|
+
styleInject(css_248z$n);
|
|
9539
9539
|
|
|
9540
9540
|
function FormButton({ id, text, style = {}, iconName = "", type = "submit", background = "#0075FF", onClick = () => { } }) {
|
|
9541
9541
|
return (React__default["default"].createElement("div", { className: styles$m.container, style: style },
|
|
@@ -9544,9 +9544,9 @@ function FormButton({ id, text, style = {}, iconName = "", type = "submit", back
|
|
|
9544
9544
|
iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName, color: "white" }))));
|
|
9545
9545
|
}
|
|
9546
9546
|
|
|
9547
|
-
var css_248z$
|
|
9547
|
+
var css_248z$m = ".styles-module_container__9wYEm {\n margin-bottom: 30px;\n width: 100%;\n}\n.styles-module_container__9wYEm h1,\n.styles-module_container__9wYEm h2,\n.styles-module_container__9wYEm h3,\n.styles-module_container__9wYEm h4,\n.styles-module_container__9wYEm h5 {\n margin: 0;\n font-weight: 400;\n color: var(--foreground-1);\n}\n.styles-module_container__9wYEm h3 {\n margin-top: 5px;\n}";
|
|
9548
9548
|
var styles$l = {"container":"styles-module_container__9wYEm"};
|
|
9549
|
-
styleInject(css_248z$
|
|
9549
|
+
styleInject(css_248z$m);
|
|
9550
9550
|
|
|
9551
9551
|
function FormText({ title, value, style }) {
|
|
9552
9552
|
return (React__default["default"].createElement("div", { className: styles$l.container, style: style },
|
|
@@ -9554,9 +9554,9 @@ function FormText({ title, value, style }) {
|
|
|
9554
9554
|
React__default["default"].createElement("h3", null, value)));
|
|
9555
9555
|
}
|
|
9556
9556
|
|
|
9557
|
-
var css_248z$
|
|
9557
|
+
var css_248z$l = ".styles-module_container__C99XV {\n margin-right: 8px;\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF {\n background: none;\n padding: none;\n border: none;\n width: 40px;\n height: 40px;\n transition: 0.2s;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 20px;\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF:hover {\n background: var(--background-2);\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF span {\n color: var(--foreground-1) !important;\n}";
|
|
9558
9558
|
var styles$k = {"container":"styles-module_container__C99XV","button":"styles-module_button__pGYkF"};
|
|
9559
|
-
styleInject(css_248z$
|
|
9559
|
+
styleInject(css_248z$l);
|
|
9560
9560
|
|
|
9561
9561
|
function ForwardButton({ onClick }) {
|
|
9562
9562
|
function onClickButton(event) {
|
|
@@ -9573,9 +9573,9 @@ function Gap({ size }) {
|
|
|
9573
9573
|
return (React__default["default"].createElement("div", { style: { height: size } }));
|
|
9574
9574
|
}
|
|
9575
9575
|
|
|
9576
|
-
var css_248z$
|
|
9576
|
+
var css_248z$k = ".styles-module_container__Jr7LQ {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n}\n\n.styles-module_input__v-hUz {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n min-height: 50px;\n line-height: 1.7;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__v-hUz:focus, .styles-module_input__v-hUz:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__v-hUz.styles-module_not_available__6xu3Y, .styles-module_input__v-hUz:invalid {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__Jr7LQ {\n position: relative;\n}\n\n.styles-module_label__SSsD3 {\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__EOAq5 {\n position: absolute;\n top: 20px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__v-hUz.styles-module_with_title__HWcCH::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__v-hUz.styles-module_with_title__HWcCH:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__v-hUz:focus + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5,\n.styles-module_input__v-hUz.styles-module_valid__6geu9 + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5 {\n transform: translateY(-50%);\n left: 15px;\n font-size: 14px;\n top: 0;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__v-hUz.styles-module_valid__6geu9 + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5 {\n color: var(--foreground-3);\n}";
|
|
9577
9577
|
var styles$j = {"container":"styles-module_container__Jr7LQ","input":"styles-module_input__v-hUz","not_available":"styles-module_not_available__6xu3Y","label":"styles-module_label__SSsD3","label_text":"styles-module_label_text__EOAq5","with_title":"styles-module_with_title__HWcCH","valid":"styles-module_valid__6geu9"};
|
|
9578
|
-
styleInject(css_248z$
|
|
9578
|
+
styleInject(css_248z$k);
|
|
9579
9579
|
|
|
9580
9580
|
function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, width = "100%", height = "100px", available = true, onInput }) {
|
|
9581
9581
|
const [value, setValue] = React.useState(defaultValue);
|
|
@@ -9594,9 +9594,9 @@ function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoF
|
|
|
9594
9594
|
React__default["default"].createElement("span", { className: styles$j.label_text }, title)))));
|
|
9595
9595
|
}
|
|
9596
9596
|
|
|
9597
|
-
var css_248z$
|
|
9597
|
+
var css_248z$j = ".styles-module_input__-GKhx {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__-GKhx:focus, .styles-module_input__-GKhx:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__-GKhx.styles-module_not_available__XD1kR, .styles-module_input__-GKhx:invalid {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__--4rV {\n position: relative;\n display: flex;\n flex-direction: column;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_label__mGzwP {\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__d0eMb {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__-GKhx.styles-module_with_title__CGOEs::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__-GKhx.styles-module_with_title__CGOEs:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__-GKhx:focus + .styles-module_label__mGzwP .styles-module_label_text__d0eMb,\n.styles-module_input__-GKhx.styles-module_valid__uj8g- + .styles-module_label__mGzwP .styles-module_label_text__d0eMb {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: #0063d4;\n}\n\n.styles-module_input__-GKhx.styles-module_valid__uj8g- + .styles-module_label__mGzwP .styles-module_label_text__d0eMb {\n color: var(--foreground-3);\n}";
|
|
9598
9598
|
var styles$i = {"input":"styles-module_input__-GKhx","not_available":"styles-module_not_available__XD1kR","container":"styles-module_container__--4rV","label":"styles-module_label__mGzwP","label_text":"styles-module_label_text__d0eMb","with_title":"styles-module_with_title__CGOEs","valid":"styles-module_valid__uj8g-"};
|
|
9599
|
-
styleInject(css_248z$
|
|
9599
|
+
styleInject(css_248z$j);
|
|
9600
9600
|
|
|
9601
9601
|
function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true }) {
|
|
9602
9602
|
const [value, setValue] = React.useState("");
|
|
@@ -9607,9 +9607,9 @@ function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse
|
|
|
9607
9607
|
React__default["default"].createElement("span", { className: styles$i.label_text }, title)))));
|
|
9608
9608
|
}
|
|
9609
9609
|
|
|
9610
|
-
var css_248z$
|
|
9610
|
+
var css_248z$i = ".styles-module_container__IXTeq {\n display: flex;\n flex-direction: row;\n gap: 20px;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__flMT5 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__flMT5:focus, .styles-module_input__flMT5:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_form__chEvQ {\n position: relative;\n flex: 1;\n display: flex;\n}\n\n.styles-module_label__hflX9 {\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__oXgFI {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__flMT5.styles-module_with_title__ubN0L::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__flMT5.styles-module_with_title__ubN0L:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__flMT5:focus + .styles-module_label__hflX9 .styles-module_label_text__oXgFI,\n.styles-module_input__flMT5.styles-module_valid__76xYu + .styles-module_label__hflX9 .styles-module_label_text__oXgFI {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__flMT5.styles-module_valid__76xYu + .styles-module_label__hflX9 .styles-module_label_text__oXgFI {\n color: var(--foreground-3);\n}";
|
|
9611
9611
|
var styles$h = {"container":"styles-module_container__IXTeq","input":"styles-module_input__flMT5","form":"styles-module_form__chEvQ","label":"styles-module_label__hflX9","label_text":"styles-module_label_text__oXgFI","with_title":"styles-module_with_title__ubN0L","valid":"styles-module_valid__76xYu"};
|
|
9612
|
-
styleInject(css_248z$
|
|
9612
|
+
styleInject(css_248z$i);
|
|
9613
9613
|
|
|
9614
9614
|
function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "" }, title = { firstName: "Vorname", lastName: "Nachname" }, defaultValue = { firstName: "", lastName: "" }, onInput = (name, event) => { }, onInputFirstName = (event) => { }, onInputLastName = (event) => { }, }) {
|
|
9615
9615
|
const [firstName, setFirstName] = React.useState(defaultValue.firstName ? defaultValue.firstName : "");
|
|
@@ -9635,9 +9635,9 @@ function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "
|
|
|
9635
9635
|
React__default["default"].createElement("span", { className: styles$h.label_text }, title.lastName)))));
|
|
9636
9636
|
}
|
|
9637
9637
|
|
|
9638
|
-
var css_248z$
|
|
9638
|
+
var css_248z$h = ".styles-module_container__Xk2HY {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__ReFFR {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n width: 100%;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__ReFFR:focus, .styles-module_input__ReFFR:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__ReFFR.styles-module_not_available__mZ5-1 {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__Xk2HY {\n position: relative;\n}\n\n.styles-module_label__4n2Ai {\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__NsKJU {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__ReFFR.styles-module_with_title__vMb1v::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__ReFFR.styles-module_with_title__vMb1v:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__ReFFR:focus + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU,\n.styles-module_input__ReFFR.styles-module_valid__NyP0J + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__ReFFR.styles-module_valid__NyP0J + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU {\n color: var(--foreground-3);\n}";
|
|
9639
9639
|
var styles$g = {"container":"styles-module_container__Xk2HY","input":"styles-module_input__ReFFR","not_available":"styles-module_not_available__mZ5-1","label":"styles-module_label__4n2Ai","label_text":"styles-module_label_text__NsKJU","with_title":"styles-module_with_title__vMb1v","valid":"styles-module_valid__NyP0J"};
|
|
9640
|
-
styleInject(css_248z$
|
|
9640
|
+
styleInject(css_248z$h);
|
|
9641
9641
|
|
|
9642
9642
|
function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "number", width = "100%", available = true, onInput = (event) => { } }) {
|
|
9643
9643
|
const [value, setValue] = React.useState(defaultValue);
|
|
@@ -9655,9 +9655,9 @@ function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFoc
|
|
|
9655
9655
|
React__default["default"].createElement("span", { className: styles$g.label_text }, title)))));
|
|
9656
9656
|
}
|
|
9657
9657
|
|
|
9658
|
-
var css_248z$
|
|
9658
|
+
var css_248z$g = "@keyframes styles-module_show__OLTZH {\n from {\n max-heigth: 0px;\n height: 0px;\n }\n}\n@keyframes styles-module_hide__LAgaY {\n from {\n max-heigth: 0px;\n height: 0px;\n }\n to {\n max-height: fit-content;\n }\n}\n.styles-module_container__UdmOO {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-bottom: 30px;\n max-width: 100%;\n transition: all 0.2s ease-in-out;\n box-sizing: border-box;\n}\n.styles-module_container__UdmOO .styles-module_forgot_label__EeN6a {\n font-size: 12px;\n color: var(--foreground-3);\n}\n.styles-module_container__UdmOO.styles-module_visible__QROqh {\n max-height: 100px;\n opacity: 1;\n}\n.styles-module_container__UdmOO.styles-module_hidden__hDKDO {\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n}\n\n.styles-module_input__sC2fP {\n padding: 14px 20px;\n font-size: 16px;\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n border: 1.5px solid var(--border-2);\n border-right: none;\n outline: none;\n transition: all 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__sC2fP:focus, .styles-module_input__sC2fP:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_hideButton__83mRI {\n outline: none;\n display: flex;\n align-items: center;\n padding: 10px;\n border: 1.5px solid var(--border-2);\n border-left: none;\n background: none;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n cursor: pointer;\n}\n.styles-module_hideButton__83mRI span {\n color: var(--foreground-3);\n}\n\n/* animated title */\n.styles-module_form__m866x {\n position: relative;\n display: flex;\n}\n\n.styles-module_label__8PuaL {\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__FwJ1F {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__sC2fP.styles-module_with_title__dftgq::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__sC2fP.styles-module_with_title__dftgq:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__sC2fP:focus + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F,\n.styles-module_input__sC2fP.styles-module_valid__SM7w5 + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__sC2fP.styles-module_valid__SM7w5 + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F {\n color: var(--foreground-3);\n}";
|
|
9659
9659
|
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"};
|
|
9660
|
-
styleInject(css_248z$
|
|
9660
|
+
styleInject(css_248z$g);
|
|
9661
9661
|
|
|
9662
9662
|
function InputPassword({ id, placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", minLength = 8, autoComplete, forgotLink = false }) {
|
|
9663
9663
|
const [value, setValue] = React.useState("");
|
|
@@ -9674,9 +9674,9 @@ function InputPassword({ id, placeholder = "", title = "Passwort", name, isVisib
|
|
|
9674
9674
|
React__default["default"].createElement("div", { className: styles$f.forgot_container }, forgotLink))));
|
|
9675
9675
|
}
|
|
9676
9676
|
|
|
9677
|
-
var css_248z$
|
|
9677
|
+
var css_248z$f = ".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: var(--primary-1);\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 var(--border-2);\n outline: none;\n transition: 0.2s ease;\n text-align: center;\n font-size: 18px;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_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}\n\n@media (max-width: 450px) {\n .styles-module_input__84v36 {\n width: 25px;\n font-size: 16px;\n }\n .styles-module_input_wrapper__LPIk1 {\n gap: 7px;\n }\n .styles-module_input__84v36:nth-child(3) {\n margin-right: 12px;\n }\n}";
|
|
9678
9678
|
var styles$e = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
|
|
9679
|
-
styleInject(css_248z$
|
|
9679
|
+
styleInject(css_248z$f);
|
|
9680
9680
|
|
|
9681
9681
|
function InputPin({ name, length, onFinished = () => { } }) {
|
|
9682
9682
|
const [state, setState] = React.useState({});
|
|
@@ -9753,9 +9753,9 @@ function InputPin({ name, length, onFinished = () => { } }) {
|
|
|
9753
9753
|
React__default["default"].createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
|
|
9754
9754
|
}
|
|
9755
9755
|
|
|
9756
|
-
var css_248z$
|
|
9756
|
+
var css_248z$e = ".styles-module_container__zcXGF {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__Tpth8 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n border-color: var(--primary-1);\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: var(--red-1);\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: var(--background-1);\n color: var(--foreground-3);\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: var(--foreground-3);\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: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n color: var(--foreground-3);\n}";
|
|
9757
9757
|
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"};
|
|
9758
|
-
styleInject(css_248z$
|
|
9758
|
+
styleInject(css_248z$e);
|
|
9759
9759
|
|
|
9760
9760
|
function InputText({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, autoComplete = "off", available = true, onInput = (event) => { } }) {
|
|
9761
9761
|
const [value, setValue] = React.useState(defaultValue);
|
|
@@ -9774,9 +9774,9 @@ function InputText({ id, title, name, placeholder = "", defaultValue = "", autoF
|
|
|
9774
9774
|
React__default["default"].createElement("span", { className: styles$d.label_text }, title)))));
|
|
9775
9775
|
}
|
|
9776
9776
|
|
|
9777
|
-
var css_248z$
|
|
9777
|
+
var css_248z$d = ".styles-module_box__Z0iod {\n background: var(--background-2);\n width: 400px;\n max-width: 100%;\n border-radius: 22px;\n border: 1px solid var(--border-2);\n display: flex;\n flex-direction: row;\n padding: 18px;\n gap: 18px;\n cursor: pointer;\n margin-bottom: 20px;\n transition: 0.2s ease;\n color: var(--foreground-1);\n}\n.styles-module_box__Z0iod:hover {\n background-color: var(--background-1);\n transform: scale(1.01);\n}\n.styles-module_box__Z0iod .styles-module_left_side__8ObGs {\n width: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 5px;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D {\n flex: 1;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D p {\n color: var(--foreground-2);\n margin: 0;\n text-align: left;\n font-size: 1.1rem;\n line-height: 1.6;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D h4 {\n margin: 0;\n text-align: left;\n font-size: 1.3rem;\n margin-bottom: 16px;\n margin-top: 5px;\n color: var(--foreground-1);\n}\n\n@media (max-width: 550px) {\n .styles-module_box__Z0iod {\n width: auto;\n }\n .styles-module_box__Z0iod .styles-module_right_side__Ypp0D h4 {\n font-size: 1.2rem;\n }\n .styles-module_box__Z0iod .styles-module_right_side__Ypp0D p {\n font-size: 1rem;\n }\n}";
|
|
9778
9778
|
var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
|
|
9779
|
-
styleInject(css_248z$
|
|
9779
|
+
styleInject(css_248z$d);
|
|
9780
9780
|
|
|
9781
9781
|
function OptionField({ id, headline, description, iconName }) {
|
|
9782
9782
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
@@ -9787,9 +9787,9 @@ function OptionField({ id, headline, description, iconName }) {
|
|
|
9787
9787
|
React__default["default"].createElement("p", null, description)))));
|
|
9788
9788
|
}
|
|
9789
9789
|
|
|
9790
|
-
var css_248z$
|
|
9790
|
+
var css_248z$c = ".styles-module_container__XCtqW {\n background: var(--background-1);\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: var(--foreground-1);\n border: 1px solid var(--border-2);\n transition: 0.2s ease-in-out;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n cursor: pointer;\n}\n.styles-module_container__XCtqW:hover {\n background: var(--background-2);\n border-color: var(--border-3);\n}\n.styles-module_container__XCtqW h3 {\n font-weight: 500;\n margin: 0;\n text-align: center;\n}\n\n.styles-module_container__XCtqW.styles-module_preselected__WoSbB {\n border: 1px solid var(--foreground-1);\n}";
|
|
9791
9791
|
var styles$b = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
|
|
9792
|
-
styleInject(css_248z$
|
|
9792
|
+
styleInject(css_248z$c);
|
|
9793
9793
|
|
|
9794
9794
|
function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }) {
|
|
9795
9795
|
function onClickDiv(event) {
|
|
@@ -9802,6 +9802,9 @@ function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }
|
|
|
9802
9802
|
React__default["default"].createElement("h3", null, title)));
|
|
9803
9803
|
}
|
|
9804
9804
|
|
|
9805
|
+
var css_248z$b = ".styles-module_popover__3ZbOL {\n overflow-y: scroll;\n overflow-x: hidden;\n margin: 0 auto;\n margin-top: 30px;\n z-index: 10000;\n position: fixed;\n border-top-left-radius: 30px;\n border-top-right-radius: 30px;\n transform: translateY(100%);\n width: 700px;\n max-width: 100%;\n height: 100%;\n left: 50%;\n margin-left: -385px;\n transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);\n background: var(--background-1);\n box-shadow: var(--border-3) 0px 1px 2px 0px, var(--border-3) 0px 1px 3px 1px;\n padding: 35px;\n padding-top: 110px;\n top: 0;\n}\n.styles-module_popover__3ZbOL.styles-module_active__-ZVbh {\n transform: translateY(0px);\n}\n.styles-module_popover__3ZbOL h1 {\n margin: 10px 0px;\n font-weight: 900;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.styles-module_popover__3ZbOL h4 {\n font-size: 20px;\n margin: 10px 0px;\n color: var(--foreground-3);\n font-weight: 400;\n}\n.styles-module_popover__3ZbOL p {\n line-height: 2;\n margin: 20px 0px;\n}\n.styles-module_popover__3ZbOL img {\n object-fit: contain;\n border-radius: 10px;\n}\n.styles-module_popover__3ZbOL .styles-module_close_button__5RYuU {\n width: 40px;\n height: 40px;\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--background-4);\n cursor: pointer;\n transition: 0.2s ease-in-out;\n position: absolute;\n top: 35px;\n right: 35px;\n color: var(--foreground-2);\n}\n.styles-module_popover__3ZbOL .styles-module_close_button__5RYuU:hover {\n filter: brightness(0.9);\n}\n\n@media (max-width: 800px) {\n .styles-module_popover__3ZbOL {\n width: calc(100% - 40px);\n left: 0;\n margin-left: 0;\n padding: 20px;\n padding-top: 110px;\n }\n}";
|
|
9806
|
+
styleInject(css_248z$b);
|
|
9807
|
+
|
|
9805
9808
|
var css_248z$a = ".styles-module_container__u4q5n {\n margin-bottom: 50px;\n width: 400px;\n max-width: 100%;\n}\n\n.styles-module_background__jt-ry {\n background: var(--border-2);\n height: 3px;\n position: relative;\n}\n\n.styles-module_progress__Zj-B7 {\n background: var(--foreground-1);\n position: absolute;\n left: 0;\n top: 0;\n height: 3px;\n}";
|
|
9806
9809
|
var styles$a = {"container":"styles-module_container__u4q5n","background":"styles-module_background__jt-ry","progress":"styles-module_progress__Zj-B7"};
|
|
9807
9810
|
styleInject(css_248z$a);
|
package/dist/index.d.ts
CHANGED
|
@@ -20,6 +20,7 @@ export * from './components/InputPin';
|
|
|
20
20
|
export * from './components/InputText';
|
|
21
21
|
export * from './components/OptionField';
|
|
22
22
|
export * from './components/OptionFieldHorizontal';
|
|
23
|
+
export * from './components/Popover';
|
|
23
24
|
export * from './components/ProgressBar';
|
|
24
25
|
export * from './components/RadioButtons';
|
|
25
26
|
export * from './components/RedirectButton';
|
package/dist/index.esm.js
CHANGED
|
@@ -9369,9 +9369,9 @@ function styleInject(css, ref) {
|
|
|
9369
9369
|
}
|
|
9370
9370
|
}
|
|
9371
9371
|
|
|
9372
|
-
var css_248z$
|
|
9372
|
+
var css_248z$w = ".styles-module_container__3IVfB {\n margin-bottom: 20px;\n background: var(--background-1);\n border-radius: 30px;\n transition: 0.2s ease-in-out;\n color: var(--foreground-1);\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 16px 20px;\n color: var(--foreground-3);\n background: var(--background-2);\n border-radius: 30px;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n transition: 0.2s ease-in-out;\n gap: 10px;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb span {\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb h3 {\n margin: 0;\n font-weight: 400;\n font-size: 16px;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb:hover {\n filter: brightness(0.95);\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R {\n box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_head__xFYQb span {\n rotate: 180deg;\n}\n.styles-module_container__3IVfB .styles-module_content__XAf02 {\n transition: all 0.3s ease-in-out;\n line-height: 1.5;\n}\n.styles-module_container__3IVfB.styles-module_not_active__JcVLz .styles-module_content__XAf02 {\n height: 0;\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_content__XAf02 {\n max-height: auto;\n overflow: visible;\n opacity: 1;\n padding: 10px 0px;\n}";
|
|
9373
9373
|
var styles$v = {"container":"styles-module_container__3IVfB","head":"styles-module_head__xFYQb","active":"styles-module_active__soD8R","content":"styles-module_content__XAf02","not_active":"styles-module_not_active__JcVLz"};
|
|
9374
|
-
styleInject(css_248z$
|
|
9374
|
+
styleInject(css_248z$w);
|
|
9375
9375
|
|
|
9376
9376
|
function Accordeon({ title, children }) {
|
|
9377
9377
|
const [isActive, setActive] = useState(false);
|
|
@@ -9382,9 +9382,9 @@ function Accordeon({ title, children }) {
|
|
|
9382
9382
|
React__default.createElement("div", { className: styles$v.content }, children)));
|
|
9383
9383
|
}
|
|
9384
9384
|
|
|
9385
|
-
var css_248z$
|
|
9385
|
+
var css_248z$v = ".styles-module_container__4978M {\n max-width: 100%;\n width: 350px;\n transition: all 0.2s ease-in-out;\n box-sizing: border-box;\n}\n.styles-module_container__4978M.styles-module_visible__uvQwq {\n max-height: 100px;\n opacity: 1;\n}\n.styles-module_container__4978M.styles-module_hidden__Oruyx {\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n}\n\n.styles-module_container__4978M.styles-module_rotate__mmYPQ .styles-module_button__BWOOi:hover span {\n rotate: -45deg;\n}\n\n.styles-module_button__BWOOi {\n padding: 12px 20px;\n background: linear-gradient(60deg, #0075FF, #0056b8);\n background-position-x: right;\n color: white;\n display: flex;\n flex-direction: row;\n width: 100%;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border: none;\n cursor: pointer;\n font-size: 16px;\n font-weight: 400;\n gap: 10px;\n position: relative;\n transition: all 0.5s ease-in-out;\n}\n.styles-module_button__BWOOi span {\n transition: 0.1s ease-in-out;\n}\n.styles-module_button__BWOOi:hover {\n background-position-x: left;\n}\n.styles-module_button__BWOOi.styles-module_secondary__Eoik3 {\n background: var(--background-2);\n color: var(--primary-1);\n border: 1px solid var(--primary-1);\n}\n.styles-module_button__BWOOi.styles-module_secondary__Eoik3 svg {\n fill: var(--primary-1);\n}\n\n@media (max-width: 450px) {\n .styles-module_button__BWOOi {\n font-size: 14px;\n }\n}";
|
|
9386
9386
|
var styles$u = {"container":"styles-module_container__4978M","visible":"styles-module_visible__uvQwq","hidden":"styles-module_hidden__Oruyx","rotate":"styles-module_rotate__mmYPQ","button":"styles-module_button__BWOOi","secondary":"styles-module_secondary__Eoik3"};
|
|
9387
|
-
styleInject(css_248z$
|
|
9387
|
+
styleInject(css_248z$v);
|
|
9388
9388
|
|
|
9389
9389
|
function AuthButton({ id, text, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, style, onClick }) {
|
|
9390
9390
|
return (React__default.createElement("div", { className: [styles$u.container, isVisible ? styles$u.visible : styles$u.hidden, ["arrow_forward"].includes(iconName) ? styles$u.rotate : null].join(" "), style: style },
|
|
@@ -9393,9 +9393,9 @@ function AuthButton({ id, text, type = "submit", theme = "primary", iconName = "
|
|
|
9393
9393
|
React__default.createElement(SvgIcon, { iconName: iconName }))));
|
|
9394
9394
|
}
|
|
9395
9395
|
|
|
9396
|
-
var css_248z$
|
|
9396
|
+
var css_248z$u = ".styles-module_container__TP0rp {\n max-width: 100%;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr {\n padding: 10px 18px;\n border-radius: 40px;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n font-size: 15px;\n font-weight: 400;\n align-items: center;\n border: none;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n background: var(--primary-1);\n color: white;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_lightBlue__7EKfp {\n background: var(--primary-2);\n color: var(--primary-1);\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_red__EhImH {\n background: var(--red-1);\n color: white;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_grey__kAVD1 {\n background: var(--background-1);\n color: var(--foreground-2);\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI {\n width: 44px;\n height: 44px;\n padding: 0;\n align-items: center;\n justify-content: center;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI span {\n font-size: 22px !important;\n}";
|
|
9397
9397
|
var styles$t = {"container":"styles-module_container__TP0rp","button":"styles-module_button__Sh-fr","blue":"styles-module_blue__DRdbo","lightBlue":"styles-module_lightBlue__7EKfp","red":"styles-module_red__EhImH","grey":"styles-module_grey__kAVD1","onlyIcon":"styles-module_onlyIcon__bNVnI"};
|
|
9398
|
-
styleInject(css_248z$
|
|
9398
|
+
styleInject(css_248z$u);
|
|
9399
9399
|
|
|
9400
9400
|
function Button({ id, text, iconName, iconFill = "white", type = "blue", onClick = () => { } }) {
|
|
9401
9401
|
function onClickButton(event) {
|
|
@@ -9409,9 +9409,9 @@ function Button({ id, text, iconName, iconFill = "white", type = "blue", onClick
|
|
|
9409
9409
|
iconName && React__default.createElement(SvgIcon, { iconName: iconName }))));
|
|
9410
9410
|
}
|
|
9411
9411
|
|
|
9412
|
-
var css_248z$
|
|
9412
|
+
var css_248z$t = ".styles-module_card__bOd85 {\n background: var(--background-2);\n border: 1px solid var(--border-2);\n border-radius: 18px;\n transition: 0.2s ease;\n padding: 18px 14px;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n cursor: pointer;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding-top: 30px;\n}\n.styles-module_card__bOd85 span {\n color: var(--foreground-3);\n}\n.styles-module_card__bOd85:hover {\n transform: scale(1.01);\n box-shadow: none;\n background: none;\n}\n.styles-module_card__bOd85 h2 {\n margin-top: 0;\n color: var(--foreground-3);\n font-weight: 400;\n font-size: 18px;\n}";
|
|
9413
9413
|
var styles$s = {"card":"styles-module_card__bOd85"};
|
|
9414
|
-
styleInject(css_248z$
|
|
9414
|
+
styleInject(css_248z$t);
|
|
9415
9415
|
|
|
9416
9416
|
function CardButton({ id, title, iconName, onClick, }) {
|
|
9417
9417
|
function onClickCard(event) {
|
|
@@ -9424,9 +9424,9 @@ function CardButton({ id, title, iconName, onClick, }) {
|
|
|
9424
9424
|
React__default.createElement("h2", null, title)));
|
|
9425
9425
|
}
|
|
9426
9426
|
|
|
9427
|
-
var css_248z$
|
|
9427
|
+
var css_248z$s = ".styles-module_container__gCCnD {\n margin-bottom: 20px;\n width: 343px;\n color: var(--foreground-3);\n}\n.styles-module_container__gCCnD [type=checkbox] {\n position: relative;\n left: 15px;\n top: -4px;\n z-index: 0;\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n margin-left: -3.5px;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n position: absolute;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n width: 17px;\n height: 17px;\n border-radius: 5px;\n border: 2px solid var(--border-2);\n display: block;\n content: \"\";\n float: left;\n margin-right: 8px;\n z-index: 5;\n position: relative;\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n position: absolute;\n opacity: 1;\n color: var(--background-2);\n z-index: 100;\n user-select: none;\n pointer-events: none;\n -webkit-user-select: none;\n font-weight: 500;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n background-color: var(--primary-1);\n border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n background-color: var(--background-4);\n border-color: var(--background-2);\n}";
|
|
9428
9428
|
var styles$r = {"container":"styles-module_container__gCCnD"};
|
|
9429
|
-
styleInject(css_248z$
|
|
9429
|
+
styleInject(css_248z$s);
|
|
9430
9430
|
|
|
9431
9431
|
function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children }) {
|
|
9432
9432
|
return (React__default.createElement("div", { className: styles$r.container },
|
|
@@ -9435,9 +9435,9 @@ function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => {
|
|
|
9435
9435
|
React__default.createElement(SvgIcon, { iconName: "done", size: "21px" })));
|
|
9436
9436
|
}
|
|
9437
9437
|
|
|
9438
|
-
var css_248z$
|
|
9438
|
+
var css_248z$r = ".styles-module_container__OqDNA {\n display: flex;\n flex-direction: row;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(1) {\n background: var(--background-1);\n border-color: var(--background-1);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(2) {\n background: var(--background-2);\n border-color: var(--background-2);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(3) {\n background: var(--background-4);\n border-color: var(--background-4);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:first-child {\n border-top-left-radius: 20px;\n border-bottom-left-radius: 20px;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:last-child {\n border-top-right-radius: 20px;\n border-bottom-right-radius: 20px;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI {\n border: 1px solid transparent;\n padding: 11px 18px;\n font-size: 14px;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI.styles-module_selected__AXIA- {\n background: var(--background-4);\n border-color: var(--primary-1);\n color: var(--primary-1);\n}";
|
|
9439
9439
|
var styles$q = {"container":"styles-module_container__OqDNA","item":"styles-module_item__1SMCI","selected":"styles-module_selected__AXIA-"};
|
|
9440
|
-
styleInject(css_248z$
|
|
9440
|
+
styleInject(css_248z$r);
|
|
9441
9441
|
|
|
9442
9442
|
class ChooseRoleItem {
|
|
9443
9443
|
title;
|
|
@@ -9458,9 +9458,9 @@ function ChooseRole({ roles, defaultSelected, readOnly = false, onChange }) {
|
|
|
9458
9458
|
return (React__default.createElement("div", { className: styles$q.container }, roles.map((item, index) => React__default.createElement("div", { key: index, className: [styles$q.item, selected == item.value ? styles$q.selected : styles$q.not_selected].join(" "), onClick: () => onUpdate(item.value) }, item.title))));
|
|
9459
9459
|
}
|
|
9460
9460
|
|
|
9461
|
-
var css_248z$
|
|
9461
|
+
var css_248z$q = ".styles-module_container__yV6C8 {\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n cursor: pointer;\n padding: 8px 14px;\n border-radius: 30px;\n transition: 0.2s ease-in-out;\n margin-bottom: 20px;\n color: var(--foreground-1);\n}\n.styles-module_container__yV6C8:hover {\n color: var(--primary-1);\n}";
|
|
9462
9462
|
var styles$p = {"container":"styles-module_container__yV6C8"};
|
|
9463
|
-
styleInject(css_248z$
|
|
9463
|
+
styleInject(css_248z$q);
|
|
9464
9464
|
|
|
9465
9465
|
function CopyCode({ code, style, onCopy = () => { } }) {
|
|
9466
9466
|
function onClick() {
|
|
@@ -9474,9 +9474,9 @@ function CopyCode({ code, style, onCopy = () => { } }) {
|
|
|
9474
9474
|
React__default.createElement("input", { type: "hidden", name: "code", value: code })));
|
|
9475
9475
|
}
|
|
9476
9476
|
|
|
9477
|
-
var css_248z$
|
|
9477
|
+
var css_248z$p = ".styles-module_container__9-1MH {\n position: fixed;\n height: 100vh;\n width: 100vw;\n background: var(--background-2);\n backdrop-filter: blur(10px) brightness(70%);\n left: 0;\n top: 0;\n z-index: 10000;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo {\n opacity: 1;\n}\n.styles-module_container__9-1MH.styles-module_disabled__sELpy {\n pointer-events: none;\n opacity: 0;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M {\n background: var(--background-1);\n border-radius: 20px;\n padding: 35px;\n width: 450px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n max-width: 100%;\n box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n cursor: auto;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M h1 {\n font-size: 26px;\n font-weight: 500;\n line-height: 1.5;\n margin-top: 20px;\n margin-bottom: 20px;\n text-align: center;\n color: var(--foreground-1);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS {\n border-radius: 12px;\n color: var(--foreground-1);\n background: var(--background-2);\n padding: 14px 0px;\n border: none;\n outline: none;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n font-size: 16px;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS:hover {\n filter: brightness(0.95);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux {\n border-radius: 12px;\n color: var(--background-1);\n background: var(--primary-1);\n padding: 14px 0px;\n border: none;\n outline: none;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n font-size: 16px;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux:hover {\n background: var(--primary-1);\n}";
|
|
9478
9478
|
var styles$o = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","disabled":"styles-module_disabled__sELpy","dialog_window":"styles-module_dialog_window__0Bn2M","cancel_button":"styles-module_cancel_button__KhwLS","submit_button":"styles-module_submit_button__xLzux"};
|
|
9479
|
-
styleInject(css_248z$
|
|
9479
|
+
styleInject(css_248z$p);
|
|
9480
9480
|
|
|
9481
9481
|
function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }) {
|
|
9482
9482
|
function onClick(event) {
|
|
@@ -9495,9 +9495,9 @@ function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }
|
|
|
9495
9495
|
React__default.createElement("button", { className: styles$o.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
|
|
9496
9496
|
}
|
|
9497
9497
|
|
|
9498
|
-
var css_248z$
|
|
9498
|
+
var css_248z$o = ".styles-module_card__hT9fw {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 20px;\n padding: 100px 0px;\n}\n.styles-module_card__hT9fw h1 {\n margin: 0;\n font-size: 22px;\n font-weight: 500;\n}\n.styles-module_card__hT9fw p {\n margin: 0;\n font-size: 16px;\n}";
|
|
9499
9499
|
var styles$n = {"card":"styles-module_card__hT9fw"};
|
|
9500
|
-
styleInject(css_248z$
|
|
9500
|
+
styleInject(css_248z$o);
|
|
9501
9501
|
|
|
9502
9502
|
function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorhanden.", iconName = "manage_search", button, onClick }) {
|
|
9503
9503
|
return (React__default.createElement("div", { className: styles$n.card },
|
|
@@ -9507,9 +9507,9 @@ function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorh
|
|
|
9507
9507
|
button && React__default.createElement(Button, { text: button, onClick: onClick, type: "lightBlue" })));
|
|
9508
9508
|
}
|
|
9509
9509
|
|
|
9510
|
-
var css_248z$
|
|
9510
|
+
var css_248z$n = ".styles-module_container__HOoBj {\n margin-bottom: 30px;\n}\n.styles-module_container__HOoBj button {\n padding: 12px 18px;\n border-radius: 40px;\n border: none;\n color: white;\n font-weight: 400;\n font-size: 16px;\n background: var(--primary-1);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n}";
|
|
9511
9511
|
var styles$m = {"container":"styles-module_container__HOoBj"};
|
|
9512
|
-
styleInject(css_248z$
|
|
9512
|
+
styleInject(css_248z$n);
|
|
9513
9513
|
|
|
9514
9514
|
function FormButton({ id, text, style = {}, iconName = "", type = "submit", background = "#0075FF", onClick = () => { } }) {
|
|
9515
9515
|
return (React__default.createElement("div", { className: styles$m.container, style: style },
|
|
@@ -9518,9 +9518,9 @@ function FormButton({ id, text, style = {}, iconName = "", type = "submit", back
|
|
|
9518
9518
|
iconName && React__default.createElement(SvgIcon, { iconName: iconName, color: "white" }))));
|
|
9519
9519
|
}
|
|
9520
9520
|
|
|
9521
|
-
var css_248z$
|
|
9521
|
+
var css_248z$m = ".styles-module_container__9wYEm {\n margin-bottom: 30px;\n width: 100%;\n}\n.styles-module_container__9wYEm h1,\n.styles-module_container__9wYEm h2,\n.styles-module_container__9wYEm h3,\n.styles-module_container__9wYEm h4,\n.styles-module_container__9wYEm h5 {\n margin: 0;\n font-weight: 400;\n color: var(--foreground-1);\n}\n.styles-module_container__9wYEm h3 {\n margin-top: 5px;\n}";
|
|
9522
9522
|
var styles$l = {"container":"styles-module_container__9wYEm"};
|
|
9523
|
-
styleInject(css_248z$
|
|
9523
|
+
styleInject(css_248z$m);
|
|
9524
9524
|
|
|
9525
9525
|
function FormText({ title, value, style }) {
|
|
9526
9526
|
return (React__default.createElement("div", { className: styles$l.container, style: style },
|
|
@@ -9528,9 +9528,9 @@ function FormText({ title, value, style }) {
|
|
|
9528
9528
|
React__default.createElement("h3", null, value)));
|
|
9529
9529
|
}
|
|
9530
9530
|
|
|
9531
|
-
var css_248z$
|
|
9531
|
+
var css_248z$l = ".styles-module_container__C99XV {\n margin-right: 8px;\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF {\n background: none;\n padding: none;\n border: none;\n width: 40px;\n height: 40px;\n transition: 0.2s;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 20px;\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF:hover {\n background: var(--background-2);\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF span {\n color: var(--foreground-1) !important;\n}";
|
|
9532
9532
|
var styles$k = {"container":"styles-module_container__C99XV","button":"styles-module_button__pGYkF"};
|
|
9533
|
-
styleInject(css_248z$
|
|
9533
|
+
styleInject(css_248z$l);
|
|
9534
9534
|
|
|
9535
9535
|
function ForwardButton({ onClick }) {
|
|
9536
9536
|
function onClickButton(event) {
|
|
@@ -9547,9 +9547,9 @@ function Gap({ size }) {
|
|
|
9547
9547
|
return (React__default.createElement("div", { style: { height: size } }));
|
|
9548
9548
|
}
|
|
9549
9549
|
|
|
9550
|
-
var css_248z$
|
|
9550
|
+
var css_248z$k = ".styles-module_container__Jr7LQ {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n}\n\n.styles-module_input__v-hUz {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n min-height: 50px;\n line-height: 1.7;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__v-hUz:focus, .styles-module_input__v-hUz:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__v-hUz.styles-module_not_available__6xu3Y, .styles-module_input__v-hUz:invalid {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__Jr7LQ {\n position: relative;\n}\n\n.styles-module_label__SSsD3 {\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__EOAq5 {\n position: absolute;\n top: 20px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__v-hUz.styles-module_with_title__HWcCH::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__v-hUz.styles-module_with_title__HWcCH:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__v-hUz:focus + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5,\n.styles-module_input__v-hUz.styles-module_valid__6geu9 + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5 {\n transform: translateY(-50%);\n left: 15px;\n font-size: 14px;\n top: 0;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__v-hUz.styles-module_valid__6geu9 + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5 {\n color: var(--foreground-3);\n}";
|
|
9551
9551
|
var styles$j = {"container":"styles-module_container__Jr7LQ","input":"styles-module_input__v-hUz","not_available":"styles-module_not_available__6xu3Y","label":"styles-module_label__SSsD3","label_text":"styles-module_label_text__EOAq5","with_title":"styles-module_with_title__HWcCH","valid":"styles-module_valid__6geu9"};
|
|
9552
|
-
styleInject(css_248z$
|
|
9552
|
+
styleInject(css_248z$k);
|
|
9553
9553
|
|
|
9554
9554
|
function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, width = "100%", height = "100px", available = true, onInput }) {
|
|
9555
9555
|
const [value, setValue] = useState(defaultValue);
|
|
@@ -9568,9 +9568,9 @@ function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoF
|
|
|
9568
9568
|
React__default.createElement("span", { className: styles$j.label_text }, title)))));
|
|
9569
9569
|
}
|
|
9570
9570
|
|
|
9571
|
-
var css_248z$
|
|
9571
|
+
var css_248z$j = ".styles-module_input__-GKhx {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__-GKhx:focus, .styles-module_input__-GKhx:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__-GKhx.styles-module_not_available__XD1kR, .styles-module_input__-GKhx:invalid {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__--4rV {\n position: relative;\n display: flex;\n flex-direction: column;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_label__mGzwP {\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__d0eMb {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__-GKhx.styles-module_with_title__CGOEs::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__-GKhx.styles-module_with_title__CGOEs:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__-GKhx:focus + .styles-module_label__mGzwP .styles-module_label_text__d0eMb,\n.styles-module_input__-GKhx.styles-module_valid__uj8g- + .styles-module_label__mGzwP .styles-module_label_text__d0eMb {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: #0063d4;\n}\n\n.styles-module_input__-GKhx.styles-module_valid__uj8g- + .styles-module_label__mGzwP .styles-module_label_text__d0eMb {\n color: var(--foreground-3);\n}";
|
|
9572
9572
|
var styles$i = {"input":"styles-module_input__-GKhx","not_available":"styles-module_not_available__XD1kR","container":"styles-module_container__--4rV","label":"styles-module_label__mGzwP","label_text":"styles-module_label_text__d0eMb","with_title":"styles-module_with_title__CGOEs","valid":"styles-module_valid__uj8g-"};
|
|
9573
|
-
styleInject(css_248z$
|
|
9573
|
+
styleInject(css_248z$j);
|
|
9574
9574
|
|
|
9575
9575
|
function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true }) {
|
|
9576
9576
|
const [value, setValue] = useState("");
|
|
@@ -9581,9 +9581,9 @@ function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse
|
|
|
9581
9581
|
React__default.createElement("span", { className: styles$i.label_text }, title)))));
|
|
9582
9582
|
}
|
|
9583
9583
|
|
|
9584
|
-
var css_248z$
|
|
9584
|
+
var css_248z$i = ".styles-module_container__IXTeq {\n display: flex;\n flex-direction: row;\n gap: 20px;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__flMT5 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__flMT5:focus, .styles-module_input__flMT5:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_form__chEvQ {\n position: relative;\n flex: 1;\n display: flex;\n}\n\n.styles-module_label__hflX9 {\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__oXgFI {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__flMT5.styles-module_with_title__ubN0L::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__flMT5.styles-module_with_title__ubN0L:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__flMT5:focus + .styles-module_label__hflX9 .styles-module_label_text__oXgFI,\n.styles-module_input__flMT5.styles-module_valid__76xYu + .styles-module_label__hflX9 .styles-module_label_text__oXgFI {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__flMT5.styles-module_valid__76xYu + .styles-module_label__hflX9 .styles-module_label_text__oXgFI {\n color: var(--foreground-3);\n}";
|
|
9585
9585
|
var styles$h = {"container":"styles-module_container__IXTeq","input":"styles-module_input__flMT5","form":"styles-module_form__chEvQ","label":"styles-module_label__hflX9","label_text":"styles-module_label_text__oXgFI","with_title":"styles-module_with_title__ubN0L","valid":"styles-module_valid__76xYu"};
|
|
9586
|
-
styleInject(css_248z$
|
|
9586
|
+
styleInject(css_248z$i);
|
|
9587
9587
|
|
|
9588
9588
|
function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "" }, title = { firstName: "Vorname", lastName: "Nachname" }, defaultValue = { firstName: "", lastName: "" }, onInput = (name, event) => { }, onInputFirstName = (event) => { }, onInputLastName = (event) => { }, }) {
|
|
9589
9589
|
const [firstName, setFirstName] = useState(defaultValue.firstName ? defaultValue.firstName : "");
|
|
@@ -9609,9 +9609,9 @@ function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "
|
|
|
9609
9609
|
React__default.createElement("span", { className: styles$h.label_text }, title.lastName)))));
|
|
9610
9610
|
}
|
|
9611
9611
|
|
|
9612
|
-
var css_248z$
|
|
9612
|
+
var css_248z$h = ".styles-module_container__Xk2HY {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__ReFFR {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n width: 100%;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__ReFFR:focus, .styles-module_input__ReFFR:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__ReFFR.styles-module_not_available__mZ5-1 {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__Xk2HY {\n position: relative;\n}\n\n.styles-module_label__4n2Ai {\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__NsKJU {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__ReFFR.styles-module_with_title__vMb1v::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__ReFFR.styles-module_with_title__vMb1v:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__ReFFR:focus + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU,\n.styles-module_input__ReFFR.styles-module_valid__NyP0J + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__ReFFR.styles-module_valid__NyP0J + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU {\n color: var(--foreground-3);\n}";
|
|
9613
9613
|
var styles$g = {"container":"styles-module_container__Xk2HY","input":"styles-module_input__ReFFR","not_available":"styles-module_not_available__mZ5-1","label":"styles-module_label__4n2Ai","label_text":"styles-module_label_text__NsKJU","with_title":"styles-module_with_title__vMb1v","valid":"styles-module_valid__NyP0J"};
|
|
9614
|
-
styleInject(css_248z$
|
|
9614
|
+
styleInject(css_248z$h);
|
|
9615
9615
|
|
|
9616
9616
|
function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "number", width = "100%", available = true, onInput = (event) => { } }) {
|
|
9617
9617
|
const [value, setValue] = useState(defaultValue);
|
|
@@ -9629,9 +9629,9 @@ function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFoc
|
|
|
9629
9629
|
React__default.createElement("span", { className: styles$g.label_text }, title)))));
|
|
9630
9630
|
}
|
|
9631
9631
|
|
|
9632
|
-
var css_248z$
|
|
9632
|
+
var css_248z$g = "@keyframes styles-module_show__OLTZH {\n from {\n max-heigth: 0px;\n height: 0px;\n }\n}\n@keyframes styles-module_hide__LAgaY {\n from {\n max-heigth: 0px;\n height: 0px;\n }\n to {\n max-height: fit-content;\n }\n}\n.styles-module_container__UdmOO {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-bottom: 30px;\n max-width: 100%;\n transition: all 0.2s ease-in-out;\n box-sizing: border-box;\n}\n.styles-module_container__UdmOO .styles-module_forgot_label__EeN6a {\n font-size: 12px;\n color: var(--foreground-3);\n}\n.styles-module_container__UdmOO.styles-module_visible__QROqh {\n max-height: 100px;\n opacity: 1;\n}\n.styles-module_container__UdmOO.styles-module_hidden__hDKDO {\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n}\n\n.styles-module_input__sC2fP {\n padding: 14px 20px;\n font-size: 16px;\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n border: 1.5px solid var(--border-2);\n border-right: none;\n outline: none;\n transition: all 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__sC2fP:focus, .styles-module_input__sC2fP:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_hideButton__83mRI {\n outline: none;\n display: flex;\n align-items: center;\n padding: 10px;\n border: 1.5px solid var(--border-2);\n border-left: none;\n background: none;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n cursor: pointer;\n}\n.styles-module_hideButton__83mRI span {\n color: var(--foreground-3);\n}\n\n/* animated title */\n.styles-module_form__m866x {\n position: relative;\n display: flex;\n}\n\n.styles-module_label__8PuaL {\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__FwJ1F {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__sC2fP.styles-module_with_title__dftgq::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__sC2fP.styles-module_with_title__dftgq:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__sC2fP:focus + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F,\n.styles-module_input__sC2fP.styles-module_valid__SM7w5 + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__sC2fP.styles-module_valid__SM7w5 + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F {\n color: var(--foreground-3);\n}";
|
|
9633
9633
|
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"};
|
|
9634
|
-
styleInject(css_248z$
|
|
9634
|
+
styleInject(css_248z$g);
|
|
9635
9635
|
|
|
9636
9636
|
function InputPassword({ id, placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", minLength = 8, autoComplete, forgotLink = false }) {
|
|
9637
9637
|
const [value, setValue] = useState("");
|
|
@@ -9648,9 +9648,9 @@ function InputPassword({ id, placeholder = "", title = "Passwort", name, isVisib
|
|
|
9648
9648
|
React__default.createElement("div", { className: styles$f.forgot_container }, forgotLink))));
|
|
9649
9649
|
}
|
|
9650
9650
|
|
|
9651
|
-
var css_248z$
|
|
9651
|
+
var css_248z$f = ".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: var(--primary-1);\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 var(--border-2);\n outline: none;\n transition: 0.2s ease;\n text-align: center;\n font-size: 18px;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_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}\n\n@media (max-width: 450px) {\n .styles-module_input__84v36 {\n width: 25px;\n font-size: 16px;\n }\n .styles-module_input_wrapper__LPIk1 {\n gap: 7px;\n }\n .styles-module_input__84v36:nth-child(3) {\n margin-right: 12px;\n }\n}";
|
|
9652
9652
|
var styles$e = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
|
|
9653
|
-
styleInject(css_248z$
|
|
9653
|
+
styleInject(css_248z$f);
|
|
9654
9654
|
|
|
9655
9655
|
function InputPin({ name, length, onFinished = () => { } }) {
|
|
9656
9656
|
const [state, setState] = useState({});
|
|
@@ -9727,9 +9727,9 @@ function InputPin({ name, length, onFinished = () => { } }) {
|
|
|
9727
9727
|
React__default.createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
|
|
9728
9728
|
}
|
|
9729
9729
|
|
|
9730
|
-
var css_248z$
|
|
9730
|
+
var css_248z$e = ".styles-module_container__zcXGF {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__Tpth8 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n border-color: var(--primary-1);\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: var(--red-1);\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: var(--background-1);\n color: var(--foreground-3);\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: var(--foreground-3);\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: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n color: var(--foreground-3);\n}";
|
|
9731
9731
|
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"};
|
|
9732
|
-
styleInject(css_248z$
|
|
9732
|
+
styleInject(css_248z$e);
|
|
9733
9733
|
|
|
9734
9734
|
function InputText({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, autoComplete = "off", available = true, onInput = (event) => { } }) {
|
|
9735
9735
|
const [value, setValue] = useState(defaultValue);
|
|
@@ -9748,9 +9748,9 @@ function InputText({ id, title, name, placeholder = "", defaultValue = "", autoF
|
|
|
9748
9748
|
React__default.createElement("span", { className: styles$d.label_text }, title)))));
|
|
9749
9749
|
}
|
|
9750
9750
|
|
|
9751
|
-
var css_248z$
|
|
9751
|
+
var css_248z$d = ".styles-module_box__Z0iod {\n background: var(--background-2);\n width: 400px;\n max-width: 100%;\n border-radius: 22px;\n border: 1px solid var(--border-2);\n display: flex;\n flex-direction: row;\n padding: 18px;\n gap: 18px;\n cursor: pointer;\n margin-bottom: 20px;\n transition: 0.2s ease;\n color: var(--foreground-1);\n}\n.styles-module_box__Z0iod:hover {\n background-color: var(--background-1);\n transform: scale(1.01);\n}\n.styles-module_box__Z0iod .styles-module_left_side__8ObGs {\n width: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 5px;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D {\n flex: 1;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D p {\n color: var(--foreground-2);\n margin: 0;\n text-align: left;\n font-size: 1.1rem;\n line-height: 1.6;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D h4 {\n margin: 0;\n text-align: left;\n font-size: 1.3rem;\n margin-bottom: 16px;\n margin-top: 5px;\n color: var(--foreground-1);\n}\n\n@media (max-width: 550px) {\n .styles-module_box__Z0iod {\n width: auto;\n }\n .styles-module_box__Z0iod .styles-module_right_side__Ypp0D h4 {\n font-size: 1.2rem;\n }\n .styles-module_box__Z0iod .styles-module_right_side__Ypp0D p {\n font-size: 1rem;\n }\n}";
|
|
9752
9752
|
var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
|
|
9753
|
-
styleInject(css_248z$
|
|
9753
|
+
styleInject(css_248z$d);
|
|
9754
9754
|
|
|
9755
9755
|
function OptionField({ id, headline, description, iconName }) {
|
|
9756
9756
|
return (React__default.createElement(React__default.Fragment, null,
|
|
@@ -9761,9 +9761,9 @@ function OptionField({ id, headline, description, iconName }) {
|
|
|
9761
9761
|
React__default.createElement("p", null, description)))));
|
|
9762
9762
|
}
|
|
9763
9763
|
|
|
9764
|
-
var css_248z$
|
|
9764
|
+
var css_248z$c = ".styles-module_container__XCtqW {\n background: var(--background-1);\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: var(--foreground-1);\n border: 1px solid var(--border-2);\n transition: 0.2s ease-in-out;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n cursor: pointer;\n}\n.styles-module_container__XCtqW:hover {\n background: var(--background-2);\n border-color: var(--border-3);\n}\n.styles-module_container__XCtqW h3 {\n font-weight: 500;\n margin: 0;\n text-align: center;\n}\n\n.styles-module_container__XCtqW.styles-module_preselected__WoSbB {\n border: 1px solid var(--foreground-1);\n}";
|
|
9765
9765
|
var styles$b = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
|
|
9766
|
-
styleInject(css_248z$
|
|
9766
|
+
styleInject(css_248z$c);
|
|
9767
9767
|
|
|
9768
9768
|
function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }) {
|
|
9769
9769
|
function onClickDiv(event) {
|
|
@@ -9776,6 +9776,9 @@ function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }
|
|
|
9776
9776
|
React__default.createElement("h3", null, title)));
|
|
9777
9777
|
}
|
|
9778
9778
|
|
|
9779
|
+
var css_248z$b = ".styles-module_popover__3ZbOL {\n overflow-y: scroll;\n overflow-x: hidden;\n margin: 0 auto;\n margin-top: 30px;\n z-index: 10000;\n position: fixed;\n border-top-left-radius: 30px;\n border-top-right-radius: 30px;\n transform: translateY(100%);\n width: 700px;\n max-width: 100%;\n height: 100%;\n left: 50%;\n margin-left: -385px;\n transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);\n background: var(--background-1);\n box-shadow: var(--border-3) 0px 1px 2px 0px, var(--border-3) 0px 1px 3px 1px;\n padding: 35px;\n padding-top: 110px;\n top: 0;\n}\n.styles-module_popover__3ZbOL.styles-module_active__-ZVbh {\n transform: translateY(0px);\n}\n.styles-module_popover__3ZbOL h1 {\n margin: 10px 0px;\n font-weight: 900;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.styles-module_popover__3ZbOL h4 {\n font-size: 20px;\n margin: 10px 0px;\n color: var(--foreground-3);\n font-weight: 400;\n}\n.styles-module_popover__3ZbOL p {\n line-height: 2;\n margin: 20px 0px;\n}\n.styles-module_popover__3ZbOL img {\n object-fit: contain;\n border-radius: 10px;\n}\n.styles-module_popover__3ZbOL .styles-module_close_button__5RYuU {\n width: 40px;\n height: 40px;\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--background-4);\n cursor: pointer;\n transition: 0.2s ease-in-out;\n position: absolute;\n top: 35px;\n right: 35px;\n color: var(--foreground-2);\n}\n.styles-module_popover__3ZbOL .styles-module_close_button__5RYuU:hover {\n filter: brightness(0.9);\n}\n\n@media (max-width: 800px) {\n .styles-module_popover__3ZbOL {\n width: calc(100% - 40px);\n left: 0;\n margin-left: 0;\n padding: 20px;\n padding-top: 110px;\n }\n}";
|
|
9780
|
+
styleInject(css_248z$b);
|
|
9781
|
+
|
|
9779
9782
|
var css_248z$a = ".styles-module_container__u4q5n {\n margin-bottom: 50px;\n width: 400px;\n max-width: 100%;\n}\n\n.styles-module_background__jt-ry {\n background: var(--border-2);\n height: 3px;\n position: relative;\n}\n\n.styles-module_progress__Zj-B7 {\n background: var(--foreground-1);\n position: absolute;\n left: 0;\n top: 0;\n height: 3px;\n}";
|
|
9780
9783
|
var styles$a = {"container":"styles-module_container__u4q5n","background":"styles-module_background__jt-ry","progress":"styles-module_progress__Zj-B7"};
|
|
9781
9784
|
styleInject(css_248z$a);
|