diff --git a/public/js/vendor/alpinejs/alpine.js b/public/js/vendor/alpinejs/alpine.js
deleted file mode 100644
index 58bca23dbf29..000000000000
--- a/public/js/vendor/alpinejs/alpine.js
+++ /dev/null
@@ -1,1686 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    (global = global || self, global.Alpine = factory());
-  }(this, (function () { 'use strict';
-  
-    function _defineProperty(obj, key, value) {
-      if (key in obj) {
-        Object.defineProperty(obj, key, {
-          value: value,
-          enumerable: true,
-          configurable: true,
-          writable: true
-        });
-      } else {
-        obj[key] = value;
-      }
-  
-      return obj;
-    }
-  
-    function ownKeys(object, enumerableOnly) {
-      var keys = Object.keys(object);
-  
-      if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) symbols = symbols.filter(function (sym) {
-          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-        });
-        keys.push.apply(keys, symbols);
-      }
-  
-      return keys;
-    }
-  
-    function _objectSpread2(target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i] != null ? arguments[i] : {};
-  
-        if (i % 2) {
-          ownKeys(Object(source), true).forEach(function (key) {
-            _defineProperty(target, key, source[key]);
-          });
-        } else if (Object.getOwnPropertyDescriptors) {
-          Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-        } else {
-          ownKeys(Object(source)).forEach(function (key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-          });
-        }
-      }
-  
-      return target;
-    }
-  
-    // Thanks @stimulus:
-    // https://github.com/stimulusjs/stimulus/blob/master/packages/%40stimulus/core/src/application.ts
-    function domReady() {
-      return new Promise(resolve => {
-        if (document.readyState == "loading") {
-          document.addEventListener("DOMContentLoaded", resolve);
-        } else {
-          resolve();
-        }
-      });
-    }
-    function arrayUnique(array) {
-      var a = array.concat();
-  
-      for (var i = 0; i < a.length; ++i) {
-        for (var j = i + 1; j < a.length; ++j) {
-          if (a[i] === a[j]) a.splice(j--, 1);
-        }
-      }
-  
-      return a;
-    }
-    function isTesting() {
-      return navigator.userAgent.includes("Node.js") || navigator.userAgent.includes("jsdom");
-    }
-    function kebabCase(subject) {
-      return subject.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/[_\s]/, '-').toLowerCase();
-    }
-    function walk(el, callback) {
-      if (callback(el) === false) return;
-      let node = el.firstElementChild;
-  
-      while (node) {
-        walk(node, callback);
-        node = node.nextElementSibling;
-      }
-    }
-    function debounce(func, wait) {
-      var timeout;
-      return function () {
-        var context = this,
-            args = arguments;
-  
-        var later = function later() {
-          timeout = null;
-          func.apply(context, args);
-        };
-  
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-      };
-    }
-    function saferEval(expression, dataContext, additionalHelperVariables = {}) {
-      return new Function(['$data', ...Object.keys(additionalHelperVariables)], `var result; with($data) { result = ${expression} }; return result`)(dataContext, ...Object.values(additionalHelperVariables));
-    }
-    function saferEvalNoReturn(expression, dataContext, additionalHelperVariables = {}) {
-      // For the cases when users pass only a function reference to the caller: `x-on:click="foo"`
-      // Where "foo" is a function. Also, we'll pass the function the event instance when we call it.
-      if (Object.keys(dataContext).includes(expression)) {
-        let methodReference = new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { return ${expression} }`)(dataContext, ...Object.values(additionalHelperVariables));
-  
-        if (typeof methodReference === 'function') {
-          return methodReference.call(dataContext, additionalHelperVariables['$event']);
-        }
-      }
-  
-      return new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { ${expression} }`)(dataContext, ...Object.values(additionalHelperVariables));
-    }
-    const xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)\b/;
-    function isXAttr(attr) {
-      const name = replaceAtAndColonWithStandardSyntax(attr.name);
-      return xAttrRE.test(name);
-    }
-    function getXAttrs(el, type) {
-      return Array.from(el.attributes).filter(isXAttr).map(attr => {
-        const name = replaceAtAndColonWithStandardSyntax(attr.name);
-        const typeMatch = name.match(xAttrRE);
-        const valueMatch = name.match(/:([a-zA-Z\-:]+)/);
-        const modifiers = name.match(/\.[^.\]]+(?=[^\]]*$)/g) || [];
-        return {
-          type: typeMatch ? typeMatch[1] : null,
-          value: valueMatch ? valueMatch[1] : null,
-          modifiers: modifiers.map(i => i.replace('.', '')),
-          expression: attr.value
-        };
-      }).filter(i => {
-        // If no type is passed in for filtering, bypass filter
-        if (!type) return true;
-        return i.type === type;
-      });
-    }
-    function isBooleanAttr(attrName) {
-      // As per HTML spec table https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute
-      // Array roughly ordered by estimated usage
-      const booleanAttributes = ['disabled', 'checked', 'required', 'readonly', 'hidden', 'open', 'selected', 'autofocus', 'itemscope', 'multiple', 'novalidate', 'allowfullscreen', 'allowpaymentrequest', 'formnovalidate', 'autoplay', 'controls', 'loop', 'muted', 'playsinline', 'default', 'ismap', 'reversed', 'async', 'defer', 'nomodule'];
-      return booleanAttributes.includes(attrName);
-    }
-    function replaceAtAndColonWithStandardSyntax(name) {
-      if (name.startsWith('@')) {
-        return name.replace('@', 'x-on:');
-      } else if (name.startsWith(':')) {
-        return name.replace(':', 'x-bind:');
-      }
-  
-      return name;
-    }
-    function transitionIn(el, show, forceSkip = false) {
-      // We don't want to transition on the initial page load.
-      if (forceSkip) return show();
-      const attrs = getXAttrs(el, 'transition');
-      const showAttr = getXAttrs(el, 'show')[0]; // If this is triggered by a x-show.transition.
-  
-      if (showAttr && showAttr.modifiers.includes('transition')) {
-        let modifiers = showAttr.modifiers; // If x-show.transition.out, we'll skip the "in" transition.
-  
-        if (modifiers.includes('out') && !modifiers.includes('in')) return show();
-        const settingBothSidesOfTransition = modifiers.includes('in') && modifiers.includes('out'); // If x-show.transition.in...out... only use "in" related modifiers for this transition.
-  
-        modifiers = settingBothSidesOfTransition ? modifiers.filter((i, index) => index < modifiers.indexOf('out')) : modifiers;
-        transitionHelperIn(el, modifiers, show); // Otherwise, we can assume x-transition:enter.
-      } else if (attrs.length > 0) {
-        transitionClassesIn(el, attrs, show);
-      } else {
-        // If neither, just show that damn thing.
-        show();
-      }
-    }
-    function transitionOut(el, hide, forceSkip = false) {
-      if (forceSkip) return hide();
-      const attrs = getXAttrs(el, 'transition');
-      const showAttr = getXAttrs(el, 'show')[0];
-  
-      if (showAttr && showAttr.modifiers.includes('transition')) {
-        let modifiers = showAttr.modifiers;
-        if (modifiers.includes('in') && !modifiers.includes('out')) return hide();
-        const settingBothSidesOfTransition = modifiers.includes('in') && modifiers.includes('out');
-        modifiers = settingBothSidesOfTransition ? modifiers.filter((i, index) => index > modifiers.indexOf('out')) : modifiers;
-        transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hide);
-      } else if (attrs.length > 0) {
-        transitionClassesOut(el, attrs, hide);
-      } else {
-        hide();
-      }
-    }
-    function transitionHelperIn(el, modifiers, showCallback) {
-      // Default values inspired by: https://material.io/design/motion/speed.html#duration
-      const styleValues = {
-        duration: modifierValue(modifiers, 'duration', 150),
-        origin: modifierValue(modifiers, 'origin', 'center'),
-        first: {
-          opacity: 0,
-          scale: modifierValue(modifiers, 'scale', 95)
-        },
-        second: {
-          opacity: 1,
-          scale: 100
-        }
-      };
-      transitionHelper(el, modifiers, showCallback, () => {}, styleValues);
-    }
-    function transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hideCallback) {
-      // Make the "out" transition .5x slower than the "in". (Visually better)
-      // HOWEVER, if they explicitly set a duration for the "out" transition,
-      // use that.
-      const duration = settingBothSidesOfTransition ? modifierValue(modifiers, 'duration', 150) : modifierValue(modifiers, 'duration', 150) / 2;
-      const styleValues = {
-        duration: duration,
-        origin: modifierValue(modifiers, 'origin', 'center'),
-        first: {
-          opacity: 1,
-          scale: 100
-        },
-        second: {
-          opacity: 0,
-          scale: modifierValue(modifiers, 'scale', 95)
-        }
-      };
-      transitionHelper(el, modifiers, () => {}, hideCallback, styleValues);
-    }
-  
-    function modifierValue(modifiers, key, fallback) {
-      // If the modifier isn't present, use the default.
-      if (modifiers.indexOf(key) === -1) return fallback; // If it IS present, grab the value after it: x-show.transition.duration.500ms
-  
-      const rawValue = modifiers[modifiers.indexOf(key) + 1];
-      if (!rawValue) return fallback;
-  
-      if (key === 'scale') {
-        // Check if the very next value is NOT a number and return the fallback.
-        // If x-show.transition.scale, we'll use the default scale value.
-        // That is how a user opts out of the opacity transition.
-        if (!isNumeric(rawValue)) return fallback;
-      }
-  
-      if (key === 'duration') {
-        // Support x-show.transition.duration.500ms && duration.500
-        let match = rawValue.match(/([0-9]+)ms/);
-        if (match) return match[1];
-      }
-  
-      if (key === 'origin') {
-        // Support chaining origin directions: x-show.transition.top.right
-        if (['top', 'right', 'left', 'center', 'bottom'].includes(modifiers[modifiers.indexOf(key) + 2])) {
-          return [rawValue, modifiers[modifiers.indexOf(key) + 2]].join(' ');
-        }
-      }
-  
-      return rawValue;
-    }
-  
-    function transitionHelper(el, modifiers, hook1, hook2, styleValues) {
-      // If the user set these style values, we'll put them back when we're done with them.
-      const opacityCache = el.style.opacity;
-      const transformCache = el.style.transform;
-      const transformOriginCache = el.style.transformOrigin; // If no modifiers are present: x-show.transition, we'll default to both opacity and scale.
-  
-      const noModifiers = !modifiers.includes('opacity') && !modifiers.includes('scale');
-      const transitionOpacity = noModifiers || modifiers.includes('opacity');
-      const transitionScale = noModifiers || modifiers.includes('scale'); // These are the explicit stages of a transition (same stages for in and for out).
-      // This way you can get a birds eye view of the hooks, and the differences
-      // between them.
-  
-      const stages = {
-        start() {
-          if (transitionOpacity) el.style.opacity = styleValues.first.opacity;
-          if (transitionScale) el.style.transform = `scale(${styleValues.first.scale / 100})`;
-        },
-  
-        during() {
-          if (transitionScale) el.style.transformOrigin = styleValues.origin;
-          el.style.transitionProperty = [transitionOpacity ? `opacity` : ``, transitionScale ? `transform` : ``].join(' ').trim();
-          el.style.transitionDuration = `${styleValues.duration / 1000}s`;
-          el.style.transitionTimingFunction = `cubic-bezier(0.4, 0.0, 0.2, 1)`;
-        },
-  
-        show() {
-          hook1();
-        },
-  
-        end() {
-          if (transitionOpacity) el.style.opacity = styleValues.second.opacity;
-          if (transitionScale) el.style.transform = `scale(${styleValues.second.scale / 100})`;
-        },
-  
-        hide() {
-          hook2();
-        },
-  
-        cleanup() {
-          if (transitionOpacity) el.style.opacity = opacityCache;
-          if (transitionScale) el.style.transform = transformCache;
-          if (transitionScale) el.style.transformOrigin = transformOriginCache;
-          el.style.transitionProperty = null;
-          el.style.transitionDuration = null;
-          el.style.transitionTimingFunction = null;
-        }
-  
-      };
-      transition(el, stages);
-    }
-    function transitionClassesIn(el, directives, showCallback) {
-      const enter = (directives.find(i => i.value === 'enter') || {
-        expression: ''
-      }).expression.split(' ').filter(i => i !== '');
-      const enterStart = (directives.find(i => i.value === 'enter-start') || {
-        expression: ''
-      }).expression.split(' ').filter(i => i !== '');
-      const enterEnd = (directives.find(i => i.value === 'enter-end') || {
-        expression: ''
-      }).expression.split(' ').filter(i => i !== '');
-      transitionClasses(el, enter, enterStart, enterEnd, showCallback, () => {});
-    }
-    function transitionClassesOut(el, directives, hideCallback) {
-      const leave = (directives.find(i => i.value === 'leave') || {
-        expression: ''
-      }).expression.split(' ').filter(i => i !== '');
-      const leaveStart = (directives.find(i => i.value === 'leave-start') || {
-        expression: ''
-      }).expression.split(' ').filter(i => i !== '');
-      const leaveEnd = (directives.find(i => i.value === 'leave-end') || {
-        expression: ''
-      }).expression.split(' ').filter(i => i !== '');
-      transitionClasses(el, leave, leaveStart, leaveEnd, () => {}, hideCallback);
-    }
-    function transitionClasses(el, classesDuring, classesStart, classesEnd, hook1, hook2) {
-      const originalClasses = el.__x_original_classes || [];
-      const stages = {
-        start() {
-          el.classList.add(...classesStart);
-        },
-  
-        during() {
-          el.classList.add(...classesDuring);
-        },
-  
-        show() {
-          hook1();
-        },
-  
-        end() {
-          // Don't remove classes that were in the original class attribute.
-          el.classList.remove(...classesStart.filter(i => !originalClasses.includes(i)));
-          el.classList.add(...classesEnd);
-        },
-  
-        hide() {
-          hook2();
-        },
-  
-        cleanup() {
-          el.classList.remove(...classesDuring.filter(i => !originalClasses.includes(i)));
-          el.classList.remove(...classesEnd.filter(i => !originalClasses.includes(i)));
-        }
-  
-      };
-      transition(el, stages);
-    }
-    function transition(el, stages) {
-      stages.start();
-      stages.during();
-      requestAnimationFrame(() => {
-        // Note: Safari's transitionDuration property will list out comma separated transition durations
-        // for every single transition property. Let's grab the first one and call it a day.
-        let duration = Number(getComputedStyle(el).transitionDuration.replace(/,.*/, '').replace('s', '')) * 1000;
-        stages.show();
-        requestAnimationFrame(() => {
-          stages.end();
-          setTimeout(() => {
-            stages.hide(); // Adding an "isConnected" check, in case the callback
-            // removed the element from the DOM.
-  
-            if (el.isConnected) {
-              stages.cleanup();
-            }
-          }, duration);
-        });
-      });
-    }
-    function isNumeric(subject) {
-      return !isNaN(subject);
-    }
-  
-    function handleForDirective(component, el, expression, initialUpdate, extraVars) {
-      if (el.tagName.toLowerCase() !== 'template') console.warn('Alpine: [x-for] directive should only be added to <template> tags.');
-      const {
-        single,
-        bunch,
-        iterator1,
-        iterator2
-      } = parseFor(expression);
-      var items;
-      const ifAttr = getXAttrs(el, 'if')[0];
-  
-      if (ifAttr && !component.evaluateReturnExpression(el, ifAttr.expression)) {
-        // If there is an "x-if" attribute in conjunction with an x-for,
-        // AND x-if resolves to false, just pretend the x-for is
-        // empty, effectively hiding it.
-        items = [];
-      } else {
-        items = component.evaluateReturnExpression(el, bunch, extraVars);
-      } // As we walk the array, we'll also walk the DOM (updating/creating as we go).
-  
-  
-      var previousEl = el;
-      items.forEach((i, index, group) => {
-        const currentKey = getThisIterationsKeyFromTemplateTag(component, el, single, iterator1, iterator2, i, index, group);
-        let currentEl = previousEl.nextElementSibling; // Let's check and see if the x-for has already generated an element last time it ran.
-  
-        if (currentEl && currentEl.__x_for_key !== undefined) {
-          // If the the key's don't match.
-          if (currentEl.__x_for_key !== currentKey) {
-            // We'll look ahead to see if we can find it further down.
-            var tmpCurrentEl = currentEl;
-  
-            while (tmpCurrentEl) {
-              // If we found it later in the DOM.
-              if (tmpCurrentEl.__x_for_key === currentKey) {
-                // Move it to where it's supposed to be in the DOM.
-                el.parentElement.insertBefore(tmpCurrentEl, currentEl); // And set it as the current element as if we just created it.
-  
-                currentEl = tmpCurrentEl;
-                break;
-              }
-  
-              tmpCurrentEl = tmpCurrentEl.nextElementSibling && tmpCurrentEl.nextElementSibling.__x_for_key !== undefined ? tmpCurrentEl.nextElementSibling : false;
-            }
-          } // Temporarily remove the key indicator to allow the normal "updateElements" to work
-  
-  
-          delete currentEl.__x_for_key;
-          let xForVars = {};
-          xForVars[single] = i;
-          if (iterator1) xForVars[iterator1] = index;
-          if (iterator2) xForVars[iterator2] = group;
-          currentEl.__x_for = xForVars;
-          component.updateElements(currentEl, () => {
-            return currentEl.__x_for;
-          });
-        } else {
-          // There are no more .__x_for_key elements, meaning the page is first loading, OR, there are
-          // extra items in the array that need to be added as new elements.
-          // Let's create a clone from the template.
-          const clone = document.importNode(el.content, true);
-          if (clone.childElementCount !== 1) console.warn('Alpine: <template> tag with [x-for] encountered with multiple element roots. Make sure <template> only has a single child node.'); // Insert it where we are in the DOM.
-  
-          el.parentElement.insertBefore(clone, currentEl); // Set it as the current element.
-  
-          currentEl = previousEl.nextElementSibling; // And transition it in if it's not the first page load.
-  
-          transitionIn(currentEl, () => {}, initialUpdate); // Now, let's walk the new DOM node and initialize everything,
-          // including new nested components.
-          // Note we are resolving the "extraData" alias stuff from the dom element value so that it's
-          // always up to date for listener handlers that don't get re-registered.
-  
-          let xForVars = {};
-          xForVars[single] = i;
-          if (iterator1) xForVars[iterator1] = index;
-          if (iterator2) xForVars[iterator2] = group;
-          currentEl.__x_for = xForVars;
-          component.initializeElements(currentEl, () => {
-            return currentEl.__x_for;
-          });
-        }
-  
-        currentEl.__x_for_key = currentKey;
-        previousEl = currentEl;
-      }); // Now that we've added/updated/moved all the elements for the current state of the loop.
-      // Anything left over, we can get rid of.
-  
-      var nextElementFromOldLoop = previousEl.nextElementSibling && previousEl.nextElementSibling.__x_for_key !== undefined ? previousEl.nextElementSibling : false;
-  
-      while (nextElementFromOldLoop) {
-        const nextElementFromOldLoopImmutable = nextElementFromOldLoop;
-        const nextSibling = nextElementFromOldLoop.nextElementSibling;
-        transitionOut(nextElementFromOldLoop, () => {
-          nextElementFromOldLoopImmutable.remove();
-        });
-        nextElementFromOldLoop = nextSibling && nextSibling.__x_for_key !== undefined ? nextSibling : false;
-      }
-    } // This was taken from VueJS 2.* core. Thanks Vue!
-  
-    function parseFor(expression) {
-      const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
-      const stripParensRE = /^\(|\)$/g;
-      const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
-      const inMatch = expression.match(forAliasRE);
-      if (!inMatch) return;
-      const res = {};
-      res.bunch = inMatch[2].trim();
-      const single = inMatch[1].trim().replace(stripParensRE, '');
-      const iteratorMatch = single.match(forIteratorRE);
-  
-      if (iteratorMatch) {
-        res.single = single.replace(forIteratorRE, '').trim();
-        res.iterator1 = iteratorMatch[1].trim();
-  
-        if (iteratorMatch[2]) {
-          res.iterator2 = iteratorMatch[2].trim();
-        }
-      } else {
-        res.single = single;
-      }
-  
-      return res;
-    }
-  
-    function getThisIterationsKeyFromTemplateTag(component, el, single, iterator1, iterator2, i, index, group) {
-      const keyAttr = getXAttrs(el, 'bind').filter(attr => attr.value === 'key')[0];
-      let keyAliases = {
-        [single]: i
-      };
-      if (iterator1) keyAliases[iterator1] = index;
-      if (iterator2) keyAliases[iterator2] = group;
-      return keyAttr ? component.evaluateReturnExpression(el, keyAttr.expression, () => keyAliases) : index;
-    }
-  
-    function handleAttributeBindingDirective(component, el, attrName, expression, extraVars) {
-      var value = component.evaluateReturnExpression(el, expression, extraVars);
-  
-      if (attrName === 'value') {
-        // If nested model key is undefined, set the default value to empty string.
-        if (value === undefined && expression.match(/\./).length) {
-          value = '';
-        }
-  
-        if (el.type === 'radio') {
-          el.checked = el.value == value;
-        } else if (el.type === 'checkbox') {
-          if (Array.isArray(value)) {
-            // I'm purposely not using Array.includes here because it's
-            // strict, and because of Numeric/String mis-casting, I
-            // want the "includes" to be "fuzzy".
-            let valueFound = false;
-            value.forEach(val => {
-              if (val == el.value) {
-                valueFound = true;
-              }
-            });
-            el.checked = valueFound;
-          } else {
-            el.checked = !!value;
-          } // If we are explicitly binding a string to the :value, set the string,
-          // If the value is a boolean, leave it alone, it will be set to "on"
-          // automatically.
-  
-  
-          if (typeof value === 'string') {
-            el.value = value;
-          }
-        } else if (el.tagName === 'SELECT') {
-          updateSelect(el, value);
-        } else {
-          el.value = value;
-        }
-      } else if (attrName === 'class') {
-        if (Array.isArray(value)) {
-          const originalClasses = el.__x_original_classes || [];
-          el.setAttribute('class', arrayUnique(originalClasses.concat(value)).join(' '));
-        } else if (typeof value === 'object') {
-          Object.keys(value).forEach(classNames => {
-            if (value[classNames]) {
-              classNames.split(' ').forEach(className => el.classList.add(className));
-            } else {
-              classNames.split(' ').forEach(className => el.classList.remove(className));
-            }
-          });
-        } else {
-          const originalClasses = el.__x_original_classes || [];
-          const newClasses = value.split(' ');
-          el.setAttribute('class', arrayUnique(originalClasses.concat(newClasses)).join(' '));
-        }
-      } else if (isBooleanAttr(attrName)) {
-        // Boolean attributes have to be explicitly added and removed, not just set.
-        if (!!value) {
-          el.setAttribute(attrName, '');
-        } else {
-          el.removeAttribute(attrName);
-        }
-      } else {
-        el.setAttribute(attrName, value);
-      }
-    }
-  
-    function updateSelect(el, value) {
-      const arrayWrappedValue = [].concat(value).map(value => {
-        return value + '';
-      });
-      Array.from(el.options).forEach(option => {
-        option.selected = arrayWrappedValue.includes(option.value || option.text);
-      });
-    }
-  
-    function handleShowDirective(component, el, value, modifiers, initialUpdate = false) {
-      const hide = () => {
-        el.style.display = 'none';
-      };
-  
-      const show = () => {
-        if (el.style.length === 1 && el.style.display === 'none') {
-          el.removeAttribute('style');
-        } else {
-          el.style.removeProperty('display');
-        }
-      };
-  
-      if (initialUpdate === true) {
-        if (value) {
-          show();
-        } else {
-          hide();
-        }
-  
-        return;
-      }
-  
-      const handle = resolve => {
-        if (!value) {
-          if (el.style.display !== 'none') {
-            transitionOut(el, () => {
-              resolve(() => {
-                hide();
-              });
-            });
-          } else {
-            resolve(() => {});
-          }
-        } else {
-          if (el.style.display !== '') {
-            transitionIn(el, () => {
-              show();
-            });
-          } // Resolve immediately, only hold up parent `x-show`s for hidin.
-  
-  
-          resolve(() => {});
-        }
-      }; // The working of x-show is a bit complex because we need to
-      // wait for any child transitions to finish before hiding
-      // some element. Also, this has to be done recursively.
-      // If x-show.immediate, foregoe the waiting.
-  
-  
-      if (modifiers.includes('immediate')) {
-        handle(finish => finish());
-        return;
-      } // x-show is encountered during a DOM tree walk. If an element
-      // we encounter is NOT a child of another x-show element we
-      // can execute the previous x-show stack (if one exists).
-  
-  
-      if (component.showDirectiveLastElement && !component.showDirectiveLastElement.contains(el)) {
-        component.executeAndClearRemainingShowDirectiveStack();
-      } // We'll push the handler onto a stack to be handled later.
-  
-  
-      component.showDirectiveStack.push(handle);
-      component.showDirectiveLastElement = el;
-    }
-  
-    function handleIfDirective(component, el, expressionResult, initialUpdate, extraVars) {
-      if (el.nodeName.toLowerCase() !== 'template') console.warn(`Alpine: [x-if] directive should only be added to <template> tags. See https://github.com/alpinejs/alpine#x-if`);
-      const elementHasAlreadyBeenAdded = el.nextElementSibling && el.nextElementSibling.__x_inserted_me === true;
-  
-      if (expressionResult && !elementHasAlreadyBeenAdded) {
-        const clone = document.importNode(el.content, true);
-        el.parentElement.insertBefore(clone, el.nextElementSibling);
-        el.nextElementSibling.__x_inserted_me = true;
-        transitionIn(el.nextElementSibling, () => {}, initialUpdate);
-        component.initializeElements(el.nextElementSibling, extraVars);
-      } else if (!expressionResult && elementHasAlreadyBeenAdded) {
-        transitionOut(el.nextElementSibling, () => {
-          el.nextElementSibling.remove();
-        }, initialUpdate);
-      }
-    }
-  
-    function registerListener(component, el, event, modifiers, expression, extraVars = {}) {
-      if (modifiers.includes('away')) {
-        let handler = e => {
-          // Don't do anything if the click came form the element or within it.
-          if (el.contains(e.target)) return; // Don't do anything if this element isn't currently visible.
-  
-          if (el.offsetWidth < 1 && el.offsetHeight < 1) return; // Now that we are sure the element is visible, AND the click
-          // is from outside it, let's run the expression.
-  
-          runListenerHandler(component, expression, e, extraVars);
-  
-          if (modifiers.includes('once')) {
-            document.removeEventListener(event, handler);
-          }
-        }; // Listen for this event at the root level.
-  
-  
-        document.addEventListener(event, handler);
-      } else {
-        let listenerTarget = modifiers.includes('window') ? window : modifiers.includes('document') ? document : el;
-  
-        let handler = e => {
-          // Remove this global event handler if the element that declared it
-          // has been removed. It's now stale.
-          if (listenerTarget === window || listenerTarget === document) {
-            if (!document.body.contains(el)) {
-              listenerTarget.removeEventListener(event, handler);
-              return;
-            }
-          }
-  
-          if (isKeyEvent(event)) {
-            if (isListeningForASpecificKeyThatHasntBeenPressed(e, modifiers)) {
-              return;
-            }
-          }
-  
-          if (modifiers.includes('prevent')) e.preventDefault();
-          if (modifiers.includes('stop')) e.stopPropagation();
-          const returnValue = runListenerHandler(component, expression, e, extraVars);
-  
-          if (returnValue === false) {
-            e.preventDefault();
-          } else {
-            if (modifiers.includes('once')) {
-              listenerTarget.removeEventListener(event, handler);
-            }
-          }
-        };
-  
-        if (modifiers.includes('debounce')) {
-          let nextModifier = modifiers[modifiers.indexOf('debounce') + 1] || 'invalid-wait';
-          let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250;
-          handler = debounce(handler, wait);
-        }
-  
-        listenerTarget.addEventListener(event, handler);
-      }
-    }
-  
-    function runListenerHandler(component, expression, e, extraVars) {
-      return component.evaluateCommandExpression(e.target, expression, () => {
-        return _objectSpread2({}, extraVars(), {
-          '$event': e
-        });
-      });
-    }
-  
-    function isKeyEvent(event) {
-      return ['keydown', 'keyup'].includes(event);
-    }
-  
-    function isListeningForASpecificKeyThatHasntBeenPressed(e, modifiers) {
-      let keyModifiers = modifiers.filter(i => {
-        return !['window', 'document', 'prevent', 'stop'].includes(i);
-      });
-  
-      if (keyModifiers.includes('debounce')) {
-        let debounceIndex = keyModifiers.indexOf('debounce');
-        keyModifiers.splice(debounceIndex, isNumeric((keyModifiers[debounceIndex + 1] || 'invalid-wait').split('ms')[0]) ? 2 : 1);
-      } // If no modifier is specified, we'll call it a press.
-  
-  
-      if (keyModifiers.length === 0) return false; // If one is passed, AND it matches the key pressed, we'll call it a press.
-  
-      if (keyModifiers.length === 1 && keyModifiers[0] === keyToModifier(e.key)) return false; // The user is listening for key combinations.
-  
-      const systemKeyModifiers = ['ctrl', 'shift', 'alt', 'meta', 'cmd', 'super'];
-      const selectedSystemKeyModifiers = systemKeyModifiers.filter(modifier => keyModifiers.includes(modifier));
-      keyModifiers = keyModifiers.filter(i => !selectedSystemKeyModifiers.includes(i));
-  
-      if (selectedSystemKeyModifiers.length > 0) {
-        const activelyPressedKeyModifiers = selectedSystemKeyModifiers.filter(modifier => {
-          // Alias "cmd" and "super" to "meta"
-          if (modifier === 'cmd' || modifier === 'super') modifier = 'meta';
-          return e[`${modifier}Key`];
-        }); // If all the modifiers selected are pressed, ...
-  
-        if (activelyPressedKeyModifiers.length === selectedSystemKeyModifiers.length) {
-          // AND the remaining key is pressed as well. It's a press.
-          if (keyModifiers[0] === keyToModifier(e.key)) return false;
-        }
-      } // We'll call it NOT a valid keypress.
-  
-  
-      return true;
-    }
-  
-    function keyToModifier(key) {
-      switch (key) {
-        case '/':
-          return 'slash';
-  
-        case ' ':
-        case 'Spacebar':
-          return 'space';
-  
-        default:
-          return kebabCase(key);
-      }
-    }
-  
-    function registerModelListener(component, el, modifiers, expression, extraVars) {
-      // If the element we are binding to is a select, a radio, or checkbox
-      // we'll listen for the change event instead of the "input" event.
-      var event = el.tagName.toLowerCase() === 'select' || ['checkbox', 'radio'].includes(el.type) || modifiers.includes('lazy') ? 'change' : 'input';
-      const listenerExpression = `${expression} = rightSideOfExpression($event, ${expression})`;
-      registerListener(component, el, event, modifiers, listenerExpression, () => {
-        return _objectSpread2({}, extraVars(), {
-          rightSideOfExpression: generateModelAssignmentFunction(el, modifiers, expression)
-        });
-      });
-    }
-  
-    function generateModelAssignmentFunction(el, modifiers, expression) {
-      if (el.type === 'radio') {
-        // Radio buttons only work properly when they share a name attribute.
-        // People might assume we take care of that for them, because
-        // they already set a shared "x-model" attribute.
-        if (!el.hasAttribute('name')) el.setAttribute('name', expression);
-      }
-  
-      return (event, currentValue) => {
-        // Check for event.detail due to an issue where IE11 handles other events as a CustomEvent.
-        if (event instanceof CustomEvent && event.detail) {
-          return event.detail;
-        } else if (el.type === 'checkbox') {
-          // If the data we are binding to is an array, toggle it's value inside the array.
-          if (Array.isArray(currentValue)) {
-            return event.target.checked ? currentValue.concat([event.target.value]) : currentValue.filter(i => i !== event.target.value);
-          } else {
-            return event.target.checked;
-          }
-        } else if (el.tagName.toLowerCase() === 'select' && el.multiple) {
-          return modifiers.includes('number') ? Array.from(event.target.selectedOptions).map(option => {
-            const rawValue = option.value || option.text;
-            const number = rawValue ? parseFloat(rawValue) : null;
-            return isNaN(number) ? rawValue : number;
-          }) : Array.from(event.target.selectedOptions).map(option => {
-            return option.value || option.text;
-          });
-        } else {
-          const rawValue = event.target.value;
-          const number = rawValue ? parseFloat(rawValue) : null;
-          return modifiers.includes('number') ? isNaN(number) ? rawValue : number : modifiers.includes('trim') ? rawValue.trim() : rawValue;
-        }
-      };
-    }
-  
-    /**
-     * Copyright (C) 2017 salesforce.com, inc.
-     */
-    const { isArray } = Array;
-    const { getPrototypeOf, create: ObjectCreate, defineProperty: ObjectDefineProperty, defineProperties: ObjectDefineProperties, isExtensible, getOwnPropertyDescriptor, getOwnPropertyNames, getOwnPropertySymbols, preventExtensions, hasOwnProperty, } = Object;
-    const { push: ArrayPush, concat: ArrayConcat, map: ArrayMap, } = Array.prototype;
-    function isUndefined(obj) {
-        return obj === undefined;
-    }
-    function isFunction(obj) {
-        return typeof obj === 'function';
-    }
-    function isObject(obj) {
-        return typeof obj === 'object';
-    }
-    const proxyToValueMap = new WeakMap();
-    function registerProxy(proxy, value) {
-        proxyToValueMap.set(proxy, value);
-    }
-    const unwrap = (replicaOrAny) => proxyToValueMap.get(replicaOrAny) || replicaOrAny;
-  
-    function wrapValue(membrane, value) {
-        return membrane.valueIsObservable(value) ? membrane.getProxy(value) : value;
-    }
-    /**
-     * Unwrap property descriptors will set value on original descriptor
-     * We only need to unwrap if value is specified
-     * @param descriptor external descrpitor provided to define new property on original value
-     */
-    function unwrapDescriptor(descriptor) {
-        if (hasOwnProperty.call(descriptor, 'value')) {
-            descriptor.value = unwrap(descriptor.value);
-        }
-        return descriptor;
-    }
-    function lockShadowTarget(membrane, shadowTarget, originalTarget) {
-        const targetKeys = ArrayConcat.call(getOwnPropertyNames(originalTarget), getOwnPropertySymbols(originalTarget));
-        targetKeys.forEach((key) => {
-            let descriptor = getOwnPropertyDescriptor(originalTarget, key);
-            // We do not need to wrap the descriptor if configurable
-            // Because we can deal with wrapping it when user goes through
-            // Get own property descriptor. There is also a chance that this descriptor
-            // could change sometime in the future, so we can defer wrapping
-            // until we need to
-            if (!descriptor.configurable) {
-                descriptor = wrapDescriptor(membrane, descriptor, wrapValue);
-            }
-            ObjectDefineProperty(shadowTarget, key, descriptor);
-        });
-        preventExtensions(shadowTarget);
-    }
-    class ReactiveProxyHandler {
-        constructor(membrane, value) {
-            this.originalTarget = value;
-            this.membrane = membrane;
-        }
-        get(shadowTarget, key) {
-            const { originalTarget, membrane } = this;
-            const value = originalTarget[key];
-            const { valueObserved } = membrane;
-            valueObserved(originalTarget, key);
-            return membrane.getProxy(value);
-        }
-        set(shadowTarget, key, value) {
-            const { originalTarget, membrane: { valueMutated } } = this;
-            const oldValue = originalTarget[key];
-            if (oldValue !== value) {
-                originalTarget[key] = value;
-                valueMutated(originalTarget, key);
-            }
-            else if (key === 'length' && isArray(originalTarget)) {
-                // fix for issue #236: push will add the new index, and by the time length
-                // is updated, the internal length is already equal to the new length value
-                // therefore, the oldValue is equal to the value. This is the forking logic
-                // to support this use case.
-                valueMutated(originalTarget, key);
-            }
-            return true;
-        }
-        deleteProperty(shadowTarget, key) {
-            const { originalTarget, membrane: { valueMutated } } = this;
-            delete originalTarget[key];
-            valueMutated(originalTarget, key);
-            return true;
-        }
-        apply(shadowTarget, thisArg, argArray) {
-            /* No op */
-        }
-        construct(target, argArray, newTarget) {
-            /* No op */
-        }
-        has(shadowTarget, key) {
-            const { originalTarget, membrane: { valueObserved } } = this;
-            valueObserved(originalTarget, key);
-            return key in originalTarget;
-        }
-        ownKeys(shadowTarget) {
-            const { originalTarget } = this;
-            return ArrayConcat.call(getOwnPropertyNames(originalTarget), getOwnPropertySymbols(originalTarget));
-        }
-        isExtensible(shadowTarget) {
-            const shadowIsExtensible = isExtensible(shadowTarget);
-            if (!shadowIsExtensible) {
-                return shadowIsExtensible;
-            }
-            const { originalTarget, membrane } = this;
-            const targetIsExtensible = isExtensible(originalTarget);
-            if (!targetIsExtensible) {
-                lockShadowTarget(membrane, shadowTarget, originalTarget);
-            }
-            return targetIsExtensible;
-        }
-        setPrototypeOf(shadowTarget, prototype) {
-        }
-        getPrototypeOf(shadowTarget) {
-            const { originalTarget } = this;
-            return getPrototypeOf(originalTarget);
-        }
-        getOwnPropertyDescriptor(shadowTarget, key) {
-            const { originalTarget, membrane } = this;
-            const { valueObserved } = this.membrane;
-            // keys looked up via hasOwnProperty need to be reactive
-            valueObserved(originalTarget, key);
-            let desc = getOwnPropertyDescriptor(originalTarget, key);
-            if (isUndefined(desc)) {
-                return desc;
-            }
-            const shadowDescriptor = getOwnPropertyDescriptor(shadowTarget, key);
-            if (!isUndefined(shadowDescriptor)) {
-                return shadowDescriptor;
-            }
-            // Note: by accessing the descriptor, the key is marked as observed
-            // but access to the value, setter or getter (if available) cannot observe
-            // mutations, just like regular methods, in which case we just do nothing.
-            desc = wrapDescriptor(membrane, desc, wrapValue);
-            if (!desc.configurable) {
-                // If descriptor from original target is not configurable,
-                // We must copy the wrapped descriptor over to the shadow target.
-                // Otherwise, proxy will throw an invariant error.
-                // This is our last chance to lock the value.
-                // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor#Invariants
-                ObjectDefineProperty(shadowTarget, key, desc);
-            }
-            return desc;
-        }
-        preventExtensions(shadowTarget) {
-            const { originalTarget, membrane } = this;
-            lockShadowTarget(membrane, shadowTarget, originalTarget);
-            preventExtensions(originalTarget);
-            return true;
-        }
-        defineProperty(shadowTarget, key, descriptor) {
-            const { originalTarget, membrane } = this;
-            const { valueMutated } = membrane;
-            const { configurable } = descriptor;
-            // We have to check for value in descriptor
-            // because Object.freeze(proxy) calls this method
-            // with only { configurable: false, writeable: false }
-            // Additionally, method will only be called with writeable:false
-            // if the descriptor has a value, as opposed to getter/setter
-            // So we can just check if writable is present and then see if
-            // value is present. This eliminates getter and setter descriptors
-            if (hasOwnProperty.call(descriptor, 'writable') && !hasOwnProperty.call(descriptor, 'value')) {
-                const originalDescriptor = getOwnPropertyDescriptor(originalTarget, key);
-                descriptor.value = originalDescriptor.value;
-            }
-            ObjectDefineProperty(originalTarget, key, unwrapDescriptor(descriptor));
-            if (configurable === false) {
-                ObjectDefineProperty(shadowTarget, key, wrapDescriptor(membrane, descriptor, wrapValue));
-            }
-            valueMutated(originalTarget, key);
-            return true;
-        }
-    }
-  
-    function wrapReadOnlyValue(membrane, value) {
-        return membrane.valueIsObservable(value) ? membrane.getReadOnlyProxy(value) : value;
-    }
-    class ReadOnlyHandler {
-        constructor(membrane, value) {
-            this.originalTarget = value;
-            this.membrane = membrane;
-        }
-        get(shadowTarget, key) {
-            const { membrane, originalTarget } = this;
-            const value = originalTarget[key];
-            const { valueObserved } = membrane;
-            valueObserved(originalTarget, key);
-            return membrane.getReadOnlyProxy(value);
-        }
-        set(shadowTarget, key, value) {
-            return false;
-        }
-        deleteProperty(shadowTarget, key) {
-            return false;
-        }
-        apply(shadowTarget, thisArg, argArray) {
-            /* No op */
-        }
-        construct(target, argArray, newTarget) {
-            /* No op */
-        }
-        has(shadowTarget, key) {
-            const { originalTarget, membrane: { valueObserved } } = this;
-            valueObserved(originalTarget, key);
-            return key in originalTarget;
-        }
-        ownKeys(shadowTarget) {
-            const { originalTarget } = this;
-            return ArrayConcat.call(getOwnPropertyNames(originalTarget), getOwnPropertySymbols(originalTarget));
-        }
-        setPrototypeOf(shadowTarget, prototype) {
-        }
-        getOwnPropertyDescriptor(shadowTarget, key) {
-            const { originalTarget, membrane } = this;
-            const { valueObserved } = membrane;
-            // keys looked up via hasOwnProperty need to be reactive
-            valueObserved(originalTarget, key);
-            let desc = getOwnPropertyDescriptor(originalTarget, key);
-            if (isUndefined(desc)) {
-                return desc;
-            }
-            const shadowDescriptor = getOwnPropertyDescriptor(shadowTarget, key);
-            if (!isUndefined(shadowDescriptor)) {
-                return shadowDescriptor;
-            }
-            // Note: by accessing the descriptor, the key is marked as observed
-            // but access to the value or getter (if available) cannot be observed,
-            // just like regular methods, in which case we just do nothing.
-            desc = wrapDescriptor(membrane, desc, wrapReadOnlyValue);
-            if (hasOwnProperty.call(desc, 'set')) {
-                desc.set = undefined; // readOnly membrane does not allow setters
-            }
-            if (!desc.configurable) {
-                // If descriptor from original target is not configurable,
-                // We must copy the wrapped descriptor over to the shadow target.
-                // Otherwise, proxy will throw an invariant error.
-                // This is our last chance to lock the value.
-                // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor#Invariants
-                ObjectDefineProperty(shadowTarget, key, desc);
-            }
-            return desc;
-        }
-        preventExtensions(shadowTarget) {
-            return false;
-        }
-        defineProperty(shadowTarget, key, descriptor) {
-            return false;
-        }
-    }
-    function createShadowTarget(value) {
-        let shadowTarget = undefined;
-        if (isArray(value)) {
-            shadowTarget = [];
-        }
-        else if (isObject(value)) {
-            shadowTarget = {};
-        }
-        return shadowTarget;
-    }
-    const ObjectDotPrototype = Object.prototype;
-    function defaultValueIsObservable(value) {
-        // intentionally checking for null
-        if (value === null) {
-            return false;
-        }
-        // treat all non-object types, including undefined, as non-observable values
-        if (typeof value !== 'object') {
-            return false;
-        }
-        if (isArray(value)) {
-            return true;
-        }
-        const proto = getPrototypeOf(value);
-        return (proto === ObjectDotPrototype || proto === null || getPrototypeOf(proto) === null);
-    }
-    const defaultValueObserved = (obj, key) => {
-        /* do nothing */
-    };
-    const defaultValueMutated = (obj, key) => {
-        /* do nothing */
-    };
-    const defaultValueDistortion = (value) => value;
-    function wrapDescriptor(membrane, descriptor, getValue) {
-        const { set, get } = descriptor;
-        if (hasOwnProperty.call(descriptor, 'value')) {
-            descriptor.value = getValue(membrane, descriptor.value);
-        }
-        else {
-            if (!isUndefined(get)) {
-                descriptor.get = function () {
-                    // invoking the original getter with the original target
-                    return getValue(membrane, get.call(unwrap(this)));
-                };
-            }
-            if (!isUndefined(set)) {
-                descriptor.set = function (value) {
-                    // At this point we don't have a clear indication of whether
-                    // or not a valid mutation will occur, we don't have the key,
-                    // and we are not sure why and how they are invoking this setter.
-                    // Nevertheless we preserve the original semantics by invoking the
-                    // original setter with the original target and the unwrapped value
-                    set.call(unwrap(this), membrane.unwrapProxy(value));
-                };
-            }
-        }
-        return descriptor;
-    }
-    class ReactiveMembrane {
-        constructor(options) {
-            this.valueDistortion = defaultValueDistortion;
-            this.valueMutated = defaultValueMutated;
-            this.valueObserved = defaultValueObserved;
-            this.valueIsObservable = defaultValueIsObservable;
-            this.objectGraph = new WeakMap();
-            if (!isUndefined(options)) {
-                const { valueDistortion, valueMutated, valueObserved, valueIsObservable } = options;
-                this.valueDistortion = isFunction(valueDistortion) ? valueDistortion : defaultValueDistortion;
-                this.valueMutated = isFunction(valueMutated) ? valueMutated : defaultValueMutated;
-                this.valueObserved = isFunction(valueObserved) ? valueObserved : defaultValueObserved;
-                this.valueIsObservable = isFunction(valueIsObservable) ? valueIsObservable : defaultValueIsObservable;
-            }
-        }
-        getProxy(value) {
-            const unwrappedValue = unwrap(value);
-            const distorted = this.valueDistortion(unwrappedValue);
-            if (this.valueIsObservable(distorted)) {
-                const o = this.getReactiveState(unwrappedValue, distorted);
-                // when trying to extract the writable version of a readonly
-                // we return the readonly.
-                return o.readOnly === value ? value : o.reactive;
-            }
-            return distorted;
-        }
-        getReadOnlyProxy(value) {
-            value = unwrap(value);
-            const distorted = this.valueDistortion(value);
-            if (this.valueIsObservable(distorted)) {
-                return this.getReactiveState(value, distorted).readOnly;
-            }
-            return distorted;
-        }
-        unwrapProxy(p) {
-            return unwrap(p);
-        }
-        getReactiveState(value, distortedValue) {
-            const { objectGraph, } = this;
-            let reactiveState = objectGraph.get(distortedValue);
-            if (reactiveState) {
-                return reactiveState;
-            }
-            const membrane = this;
-            reactiveState = {
-                get reactive() {
-                    const reactiveHandler = new ReactiveProxyHandler(membrane, distortedValue);
-                    // caching the reactive proxy after the first time it is accessed
-                    const proxy = new Proxy(createShadowTarget(distortedValue), reactiveHandler);
-                    registerProxy(proxy, value);
-                    ObjectDefineProperty(this, 'reactive', { value: proxy });
-                    return proxy;
-                },
-                get readOnly() {
-                    const readOnlyHandler = new ReadOnlyHandler(membrane, distortedValue);
-                    // caching the readOnly proxy after the first time it is accessed
-                    const proxy = new Proxy(createShadowTarget(distortedValue), readOnlyHandler);
-                    registerProxy(proxy, value);
-                    ObjectDefineProperty(this, 'readOnly', { value: proxy });
-                    return proxy;
-                }
-            };
-            objectGraph.set(distortedValue, reactiveState);
-            return reactiveState;
-        }
-    }
-    /** version: 0.26.0 */
-  
-    function wrap(data, mutationCallback) {
-  
-      let membrane = new ReactiveMembrane({
-        valueMutated(target, key) {
-          mutationCallback(target, key);
-        }
-  
-      });
-      return {
-        data: membrane.getProxy(data),
-        membrane: membrane
-      };
-    }
-    function unwrap$1(membrane, observable) {
-      let unwrappedData = membrane.unwrapProxy(observable);
-      let copy = {};
-      Object.keys(unwrappedData).forEach(key => {
-        if (['$el', '$refs', '$nextTick', '$watch'].includes(key)) return;
-        copy[key] = unwrappedData[key];
-      });
-      return copy;
-    }
-  
-    class Component {
-      constructor(el, seedDataForCloning = null) {
-        this.$el = el;
-        const dataAttr = this.$el.getAttribute('x-data');
-        const dataExpression = dataAttr === '' ? '{}' : dataAttr;
-        const initExpression = this.$el.getAttribute('x-init');
-        this.unobservedData = seedDataForCloning ? seedDataForCloning : saferEval(dataExpression, {});
-        // Construct a Proxy-based observable. This will be used to handle reactivity.
-  
-        let {
-          membrane,
-          data
-        } = this.wrapDataInObservable(this.unobservedData);
-        this.$data = data;
-        this.membrane = membrane; // After making user-supplied data methods reactive, we can now add
-        // our magic properties to the original data for access.
-  
-        this.unobservedData.$el = this.$el;
-        this.unobservedData.$refs = this.getRefsProxy();
-        this.nextTickStack = [];
-  
-        this.unobservedData.$nextTick = callback => {
-          this.nextTickStack.push(callback);
-        };
-  
-        this.watchers = {};
-  
-        this.unobservedData.$watch = (property, callback) => {
-          if (!this.watchers[property]) this.watchers[property] = [];
-          this.watchers[property].push(callback);
-        };
-  
-        this.showDirectiveStack = [];
-        this.showDirectiveLastElement;
-        var initReturnedCallback; // If x-init is present AND we aren't cloning (skip x-init on clone)
-  
-        if (initExpression && !seedDataForCloning) {
-          // We want to allow data manipulation, but not trigger DOM updates just yet.
-          // We haven't even initialized the elements with their Alpine bindings. I mean c'mon.
-          this.pauseReactivity = true;
-          initReturnedCallback = this.evaluateReturnExpression(this.$el, initExpression);
-          this.pauseReactivity = false;
-        } // Register all our listeners and set all our attribute bindings.
-  
-  
-        this.initializeElements(this.$el); // Use mutation observer to detect new elements being added within this component at run-time.
-        // Alpine's just so darn flexible amirite?
-  
-        this.listenForNewElementsToInitialize();
-  
-        if (typeof initReturnedCallback === 'function') {
-          // Run the callback returned form the "x-init" hook to allow the user to do stuff after
-          // Alpine's got it's grubby little paws all over everything.
-          initReturnedCallback.call(this.$data);
-        }
-      }
-  
-      getUnobservedData() {
-        return unwrap$1(this.membrane, this.$data);
-      }
-  
-      wrapDataInObservable(data) {
-        var self = this;
-        let updateDom = debounce(function () {
-          self.updateElements(self.$el);
-        }, 0);
-        return wrap(data, (target, key) => {
-          if (self.watchers[key]) {
-            // If there's a watcher for this specific key, run it.
-            self.watchers[key].forEach(callback => callback(target[key]));
-          } else {
-            // Let's walk through the watchers with "dot-notation" (foo.bar) and see
-            // if this mutation fits any of them.
-            Object.keys(self.watchers).filter(i => i.includes('.')).forEach(fullDotNotationKey => {
-              let dotNotationParts = fullDotNotationKey.split('.'); // If this dot-notation watcher's last "part" doesn't match the current
-              // key, then skip it early for performance reasons.
-  
-              if (key !== dotNotationParts[dotNotationParts.length - 1]) return; // Now, walk through the dot-notation "parts" recursively to find
-              // a match, and call the watcher if one's found.
-  
-              dotNotationParts.reduce((comparisonData, part) => {
-                if (Object.is(target, comparisonData)) {
-                  // Run the watchers.
-                  self.watchers[fullDotNotationKey].forEach(callback => callback(target[key]));
-                }
-  
-                return comparisonData[part];
-              }, self.getUnobservedData());
-            });
-          } // Don't react to data changes for cases like the `x-created` hook.
-  
-  
-          if (self.pauseReactivity) return;
-          updateDom();
-        });
-      }
-  
-      walkAndSkipNestedComponents(el, callback, initializeComponentCallback = () => {}) {
-        walk(el, el => {
-          // We've hit a component.
-          if (el.hasAttribute('x-data')) {
-            // If it's not the current one.
-            if (!el.isSameNode(this.$el)) {
-              // Initialize it if it's not.
-              if (!el.__x) initializeComponentCallback(el); // Now we'll let that sub-component deal with itself.
-  
-              return false;
-            }
-          }
-  
-          return callback(el);
-        });
-      }
-  
-      initializeElements(rootEl, extraVars = () => {}) {
-        this.walkAndSkipNestedComponents(rootEl, el => {
-          // Don't touch spawns from for loop
-          if (el.__x_for_key !== undefined) return false;
-          this.initializeElement(el, extraVars);
-        }, el => {
-          el.__x = new Component(el);
-        });
-        this.executeAndClearRemainingShowDirectiveStack(); // Walk through the $nextTick stack and clear it as we go.
-  
-        while (this.nextTickStack.length > 0) {
-          this.nextTickStack.shift()();
-        }
-      }
-  
-      initializeElement(el, extraVars) {
-        // To support class attribute merging, we have to know what the element's
-        // original class attribute looked like for reference.
-        if (el.hasAttribute('class') && getXAttrs(el).length > 0) {
-          el.__x_original_classes = el.getAttribute('class').split(' ');
-        }
-  
-        this.registerListeners(el, extraVars);
-        this.resolveBoundAttributes(el, true, extraVars);
-      }
-  
-      updateElements(rootEl, extraVars = () => {}) {
-        this.walkAndSkipNestedComponents(rootEl, el => {
-          // Don't touch spawns from for loop (and check if the root is actually a for loop in a parent, don't skip it.)
-          if (el.__x_for_key !== undefined && !el.isSameNode(this.$el)) return false;
-          this.updateElement(el, extraVars);
-        }, el => {
-          el.__x = new Component(el);
-        });
-        this.executeAndClearRemainingShowDirectiveStack(); // Walk through the $nextTick stack and clear it as we go.
-  
-        while (this.nextTickStack.length > 0) {
-          this.nextTickStack.shift()();
-        }
-      }
-  
-      executeAndClearRemainingShowDirectiveStack() {
-        // The goal here is to start all the x-show transitions
-        // and build a nested promise chain so that elements
-        // only hide when the children are finished hiding.
-        this.showDirectiveStack.reverse().map(thing => {
-          return new Promise(resolve => {
-            thing(finish => {
-              resolve(finish);
-            });
-          });
-        }).reduce((nestedPromise, promise) => {
-          return nestedPromise.then(() => {
-            return promise.then(finish => finish());
-          });
-        }, Promise.resolve(() => {})); // We've processed the handler stack. let's clear it.
-  
-        this.showDirectiveStack = [];
-        this.showDirectiveLastElement = undefined;
-      }
-  
-      updateElement(el, extraVars) {
-        this.resolveBoundAttributes(el, false, extraVars);
-      }
-  
-      registerListeners(el, extraVars) {
-        getXAttrs(el).forEach(({
-          type,
-          value,
-          modifiers,
-          expression
-        }) => {
-          switch (type) {
-            case 'on':
-              registerListener(this, el, value, modifiers, expression, extraVars);
-              break;
-  
-            case 'model':
-              registerModelListener(this, el, modifiers, expression, extraVars);
-              break;
-          }
-        });
-      }
-  
-      resolveBoundAttributes(el, initialUpdate = false, extraVars) {
-        let attrs = getXAttrs(el);
-        attrs.forEach(({
-          type,
-          value,
-          modifiers,
-          expression
-        }) => {
-          switch (type) {
-            case 'model':
-              handleAttributeBindingDirective(this, el, 'value', expression, extraVars);
-              break;
-  
-            case 'bind':
-              // The :key binding on an x-for is special, ignore it.
-              if (el.tagName.toLowerCase() === 'template' && value === 'key') return;
-              handleAttributeBindingDirective(this, el, value, expression, extraVars);
-              break;
-  
-            case 'text':
-              var output = this.evaluateReturnExpression(el, expression, extraVars); // If nested model key is undefined, set the default value to empty string.
-  
-              if (output === undefined && expression.match(/\./).length) {
-                output = '';
-              }
-  
-              el.innerText = output;
-              break;
-  
-            case 'html':
-              el.innerHTML = this.evaluateReturnExpression(el, expression, extraVars);
-              break;
-  
-            case 'show':
-              var output = this.evaluateReturnExpression(el, expression, extraVars);
-              handleShowDirective(this, el, output, modifiers, initialUpdate);
-              break;
-  
-            case 'if':
-              // If this element also has x-for on it, don't process x-if.
-              // We will let the "x-for" directive handle the "if"ing.
-              if (attrs.filter(i => i.type === 'for').length > 0) return;
-              var output = this.evaluateReturnExpression(el, expression, extraVars);
-              handleIfDirective(this, el, output, initialUpdate, extraVars);
-              break;
-  
-            case 'for':
-              handleForDirective(this, el, expression, initialUpdate, extraVars);
-              break;
-  
-            case 'cloak':
-              el.removeAttribute('x-cloak');
-              break;
-          }
-        });
-      }
-  
-      evaluateReturnExpression(el, expression, extraVars = () => {}) {
-        return saferEval(expression, this.$data, _objectSpread2({}, extraVars(), {
-          $dispatch: this.getDispatchFunction(el)
-        }));
-      }
-  
-      evaluateCommandExpression(el, expression, extraVars = () => {}) {
-        return saferEvalNoReturn(expression, this.$data, _objectSpread2({}, extraVars(), {
-          $dispatch: this.getDispatchFunction(el)
-        }));
-      }
-  
-      getDispatchFunction(el) {
-        return (event, detail = {}) => {
-          el.dispatchEvent(new CustomEvent(event, {
-            detail,
-            bubbles: true
-          }));
-        };
-      }
-  
-      listenForNewElementsToInitialize() {
-        const targetNode = this.$el;
-        const observerOptions = {
-          childList: true,
-          attributes: true,
-          subtree: true
-        };
-        const observer = new MutationObserver(mutations => {
-          for (let i = 0; i < mutations.length; i++) {
-            // Filter out mutations triggered from child components.
-            const closestParentComponent = mutations[i].target.closest('[x-data]');
-            if (!(closestParentComponent && closestParentComponent.isSameNode(this.$el))) return;
-  
-            if (mutations[i].type === 'attributes' && mutations[i].attributeName === 'x-data') {
-              const rawData = saferEval(mutations[i].target.getAttribute('x-data'), {});
-              Object.keys(rawData).forEach(key => {
-                if (this.$data[key] !== rawData[key]) {
-                  this.$data[key] = rawData[key];
-                }
-              });
-            }
-  
-            if (mutations[i].addedNodes.length > 0) {
-              mutations[i].addedNodes.forEach(node => {
-                if (node.nodeType !== 1 || node.__x_inserted_me) return;
-  
-                if (node.matches('[x-data]')) {
-                  node.__x = new Component(node);
-                  return;
-                }
-  
-                this.initializeElements(node);
-              });
-            }
-          }
-        });
-        observer.observe(targetNode, observerOptions);
-      }
-  
-      getRefsProxy() {
-        var self = this;
-        var refObj = {};
-        // One of the goals of this is to not hold elements in memory, but rather re-evaluate
-        // the DOM when the system needs something from it. This way, the framework is flexible and
-        // friendly to outside DOM changes from libraries like Vue/Livewire.
-        // For this reason, I'm using an "on-demand" proxy to fake a "$refs" object.
-  
-        return new Proxy(refObj, {
-          get(object, property) {
-            if (property === '$isAlpineProxy') return true;
-            var ref; // We can't just query the DOM because it's hard to filter out refs in
-            // nested components.
-  
-            self.walkAndSkipNestedComponents(self.$el, el => {
-              if (el.hasAttribute('x-ref') && el.getAttribute('x-ref') === property) {
-                ref = el;
-              }
-            });
-            return ref;
-          }
-  
-        });
-      }
-  
-    }
-  
-    const Alpine = {
-      start: async function start() {
-        if (!isTesting()) {
-          await domReady();
-        }
-  
-        this.discoverComponents(el => {
-          this.initializeComponent(el);
-        }); // It's easier and more performant to just support Turbolinks than listen
-        // to MutationObserver mutations at the document level.
-  
-        document.addEventListener("turbolinks:load", () => {
-          this.discoverUninitializedComponents(el => {
-            this.initializeComponent(el);
-          });
-        });
-        this.listenForNewUninitializedComponentsAtRunTime(el => {
-          this.initializeComponent(el);
-        });
-      },
-      discoverComponents: function discoverComponents(callback) {
-        const rootEls = document.querySelectorAll('[x-data]');
-        rootEls.forEach(rootEl => {
-          callback(rootEl);
-        });
-      },
-      discoverUninitializedComponents: function discoverUninitializedComponents(callback, el = null) {
-        const rootEls = (el || document).querySelectorAll('[x-data]');
-        Array.from(rootEls).filter(el => el.__x === undefined).forEach(rootEl => {
-          callback(rootEl);
-        });
-      },
-      listenForNewUninitializedComponentsAtRunTime: function listenForNewUninitializedComponentsAtRunTime(callback) {
-        const targetNode = document.querySelector('body');
-        const observerOptions = {
-          childList: true,
-          attributes: true,
-          subtree: true
-        };
-        const observer = new MutationObserver(mutations => {
-          for (let i = 0; i < mutations.length; i++) {
-            if (mutations[i].addedNodes.length > 0) {
-              mutations[i].addedNodes.forEach(node => {
-                // Discard non-element nodes (like line-breaks)
-                if (node.nodeType !== 1) return; // Discard any changes happening within an existing component.
-                // They will take care of themselves.
-  
-                if (node.parentElement && node.parentElement.closest('[x-data]')) return;
-                this.discoverUninitializedComponents(el => {
-                  this.initializeComponent(el);
-                }, node.parentElement);
-              });
-            }
-          }
-        });
-        observer.observe(targetNode, observerOptions);
-      },
-      initializeComponent: function initializeComponent(el) {
-        if (!el.__x) {
-          el.__x = new Component(el);
-        }
-      },
-      clone: function clone(component, newEl) {
-        if (!newEl.__x) {
-          newEl.__x = new Component(newEl, component.getUnobservedData());
-        }
-      }
-    };
-  
-    if (!isTesting()) {
-      window.Alpine = Alpine;
-  
-      if (window.deferLoadingAlpine) {
-        window.deferLoadingAlpine(function () {
-          window.Alpine.start();
-        });
-      } else {
-        window.Alpine.start();
-      }
-    }
-  
-    return Alpine;
-  
-  })));
-  
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/layout/app.blade.php b/resources/views/portal/ninja2020/layout/app.blade.php
index 8f7436444768..f8b4c41bbebb 100644
--- a/resources/views/portal/ninja2020/layout/app.blade.php
+++ b/resources/views/portal/ninja2020/layout/app.blade.php
@@ -49,7 +49,7 @@
 
         <!-- Scripts -->
         <script src="{{ mix('js/app.js') }}" defer></script>
