umwd-components 0.1.9 → 0.1.11

package/dist/cjs/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,24 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+
+'use strict';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+exports.extends = _extends;

package/dist/cjs/node_modules/style-inject/dist/style-inject.es.js

@@ -0,0 +1,38 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+exports.default = styleInject;

package/dist/cjs/src/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/src/components/Checkmark/Checkmark.js

@@ -0,0 +1,29 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+
+'use strict';
+
+var React = require('react');
+
+// Ported from Alexander Haniotis' code here: https://codepen.io/haniotis/pen/KwvYLO
+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/src/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/src/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/src/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/src/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/src/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/src/components/Xmark/Xmark.js

@@ -0,0 +1,27 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+
+'use strict';
+
+var React = require('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/src/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/src/styles.css.js

@@ -0,0 +1,16 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject_es = require('../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_es.default(css_248z);
+
+exports.default = css_248z;

package/dist/esm/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,22 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+export { _extends as extends };

package/dist/esm/node_modules/style-inject/dist/style-inject.es.js

@@ -0,0 +1,34 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+export { styleInject as default };

package/dist/esm/src/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/src/components/Checkmark/Checkmark.js

@@ -0,0 +1,27 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+
+import React from 'react';
+
+// Ported from Alexander Haniotis' code here: https://codepen.io/haniotis/pen/KwvYLO
+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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/styles.css.js

@@ -0,0 +1,12 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+
+import styleInject from '../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.9",
+  "version": "0.1.11",
   "description": "UMWD Component library",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -34,9 +34,9 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-react": "7.23.3",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@babel/preset-react": "7.23.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
@@ -59,6 +59,8 @@
     "rollup": "^4.9.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "rollup-plugin-use-client": "^1.4.0",
     "storybook": "^7.6.7",
     "web-vitals": "^3.5.1",
     "webpack": "^5.89.0"

package/rollup.config.mjs

@@ -3,19 +3,36 @@ import resolve from "@rollup/plugin-node-resolve";
 import external from "rollup-plugin-peer-deps-external";
 import terser from "@rollup/plugin-terser";
 import postcss from "rollup-plugin-postcss";
+import preserveDirectives from 'rollup-plugin-preserve-directives';
+import useClient from "rollup-plugin-use-client";
+
+const outputOptions = {
+  exports: 'named',
+  preserveModules: true,
+  banner: `/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+`,
+};
+
 
 const config = [
   {
     input: "./src/index.js",
     output: [
       {
-        file: "dist/index.js",
+        dir: "dist/cjs",
         format: "cjs",
+        ...outputOptions,
+        preserveModules: true,
       },
       {
-        file: "dist/index.es.js",
-        format: "es",
-        exports: "named",
+        dir: "dist/esm",
+        format: "esm",
+        ...outputOptions,
+        preserveModules: true,
       },
     ],
     plugins: [
@@ -29,10 +46,13 @@ const config = [
       }),
       external(),
       resolve(),
-      terser(),
+      preserveDirectives(),
+      /* useClient(), */
+      /* terser({
+        compress: { directives: false },
+      }), */
     ],
   },
 ];
 
-export default config;
-
+export default config;

package/dist/index.es.js

@@ -1 +0,0 @@
-import e,{useState as t,useEffect as a,useCallback as r}from"react";import{TextField as n,AppBar as l,Container as c,Toolbar as o,Box as i,Typography as s,Button as m,Dialog as p,List as x,ListItem as d,ListItemText as h,Divider as f}from"@mui/material";import u from"prop-types";import g from"next/link";import y from"@mui/icons-material/Close";import k from"@mui/icons-material/MoreVert";!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===a&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".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}}");const E=()=>e.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"},e.createElement("g",null,e.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"}))),b=()=>e.createElement("svg",{className:"checkmark",viewBox:"0 0 52 52"},e.createElement("circle",{className:"checkmark__circle",cx:"26",cy:"26",r:"25",fill:"none"}),e.createElement("path",{className:"checkmark__check",fill:"none",d:"M14.1 27.2l7.1 7.2 16.7-16.8"})),R=({value:r,requirement:n})=>{const[l,c]=t();return a((()=>{c(n.validator(r))}),[r,n]),e.createElement("div",{className:"requirement"},l?e.createElement(b,null):e.createElement(E,null),e.createElement("p",{className:l?"valid":"invalid"},n.text))},w=({value:t,requirements:n,onValidChange:l})=>{const c=r(l,[]);return a((()=>{c(n.every((e=>e.validator(t))))}),[t,n,c]),n.map(((a,r)=>e.createElement(R,{key:r,value:t,requirement:a,onValidChange:l})))};function v(){return v=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},v.apply(this,arguments)}const C=t=>e.createElement(n,v({},t,{sx:{background:"linear-gradient(45deg, rgba(251,246,137,1) 30%, rgba(252,242,138,1) 90%)"}}));function W({label:t,backgroundColor:a="red",size:r="md",onClick:n}){let l=1;"sm"===r&&(l=.75),"lg"===r&&(l=1.25);const c={backgroundColor:a,padding:`${.5*l}rem ${1*l}rem`,border:"none"};return e.createElement("button",{style:c,onClick:n},t)}function T({children:t,spacing:a=2,direction:r="row",wrap:n=!1}){const l={display:"flex",gap:.25*a+"rem",flexWrap:n?"wrap":"nowrap",flexDirection:r};return e.createElement("div",{style:l},t)}W.propTypes={label:u.string,backgroundColor:u.string,size:u.oneOf(["sm","md","lg"]),onClick:u.func},T.propTypes={spacing:u.number,wrap:u.bool,direction:u.oneOf(["row","column"])};const _=({site_title:e,logo:a,pages:r})=>{const[n,u]=t(!1),E=e=>{u(!1)};return React.createElement(l,{position:"sticky"},React.createElement(c,{maxWidth:"xl"},React.createElement(o,{disableGutters:!0,sx:{py:1}},React.createElement(g,{href:"/",style:{textDecoration:"none",color:"unset"}},React.createElement(i,{sx:{display:{xs:"none",md:"flex"},cursor:"pointer",alignItems:"center"}},React.createElement(i,{sx:{display:"flex",mr:1}},React.createElement("img",{src:a.url,width:a.width||"32px",height:a.height||"32px",alt:"site logo",style:{maxWidth:"60px",maxHeight:"60px"}})),void 0!==e&&React.createElement(s,{variant:"h6",noWrap:!0,component:"h1",sx:{display:"flex",textDecoration:"none"}},e))),React.createElement(i,{sx:{flexGrow:1,display:{xs:"none",md:"flex"},alignItems:"center"}},r.map((e=>React.createElement(m,{key:e.name,onClick:()=>e.action(),sx:{my:2,color:"primary.contrastText",display:"block"}},e.name)))),React.createElement(g,{href:"/",style:{textDecoration:"none",color:"unset"}},React.createElement(i,{sx:{display:{xs:"flex",md:"none"},alignItems:"center"}},void 0!==a.url&&React.createElement(i,{sx:{display:"flex",mr:1}},React.createElement("img",{src:a.url,width:a.width||"32px",height:a.height||"32px",alt:a.alt||"site logo",style:{maxWidth:"60px",maxHeight:"60px"}})),void 0!==e&&React.createElement(s,{variant:"h5",noWrap:!0,component:"h1",sx:{display:"flex",flexGrow:1}},e))),React.createElement(i,{sx:{display:{xs:"flex",md:"none"},flexGrow:1}}),React.createElement(i,{sx:{flexGrow:0,display:{xs:"flex",md:"none"}}},React.createElement(m,{onClick:e=>{u(!0)},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)"}},React.createElement(k,{sx:{color:"primary.contrastText"}})),React.createElement(p,{fullScreen:!0,open:n,onClose:E},React.createElement(l,{position:"sticky"},React.createElement(c,{maxWidth:"xl"},React.createElement(o,{disableGutters:!0,sx:{py:1,justifyContent:"space-between"}},React.createElement(g,{href:"/",style:{textDecoration:"none",color:"unset"}},React.createElement(i,{sx:{display:"flex",flexDirection:"row",alignItems:"center"}},React.createElement(i,{sx:{display:"flex",mr:1}},React.createElement("img",{src:a.url,alt:a.alt||"logo",width:a.width||"32px",height:a.height||"32px",style:{maxWidth:"60px",maxHeight:"60px"}})),React.createElement(s,{variant:"h5",noWrap:!0,component:"h1",sx:{display:"flex",flexGrow:1}},void 0!==e&&e))),React.createElement(m,{onClick:E,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"},React.createElement(y,{sx:{color:"primary.contrastText"}}))))),React.createElement(x,null,r.map((e=>React.createElement(React.Fragment,null,React.createElement(d,{key:e.name,onClick:()=>{e.action(),E()}},React.createElement(h,{primary:e.name})),React.createElement(f,null))))))))))};export{W as Button,_ as NavBar,C as NoteTextField,w as Requirements,T as Stack};

