umwd-components 0.1.12 → 0.1.13

package/dist/cjs/components/Button.js

@@ -0,0 +1,44 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+
+function Button({
+  label,
+  backgroundColor = "red",
+  size = "md",
+  onClick
+}) {
+  let scale = 1;
+  if (size === "sm") {
+    scale = 0.75;
+  }
+  if (size === "lg") {
+    scale = 1.25;
+  }
+  const style = {
+    backgroundColor,
+    padding: `${0.5 * scale}rem ${1 * scale}rem`,
+    border: "none"
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    style: style,
+    onClick: onClick
+  }, label);
+}
+Button.propTypes = {
+  label: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  size: PropTypes.oneOf(["sm", "md", "lg"]),
+  onClick: PropTypes.func
+};
+
+exports.default = Button;

package/dist/cjs/components/Checkmark/Checkmark.js

@@ -0,0 +1,29 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+// Ported from Alexander Haniotis' code here: https://codepen.io/haniotis/pen/KwvYLO
+// import React from "react";
+
+const Checkmark = () => {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: "checkmark",
+    viewBox: "0 0 52 52"
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: "checkmark__circle",
+    cx: "26",
+    cy: "26",
+    r: "25",
+    fill: "none"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "checkmark__check",
+    fill: "none",
+    d: "M14.1 27.2l7.1 7.2 16.7-16.8"
+  }));
+};
+
+exports.Checkmark = Checkmark;

package/dist/cjs/components/NavBar/NavBar.js

@@ -0,0 +1,239 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var React$1 = require('react');
+var Link = require('next/link');
+var material = require('@mui/material');
+var CloseIcon = require('@mui/icons-material/Close');
+var MoreVertIcon = require('@mui/icons-material/MoreVert');
+
+const NavBar = ({
+  site_title,
+  logo,
+  pages
+}) => {
+  // handleMobileMenu
+
+  const [mobileNavOpen, setMobileNavOpen] = React$1.useState(false);
+  const handleOpenMobileMenu = e => {
+    setMobileNavOpen(true);
+  };
+  const handleCloseMobileMenu = e => {
+    setMobileNavOpen(false);
+  };
+  return /*#__PURE__*/React.createElement(material.AppBar, {
+    position: "sticky"
+  }, /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: "xl"
+  }, /*#__PURE__*/React.createElement(material.Toolbar, {
+    disableGutters: true,
+    sx: {
+      py: 1
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: "/",
+    style: {
+      textDecoration: "none",
+      color: "unset"
+    }
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: {
+        xs: "none",
+        md: "flex"
+      },
+      cursor: "pointer",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      mr: 1
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: logo.url,
+    width: logo.width || "32px",
+    height: logo.height || "32px",
+    alt: "site logo",
+    style: {
+      maxWidth: "60px",
+      maxHeight: "60px"
+    }
+  })), site_title !== undefined && /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6",
+    noWrap: true,
+    component: "h1",
+    sx: {
+      display: "flex",
+      textDecoration: "none"
+    }
+  }, site_title))), /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      flexGrow: 1,
+      display: {
+        xs: "none",
+        md: "flex"
+      },
+      alignItems: "center"
+    }
+  }, pages.map(page => {
+    return /*#__PURE__*/React.createElement(material.Button, {
+      key: page.name,
+      onClick: () => page.action(),
+      sx: {
+        my: 2,
+        color: "primary.contrastText",
+        display: "block"
+      }
+    }, page.name);
+  })), /*#__PURE__*/React.createElement(Link, {
+    href: "/",
+    style: {
+      textDecoration: "none",
+      color: "unset"
+    }
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: {
+        xs: "flex",
+        md: "none"
+      },
+      alignItems: "center"
+    }
+  }, logo.url !== undefined && /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      mr: 1
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: logo.url,
+    width: logo.width || "32px",
+    height: logo.height || "32px",
+    alt: logo.alt || "site logo",
+    style: {
+      maxWidth: "60px",
+      maxHeight: "60px"
+    }
+  })), site_title !== undefined && /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h5",
+    noWrap: true,
+    component: "h1",
+    sx: {
+      display: "flex",
+      flexGrow: 1
+    }
+  }, site_title))), /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: {
+        xs: "flex",
+        md: "none"
+      },
+      flexGrow: 1
+    }
+  }), /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      flexGrow: 0,
+      display: {
+        xs: "flex",
+        md: "none"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(material.Button, {
+    onClick: handleOpenMobileMenu,
+    sx: {
+      width: "40px",
+      height: "40px",
+      borderRadius: "50%",
+      p: 0,
+      minWidth: "unset",
+      color: "primary.contrastText",
+      boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"
+    }
+  }, /*#__PURE__*/React.createElement(MoreVertIcon, {
+    sx: {
+      color: "primary.contrastText"
+    }
+  })), /*#__PURE__*/React.createElement(material.Dialog, {
+    fullScreen: true,
+    open: mobileNavOpen,
+    onClose: handleCloseMobileMenu
+  }, /*#__PURE__*/React.createElement(material.AppBar, {
+    position: "sticky"
+  }, /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: "xl"
+  }, /*#__PURE__*/React.createElement(material.Toolbar, {
+    disableGutters: true,
+    sx: {
+      py: 1,
+      justifyContent: "space-between"
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: "/",
+    style: {
+      textDecoration: "none",
+      color: "unset"
+    }
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      mr: 1
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: logo.url,
+    alt: logo.alt || "logo",
+    width: logo.width || "32px",
+    height: logo.height || "32px",
+    style: {
+      maxWidth: "60px",
+      maxHeight: "60px"
+    }
+  })), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h5",
+    noWrap: true,
+    component: "h1",
+    sx: {
+      display: "flex",
+      flexGrow: 1
+    }
+  }, site_title !== undefined && site_title))), /*#__PURE__*/React.createElement(material.Button, {
+    onClick: handleCloseMobileMenu,
+    sx: {
+      width: "40px",
+      height: "40px",
+      borderRadius: "50%",
+      p: 0,
+      minWidth: "unset",
+      color: "primary.contrastText",
+      boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"
+    },
+    "aria-label": "close"
+  }, /*#__PURE__*/React.createElement(CloseIcon, {
+    sx: {
+      color: "primary.contrastText"
+    }
+  }))))), /*#__PURE__*/React.createElement(material.List, null, pages.map(page => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.ListItem, {
+      key: page.name,
+      onClick: () => {
+        page.action();
+        handleCloseMobileMenu();
+      }
+    }, /*#__PURE__*/React.createElement(material.ListItemText, {
+      primary: page.name
+    })), /*#__PURE__*/React.createElement(material.Divider, null));
+  })))))));
+};
+
+exports.NavBar = NavBar;