-        <script src="{{ asset('js/vendor/alpinejs/alpine.js') }}" defer></script>
+        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.x/dist/alpine.min.js" defer></script>
 
         <!-- Fonts -->
         <link rel="dns-prefetch" href="https://fonts.gstatic.com">
diff --git a/resources/views/portal/ninja2020/layout/clean.blade.php b/resources/views/portal/ninja2020/layout/clean.blade.php
index df7c8bed0bf0..800436c9db6d 100644
--- a/resources/views/portal/ninja2020/layout/clean.blade.php
+++ b/resources/views/portal/ninja2020/layout/clean.blade.php
@@ -48,7 +48,7 @@
 
         <!-- Scripts -->
         <script src="{{ mix('js/app.js') }}" defer></script>
-        <script src="{{ asset('js/vendor/alpinejs/alpine.js') }}" defer></script>
+        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.x/dist/alpine.min.js" defer></script>
 
         <!-- Fonts -->
         <link rel="dns-prefetch" href="https://fonts.gstatic.com">
diff --git a/resources/views/themes/ninja2020/view_entity/index.blade.php b/resources/views/themes/ninja2020/view_entity/index.blade.php
index 19bfaa2e76f3..574a04668be6 100644
--- a/resources/views/themes/ninja2020/view_entity/index.blade.php
+++ b/resources/views/themes/ninja2020/view_entity/index.blade.php
@@ -3,7 +3,7 @@
 @push('head')
     <meta name="pdf-url" content="{{ asset($entity->pdf_file_path()) }}">
     <script src="{{ asset('js/vendor/pdf.js/pdf.min.js') }}"></script>
-    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.x/dist/alpine.min.js" defer></script>
 @endpush
 
 @section('body')