math-main-components 0.0.209 → 0.0.210
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 +63 -48
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +63 -49
- package/package.json +1 -1
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$A = "";
|
|
58
|
+
var styles$A = {};
|
|
59
|
+
styleInject(css_248z$A);
|
|
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$A.container }, cards.map((card, index) => React__default["default"].createElement("div", { key: index, className: [styles$A.card, selected == index ? styles$A.selected : styles$A.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,59 +9406,59 @@ 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$z = ".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$z = {"container":"styles-module_container__PIGIl"};
|
|
9411
|
+
styleInject(css_248z$z);
|
|
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$z.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$y = ".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}";
|
|
9421
|
+
var styles$y = {"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$y);
|
|
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$y.container, isActive ? styles$y.active : styles$y.not_active].join(" ") },
|
|
9427
|
+
React__default["default"].createElement("div", { className: styles$y.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$y.content }, children)));
|
|
9431
9431
|
}
|
|
9432
9432
|
|
|
9433
|
-
var css_248z$
|
|
9434
|
-
var styles$
|
|
9435
|
-
styleInject(css_248z$
|
|
9433
|
+
var css_248z$x = ".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 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_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$x = {"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"};
|
|
9435
|
+
styleInject(css_248z$x);
|
|
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$x.container },
|
|
9443
|
+
React__default["default"].createElement("button", { className: [styles$x.button, styles$x[type], (children && !iconName) ? styles$x.onlyText : "", (!children && iconName) ? styles$x.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$w = ".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$w = {"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$w);
|
|
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$w.container, isVisible ? styles$w.visible : styles$w.hidden, ["arrow_forward"].includes(iconName) ? styles$w.rotate : null].join(" "), style: style },
|
|
9454
|
+
React__default["default"].createElement("button", { type: type, className: `${styles$w.button} ${styles$w[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$v = ".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}";
|
|
9460
|
+
var styles$v = {"card":"styles-module_card__bOd85"};
|
|
9461
|
+
styleInject(css_248z$v);
|
|
9462
9462
|
|
|
9463
9463
|
function CardButton({ id, children, iconName, onClick, ...props }) {
|
|
9464
9464
|
function onClickCard(event) {
|
|
@@ -9466,27 +9466,27 @@ function CardButton({ id, children, iconName, onClick, ...props }) {
|
|
|
9466
9466
|
if (onClick)
|
|
9467
9467
|
onClick(event);
|
|
9468
9468
|
}
|
|
9469
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9469
|
+
return (React__default["default"].createElement("div", { className: styles$v.card, onClick: onClickCard, id: id, ...props },
|
|
9470
9470
|
React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
|
|
9471
9471
|
React__default["default"].createElement("h2", null, children)));
|
|
9472
9472
|
}
|
|
9473
9473
|
|
|
9474
|
-
var css_248z$
|
|
9475
|
-
var styles$
|
|
9476
|
-
styleInject(css_248z$
|
|
9474
|
+
var css_248z$u = ".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}";
|
|
9475
|
+
var styles$u = {"container":"styles-module_container__gCCnD"};
|
|
9476
|
+
styleInject(css_248z$u);
|
|
9477
9477
|
|
|
9478
9478
|
function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children }) {
|
|
9479
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9479
|
+
return (React__default["default"].createElement("div", { className: styles$u.container },
|
|
9480
9480
|
React__default["default"].createElement("input", { type: "checkbox", onInput: onInput, name: name, checked: checked, defaultChecked: defaultChecked, id: id || name }),
|
|
9481
9481
|
React__default["default"].createElement("label", { htmlFor: id || name }, children),
|
|
9482
9482
|
React__default["default"].createElement(SvgIcon, { iconName: "done", size: "21px" })));
|
|
9483
9483
|
}
|
|
9484
9484
|
|
|
9485
|
-
var css_248z$
|
|
9486
|
-
var styles$
|
|
9487
|
-
styleInject(css_248z$
|
|
9485
|
+
var css_248z$t = ".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}";
|
|
9486
|
+
var styles$t = {"container":"styles-module_container__OqDNA","item":"styles-module_item__1SMCI","selected":"styles-module_selected__AXIA-"};
|
|
9487
|
+
styleInject(css_248z$t);
|
|
9488
9488
|
|
|
9489
|
-
const ChooseRoleItem = ({ item, isSelected, onUpdate, }) => (React__default["default"].createElement("div", { className: [styles$
|
|
9489
|
+
const ChooseRoleItem = ({ item, isSelected, onUpdate, }) => (React__default["default"].createElement("div", { className: [styles$t.item, isSelected ? styles$t.selected : styles$t.not_selected].join(" "), onClick: () => onUpdate(item.value) }, item.title));
|
|
9490
9490
|
function ChooseRole({ roles, defaultSelected, readOnly = false, onChange = () => { } }) {
|
|
9491
9491
|
const [selected, setSelected] = React.useState(defaultSelected);
|
|
9492
9492
|
React.useEffect(() => setSelected(defaultSelected), [defaultSelected]);
|
|
@@ -9496,27 +9496,27 @@ function ChooseRole({ roles, defaultSelected, readOnly = false, onChange = () =>
|
|
|
9496
9496
|
setSelected(newRole);
|
|
9497
9497
|
onChange(newRole);
|
|
9498
9498
|
}
|
|
9499
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9499
|
+
return (React__default["default"].createElement("div", { className: styles$t.container }, roles.map(item => React__default["default"].createElement(ChooseRoleItem, { key: item.value, item: item, onUpdate: onUpdate, isSelected: selected === item.value }))));
|
|
9500
9500
|
}
|
|
9501
9501
|
|
|
9502
|
-
var css_248z$
|
|
9503
|
-
var styles$
|
|
9504
|
-
styleInject(css_248z$
|
|
9502
|
+
var css_248z$s = ".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}";
|
|
9503
|
+
var styles$s = {"container":"styles-module_container__yV6C8"};
|
|
9504
|
+
styleInject(css_248z$s);
|
|
9505
9505
|
|
|
9506
9506
|
function CopyCode({ code, onCopy = () => { }, ...props }) {
|
|
9507
9507
|
const onClick = () => {
|
|
9508
9508
|
navigator.clipboard.writeText(code);
|
|
9509
9509
|
onCopy();
|
|
9510
9510
|
};
|
|
9511
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9511
|
+
return (React__default["default"].createElement("div", { className: styles$s.container, onClick: onClick, ...props },
|
|
9512
9512
|
React__default["default"].createElement(SvgIcon, { iconName: "content_copy" }),
|
|
9513
9513
|
React__default["default"].createElement("span", null, code),
|
|
9514
9514
|
React__default["default"].createElement("input", { type: "hidden", name: "code", value: code })));
|
|
9515
9515
|
}
|
|
9516
9516
|
|
|
9517
|
-
var css_248z$
|
|
9518
|
-
var styles$
|
|
9519
|
-
styleInject(css_248z$
|
|
9517
|
+
var css_248z$r = ".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}";
|
|
9518
|
+
var styles$r = {"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"};
|
|
9519
|
+
styleInject(css_248z$r);
|
|
9520
9520
|
|
|
9521
9521
|
function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }) {
|
|
9522
9522
|
function onClick(event) {
|
|
@@ -9527,14 +9527,28 @@ function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }
|
|
|
9527
9527
|
onClose(event, data);
|
|
9528
9528
|
}
|
|
9529
9529
|
}
|
|
9530
|
-
return (React__default["default"].createElement("div", { id: "dialog-backdrop", className: `${styles$
|
|
9531
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9530
|
+
return (React__default["default"].createElement("div", { id: "dialog-backdrop", className: `${styles$r.container} ${enabled ? styles$r.active : styles$r.disabled}`, onClick: onClick },
|
|
9531
|
+
React__default["default"].createElement("div", { className: styles$r.dialog_window },
|
|
9532
9532
|
children,
|
|
9533
9533
|
text && React__default["default"].createElement("h1", null, text),
|
|
9534
|
-
React__default["default"].createElement("button", { className: styles$
|
|
9535
|
-
React__default["default"].createElement("button", { className: styles$
|
|
9534
|
+
React__default["default"].createElement("button", { className: styles$r.cancel_button, id: "cancel-button", onClick: onClick }, "Abbrechen"),
|
|
9535
|
+
React__default["default"].createElement("button", { className: styles$r.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
|
|
9536
9536
|
}
|
|
9537
9537
|
|
|
9538
|
+
var css_248z$q = ".styles-module_container__hGVir {\n display: flex;\n align-items: center;\n gap: 10px;\n font-family: \"Playfair\", serif;\n border-radius: 18px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n background: var(--background-1);\n padding: 6px;\n border: 1px solid var(--border-1);\n margin-bottom: 20px;\n font-family: var(--font-1);\n}\n\n.styles-module_container__hGVir {\n border: 1px solid var(--border-1);\n padding: 10px;\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}\n.styles-module_container__hGVir:hover {\n border-color: var(--primary-2);\n}\n.styles-module_container__hGVir:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_container__hGVir select {\n border: none;\n outline: none;\n background: none;\n cursor: pointer;\n font-size: 16px;\n min-width: 64px;\n height: 100%;\n font-family: var(--font-1);\n}\n\n.styles-module_input__h-BA2::-webkit-outer-spin-button,\n.styles-module_input__h-BA2::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.styles-module_input_container__2u56C {\n padding: 0px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px solid transparent;\n transition: 0.2s ease;\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 6px;\n background: var(--background-1);\n border-color: var(--border-1);\n height: 55px;\n}\n.styles-module_input_container__2u56C:hover {\n border-color: var(--primary-2);\n}\n.styles-module_input_container__2u56C .styles-module_unit_label__EVP9q {\n font-size: 16px;\n text-align: right;\n}\n.styles-module_input_container__2u56C:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2 {\n width: 0px;\n min-width: 64px;\n outline: none;\n border: none;\n -moz-appearance: textfield;\n appearance: textfield;\n font-size: 16px;\n text-align: right;\n background: transparent;\n font-family: var(--font-1);\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2[type=number] {\n cursor: pointer;\n flex: 1;\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2[type=range] {\n width: 100%;\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2[type=number]:disabled {\n background: transparent;\n color: var(--foreground-3);\n}";
|
|
9539
|
+
var styles$q = {"container":"styles-module_container__hGVir","input":"styles-module_input__h-BA2","input_container":"styles-module_input_container__2u56C","unit_label":"styles-module_unit_label__EVP9q"};
|
|
9540
|
+
styleInject(css_248z$q);
|
|
9541
|
+
|
|
9542
|
+
const Dropdown = ({ options = [], unit = "", onChange = () => { }, ...props }) => {
|
|
9543
|
+
const onDropdownChange = (event) => {
|
|
9544
|
+
onChange(event.target.value);
|
|
9545
|
+
};
|
|
9546
|
+
return (React__default["default"].createElement("div", { className: styles$q.container },
|
|
9547
|
+
React__default["default"].createElement("select", { className: styles$q.select, onChange: onDropdownChange },
|
|
9548
|
+
React__default["default"].createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
|
|
9549
|
+
options.map((option, index) => (React__default["default"].createElement("option", { key: index, value: option.value }, option.label))))));
|
|
9550
|
+
};
|
|
9551
|
+
|
|
9538
9552
|
var css_248z$p = ".styles-module_card__hT9fw {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 20px;\n padding: 100px 0px;\n font-family: \"Space Grotesk\", sans-serif;\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}";
|
|
9539
9553
|
var styles$p = {"card":"styles-module_card__hT9fw"};
|
|
9540
9554
|
styleInject(css_248z$p);
|
|
@@ -10503,6 +10517,7 @@ exports.Checkbox = Checkbox;
|
|
|
10503
10517
|
exports.ChooseRole = ChooseRole;
|
|
10504
10518
|
exports.CopyCode = CopyCode;
|
|
10505
10519
|
exports.Dialog = Dialog;
|
|
10520
|
+
exports.Dropdown = Dropdown;
|
|
10506
10521
|
exports.EmptyCard = EmptyCard;
|
|
10507
10522
|
exports.FormButton = FormButton;
|
|
10508
10523
|
exports.FormText = FormText;
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export * from './components/Checkbox';
|
|
|
8
8
|
export * from './components/ChooseRole';
|
|
9
9
|
export * from './components/CopyCode';
|
|
10
10
|
export * from './components/Dialog';
|
|
11
|
+
export * from './components/Dropdown';
|
|
11
12
|
export * from './components/EmptyCard';
|
|
12
13
|
export * from './components/FormButton';
|
|
13
14
|
export * from './components/FormText';
|
package/dist/index.esm.js
CHANGED
|
@@ -28,13 +28,13 @@ function styleInject(css, ref) {
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
var css_248z$
|
|
32
|
-
var styles$
|
|
33
|
-
styleInject(css_248z$
|
|
31
|
+
var css_248z$A = "";
|
|
32
|
+
var styles$A = {};
|
|
33
|
+
styleInject(css_248z$A);
|
|
34
34
|
|
|
35
35
|
function Slider({ cards }) {
|
|
36
36
|
const [selected, setSelected] = useState(0);
|
|
37
|
-
return (React__default.createElement("div", { className: styles$
|
|
37
|
+
return (React__default.createElement("div", { className: styles$A.container }, cards.map((card, index) => React__default.createElement("div", { key: index, className: [styles$A.card, selected == index ? styles$A.selected : styles$A.not_selected].join(" ") },
|
|
38
38
|
React__default.createElement("h1", null, card.title),
|
|
39
39
|
React__default.createElement("p", null, card.description)))));
|
|
40
40
|
}
|
|
@@ -9380,59 +9380,59 @@ function SvgIcon({ animate = false, toggle = false, ...props }) {
|
|
|
9380
9380
|
React__default.createElement(Icon, { ...props }))));
|
|
9381
9381
|
}
|
|
9382
9382
|
|
|
9383
|
-
var css_248z$
|
|
9384
|
-
var styles$
|
|
9385
|
-
styleInject(css_248z$
|
|
9383
|
+
var css_248z$z = ".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}";
|
|
9384
|
+
var styles$z = {"container":"styles-module_container__PIGIl"};
|
|
9385
|
+
styleInject(css_248z$z);
|
|
9386
9386
|
|
|
9387
9387
|
function StepBack({ iconName = "arrow_back", text = "Weitere Möglichkeiten" }) {
|
|
9388
9388
|
return (React__default.createElement(React__default.Fragment, null,
|
|
9389
|
-
React__default.createElement("div", { className: styles$
|
|
9389
|
+
React__default.createElement("div", { className: styles$z.container },
|
|
9390
9390
|
React__default.createElement(SvgIcon, { iconName: iconName }),
|
|
9391
9391
|
text)));
|
|
9392
9392
|
}
|
|
9393
9393
|
|
|
9394
|
-
var css_248z$
|
|
9395
|
-
var styles$
|
|
9396
|
-
styleInject(css_248z$
|
|
9394
|
+
var css_248z$y = ".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}";
|
|
9395
|
+
var styles$y = {"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"};
|
|
9396
|
+
styleInject(css_248z$y);
|
|
9397
9397
|
|
|
9398
9398
|
function Accordeon({ title, children }) {
|
|
9399
9399
|
const [isActive, setActive] = useState(false);
|
|
9400
|
-
return (React__default.createElement("div", { className: [styles$
|
|
9401
|
-
React__default.createElement("div", { className: styles$
|
|
9400
|
+
return (React__default.createElement("div", { className: [styles$y.container, isActive ? styles$y.active : styles$y.not_active].join(" ") },
|
|
9401
|
+
React__default.createElement("div", { className: styles$y.head, onClick: () => setActive(!isActive) },
|
|
9402
9402
|
React__default.createElement(SvgIcon, { iconName: "expand_more" }),
|
|
9403
9403
|
React__default.createElement("h3", null, title)),
|
|
9404
|
-
React__default.createElement("div", { className: styles$
|
|
9404
|
+
React__default.createElement("div", { className: styles$y.content }, children)));
|
|
9405
9405
|
}
|
|
9406
9406
|
|
|
9407
|
-
var css_248z$
|
|
9408
|
-
var styles$
|
|
9409
|
-
styleInject(css_248z$
|
|
9407
|
+
var css_248z$x = ".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 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_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}";
|
|
9408
|
+
var styles$x = {"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"};
|
|
9409
|
+
styleInject(css_248z$x);
|
|
9410
9410
|
|
|
9411
9411
|
function Button({ id, children, iconName, iconFill = "white", type = "blue", onClick = () => { }, ...props }) {
|
|
9412
9412
|
const onClickButton = (event) => {
|
|
9413
9413
|
event.preventDefault();
|
|
9414
9414
|
onClick(event);
|
|
9415
9415
|
};
|
|
9416
|
-
return (React__default.createElement("div", { className: styles$
|
|
9417
|
-
React__default.createElement("button", { className: [styles$
|
|
9416
|
+
return (React__default.createElement("div", { className: styles$x.container },
|
|
9417
|
+
React__default.createElement("button", { className: [styles$x.button, styles$x[type], (children && !iconName) ? styles$x.onlyText : "", (!children && iconName) ? styles$x.onlyIcon : ""].join(" "), onClick: onClickButton, id: id, ...props },
|
|
9418
9418
|
children,
|
|
9419
9419
|
iconName && React__default.createElement(SvgIcon, { iconName: iconName }))));
|
|
9420
9420
|
}
|
|
9421
9421
|
|
|
9422
|
-
var css_248z$
|
|
9423
|
-
var styles$
|
|
9424
|
-
styleInject(css_248z$
|
|
9422
|
+
var css_248z$w = ".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}";
|
|
9423
|
+
var styles$w = {"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"};
|
|
9424
|
+
styleInject(css_248z$w);
|
|
9425
9425
|
|
|
9426
9426
|
function Button2({ id, children, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, style, onClick }) {
|
|
9427
|
-
return (React__default.createElement("div", { className: [styles$
|
|
9428
|
-
React__default.createElement("button", { type: type, className: `${styles$
|
|
9427
|
+
return (React__default.createElement("div", { className: [styles$w.container, isVisible ? styles$w.visible : styles$w.hidden, ["arrow_forward"].includes(iconName) ? styles$w.rotate : null].join(" "), style: style },
|
|
9428
|
+
React__default.createElement("button", { type: type, className: `${styles$w.button} ${styles$w[theme]}`, onClick: onClick, id: id },
|
|
9429
9429
|
children,
|
|
9430
9430
|
React__default.createElement(SvgIcon, { iconName: iconName }))));
|
|
9431
9431
|
}
|
|
9432
9432
|
|
|
9433
|
-
var css_248z$
|
|
9434
|
-
var styles$
|
|
9435
|
-
styleInject(css_248z$
|
|
9433
|
+
var css_248z$v = ".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}";
|
|
9434
|
+
var styles$v = {"card":"styles-module_card__bOd85"};
|
|
9435
|
+
styleInject(css_248z$v);
|
|
9436
9436
|
|
|
9437
9437
|
function CardButton({ id, children, iconName, onClick, ...props }) {
|
|
9438
9438
|
function onClickCard(event) {
|
|
@@ -9440,27 +9440,27 @@ function CardButton({ id, children, iconName, onClick, ...props }) {
|
|
|
9440
9440
|
if (onClick)
|
|
9441
9441
|
onClick(event);
|
|
9442
9442
|
}
|
|
9443
|
-
return (React__default.createElement("div", { className: styles$
|
|
9443
|
+
return (React__default.createElement("div", { className: styles$v.card, onClick: onClickCard, id: id, ...props },
|
|
9444
9444
|
React__default.createElement(SvgIcon, { iconName: iconName, size: "32px" }),
|
|
9445
9445
|
React__default.createElement("h2", null, children)));
|
|
9446
9446
|
}
|
|
9447
9447
|
|
|
9448
|
-
var css_248z$
|
|
9449
|
-
var styles$
|
|
9450
|
-
styleInject(css_248z$
|
|
9448
|
+
var css_248z$u = ".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}";
|
|
9449
|
+
var styles$u = {"container":"styles-module_container__gCCnD"};
|
|
9450
|
+
styleInject(css_248z$u);
|
|
9451
9451
|
|
|
9452
9452
|
function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children }) {
|
|
9453
|
-
return (React__default.createElement("div", { className: styles$
|
|
9453
|
+
return (React__default.createElement("div", { className: styles$u.container },
|
|
9454
9454
|
React__default.createElement("input", { type: "checkbox", onInput: onInput, name: name, checked: checked, defaultChecked: defaultChecked, id: id || name }),
|
|
9455
9455
|
React__default.createElement("label", { htmlFor: id || name }, children),
|
|
9456
9456
|
React__default.createElement(SvgIcon, { iconName: "done", size: "21px" })));
|
|
9457
9457
|
}
|
|
9458
9458
|
|
|
9459
|
-
var css_248z$
|
|
9460
|
-
var styles$
|
|
9461
|
-
styleInject(css_248z$
|
|
9459
|
+
var css_248z$t = ".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}";
|
|
9460
|
+
var styles$t = {"container":"styles-module_container__OqDNA","item":"styles-module_item__1SMCI","selected":"styles-module_selected__AXIA-"};
|
|
9461
|
+
styleInject(css_248z$t);
|
|
9462
9462
|
|
|
9463
|
-
const ChooseRoleItem = ({ item, isSelected, onUpdate, }) => (React__default.createElement("div", { className: [styles$
|
|
9463
|
+
const ChooseRoleItem = ({ item, isSelected, onUpdate, }) => (React__default.createElement("div", { className: [styles$t.item, isSelected ? styles$t.selected : styles$t.not_selected].join(" "), onClick: () => onUpdate(item.value) }, item.title));
|
|
9464
9464
|
function ChooseRole({ roles, defaultSelected, readOnly = false, onChange = () => { } }) {
|
|
9465
9465
|
const [selected, setSelected] = useState(defaultSelected);
|
|
9466
9466
|
useEffect(() => setSelected(defaultSelected), [defaultSelected]);
|
|
@@ -9470,27 +9470,27 @@ function ChooseRole({ roles, defaultSelected, readOnly = false, onChange = () =>
|
|
|
9470
9470
|
setSelected(newRole);
|
|
9471
9471
|
onChange(newRole);
|
|
9472
9472
|
}
|
|
9473
|
-
return (React__default.createElement("div", { className: styles$
|
|
9473
|
+
return (React__default.createElement("div", { className: styles$t.container }, roles.map(item => React__default.createElement(ChooseRoleItem, { key: item.value, item: item, onUpdate: onUpdate, isSelected: selected === item.value }))));
|
|
9474
9474
|
}
|
|
9475
9475
|
|
|
9476
|
-
var css_248z$
|
|
9477
|
-
var styles$
|
|
9478
|
-
styleInject(css_248z$
|
|
9476
|
+
var css_248z$s = ".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}";
|
|
9477
|
+
var styles$s = {"container":"styles-module_container__yV6C8"};
|
|
9478
|
+
styleInject(css_248z$s);
|
|
9479
9479
|
|
|
9480
9480
|
function CopyCode({ code, onCopy = () => { }, ...props }) {
|
|
9481
9481
|
const onClick = () => {
|
|
9482
9482
|
navigator.clipboard.writeText(code);
|
|
9483
9483
|
onCopy();
|
|
9484
9484
|
};
|
|
9485
|
-
return (React__default.createElement("div", { className: styles$
|
|
9485
|
+
return (React__default.createElement("div", { className: styles$s.container, onClick: onClick, ...props },
|
|
9486
9486
|
React__default.createElement(SvgIcon, { iconName: "content_copy" }),
|
|
9487
9487
|
React__default.createElement("span", null, code),
|
|
9488
9488
|
React__default.createElement("input", { type: "hidden", name: "code", value: code })));
|
|
9489
9489
|
}
|
|
9490
9490
|
|
|
9491
|
-
var css_248z$
|
|
9492
|
-
var styles$
|
|
9493
|
-
styleInject(css_248z$
|
|
9491
|
+
var css_248z$r = ".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}";
|
|
9492
|
+
var styles$r = {"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"};
|
|
9493
|
+
styleInject(css_248z$r);
|
|
9494
9494
|
|
|
9495
9495
|
function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }) {
|
|
9496
9496
|
function onClick(event) {
|
|
@@ -9501,14 +9501,28 @@ function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }
|
|
|
9501
9501
|
onClose(event, data);
|
|
9502
9502
|
}
|
|
9503
9503
|
}
|
|
9504
|
-
return (React__default.createElement("div", { id: "dialog-backdrop", className: `${styles$
|
|
9505
|
-
React__default.createElement("div", { className: styles$
|
|
9504
|
+
return (React__default.createElement("div", { id: "dialog-backdrop", className: `${styles$r.container} ${enabled ? styles$r.active : styles$r.disabled}`, onClick: onClick },
|
|
9505
|
+
React__default.createElement("div", { className: styles$r.dialog_window },
|
|
9506
9506
|
children,
|
|
9507
9507
|
text && React__default.createElement("h1", null, text),
|
|
9508
|
-
React__default.createElement("button", { className: styles$
|
|
9509
|
-
React__default.createElement("button", { className: styles$
|
|
9508
|
+
React__default.createElement("button", { className: styles$r.cancel_button, id: "cancel-button", onClick: onClick }, "Abbrechen"),
|
|
9509
|
+
React__default.createElement("button", { className: styles$r.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
|
|
9510
9510
|
}
|
|
9511
9511
|
|
|
9512
|
+
var css_248z$q = ".styles-module_container__hGVir {\n display: flex;\n align-items: center;\n gap: 10px;\n font-family: \"Playfair\", serif;\n border-radius: 18px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n background: var(--background-1);\n padding: 6px;\n border: 1px solid var(--border-1);\n margin-bottom: 20px;\n font-family: var(--font-1);\n}\n\n.styles-module_container__hGVir {\n border: 1px solid var(--border-1);\n padding: 10px;\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}\n.styles-module_container__hGVir:hover {\n border-color: var(--primary-2);\n}\n.styles-module_container__hGVir:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_container__hGVir select {\n border: none;\n outline: none;\n background: none;\n cursor: pointer;\n font-size: 16px;\n min-width: 64px;\n height: 100%;\n font-family: var(--font-1);\n}\n\n.styles-module_input__h-BA2::-webkit-outer-spin-button,\n.styles-module_input__h-BA2::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.styles-module_input_container__2u56C {\n padding: 0px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px solid transparent;\n transition: 0.2s ease;\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 6px;\n background: var(--background-1);\n border-color: var(--border-1);\n height: 55px;\n}\n.styles-module_input_container__2u56C:hover {\n border-color: var(--primary-2);\n}\n.styles-module_input_container__2u56C .styles-module_unit_label__EVP9q {\n font-size: 16px;\n text-align: right;\n}\n.styles-module_input_container__2u56C:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2 {\n width: 0px;\n min-width: 64px;\n outline: none;\n border: none;\n -moz-appearance: textfield;\n appearance: textfield;\n font-size: 16px;\n text-align: right;\n background: transparent;\n font-family: var(--font-1);\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2[type=number] {\n cursor: pointer;\n flex: 1;\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2[type=range] {\n width: 100%;\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2[type=number]:disabled {\n background: transparent;\n color: var(--foreground-3);\n}";
|
|
9513
|
+
var styles$q = {"container":"styles-module_container__hGVir","input":"styles-module_input__h-BA2","input_container":"styles-module_input_container__2u56C","unit_label":"styles-module_unit_label__EVP9q"};
|
|
9514
|
+
styleInject(css_248z$q);
|
|
9515
|
+
|
|
9516
|
+
const Dropdown = ({ options = [], unit = "", onChange = () => { }, ...props }) => {
|
|
9517
|
+
const onDropdownChange = (event) => {
|
|
9518
|
+
onChange(event.target.value);
|
|
9519
|
+
};
|
|
9520
|
+
return (React__default.createElement("div", { className: styles$q.container },
|
|
9521
|
+
React__default.createElement("select", { className: styles$q.select, onChange: onDropdownChange },
|
|
9522
|
+
React__default.createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
|
|
9523
|
+
options.map((option, index) => (React__default.createElement("option", { key: index, value: option.value }, option.label))))));
|
|
9524
|
+
};
|
|
9525
|
+
|
|
9512
9526
|
var css_248z$p = ".styles-module_card__hT9fw {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 20px;\n padding: 100px 0px;\n font-family: \"Space Grotesk\", sans-serif;\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}";
|
|
9513
9527
|
var styles$p = {"card":"styles-module_card__hT9fw"};
|
|
9514
9528
|
styleInject(css_248z$p);
|
|
@@ -10469,4 +10483,4 @@ const site = (pathname) => process.env.NEXT_PUBLIC_APP_URL + pathname;
|
|
|
10469
10483
|
const app = (pathname) => site("/app" + pathname);
|
|
10470
10484
|
const cdn = (pathname) => process.env.NEXT_PUBLIC_WEB_ASSETS_CDN + pathname;
|
|
10471
10485
|
|
|
10472
|
-
export { Accordeon, Button, Button2, CardButton, Checkbox, ChooseRole, CopyCode, Dialog, EmptyCard, FormButton, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, NumberDropdown, NumberField, OptionField, OptionField2, Popover, ProgressBar, RadioButtons, RedirectButton, SearchChips, Searchbar, Slider, StepBack, SvgIcon, Table, Tabs, TextWithIcon, UsageCard, app, cdn, site, useDimensions, useOrientation, useScroll };
|
|
10486
|
+
export { Accordeon, Button, Button2, CardButton, Checkbox, ChooseRole, CopyCode, Dialog, Dropdown, EmptyCard, FormButton, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, NumberDropdown, NumberField, OptionField, OptionField2, Popover, ProgressBar, RadioButtons, RedirectButton, SearchChips, Searchbar, Slider, StepBack, SvgIcon, Table, Tabs, TextWithIcon, UsageCard, app, cdn, site, useDimensions, useOrientation, useScroll };
|