package/dist/cjs/components/NoteTextField/NoteTextField.js

@@ -0,0 +1,21 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var material = require('@mui/material');
+
+const NoteTextField = props => {
+  return /*#__PURE__*/React.createElement(material.TextField, _rollupPluginBabelHelpers.extends({}, props, {
+    sx: {
+      background: "linear-gradient(45deg, rgba(251,246,137,1) 30%, rgba(252,242,138,1) 90%)"
+    }
+  }));
+};
+
+exports.NoteTextField = NoteTextField;

package/dist/cjs/components/Requirement/Requirement.js

@@ -0,0 +1,28 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var Xmark = require('../Xmark/Xmark.js');
+var Checkmark = require('../Checkmark/Checkmark.js');
+var React = require('react');
+
+const Requirement = ({
+  value,
+  requirement
+}) => {
+  const [isValid, setIsValid] = React.useState();
+  React.useEffect(() => {
+    setIsValid(requirement.validator(value));
+  }, [value, requirement]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "requirement"
+  }, isValid ? /*#__PURE__*/React.createElement(Checkmark.Checkmark, null) : /*#__PURE__*/React.createElement(Xmark.Xmark, null), /*#__PURE__*/React.createElement("p", {
+    className: isValid ? "valid" : "invalid"
+  }, requirement.text));
+};
+
+exports.Requirement = Requirement;

package/dist/cjs/components/Requirements/Requirements.js

