umwd-components 0.1.834 → 0.1.835

package/dist/esm/src/components/WebsitePlaceholder.js

@@ -0,0 +1,94 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { useTheme } from '@mui/material/styles';
+import Image from 'next/image';
+
+const WebsitePlaceholder = ({ title, announcement, logo, lmBackgroundUrl, dmBackgroundUrl, children, }) => {
+    const theme = useTheme();
+    const [visible, setVisible] = useState(true);
+    let keysPressed = {};
+    /**
+     * Handles the key down event.
+     * @param {React.KeyboardEvent} event - The keyboard event object.
+     */
+    const keyDownHandler = (event) => {
+        keysPressed = { ...keysPressed, [event.key]: true };
+        if (keysPressed["w"] === true &&
+            keysPressed["a"] === true &&
+            keysPressed["s"] === true &&
+            keysPressed["d"] === true) {
+            setVisible(!visible);
+        }
+    };
+    const keyUpHandler = (event) => {
+        keysPressed[event.key] = false;
+    };
+    useEffect(() => {
+        document.addEventListener("keydown", keyDownHandler);
+        document.addEventListener("keyup", keyUpHandler);
+        return () => {
+            document.removeEventListener("keydown", keyDownHandler);
+            document.removeEventListener("keyup", keyUpHandler);
+        };
+    }, []);
+    return (jsxs(Box, { sx: [
+            visible && {
+                display: "grid",
+                justifyItems: "center",
+                alignItems: "center",
+                backgroundColor: theme.palette.primary.main,
+                backgroundImage: `url(${theme.palette.mode === "light" ? lmBackgroundUrl : dmBackgroundUrl})`,
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+                height: "100vh",
+                maxHeight: "100vh",
+                width: "100vw",
+                overflow: "hidden",
+                position: "fixed",
+                top: 0,
+                left: 0,
+                zIndex: 9000,
+                isolation: "isolate",
+                p: 2,
+            },
+        ], children: [visible && (jsxs(Fragment, { children: [jsx(Button, { sx: {
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            width: "100px",
+                            height: "100px",
+                            opacity: 0,
+                        }, onClick: () => setVisible(false), children: "Close" }), jsx(Typography, { variant: "h1", align: "center", sx: {
+                            [theme.breakpoints.down("sm")]: {
+                                fontSize: "2rem",
+                            },
+                            [theme.breakpoints.up("sm")]: {
+                                fontSize: "4rem",
+                            },
+                            [theme.breakpoints.up("lg")]: {
+                                fontSize: "6rem",
+                            },
+                        }, children: title }), logo?.url && (jsx(Image, { src: logo.url, alt: logo.alternativeText || "logo", width: 300, height: 300 })), jsx(Typography, { variant: "h3", align: "center", sx: {
+                            [theme.breakpoints.down("sm")]: {
+                                fontSize: "1.5rem",
+                            },
+                            [theme.breakpoints.up("sm")]: {
+                                fontSize: "2rem",
+                            },
+                            [theme.breakpoints.up("lg")]: {
+                                fontSize: "3rem",
+                            },
+                        }, children: announcement })] })), !visible && jsx(Fragment, { children: children })] }));
+};
+
+export { WebsitePlaceholder as default };

package/dist/esm/src/components/WhatsAppClickToChatButton.js

