math-main-components 0.0.196 → 0.0.198

package/dist/index.esm.js

@@ -9382,46 +9382,45 @@ function Accordeon({ title, children }) {
         React__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.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.createElement("button", { type: type, className: `${styles$v.button} ${styles$v[theme]}`, onClick: onClick, id: id },
-            text,
-            React__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.createElement("div", { className: styles$v.container },
+        React__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.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.createElement("div", { className: styles$u.container },
-        React__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.createElement(SvgIcon, { iconName: iconName }))));
+function Button2({ id, children, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, style, onClick }) {
+    return (React__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.createElement("button", { type: type, className: `${styles$u.button} ${styles$u[theme]}`, onClick: onClick, id: id },
+            children,
+            React__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.createElement("div", { className: styles$t.card, onClick: onClickCard, id: id },
+    return (React__default.createElement("div", { className: styles$t.card, onClick: onClickCard, id: id, ...props },
         React__default.createElement(SvgIcon, { iconName: iconName, size: "32px" }),
-        React__default.createElement("h2", null, title)));
+        React__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}";
@@ -9430,8 +9429,8 @@ styleInject(css_248z$s);
 
 function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children }) {
     return (React__default.createElement("div", { className: styles$s.container },
-        React__default.createElement("input", { type: "checkbox", onInput: onInput, name: name, checked: checked, defaultChecked: defaultChecked, id: id ?? name }),
-        React__default.createElement("label", { htmlFor: id ?? name }, children),
+        React__default.createElement("input", { type: "checkbox", onInput: onInput, name: name, checked: checked, defaultChecked: defaultChecked, id: id || name }),
+        React__default.createElement("label", { htmlFor: id || name }, children),
         React__default.createElement(SvgIcon, { iconName: "done", size: "21px" })));
 }
 
@@ -9439,36 +9438,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.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] = useState(defaultSelected);
+    useEffect(() => setSelected(defaultSelected), [defaultSelected]);
     function onUpdate(newRole) {
         if (readOnly)
             return;
         setSelected(newRole);
         onChange(newRole);
     }
-    return (React__default.createElement("div", { className: styles$r.container }, roles.map((item, index) => React__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.createElement("div", { className: styles$r.container }, roles.map(item => React__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.createElement("div", { className: styles$q.container, onClick: onClick, style: style },
+        onCopy();
+    };
+    return (React__default.createElement("div", { className: styles$q.container, onClick: onClick, ...props },
         React__default.createElement(SvgIcon, { iconName: "content_copy" }),
         React__default.createElement("span", null, code),
         React__default.createElement("input", { type: "hidden", name: "code", value: code })));
@@ -9495,7 +9487,7 @@ function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }
             React__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);
 
@@ -9504,21 +9496,21 @@ function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorh
         React__default.createElement(SvgIcon, { size: "60px", iconName: iconName }),
         React__default.createElement("h1", null, title),
         React__default.createElement("p", null, subtitle),
-        button && React__default.createElement(Button, { text: button, onClick: onClick, type: "lightBlue" })));
+        button && React__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.createElement("div", { className: styles$n.container, style: style },
-        React__default.createElement("button", { type: type, onClick: onClick, style: { background: background }, id: id },
-            text,
+        React__default.createElement("button", { type: type, onClick: onClick, style: { background: background }, id: id, ...props },
+            children,
             iconName && React__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);
 
@@ -10438,4 +10430,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, AuthButton, Button, CardButton, Checkbox, ChooseRole, ChooseRoleItem, CopyCode, Dialog, EmptyCard, FormButton, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, OptionField, OptionFieldHorizontal, Popover, ProgressBar, RadioButtons, RadioOption, RedirectButton, SearchChip, SearchChips, Searchbar, Slider, SliderCard, StepBack, SvgIcon, Table, Tabs, TextWithIcon, UsageCard, app, cdn, site, useDimensions, useOrientation, useScroll };
+export { Accordeon, Button, Button2, CardButton, Checkbox, ChooseRole, CopyCode, Dialog, EmptyCard, FormButton, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, OptionField, OptionFieldHorizontal, Popover, ProgressBar, RadioButtons, RadioOption, RedirectButton, SearchChip, SearchChips, Searchbar, Slider, SliderCard, StepBack, SvgIcon, Table, Tabs, TextWithIcon, UsageCard, app, cdn, site, useDimensions, useOrientation, useScroll };

package/dist/styles/font.scss

@@ -0,0 +1,5 @@
+@font-face {
+    font-family: 'Space Grotesk';
+    font-style: normal;
+    src: url("https://pub-cac338ae11a944ff9c57d280468b90e7.r2.dev/font-space-grotesk.ttf") format('ttf');
+}

package/dist/styles/material-symbols.scss

@@ -0,0 +1,24 @@
+@font-face {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    src: url("https://pub-cac338ae11a944ff9c57d280468b90e7.r2.dev/material-symbols-v156.woff2") format('woff2');
+}
+
+
+.material-symbols,
+.material-symbols-outlined {
+    font-family: 'Material Symbols Outlined';
+    font-weight: 200;
+    font-style: normal;
+    font-size: 24px;
+    /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    user-select: none;
+    -webkit-user-select: none;
+}

package/dist/styles/theme-colors.scss

@@ -0,0 +1,164 @@
+:root {
+    --background-1: #FFFFFF;
+    --background-2: #FAFAFA;
+    --background-3: #FAFAFA; // dark -> black
+    --background-4: #e5e5e5; // dark -> brighter
+    --foreground-1: #000000;
+    --foreground-2: #5C5C5C;
+    --foreground-3: #808080;
+    --foreground-4: #000000;
+    --border-1: #F0F0F0;
+    --border-2: #DFDFDF;
+    --border-3: #B1B1B1;
+
+    --primary-1: #0075FF;
+    --primary-2: #C6D4F8;
+
+    // dark green
+    --forest-1: #156A13;
+    --forest-2: #D9EED8;
+
+    // dark red
+    --wine-1: #6A1313;
+    --wine-2: #EFD4D4;
+
+    // dark blue
+    --navy-1: #1A136A;
+    --navy-2: #D4D5EF;
+
+    // dark pink
+    --cherry-1: #63136A;
+    --cherry-2: #DCB2E7;
+
+    // dark grey
+    --stone-1: #4A4A4A;
+    --stone-2: #B9B9B9;
+
+    // dark yellow
+    --sun-1: #D4A400;
+    --sun-2: #fffbe7;
+
+    // dark orange
+    --pumpkin-1: #D46A00;
+    --pumpkin-2: #FEEED4;
+
+
+    // artichoke
+    --artichoke-1: #314e2b;
+    --artichoke-2: #E8FBD7;
+
+    // desert: 
+    --desert-1: #C19A6B;
+    --desert-2: #FDF7F0;
+
+    // yellow
+    --yellow-1: #D4A400;
+    --yellow-2: #fffbe7;
+
+    // green
+    --green-1: #5B8F26;
+    --green-2: #e8fbd7;
+
+    // red
+    --red-1: #EB4E3E;
+    --red-2: #FFE7E3;
+
+    // blue
+    --blue-1: #2961E5;
+    --blue-2: #ECF3FD;
+
+    // pink
+    --pink-1: #A357D7;
+    --pink-2: #F9F4FD;
+
+    // turquoise
+    --turquoise-1: #00C7BE;
+    --turquoise-2: #E8F9F8;
+
+    // orange
+    --orange-1: #FF9500;
+    --orange-2: #FFF5E3;
+}
+
+:root {
+    .dark-theme {
+        --background-1: #000000;
+        --background-2: #181818;
+        --background-3: #000000;
+        --background-4: #262626;
+        --foreground-1: #FFFFFF;
+        --foreground-2: #A1A1A1;
+        --foreground-3: #888888;
+        --foreground-4: #d6d6d6;
+        --border-1: #242424;
+        --border-2: #333333;
+        --border-3: #414141;
+
+        --primary-1: #0075FF;
+        --primary-2: #2c3347;
+
+        // dark green
+        --forest-1: #36c731;
+        --forest-2: #356431;
+
+        // dark red
+        --wine-1: #f3523a;
+        --wine-2: #863636;
+
+        // dark blue
+        --navy-1: rgb(118, 107, 231);
+        --navy-2: #282b8b;
+
+        // dark pink
+        --cherry-1: #c92cd7;
+        --cherry-2: #7c2592;
+
+        // dark grey
+        --stone-1: #e8e8e8;
+        --stone-2: #4d4b4b;
+
+        // dark yellow
+        --sun-1: #ffdb67;
+        --sun-2: #594c12;
+
+        // dark orange
+        --pumpkin-1: #ef9438;
+        --pumpkin-2: #714d11;
+
+        // artichoke
+        --artichoke-1: #314e2b;
+        --artichoke-2: #4a8e0c;
+
+        // desert: 
+        --desert-1: #C19A6B;
+        --desert-2: #594c12;
+
+        // dark yellow
+        --yellow-1: #ffdb67;
+        --yellow-2: #594c12;
+
+        // green
+        --green-1: #95e941;
+        --green-2: #4a8e0c;
+
+        // red
+        --red-1: #ff5c49;
+        --red-2: #741707;
+
+        // blue
+        --blue-1: #a5c0ff;
+        --blue-2: #1b4a8c;
+
+        // pink
+        --pink-1: #c596e4;
+        --pink-2: #581d88;
+
+        // turquoise
+        --turquoise-1: #00C7BE;
+        --turquoise-2: #21504d;
+
+        // orange
+        --orange-1: #FF9500;
+        --orange-2: #FFF5E3;
+    }
+}

package/dist/styles/theme-styles.scss

@@ -0,0 +1,8 @@
+:root {
+
+    --focus-shadow: 0px 0px 0px 4px #0057FF40;
+    --focus-border: 1px solid var(--primary-1);
+
+    --font-1: 'Space Grotesk', var(--font-2);
+    --font-2: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+}

package/package.json

@@ -1,9 +1,10 @@
 {
     "name": "math-main-components",
-    "version": "0.0.196",
+    "version": "0.0.198",
     "author": "Emilian Scheel",
     "files": [
-        "dist/**/*"
+        "dist/**/*",
+        "styles/**/*"
     ],
     "main": "dist/index.cjs.js",
     "module": "dist/index.esm.js",
@@ -20,15 +21,27 @@
         "@rollup/plugin-commonjs": "^22.0.1",
         "@rollup/plugin-node-resolve": "^13.3.0",
         "@rollup/plugin-typescript": "^8.3.4",
+        "@storybook/addon-essentials": "^7.6.13",
+        "@storybook/addon-interactions": "^7.6.13",
+        "@storybook/addon-links": "^7.6.13",
+        "@storybook/addon-onboarding": "^1.0.11",
+        "@storybook/blocks": "^7.6.13",
+        "@storybook/react": "^7.6.13",
+        "@storybook/react-vite": "^7.6.13",
+        "@storybook/test": "^7.6.13",
         "@types/react": "^18.0.15",
         "@types/react-dom": "^18.0.6",
         "autoprefixer": "^10.4.7",
         "babel": "^6.23.0",
         "babel-loader": "^9.1.3",
         "postcss": "^8.4.14",
+        "postcss-load-config": "^5.0.3",
         "postcss-modules": "^4.3.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "react-minimal-pie-chart": "^8.4.0",
         "rollup": "^2.77.2",
+        "rollup-plugin-copy": "^3.5.0",
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-preserve-directives": "^0.2.0",
@@ -49,7 +62,9 @@
         "git-add-package-json": "git add package.json",
         "build": "npm run build:js && npm run build:types",
         "build:js": "rollup -c",
-        "build:types": "tsc --emitDeclarationOnly --outDir dist"
+        "build:types": "tsc --emitDeclarationOnly --outDir dist",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
     },
     "dependencies": {
         "@sanity/types": "^3.20.1",
@@ -60,6 +75,7 @@
         "nodemon": "^3.0.2",
         "pre-commit": "^1.2.2",
         "sanity": "^3.20.1",
+        "storybook": "^7.6.13",
         "stripe": "^14.5.0"
     }
 }

package/styles/font.scss

@@ -0,0 +1,11 @@
+@font-face {
+    font-family: 'Space Grotesk';
+    font-style: normal;
+    src: url("https://pub-cac338ae11a944ff9c57d280468b90e7.r2.dev/font-space-grotesk.ttf") format('ttf');
+}
+
+@font-face {
+    font-family: 'Jakarta Sans';
+    font-style: normal;
+    src: url("https://pub-cac338ae11a944ff9c57d280468b90e7.r2.dev/font-jakarta-sans.ttf") format('ttf');
+}

package/styles/material-symbols.scss

@@ -0,0 +1,24 @@
+@font-face {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    src: url("https://pub-cac338ae11a944ff9c57d280468b90e7.r2.dev/material-symbols-v156.woff2") format('woff2');
+}
+
+
+.material-symbols,
+.material-symbols-outlined {
+    font-family: 'Material Symbols Outlined';
+    font-weight: 200;
+    font-style: normal;
+    font-size: 24px;
+    /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    user-select: none;
+    -webkit-user-select: none;
+}

package/styles/theme-colors.scss

@@ -0,0 +1,164 @@
+:root {
+    --background-1: #FFFFFF;
+    --background-2: #FAFAFA;
+    --background-3: #FAFAFA; // dark -> black
+    --background-4: #e5e5e5; // dark -> brighter
+    --foreground-1: #000000;
+    --foreground-2: #5C5C5C;
+    --foreground-3: #808080;
+    --foreground-4: #000000;
+    --border-1: #F0F0F0;
+    --border-2: #DFDFDF;
+    --border-3: #B1B1B1;
+
+    --primary-1: #0075FF;
+    --primary-2: #C6D4F8;
+
+    // dark green
+    --forest-1: #156A13;
+    --forest-2: #D9EED8;
+
+    // dark red
+    --wine-1: #6A1313;
+    --wine-2: #EFD4D4;
+
+    // dark blue
+    --navy-1: #1A136A;
+    --navy-2: #D4D5EF;
+
+    // dark pink
+    --cherry-1: #63136A;
+    --cherry-2: #DCB2E7;
+
+    // dark grey
+    --stone-1: #4A4A4A;
+    --stone-2: #B9B9B9;
+
+    // dark yellow
+    --sun-1: #D4A400;
+    --sun-2: #fffbe7;
+
+    // dark orange
+    --pumpkin-1: #D46A00;
+    --pumpkin-2: #FEEED4;
+
+
+    // artichoke
+    --artichoke-1: #314e2b;
+    --artichoke-2: #E8FBD7;
+
+    // desert: 
+    --desert-1: #C19A6B;
+    --desert-2: #FDF7F0;
+
+    // yellow
+    --yellow-1: #D4A400;
+    --yellow-2: #fffbe7;
+
+    // green
+    --green-1: #5B8F26;
+    --green-2: #e8fbd7;
+
+    // red
+    --red-1: #EB4E3E;
+    --red-2: #FFE7E3;
+
+    // blue
+    --blue-1: #2961E5;
+    --blue-2: #ECF3FD;
+
+    // pink
+    --pink-1: #A357D7;
+    --pink-2: #F9F4FD;
+
+    // turquoise
+    --turquoise-1: #00C7BE;
+    --turquoise-2: #E8F9F8;
+
+    // orange
+    --orange-1: #FF9500;
+    --orange-2: #FFF5E3;
+}
+
+:root {
+    .dark-theme {
+        --background-1: #000000;
+        --background-2: #181818;
+        --background-3: #000000;
+        --background-4: #262626;
+        --foreground-1: #FFFFFF;
+        --foreground-2: #A1A1A1;
+        --foreground-3: #888888;
+        --foreground-4: #d6d6d6;
+        --border-1: #242424;
+        --border-2: #333333;
+        --border-3: #414141;
+
+        --primary-1: #0075FF;
+        --primary-2: #2c3347;
+
+        // dark green
+        --forest-1: #36c731;
+        --forest-2: #356431;
+
+        // dark red
+        --wine-1: #f3523a;
+        --wine-2: #863636;
+
+        // dark blue
+        --navy-1: rgb(118, 107, 231);
+        --navy-2: #282b8b;
+
+        // dark pink
+        --cherry-1: #c92cd7;
+        --cherry-2: #7c2592;
+
+        // dark grey
+        --stone-1: #e8e8e8;
+        --stone-2: #4d4b4b;
+
+        // dark yellow
+        --sun-1: #ffdb67;
+        --sun-2: #594c12;
+
+        // dark orange
+        --pumpkin-1: #ef9438;
+        --pumpkin-2: #714d11;
+
+        // artichoke
+        --artichoke-1: #314e2b;
+        --artichoke-2: #4a8e0c;
+
+        // desert: 
+        --desert-1: #C19A6B;
+        --desert-2: #594c12;
+
+        // dark yellow
+        --yellow-1: #ffdb67;
+        --yellow-2: #594c12;
+
+        // green
+        --green-1: #95e941;
+        --green-2: #4a8e0c;
+
+        // red
+        --red-1: #ff5c49;
+        --red-2: #741707;
+
+        // blue
+        --blue-1: #a5c0ff;
+        --blue-2: #1b4a8c;
+
+        // pink
+        --pink-1: #c596e4;
+        --pink-2: #581d88;
+
+        // turquoise
+        --turquoise-1: #00C7BE;
+        --turquoise-2: #21504d;
+
+        // orange
+        --orange-1: #FF9500;
+        --orange-2: #FFF5E3;
+    }
+}

package/styles/theme-styles.scss

@@ -0,0 +1,8 @@
+:root {
+
+    --focus-shadow: 0px 0px 0px 4px #0057FF40;
+    --focus-border: 1px solid var(--primary-1);
+
+    --font-1: 'Space Grotesk', var(--font-2);
+    --font-2: 'Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+}