@@ -0,0 +1,30 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+require('../../styles.css.js');
+var Requirement = require('../Requirement/Requirement.js');
+var React = require('react');
+
+const Requirements = ({
+  value,
+  requirements,
+  onValidChange
+}) => {
+  const validChangeCb = React.useCallback(onValidChange, []);
+  React.useEffect(() => {
+    validChangeCb(requirements.every(r => r.validator(value)));
+  }, [value, requirements, validChangeCb]);
+  return requirements.map((r, index) => /*#__PURE__*/React.createElement(Requirement.Requirement, {
+    key: index,
+    value: value,
+    requirement: r,
+    onValidChange: onValidChange
+  }));
+};
+
+exports.Requirements = Requirements;

package/dist/cjs/components/Stack.js

@@ -0,0 +1,36 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+
+function Stack({
+  children,
+  spacing = 2,
+  direction = "row",
+  wrap = false
+}) {
+  const style = {
+    display: "flex",
+    gap: `${spacing * 0.25}rem`,
+    flexWrap: wrap ? "wrap" : "nowrap",
+    flexDirection: direction
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, children);
+}
+Stack.propTypes = {
+  spacing: PropTypes.number,
+  wrap: PropTypes.bool,
+  direction: PropTypes.oneOf(["row", "column"])
+};
+
+exports.default = Stack;

package/dist/cjs/components/Xmark/Xmark.js

@@ -0,0 +1,27 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+// import React from "react";
+
+const Xmark = () => {
+  return /*#__PURE__*/React.createElement("svg", {
+    x: "0px",
+    y: "0px",
+    width: "15px",
+    height: "15px",
+    viewBox: "0 0 122.879 122.879",
+    enableBackground: "new 0 0 122.879 122.879"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "#FF4141",
+    d: "M61.44,0c33.933,0,61.439,27.507,61.439,61.439 s-27.506,61.439-61.439,61.439C27.507,122.879,0,95.372,0,61.439S27.507,0,61.44,0L61.44,0z M73.451,39.151 c2.75-2.793,7.221-2.805,9.986-0.027c2.764,2.776,2.775,7.292,0.027,10.083L71.4,61.445l12.076,12.249 c2.729,2.77,2.689,7.257-0.08,10.022c-2.773,2.765-7.23,2.758-9.955-0.013L61.446,71.54L49.428,83.728 c-2.75,2.793-7.22,2.805-9.986,0.027c-2.763-2.776-2.776-7.293-0.027-10.084L51.48,61.434L39.403,49.185 c-2.728-2.769-2.689-7.256,0.082-10.022c2.772-2.765,7.229-2.758,9.953,0.013l11.997,12.165L73.451,39.151L73.451,39.151z"
+  })));
+};
+
+exports.Xmark = Xmark;

package/dist/cjs/index.js

@@ -0,0 +1,21 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var Requirements = require('./components/Requirements/Requirements.js');
+var NoteTextField = require('./components/NoteTextField/NoteTextField.js');
+var Button = require('./components/Button.js');
+var Stack = require('./components/Stack.js');
+var NavBar = require('./components/NavBar/NavBar.js');
+
+
+
+exports.Requirements = Requirements.Requirements;
+exports.NoteTextField = NoteTextField.NoteTextField;
+exports.Button = Button.default;
+exports.Stack = Stack.default;
+exports.NavBar = NavBar.NavBar;

package/dist/cjs/styles.css.js

@@ -0,0 +1,16 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject = require('C:/Users/jelle/Desktop/AP_projects/umwd-components/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".requirement{align-items:center;display:flex;height:35px}.requirement p{font-family:sans-serif;font-size:14px;font-weight:700;margin-left:10px}.invalid{color:red}.valid{color:#7ac142}.checkmark{stroke-width:5;stroke:#fff;stroke-miterlimit:10;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;border-radius:50%;box-shadow:inset 0 0 0 #7ac142;display:block;height:15px;width:15px}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#7ac142;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .2s cubic-bezier(.65,0,.45,1) .5s forwards;transform-origin:50% 50%}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #7ac142}}";
+styleInject(css_248z);
+
+exports.default = css_248z;

package/dist/esm/components/Button.js

@@ -0,0 +1,40 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Button({
+  label,
+  backgroundColor = "red",
+  size = "md",
+  onClick
+}) {
+  let scale = 1;
+  if (size === "sm") {
+    scale = 0.75;
+  }
+  if (size === "lg") {
+    scale = 1.25;
+  }
+  const style = {
+    backgroundColor,
+    padding: `${0.5 * scale}rem ${1 * scale}rem`,
+    border: "none"
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    style: style,
+    onClick: onClick
+  }, label);
+}
+Button.propTypes = {
+  label: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  size: PropTypes.oneOf(["sm", "md", "lg"]),
+  onClick: PropTypes.func
+};
+
+export { Button as default };