@@ -0,0 +1,42 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Button from '@mui/material/Button';
+import SvgIcon from '@mui/material/SvgIcon';
+import { useTheme } from '@mui/material/styles';
+
+function WhatsAppClickToChatButton({ data, }) {
+    const { phoneNumber, text, message, color, round, sx } = data;
+    const theme = useTheme();
+    const formattedPhoneNumber = phoneNumber.replace(/\D/g, "");
+    const handleClick = () => {
+        let url = `https://wa.me/${formattedPhoneNumber}`;
+        if (message) {
+            const formattedMessage = encodeURIComponent(message);
+            url = `https://wa.me/${formattedPhoneNumber}?text=${formattedMessage}`;
+        }
+        window.open(url, "_blank");
+    };
+    return (jsx(Button, { variant: "contained", onClick: handleClick, startIcon: jsx(SvgIcon, { sx: [round === true && { m: 0, p: 0 }], children: jsx(WhatsAppIcon, { fill: color || theme.palette.primary.contrastText }) }), sx: [
+            { ...sx },
+            round === true && {
+                display: "grid",
+                justifyContent: "center",
+                alignItems: "center",
+                borderRadius: "50%",
+                p: 1,
+                minWidth: "unset",
+                ".MuiButton-startIcon": { m: 0, p: 0 },
+            },
+        ], children: !round && (text || "Click to WhatsApp") }));
+}
+function WhatsAppIcon(props) {
+    return (jsxs("svg", { viewBox: "0 0 30.667 30.667", ...props, children: [jsx("g", { strokeWidth: "0" }), jsx("g", { strokeLinecap: "round", strokeLinejoin: "round" }), jsx("g", { children: jsx("path", { d: "M30.667,14.939c0,8.25-6.74,14.938-15.056,14.938c-2.639,0-5.118-0.675-7.276-1.857L0,30.667l2.717-8.017 c-1.37-2.25-2.159-4.892-2.159-7.712C0.559,6.688,7.297,0,15.613,0C23.928,0.002,30.667,6.689,30.667,14.939z M15.61,2.382 c-6.979,0-12.656,5.634-12.656,12.56c0,2.748,0.896,5.292,2.411,7.362l-1.58,4.663l4.862-1.545c2,1.312,4.393,2.076,6.963,2.076 c6.979,0,12.658-5.633,12.658-12.559C28.27,8.016,22.59,2.382,15.61,2.382z M23.214,18.38c-0.094-0.151-0.34-0.243-0.708-0.427 c-0.367-0.184-2.184-1.069-2.521-1.189c-0.34-0.123-0.586-0.185-0.832,0.182c-0.243,0.367-0.951,1.191-1.168,1.437 c-0.215,0.245-0.43,0.276-0.799,0.095c-0.369-0.186-1.559-0.57-2.969-1.817c-1.097-0.972-1.838-2.169-2.052-2.536 c-0.217-0.366-0.022-0.564,0.161-0.746c0.165-0.165,0.369-0.428,0.554-0.643c0.185-0.213,0.246-0.364,0.369-0.609 c0.121-0.245,0.06-0.458-0.031-0.643c-0.092-0.184-0.829-1.984-1.138-2.717c-0.307-0.732-0.614-0.611-0.83-0.611 c-0.215,0-0.461-0.03-0.707-0.03S9.897,8.215,9.56,8.582s-1.291,1.252-1.291,3.054c0,1.804,1.321,3.543,1.506,3.787 c0.186,0.243,2.554,4.062,6.305,5.528c3.753,1.465,3.753,0.976,4.429,0.914c0.678-0.062,2.184-0.885,2.49-1.739 C23.307,19.268,23.307,18.533,23.214,18.38z" }) })] }));
+}
+
+export { WhatsAppClickToChatButton as default };

package/dist/esm/src/components/ZodErrors.js

@@ -0,0 +1,15 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+
+function ZodErrors({ error }) {
+    if (!error)
+        return null;
+    return error.map((err, index) => (jsx("div", { children: err }, index)));
+}
+
+export { ZodErrors };

package/dist/esm/src/components/auth/AuthWidget.js

