math-main-components 0.0.196 → 0.0.198

package/dist/components/Accordeon/Accordeon.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-import { AccordeonProps } from './Accordeon.types';
+export type AccordeonProps = {
+    title?: string;
+    children?: React.ReactNode;
+};
 export declare function Accordeon({ title, children }: AccordeonProps): React.JSX.Element;

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

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

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

@@ -1,11 +1,11 @@
 import React, { MouseEvent } from 'react';
 type ButtonType = "blue" | "red" | "grey" | "lightBlue";
-export declare function Button({ id, text, iconName, iconFill, type, onClick }: {
+export declare function Button({ id, children, iconName, iconFill, type, onClick, ...props }: {
     id?: string;
-    text?: string;
     iconName?: string;
     iconFill?: string;
     type?: ButtonType;
+    children?: React.ReactNode;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-}): React.JSX.Element;
+} & React.HTMLAttributes<HTMLButtonElement>): React.JSX.Element;
 export {};

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

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

package/dist/components/{AuthButton/AuthButton.d.ts → Button2/Button2.d.ts}

@@ -1,7 +1,7 @@
 import React, { MouseEvent } from 'react';
-export declare function AuthButton({ id, text, type, theme, iconName, isVisible, style, onClick }: {
+export declare function Button2({ id, children, type, theme, iconName, isVisible, style, onClick }: {
     id?: string;
-    text: string | undefined;
+    children: React.ReactNode;
     type?: 'submit' | 'reset' | 'button' | undefined;
     theme?: 'primary' | 'secondary' | undefined;
     iconName?: string;

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

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

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

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

package/dist/components/CardButton/CardButton.d.ts

@@ -1,7 +1,7 @@
 import React, { MouseEvent } from 'react';
-export declare function CardButton({ id, title, iconName, onClick, }: {
+export declare function CardButton({ id, children, iconName, onClick, ...props }: {
     id?: string;
-    title: string;
+    children: React.ReactNode;
     iconName: string;
     onClick?: (event: MouseEvent<HTMLDivElement>) => {};
-}): React.JSX.Element;
+} & React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;

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

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

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

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

package/dist/components/ChooseRole/ChooseRole.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
-export declare class ChooseRoleItem {
+export type ChooseRoleItem = {
     title: string;
     value: string;
-    constructor(title: string, value: string);
-}
+};
 export declare function ChooseRole({ roles, defaultSelected, readOnly, onChange }: {
+    readOnly?: boolean;
     roles: ChooseRoleItem[];
     defaultSelected: string;
-    readOnly?: boolean;
     onChange: (item: string) => void;
 }): React.JSX.Element;

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

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

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

@@ -1 +1 @@
-export { ChooseRole, ChooseRoleItem } from './ChooseRole';
+export { ChooseRole, type ChooseRoleItem } from './ChooseRole';

package/dist/components/CopyCode/CopyCode.d.ts

@@ -1,6 +1,5 @@
-import React, { CSSProperties } from 'react';
-export declare function CopyCode({ code, style, onCopy }: {
+import React, { HTMLAttributes } from 'react';
+export declare function CopyCode({ code, onCopy, ...props }: {
     code: string;
-    style?: CSSProperties;
     onCopy?: () => void;
-}): React.JSX.Element;
+} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;

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

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

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

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

package/dist/components/FormButton/FormButton.d.ts

@@ -1,10 +1,10 @@
-import React, { CSSProperties, MouseEvent } from 'react';
-export declare function FormButton({ id, text, style, iconName, type, background, onClick }: {
+import React, { CSSProperties, MouseEvent, ReactNode } from 'react';
+export declare function FormButton({ id, children, style, iconName, type, background, onClick, ...props }: {
     id?: string;
-    text: string;
+    children: ReactNode;
     style?: CSSProperties;
     iconName?: string;
     type?: "submit" | "button" | "reset";
     background?: string;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-}): React.JSX.Element;
+} & React.HTMLProps<HTMLButtonElement>): React.JSX.Element;

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

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

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

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

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

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

package/dist/index.cjs.js

@@ -9408,46 +9408,45 @@ function Accordeon({ title, children }) {
         React__default["default"].createElement("div", { className: styles$w.content }, children)));
 }
 
-var css_248z$v = ".styles-module_container__4978M {\n  max-width: 100%;\n  width: 350px;\n  transition: all 0.2s ease-in-out;\n  box-sizing: border-box;\n}\n.styles-module_container__4978M.styles-module_visible__uvQwq {\n  max-height: 100px;\n  opacity: 1;\n}\n.styles-module_container__4978M.styles-module_hidden__Oruyx {\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n}\n\n.styles-module_container__4978M.styles-module_rotate__mmYPQ .styles-module_button__BWOOi:hover span {\n  rotate: -45deg;\n}\n\n.styles-module_button__BWOOi {\n  padding: 12px 20px;\n  background: linear-gradient(60deg, #0075FF, #0056b8);\n  background-position-x: right;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  border-radius: 14px;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  font-weight: 400;\n  gap: 10px;\n  position: relative;\n  transition: all 0.5s ease-in-out;\n}\n.styles-module_button__BWOOi span {\n  transition: 0.1s ease-in-out;\n}\n.styles-module_button__BWOOi:hover {\n  background-position-x: left;\n}\n.styles-module_button__BWOOi.styles-module_secondary__Eoik3 {\n  background: var(--background-2);\n  color: var(--primary-1);\n  border: 1px solid var(--primary-1);\n}\n.styles-module_button__BWOOi.styles-module_secondary__Eoik3 svg {\n  fill: var(--primary-1);\n}\n\n@media (max-width: 450px) {\n  .styles-module_button__BWOOi {\n    font-size: 14px;\n  }\n}";
-var styles$v = {"container":"styles-module_container__4978M","visible":"styles-module_visible__uvQwq","hidden":"styles-module_hidden__Oruyx","rotate":"styles-module_rotate__mmYPQ","button":"styles-module_button__BWOOi","secondary":"styles-module_secondary__Eoik3"};
+var css_248z$v = ".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}";
+var styles$v = {"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"};
 styleInject(css_248z$v);
 
-function AuthButton({ id, text, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, style, onClick }) {
-    return (React__default["default"].createElement("div", { className: [styles$v.container, isVisible ? styles$v.visible : styles$v.hidden, ["arrow_forward"].includes(iconName) ? styles$v.rotate : null].join(" "), style: style },
-        React__default["default"].createElement("button", { type: type, className: `${styles$v.button} ${styles$v[theme]}`, onClick: onClick, id: id },
-            text,
-            React__default["default"].createElement(SvgIcon, { iconName: iconName }))));
+function Button({ id, children, iconName, iconFill = "white", type = "blue", onClick = () => { }, ...props }) {
+    const onClickButton = (event) => {
+        event.preventDefault();
+        onClick(event);
+    };
+    return (React__default["default"].createElement("div", { className: styles$v.container },
+        React__default["default"].createElement("button", { className: [styles$v.button, styles$v[type], (children && !iconName) ? styles$v.onlyText : "", (!children && iconName) ? styles$v.onlyIcon : ""].join(" "), onClick: onClickButton, id: id, ...props },
+            children,
+            iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName }))));
 }
 
-var css_248z$u = ".styles-module_container__TP0rp {\n  max-width: 100%;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr {\n  padding: 10px 18px;\n  border-radius: 40px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 400;\n  align-items: center;\n  border: none;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n  background: var(--primary-1);\n  color: white;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_lightBlue__7EKfp {\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_red__EhImH {\n  background: var(--red-1);\n  color: white;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_grey__kAVD1 {\n  background: var(--background-1);\n  color: var(--foreground-2);\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI {\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  align-items: center;\n  justify-content: center;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI span {\n  font-size: 22px !important;\n}";
-var styles$u = {"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$u = ".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}";
+var styles$u = {"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"};
 styleInject(css_248z$u);
 
-function Button({ id, text, iconName, iconFill = "white", type = "blue", onClick = () => { } }) {
-    function onClickButton(event) {
-        event.preventDefault();
-        if (onClick)
-            onClick(event);
-    }
-    return (React__default["default"].createElement("div", { className: styles$u.container },
-        React__default["default"].createElement("button", { className: [styles$u.button, styles$u[type], (text && !iconName) ? styles$u.onlyText : "", (!text && iconName) ? styles$u.onlyIcon : ""].join(" "), onClick: onClickButton, id: id },
-            text,
-            iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName }))));
+function Button2({ id, children, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, style, onClick }) {
+    return (React__default["default"].createElement("div", { className: [styles$u.container, isVisible ? styles$u.visible : styles$u.hidden, ["arrow_forward"].includes(iconName) ? styles$u.rotate : null].join(" "), style: style },
+        React__default["default"].createElement("button", { type: type, className: `${styles$u.button} ${styles$u[theme]}`, onClick: onClick, id: id },
+            children,
+            React__default["default"].createElement(SvgIcon, { iconName: iconName }))));
 }
 
 var css_248z$t = ".styles-module_card__bOd85 {\n  background: var(--background-2);\n  border: 1px solid var(--border-2);\n  border-radius: 18px;\n  transition: 0.2s ease;\n  padding: 18px 14px;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n  cursor: pointer;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding-top: 30px;\n}\n.styles-module_card__bOd85 span {\n  color: var(--foreground-3);\n}\n.styles-module_card__bOd85:hover {\n  transform: scale(1.01);\n  box-shadow: none;\n  background: none;\n}\n.styles-module_card__bOd85 h2 {\n  margin-top: 0;\n  color: var(--foreground-3);\n  font-weight: 400;\n  font-size: 18px;\n}";
 var styles$t = {"card":"styles-module_card__bOd85"};
 styleInject(css_248z$t);
 
-function CardButton({ id, title, iconName, onClick, }) {
+function CardButton({ id, children, iconName, onClick, ...props }) {
     function onClickCard(event) {
         event.preventDefault();
         if (onClick)
             onClick(event);
     }
-    return (React__default["default"].createElement("div", { className: styles$t.card, onClick: onClickCard, id: id },
+    return (React__default["default"].createElement("div", { className: styles$t.card, onClick: onClickCard, id: id, ...props },
         React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
-        React__default["default"].createElement("h2", null, title)));
+        React__default["default"].createElement("h2", null, children)));
 }
 
 var css_248z$s = ".styles-module_container__gCCnD {\n  margin-bottom: 20px;\n  width: 343px;\n  color: var(--foreground-3);\n}\n.styles-module_container__gCCnD [type=checkbox] {\n  position: relative;\n  left: 15px;\n  top: -4px;\n  z-index: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  margin-left: -3.5px;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n  position: absolute;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n  width: 17px;\n  height: 17px;\n  border-radius: 5px;\n  border: 2px solid var(--border-2);\n  display: block;\n  content: \"\";\n  float: left;\n  margin-right: 8px;\n  z-index: 5;\n  position: relative;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-2);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--background-2);\n}";
@@ -9456,8 +9455,8 @@ styleInject(css_248z$s);
 
 function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children }) {
     return (React__default["default"].createElement("div", { className: styles$s.container },
-        React__default["default"].createElement("input", { type: "checkbox", onInput: onInput, name: name, checked: checked, defaultChecked: defaultChecked, id: id ?? name }),
-        React__default["default"].createElement("label", { htmlFor: id ?? name }, children),
+        React__default["default"].createElement("input", { type: "checkbox", onInput: onInput, name: name, checked: checked, defaultChecked: defaultChecked, id: id || name }),
+        React__default["default"].createElement("label", { htmlFor: id || name }, children),
         React__default["default"].createElement(SvgIcon, { iconName: "done", size: "21px" })));
 }
 
@@ -9465,36 +9464,29 @@ var css_248z$r = ".styles-module_container__OqDNA {\n  display: flex;\n  flex-di
 var styles$r = {"container":"styles-module_container__OqDNA","item":"styles-module_item__1SMCI","selected":"styles-module_selected__AXIA-"};
 styleInject(css_248z$r);
 
-class ChooseRoleItem {
-    title;
-    value;
-    constructor(title, value) {
-        this.title = title;
-        this.value = value;
-    }
-}
-function ChooseRole({ roles, defaultSelected, readOnly = false, onChange }) {
+const ChooseRoleItem = ({ item, isSelected, onUpdate, }) => (React__default["default"].createElement("div", { className: [styles$r.item, isSelected ? styles$r.selected : styles$r.not_selected].join(" "), onClick: () => onUpdate(item.value) }, item.title));
+function ChooseRole({ roles, defaultSelected, readOnly = false, onChange = () => { } }) {
     const [selected, setSelected] = React.useState(defaultSelected);
+    React.useEffect(() => setSelected(defaultSelected), [defaultSelected]);
     function onUpdate(newRole) {
         if (readOnly)
             return;
         setSelected(newRole);
         onChange(newRole);
     }
-    return (React__default["default"].createElement("div", { className: styles$r.container }, roles.map((item, index) => React__default["default"].createElement("div", { key: index, className: [styles$r.item, selected == item.value ? styles$r.selected : styles$r.not_selected].join(" "), onClick: () => onUpdate(item.value) }, item.title))));
+    return (React__default["default"].createElement("div", { className: styles$r.container }, roles.map(item => React__default["default"].createElement(ChooseRoleItem, { key: item.value, item: item, onUpdate: onUpdate, isSelected: selected === item.value }))));
 }
 
 var css_248z$q = ".styles-module_container__yV6C8 {\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n  cursor: pointer;\n  padding: 8px 14px;\n  border-radius: 30px;\n  transition: 0.2s ease-in-out;\n  margin-bottom: 20px;\n  color: var(--foreground-1);\n}\n.styles-module_container__yV6C8:hover {\n  color: var(--primary-1);\n}";
 var styles$q = {"container":"styles-module_container__yV6C8"};
 styleInject(css_248z$q);
 
-function CopyCode({ code, style, onCopy = () => { } }) {
-    function onClick() {
+function CopyCode({ code, onCopy = () => { }, ...props }) {
+    const onClick = () => {
         navigator.clipboard.writeText(code);
-        if (onCopy)
-            onCopy();
-    }
-    return (React__default["default"].createElement("div", { className: styles$q.container, onClick: onClick, style: style },
+        onCopy();
+    };
+    return (React__default["default"].createElement("div", { className: styles$q.container, onClick: onClick, ...props },
         React__default["default"].createElement(SvgIcon, { iconName: "content_copy" }),
         React__default["default"].createElement("span", null, code),
         React__default["default"].createElement("input", { type: "hidden", name: "code", value: code })));
@@ -9521,7 +9513,7 @@ function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }
             React__default["default"].createElement("button", { className: styles$p.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
 }
 
-var css_248z$o = ".styles-module_card__hT9fw {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  gap: 20px;\n  padding: 100px 0px;\n}\n.styles-module_card__hT9fw h1 {\n  margin: 0;\n  font-size: 22px;\n  font-weight: 500;\n}\n.styles-module_card__hT9fw p {\n  margin: 0;\n  font-size: 16px;\n}";
+var css_248z$o = ".styles-module_card__hT9fw {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  gap: 20px;\n  padding: 100px 0px;\n  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}";
 var styles$o = {"card":"styles-module_card__hT9fw"};
 styleInject(css_248z$o);
 
@@ -9530,21 +9522,21 @@ function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorh
         React__default["default"].createElement(SvgIcon, { size: "60px", iconName: iconName }),
         React__default["default"].createElement("h1", null, title),
         React__default["default"].createElement("p", null, subtitle),
-        button && React__default["default"].createElement(Button, { text: button, onClick: onClick, type: "lightBlue" })));
+        button && React__default["default"].createElement(Button, { onClick: onClick, type: "lightBlue" }, button)));
 }
 
 var css_248z$n = ".styles-module_container__HOoBj {\n  margin-bottom: 30px;\n}\n.styles-module_container__HOoBj button {\n  padding: 12px 18px;\n  border-radius: 40px;\n  border: none;\n  color: white;\n  font-weight: 400;\n  font-size: 16px;\n  background: var(--primary-1);\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n}";
 var styles$n = {"container":"styles-module_container__HOoBj"};
 styleInject(css_248z$n);
 
-function FormButton({ id, text, style = {}, iconName = "", type = "submit", background = "#0075FF", onClick = () => { } }) {
+function FormButton({ id, children, style = {}, iconName = "", type = "submit", background = "#0075FF", onClick = () => { }, ...props }) {
     return (React__default["default"].createElement("div", { className: styles$n.container, style: style },
-        React__default["default"].createElement("button", { type: type, onClick: onClick, style: { background: background }, id: id },
-            text,
+        React__default["default"].createElement("button", { type: type, onClick: onClick, style: { background: background }, id: id, ...props },
+            children,
             iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName, color: "white" }))));
 }
 
-var css_248z$m = ".styles-module_container__9wYEm {\n  margin-bottom: 30px;\n  width: 100%;\n}\n.styles-module_container__9wYEm h1,\n.styles-module_container__9wYEm h2,\n.styles-module_container__9wYEm h3,\n.styles-module_container__9wYEm h4,\n.styles-module_container__9wYEm h5 {\n  margin: 0;\n  font-weight: 400;\n  color: var(--foreground-1);\n}\n.styles-module_container__9wYEm h3 {\n  margin-top: 5px;\n}";
+var css_248z$m = ".styles-module_container__9wYEm {\n  margin-bottom: 30px;\n  width: 100%;\n  font-family: var(--font-1);\n}\n.styles-module_container__9wYEm h1,\n.styles-module_container__9wYEm h2,\n.styles-module_container__9wYEm h3,\n.styles-module_container__9wYEm h4,\n.styles-module_container__9wYEm h5 {\n  margin: 0;\n  font-weight: 500;\n  color: var(--foreground-1);\n}\n.styles-module_container__9wYEm h3 {\n  margin-top: 5px;\n  font-weight: 400;\n}";
 var styles$m = {"container":"styles-module_container__9wYEm"};
 styleInject(css_248z$m);
 
@@ -10465,12 +10457,11 @@ const app = (pathname) => site("/app" + pathname);
 const cdn = (pathname) => process.env.NEXT_PUBLIC_WEB_ASSETS_CDN + pathname;
 
 exports.Accordeon = Accordeon;
-exports.AuthButton = AuthButton;
 exports.Button = Button;
+exports.Button2 = Button2;
 exports.CardButton = CardButton;
 exports.Checkbox = Checkbox;
 exports.ChooseRole = ChooseRole;
-exports.ChooseRoleItem = ChooseRoleItem;
 exports.CopyCode = CopyCode;
 exports.Dialog = Dialog;
 exports.EmptyCard = EmptyCard;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export * from './components/Accordeon';
-export * from './components/AuthButton';
 export * from './components/Button';
+export * from './components/Button2';
 export * from './components/CardButton';
 export * from './components/Checkbox';
 export * from './components/ChooseRole';