math-main-components 0.0.227 → 0.0.232
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/components/Button/Button.d.ts +1 -1
- package/dist/components/Button/Button.stories.d.ts +1 -0
- package/dist/components/Dialog/Dialog.d.ts +6 -4
- package/dist/components/Dialog/Dialog.stories.d.ts +13 -0
- package/dist/components/RadioCards/RadioCards.d.ts +7 -0
- package/dist/components/RadioCards/RadioCards.stories.d.ts +13 -0
- package/dist/components/RadioCards/index.d.ts +1 -0
- package/dist/index.cjs.js +147 -121
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +145 -122
- package/package.json +1 -1
- package/styles/theme-styles.scss +1 -0
package/dist/index.cjs.js
CHANGED
|
@@ -54,13 +54,13 @@ function styleInject(css, ref) {
|
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
var css_248z$
|
|
58
|
-
var styles$
|
|
59
|
-
styleInject(css_248z$
|
|
57
|
+
var css_248z$C = "";
|
|
58
|
+
var styles$C = {};
|
|
59
|
+
styleInject(css_248z$C);
|
|
60
60
|
|
|
61
61
|
function Slider({ cards }) {
|
|
62
62
|
const [selected, setSelected] = React.useState(0);
|
|
63
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
63
|
+
return (React__default["default"].createElement("div", { className: styles$C.container }, cards.map((card, index) => React__default["default"].createElement("div", { key: index, className: [styles$C.card, selected == index ? styles$C.selected : styles$C.not_selected].join(" ") },
|
|
64
64
|
React__default["default"].createElement("h1", null, card.title),
|
|
65
65
|
React__default["default"].createElement("p", null, card.description)))));
|
|
66
66
|
}
|
|
@@ -9406,124 +9406,131 @@ function SvgIcon({ animate = false, toggle = false, ...props }) {
|
|
|
9406
9406
|
React__default["default"].createElement(Icon, { ...props }))));
|
|
9407
9407
|
}
|
|
9408
9408
|
|
|
9409
|
-
var css_248z$
|
|
9410
|
-
var styles$
|
|
9411
|
-
styleInject(css_248z$
|
|
9409
|
+
var css_248z$B = ".styles-module_container__PIGIl {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 7px;\n color: var(--foreground-3);\n}\n.styles-module_container__PIGIl svg {\n fill: var(--foreground-3);\n}";
|
|
9410
|
+
var styles$B = {"container":"styles-module_container__PIGIl"};
|
|
9411
|
+
styleInject(css_248z$B);
|
|
9412
9412
|
|
|
9413
9413
|
function StepBack({ iconName = "arrow_back", text = "Weitere Möglichkeiten" }) {
|
|
9414
9414
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9415
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9415
|
+
React__default["default"].createElement("div", { className: styles$B.container },
|
|
9416
9416
|
React__default["default"].createElement(SvgIcon, { iconName: iconName }),
|
|
9417
9417
|
text)));
|
|
9418
9418
|
}
|
|
9419
9419
|
|
|
9420
|
-
var css_248z$
|
|
9421
|
-
var styles$
|
|
9422
|
-
styleInject(css_248z$
|
|
9420
|
+
var css_248z$A = ".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 font-family: var(--font-1);\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 padding: 0px 20px;\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 20px;\n}";
|
|
9421
|
+
var styles$A = {"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"};
|
|
9422
|
+
styleInject(css_248z$A);
|
|
9423
9423
|
|
|
9424
9424
|
function Accordeon({ title, children }) {
|
|
9425
9425
|
const [isActive, setActive] = React.useState(false);
|
|
9426
|
-
return (React__default["default"].createElement("div", { className: [styles$
|
|
9427
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9426
|
+
return (React__default["default"].createElement("div", { className: [styles$A.container, isActive ? styles$A.active : styles$A.not_active].join(" ") },
|
|
9427
|
+
React__default["default"].createElement("div", { className: styles$A.head, onClick: () => setActive(!isActive) },
|
|
9428
9428
|
React__default["default"].createElement(SvgIcon, { iconName: "expand_more" }),
|
|
9429
9429
|
React__default["default"].createElement("h3", null, title)),
|
|
9430
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9430
|
+
React__default["default"].createElement("div", { className: styles$A.content }, children)));
|
|
9431
9431
|
}
|
|
9432
9432
|
|
|
9433
|
-
var css_248z$
|
|
9434
|
-
var styles$
|
|
9435
|
-
styleInject(css_248z$
|
|
9433
|
+
var css_248z$z = ".styles-module_container__TP0rp {\n max-width: 100%;\n}\n\n.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 justify-content: center;\n border: none;\n transition: 0.2s ease-in-out;\n font-family: \"Space Grotesk\", sans-serif;\n border: 1px solid transparent;\n}\n.styles-module_button__Sh-fr:hover {\n filter: brightness(0.9);\n}\n.styles-module_button__Sh-fr:focus {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n background: var(--primary-1);\n color: white;\n}\n.styles-module_button__Sh-fr.styles-module_blue2__rejgq {\n background: var(--background-1);\n border-color: var(--primary-1);\n color: var(--primary-1);\n}\n.styles-module_button__Sh-fr.styles-module_lightBlue__7EKfp {\n background: var(--primary-2);\n color: var(--primary-1);\n}\n.styles-module_button__Sh-fr.styles-module_red__EhImH {\n background: var(--red-1);\n color: white;\n}\n.styles-module_button__Sh-fr.styles-module_grey__kAVD1 {\n background: var(--background-1);\n color: var(--foreground-2);\n}\n.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_button__Sh-fr.styles-module_onlyIcon__bNVnI span {\n font-size: 22px !important;\n}";
|
|
9434
|
+
var styles$z = {"container":"styles-module_container__TP0rp","button":"styles-module_button__Sh-fr","blue":"styles-module_blue__DRdbo","blue2":"styles-module_blue2__rejgq","lightBlue":"styles-module_lightBlue__7EKfp","red":"styles-module_red__EhImH","grey":"styles-module_grey__kAVD1","onlyIcon":"styles-module_onlyIcon__bNVnI"};
|
|
9435
|
+
styleInject(css_248z$z);
|
|
9436
9436
|
|
|
9437
9437
|
function Button({ id, children, iconName, iconFill = "white", type = "blue", onClick = () => { }, ...props }) {
|
|
9438
9438
|
const onClickButton = (event) => {
|
|
9439
9439
|
event.preventDefault();
|
|
9440
9440
|
onClick(event);
|
|
9441
9441
|
};
|
|
9442
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9443
|
-
React__default["default"].createElement("button", { className: [styles$
|
|
9442
|
+
return (React__default["default"].createElement("div", { className: styles$z.container },
|
|
9443
|
+
React__default["default"].createElement("button", { className: [styles$z.button, styles$z[type], (children && !iconName) ? styles$z.onlyText : "", (!children && iconName) ? styles$z.onlyIcon : ""].join(" "), onClick: onClickButton, id: id, ...props },
|
|
9444
9444
|
children,
|
|
9445
9445
|
iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName }))));
|
|
9446
9446
|
}
|
|
9447
9447
|
|
|
9448
|
-
var css_248z$
|
|
9449
|
-
var styles$
|
|
9450
|
-
styleInject(css_248z$
|
|
9448
|
+
var css_248z$y = ".styles-module_container__Q2wD4 {\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__Q2wD4.styles-module_visible__hQgjm {\n max-height: 100px;\n opacity: 1;\n}\n.styles-module_container__Q2wD4.styles-module_hidden__sO2e7 {\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n}\n\n.styles-module_container__Q2wD4.styles-module_rotate__HQYfs .styles-module_button__jo0MC:hover span {\n rotate: -45deg;\n}\n\n.styles-module_button__jo0MC {\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 outline: none;\n border: 1px solid transparent;\n font-family: \"Space Grotesk\", sans-serif;\n}\n.styles-module_button__jo0MC:focus {\n box-shadow: var(--focus-shadow);\n border: var(--focus-border);\n}\n.styles-module_button__jo0MC span {\n transition: 0.1s ease-in-out;\n}\n.styles-module_button__jo0MC:hover {\n background-position-x: left;\n}\n.styles-module_button__jo0MC.styles-module_secondary__YBbOj {\n background: var(--background-2);\n color: var(--primary-1);\n border: 1px solid var(--primary-1);\n}\n.styles-module_button__jo0MC.styles-module_secondary__YBbOj svg {\n fill: var(--primary-1);\n}\n\n@media (max-width: 450px) {\n .styles-module_button__jo0MC {\n font-size: 14px;\n }\n}";
|
|
9449
|
+
var styles$y = {"container":"styles-module_container__Q2wD4","visible":"styles-module_visible__hQgjm","hidden":"styles-module_hidden__sO2e7","rotate":"styles-module_rotate__HQYfs","button":"styles-module_button__jo0MC","secondary":"styles-module_secondary__YBbOj"};
|
|
9450
|
+
styleInject(css_248z$y);
|
|
9451
9451
|
|
|
9452
9452
|
function Button2({ id, children, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, style, onClick }) {
|
|
9453
|
-
return (React__default["default"].createElement("div", { className: [styles$
|
|
9454
|
-
React__default["default"].createElement("button", { type: type, className: `${styles$
|
|
9453
|
+
return (React__default["default"].createElement("div", { className: [styles$y.container, isVisible ? styles$y.visible : styles$y.hidden, ["arrow_forward"].includes(iconName) ? styles$y.rotate : null].join(" "), style: style },
|
|
9454
|
+
React__default["default"].createElement("button", { type: type, className: `${styles$y.button} ${styles$y[theme]}`, onClick: onClick, id: id },
|
|
9455
9455
|
children,
|
|
9456
9456
|
React__default["default"].createElement(SvgIcon, { iconName: iconName }))));
|
|
9457
9457
|
}
|
|
9458
9458
|
|
|
9459
|
-
var css_248z$
|
|
9460
|
-
var styles$
|
|
9461
|
-
styleInject(css_248z$
|
|
9459
|
+
var css_248z$x = ".styles-module_container__gCCnD {\n margin-bottom: 20px;\n color: var(--foreground-3);\n width: 100%;\n position: relative;\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 display: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n position: relative;\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 top: 0px;\n left: 0px;\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(--border-2);\n}";
|
|
9460
|
+
var styles$x = {"container":"styles-module_container__gCCnD"};
|
|
9461
|
+
styleInject(css_248z$x);
|
|
9462
9462
|
|
|
9463
9463
|
function Checkbox({ id, name, defaultChecked = false, onInput = () => { }, children, ...props }) {
|
|
9464
9464
|
const [checked, setChecked] = React__default["default"].useState(defaultChecked);
|
|
9465
9465
|
React.useEffect(() => setChecked(defaultChecked), [defaultChecked]);
|
|
9466
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9466
|
+
return (React__default["default"].createElement("div", { className: styles$x.container, ...props },
|
|
9467
9467
|
React__default["default"].createElement("input", { type: "checkbox", onInput: onInput, name: name, defaultChecked: checked, id: id || name }),
|
|
9468
9468
|
React__default["default"].createElement("label", { htmlFor: id || name }, children),
|
|
9469
9469
|
React__default["default"].createElement(SvgIcon, { iconName: "done", size: "21px" })));
|
|
9470
9470
|
}
|
|
9471
9471
|
|
|
9472
|
-
var css_248z$
|
|
9473
|
-
var styles$
|
|
9474
|
-
styleInject(css_248z$
|
|
9472
|
+
var css_248z$w = ".styles-module_container__9-1MH {\n position: fixed;\n height: 100vh;\n width: 100vw;\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 transition: 0.2s ease-in-out;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo {\n opacity: 1;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo .styles-module_dialog_window__0Bn2M {\n opacity: 1;\n transform: translateY(0%) scale(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_disabled__sELpy .styles-module_dialog_window__0Bn2M {\n opacity: 0;\n transform: translateY(5%) scale(0.9);\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.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n cursor: auto;\n transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_title__1--Ss {\n font-size: 26px;\n font-weight: 500;\n line-height: 1.5;\n margin-top: 0px;\n margin-bottom: 20px;\n text-align: center;\n color: var(--foreground-1);\n font-family: var(--font-1);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS,\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux {\n border-radius: 12px;\n padding: 14px 0px;\n border: none;\n outline: none;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n font-size: 14px;\n font-family: var(--font-1);\n border: 1px solid transparent;\n user-select: none;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS:hover,\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux:hover {\n filter: brightness(0.95);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS:active,\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux:active {\n box-shadow: var(--focus-shadow);\n border: var(--focus-border);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS {\n color: var(--foreground-1);\n background: var(--background-2);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux {\n color: var(--background-1);\n background: var(--primary-1);\n}";
|
|
9473
|
+
var styles$w = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","dialog_window":"styles-module_dialog_window__0Bn2M","disabled":"styles-module_disabled__sELpy","title":"styles-module_title__1--Ss","cancel_button":"styles-module_cancel_button__KhwLS","submit_button":"styles-module_submit_button__xLzux"};
|
|
9474
|
+
styleInject(css_248z$w);
|
|
9475
9475
|
|
|
9476
|
-
|
|
9476
|
+
const DialogButton = () => {
|
|
9477
|
+
const [enabled, setEnabled] = React.useState(false);
|
|
9478
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9479
|
+
React__default["default"].createElement(Button, { onClick: () => setEnabled(true) }, "Dialog \u00F6ffnen"),
|
|
9480
|
+
React__default["default"].createElement(Dialog, { enabled: enabled, onClose: () => setEnabled(false), onSubmit: () => setEnabled(false) },
|
|
9481
|
+
React__default["default"].createElement("h1", null, "Dialog"),
|
|
9482
|
+
React__default["default"].createElement("p", null, "Dialog content"))));
|
|
9483
|
+
};
|
|
9484
|
+
function Dialog({ data, enabled, text, onClose = () => { }, onSubmit = () => { }, children }) {
|
|
9477
9485
|
function onClick(event) {
|
|
9478
9486
|
const element = event.target;
|
|
9479
9487
|
const id = element.id;
|
|
9480
9488
|
if (["dialog-backdrop", "cancel-button"].includes(id)) {
|
|
9481
|
-
|
|
9482
|
-
onClose(event, data);
|
|
9489
|
+
onClose(event, data);
|
|
9483
9490
|
}
|
|
9484
9491
|
}
|
|
9485
|
-
return (React__default["default"].createElement("div", { id: "dialog-backdrop", className: `${styles$
|
|
9486
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9492
|
+
return (React__default["default"].createElement("div", { id: "dialog-backdrop", className: `${styles$w.container} ${enabled ? styles$w.active : styles$w.disabled}`, onClick: onClick },
|
|
9493
|
+
React__default["default"].createElement("div", { className: styles$w.dialog_window },
|
|
9487
9494
|
children,
|
|
9488
|
-
text && React__default["default"].createElement("h1",
|
|
9489
|
-
React__default["default"].createElement("button", { className: styles$
|
|
9490
|
-
React__default["default"].createElement("button", { className: styles$
|
|
9495
|
+
text && React__default["default"].createElement("h1", { className: styles$w.title }, text),
|
|
9496
|
+
React__default["default"].createElement("button", { className: styles$w.cancel_button, id: "cancel-button", onClick: onClick }, "Abbrechen"),
|
|
9497
|
+
React__default["default"].createElement("button", { className: styles$w.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
|
|
9491
9498
|
}
|
|
9492
9499
|
|
|
9493
|
-
var css_248z$
|
|
9494
|
-
var styles$
|
|
9495
|
-
styleInject(css_248z$
|
|
9500
|
+
var css_248z$v = ".styles-module_container__hGVir {\n width: 100%;\n}\n\n.styles-module_wrapper__HkVIU {\n display: flex;\n align-items: center;\n gap: 6px;\n border-radius: 18px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n background: var(--background-1);\n border: 1px solid var(--border-1);\n margin-bottom: 20px;\n font-family: var(--font-1);\n border: 1px solid var(--border-1);\n padding: 0px 14px;\n gap: 10px;\n display: flex;\n align-items: center;\n border-radius: 12px;\n cursor: pointer;\n background: var(--background-1);\n transition: 0.2s ease-in-out;\n outline: none;\n text-indent: 1px;\n text-overflow: \"\";\n}\n.styles-module_wrapper__HkVIU .styles-module_select__nSHFF {\n background: none;\n font-size: 16px;\n min-width: 64px;\n height: 100%;\n font-family: var(--font-1);\n user-select: none;\n border: none;\n outline: none;\n height: 44px;\n cursor: pointer;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.styles-module_wrapper__HkVIU:hover {\n border-color: var(--primary-2);\n}\n.styles-module_wrapper__HkVIU:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}";
|
|
9501
|
+
var styles$v = {"container":"styles-module_container__hGVir","wrapper":"styles-module_wrapper__HkVIU","select":"styles-module_select__nSHFF"};
|
|
9502
|
+
styleInject(css_248z$v);
|
|
9496
9503
|
|
|
9497
9504
|
const Dropdown = ({ options = [], unit = "", ...props }) => {
|
|
9498
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9499
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9505
|
+
return (React__default["default"].createElement("div", { className: styles$v.container },
|
|
9506
|
+
React__default["default"].createElement("div", { className: styles$v.wrapper },
|
|
9500
9507
|
React__default["default"].createElement(SvgIcon, { iconName: "expand_more" }),
|
|
9501
|
-
React__default["default"].createElement("select", { className: styles$
|
|
9508
|
+
React__default["default"].createElement("select", { className: styles$v.select, ...props },
|
|
9502
9509
|
React__default["default"].createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
|
|
9503
9510
|
options.map((option, index) => (React__default["default"].createElement("option", { key: index, value: option.value }, option.label)))))));
|
|
9504
9511
|
};
|
|
9505
9512
|
|
|
9506
|
-
var css_248z$
|
|
9507
|
-
var styles$
|
|
9508
|
-
styleInject(css_248z$
|
|
9513
|
+
var css_248z$u = ".styles-module_container__9wYEm {\n margin-bottom: 30px;\n width: 100%;\n font-family: var(--font-1);\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: 500;\n color: var(--foreground-1);\n}\n.styles-module_container__9wYEm h3 {\n margin-top: 5px;\n font-weight: 400;\n}";
|
|
9514
|
+
var styles$u = {"container":"styles-module_container__9wYEm"};
|
|
9515
|
+
styleInject(css_248z$u);
|
|
9509
9516
|
|
|
9510
9517
|
function FormText({ title, value, style }) {
|
|
9511
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9518
|
+
return (React__default["default"].createElement("div", { className: styles$u.container, style: style },
|
|
9512
9519
|
React__default["default"].createElement("h5", null, title),
|
|
9513
9520
|
React__default["default"].createElement("h3", null, value)));
|
|
9514
9521
|
}
|
|
9515
9522
|
|
|
9516
|
-
var css_248z$
|
|
9517
|
-
var styles$
|
|
9518
|
-
styleInject(css_248z$
|
|
9523
|
+
var css_248z$t = ".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}";
|
|
9524
|
+
var styles$t = {"container":"styles-module_container__C99XV","button":"styles-module_button__pGYkF"};
|
|
9525
|
+
styleInject(css_248z$t);
|
|
9519
9526
|
|
|
9520
9527
|
function ForwardButton({ onClick = () => { } }) {
|
|
9521
9528
|
function onClickButton(event) {
|
|
9522
9529
|
event.preventDefault();
|
|
9523
9530
|
onClick(event);
|
|
9524
9531
|
}
|
|
9525
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9526
|
-
React__default["default"].createElement("button", { onClick: onClickButton, className: styles$
|
|
9532
|
+
return (React__default["default"].createElement("div", { className: styles$t.container },
|
|
9533
|
+
React__default["default"].createElement("button", { onClick: onClickButton, className: styles$t.button },
|
|
9527
9534
|
React__default["default"].createElement(SvgIcon, { iconName: "arrow_back" }))));
|
|
9528
9535
|
}
|
|
9529
9536
|
|
|
@@ -9531,9 +9538,9 @@ function Gap({ size }) {
|
|
|
9531
9538
|
return (React__default["default"].createElement("div", { style: { height: size } }));
|
|
9532
9539
|
}
|
|
9533
9540
|
|
|
9534
|
-
var css_248z$
|
|
9535
|
-
var styles$
|
|
9536
|
-
styleInject(css_248z$
|
|
9541
|
+
var css_248z$s = ".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: 1px 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 font-family: var(--font-2);\n}\n.styles-module_input__v-hUz:focus, .styles-module_input__v-hUz:active {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_input__v-hUz.styles-module_not_available__6xu3Y, .styles-module_input__v-hUz:invalid {\n border: var(--invalid-border);\n box-shadow: var(--invalid-shadow);\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 font-family: var(--font-1);\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}";
|
|
9542
|
+
var styles$s = {"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"};
|
|
9543
|
+
styleInject(css_248z$s);
|
|
9537
9544
|
|
|
9538
9545
|
function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, width = "100%", height = "100px", available = true, onInput }) {
|
|
9539
9546
|
const [value, setValue] = React.useState(defaultValue);
|
|
@@ -9542,36 +9549,36 @@ function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoF
|
|
|
9542
9549
|
element.focus();
|
|
9543
9550
|
}, [autoFocus]);
|
|
9544
9551
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9545
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9546
|
-
React__default["default"].createElement("textarea", { className: `${styles$
|
|
9552
|
+
React__default["default"].createElement("div", { className: styles$s.container, style: { width } },
|
|
9553
|
+
React__default["default"].createElement("textarea", { className: `${styles$s.input} ${title != undefined ? styles$s.with_title : styles$s.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$s.valid : styles$s.not_valid} ${available ? styles$s.available : styles$s.not_available}`, name: name, id: id, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, style: { minHeight: height, maxHeight: height }, onInput: (event) => {
|
|
9547
9554
|
setValue(event.target.value);
|
|
9548
9555
|
if (onInput)
|
|
9549
9556
|
onInput(event);
|
|
9550
9557
|
} }),
|
|
9551
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
9552
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9558
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$s.label },
|
|
9559
|
+
React__default["default"].createElement("span", { className: styles$s.label_text }, title)))));
|
|
9553
9560
|
}
|
|
9554
9561
|
|
|
9555
|
-
var css_248z$
|
|
9556
|
-
var styles$
|
|
9557
|
-
styleInject(css_248z$
|
|
9562
|
+
var css_248z$r = ".styles-module_input__-GKhx {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px 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: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_input__-GKhx.styles-module_not_available__XD1kR, .styles-module_input__-GKhx:invalid {\n border: var(--invalid-border);\n box-shadow: var(--invalid-shadow);\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 font-family: var(--font-1);\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}";
|
|
9563
|
+
var styles$r = {"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-"};
|
|
9564
|
+
styleInject(css_248z$r);
|
|
9558
9565
|
|
|
9559
9566
|
function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true, defaultValue = "", onInput = () => { }, ...props }) {
|
|
9560
9567
|
const [value, setValue] = React.useState(defaultValue);
|
|
9561
9568
|
React.useEffect(() => setValue(defaultValue), [defaultValue]);
|
|
9562
9569
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9563
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9564
|
-
React__default["default"].createElement("input", { className: `${styles$
|
|
9570
|
+
React__default["default"].createElement("div", { className: styles$r.container, style: { width: width } },
|
|
9571
|
+
React__default["default"].createElement("input", { className: `${styles$r.input} ${title != undefined ? styles$r.with_title : styles$r.without_title} ${value.length > 0 ? styles$r.valid : styles$r.not_valid} ${available ? styles$r.available : styles$r.not_available}`, name: name, placeholder: placeholder, type: "email", id: id, onInput: (event) => {
|
|
9565
9572
|
setValue(event.target.value);
|
|
9566
9573
|
onInput(event);
|
|
9567
9574
|
}, ...props }),
|
|
9568
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
9569
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9575
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$r.label },
|
|
9576
|
+
React__default["default"].createElement("span", { className: styles$r.label_text }, title)))));
|
|
9570
9577
|
}
|
|
9571
9578
|
|
|
9572
|
-
var css_248z$
|
|
9573
|
-
var styles$
|
|
9574
|
-
styleInject(css_248z$
|
|
9579
|
+
var css_248z$q = ".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: 1px 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: var(--focus-border);\n box-shadow: var(--focus-shadow);\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 font-family: var(--font-1);\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}";
|
|
9580
|
+
var styles$q = {"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"};
|
|
9581
|
+
styleInject(css_248z$q);
|
|
9575
9582
|
|
|
9576
9583
|
function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "" }, title = { firstName: "Vorname", lastName: "Nachname" }, defaultValue = { firstName: "", lastName: "" }, onInput = (name, event) => { }, onInputFirstName = (event) => { }, onInputLastName = (event) => { }, }) {
|
|
9577
9584
|
const [firstName, setFirstName] = React.useState(defaultValue.firstName ? defaultValue.firstName : "");
|
|
@@ -9586,20 +9593,20 @@ function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "
|
|
|
9586
9593
|
onInputLastName(event);
|
|
9587
9594
|
onInput("lastName", event);
|
|
9588
9595
|
}
|
|
9589
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9590
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9591
|
-
React__default["default"].createElement("input", { className: `${styles$
|
|
9592
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
9593
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9594
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9595
|
-
React__default["default"].createElement("input", { className: `${styles$
|
|
9596
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
9597
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9596
|
+
return (React__default["default"].createElement("div", { className: styles$q.container, style: { width: width } },
|
|
9597
|
+
React__default["default"].createElement("div", { className: styles$q.form },
|
|
9598
|
+
React__default["default"].createElement("input", { className: `${styles$q.input} ${title.firstName != undefined ? styles$q.with_title : styles$q.without_title} ${firstName.length > 0 ? styles$q.valid : styles$q.not_valid}`, name: "firstName", type: "name", style: { width: width != "100%" ? "100px" : width }, placeholder: placeholder.firstName, defaultValue: defaultValue.firstName, onInput: onInput1 }),
|
|
9599
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$q.label },
|
|
9600
|
+
React__default["default"].createElement("span", { className: styles$q.label_text }, title.firstName))),
|
|
9601
|
+
React__default["default"].createElement("div", { className: styles$q.form },
|
|
9602
|
+
React__default["default"].createElement("input", { className: `${styles$q.input} ${title.lastName != undefined ? styles$q.with_title : styles$q.without_title} ${lastName.length > 0 ? styles$q.valid : styles$q.not_valid}`, name: "lastName", type: "name", style: { width: width != "100%" ? "100px" : width }, placeholder: placeholder.lastName, defaultValue: defaultValue.lastName, onInput: onInput2 }),
|
|
9603
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$q.label },
|
|
9604
|
+
React__default["default"].createElement("span", { className: styles$q.label_text }, title.lastName)))));
|
|
9598
9605
|
}
|
|
9599
9606
|
|
|
9600
|
-
var css_248z$
|
|
9601
|
-
var styles$
|
|
9602
|
-
styleInject(css_248z$
|
|
9607
|
+
var css_248z$p = ".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: 1px 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 /* Chrome, Safari, Edge, Opera */\n /* Firefox */\n}\n.styles-module_input__ReFFR:focus, .styles-module_input__ReFFR:active {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_input__ReFFR.styles-module_not_available__mZ5-1, .styles-module_input__ReFFR:invalid {\n border: var(--invalid-border);\n box-shadow: var(--invalid-shadow);\n}\n.styles-module_input__ReFFR::-webkit-outer-spin-button, .styles-module_input__ReFFR::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.styles-module_input__ReFFR[type=number] {\n -moz-appearance: textfield;\n appearance: textfield;\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 font-family: var(--font-1);\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}";
|
|
9608
|
+
var styles$p = {"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"};
|
|
9609
|
+
styleInject(css_248z$p);
|
|
9603
9610
|
|
|
9604
9611
|
function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "number", width = "100%", available = true, onInput = (event) => { } }) {
|
|
9605
9612
|
const [value, setValue] = React.useState(defaultValue);
|
|
@@ -9608,37 +9615,37 @@ function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFoc
|
|
|
9608
9615
|
element.focus();
|
|
9609
9616
|
}, [autoFocus]);
|
|
9610
9617
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9611
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9612
|
-
React__default["default"].createElement("input", { className: `${styles$
|
|
9618
|
+
React__default["default"].createElement("div", { className: styles$p.container, style: { width } },
|
|
9619
|
+
React__default["default"].createElement("input", { className: `${styles$p.input} ${title != undefined ? styles$p.with_title : styles$p.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$p.valid : styles$p.not_valid} ${available ? styles$p.available : styles$p.not_available}`, name: name, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
|
|
9613
9620
|
setValue(event.target.value);
|
|
9614
9621
|
onInput(event);
|
|
9615
9622
|
} }),
|
|
9616
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
9617
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9623
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$p.label },
|
|
9624
|
+
React__default["default"].createElement("span", { className: styles$p.label_text }, title)))));
|
|
9618
9625
|
}
|
|
9619
9626
|
|
|
9620
|
-
var css_248z$
|
|
9621
|
-
var styles$
|
|
9622
|
-
styleInject(css_248z$
|
|
9627
|
+
var css_248z$o = "@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 border: 1px solid var(--border-2);\n border-radius: 12px;\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.styles-module_container__UdmOO:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\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-right: none;\n outline: none;\n border: none;\n transition: all 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n\n.styles-module_hideButton__83mRI {\n outline: none;\n display: flex;\n align-items: center;\n padding: 10px;\n border: none;\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 font-family: var(--font-1);\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}";
|
|
9628
|
+
var styles$o = {"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"};
|
|
9629
|
+
styleInject(css_248z$o);
|
|
9623
9630
|
|
|
9624
9631
|
function InputPassword({ id, placeholder = "", title = "Passwort", name = 'password', isVisible = true, width = "100%", minLength = 8, autoComplete, forgotLink = false }) {
|
|
9625
9632
|
const [value, setValue] = React.useState("");
|
|
9626
9633
|
const [hidePassword, setHidePassword] = React.useState(true);
|
|
9627
9634
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9628
|
-
React__default["default"].createElement("div", { className: `${styles$
|
|
9629
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9630
|
-
React__default["default"].createElement("input", { className: `${styles$
|
|
9631
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
9632
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9633
|
-
React__default["default"].createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$
|
|
9635
|
+
React__default["default"].createElement("div", { className: `${styles$o.container} ${isVisible ? styles$o.visible : styles$o.hidden}`, style: { width: width } },
|
|
9636
|
+
React__default["default"].createElement("div", { className: styles$o.form },
|
|
9637
|
+
React__default["default"].createElement("input", { className: `${styles$o.input} ${title != undefined ? styles$o.with_title : styles$o.without_title} ${value.length > 0 ? styles$o.valid : styles$o.not_valid}`, name: name, id: id, minLength: minLength, autoComplete: autoComplete, placeholder: placeholder, type: hidePassword ? "password" : "text", onInput: (event) => setValue(event.target.value) }),
|
|
9638
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$o.label },
|
|
9639
|
+
React__default["default"].createElement("span", { className: styles$o.label_text }, title)),
|
|
9640
|
+
React__default["default"].createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$o.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
|
|
9634
9641
|
React__default["default"].createElement(SvgIcon, { iconName: hidePassword ? "visibility" : "visibility_off" }))),
|
|
9635
9642
|
forgotLink &&
|
|
9636
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9643
|
+
React__default["default"].createElement("div", { className: styles$o.forgot_container }, forgotLink))));
|
|
9637
9644
|
}
|
|
9638
9645
|
|
|
9639
|
-
var css_248z$
|
|
9640
|
-
var styles$
|
|
9641
|
-
styleInject(css_248z$
|
|
9646
|
+
var css_248z$n = ".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: 1px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n text-align: center;\n font-size: 18px;\n font-weight: 400;\n background: var(--background-1);\n color: var(--foreground-1);\n font-family: var(--font-1);\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\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}";
|
|
9647
|
+
var styles$n = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
|
|
9648
|
+
styleInject(css_248z$n);
|
|
9642
9649
|
|
|
9643
9650
|
function InputPin({ name, length, onFinished = () => { } }) {
|
|
9644
9651
|
const [state, setState] = React.useState({});
|
|
@@ -9704,20 +9711,20 @@ function InputPin({ name, length, onFinished = () => { } }) {
|
|
|
9704
9711
|
ref.current.value = "";
|
|
9705
9712
|
});
|
|
9706
9713
|
}
|
|
9707
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9714
|
+
return (React__default["default"].createElement("div", { className: styles$n.container },
|
|
9708
9715
|
React__default["default"].createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
|
|
9709
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9716
|
+
React__default["default"].createElement("div", { className: styles$n.input_wrapper }, [...Array(length)].map((value, i) => {
|
|
9710
9717
|
if (i == 0) {
|
|
9711
|
-
return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$
|
|
9718
|
+
return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$n.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
|
|
9712
9719
|
}
|
|
9713
|
-
return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$
|
|
9720
|
+
return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$n.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
|
|
9714
9721
|
})),
|
|
9715
9722
|
React__default["default"].createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
|
|
9716
9723
|
}
|
|
9717
9724
|
|
|
9718
|
-
var css_248z$
|
|
9719
|
-
var styles$
|
|
9720
|
-
styleInject(css_248z$
|
|
9725
|
+
var css_248z$m = ".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: 1px 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: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n border: var(--invalid-border);\n box-shadow: var(--invalid-shadow);\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 font-family: var(--font-1);\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}";
|
|
9726
|
+
var styles$m = {"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"};
|
|
9727
|
+
styleInject(css_248z$m);
|
|
9721
9728
|
|
|
9722
9729
|
function InputText({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, autoComplete = "off", available = true, onInput = () => { } }) {
|
|
9723
9730
|
const [value, setValue] = React.useState(defaultValue);
|
|
@@ -9727,29 +9734,29 @@ function InputText({ id, title, name, placeholder = "", defaultValue = "", autoF
|
|
|
9727
9734
|
element.focus();
|
|
9728
9735
|
}, [autoFocus]);
|
|
9729
9736
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9730
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9731
|
-
React__default["default"].createElement("input", { className: `${styles$
|
|
9737
|
+
React__default["default"].createElement("div", { className: styles$m.container, style: { width, marginBottom } },
|
|
9738
|
+
React__default["default"].createElement("input", { className: `${styles$m.input} ${title != undefined ? styles$m.with_title : styles$m.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$m.valid : styles$m.not_valid} ${available ? styles$m.available : styles$m.not_available}`, name: name, id: id, type: type, placeholder: placeholder, autoComplete: autoComplete, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
|
|
9732
9739
|
setValue(event.target.value);
|
|
9733
9740
|
onInput(event);
|
|
9734
9741
|
} }),
|
|
9735
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
9736
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9742
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$m.label },
|
|
9743
|
+
React__default["default"].createElement("span", { className: styles$m.label_text }, title)))));
|
|
9737
9744
|
}
|
|
9738
9745
|
|
|
9739
|
-
var css_248z$
|
|
9740
|
-
var styles$
|
|
9741
|
-
styleInject(css_248z$
|
|
9746
|
+
var css_248z$l = ".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@keyframes styles-module_fadeIn__ytfsX {\n from {\n width: 0;\n }\n to {\n width: 100%;\n }\n}\n@keyframes styles-module_moveIn__E7c-3 {\n from {\n left: 0;\n }\n to {\n left: 100%;\n }\n}\n.styles-module_progress__Zj-B7 {\n left: 0;\n top: 0;\n height: 3px;\n position: relative;\n}\n.styles-module_progress__Zj-B7::before {\n height: 3px;\n content: \"\";\n left: 0;\n top: 0;\n background: var(--foreground-1);\n position: absolute;\n animation: styles-module_fadeIn__ytfsX 2s ease forwards;\n}\n.styles-module_progress__Zj-B7.styles-module_enableDot__CJC4D::after {\n content: \"\";\n height: 10px;\n width: 10px;\n background: var(--foreground-1);\n border-radius: 5px;\n left: 100%;\n bottom: -3.5px;\n position: absolute;\n animation: styles-module_moveIn__E7c-3 2s ease forwards;\n}";
|
|
9747
|
+
var styles$l = {"container":"styles-module_container__u4q5n","background":"styles-module_background__jt-ry","progress":"styles-module_progress__Zj-B7","fadeIn":"styles-module_fadeIn__ytfsX","enableDot":"styles-module_enableDot__CJC4D","moveIn":"styles-module_moveIn__E7c-3"};
|
|
9748
|
+
styleInject(css_248z$l);
|
|
9742
9749
|
|
|
9743
9750
|
function ProgressBar({ length, progress, enableDot = false }) {
|
|
9744
9751
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9745
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9746
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9747
|
-
React__default["default"].createElement("div", { className: [styles$
|
|
9752
|
+
React__default["default"].createElement("div", { className: styles$l.container },
|
|
9753
|
+
React__default["default"].createElement("div", { className: styles$l.background },
|
|
9754
|
+
React__default["default"].createElement("div", { className: [styles$l.progress, enableDot ? styles$l.enableDot : styles$l.disableDot].join(" "), style: { width: `${progress / length * 100}%` } })))));
|
|
9748
9755
|
}
|
|
9749
9756
|
|
|
9750
|
-
var css_248z$
|
|
9751
|
-
var styles$
|
|
9752
|
-
styleInject(css_248z$
|
|
9757
|
+
var css_248z$k = ".styles-module_container__Grkzw {\n display: flex;\n flex-direction: column;\n gap: 12px;\n color: var(--foreground-3);\n margin-bottom: 20px;\n position: relative;\n}\n.styles-module_container__Grkzw [type=radio] {\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__Grkzw [type=radio] + label {\n position: absolute;\n cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n width: 15px;\n height: 15px;\n border-radius: 20px;\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__Grkzw [type=radio] + label::after {\n width: 10px;\n height: 10px;\n border-radius: 10px;\n display: block;\n content: \"\";\n z-index: 6;\n position: absolute;\n left: 4.5px;\n top: 4.5px;\n background-color: var(--background-1);\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__Grkzw .styles-module_option__nijjM {\n position: relative;\n}\n.styles-module_container__Grkzw [type=radio] ~ span {\n position: absolute;\n opacity: 1;\n color: var(--background-1);\n z-index: 100;\n user-select: none;\n pointer-events: none;\n -webkit-user-select: none;\n font-weight: 500;\n bottom: -1.5px;\n left: -1px;\n}\n.styles-module_container__Grkzw [type=radio]:checked ~ span {\n color: var(--background-1);\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::before {\n background-color: var(--background-1);\n border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::after {\n background-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n border-color: var(--primary-2);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::after {\n background: var(--primary-2);\n}";
|
|
9758
|
+
var styles$k = {"container":"styles-module_container__Grkzw","option":"styles-module_option__nijjM"};
|
|
9759
|
+
styleInject(css_248z$k);
|
|
9753
9760
|
|
|
9754
9761
|
function RadioButtons({ options, group, selected, onInput = () => { }, width = "100%" }) {
|
|
9755
9762
|
const [selectedOption, setSelected] = React.useState(selected);
|
|
@@ -9758,7 +9765,7 @@ function RadioButtons({ options, group, selected, onInput = () => { }, width = "
|
|
|
9758
9765
|
setSelected(event.target.value);
|
|
9759
9766
|
onInput(event);
|
|
9760
9767
|
}
|
|
9761
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9768
|
+
return (React__default["default"].createElement("div", { className: styles$k.container, style: { width: width } }, options.map((option) => React__default["default"].createElement("div", { className: styles$k.option, key: option.name },
|
|
9762
9769
|
selectedOption == option.name ?
|
|
9763
9770
|
React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
|
|
9764
9771
|
:
|
|
@@ -9766,6 +9773,22 @@ function RadioButtons({ options, group, selected, onInput = () => { }, width = "
|
|
|
9766
9773
|
React__default["default"].createElement("label", { htmlFor: option.name }, option.text)))));
|
|
9767
9774
|
}
|
|
9768
9775
|
|
|
9776
|
+
var css_248z$j = ".styles-module_container__w6EeH {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n color: var(--foreground-3);\n position: relative;\n padding: 10px;\n}\n.styles-module_container__w6EeH input {\n display: none;\n}\n.styles-module_container__w6EeH input:checked + .styles-module_card__BJCpq {\n background: var(--focus-background);\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_container__w6EeH input:checked + .styles-module_card__BJCpq .styles-module_badge__jDMNF {\n opacity: 1;\n transform: translateY(0%);\n scale: 1;\n}\n\n.styles-module_card__BJCpq {\n cursor: pointer;\n padding: 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n display: flex;\n align-items: center;\n flex-direction: column;\n text-align: center;\n justify-content: center;\n color: black;\n gap: 10px;\n font-family: var(--font-1);\n position: relative;\n}\n.styles-module_card__BJCpq .styles-module_badge__jDMNF {\n position: absolute;\n content: \"\";\n top: 10px;\n right: 10px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--primary-1);\n opacity: 0;\n transition: 0.2s ease;\n transform: translateY(-20%);\n scale: 0.8;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n}";
|
|
9777
|
+
var styles$j = {"container":"styles-module_container__w6EeH","card":"styles-module_card__BJCpq","badge":"styles-module_badge__jDMNF"};
|
|
9778
|
+
styleInject(css_248z$j);
|
|
9779
|
+
|
|
9780
|
+
const RadioCard = ({ children, name, defaultChecked, value, ...props }) => {
|
|
9781
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9782
|
+
React__default["default"].createElement("input", { type: "radio", name: name, id: value, value: value, ...props }),
|
|
9783
|
+
React__default["default"].createElement("label", { htmlFor: value, className: styles$j.card },
|
|
9784
|
+
children,
|
|
9785
|
+
React__default["default"].createElement("span", { className: styles$j.badge },
|
|
9786
|
+
React__default["default"].createElement(SvgIcon, { iconName: "check", size: "16px" })))));
|
|
9787
|
+
};
|
|
9788
|
+
function RadioCards({ children, columns, ...props }) {
|
|
9789
|
+
return (React__default["default"].createElement("div", { className: styles$j.container, style: { gridTemplateColumns: columns }, ...props }, children));
|
|
9790
|
+
}
|
|
9791
|
+
|
|
9769
9792
|
var css_248z$i = ".styles-module_container__RhsQe {\n margin-right: 8px;\n}\n.styles-module_container__RhsQe.styles-module_back__j0HkC {\n display: block;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 {\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 font-family: var(--font-1);\n font-weight: 500;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 span {\n color: var(--foreground-1);\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0:hover {\n background: var(--background-1);\n}\n.styles-module_container__RhsQe .styles-module_label__bdjMh {\n display: none;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_label__bdjMh {\n display: block;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0 {\n flex-direction: row;\n gap: 5px;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0:hover {\n background: none;\n}\n\n@media (max-width: 800px) {\n .styles-module_container__RhsQe.styles-module_forward__Vjtye {\n flex-basis: auto;\n }\n .styles-module_container__RhsQe.styles-module_back__j0HkC {\n flex-basis: 100%;\n }\n .styles-module_container__RhsQe.styles-module_back__j0HkC .styles-module_label__bdjMh {\n display: block;\n }\n .styles-module_container__RhsQe.styles-module_back__j0HkC .styles-module_button__HuX-0 {\n gap: 5px;\n width: auto;\n }\n .styles-module_container__RhsQe.styles-module_back__j0HkC .styles-module_button__HuX-0:hover {\n background: none;\n }\n}";
|
|
9770
9793
|
var styles$i = {"container":"styles-module_container__RhsQe","back":"styles-module_back__j0HkC","button":"styles-module_button__HuX-0","label":"styles-module_label__bdjMh","middle":"styles-module_middle__xg7RF","forward":"styles-module_forward__Vjtye"};
|
|
9771
9794
|
styleInject(css_248z$i);
|
|
@@ -10592,6 +10615,7 @@ exports.Checkbox = Checkbox;
|
|
|
10592
10615
|
exports.ChooseRole = ChooseRole;
|
|
10593
10616
|
exports.CopyCode = CopyCode;
|
|
10594
10617
|
exports.Dialog = Dialog;
|
|
10618
|
+
exports.DialogButton = DialogButton;
|
|
10595
10619
|
exports.Dropdown = Dropdown;
|
|
10596
10620
|
exports.EmptyCard = EmptyCard;
|
|
10597
10621
|
exports.FormText = FormText;
|
|
@@ -10611,6 +10635,8 @@ exports.OptionField2 = OptionField2;
|
|
|
10611
10635
|
exports.Popover = Popover;
|
|
10612
10636
|
exports.ProgressBar = ProgressBar;
|
|
10613
10637
|
exports.RadioButtons = RadioButtons;
|
|
10638
|
+
exports.RadioCard = RadioCard;
|
|
10639
|
+
exports.RadioCards = RadioCards;
|
|
10614
10640
|
exports.RedirectButton = RedirectButton;
|
|
10615
10641
|
exports.SearchChips = SearchChips;
|
|
10616
10642
|
exports.Searchbar = Searchbar;
|