package/dist/esm/components/Checkmark/Checkmark.js

@@ -0,0 +1,27 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+// Ported from Alexander Haniotis' code here: https://codepen.io/haniotis/pen/KwvYLO
+// import React from "react";
+
+const Checkmark = () => {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: "checkmark",
+    viewBox: "0 0 52 52"
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: "checkmark__circle",
+    cx: "26",
+    cy: "26",
+    r: "25",
+    fill: "none"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "checkmark__check",
+    fill: "none",
+    d: "M14.1 27.2l7.1 7.2 16.7-16.8"
+  }));
+};
+
+export { Checkmark };

package/dist/esm/components/NavBar/NavBar.js

@@ -0,0 +1,237 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { useState } from 'react';
+import Link from 'next/link';
+import { AppBar, Container, Toolbar, Box, Typography, Button, Dialog, List, ListItem, ListItemText, Divider } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+
+const NavBar = ({
+  site_title,
+  logo,
+  pages
+}) => {
+  // handleMobileMenu
+
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  const handleOpenMobileMenu = e => {
+    setMobileNavOpen(true);
+  };
+  const handleCloseMobileMenu = e => {
+    setMobileNavOpen(false);
+  };
+  return /*#__PURE__*/React.createElement(AppBar, {
+    position: "sticky"
+  }, /*#__PURE__*/React.createElement(Container, {
+    maxWidth: "xl"
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    disableGutters: true,
+    sx: {
+      py: 1
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: "/",
+    style: {
+      textDecoration: "none",
+      color: "unset"
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: {
+        xs: "none",
+        md: "flex"
+      },
+      cursor: "pointer",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "flex",
+      mr: 1
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: logo.url,
+    width: logo.width || "32px",
+    height: logo.height || "32px",
+    alt: "site logo",
+    style: {
+      maxWidth: "60px",
+      maxHeight: "60px"
+    }
+  })), site_title !== undefined && /*#__PURE__*/React.createElement(Typography, {
+    variant: "h6",
+    noWrap: true,
+    component: "h1",
+    sx: {
+      display: "flex",
+      textDecoration: "none"
+    }
+  }, site_title))), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      flexGrow: 1,
+      display: {
+        xs: "none",
+        md: "flex"
+      },
+      alignItems: "center"
+    }
+  }, pages.map(page => {
+    return /*#__PURE__*/React.createElement(Button, {
+      key: page.name,
+      onClick: () => page.action(),
+      sx: {
+        my: 2,
+        color: "primary.contrastText",
+        display: "block"
+      }
+    }, page.name);
+  })), /*#__PURE__*/React.createElement(Link, {
+    href: "/",
+    style: {
+      textDecoration: "none",
+      color: "unset"
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: {
+        xs: "flex",
+        md: "none"
+      },
+      alignItems: "center"
+    }
+  }, logo.url !== undefined && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "flex",
+      mr: 1
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: logo.url,
+    width: logo.width || "32px",
+    height: logo.height || "32px",
+    alt: logo.alt || "site logo",
+    style: {
+      maxWidth: "60px",
+      maxHeight: "60px"
+    }
+  })), site_title !== undefined && /*#__PURE__*/React.createElement(Typography, {
+    variant: "h5",
+    noWrap: true,
+    component: "h1",
+    sx: {
+      display: "flex",
+      flexGrow: 1
+    }
+  }, site_title))), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: {
+        xs: "flex",
+        md: "none"
+      },
+      flexGrow: 1
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      flexGrow: 0,
+      display: {
+        xs: "flex",
+        md: "none"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleOpenMobileMenu,
+    sx: {
+      width: "40px",
+      height: "40px",
+      borderRadius: "50%",
+      p: 0,
+      minWidth: "unset",
+      color: "primary.contrastText",
+      boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"
+    }
+  }, /*#__PURE__*/React.createElement(MoreVertIcon, {
+    sx: {
+      color: "primary.contrastText"
+    }
+  })), /*#__PURE__*/React.createElement(Dialog, {
+    fullScreen: true,
+    open: mobileNavOpen,
+    onClose: handleCloseMobileMenu
+  }, /*#__PURE__*/React.createElement(AppBar, {
+    position: "sticky"
+  }, /*#__PURE__*/React.createElement(Container, {
+    maxWidth: "xl"
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    disableGutters: true,
+    sx: {
+      py: 1,
+      justifyContent: "space-between"
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: "/",
+    style: {
+      textDecoration: "none",
+      color: "unset"
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "flex",
+      mr: 1
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: logo.url,
+    alt: logo.alt || "logo",
+    width: logo.width || "32px",
+    height: logo.height || "32px",
+    style: {
+      maxWidth: "60px",
+      maxHeight: "60px"
+    }
+  })), /*#__PURE__*/React.createElement(Typography, {
+    variant: "h5",
+    noWrap: true,
+    component: "h1",
+    sx: {
+      display: "flex",
+      flexGrow: 1
+    }
+  }, site_title !== undefined && site_title))), /*#__PURE__*/React.createElement(Button, {
+    onClick: handleCloseMobileMenu,
+    sx: {
+      width: "40px",
+      height: "40px",
+      borderRadius: "50%",
+      p: 0,
+      minWidth: "unset",
+      color: "primary.contrastText",
+      boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"
+    },
+    "aria-label": "close"
+  }, /*#__PURE__*/React.createElement(CloseIcon, {
+    sx: {
+      color: "primary.contrastText"
+    }
+  }))))), /*#__PURE__*/React.createElement(List, null, pages.map(page => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
+      key: page.name,
+      onClick: () => {
+        page.action();
+        handleCloseMobileMenu();
+      }
+    }, /*#__PURE__*/React.createElement(ListItemText, {
+      primary: page.name
+    })), /*#__PURE__*/React.createElement(Divider, null));
+  })))))));
+};
+
+export { NavBar };