@@ -0,0 +1,71 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import SpeedDial from '@mui/material/SpeedDial';
+import SpeedDialAction from '@mui/material/SpeedDialAction';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import CircularProgress from '@mui/material/CircularProgress';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import PersonIcon from '@mui/icons-material/Person';
+import FolderIcon from '@mui/icons-material/Folder';
+import ListAltIcon from '@mui/icons-material/ListAlt';
+import LoginIcon from '@mui/icons-material/Login';
+import LogoutIcon from '@mui/icons-material/Logout';
+import HowToRegIcon from '@mui/icons-material/HowToReg';
+import { useRouter } from 'next/navigation';
+import { useSession } from '../../context/auth/SessionContext.js';
+import Button from '@mui/material/Button';
+import { Typography } from '@mui/material';
+import KeyboardReturnIcon from '@mui/icons-material/KeyboardReturn';
+
+const defaultActions = {
+    loggedIn: [
+        { icon: jsx(PersonIcon, {}), name: "Profile", route: "/user/profile" },
+        { icon: jsx(ListAltIcon, {}), name: "Orders", route: "/user/orders" },
+        { icon: jsx(KeyboardReturnIcon, {}), name: "Returns", route: "/user/returns" },
+        { icon: jsx(FolderIcon, {}), name: "Documents", route: "/user/documents" },
+    ],
+    loggedOut: [
+        { icon: jsx(LoginIcon, {}), name: "Sign-In", route: "/auth/signin" },
+        { icon: jsx(HowToRegIcon, {}), name: "Register", route: "/auth/register" },
+    ],
+};
+// TODO Modify the AuthWidget component to use props and session state
+function AuthWidget({ actions = defaultActions }) {
+    const router = useRouter();
+    const { user, loading, error, logout } = useSession();
+    if (loading) {
+        return (jsx(Box, { sx: {
+                position: "relative",
+                width: "40px",
+                height: "40px",
+            }, children: jsx(CircularProgress, {}) }));
+    }
+    if (error) {
+        return jsxs("p", { children: ["Error: ", error] });
+    }
+    return (jsxs(Fragment, { children: [jsxs(Stack, { direction: "column", sx: { display: { xs: "flex", md: "none" }, width: "100%" }, spacing: 2, children: [jsx(Typography, { variant: "h6", sx: { textAlign: "center" }, children: "Profile" }), (!user ? actions.loggedOut : actions.loggedIn).map((action) => {
+                        return (jsx(Button, { size: "small", variant: "contained", startIcon: action.icon, onClick: () => router.push(action.route), sx: { width: "100%" }, children: action.name }, action.name));
+                    })] }), jsx(Box, { sx: {
+                    display: { xs: "none", md: "block" },
+                    position: "relative",
+                    width: "40px",
+                    height: "40px",
+                }, children: jsxs(SpeedDial, { ariaLabel: "SpeedDial basic example", icon: jsx(AccountCircleIcon, {}), direction: "down", sx: {
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        width: 40,
+                        "& .MuiFab-root": { width: 40, height: 40 },
+                    }, children: [(!user ? actions.loggedOut : actions.loggedIn).map((action) => {
+                            return (jsx(SpeedDialAction, { icon: action.icon, tooltipTitle: action.name, onClick: () => router.push(action.route) }, action.name));
+                        }), user && (jsx(SpeedDialAction, { icon: jsx(LogoutIcon, {}), tooltipTitle: "Log-Out", onClick: () => logout() }))] }) })] }));
+}
+
+export { AuthWidget as default };

package/dist/esm/src/components/auth/DenseRegisterForm.js

@@ -0,0 +1,30 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useActionState } from 'react';
+import { registerUserAction } from '../../data/actions/auth-actions.js';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { StrapiErrors } from '../StrapiErrors.js';
+import { SubmitButton } from '../SubmitButton.js';
+import { useTheme } from '@mui/material/styles';
+
+const INITIAL_STATE = {
+    data: null,
+    zodErrors: null,
+    message: null,
+};
+function DenseRegisterForm({ data }) {
+    const { redirect_url = "/" } = data;
+    const [formState, formAction] = useActionState(registerUserAction, INITIAL_STATE);
+    useTheme();
+    return (jsxs("form", { action: formAction, children: [jsx("input", { type: "hidden", name: "redirect", value: redirect_url }), jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "username", name: "username", label: "username", variant: "outlined", error: formState?.zodErrors?.username != undefined ? true : false, helperText: formState?.zodErrors?.username }), jsx(TextField, { id: "email", name: "email", label: "email", variant: "outlined", error: formState?.zodErrors?.email != undefined ? true : false, helperText: formState?.zodErrors?.email }), jsx(TextField, { id: "password", name: "password", label: "password", type: "password", variant: "outlined", error: formState?.zodErrors?.password != undefined ? true : false, helperText: formState?.zodErrors?.password }), jsx(SubmitButton, { text: "Sign Up", loadingText: "Loading" }), jsx(StrapiErrors, { error: formState?.strapiErrors }), formState?.message != undefined && (jsx(Typography, { sx: { pt: 2 }, variant: "body2", color: "error", children: formState.message }))] })] }));
+}
+
+export { DenseRegisterForm as default };