package/dist/index.js

@@ -1 +0,0 @@
-"use strict";var e=require("react"),t=require("@mui/material"),a=require("prop-types"),r=require("next/link"),n=require("@mui/icons-material/Close"),l=require("@mui/icons-material/MoreVert");!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===a&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".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}}");const o=()=>e.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"},e.createElement("g",null,e.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"}))),c=()=>e.createElement("svg",{className:"checkmark",viewBox:"0 0 52 52"},e.createElement("circle",{className:"checkmark__circle",cx:"26",cy:"26",r:"25",fill:"none"}),e.createElement("path",{className:"checkmark__check",fill:"none",d:"M14.1 27.2l7.1 7.2 16.7-16.8"})),i=({value:t,requirement:a})=>{const[r,n]=e.useState();return e.useEffect((()=>{n(a.validator(t))}),[t,a]),e.createElement("div",{className:"requirement"},r?e.createElement(c,null):e.createElement(o,null),e.createElement("p",{className:r?"valid":"invalid"},a.text))};function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},s.apply(this,arguments)}function m({label:t,backgroundColor:a="red",size:r="md",onClick:n}){let l=1;"sm"===r&&(l=.75),"lg"===r&&(l=1.25);const o={backgroundColor:a,padding:`${.5*l}rem ${1*l}rem`,border:"none"};return e.createElement("button",{style:o,onClick:n},t)}function x({children:t,spacing:a=2,direction:r="row",wrap:n=!1}){const l={display:"flex",gap:.25*a+"rem",flexWrap:n?"wrap":"nowrap",flexDirection:r};return e.createElement("div",{style:l},t)}m.propTypes={label:a.string,backgroundColor:a.string,size:a.oneOf(["sm","md","lg"]),onClick:a.func},x.propTypes={spacing:a.number,wrap:a.bool,direction:a.oneOf(["row","column"])};exports.Button=m,exports.NavBar=({site_title:a,logo:o,pages:c})=>{const[i,s]=e.useState(!1),m=e=>{s(!1)};return React.createElement(t.AppBar,{position:"sticky"},React.createElement(t.Container,{maxWidth:"xl"},React.createElement(t.Toolbar,{disableGutters:!0,sx:{py:1}},React.createElement(r,{href:"/",style:{textDecoration:"none",color:"unset"}},React.createElement(t.Box,{sx:{display:{xs:"none",md:"flex"},cursor:"pointer",alignItems:"center"}},React.createElement(t.Box,{sx:{display:"flex",mr:1}},React.createElement("img",{src:o.url,width:o.width||"32px",height:o.height||"32px",alt:"site logo",style:{maxWidth:"60px",maxHeight:"60px"}})),void 0!==a&&React.createElement(t.Typography,{variant:"h6",noWrap:!0,component:"h1",sx:{display:"flex",textDecoration:"none"}},a))),React.createElement(t.Box,{sx:{flexGrow:1,display:{xs:"none",md:"flex"},alignItems:"center"}},c.map((e=>React.createElement(t.Button,{key:e.name,onClick:()=>e.action(),sx:{my:2,color:"primary.contrastText",display:"block"}},e.name)))),React.createElement(r,{href:"/",style:{textDecoration:"none",color:"unset"}},React.createElement(t.Box,{sx:{display:{xs:"flex",md:"none"},alignItems:"center"}},void 0!==o.url&&React.createElement(t.Box,{sx:{display:"flex",mr:1}},React.createElement("img",{src:o.url,width:o.width||"32px",height:o.height||"32px",alt:o.alt||"site logo",style:{maxWidth:"60px",maxHeight:"60px"}})),void 0!==a&&React.createElement(t.Typography,{variant:"h5",noWrap:!0,component:"h1",sx:{display:"flex",flexGrow:1}},a))),React.createElement(t.Box,{sx:{display:{xs:"flex",md:"none"},flexGrow:1}}),React.createElement(t.Box,{sx:{flexGrow:0,display:{xs:"flex",md:"none"}}},React.createElement(t.Button,{onClick:e=>{s(!0)},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)"}},React.createElement(l,{sx:{color:"primary.contrastText"}})),React.createElement(t.Dialog,{fullScreen:!0,open:i,onClose:m},React.createElement(t.AppBar,{position:"sticky"},React.createElement(t.Container,{maxWidth:"xl"},React.createElement(t.Toolbar,{disableGutters:!0,sx:{py:1,justifyContent:"space-between"}},React.createElement(r,{href:"/",style:{textDecoration:"none",color:"unset"}},React.createElement(t.Box,{sx:{display:"flex",flexDirection:"row",alignItems:"center"}},React.createElement(t.Box,{sx:{display:"flex",mr:1}},React.createElement("img",{src:o.url,alt:o.alt||"logo",width:o.width||"32px",height:o.height||"32px",style:{maxWidth:"60px",maxHeight:"60px"}})),React.createElement(t.Typography,{variant:"h5",noWrap:!0,component:"h1",sx:{display:"flex",flexGrow:1}},void 0!==a&&a))),React.createElement(t.Button,{onClick:m,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"},React.createElement(n,{sx:{color:"primary.contrastText"}}))))),React.createElement(t.List,null,c.map((e=>React.createElement(React.Fragment,null,React.createElement(t.ListItem,{key:e.name,onClick:()=>{e.action(),m()}},React.createElement(t.ListItemText,{primary:e.name})),React.createElement(t.Divider,null))))))))))},exports.NoteTextField=a=>e.createElement(t.TextField,s({},a,{sx:{background:"linear-gradient(45deg, rgba(251,246,137,1) 30%, rgba(252,242,138,1) 90%)"}})),exports.Requirements=({value:t,requirements:a,onValidChange:r})=>{const n=e.useCallback(r,[]);return e.useEffect((()=>{n(a.every((e=>e.validator(t))))}),[t,a,n]),a.map(((a,n)=>e.createElement(i,{key:n,value:t,requirement:a,onValidChange:r})))},exports.Stack=x;