package/dist/esm/components/NoteTextField/NoteTextField.js

@@ -0,0 +1,19 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { TextField } from '@mui/material';
+
+const NoteTextField = props => {
+  return /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
+    sx: {
+      background: "linear-gradient(45deg, rgba(251,246,137,1) 30%, rgba(252,242,138,1) 90%)"
+    }
+  }));
+};
+
+export { NoteTextField };

package/dist/esm/components/Requirement/Requirement.js

@@ -0,0 +1,26 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { Xmark } from '../Xmark/Xmark.js';
+import { Checkmark } from '../Checkmark/Checkmark.js';
+import React, { useState, useEffect } from 'react';
+
+const Requirement = ({
+  value,
+  requirement
+}) => {
+  const [isValid, setIsValid] = useState();
+  useEffect(() => {
+    setIsValid(requirement.validator(value));
+  }, [value, requirement]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "requirement"
+  }, isValid ? /*#__PURE__*/React.createElement(Checkmark, null) : /*#__PURE__*/React.createElement(Xmark, null), /*#__PURE__*/React.createElement("p", {
+    className: isValid ? "valid" : "invalid"
+  }, requirement.text));
+};
+
+export { Requirement };

package/dist/esm/components/Requirements/Requirements.js

@@ -0,0 +1,28 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import '../../styles.css.js';
+import { Requirement } from '../Requirement/Requirement.js';
+import React, { useCallback, useEffect } from 'react';
+
+const Requirements = ({
+  value,
+  requirements,
+  onValidChange
+}) => {
+  const validChangeCb = useCallback(onValidChange, []);
+  useEffect(() => {
+    validChangeCb(requirements.every(r => r.validator(value)));
+  }, [value, requirements, validChangeCb]);
+  return requirements.map((r, index) => /*#__PURE__*/React.createElement(Requirement, {
+    key: index,
+    value: value,
+    requirement: r,
+    onValidChange: onValidChange
+  }));
+};
+
+export { Requirements };

