math-main-components 0.0.209 → 0.0.211
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.
|
@@ -3,11 +3,11 @@ import type { StoryObj } from '@storybook/react';
|
|
|
3
3
|
import { Dropdown } from '.';
|
|
4
4
|
declare const meta: {
|
|
5
5
|
title: string;
|
|
6
|
-
component: <Type extends string>({ options, unit,
|
|
6
|
+
component: <Type extends string>({ options, unit, onInput, ...props }: {
|
|
7
7
|
options: Dropdown<Type>[];
|
|
8
|
-
|
|
8
|
+
onInput?: ((value: Type) => void) | undefined;
|
|
9
9
|
unit?: string | undefined;
|
|
10
|
-
} & import("react").InputHTMLAttributes<
|
|
10
|
+
} & import("react").InputHTMLAttributes<HTMLSelectElement>) => import("react").JSX.Element;
|
|
11
11
|
parameters: {
|
|
12
12
|
layout: string;
|
|
13
13
|
};
|
|
@@ -3,8 +3,8 @@ export type Dropdown<Type> = {
|
|
|
3
3
|
value: Type;
|
|
4
4
|
label: string;
|
|
5
5
|
};
|
|
6
|
-
export declare const Dropdown: <Type extends string>({ options, unit,
|
|
6
|
+
export declare const Dropdown: <Type extends string>({ options, unit, onInput, ...props }: {
|
|
7
7
|
options: Dropdown<Type>[];
|
|
8
|
-
|
|
8
|
+
onInput?: ((value: Type) => void) | undefined;
|
|
9
9
|
unit?: string | undefined;
|
|
10
|
-
} & React.InputHTMLAttributes<
|
|
10
|
+
} & React.InputHTMLAttributes<HTMLSelectElement>) => React.JSX.Element;
|
|
@@ -3,10 +3,10 @@ export type RadioOption = {
|
|
|
3
3
|
text: string;
|
|
4
4
|
name: string;
|
|
5
5
|
};
|
|
6
|
-
export declare function RadioButtons({ options, group, selected,
|
|
6
|
+
export declare function RadioButtons({ options, group, selected, onInput, width }: {
|
|
7
7
|
options: RadioOption[];
|
|
8
8
|
group: string;
|
|
9
9
|
selected?: string;
|
|
10
|
-
|
|
10
|
+
onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
11
11
|
width?: string;
|
|
12
12
|
}): React.JSX.Element;
|
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 = "", onInput = () => { }, ...props }) => {
|
|
9543
|
+
const onDropdownChange = (event) => {
|
|
9544
|
+
onInput(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, ...props },
|
|
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);
|
|
@@ -9902,15 +9916,15 @@ var css_248z$7 = ".styles-module_container__Grkzw {\n display: flex;\n flex-di
|
|
|
9902
9916
|
var styles$7 = {"container":"styles-module_container__Grkzw","option":"styles-module_option__nijjM"};
|
|
9903
9917
|
styleInject(css_248z$7);
|
|
9904
9918
|
|
|
9905
|
-
function RadioButtons({ options, group, selected,
|
|
9919
|
+
function RadioButtons({ options, group, selected, onInput = () => { }, width = "100%" }) {
|
|
9906
9920
|
const [selectedOption, setSelected] = React.useState(selected);
|
|
9921
|
+
React.useEffect(() => setSelected(selected), [selected]);
|
|
9907
9922
|
function onUpdateSelected(event) {
|
|
9908
9923
|
setSelected(event.target.value);
|
|
9909
|
-
|
|
9910
|
-
onClick(event);
|
|
9924
|
+
onInput(event);
|
|
9911
9925
|
}
|
|
9912
9926
|
return (React__default["default"].createElement("div", { className: styles$7.container, style: { width: width } }, options.map((option) => React__default["default"].createElement("div", { className: styles$7.option, key: option.name },
|
|
9913
|
-
|
|
9927
|
+
selectedOption == option.name ?
|
|
9914
9928
|
React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
|
|
9915
9929
|
:
|
|
9916
9930
|
React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected }),
|
|
@@ -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 = "", onInput = () => { }, ...props }) => {
|
|
9517
|
+
const onDropdownChange = (event) => {
|
|
9518
|
+
onInput(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, ...props },
|
|
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);
|
|
@@ -9876,15 +9890,15 @@ var css_248z$7 = ".styles-module_container__Grkzw {\n display: flex;\n flex-di
|
|
|
9876
9890
|
var styles$7 = {"container":"styles-module_container__Grkzw","option":"styles-module_option__nijjM"};
|
|
9877
9891
|
styleInject(css_248z$7);
|
|
9878
9892
|
|
|
9879
|
-
function RadioButtons({ options, group, selected,
|
|
9893
|
+
function RadioButtons({ options, group, selected, onInput = () => { }, width = "100%" }) {
|
|
9880
9894
|
const [selectedOption, setSelected] = useState(selected);
|
|
9895
|
+
useEffect(() => setSelected(selected), [selected]);
|
|
9881
9896
|
function onUpdateSelected(event) {
|
|
9882
9897
|
setSelected(event.target.value);
|
|
9883
|
-
|
|
9884
|
-
onClick(event);
|
|
9898
|
+
onInput(event);
|
|
9885
9899
|
}
|
|
9886
9900
|
return (React__default.createElement("div", { className: styles$7.container, style: { width: width } }, options.map((option) => React__default.createElement("div", { className: styles$7.option, key: option.name },
|
|
9887
|
-
|
|
9901
|
+
selectedOption == option.name ?
|
|
9888
9902
|
React__default.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
|
|
9889
9903
|
:
|
|
9890
9904
|
React__default.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected }),
|
|
@@ -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 };
|