umwd-components 0.1.716 → 0.1.717

package/dist/esm/node_modules/xml-js/lib/xml2js.js

@@ -0,0 +1,360 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import '../../sax/lib/sax.js';
+import { o as optionsHelper } from './options-helper.js';
+import { a as arrayHelper } from './array-helper.js';
+import { __exports as sax$1 } from '../../../_virtual/sax.js';
+
+var sax = sax$1;
+var helper = optionsHelper;
+var isArray = arrayHelper.isArray;
+
+var options;
+var currentElement;
+
+function validateOptions(userOptions) {
+  options = helper.copyOptions(userOptions);
+  helper.ensureFlagExists('ignoreDeclaration', options);
+  helper.ensureFlagExists('ignoreInstruction', options);
+  helper.ensureFlagExists('ignoreAttributes', options);
+  helper.ensureFlagExists('ignoreText', options);
+  helper.ensureFlagExists('ignoreComment', options);
+  helper.ensureFlagExists('ignoreCdata', options);
+  helper.ensureFlagExists('ignoreDoctype', options);
+  helper.ensureFlagExists('compact', options);
+  helper.ensureFlagExists('alwaysChildren', options);
+  helper.ensureFlagExists('addParent', options);
+  helper.ensureFlagExists('trim', options);
+  helper.ensureFlagExists('nativeType', options);
+  helper.ensureFlagExists('nativeTypeAttributes', options);
+  helper.ensureFlagExists('sanitize', options);
+  helper.ensureFlagExists('instructionHasAttributes', options);
+  helper.ensureFlagExists('captureSpacesBetweenElements', options);
+  helper.ensureAlwaysArrayExists(options);
+  helper.ensureKeyExists('declaration', options);
+  helper.ensureKeyExists('instruction', options);
+  helper.ensureKeyExists('attributes', options);
+  helper.ensureKeyExists('text', options);
+  helper.ensureKeyExists('comment', options);
+  helper.ensureKeyExists('cdata', options);
+  helper.ensureKeyExists('doctype', options);
+  helper.ensureKeyExists('type', options);
+  helper.ensureKeyExists('name', options);
+  helper.ensureKeyExists('elements', options);
+  helper.ensureKeyExists('parent', options);
+  helper.checkFnExists('doctype', options);
+  helper.checkFnExists('instruction', options);
+  helper.checkFnExists('cdata', options);
+  helper.checkFnExists('comment', options);
+  helper.checkFnExists('text', options);
+  helper.checkFnExists('instructionName', options);
+  helper.checkFnExists('elementName', options);
+  helper.checkFnExists('attributeName', options);
+  helper.checkFnExists('attributeValue', options);
+  helper.checkFnExists('attributes', options);
+  return options;
+}
+
+function nativeType(value) {
+  var nValue = Number(value);
+  if (!isNaN(nValue)) {
+    return nValue;
+  }
+  var bValue = value.toLowerCase();
+  if (bValue === 'true') {
+    return true;
+  } else if (bValue === 'false') {
+    return false;
+  }
+  return value;
+}
+
+function addField(type, value) {
+  var key;
+  if (options.compact) {
+    if (
+      !currentElement[options[type + 'Key']] &&
+      (isArray(options.alwaysArray) ? options.alwaysArray.indexOf(options[type + 'Key']) !== -1 : options.alwaysArray)
+    ) {
+      currentElement[options[type + 'Key']] = [];
+    }
+    if (currentElement[options[type + 'Key']] && !isArray(currentElement[options[type + 'Key']])) {
+      currentElement[options[type + 'Key']] = [currentElement[options[type + 'Key']]];
+    }
+    if (type + 'Fn' in options && typeof value === 'string') {
+      value = options[type + 'Fn'](value, currentElement);
+    }
+    if (type === 'instruction' && ('instructionFn' in options || 'instructionNameFn' in options)) {
+      for (key in value) {
+        if (value.hasOwnProperty(key)) {
+          if ('instructionFn' in options) {
+            value[key] = options.instructionFn(value[key], key, currentElement);
+          } else {
+            var temp = value[key];
+            delete value[key];
+            value[options.instructionNameFn(key, temp, currentElement)] = temp;
+          }
+        }
+      }
+    }
+    if (isArray(currentElement[options[type + 'Key']])) {
+      currentElement[options[type + 'Key']].push(value);
+    } else {
+      currentElement[options[type + 'Key']] = value;
+    }
+  } else {
+    if (!currentElement[options.elementsKey]) {
+      currentElement[options.elementsKey] = [];
+    }
+    var element = {};
+    element[options.typeKey] = type;
+    if (type === 'instruction') {
+      for (key in value) {
+        if (value.hasOwnProperty(key)) {
+          break;
+        }
+      }
+      element[options.nameKey] = 'instructionNameFn' in options ? options.instructionNameFn(key, value, currentElement) : key;
+      if (options.instructionHasAttributes) {
+        element[options.attributesKey] = value[key][options.attributesKey];
+        if ('instructionFn' in options) {
+          element[options.attributesKey] = options.instructionFn(element[options.attributesKey], key, currentElement);
+        }
+      } else {
+        if ('instructionFn' in options) {
+          value[key] = options.instructionFn(value[key], key, currentElement);
+        }
+        element[options.instructionKey] = value[key];
+      }
+    } else {
+      if (type + 'Fn' in options) {
+        value = options[type + 'Fn'](value, currentElement);
+      }
+      element[options[type + 'Key']] = value;
+    }
+    if (options.addParent) {
+      element[options.parentKey] = currentElement;
+    }
+    currentElement[options.elementsKey].push(element);
+  }
+}
+
+function manipulateAttributes(attributes) {
+  if ('attributesFn' in options && attributes) {
+    attributes = options.attributesFn(attributes, currentElement);
+  }
+  if ((options.trim || 'attributeValueFn' in options || 'attributeNameFn' in options || options.nativeTypeAttributes) && attributes) {
+    var key;
+    for (key in attributes) {
+      if (attributes.hasOwnProperty(key)) {
+        if (options.trim) attributes[key] = attributes[key].trim();
+        if (options.nativeTypeAttributes) {
+          attributes[key] = nativeType(attributes[key]);
+        }
+        if ('attributeValueFn' in options) attributes[key] = options.attributeValueFn(attributes[key], key, currentElement);
+        if ('attributeNameFn' in options) {
+          var temp = attributes[key];
+          delete attributes[key];
+          attributes[options.attributeNameFn(key, attributes[key], currentElement)] = temp;
+        }
+      }
+    }
+  }
+  return attributes;
+}
+
+function onInstruction(instruction) {
+  var attributes = {};
+  if (instruction.body && (instruction.name.toLowerCase() === 'xml' || options.instructionHasAttributes)) {
+    var attrsRegExp = /([\w:-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|(\w+))\s*/g;
+    var match;
+    while ((match = attrsRegExp.exec(instruction.body)) !== null) {
+      attributes[match[1]] = match[2] || match[3] || match[4];
+    }
+    attributes = manipulateAttributes(attributes);
+  }
+  if (instruction.name.toLowerCase() === 'xml') {
+    if (options.ignoreDeclaration) {
+      return;
+    }
+    currentElement[options.declarationKey] = {};
+    if (Object.keys(attributes).length) {
+      currentElement[options.declarationKey][options.attributesKey] = attributes;
+    }
+    if (options.addParent) {
+      currentElement[options.declarationKey][options.parentKey] = currentElement;
+    }
+  } else {
+    if (options.ignoreInstruction) {
+      return;
+    }
+    if (options.trim) {
+      instruction.body = instruction.body.trim();
+    }
+    var value = {};
+    if (options.instructionHasAttributes && Object.keys(attributes).length) {
+      value[instruction.name] = {};
+      value[instruction.name][options.attributesKey] = attributes;
+    } else {
+      value[instruction.name] = instruction.body;
+    }
+    addField('instruction', value);
+  }
+}
+
+function onStartElement(name, attributes) {
+  var element;
+  if (typeof name === 'object') {
+    attributes = name.attributes;
+    name = name.name;
+  }
+  attributes = manipulateAttributes(attributes);
+  if ('elementNameFn' in options) {
+    name = options.elementNameFn(name, currentElement);
+  }
+  if (options.compact) {
+    element = {};
+    if (!options.ignoreAttributes && attributes && Object.keys(attributes).length) {
+      element[options.attributesKey] = {};
+      var key;
+      for (key in attributes) {
+        if (attributes.hasOwnProperty(key)) {
+          element[options.attributesKey][key] = attributes[key];
+        }
+      }
+    }
+    if (
+      !(name in currentElement) &&
+      (isArray(options.alwaysArray) ? options.alwaysArray.indexOf(name) !== -1 : options.alwaysArray)
+    ) {
+      currentElement[name] = [];
+    }
+    if (currentElement[name] && !isArray(currentElement[name])) {
+      currentElement[name] = [currentElement[name]];
+    }
+    if (isArray(currentElement[name])) {
+      currentElement[name].push(element);
+    } else {
+      currentElement[name] = element;
+    }
+  } else {
+    if (!currentElement[options.elementsKey]) {
+      currentElement[options.elementsKey] = [];
+    }
+    element = {};
+    element[options.typeKey] = 'element';
+    element[options.nameKey] = name;
+    if (!options.ignoreAttributes && attributes && Object.keys(attributes).length) {
+      element[options.attributesKey] = attributes;
+    }
+    if (options.alwaysChildren) {
+      element[options.elementsKey] = [];
+    }
+    currentElement[options.elementsKey].push(element);
+  }
+  element[options.parentKey] = currentElement; // will be deleted in onEndElement() if !options.addParent
+  currentElement = element;
+}
+
+function onText(text) {
+  if (options.ignoreText) {
+    return;
+  }
+  if (!text.trim() && !options.captureSpacesBetweenElements) {
+    return;
+  }
+  if (options.trim) {
+    text = text.trim();
+  }
+  if (options.nativeType) {
+    text = nativeType(text);
+  }
+  if (options.sanitize) {
+    text = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+  addField('text', text);
+}
+
+function onComment(comment) {
+  if (options.ignoreComment) {
+    return;
+  }
+  if (options.trim) {
+    comment = comment.trim();
+  }
+  addField('comment', comment);
+}
+
+function onEndElement(name) {
+  var parentElement = currentElement[options.parentKey];
+  if (!options.addParent) {
+    delete currentElement[options.parentKey];
+  }
+  currentElement = parentElement;
+}
+
+function onCdata(cdata) {
+  if (options.ignoreCdata) {
+    return;
+  }
+  if (options.trim) {
+    cdata = cdata.trim();
+  }
+  addField('cdata', cdata);
+}
+
+function onDoctype(doctype) {
+  if (options.ignoreDoctype) {
+    return;
+  }
+  doctype = doctype.replace(/^ /, '');
+  if (options.trim) {
+    doctype = doctype.trim();
+  }
+  addField('doctype', doctype);
+}
+
+function onError(error) {
+  error.note = error; //console.error(error);
+}
+
+var xml2js = function (xml, userOptions) {
+
+  var parser = sax.parser(true, {}) ;
+  var result = {};
+  currentElement = result;
+
+  options = validateOptions(userOptions);
+
+  {
+    parser.opt = {strictEntities: true};
+    parser.onopentag = onStartElement;
+    parser.ontext = onText;
+    parser.oncomment = onComment;
+    parser.onclosetag = onEndElement;
+    parser.onerror = onError;
+    parser.oncdata = onCdata;
+    parser.ondoctype = onDoctype;
+    parser.onprocessinginstruction = onInstruction;
+  }
+
+  {
+    parser.write(xml).close();
+  }
+
+  if (result[options.elementsKey]) {
+    var temp = result[options.elementsKey];
+    delete result[options.elementsKey];
+    result[options.elementsKey] = temp;
+    delete result.text;
+  }
+
+  return result;
+
+};
+
+export { xml2js as x };

package/dist/esm/node_modules/xml-js/lib/xml2json.js

@@ -0,0 +1,33 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { o as optionsHelper } from './options-helper.js';
+import { x as xml2js$1 } from './xml2js.js';
+
+var helper = optionsHelper;
+var xml2js = xml2js$1;
+
+function validateOptions (userOptions) {
+  var options = helper.copyOptions(userOptions);
+  helper.ensureSpacesExists(options);
+  return options;
+}
+
+var xml2json = function(xml, userOptions) {
+  var options, js, json, parentKey;
+  options = validateOptions(userOptions);
+  js = xml2js(xml, options);
+  parentKey = 'compact' in options && options.compact ? '_parent' : 'parent';
+  // parentKey = ptions.compact ? '_parent' : 'parent'; // consider this
+  if ('addParent' in options && options.addParent) {
+    json = JSON.stringify(js, function (k, v) { return k === parentKey? '_' : v; }, options.spaces);
+  } else {
+    json = JSON.stringify(js, null, options.spaces);
+  }
+  return json.replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029');
+};
+
+export { xml2json as x };

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

@@ -0,0 +1,132 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useEffect } from 'react';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import isEmail from 'validator/lib/isEmail';
+import { setOpacity } from '../lib/utils.js';
+import { useTheme } from '@mui/material/styles';
+import { useSearchParams } from 'next/navigation';
+
+function ContactForm({ data }) {
+    const { title = "Write us", subtitle = "We're open for any suggestion or just to have a chat", successHeading = "Thank you!", successText = "Your e-mail has been successfully sent!", errorHeading, errorText = "I am sorry, something went wrong, you could email me directly on info@jellepaulus.nl", maxWidth, sx = {}, glass = false, } = data;
+    const searchParams = useSearchParams();
+    const subject = searchParams.get("subject");
+    const [formValues, setFormValues] = React.useState({
+        name: "",
+        email: "",
+        subject: subject ? String(subject) : "",
+        message: "",
+    });
+    useEffect(() => {
+        if (subject) {
+            setFormValues((prevValues) => ({
+                ...prevValues,
+                subject: String(subject),
+            }));
+        }
+    }, [subject]);
+    const [formErrors, setFormErrors] = React.useState({});
+    // Setting button text on form submission
+    const [buttonText, setButtonText] = React.useState("Send");
+    // Setting success or failure messages states
+    const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);
+    const [showFailureMessage, setShowFailureMessage] = React.useState(false);
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormValues({ ...formValues, [name]: value });
+    };
+    const handleBlur = (e) => {
+        const { name } = e.target;
+        const errors = validate(formValues);
+        if (errors[name]) {
+            setFormErrors((prevErrors) => ({
+                ...prevErrors,
+                [name]: errors[name],
+            }));
+        }
+        else {
+            setFormErrors((prevErrors) => {
+                const updatedErrors = { ...prevErrors };
+                delete updatedErrors[name];
+                return updatedErrors;
+            });
+        }
+    };
+    const handleClear = () => {
+        setFormValues({
+            name: "",
+            email: "",
+            subject: "",
+            message: "",
+        });
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        let isValidForm = validate(formValues);
+        if (Object.keys(isValidForm).length === 0) {
+            const res = await fetch("/api/sendgrid", {
+                body: JSON.stringify({
+                    email: formValues.email,
+                    fullname: formValues.name,
+                    subject: formValues.subject,
+                    message: formValues.message,
+                }),
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                method: "POST",
+            });
+            if (res.ok) {
+                setShowSuccessMessage(true);
+                setShowFailureMessage(false);
+                handleClear();
+            }
+            else {
+                setShowSuccessMessage(false);
+                setShowFailureMessage(true);
+            }
+        }
+        else {
+            setFormErrors(isValidForm);
+        }
+    };
+    const validate = (values) => {
+        const errors = {};
+        if (!values.name) {
+            errors.name = "Name is required";
+        }
+        if (!values.email) {
+            errors.email = "Email is required";
+        }
+        else if (!isEmail(values.email)) {
+            errors.email = "Invalid email address";
+        }
+        if (!values.subject) {
+            errors.subject = "Subject is required";
+        }
+        if (!values.message) {
+            errors.message = "Message is required";
+        }
+        return errors;
+    };
+    const theme = useTheme();
+    return (jsxs(Container, { maxWidth: maxWidth ? maxWidth : "lg", sx: { my: 1, ...sx }, children: [jsxs(Stack, { spacing: 2, sx: { width: "100%" }, children: [jsx(Typography, { variant: "h6", align: "center", children: title }), jsx(Typography, { variant: "body1", align: "center", sx: { pb: 3 }, children: subtitle }), showSuccessMessage && (jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: successHeading }), jsx(Typography, { children: successText })] }) })), showFailureMessage && (jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { spacing: 2, children: [errorHeading && (jsx(Typography, { variant: "h6", children: errorHeading })), jsx(Typography, { children: errorText }), jsx(Button, { variant: "contained", children: "try again" })] }) }))] }), !showSuccessMessage && !showFailureMessage && (jsx(Paper, { sx: {
+                    p: 2,
+                    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: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "name", name: "name", label: "Name", value: formValues.name, variant: "outlined", onBlur: handleBlur, onChange: handleChange, error: !!formErrors.name, helperText: formErrors.name }), jsx(TextField, { id: "email", name: "email", label: "Email", value: formValues.email, variant: "outlined", onBlur: handleBlur, onChange: handleChange, error: !!formErrors.email, helperText: formErrors.email }), jsx(TextField, { id: "subject", name: "subject", label: "Subject", value: formValues.subject, variant: "outlined", onBlur: handleBlur, onChange: handleChange, error: !!formErrors.subject, helperText: formErrors.subject }), jsx(TextField, { id: "message", name: "message", label: "Message", value: formValues.message, variant: "outlined", multiline: true, minRows: 5, onBlur: handleBlur, onChange: handleChange, error: !!formErrors.message, helperText: formErrors.message }), jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "end", children: [jsx(Button, { variant: "outlined", color: "primary", onClick: handleClear, children: "Clear" }), jsx(Button, { variant: "contained", onClick: handleSubmit, children: "Send" })] })] }) }))] }));
+}
+
+export { ContactForm };

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

