math-main-components 0.0.227 → 0.0.231

package/dist/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React, { MouseEvent, ReactNode } from 'react';
-type ButtonType = "blue" | "red" | "grey" | "lightBlue";
+type ButtonType = "blue" | "blue2" | "red" | "grey" | "lightBlue";
 export declare function Button({ id, children, iconName, iconFill, type, onClick, ...props }: {
     id?: string;
     iconName?: string;

package/dist/components/Button/Button.stories.d.ts

@@ -12,3 +12,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
 export declare const Icon: Story;
+export declare const Blue2: Story;

package/dist/components/Dialog/Dialog.d.ts

@@ -1,9 +1,11 @@
-import React from "react";
-export declare function Dialog({ data, enabled, text, onClose, onSubmit, children }: {
+import React, { ReactNode } from "react";
+export declare const DialogButton: () => React.JSX.Element;
+export type DialogProps = {
     data?: unknown;
     enabled?: boolean;
     text?: any;
     onClose?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, data?: any | undefined) => void;
     onSubmit?: (event: React.MouseEvent<HTMLButtonElement>, data?: any | undefined) => void;
-    children: any;
-}): React.JSX.Element;
+    children: ReactNode;
+};
+export declare function Dialog({ data, enabled, text, onClose, onSubmit, children }: DialogProps): React.JSX.Element;

package/dist/components/Dialog/Dialog.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: () => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/RadioCards/RadioCards.d.ts

@@ -0,0 +1,7 @@
+import React, { HTMLAttributes, InputHTMLAttributes } from 'react';
+export declare const RadioCard: ({ children, name, defaultChecked, value, ...props }: {
+    children: React.ReactNode;
+} & React.InputHTMLAttributes<HTMLInputElement>) => React.JSX.Element;
+export declare function RadioCards({ children, columns, ...props }: {
+    columns?: number;
+} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;

package/dist/components/RadioCards/RadioCards.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { RadioCards } from './RadioCards';
+declare const meta: {
+    title: string;
+    component: typeof RadioCards;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/RadioCards/index.d.ts

@@ -0,0 +1 @@
+export { RadioCards } from './RadioCards';

package/dist/index.cjs.js

@@ -9430,8 +9430,8 @@ function Accordeon({ title, children }) {
         React__default["default"].createElement("div", { className: styles$z.content }, children)));
 }
 
-var css_248z$y = ".styles-module_container__TP0rp {\n  max-width: 100%;\n}\n\n.styles-module_button__Sh-fr {\n  padding: 10px 18px;\n  border-radius: 40px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 400;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  transition: 0.2s ease-in-out;\n  font-family: \"Space Grotesk\", sans-serif;\n  border: 1px solid transparent;\n}\n.styles-module_button__Sh-fr:hover {\n  filter: brightness(0.9);\n}\n.styles-module_button__Sh-fr:focus {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n  background: var(--primary-1);\n  color: white;\n}\n.styles-module_button__Sh-fr.styles-module_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}";
-var styles$y = {"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"};
+var css_248z$y = ".styles-module_container__TP0rp {\n  max-width: 100%;\n}\n\n.styles-module_button__Sh-fr {\n  padding: 10px 18px;\n  border-radius: 40px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 400;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  transition: 0.2s ease-in-out;\n  font-family: \"Space Grotesk\", sans-serif;\n  border: 1px solid transparent;\n}\n.styles-module_button__Sh-fr:hover {\n  filter: brightness(0.9);\n}\n.styles-module_button__Sh-fr:focus {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n  background: var(--primary-1);\n  color: white;\n}\n.styles-module_button__Sh-fr.styles-module_blue2__rejgq {\n  background: var(--background-1);\n  border-color: var(--primary-1);\n  color: var(--primary-1);\n}\n.styles-module_button__Sh-fr.styles-module_lightBlue__7EKfp {\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n.styles-module_button__Sh-fr.styles-module_red__EhImH {\n  background: var(--red-1);\n  color: white;\n}\n.styles-module_button__Sh-fr.styles-module_grey__kAVD1 {\n  background: var(--background-1);\n  color: var(--foreground-2);\n}\n.styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI {\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  align-items: center;\n  justify-content: center;\n}\n.styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI span {\n  font-size: 22px !important;\n}";
+var styles$y = {"container":"styles-module_container__TP0rp","button":"styles-module_button__Sh-fr","blue":"styles-module_blue__DRdbo","blue2":"styles-module_blue2__rejgq","lightBlue":"styles-module_lightBlue__7EKfp","red":"styles-module_red__EhImH","grey":"styles-module_grey__kAVD1","onlyIcon":"styles-module_onlyIcon__bNVnI"};
 styleInject(css_248z$y);
 
 function Button({ id, children, iconName, iconFill = "white", type = "blue", onClick = () => { }, ...props }) {
@@ -9469,23 +9469,30 @@ function Checkbox({ id, name, defaultChecked = false, onInput = () => { }, child
         React__default["default"].createElement(SvgIcon, { iconName: "done", size: "21px" })));
 }
 
-var css_248z$v = ".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}";
-var styles$v = {"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"};
+var css_248z$v = ".styles-module_container__9-1MH {\n  position: fixed;\n  height: 100vh;\n  width: 100vw;\n  backdrop-filter: blur(10px) brightness(70%);\n  left: 0;\n  top: 0;\n  z-index: 10000;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo {\n  opacity: 1;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo .styles-module_dialog_window__0Bn2M {\n  opacity: 1;\n  transform: translateY(0%) scale(1);\n}\n.styles-module_container__9-1MH.styles-module_disabled__sELpy {\n  pointer-events: none;\n  opacity: 0;\n}\n.styles-module_container__9-1MH.styles-module_disabled__sELpy .styles-module_dialog_window__0Bn2M {\n  opacity: 0;\n  transform: translateY(5%) scale(0.9);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M {\n  background: var(--background-1);\n  border-radius: 20px;\n  padding: 35px;\n  width: 450px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  max-width: 100%;\n  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n  cursor: auto;\n  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_title__1--Ss {\n  font-size: 26px;\n  font-weight: 500;\n  line-height: 1.5;\n  margin-top: 0px;\n  margin-bottom: 20px;\n  text-align: center;\n  color: var(--foreground-1);\n  font-family: var(--font-1);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS,\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux {\n  border-radius: 12px;\n  padding: 14px 0px;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  transition: 0.2s ease-in-out;\n  font-size: 14px;\n  font-family: var(--font-1);\n  border: 1px solid transparent;\n  user-select: none;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS:hover,\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux:hover {\n  filter: brightness(0.95);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS:active,\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux:active {\n  box-shadow: var(--focus-shadow);\n  border: var(--focus-border);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS {\n  color: var(--foreground-1);\n  background: var(--background-2);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux {\n  color: var(--background-1);\n  background: var(--primary-1);\n}";
+var styles$v = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","dialog_window":"styles-module_dialog_window__0Bn2M","disabled":"styles-module_disabled__sELpy","title":"styles-module_title__1--Ss","cancel_button":"styles-module_cancel_button__KhwLS","submit_button":"styles-module_submit_button__xLzux"};
 styleInject(css_248z$v);
 
-function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }) {
+const DialogButton = () => {
+    const [enabled, setEnabled] = React.useState(false);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Button, { onClick: () => setEnabled(true) }, "Dialog \u00F6ffnen"),
+        React__default["default"].createElement(Dialog, { enabled: enabled, onClose: () => setEnabled(false), onSubmit: () => setEnabled(false) },
+            React__default["default"].createElement("h1", null, "Dialog"),
+            React__default["default"].createElement("p", null, "Dialog content"))));
+};
+function Dialog({ data, enabled, text, onClose = () => { }, onSubmit = () => { }, children }) {
     function onClick(event) {
         const element = event.target;
         const id = element.id;
         if (["dialog-backdrop", "cancel-button"].includes(id)) {
-            if (onClose)
-                onClose(event, data);
+            onClose(event, data);
         }
     }
     return (React__default["default"].createElement("div", { id: "dialog-backdrop", className: `${styles$v.container} ${enabled ? styles$v.active : styles$v.disabled}`, onClick: onClick },
         React__default["default"].createElement("div", { className: styles$v.dialog_window },
             children,
-            text && React__default["default"].createElement("h1", null, text),
+            text && React__default["default"].createElement("h1", { className: styles$v.title }, text),
             React__default["default"].createElement("button", { className: styles$v.cancel_button, id: "cancel-button", onClick: onClick }, "Abbrechen"),
             React__default["default"].createElement("button", { className: styles$v.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
 }
@@ -10592,6 +10599,7 @@ exports.Checkbox = Checkbox;
 exports.ChooseRole = ChooseRole;
 exports.CopyCode = CopyCode;
 exports.Dialog = Dialog;
+exports.DialogButton = DialogButton;
 exports.Dropdown = Dropdown;
 exports.EmptyCard = EmptyCard;
 exports.FormText = FormText;

package/dist/index.esm.js

@@ -9404,8 +9404,8 @@ function Accordeon({ title, children }) {
         React__default.createElement("div", { className: styles$z.content }, children)));
 }
 
-var css_248z$y = ".styles-module_container__TP0rp {\n  max-width: 100%;\n}\n\n.styles-module_button__Sh-fr {\n  padding: 10px 18px;\n  border-radius: 40px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 400;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  transition: 0.2s ease-in-out;\n  font-family: \"Space Grotesk\", sans-serif;\n  border: 1px solid transparent;\n}\n.styles-module_button__Sh-fr:hover {\n  filter: brightness(0.9);\n}\n.styles-module_button__Sh-fr:focus {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n  background: var(--primary-1);\n  color: white;\n}\n.styles-module_button__Sh-fr.styles-module_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}";
-var styles$y = {"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"};
+var css_248z$y = ".styles-module_container__TP0rp {\n  max-width: 100%;\n}\n\n.styles-module_button__Sh-fr {\n  padding: 10px 18px;\n  border-radius: 40px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 400;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  transition: 0.2s ease-in-out;\n  font-family: \"Space Grotesk\", sans-serif;\n  border: 1px solid transparent;\n}\n.styles-module_button__Sh-fr:hover {\n  filter: brightness(0.9);\n}\n.styles-module_button__Sh-fr:focus {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n  background: var(--primary-1);\n  color: white;\n}\n.styles-module_button__Sh-fr.styles-module_blue2__rejgq {\n  background: var(--background-1);\n  border-color: var(--primary-1);\n  color: var(--primary-1);\n}\n.styles-module_button__Sh-fr.styles-module_lightBlue__7EKfp {\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n.styles-module_button__Sh-fr.styles-module_red__EhImH {\n  background: var(--red-1);\n  color: white;\n}\n.styles-module_button__Sh-fr.styles-module_grey__kAVD1 {\n  background: var(--background-1);\n  color: var(--foreground-2);\n}\n.styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI {\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  align-items: center;\n  justify-content: center;\n}\n.styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI span {\n  font-size: 22px !important;\n}";
+var styles$y = {"container":"styles-module_container__TP0rp","button":"styles-module_button__Sh-fr","blue":"styles-module_blue__DRdbo","blue2":"styles-module_blue2__rejgq","lightBlue":"styles-module_lightBlue__7EKfp","red":"styles-module_red__EhImH","grey":"styles-module_grey__kAVD1","onlyIcon":"styles-module_onlyIcon__bNVnI"};
 styleInject(css_248z$y);
 
 function Button({ id, children, iconName, iconFill = "white", type = "blue", onClick = () => { }, ...props }) {
@@ -9443,23 +9443,30 @@ function Checkbox({ id, name, defaultChecked = false, onInput = () => { }, child
         React__default.createElement(SvgIcon, { iconName: "done", size: "21px" })));
 }
 
-var css_248z$v = ".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}";
-var styles$v = {"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"};
+var css_248z$v = ".styles-module_container__9-1MH {\n  position: fixed;\n  height: 100vh;\n  width: 100vw;\n  backdrop-filter: blur(10px) brightness(70%);\n  left: 0;\n  top: 0;\n  z-index: 10000;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo {\n  opacity: 1;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo .styles-module_dialog_window__0Bn2M {\n  opacity: 1;\n  transform: translateY(0%) scale(1);\n}\n.styles-module_container__9-1MH.styles-module_disabled__sELpy {\n  pointer-events: none;\n  opacity: 0;\n}\n.styles-module_container__9-1MH.styles-module_disabled__sELpy .styles-module_dialog_window__0Bn2M {\n  opacity: 0;\n  transform: translateY(5%) scale(0.9);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M {\n  background: var(--background-1);\n  border-radius: 20px;\n  padding: 35px;\n  width: 450px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  max-width: 100%;\n  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n  cursor: auto;\n  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_title__1--Ss {\n  font-size: 26px;\n  font-weight: 500;\n  line-height: 1.5;\n  margin-top: 0px;\n  margin-bottom: 20px;\n  text-align: center;\n  color: var(--foreground-1);\n  font-family: var(--font-1);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS,\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux {\n  border-radius: 12px;\n  padding: 14px 0px;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  transition: 0.2s ease-in-out;\n  font-size: 14px;\n  font-family: var(--font-1);\n  border: 1px solid transparent;\n  user-select: none;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS:hover,\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux:hover {\n  filter: brightness(0.95);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS:active,\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux:active {\n  box-shadow: var(--focus-shadow);\n  border: var(--focus-border);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS {\n  color: var(--foreground-1);\n  background: var(--background-2);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux {\n  color: var(--background-1);\n  background: var(--primary-1);\n}";
+var styles$v = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","dialog_window":"styles-module_dialog_window__0Bn2M","disabled":"styles-module_disabled__sELpy","title":"styles-module_title__1--Ss","cancel_button":"styles-module_cancel_button__KhwLS","submit_button":"styles-module_submit_button__xLzux"};
 styleInject(css_248z$v);
 
-function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }) {
+const DialogButton = () => {
+    const [enabled, setEnabled] = useState(false);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Button, { onClick: () => setEnabled(true) }, "Dialog \u00F6ffnen"),
+        React__default.createElement(Dialog, { enabled: enabled, onClose: () => setEnabled(false), onSubmit: () => setEnabled(false) },
+            React__default.createElement("h1", null, "Dialog"),
+            React__default.createElement("p", null, "Dialog content"))));
+};
+function Dialog({ data, enabled, text, onClose = () => { }, onSubmit = () => { }, children }) {
     function onClick(event) {
         const element = event.target;
         const id = element.id;
         if (["dialog-backdrop", "cancel-button"].includes(id)) {
-            if (onClose)
-                onClose(event, data);
+            onClose(event, data);
         }
     }
     return (React__default.createElement("div", { id: "dialog-backdrop", className: `${styles$v.container} ${enabled ? styles$v.active : styles$v.disabled}`, onClick: onClick },
         React__default.createElement("div", { className: styles$v.dialog_window },
             children,
-            text && React__default.createElement("h1", null, text),
+            text && React__default.createElement("h1", { className: styles$v.title }, text),
             React__default.createElement("button", { className: styles$v.cancel_button, id: "cancel-button", onClick: onClick }, "Abbrechen"),
             React__default.createElement("button", { className: styles$v.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
 }
@@ -10558,4 +10565,4 @@ const site = (pathname) => process.env.NEXT_PUBLIC_APP_URL + pathname;
 const app = (pathname) => site("/app" + pathname);
 const cdn = (pathname) => process.env.NEXT_PUBLIC_WEB_ASSETS_CDN + pathname;
 
-export { Accordeon, Button, Button2, CardButton, Checkbox, ChooseRole, CopyCode, Dialog, Dropdown, EmptyCard, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, NumberDropdown, NumberField, OptionField, OptionField2, Popover, ProgressBar, RadioButtons, RedirectButton, SearchChips, Searchbar, SelectFileCard, Slider, StepBack, SvgIcon, Switch, Table, Tabs, TextWithIcon, UsageCard, app, cdn, site, useDimensions, useOrientation, useScroll };
+export { Accordeon, Button, Button2, CardButton, Checkbox, ChooseRole, CopyCode, Dialog, DialogButton, Dropdown, EmptyCard, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, NumberDropdown, NumberField, OptionField, OptionField2, Popover, ProgressBar, RadioButtons, RedirectButton, SearchChips, Searchbar, SelectFileCard, Slider, StepBack, SvgIcon, Switch, Table, Tabs, TextWithIcon, UsageCard, app, cdn, site, useDimensions, useOrientation, useScroll };

package/package.json

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

package/styles/theme-styles.scss

@@ -2,6 +2,7 @@
 
     --focus-shadow: 0px 0px 0px 4px #0057FF40;
     --focus-border: 1px solid var(--primary-1);
+    --focus-background: #0055ff12;
     --invalid-shadow: 0px 0px 0px 4px #ff000040;
     --invalid-border: 1px solid var(--red-1);