package/dist/esm/src/components/auth/DenseSigninForm.js

@@ -0,0 +1,31 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useActionState } from 'react';
+import { loginUserAction } from '../../data/actions/auth-actions.js';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { SubmitButton } from '../SubmitButton.js';
+import { StrapiErrors } from '../StrapiErrors.js';
+import { useTheme } from '@mui/material/styles';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+function DenseSigninForm({ data }) {
+    const { redirect_url = "/" } = data;
+    const [formState, formAction] = useActionState(loginUserAction, INITIAL_STATE);
+    useTheme();
+    return (jsxs("form", { action: formAction, children: [jsx("input", { type: "hidden", name: "redirect", value: redirect_url }), jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "identifier", name: "identifier", label: "identifier", variant: "outlined", error: formState?.zodErrors?.identifier != undefined ? true : false, helperText: formState?.zodErrors?.identifier }), jsx(TextField, { id: "password", name: "password", label: "password", type: "password", variant: "outlined", error: formState?.zodErrors?.password != undefined ? true : false, helperText: formState?.zodErrors?.password }), jsx(SubmitButton, { text: "Sign In", loadingText: "Loading" }), jsx(StrapiErrors, { error: formState?.strapiErrors }), formState?.message != undefined && (jsx(Typography, { sx: { pt: 2 }, variant: "body2", color: "error", children: formState.message }))] })] }));
+}
+
+export { DenseSigninForm as default };

package/dist/esm/src/components/auth/ForgotPasswordForm.js

@@ -0,0 +1,35 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useActionState } from 'react';
+import { forgotPasswordAction } from '../../data/actions/auth-actions.js';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import { SubmitButton } from '../SubmitButton.js';
+import { StrapiErrors } from '../StrapiErrors.js';
+import { useTheme } from '@mui/material/styles';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+function ForgotPasswordForm({ data, }) {
+    const { title = "Forgot Password", subtitle = "Enter your email to reset your password", maxWidth = "sm", sx = {}, } = data;
+    const [formState, formAction] = useActionState(forgotPasswordAction, INITIAL_STATE);
+    useTheme();
+    return (jsx(Container, { maxWidth: maxWidth ? maxWidth : "sm", sx: { my: 1, ...sx }, children: jsxs("form", { action: formAction, children: [jsxs(Card, { children: [jsxs(CardContent, { children: [jsx(Typography, { variant: "h5", children: title }), jsx(Typography, { variant: "subtitle1", children: subtitle }), jsx(Stack, { spacing: 2, sx: { mt: 2 }, children: jsx(TextField, { id: "email", name: "email", label: "Email", variant: "outlined", error: formState?.zodErrors?.email != undefined ? true : false, helperText: formState?.zodErrors?.email }) })] }), jsxs(CardActions, { children: [jsx(SubmitButton, { text: "Send Reset Email", loadingText: "Sending..." }), jsx(StrapiErrors, { error: formState?.strapiErrors })] })] }), formState.message && (jsx(Typography, { sx: { pt: 2 }, variant: "body2", children: formState.message }))] }) }));
+}
+
+export { ForgotPasswordForm as default };

package/dist/esm/src/components/auth/PasswordResetForm.js