@@ -0,0 +1,25 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import Box from '@mui/material/Box';
+import Collapse from '@mui/material/Collapse';
+import Chip from '@mui/material/Chip';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import { useState } from 'react';
+
+function ExplanatoryFoldOut({ title, description, sx = [], children, }) {
+    const [open, setOpen] = useState(false);
+    return (jsxs(Box, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: [jsx(Divider, { textAlign: "left", children: jsx(Chip, { label: title, size: "small", color: "primary", onClick: () => setOpen(!open), icon: open ? jsx(KeyboardArrowUpIcon, {}) : jsx(KeyboardArrowDownIcon, {}) }) }), jsxs(Collapse, { in: open, children: [description && (jsx(Typography, { variant: "body2", color: "primary", sx: { mt: 1 }, children: description })), children && jsx(Box, { sx: { mt: 1 }, children: children })] })] }));
+}
+
+export { ExplanatoryFoldOut };

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

@@ -0,0 +1,84 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useRef } from 'react';
+import { useTheme } from '@mui/material/styles';
+
+function MovingObject({ ObjectSize = 300 }) {
+    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+    const followerRef = useRef(null);
+    const theme = useTheme();
+    // Function to handle mouse movement
+    const handleMouseMove = (event) => {
+        const { clientX, clientY } = event;
+        setMousePosition({ x: clientX, y: clientY });
+    };
+    // Function to update the animation frame
+    const updateFollowerPosition = () => {
+        if (followerRef.current) {
+            followerRef.current.style.position = "absolute";
+            followerRef.current.style.top = `${mousePosition.y}px`;
+            followerRef.current.style.left = `${mousePosition.x}px`;
+            // followerRef.current.style.transform = `translate(${mousePosition.x}px, ${mousePosition.y}px)`;
+        }
+        requestAnimationFrame(updateFollowerPosition);
+    };
+    useEffect(() => {
+        // Attach the mouse move listener
+        window.addEventListener("mousemove", handleMouseMove);
+        // Start the animation
+        requestAnimationFrame(updateFollowerPosition);
+        // Cleanup on component unmount
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+        };
+    }, [mousePosition]);
+    return (jsxs("svg", { id: "object", ref: followerRef, width: `${ObjectSize}px`, height: `${ObjectSize}px`, style: {
+            position: "absolute",
+            // top: `${objectY}px`,
+            // left: `${objectX}px`,
+            transform: "translate(-50%, -50%)",
+        }, children: [jsx("defs", { children: jsxs("mask", { id: "radial-gradient-mask", children: [jsxs("radialGradient", { id: "gradient", cx: "50%", cy: "50%", r: "50%", fx: "50%", fy: "50%", children: [jsx("stop", { offset: "0%", stopColor: "white" }), jsx("stop", { offset: "100%", stopColor: "black" })] }), jsx("rect", { width: "100%", height: "100%", fill: "url(#gradient)" })] }) }), jsx("rect", { width: "100%", height: "100%", fill: theme.palette.primary.main, mask: "url(#radial-gradient-mask)", style: { filter: `opacity(.5)` } })] }));
+}
+function FluidBackground() {
+    const [ObjectSize, setObjectSize] = useState(300);
+    const theme = useTheme();
+    // setting up all the initial values
+    useEffect(() => {
+        setObjectSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 1.3);
+    }, []);
+    return (jsxs("div", { style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100vw",
+            height: "100vh",
+            zIndex: -1,
+            pointerEvents: "none",
+            isolation: "isolate",
+        }, children: [jsx("div", { id: "background", style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    display: "Block",
+                    width: "100%",
+                    height: "100%",
+                    background: theme.palette.background.paper,
+                    zIndex: -1,
+                } }), jsx(MovingObject, { ObjectSize: ObjectSize }), jsxs("svg", { id: "foreground", style: {
+                    position: "absolute",
+                }, preserveAspectRatio: "xMidYMid slice", width: "100%", height: "100%", viewBox: "0 0 7680 4320 ", children: [jsx("defs", { children: jsxs("mask", { id: "mask", children: [jsx("rect", { width: "100%", height: "100%", fill: "white" }), jsxs("text", { transform: "translate(-1000 200) rotate(-15)", style: {
+                                        fill: "#000",
+                                        fontFamily: "Merriweather-Bold, Merriweather",
+                                        fontSize: "360px",
+                                        fontWeight: 700,
+                                        letterSpacing: ".055em",
+                                    }, children: [jsxs("tspan", { x: "0", y: "0", children: ["JELLE PAULUS IS A TALENTED WEB DEVELOPER AND", " "] }), jsxs("tspan", { x: "0", y: "432", children: ["DESIGNER WITH A PASSION FOR CREATING VISUALLY", " "] }), jsxs("tspan", { x: "0", y: "864", children: ["STUNNING AND USER-FRIENDLY WEBSITES. WITH A", " "] }), jsxs("tspan", { x: "0", y: "1296", children: ["KEEN EYE FOR DETAIL AND A FOCUS ON CREATING", " "] }), jsxs("tspan", { x: "0", y: "1728", children: ["CLEAN, FUNCTIONAL DESIGNS, JELLE HAS A", " "] }), jsxs("tspan", { x: "0", y: "2160", children: ["REPUTATION FOR DELIVERING HIGH-QUALITY WORK", " "] }), jsxs("tspan", { x: "0", y: "2592", children: ["THAT EXCEEDS HIS CLIENTS' EXPECTATIONS. HE HAS A", " "] }), jsxs("tspan", { x: "0", y: "3024", children: ["DEEP UNDERSTANDING OF THE LATEST WEB", " "] }), jsxs("tspan", { x: "0", y: "3456", children: ["DEVELOPMENT TECHNOLOGIES, AND IS ABLE TO", " "] }), jsxs("tspan", { x: "0", y: "3888", children: ["SEAMLESSLY INTEGRATE FUNCTIONALITY AND", " "] }), jsxs("tspan", { x: "0", y: "4320", children: ["AESTHETICS TO CREATE WEBSITES THAT ARE BOTH", " "] }), jsxs("tspan", { x: "0", y: "4752", children: ["FUNCTIONAL AND VISUALLY APPEALING. WHETHER", " "] }), jsxs("tspan", { x: "0", y: "5184", children: ["YOU'RE LOOKING TO ESTABLISH AN ONLINE PRESENCE", " "] }), jsxs("tspan", { x: "0", y: "5616", children: ["OR REVAMP AN EXISTING WEBSITE, JELLE HAS THE", " "] }), jsx("tspan", { x: "0", y: "6048", children: "SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE." })] })] }) }), jsx("rect", { width: "100%", height: "100%", fill: theme.palette.background.default, mask: "url(#mask)" })] })] }));
+}
+
+export { FluidBackground as default };

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

@@ -0,0 +1,21 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { logoutAction } from '../data/actions/auth-actions.js';
+import Button from '@mui/material/Button';
+import LogoutIcon from '@mui/icons-material/Logout';
+
+//
+function LogoutButton({ text = "Log out", variant = "text", }) {
+    return (jsx("form", { action: logoutAction, children: jsxs(Button, { type: "submit", 
+            // aria-disabled={status.pending || loading}
+            // disabled={status.pending || loading}
+            startIcon: jsx(LogoutIcon, {}), variant: variant, children: [" ", text] }) }));
+}
+
+export { LogoutButton as default };