package/dist/esm/components/Stack.js

@@ -0,0 +1,32 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Stack({
+  children,
+  spacing = 2,
+  direction = "row",
+  wrap = false
+}) {
+  const style = {
+    display: "flex",
+    gap: `${spacing * 0.25}rem`,
+    flexWrap: wrap ? "wrap" : "nowrap",
+    flexDirection: direction
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, children);
+}
+Stack.propTypes = {
+  spacing: PropTypes.number,
+  wrap: PropTypes.bool,
+  direction: PropTypes.oneOf(["row", "column"])
+};
+
+export { Stack as default };

package/dist/esm/components/Xmark/Xmark.js

@@ -0,0 +1,25 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+// import React from "react";
+
+const Xmark = () => {
+  return /*#__PURE__*/React.createElement("svg", {
+    x: "0px",
+    y: "0px",
+    width: "15px",
+    height: "15px",
+    viewBox: "0 0 122.879 122.879",
+    enableBackground: "new 0 0 122.879 122.879"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "#FF4141",
+    d: "M61.44,0c33.933,0,61.439,27.507,61.439,61.439 s-27.506,61.439-61.439,61.439C27.507,122.879,0,95.372,0,61.439S27.507,0,61.44,0L61.44,0z M73.451,39.151 c2.75-2.793,7.221-2.805,9.986-0.027c2.764,2.776,2.775,7.292,0.027,10.083L71.4,61.445l12.076,12.249 c2.729,2.77,2.689,7.257-0.08,10.022c-2.773,2.765-7.23,2.758-9.955-0.013L61.446,71.54L49.428,83.728 c-2.75,2.793-7.22,2.805-9.986,0.027c-2.763-2.776-2.776-7.293-0.027-10.084L51.48,61.434L39.403,49.185 c-2.728-2.769-2.689-7.256,0.082-10.022c2.772-2.765,7.229-2.758,9.953,0.013l11.997,12.165L73.451,39.151L73.451,39.151z"
+  })));
+};
+
+export { Xmark };

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+export { Requirements } from './components/Requirements/Requirements.js';
+export { NoteTextField } from './components/NoteTextField/NoteTextField.js';
+export { default as Button } from './components/Button.js';
+export { default as Stack } from './components/Stack.js';
+export { NavBar } from './components/NavBar/NavBar.js';

package/dist/esm/styles.css.js

@@ -0,0 +1,12 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import styleInject from 'C:/Users/jelle/Desktop/AP_projects/umwd-components/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".requirement{align-items:center;display:flex;height:35px}.requirement p{font-family:sans-serif;font-size:14px;font-weight:700;margin-left:10px}.invalid{color:red}.valid{color:#7ac142}.checkmark{stroke-width:5;stroke:#fff;stroke-miterlimit:10;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;border-radius:50%;box-shadow:inset 0 0 0 #7ac142;display:block;height:15px;width:15px}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#7ac142;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .2s cubic-bezier(.65,0,.45,1) .5s forwards;transform-origin:50% 50%}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #7ac142}}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "UMWD Component library",
   "main": "dist/cjs/src/index.js",
   "module": "dist/esm/src/index.js",

package/rollup.config.mjs

@@ -19,6 +19,7 @@ const outputOptions = {
 
 export default [
   {
+    external: [/node_modules/],
     input: "./src/index.js",
     output: [
       {
@@ -44,7 +45,7 @@ export default [
         exclude: "node_modules/**",
         presets: ["@babel/preset-react"],
       }),
-      external(),
+      // external(),
       resolve(),
       preserveDirectives(),
       /* useClient(), */

package/src/components/Checkmark/Checkmark.js

@@ -1,5 +1,5 @@
 // Ported from Alexander Haniotis' code here: https://codepen.io/haniotis/pen/KwvYLO
-import React from "react";
+// import React from "react";
 
 export const Checkmark = () => {
   return (

package/src/components/Xmark/Xmark.js

@@ -1,4 +1,4 @@
-import React from "react";
+// import React from "react";
 
 export const Xmark = () => {
   return (