@@ -0,0 +1,38 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useActionState } from 'react';
+import { resetPasswordAction } from '../../data/actions/auth-actions.js';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import { SubmitButton } from '../SubmitButton.js';
+import { StrapiErrors } from '../StrapiErrors.js';
+import { useSearchParams } from 'next/navigation';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+function PasswordResetForm({ data, }) {
+    const { title = "Reset Password", subtitle = "Enter your new password", maxWidth = "sm", sx = {}, } = data;
+    const [formState, formAction] = useActionState(resetPasswordAction, INITIAL_STATE);
+    const searchParams = useSearchParams();
+    const code = searchParams.get("code");
+    return (jsx(Container, { maxWidth: maxWidth ? maxWidth : "sm", sx: { my: 1, ...sx }, children: jsxs("form", { action: formAction, children: [jsxs(Card, { children: [jsxs(CardContent, { children: [code !== null && jsx("input", { type: "hidden", name: "code", value: code }), jsx(Typography, { variant: "h5", children: title }), jsx(Typography, { variant: "subtitle1", children: subtitle }), jsxs(Stack, { spacing: 2, sx: { mt: 2 }, children: [jsx(TextField, { id: "password", name: "password", label: "New Password", type: "password", variant: "outlined", error: formState?.zodErrors?.password != undefined ? true : false, helperText: formState?.zodErrors?.password }), jsx(TextField, { id: "passwordConfirmation", name: "passwordConfirmation", label: "Confirm New Password", type: "password", variant: "outlined", error: formState?.zodErrors?.passwordConfirmation != undefined
+                                                ? true
+                                                : false, helperText: formState?.zodErrors?.passwordConfirmation })] })] }), jsxs(CardActions, { children: [jsx(SubmitButton, { text: "Reset Password", loadingText: "Resetting..." }), jsx(StrapiErrors, { error: formState?.strapiErrors })] })] }), formState.message && (jsx(Typography, { sx: { pt: 2 }, variant: "body2", children: formState.message }))] }) }));
+}
+
+export { PasswordResetForm as default };

package/dist/esm/src/components/auth/RegisterForm.js

@@ -0,0 +1,45 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Link from 'next/link';
+import { useActionState } from 'react';
+import { registerUserAction } from '../../data/actions/auth-actions.js';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import { StrapiErrors } from '../StrapiErrors.js';
+import { SubmitButton } from '../SubmitButton.js';
+import { useTheme } from '@mui/material/styles';
+import { setOpacity } from '../../lib/utils.js';
+
+const INITIAL_STATE = {
+    data: null,
+    zodErrors: null,
+    message: null,
+};
+function RegisterForm({ data }) {
+    const { title = "Sign Up", subtitle = "Enter your details to create a new account", maxWidth = "lg", sx = [], glass = false, signin_url = "/signin", redirect_url = "/", } = data;
+    const [formState, formAction] = useActionState(registerUserAction, INITIAL_STATE);
+    const theme = useTheme();
+    return (jsx(Container, { maxWidth: maxWidth ? maxWidth : "lg", sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            { my: 1 },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: jsxs("form", { action: formAction, children: [jsx("input", { type: "hidden", name: "redirect", value: redirect_url }), jsxs(Card, { sx: {
+                        backdropFilter: "blur(3px)",
+                        backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+                        border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+                    }, children: [jsx(CardHeader, { title: title, subheader: subtitle }), jsx(CardContent, { children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "username", name: "username", label: "username", variant: "outlined", error: formState?.zodErrors?.username != undefined ? true : false, helperText: formState?.zodErrors?.username }), jsx(TextField, { id: "email", name: "email", label: "email", variant: "outlined", error: formState?.zodErrors?.email != undefined ? true : false, helperText: formState?.zodErrors?.email }), jsx(TextField, { id: "password", name: "password", label: "password", type: "password", variant: "outlined", error: formState?.zodErrors?.password != undefined ? true : false, helperText: formState?.zodErrors?.password })] }) }), jsxs(CardActions, { children: [jsx(SubmitButton, { text: "Sign Up", loadingText: "Loading" }), jsx(StrapiErrors, { error: formState?.strapiErrors }), formState?.message != undefined && (jsx(Typography, { sx: { pt: 2 }, variant: "body2", color: "error", children: formState.message }))] })] }), jsx(Typography, { variant: "body2", sx: { pt: 2 }, children: "Have an account?" }), jsx(Link, { href: signin_url, children: "Sing In" })] }) }));
+}
+
+export { RegisterForm as default };

package/dist/esm/src/components/auth/SigninForm.js

@@ -0,0 +1,58 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Link from 'next/link';
+import { StyledLink } from '../StyledLink.js';
+import { useActionState } from 'react';
+import { loginUserAction } from '../../data/actions/auth-actions.js';
+import { setOpacity } from '../../lib/utils.js';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Card from '@mui/material/Card';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import { SubmitButton } from '../SubmitButton.js';
+import { StrapiErrors } from '../StrapiErrors.js';
+import { useTheme } from '@mui/material/styles';
+import { useCookieConsent } from '../common/cookie-consent/CookieConsentContext.js';
+import CookieConsentButton from '../common/cookie-consent/CookieConsentButton.js';
+import Paper from '@mui/material/Paper';
+import CookieIcon from '@mui/icons-material/Cookie';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+function SigninForm({ data }) {
+    const { title = "Sign In", subtitle = "Enter your details to sign in to your account", maxWidth = "lg", sx = {}, glass = false, registration_url = "/signup", redirect_url = "/", forgot_password_url = "/forgot-password", dashboard = false, } = data;
+    const [formState, formAction] = useActionState(loginUserAction, INITIAL_STATE);
+    const theme = useTheme();
+    const { consentGiven } = !dashboard
+        ? useCookieConsent()
+        : { consentGiven: true };
+    if (consentGiven === false) {
+        return (jsx(Container, { maxWidth: maxWidth ? maxWidth : "lg", sx: { my: 1, ...sx }, children: jsx(Paper, { sx: {
+                    backdropFilter: "blur(3px)",
+                    backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+                    border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+                    p: 2,
+                }, children: jsxs(Stack, { direction: "column", spacing: 2, children: [jsxs(Typography, { variant: "body1", children: ["You need to accept cookies to sign in. To learn more about our use of cookies, view our", " ", jsxs(StyledLink, { href: "/privacy-policy", target: "_self", sx: { fontWeight: "bold", color: "primary.main" }, children: [" ", "Privacy Policy.", " "] }), " ", "You can also manage your cookie settings at any time using the cookie ", jsx(CookieIcon, { fontSize: "inherit" }), " icon in the footer."] }), jsx(CookieConsentButton, {})] }) }) }));
+    }
+    return (jsx(Container, { maxWidth: maxWidth ? maxWidth : "lg", sx: { my: 1, ...sx }, children: jsxs("form", { action: formAction, children: [jsx("input", { type: "hidden", name: "redirect", value: redirect_url }), jsxs(Card, { sx: {
+                        backdropFilter: "blur(3px)",
+                        backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+                        border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+                    }, children: [jsx(CardHeader, { title: title, subheader: subtitle }), jsx(CardContent, { children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "identifier", name: "identifier", label: "identifier", variant: "outlined", error: formState?.zodErrors?.identifier != undefined ? true : false, helperText: formState?.zodErrors?.identifier }), jsx(TextField, { id: "password", name: "password", label: "password", type: "password", variant: "outlined", error: formState?.zodErrors?.password != undefined ? true : false, helperText: formState?.zodErrors?.password })] }) }), jsxs(CardActions, { children: [jsx(SubmitButton, { text: "Sign In", loadingText: "Loading" }), jsx(StrapiErrors, { error: formState?.strapiErrors }), formState.message && (jsx(Typography, { sx: { pt: 2 }, variant: "body2", color: "error", children: formState.message }))] })] }), dashboard === false && (jsxs(Fragment, { children: [jsx(Typography, { sx: { pt: 2 }, variant: "body2", children: "Don't have an account?" }), jsx(Link, { href: registration_url, children: "Sign Up" }), jsx(Typography, { sx: { pt: 2 }, variant: "body2", children: "Forgot your password?" }), jsx(Link, { href: forgot_password_url, children: "Reset Password" })] }))] }) }));
+}
+
+export { SigninForm as default };

package/dist/esm/src/components/common/Address.js

@@ -0,0 +1,54 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import HomeIcon from '@mui/icons-material/Home';
+
+function Address({ data }) {
+    const { documentId, street, street_number, street_number_addition, postal_code, city, } = data;
+    return (jsx(Stack, { children: jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(HomeIcon, {}), jsxs(Stack, { children: [jsxs(Typography, { variant: "body1", component: "p", children: [street, " ", street_number, " ", street_number_addition] }), jsxs(Typography, { variant: "body1", component: "p", children: [postal_code, " ", city] })] })] }) }));
+}
+function AddressFields({ data, componentName, componentReference, disabled = false, onChangeCallback, }) {
+    const { documentId, street: initialStreet, street_number: initialStreetNumber, street_number_addition: initialStreetNumberAddition, postal_code: initialPostalCode, city: initialCity, } = data || {};
+    const [street, setStreet] = useState(initialStreet || "");
+    const [streetNumber, setStreetNumber] = useState(initialStreetNumber || "");
+    const [streetNumberAddition, setStreetNumberAddition] = useState(initialStreetNumberAddition || "");
+    const [postalCode, setPostalCode] = useState(initialPostalCode || "");
+    const [city, setCity] = useState(initialCity || "");
+    useEffect(() => {
+        setStreet(initialStreet || "");
+        setStreetNumber(initialStreetNumber || "");
+        setStreetNumberAddition(initialStreetNumberAddition || "");
+        setPostalCode(initialPostalCode || "");
+        setCity(initialCity || "");
+    }, [
+        initialStreet,
+        initialStreetNumber,
+        initialStreetNumberAddition,
+        initialPostalCode,
+        initialCity,
+    ]);
+    useEffect(() => {
+        if (onChangeCallback) {
+            onChangeCallback({
+                documentId: documentId || null,
+                street,
+                street_number: streetNumber,
+                street_number_addition: streetNumberAddition,
+                postal_code: postalCode,
+                city,
+            });
+        }
+    }, [street, streetNumber, streetNumberAddition, postalCode, city]);
+    return (jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(HomeIcon, {}), jsxs(Stack, { spacing: 1, sx: { flex: 1 }, children: [jsx(TextField, { id: "street", name: `${componentName}.street`, label: "Street", value: street, onChange: (e) => setStreet(e.target.value), disabled: disabled }), jsx(TextField, { id: "street_number", name: `${componentName}.street_number`, label: "Street Number", value: streetNumber, onChange: (e) => setStreetNumber(e.target.value), disabled: disabled }), jsx(TextField, { id: "street_number_addition", name: `${componentName}.street_number_addition`, label: "Street Number Addition", value: streetNumberAddition, onChange: (e) => setStreetNumberAddition(e.target.value), disabled: disabled }), jsx(TextField, { id: "postal_code", name: `${componentName}.postal_code`, label: "Postal Code", value: postalCode, onChange: (e) => setPostalCode(e.target.value), disabled: disabled }), jsx(TextField, { id: "city", name: `${componentName}.city`, label: "City", value: city, onChange: (e) => setCity(e.target.value), disabled: disabled })] })] }));
+}
+
+export { AddressFields, Address as default };

package/dist/esm/src/components/common/AmountIndicator.js

@@ -0,0 +1,26 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+
+function AmountIndicator({ value, maxValue, color = "primary", }) {
+    const percentage = (100 / maxValue) * value;
+    const theme = useTheme();
+    return (jsx(Box, { sx: {
+            display: "flex",
+            alignItems: "center",
+            background: `linear-gradient(90deg, ${theme.palette[color].main}FF ${percentage}%, ${theme.palette[color].main}66 ${percentage}%)`,
+            width: "100%",
+            borderRadius: "16px",
+            padding: "2px",
+            justifyContent: "center",
+        }, children: value !== maxValue ? (jsx(Typography, { variant: "body2", color: theme.palette[color].contrastText, children: `${value} / ${maxValue}` })) : (jsx(Typography, { variant: "body2", color: theme.palette[color].contrastText, children: `${value}` })) }));
+}
+
+export { AmountIndicator, AmountIndicator as default };