diff --git a/themes/default/public/css/tailwindcss.css b/themes/default/public/css/tailwindcss.css
new file mode 100644
index 0000000..fcfa39f
--- /dev/null
+++ b/themes/default/public/css/tailwindcss.css
@@ -0,0 +1,1142 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+
+/**
+ * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
+ * A thin layer on top of normalize.css that provides a starting point more
+ * suitable for web applications.
+ */
+
+/**
+ * Removes the default spacing and border for appropriate elements.
+ */
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+button {
+  background-color: transparent;
+  background-image: none;
+  padding: 0;
+}
+
+/**
+ * Work around a Firefox/IE bug where the transparent `button` background
+ * results in a loss of the default `button` focus styles.
+ */
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * Tailwind custom reset styles
+ */
+
+/**
+ * 1. Use the user's configured `sans` font-family (with Tailwind's default
+ *    sans-serif font stack as a fallback) as a sane default.
+ * 2. Use Tailwind's default "normal" line-height so the user isn't forced
+ *    to override it to ensure consistency even when using the default theme.
+ */
+
+html {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
+  line-height: 1.5; /* 2 */
+}
+
+/**
+ * 1. Prevent padding and border from affecting element width.
+ *
+ *    We used to set this in the html element and inherit from
+ *    the parent element for everything else. This caused issues
+ *    in shadow-dom-enhanced elements like <details> where the content
+ *    is wrapped by a div with box-sizing set to `content-box`.
+ *
+ *    https://github.com/mozdevs/cssremedy/issues/4
+ *
+ *
+ * 2. Allow adding a border to an element by just adding a border-width.
+ *
+ *    By default, the way the browser specifies that an element should have no
+ *    border is by setting it's border-style to `none` in the user-agent
+ *    stylesheet.
+ *
+ *    In order to easily add borders to elements by just setting the `border-width`
+ *    property, we change the default border-style for all elements to `solid`, and
+ *    use border-width to hide them instead. This way our `border` utilities only
+ *    need to set the `border-width` property instead of the entire `border`
+ *    shorthand, making our border utilities much more straightforward to compose.
+ *
+ *    https://github.com/tailwindcss/tailwindcss/pull/116
+ */
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: #e2e8f0; /* 2 */
+}
+
+/*
+ * Ensure horizontal rules are visible by default
+ */
+
+hr {
+  border-top-width: 1px;
+}
+
+/**
+ * Undo the `border-style: none` reset that Normalize applies to images so that
+ * our `border-{width}` utilities have the expected effect.
+ *
+ * The Normalize reset is unnecessary for us since we default the border-width
+ * to 0 on all elements.
+ *
+ * https://github.com/tailwindcss/tailwindcss/issues/362
+ */
+
+img {
+  border-style: solid;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+  color: #a0aec0;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  color: #a0aec0;
+}
+
+input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+  color: #a0aec0;
+}
+
+input::-ms-input-placeholder, textarea::-ms-input-placeholder {
+  color: #a0aec0;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: #a0aec0;
+}
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/**
+ * Reset links to optimize for opt-in styling instead of
+ * opt-out.
+ */
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/**
+ * Reset form element properties that are easy to forget to
+ * style explicitly so you don't inadvertently introduce
+ * styles that deviate from your design system. These styles
+ * supplement a partial reset that is already applied by
+ * normalize.css.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  padding: 0;
+  line-height: inherit;
+  color: inherit;
+}
+
+/**
+ * Use the configured 'mono' font family for elements that
+ * are expected to be rendered with a monospace font, falling
+ * back to the system monospace stack if there is no configured
+ * 'mono' font family.
+ */
+
+pre,
+code,
+kbd,
+samp {
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+/**
+ * Make replaced elements `display: block` by default as that's
+ * the behavior you want almost all of the time. Inspired by
+ * CSS Remedy, with `svg` added as well.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/14
+ */
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+
+/**
+ * Constrain images and videos to the parent width and preserve
+ * their instrinsic aspect ratio.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/14
+ */
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Recreate some normal files */
+
+h1 {
+  font-size: 1.5rem;
+}
+
+h2 {
+  font-size: 1.25rem;
+}
+
+h3 {
+  font-size: 1.125rem;
+}
+
+/*tailwind start components */
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+/*tailwind end components */
+
+/* Default */
+
+body {
+  background-size: cover;
+  background-image: repeating-linear-gradient(135deg, #00000033, #00000033 63%, transparent 63%, transparent),
+                      url('../img/backgrounds/only-komona.jpg');
+  --text-opacity: 1;
+  color: #fff;
+  color: rgba(255, 255, 255, var(--text-opacity));
+  min-height: 100vh;
+}
+
+body > * {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+body.rtl {
+  direction: rtl;
+}
+
+a {
+  text-decoration: underline;
+  -webkit-text-decoration-style: dotted;
+          text-decoration-style: dotted;
+}
+
+select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  display: block;
+  appearance: none;
+  width: 100%;
+  border-width: 1px;
+  --border-opacity: 1;
+  border-color: #edf2f7;
+  border-color: rgba(237, 242, 247, var(--border-opacity));
+  border-radius: 0.25rem;
+}
+
+/* Navbar */
+
+.navbar {
+  --bg-opacity: 1;
+  background-color: #2d3748;
+  background-color: rgba(45, 55, 72, var(--bg-opacity));
+  --bg-opacity: 0.75;
+  width: 100%;
+  font-size: 1rem;
+  text-transform: uppercase;
+}
+
+.navbar .navbrand {
+  font-weight: 700;
+}
+
+.navbar ul li.navbrand * {
+  border-style: none;
+}
+
+.navbar ul li {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.navbar ul li * {
+  vertical-align: middle;
+  text-decoration: none;
+  border-style: solid;
+  --border-opacity: 1;
+  border-color: #cbd5e0;
+  border-color: rgba(203, 213, 224, var(--border-opacity));
+  border-bottom-width: 4px;
+}
+
+.navbar ul li.active {
+  font-weight: 700;
+}
+
+.navbar ul li.active * {
+  border-style: solid;
+  --border-opacity: 1;
+  border-color: #4fd1c5;
+  border-color: rgba(79, 209, 197, var(--border-opacity));
+  border-bottom-width: 4px;
+  text-decoration: none;
+}
+
+.navbar ul li.lang-dropdown {
+  position: relative;
+}
+
+.navbar ul li.lang-dropdown * {
+  --border-opacity: 0;
+}
+
+.lang-dropdown span,
+.lang-dropdown li {
+  cursor: pointer;
+}
+
+.lang-dropdown span {
+  display: ruby;
+}
+
+.navbar ul li.lang-dropdown ul {
+  --bg-opacity: 1;
+  background-color: #2d3748;
+  background-color: rgba(45, 55, 72, var(--bg-opacity));
+  --bg-opacity: 1;
+  position: absolute;
+  margin-top: 0.25rem;
+  white-space: nowrap;
+}
+
+/* Not index page */
+
+.block-div {
+  --bg-opacity: 1;
+  background-color: #1a202c;
+  background-color: rgba(26, 32, 44, var(--bg-opacity));
+  --bg-opacity: 0.75;
+  margin-top: 1rem;
+  padding: 1rem;
+  width: auto;
+  margin-left: auto;
+  margin-right: auto;
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  max-width: 60rem;
+}
+
+.block-div a {
+  --text-opacity: 1;
+  color: #b2f5ea;
+  color: rgba(178, 245, 234, var(--text-opacity));
+}
+
+.block-div a:visited {
+  --text-opacity: 1;
+  color: #b794f4;
+  color: rgba(183, 148, 244, var(--text-opacity));
+}
+
+/* My files page */
+
+.block-div.myfiles hr {
+  margin-bottom: 0.5rem;
+}
+
+.block-div.myfiles {
+  line-height: 1.25;
+}
+
+.files-buttons {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  grid-gap: 0.5rem;
+  gap: 0.5rem;
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .files-buttons {
+    margin-top: 1rem;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.files-buttons .btn {
+  width: 100%;
+}
+
+/* Index page */
+
+.upload {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  grid-gap: 0.5rem;
+  gap: 0.5rem;
+}
+
+@media (min-width: 1024px) {
+  .upload {
+    margin-top: 1rem;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1280px) {
+  .upload {
+    margin-top: 1rem;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .upload #results {
+    grid-column: span 2 / span 2;
+  }
+}
+
+.upload .upload-form {
+  --bg-opacity: 1;
+  background-color: #1a202c;
+  background-color: rgba(26, 32, 44, var(--bg-opacity));
+  --bg-opacity: 0.75;
+  border-radius: 0.375rem;
+  padding: 1rem;
+}
+
+@media (min-width: 768px) {
+  .upload .upload-form {
+    line-height: 1.625;
+  }
+}
+
+@media (min-width: 1024px) {
+  .upload .upload-form {
+    line-height: 2;
+  }
+}
+
+.upload .upload-form select {
+  line-height: 1.5;
+}
+
+.upload .upload-form input {
+  padding-left: 0.5rem;
+  line-height: 1.625;
+}
+
+.upload .upload-form select,
+.upload .upload-form input,
+.upload .upload-form {
+  --bg-opacity: 1;
+  background-color: #4a5568;
+  background-color: rgba(74, 85, 104, var(--bg-opacity));
+  --bg-opacity: 0.75;
+}
+
+.upload #results h1 {
+  font-size: 1.25rem;
+  text-align: center;
+}
+
+.upload .upload-form .input-field {
+  position: relative;
+}
+
+.upload .upload-form [type="checkbox"] {
+  width: 1rem;
+  height: 1rem;
+}
+
+.upload #files {
+  text-align: center;
+  margin-top: 1rem;
+  padding: 1rem;
+  border-width: 2px;
+  --border-opacity: 1;
+  border-color: #edf2f7;
+  border-color: rgba(237, 242, 247, var(--border-opacity));
+  border-style: dashed;
+}
+
+.upload #results {
+  --bg-opacity: 1;
+  background-color: #4a5568;
+  background-color: rgba(74, 85, 104, var(--bg-opacity));
+  --bg-opacity: 0.75;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+}
+
+/* Buttons */
+
+.btn,
+.btn a {
+  --text-opacity: 1 !important;
+  color: #fff !important;
+  color: rgba(255, 255, 255, var(--text-opacity)) !important;
+  text-align: center !important;
+  text-decoration: none !important;
+}
+
+.btn {
+  background-color: transparent;
+  font-weight: 700;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border-width: 2px;
+  --border-opacity: 1;
+  border-color: #38b2ac;
+  border-color: rgba(56, 178, 172, var(--border-opacity));
+  border-radius: 0.25rem;
+  --text-opacity: 1 !important;
+  color: #fff !important;
+  color: rgba(255, 255, 255, var(--text-opacity)) !important;
+  text-align: center !important;
+  text-decoration: none !important;
+}
+
+.btn:hover {
+  --bg-opacity: 1;
+  background-color: #285e61;
+  background-color: rgba(40, 94, 97, var(--bg-opacity));
+  --bg-opacity: 0.75;
+  --border-opacity: 1;
+  border-color: #285e61;
+  border-color: rgba(40, 94, 97, var(--border-opacity));
+}
+
+.btn.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Icons */
+
+svg {
+  height: 1rem;
+  width: 1rem;
+  --text-opacity: 1;
+  color: #fff;
+  color: rgba(255, 255, 255, var(--text-opacity));
+}
+
+svg.icon-hamburger {
+  height: 2rem;
+  width: 2rem;
+}
+
+svg.icon-infos {
+  --text-opacity: 1;
+  color: #b2f5ea;
+  color: rgba(178, 245, 234, var(--text-opacity));
+  display: inline-block;
+}
+
+svg.icon-upload {
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 9999px;
+  border-width: 1px;
+  --border-opacity: 1;
+  border-color: #edf2f7;
+  border-color: rgba(237, 242, 247, var(--border-opacity));
+  border-width: 8px;
+  height: 8rem;
+  width: 8rem;
+  --text-opacity: 1;
+  color: #edf2f7;
+  color: rgba(237, 242, 247, var(--text-opacity));
+}
+
+/* Cards */
+
+.card {
+  padding: 1rem;
+  margin-top: 1rem;
+}
+
+.card.mini {
+  padding-left: 0.25rem;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.card.error {
+  --bg-opacity: 1;
+  background-color: #fffaf0;
+  background-color: rgba(255, 250, 240, var(--bg-opacity));
+  --text-opacity: 1;
+  color: #c05621;
+  color: rgba(192, 86, 33, var(--text-opacity));
+  border-left-width: 4px;
+  --border-opacity: 1;
+  border-color: #ed8936;
+  border-color: rgba(237, 137, 54, var(--border-opacity));
+}
+
+.card.info {
+  --bg-opacity: 1;
+  background-color: #ebf8ff;
+  background-color: rgba(235, 248, 255, var(--bg-opacity));
+  --text-opacity: 1;
+  color: #2b6cb0;
+  color: rgba(43, 108, 176, var(--text-opacity));
+  border-left-width: 4px;
+  --border-opacity: 1;
+  border-color: #4299e1;
+  border-color: rgba(66, 153, 225, var(--border-opacity));
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: flex;
+}
+
+.table {
+  display: table;
+}
+
+.hidden {
+  display: none;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.inset-y-0 {
+  top: 0;
+  bottom: 0;
+}
+
+.right-0 {
+  right: 0;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-gray-700 {
+  --text-opacity: 1;
+  color: #4a5568;
+  color: rgba(74, 85, 104, var(--text-opacity));
+}
+
+.w-full {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .sm\:hidden {
+    display: none;
+  }
+}
diff --git a/themes/default/public/css/tailwindcss.min.css b/themes/default/public/css/tailwindcss.min.css
new file mode 100644
index 0000000..d177f6f
--- /dev/null
+++ b/themes/default/public/css/tailwindcss.min.css
@@ -0,0 +1,2 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+html{-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{margin:0;background-size:cover;background-image:repeating-linear-gradient(135deg,#00000033,#00000033 63%,transparent 63%,transparent),url(../img/backgrounds/only-komona.jpg);--text-opacity: 1;color:#fff;color:rgba(255,255,255,var(--text-opacity));min-height:100vh}details,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-size:1em}a{background-color:transparent;color:inherit;text-decoration:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted}abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:solid}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{margin:0;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}ol,ul{list-style:none;margin:0;padding:0}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e2e8f0}hr{border-top-width:1px}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#a0aec0}input::-moz-placeholder,textarea::-moz-placeholder{color:#a0aec0}input:-ms-input-placeholder,input::-ms-input-placeholder,textarea:-ms-input-placeholder,textarea::-ms-input-placeholder{color:#a0aec0}input::placeholder,textarea::placeholder{color:#a0aec0}.lang-dropdown li,.lang-dropdown span,[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}.container,select{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}body>*{padding-left:1rem;padding-right:1rem}body.rtl{direction:rtl}select{-webkit-appearance:none;-moz-appearance:none;display:block;appearance:none;border-width:1px;--border-opacity: 1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity));border-radius:.25rem}.navbar,.navbar ul li.lang-dropdown ul{background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity));--bg-opacity: 1}.navbar{--bg-opacity: 0.75;width:100%;font-size:1rem;text-transform:uppercase}.navbar .navbrand,.navbar ul li.active{font-weight:700}.navbar ul li.navbrand *{border-style:none}.navbar ul li{padding:.25rem .5rem}.navbar ul li *,.navbar ul li.active *{border-style:solid;--border-opacity: 1;border-bottom-width:4px;text-decoration:none}.navbar ul li *{vertical-align:middle;border-color:#cbd5e0;border-color:rgba(203,213,224,var(--border-opacity))}.navbar ul li.active *{border-color:#4fd1c5;border-color:rgba(79,209,197,var(--border-opacity))}.navbar ul li.lang-dropdown,.upload .upload-form .input-field{position:relative}.navbar ul li.lang-dropdown *{--border-opacity: 0}.lang-dropdown span{display:ruby}.navbar ul li.lang-dropdown ul{position:absolute;margin-top:.25rem;white-space:nowrap}.block-div,.files-buttons{margin-top:1rem;display:grid;grid-template-columns:repeat(1,minmax(0,1fr))}.block-div{--bg-opacity: 1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity));--bg-opacity: 0.75;padding:1rem;width:auto;margin-left:auto;margin-right:auto;max-width:60rem}.block-div a{--text-opacity: 1;color:#b2f5ea;color:rgba(178,245,234,var(--text-opacity))}.block-div a:visited{--text-opacity: 1;color:#b794f4;color:rgba(183,148,244,var(--text-opacity))}.block-div.myfiles hr{margin-bottom:.5rem}.block-div.myfiles{line-height:1.25}.files-buttons{margin-bottom:1rem;grid-gap:.5rem;gap:.5rem;text-align:center}@media (min-width:1024px){.files-buttons{margin-top:1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}.files-buttons .btn{width:100%}.upload{margin-top:1rem;margin-bottom:1rem;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));grid-gap:.5rem;gap:.5rem}@media (min-width:1024px){.upload{margin-top:1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1280px){.upload{margin-top:1rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.upload #results{grid-column:span 2/span 2}}.upload .upload-form{border-radius:.375rem;padding:1rem}@media (min-width:768px){.upload .upload-form{line-height:1.625}}@media (min-width:1024px){.upload .upload-form{line-height:2}}.upload .upload-form select{line-height:1.5;--bg-opacity: 1;background-color:#4a5568;background-color:rgba(74,85,104,var(--bg-opacity));--bg-opacity: 0.75}.upload .upload-form input{padding-left:.5rem;line-height:1.625}.upload #results h1{font-size:1.25rem;text-align:center}.upload .upload-form [type=checkbox],svg{width:1rem;height:1rem}.upload #files{text-align:center;margin-top:1rem;padding:1rem;border-width:2px;--border-opacity: 1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity));border-style:dashed}.upload #results,.upload .upload-form,.upload .upload-form input{--bg-opacity: 1;background-color:#4a5568;background-color:rgba(74,85,104,var(--bg-opacity));--bg-opacity: 0.75}.upload #results{border-radius:.375rem;padding:1rem;margin-left:2.5rem;margin-right:2.5rem}.btn a{--text-opacity: 1 !important;color:#fff!important;color:rgba(255,255,255,var(--text-opacity))!important;text-align:center!important;text-decoration:none!important}.btn,.btn:hover{--border-opacity: 1}.btn{background-color:transparent;font-weight:700;padding:.25rem .5rem;border-width:2px;border-color:#38b2ac;border-color:rgba(56,178,172,var(--border-opacity));border-radius:.25rem;--text-opacity: 1 !important;color:#fff!important;color:rgba(255,255,255,var(--text-opacity))!important;text-align:center!important;text-decoration:none!important}.btn:hover{--bg-opacity: 1;background-color:#285e61;background-color:rgba(40,94,97,var(--bg-opacity));--bg-opacity: 0.75;border-color:#285e61;border-color:rgba(40,94,97,var(--border-opacity))}.btn.disabled{opacity:.5;cursor:not-allowed}svg{--text-opacity: 1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}svg.icon-hamburger{height:2rem;width:2rem}svg.icon-infos{--text-opacity: 1;color:#b2f5ea;color:rgba(178,245,234,var(--text-opacity));display:inline-block}svg.icon-upload{margin-left:auto;margin-right:auto;border-radius:9999px;--border-opacity: 1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity));border-width:8px;height:8rem;width:8rem;--text-opacity: 1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.card{padding:1rem;margin-top:1rem}.card.mini{padding-left:.25rem;padding-right:0;padding-top:0;padding-bottom:0;margin-top:.25rem;margin-bottom:.25rem}.card.error,.card.info{--bg-opacity: 1;background-color:#fffaf0;background-color:rgba(255,250,240,var(--bg-opacity));--text-opacity: 1;color:#c05621;color:rgba(192,86,33,var(--text-opacity));border-left-width:4px;--border-opacity: 1;border-color:#ed8936;border-color:rgba(237,137,54,var(--border-opacity))}.card.info{background-color:#ebf8ff;background-color:rgba(235,248,255,var(--bg-opacity));color:#2b6cb0;color:rgba(43,108,176,var(--text-opacity));border-color:#4299e1;border-color:rgba(66,153,225,var(--border-opacity))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.table{display:table}.hidden{display:none}.items-center{align-items:center}.mt-2{margin-top:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0;bottom:0}.right-0{right:0}.text-left{text-align:left}.text-gray-700{--text-opacity: 1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.w-full{width:100%}@media (min-width:640px){.sm\:hidden{display:none}}
\ No newline at end of file
diff --git a/themes/default/public/img/backgrounds/episode2.jpg b/themes/default/public/img/backgrounds/episode2.jpg
new file mode 100644
index 0000000..b6e336c
Binary files /dev/null and b/themes/default/public/img/backgrounds/episode2.jpg differ
diff --git a/themes/default/public/img/backgrounds/episode27.jpg b/themes/default/public/img/backgrounds/episode27.jpg
new file mode 100644
index 0000000..1932f59
Binary files /dev/null and b/themes/default/public/img/backgrounds/episode27.jpg differ
diff --git a/themes/default/public/img/backgrounds/komona-sunset.jpg b/themes/default/public/img/backgrounds/komona-sunset.jpg
new file mode 100644
index 0000000..cb505a6
Binary files /dev/null and b/themes/default/public/img/backgrounds/komona-sunset.jpg differ
diff --git a/themes/default/public/img/backgrounds/only-komona.jpg b/themes/default/public/img/backgrounds/only-komona.jpg
new file mode 100644
index 0000000..2adc3c4
Binary files /dev/null and b/themes/default/public/img/backgrounds/only-komona.jpg differ
diff --git a/themes/default/public/js/alpine.js b/themes/default/public/js/alpine.js
new file mode 100644
index 0000000..14371a2
--- /dev/null
+++ b/themes/default/public/js/alpine.js
@@ -0,0 +1,1721 @@
+(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) {
+    return Array.from(new Set(array));
+  }
+  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, templateEl, expression, initialUpdate, extraVars) {
+    warnIfNotTemplateTag(templateEl);
+    let iteratorNames = parseForExpression(expression);
+    let items = evaluateItemsAndReturnEmptyIfXIfIsPresentAndFalseOnElement(component, templateEl, iteratorNames, extraVars); // As we walk the array, we'll also walk the DOM (updating/creating as we go).
+
+    let currentEl = templateEl;
+    items.forEach((item, index) => {
+      let iterationScopeVariables = getIterationScopeVariables(iteratorNames, item, index, items, extraVars());
+      let currentKey = generateKeyForIteration(component, templateEl, index, iterationScopeVariables);
+      let nextEl = currentEl.nextElementSibling; // If there's no previously x-for processed element ahead, add one.
+
+      if (!nextEl || nextEl.__x_for_key === undefined) {
+        nextEl = addElementInLoopAfterCurrentEl(templateEl, currentEl); // And transition it in if it's not the first page load.
+
+        transitionIn(nextEl, () => {}, initialUpdate);
+        nextEl.__x_for = iterationScopeVariables;
+        component.initializeElements(nextEl, () => nextEl.__x_for);
+      } else {
+        nextEl = lookAheadForMatchingKeyedElementAndMoveItIfFound(nextEl, currentKey); // If we haven't found a matching key, just insert the element at the current position
+
+        if (!nextEl) {
+          nextEl = addElementInLoopAfterCurrentEl(templateEl, currentEl);
+        } // Temporarily remove the key indicator to allow the normal "updateElements" to work
+
+
+        delete nextEl.__x_for_key;
+        nextEl.__x_for = iterationScopeVariables;
+        component.updateElements(nextEl, () => nextEl.__x_for);
+      }
+
+      currentEl = nextEl;
+      currentEl.__x_for_key = currentKey;
+    });
+    removeAnyLeftOverElementsFromPreviousUpdate(currentEl);
+  } // This was taken from VueJS 2.* core. Thanks Vue!
+
+  function parseForExpression(expression) {
+    let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
+    let stripParensRE = /^\(|\)$/g;
+    let forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
+    let inMatch = expression.match(forAliasRE);
+    if (!inMatch) return;
+    let res = {};
+    res.items = inMatch[2].trim();
+    let item = inMatch[1].trim().replace(stripParensRE, '');
+    let iteratorMatch = item.match(forIteratorRE);
+
+    if (iteratorMatch) {
+      res.item = item.replace(forIteratorRE, '').trim();
+      res.index = iteratorMatch[1].trim();
+
+      if (iteratorMatch[2]) {
+        res.collection = iteratorMatch[2].trim();
+      }
+    } else {
+      res.item = item;
+    }
+
+    return res;
+  }
+
+  function getIterationScopeVariables(iteratorNames, item, index, items, extraVars) {
+    // We must create a new object, so each iteration has a new scope
+    let scopeVariables = extraVars ? _objectSpread2({}, extraVars) : {};
+    scopeVariables[iteratorNames.item] = item;
+    if (iteratorNames.index) scopeVariables[iteratorNames.index] = index;
+    if (iteratorNames.collection) scopeVariables[iteratorNames.collection] = items;
+    return scopeVariables;
+  }
+
+  function generateKeyForIteration(component, el, index, iterationScopeVariables) {
+    let bindKeyAttribute = getXAttrs(el, 'bind').filter(attr => attr.value === 'key')[0]; // If the dev hasn't specified a key, just return the index of the iteration.
+
+    if (!bindKeyAttribute) return index;
+    return component.evaluateReturnExpression(el, bindKeyAttribute.expression, () => iterationScopeVariables);
+  }
+
+  function warnIfNotTemplateTag(el) {
+    if (el.tagName.toLowerCase() !== 'template') console.warn('Alpine: [x-for] directive should only be added to <template> tags.');
+  }
+
+  function evaluateItemsAndReturnEmptyIfXIfIsPresentAndFalseOnElement(component, el, iteratorNames, extraVars) {
+    let ifAttribute = getXAttrs(el, 'if')[0];
+
+    if (ifAttribute && !component.evaluateReturnExpression(el, ifAttribute.expression)) {
+      return [];
+    }
+
+    return component.evaluateReturnExpression(el, iteratorNames.items, extraVars);
+  }
+
+  function addElementInLoopAfterCurrentEl(templateEl, currentEl) {
+    let clone = document.importNode(templateEl.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.');
+    currentEl.parentElement.insertBefore(clone, currentEl.nextElementSibling);
+    return currentEl.nextElementSibling;
+  }
+
+  function lookAheadForMatchingKeyedElementAndMoveItIfFound(nextEl, currentKey) {
+    // If the the key's DO match, no need to look ahead.
+    if (nextEl.__x_for_key === currentKey) return nextEl; // If they don't, we'll look ahead for a match.
+    // If we find it, we'll move it to the current position in the loop.
+
+    let tmpNextEl = nextEl;
+
+    while (tmpNextEl) {
+      if (tmpNextEl.__x_for_key === currentKey) {
+        return tmpNextEl.parentElement.insertBefore(tmpNextEl, nextEl);
+      }
+
+      tmpNextEl = tmpNextEl.nextElementSibling && tmpNextEl.nextElementSibling.__x_for_key !== undefined ? tmpNextEl.nextElementSibling : false;
+    }
+  }
+
+  function removeAnyLeftOverElementsFromPreviousUpdate(currentEl) {
+    var nextElementFromOldLoop = currentEl.nextElementSibling && currentEl.nextElementSibling.__x_for_key !== undefined ? currentEl.nextElementSibling : false;
+
+    while (nextElementFromOldLoop) {
+      let nextElementFromOldLoopImmutable = nextElementFromOldLoop;
+      let nextSibling = nextElementFromOldLoop.nextElementSibling;
+      transitionOut(nextElementFromOldLoop, () => {
+        nextElementFromOldLoopImmutable.remove();
+      });
+      nextElementFromOldLoop = nextSibling && nextSibling.__x_for_key !== undefined ? nextSibling : false;
+    }
+  }
+
+  function handleAttributeBindingDirective(component, el, attrName, expression, extraVars, attrType) {
+    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') {
+        // Set radio value from x-bind:value, if no "value" attribute exists.
+        // If there are any initial state values, radio will have a correct
+        // "checked" value since x-bind:value is processed before x-model.
+        if (el.attributes.value === undefined && attrType === 'bind') {
+          el.value = value;
+        } else if (attrType !== 'bind') {
+          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 if (el.type === 'text') {
+        // Cursor position should be restored back to origin due to a safari bug
+        const selectionStart = el.selectionStart;
+        const selectionEnd = el.selectionEnd;
+        const selectionDirection = el.selectionDirection;
+        el.value = value;
+
+        if (el === document.activeElement && selectionStart !== null) {
+          el.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+        }
+      } 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') {
+        // Sorting the keys / class names by their boolean value will ensure that
+        // anything that evaluates to `false` and needs to remove classes is run first.
+        const keysSortedByBooleanValue = Object.keys(value).sort((a, b) => value[a] - value[b]);
+        keysSortedByBooleanValue.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 handleTextDirective(el, output, expression) {
+    // If nested model key is undefined, set the default value to empty string.
+    if (output === undefined && expression.match(/\./).length) {
+      output = '';
+    }
+
+    el.innerText = output;
+  }
+
+  function handleHtmlDirective(component, el, expression, extraVars) {
+    el.innerHTML = component.evaluateReturnExpression(el, expression, extraVars);
+  }
+
+  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);
+      transitionIn(el.nextElementSibling, () => {}, initialUpdate);
+      component.initializeElements(el.nextElementSibling, extraVars);
+      el.nextElementSibling.__x_inserted_me = true;
+    } 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(); // If the .self modifier isn't present, or if it is present and
+        // the target element matches the element we are registering the
+        // event on, run the handler
+
+        if (!modifiers.includes('self') || e.target === el) {
+          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 key && 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 from 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; // Don't touch spawns from if directives
+
+        if (el.__x_inserted_me !== undefined) return false;
+        this.initializeElement(el, extraVars);
+      }, el => {
+        el.__x = new Component(el);
+      });
+      this.executeAndClearRemainingShowDirectiveStack();
+      this.executeAndClearNextTickStack(rootEl);
+    }
+
+    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();
+      this.executeAndClearNextTickStack(rootEl);
+    }
+
+    executeAndClearNextTickStack(el) {
+      // Skip spawns from alpine directives
+      if (el === this.$el) {
+        // 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);
+
+      if (el.type !== undefined && el.type === 'radio') {
+        // If there's an x-model on a radio input, move it to end of attribute list
+        // to ensure that x-bind:value (if present) is processed first.
+        const modelIdx = attrs.findIndex(attr => attr.type === 'model');
+
+        if (modelIdx > -1) {
+          attrs.push(attrs.splice(modelIdx, 1)[0]);
+        }
+      }
+
+      attrs.forEach(({
+        type,
+        value,
+        modifiers,
+        expression
+      }) => {
+        switch (type) {
+          case 'model':
+            handleAttributeBindingDirective(this, el, 'value', expression, extraVars, type);
+            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, type);
+            break;
+
+          case 'text':
+            var output = this.evaluateReturnExpression(el, expression, extraVars);
+            handleTextDirective(el, output, expression);
+            break;
+
+          case 'html':
+            handleHtmlDirective(this, 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))) continue;
+
+          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 = {
+    version: "2.3.3",
+    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;
+
+})));
diff --git a/themes/default/public/js/alpine.min.js b/themes/default/public/js/alpine.min.js
new file mode 100644
index 0000000..1e8a699
--- /dev/null
+++ b/themes/default/public/js/alpine.min.js
@@ -0,0 +1,8 @@
+/**
+ * Minified by jsDelivr using Terser v3.14.1.
+ * Original file: /gh/alpinejs/alpine@2.3.3/dist/alpine.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Alpine=t()}(this,function(){"use strict";function e(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function t(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,i)}return n}function n(n){for(var i=1;i<arguments.length;i++){var r=null!=arguments[i]?arguments[i]:{};i%2?t(Object(r),!0).forEach(function(t){e(n,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):t(Object(r)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(r,e))})}return n}function i(e){return Array.from(new Set(e))}function r(){return navigator.userAgent.includes("Node.js")||navigator.userAgent.includes("jsdom")}function s(e,t){var n;return function(){var i=this,r=arguments;clearTimeout(n),n=setTimeout(function(){n=null,e.apply(i,r)},t)}}function o(e,t,n={}){return new Function(["$data",...Object.keys(n)],`var result; with($data) { result = ${e} }; return result`)(t,...Object.values(n))}const a=/^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)\b/;function l(e){const t=u(e.name);return a.test(t)}function c(e,t){return Array.from(e.attributes).filter(l).map(e=>{const t=u(e.name),n=t.match(a),i=t.match(/:([a-zA-Z\-:]+)/),r=t.match(/\.[^.\]]+(?=[^\]]*$)/g)||[];return{type:n?n[1]:null,value:i?i[1]:null,modifiers:r.map(e=>e.replace(".","")),expression:e.value}}).filter(e=>!t||e.type===t)}function u(e){return e.startsWith("@")?e.replace("@","x-on:"):e.startsWith(":")?e.replace(":","x-bind:"):e}function d(e,t,n=!1){if(n)return t();const i=c(e,"transition"),r=c(e,"show")[0];if(r&&r.modifiers.includes("transition")){let n=r.modifiers;if(n.includes("out")&&!n.includes("in"))return t();const i=n.includes("in")&&n.includes("out");(function(e,t,n){const i={duration:m(t,"duration",150),origin:m(t,"origin","center"),first:{opacity:0,scale:m(t,"scale",95)},second:{opacity:1,scale:100}};p(e,t,n,()=>{},i)})(e,n=i?n.filter((e,t)=>t<n.indexOf("out")):n,t)}else i.length>0?function(e,t,n){const i=(t.find(e=>"enter"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),r=(t.find(e=>"enter-start"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),s=(t.find(e=>"enter-end"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e);h(e,i,r,s,n,()=>{})}(e,i,t):t()}function f(e,t,n=!1){if(n)return t();const i=c(e,"transition"),r=c(e,"show")[0];if(r&&r.modifiers.includes("transition")){let n=r.modifiers;if(n.includes("in")&&!n.includes("out"))return t();const i=n.includes("in")&&n.includes("out");(function(e,t,n,i){const r={duration:n?m(t,"duration",150):m(t,"duration",150)/2,origin:m(t,"origin","center"),first:{opacity:1,scale:100},second:{opacity:0,scale:m(t,"scale",95)}};p(e,t,()=>{},i,r)})(e,n=i?n.filter((e,t)=>t>n.indexOf("out")):n,i,t)}else i.length>0?function(e,t,n){const i=(t.find(e=>"leave"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),r=(t.find(e=>"leave-start"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e),s=(t.find(e=>"leave-end"===e.value)||{expression:""}).expression.split(" ").filter(e=>""!==e);h(e,i,r,s,()=>{},n)}(e,i,t):t()}function m(e,t,n){if(-1===e.indexOf(t))return n;const i=e[e.indexOf(t)+1];if(!i)return n;if("scale"===t&&!b(i))return n;if("duration"===t){let e=i.match(/([0-9]+)ms/);if(e)return e[1]}return"origin"===t&&["top","right","left","center","bottom"].includes(e[e.indexOf(t)+2])?[i,e[e.indexOf(t)+2]].join(" "):i}function p(e,t,n,i,r){const s=e.style.opacity,o=e.style.transform,a=e.style.transformOrigin,l=!t.includes("opacity")&&!t.includes("scale"),c=l||t.includes("opacity"),u=l||t.includes("scale"),d={start(){c&&(e.style.opacity=r.first.opacity),u&&(e.style.transform=`scale(${r.first.scale/100})`)},during(){u&&(e.style.transformOrigin=r.origin),e.style.transitionProperty=[c?"opacity":"",u?"transform":""].join(" ").trim(),e.style.transitionDuration=`${r.duration/1e3}s`,e.style.transitionTimingFunction="cubic-bezier(0.4, 0.0, 0.2, 1)"},show(){n()},end(){c&&(e.style.opacity=r.second.opacity),u&&(e.style.transform=`scale(${r.second.scale/100})`)},hide(){i()},cleanup(){c&&(e.style.opacity=s),u&&(e.style.transform=o),u&&(e.style.transformOrigin=a),e.style.transitionProperty=null,e.style.transitionDuration=null,e.style.transitionTimingFunction=null}};v(e,d)}function h(e,t,n,i,r,s){const o=e.__x_original_classes||[],a={start(){e.classList.add(...n)},during(){e.classList.add(...t)},show(){r()},end(){e.classList.remove(...n.filter(e=>!o.includes(e))),e.classList.add(...i)},hide(){s()},cleanup(){e.classList.remove(...t.filter(e=>!o.includes(e))),e.classList.remove(...i.filter(e=>!o.includes(e)))}};v(e,a)}function v(e,t){t.start(),t.during(),requestAnimationFrame(()=>{let n=1e3*Number(getComputedStyle(e).transitionDuration.replace(/,.*/,"").replace("s",""));t.show(),requestAnimationFrame(()=>{t.end(),setTimeout(()=>{t.hide(),e.isConnected&&t.cleanup()},n)})})}function b(e){return!isNaN(e)}function y(e,t,i,r,s){"template"!==t.tagName.toLowerCase()&&console.warn("Alpine: [x-for] directive should only be added to <template> tags.");let o=function(e){let t=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,n=e.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!n)return;let i={};i.items=n[2].trim();let r=n[1].trim().replace(/^\(|\)$/g,""),s=r.match(t);s?(i.item=r.replace(t,"").trim(),i.index=s[1].trim(),s[2]&&(i.collection=s[2].trim())):i.item=r;return i}(i),a=function(e,t,n,i){let r=c(t,"if")[0];if(r&&!e.evaluateReturnExpression(t,r.expression))return[];return e.evaluateReturnExpression(t,n.items,i)}(e,t,o,s),l=t;a.forEach((i,u)=>{let f=function(e,t,i,r,s){let o=s?n({},s):{};o[e.item]=t,e.index&&(o[e.index]=i);e.collection&&(o[e.collection]=r);return o}(o,i,u,a,s()),m=function(e,t,n,i){let r=c(t,"bind").filter(e=>"key"===e.value)[0];return r?e.evaluateReturnExpression(t,r.expression,()=>i):n}(e,t,u,f),p=l.nextElementSibling;p&&void 0!==p.__x_for_key?((p=function(e,t){if(e.__x_for_key===t)return e;let n=e;for(;n;){if(n.__x_for_key===t)return n.parentElement.insertBefore(n,e);n=!(!n.nextElementSibling||void 0===n.nextElementSibling.__x_for_key)&&n.nextElementSibling}}(p,m))||(p=g(t,l)),delete p.__x_for_key,p.__x_for=f,e.updateElements(p,()=>p.__x_for)):(d(p=g(t,l),()=>{},r),p.__x_for=f,e.initializeElements(p,()=>p.__x_for)),(l=p).__x_for_key=m}),function(e){var t=!(!e.nextElementSibling||void 0===e.nextElementSibling.__x_for_key)&&e.nextElementSibling;for(;t;){let e=t,n=t.nextElementSibling;f(t,()=>{e.remove()}),t=!(!n||void 0===n.__x_for_key)&&n}}(l)}function g(e,t){let n=document.importNode(e.content,!0);return 1!==n.childElementCount&&console.warn("Alpine: <template> tag with [x-for] encountered with multiple element roots. Make sure <template> only has a single child node."),t.parentElement.insertBefore(n,t.nextElementSibling),t.nextElementSibling}function x(e,t,n,r,s,o){var a=e.evaluateReturnExpression(t,r,s);if("value"===n)if(void 0===a&&r.match(/\./).length&&(a=""),"radio"===t.type)void 0===t.attributes.value&&"bind"===o?t.value=a:"bind"!==o&&(t.checked=t.value==a);else if("checkbox"===t.type){if(Array.isArray(a)){let e=!1;a.forEach(n=>{n==t.value&&(e=!0)}),t.checked=e}else t.checked=!!a;"string"==typeof a&&(t.value=a)}else if("SELECT"===t.tagName)!function(e,t){const n=[].concat(t).map(e=>e+"");Array.from(e.options).forEach(e=>{e.selected=n.includes(e.value||e.text)})}(t,a);else if("text"===t.type){const e=t.selectionStart,n=t.selectionEnd,i=t.selectionDirection;t.value=a,t===document.activeElement&&null!==e&&t.setSelectionRange(e,n,i)}else t.value=a;else if("class"===n)if(Array.isArray(a)){const e=t.__x_original_classes||[];t.setAttribute("class",i(e.concat(a)).join(" "))}else if("object"==typeof a){Object.keys(a).sort((e,t)=>a[e]-a[t]).forEach(e=>{a[e]?e.split(" ").forEach(e=>t.classList.add(e)):e.split(" ").forEach(e=>t.classList.remove(e))})}else{const e=t.__x_original_classes||[],n=a.split(" ");t.setAttribute("class",i(e.concat(n)).join(" "))}else!function(e){return["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"].includes(e)}(n)?t.setAttribute(n,a):a?t.setAttribute(n,""):t.removeAttribute(n)}function w(e,t,n,i,r,o={}){if(i.includes("away")){let s=a=>{t.contains(a.target)||t.offsetWidth<1&&t.offsetHeight<1||(_(e,r,a,o),i.includes("once")&&document.removeEventListener(n,s))};document.addEventListener(n,s)}else{let a=i.includes("window")?window:i.includes("document")?document:t,l=s=>{if(a!==window&&a!==document||document.body.contains(t)){if(!(function(e){return["keydown","keyup"].includes(e)}(n)&&function(e,t){let n=t.filter(e=>!["window","document","prevent","stop"].includes(e));if(n.includes("debounce")){let e=n.indexOf("debounce");n.splice(e,b((n[e+1]||"invalid-wait").split("ms")[0])?2:1)}if(0===n.length)return!1;if(1===n.length&&n[0]===E(e.key))return!1;const i=["ctrl","shift","alt","meta","cmd","super"].filter(e=>n.includes(e));if(n=n.filter(e=>!i.includes(e)),i.length>0){const t=i.filter(t=>("cmd"!==t&&"super"!==t||(t="meta"),e[`${t}Key`]));if(t.length===i.length&&n[0]===E(e.key))return!1}return!0}(s,i)||(i.includes("prevent")&&s.preventDefault(),i.includes("stop")&&s.stopPropagation(),i.includes("self")&&s.target!==t))){!1===_(e,r,s,o)?s.preventDefault():i.includes("once")&&a.removeEventListener(n,l)}}else a.removeEventListener(n,l)};if(i.includes("debounce")){let e=i[i.indexOf("debounce")+1]||"invalid-wait",t=b(e.split("ms")[0])?Number(e.split("ms")[0]):250;l=s(l,t)}a.addEventListener(n,l)}}function _(e,t,i,r){return e.evaluateCommandExpression(i.target,t,()=>n({},r(),{$event:i}))}function E(e){switch(e){case"/":return"slash";case" ":case"Spacebar":return"space";default:return e&&e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[_\s]/,"-").toLowerCase()}}function O(e,t,n){return"radio"===e.type&&(e.hasAttribute("name")||e.setAttribute("name",n)),(n,i)=>{if(n instanceof CustomEvent&&n.detail)return n.detail;if("checkbox"===e.type)return Array.isArray(i)?n.target.checked?i.concat([n.target.value]):i.filter(e=>e!==n.target.value):n.target.checked;if("select"===e.tagName.toLowerCase()&&e.multiple)return t.includes("number")?Array.from(n.target.selectedOptions).map(e=>{const t=e.value||e.text,n=t?parseFloat(t):null;return isNaN(n)?t:n}):Array.from(n.target.selectedOptions).map(e=>e.value||e.text);{const e=n.target.value,i=e?parseFloat(e):null;return t.includes("number")?isNaN(i)?e:i:t.includes("trim")?e.trim():e}}}const{isArray:k}=Array,{getPrototypeOf:A,create:S,defineProperty:$,defineProperties:P,isExtensible:D,getOwnPropertyDescriptor:C,getOwnPropertyNames:j,getOwnPropertySymbols:T,preventExtensions:N,hasOwnProperty:L}=Object,{push:R,concat:z,map:F}=Array.prototype;function M(e){return void 0===e}function I(e){return"function"==typeof e}const U=new WeakMap;function q(e,t){U.set(e,t)}const B=e=>U.get(e)||e;function W(e,t){return e.valueIsObservable(t)?e.getProxy(t):t}function K(e,t,n){z.call(j(n),T(n)).forEach(i=>{let r=C(n,i);r.configurable||(r=te(e,r,W)),$(t,i,r)}),N(t)}class G{constructor(e,t){this.originalTarget=t,this.membrane=e}get(e,t){const{originalTarget:n,membrane:i}=this,r=n[t],{valueObserved:s}=i;return s(n,t),i.getProxy(r)}set(e,t,n){const{originalTarget:i,membrane:{valueMutated:r}}=this;return i[t]!==n?(i[t]=n,r(i,t)):"length"===t&&k(i)&&r(i,t),!0}deleteProperty(e,t){const{originalTarget:n,membrane:{valueMutated:i}}=this;return delete n[t],i(n,t),!0}apply(e,t,n){}construct(e,t,n){}has(e,t){const{originalTarget:n,membrane:{valueObserved:i}}=this;return i(n,t),t in n}ownKeys(e){const{originalTarget:t}=this;return z.call(j(t),T(t))}isExtensible(e){const t=D(e);if(!t)return t;const{originalTarget:n,membrane:i}=this,r=D(n);return r||K(i,e,n),r}setPrototypeOf(e,t){}getPrototypeOf(e){const{originalTarget:t}=this;return A(t)}getOwnPropertyDescriptor(e,t){const{originalTarget:n,membrane:i}=this,{valueObserved:r}=this.membrane;r(n,t);let s=C(n,t);if(M(s))return s;const o=C(e,t);return M(o)?((s=te(i,s,W)).configurable||$(e,t,s),s):o}preventExtensions(e){const{originalTarget:t,membrane:n}=this;return K(n,e,t),N(t),!0}defineProperty(e,t,n){const{originalTarget:i,membrane:r}=this,{valueMutated:s}=r,{configurable:o}=n;if(L.call(n,"writable")&&!L.call(n,"value")){const e=C(i,t);n.value=e.value}return $(i,t,function(e){return L.call(e,"value")&&(e.value=B(e.value)),e}(n)),!1===o&&$(e,t,te(r,n,W)),s(i,t),!0}}function H(e,t){return e.valueIsObservable(t)?e.getReadOnlyProxy(t):t}class Z{constructor(e,t){this.originalTarget=t,this.membrane=e}get(e,t){const{membrane:n,originalTarget:i}=this,r=i[t],{valueObserved:s}=n;return s(i,t),n.getReadOnlyProxy(r)}set(e,t,n){return!1}deleteProperty(e,t){return!1}apply(e,t,n){}construct(e,t,n){}has(e,t){const{originalTarget:n,membrane:{valueObserved:i}}=this;return i(n,t),t in n}ownKeys(e){const{originalTarget:t}=this;return z.call(j(t),T(t))}setPrototypeOf(e,t){}getOwnPropertyDescriptor(e,t){const{originalTarget:n,membrane:i}=this,{valueObserved:r}=i;r(n,t);let s=C(n,t);if(M(s))return s;const o=C(e,t);return M(o)?(s=te(i,s,H),L.call(s,"set")&&(s.set=void 0),s.configurable||$(e,t,s),s):o}preventExtensions(e){return!1}defineProperty(e,t,n){return!1}}function J(e){let t=void 0;return k(e)?t=[]:"object"==typeof e&&(t={}),t}const Q=Object.prototype;function V(e){if(null===e)return!1;if("object"!=typeof e)return!1;if(k(e))return!0;const t=A(e);return t===Q||null===t||null===A(t)}const X=(e,t)=>{},Y=(e,t)=>{},ee=e=>e;function te(e,t,n){const{set:i,get:r}=t;return L.call(t,"value")?t.value=n(e,t.value):(M(r)||(t.get=function(){return n(e,r.call(B(this)))}),M(i)||(t.set=function(t){i.call(B(this),e.unwrapProxy(t))})),t}class ne{constructor(e){if(this.valueDistortion=ee,this.valueMutated=Y,this.valueObserved=X,this.valueIsObservable=V,this.objectGraph=new WeakMap,!M(e)){const{valueDistortion:t,valueMutated:n,valueObserved:i,valueIsObservable:r}=e;this.valueDistortion=I(t)?t:ee,this.valueMutated=I(n)?n:Y,this.valueObserved=I(i)?i:X,this.valueIsObservable=I(r)?r:V}}getProxy(e){const t=B(e),n=this.valueDistortion(t);if(this.valueIsObservable(n)){const i=this.getReactiveState(t,n);return i.readOnly===e?e:i.reactive}return n}getReadOnlyProxy(e){e=B(e);const t=this.valueDistortion(e);return this.valueIsObservable(t)?this.getReactiveState(e,t).readOnly:t}unwrapProxy(e){return B(e)}getReactiveState(e,t){const{objectGraph:n}=this;let i=n.get(t);if(i)return i;const r=this;return i={get reactive(){const n=new G(r,t),i=new Proxy(J(t),n);return q(i,e),$(this,"reactive",{value:i}),i},get readOnly(){const n=new Z(r,t),i=new Proxy(J(t),n);return q(i,e),$(this,"readOnly",{value:i}),i}},n.set(t,i),i}}class ie{constructor(e,t=null){this.$el=e;const n=this.$el.getAttribute("x-data"),i=""===n?"{}":n,r=this.$el.getAttribute("x-init");this.unobservedData=t||o(i,{});let{membrane:s,data:a}=this.wrapDataInObservable(this.unobservedData);var l;this.$data=a,this.membrane=s,this.unobservedData.$el=this.$el,this.unobservedData.$refs=this.getRefsProxy(),this.nextTickStack=[],this.unobservedData.$nextTick=(e=>{this.nextTickStack.push(e)}),this.watchers={},this.unobservedData.$watch=((e,t)=>{this.watchers[e]||(this.watchers[e]=[]),this.watchers[e].push(t)}),this.showDirectiveStack=[],this.showDirectiveLastElement,r&&!t&&(this.pauseReactivity=!0,l=this.evaluateReturnExpression(this.$el,r),this.pauseReactivity=!1),this.initializeElements(this.$el),this.listenForNewElementsToInitialize(),"function"==typeof l&&l.call(this.$data)}getUnobservedData(){return function(e,t){let n=e.unwrapProxy(t),i={};return Object.keys(n).forEach(e=>{["$el","$refs","$nextTick","$watch"].includes(e)||(i[e]=n[e])}),i}(this.membrane,this.$data)}wrapDataInObservable(e){var t=this;let n=s(function(){t.updateElements(t.$el)},0);return function(e,t){let n=new ne({valueMutated(e,n){t(e,n)}});return{data:n.getProxy(e),membrane:n}}(e,(e,i)=>{t.watchers[i]?t.watchers[i].forEach(t=>t(e[i])):Object.keys(t.watchers).filter(e=>e.includes(".")).forEach(n=>{let r=n.split(".");i===r[r.length-1]&&r.reduce((r,s)=>(Object.is(e,r)&&t.watchers[n].forEach(t=>t(e[i])),r[s]),t.getUnobservedData())}),t.pauseReactivity||n()})}walkAndSkipNestedComponents(e,t,n=(()=>{})){!function e(t,n){if(!1===n(t))return;let i=t.firstElementChild;for(;i;)e(i,n),i=i.nextElementSibling}(e,e=>e.hasAttribute("x-data")&&!e.isSameNode(this.$el)?(e.__x||n(e),!1):t(e))}initializeElements(e,t=(()=>{})){this.walkAndSkipNestedComponents(e,e=>void 0===e.__x_for_key&&(void 0===e.__x_inserted_me&&void this.initializeElement(e,t)),e=>{e.__x=new ie(e)}),this.executeAndClearRemainingShowDirectiveStack(),this.executeAndClearNextTickStack(e)}initializeElement(e,t){e.hasAttribute("class")&&c(e).length>0&&(e.__x_original_classes=e.getAttribute("class").split(" ")),this.registerListeners(e,t),this.resolveBoundAttributes(e,!0,t)}updateElements(e,t=(()=>{})){this.walkAndSkipNestedComponents(e,e=>{if(void 0!==e.__x_for_key&&!e.isSameNode(this.$el))return!1;this.updateElement(e,t)},e=>{e.__x=new ie(e)}),this.executeAndClearRemainingShowDirectiveStack(),this.executeAndClearNextTickStack(e)}executeAndClearNextTickStack(e){if(e===this.$el)for(;this.nextTickStack.length>0;)this.nextTickStack.shift()()}executeAndClearRemainingShowDirectiveStack(){this.showDirectiveStack.reverse().map(e=>new Promise(t=>{e(e=>{t(e)})})).reduce((e,t)=>e.then(()=>t.then(e=>e())),Promise.resolve(()=>{})),this.showDirectiveStack=[],this.showDirectiveLastElement=void 0}updateElement(e,t){this.resolveBoundAttributes(e,!1,t)}registerListeners(e,t){c(e).forEach(({type:i,value:r,modifiers:s,expression:o})=>{switch(i){case"on":w(this,e,r,s,o,t);break;case"model":!function(e,t,i,r,s){var o="select"===t.tagName.toLowerCase()||["checkbox","radio"].includes(t.type)||i.includes("lazy")?"change":"input";w(e,t,o,i,`${r} = rightSideOfExpression($event, ${r})`,()=>n({},s(),{rightSideOfExpression:O(t,i,r)}))}(this,e,s,o,t)}})}resolveBoundAttributes(e,t=!1,n){let i=c(e);if(void 0!==e.type&&"radio"===e.type){const e=i.findIndex(e=>"model"===e.type);e>-1&&i.push(i.splice(e,1)[0])}i.forEach(({type:r,value:s,modifiers:o,expression:a})=>{switch(r){case"model":x(this,e,"value",a,n,r);break;case"bind":if("template"===e.tagName.toLowerCase()&&"key"===s)return;x(this,e,s,a,n,r);break;case"text":var l=this.evaluateReturnExpression(e,a,n);!function(e,t,n){void 0===t&&n.match(/\./).length&&(t=""),e.innerText=t}(e,l,a);break;case"html":!function(e,t,n,i){t.innerHTML=e.evaluateReturnExpression(t,n,i)}(this,e,a,n);break;case"show":l=this.evaluateReturnExpression(e,a,n);!function(e,t,n,i,r=!1){const s=()=>{t.style.display="none"},o=()=>{1===t.style.length&&"none"===t.style.display?t.removeAttribute("style"):t.style.removeProperty("display")};if(!0===r)return void(n?o():s());const a=e=>{n?(""!==t.style.display&&d(t,()=>{o()}),e(()=>{})):"none"!==t.style.display?f(t,()=>{e(()=>{s()})}):e(()=>{})};i.includes("immediate")?a(e=>e()):(e.showDirectiveLastElement&&!e.showDirectiveLastElement.contains(t)&&e.executeAndClearRemainingShowDirectiveStack(),e.showDirectiveStack.push(a),e.showDirectiveLastElement=t)}(this,e,l,o,t);break;case"if":if(i.filter(e=>"for"===e.type).length>0)return;l=this.evaluateReturnExpression(e,a,n);!function(e,t,n,i,r){"template"!==t.nodeName.toLowerCase()&&console.warn("Alpine: [x-if] directive should only be added to <template> tags. See https://github.com/alpinejs/alpine#x-if");const s=t.nextElementSibling&&!0===t.nextElementSibling.__x_inserted_me;if(n&&!s){const n=document.importNode(t.content,!0);t.parentElement.insertBefore(n,t.nextElementSibling),d(t.nextElementSibling,()=>{},i),e.initializeElements(t.nextElementSibling,r),t.nextElementSibling.__x_inserted_me=!0}else!n&&s&&f(t.nextElementSibling,()=>{t.nextElementSibling.remove()},i)}(this,e,l,t,n);break;case"for":y(this,e,a,t,n);break;case"cloak":e.removeAttribute("x-cloak")}})}evaluateReturnExpression(e,t,i=(()=>{})){return o(t,this.$data,n({},i(),{$dispatch:this.getDispatchFunction(e)}))}evaluateCommandExpression(e,t,i=(()=>{})){return function(e,t,n={}){if(Object.keys(t).includes(e)){let i=new Function(["dataContext",...Object.keys(n)],`with(dataContext) { return ${e} }`)(t,...Object.values(n));if("function"==typeof i)return i.call(t,n.$event)}return new Function(["dataContext",...Object.keys(n)],`with(dataContext) { ${e} }`)(t,...Object.values(n))}(t,this.$data,n({},i(),{$dispatch:this.getDispatchFunction(e)}))}getDispatchFunction(e){return(t,n={})=>{e.dispatchEvent(new CustomEvent(t,{detail:n,bubbles:!0}))}}listenForNewElementsToInitialize(){const e=this.$el;new MutationObserver(e=>{for(let t=0;t<e.length;t++){const n=e[t].target.closest("[x-data]");if(n&&n.isSameNode(this.$el)){if("attributes"===e[t].type&&"x-data"===e[t].attributeName){const n=o(e[t].target.getAttribute("x-data"),{});Object.keys(n).forEach(e=>{this.$data[e]!==n[e]&&(this.$data[e]=n[e])})}e[t].addedNodes.length>0&&e[t].addedNodes.forEach(e=>{1!==e.nodeType||e.__x_inserted_me||(e.matches("[x-data]")?e.__x=new ie(e):this.initializeElements(e))})}}}).observe(e,{childList:!0,attributes:!0,subtree:!0})}getRefsProxy(){var e=this;return new Proxy({},{get(t,n){return"$isAlpineProxy"===n||(e.walkAndSkipNestedComponents(e.$el,e=>{e.hasAttribute("x-ref")&&e.getAttribute("x-ref")===n&&(i=e)}),i);var i}})}}const re={version:"2.3.3",start:async function(){r()||await new Promise(e=>{"loading"==document.readyState?document.addEventListener("DOMContentLoaded",e):e()}),this.discoverComponents(e=>{this.initializeComponent(e)}),document.addEventListener("turbolinks:load",()=>{this.discoverUninitializedComponents(e=>{this.initializeComponent(e)})}),this.listenForNewUninitializedComponentsAtRunTime(e=>{this.initializeComponent(e)})},discoverComponents:function(e){document.querySelectorAll("[x-data]").forEach(t=>{e(t)})},discoverUninitializedComponents:function(e,t=null){const n=(t||document).querySelectorAll("[x-data]");Array.from(n).filter(e=>void 0===e.__x).forEach(t=>{e(t)})},listenForNewUninitializedComponentsAtRunTime:function(e){const t=document.querySelector("body");new MutationObserver(e=>{for(let t=0;t<e.length;t++)e[t].addedNodes.length>0&&e[t].addedNodes.forEach(e=>{1===e.nodeType&&(e.parentElement&&e.parentElement.closest("[x-data]")||this.discoverUninitializedComponents(e=>{this.initializeComponent(e)},e.parentElement))})}).observe(t,{childList:!0,attributes:!0,subtree:!0})},initializeComponent:function(e){e.__x||(e.__x=new ie(e))},clone:function(e,t){t.__x||(t.__x=new ie(t,e.getUnobservedData()))}};return r()||(window.Alpine=re,window.deferLoadingAlpine?window.deferLoadingAlpine(function(){window.Alpine.start()}):window.Alpine.start()),re});
+//# sourceMappingURL=/js/alpine.min.js.map
diff --git a/themes/default/public/js/alpine.min.js.map b/themes/default/public/js/alpine.min.js.map
new file mode 100644
index 0000000..8e6291e
--- /dev/null
+++ b/themes/default/public/js/alpine.min.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["jsdelivr-header.js","/gh/alpinejs/alpine@2.3.3/dist/alpine.js"],"names":[],"mappings":"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","file":"/gh/alpinejs/alpine@2.3.3/dist/alpine.js","sourceRoot":"","sourcesContent":["/**\n * Minified by jsDelivr using Terser v3.14.1.\n * Original file: /gh/alpinejs/alpine@2.3.3/dist/alpine.js\n *\n * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files\n */\n","(function (global, factory) {\n  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n  typeof define === 'function' && define.amd ? define(factory) :\n  (global = global || self, global.Alpine = factory());\n}(this, (function () { 'use strict';\n\n  function _defineProperty(obj, key, value) {\n    if (key in obj) {\n      Object.defineProperty(obj, key, {\n        value: value,\n        enumerable: true,\n        configurable: true,\n        writable: true\n      });\n    } else {\n      obj[key] = value;\n    }\n\n    return obj;\n  }\n\n  function ownKeys(object, enumerableOnly) {\n    var keys = Object.keys(object);\n\n    if (Object.getOwnPropertySymbols) {\n      var symbols = Object.getOwnPropertySymbols(object);\n      if (enumerableOnly) symbols = symbols.filter(function (sym) {\n        return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n      });\n      keys.push.apply(keys, symbols);\n    }\n\n    return keys;\n  }\n\n  function _objectSpread2(target) {\n    for (var i = 1; i < arguments.length; i++) {\n      var source = arguments[i] != null ? arguments[i] : {};\n\n      if (i % 2) {\n        ownKeys(Object(source), true).forEach(function (key) {\n          _defineProperty(target, key, source[key]);\n        });\n      } else if (Object.getOwnPropertyDescriptors) {\n        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));\n      } else {\n        ownKeys(Object(source)).forEach(function (key) {\n          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n        });\n      }\n    }\n\n    return target;\n  }\n\n  // Thanks @stimulus:\n  // https://github.com/stimulusjs/stimulus/blob/master/packages/%40stimulus/core/src/application.ts\n  function domReady() {\n    return new Promise(resolve => {\n      if (document.readyState == \"loading\") {\n        document.addEventListener(\"DOMContentLoaded\", resolve);\n      } else {\n        resolve();\n      }\n    });\n  }\n  function arrayUnique(array) {\n    return Array.from(new Set(array));\n  }\n  function isTesting() {\n    return navigator.userAgent.includes(\"Node.js\") || navigator.userAgent.includes(\"jsdom\");\n  }\n  function kebabCase(subject) {\n    return subject.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/[_\\s]/, '-').toLowerCase();\n  }\n  function walk(el, callback) {\n    if (callback(el) === false) return;\n    let node = el.firstElementChild;\n\n    while (node) {\n      walk(node, callback);\n      node = node.nextElementSibling;\n    }\n  }\n  function debounce(func, wait) {\n    var timeout;\n    return function () {\n      var context = this,\n          args = arguments;\n\n      var later = function later() {\n        timeout = null;\n        func.apply(context, args);\n      };\n\n      clearTimeout(timeout);\n      timeout = setTimeout(later, wait);\n    };\n  }\n  function saferEval(expression, dataContext, additionalHelperVariables = {}) {\n    return new Function(['$data', ...Object.keys(additionalHelperVariables)], `var result; with($data) { result = ${expression} }; return result`)(dataContext, ...Object.values(additionalHelperVariables));\n  }\n  function saferEvalNoReturn(expression, dataContext, additionalHelperVariables = {}) {\n    // For the cases when users pass only a function reference to the caller: `x-on:click=\"foo\"`\n    // Where \"foo\" is a function. Also, we'll pass the function the event instance when we call it.\n    if (Object.keys(dataContext).includes(expression)) {\n      let methodReference = new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { return ${expression} }`)(dataContext, ...Object.values(additionalHelperVariables));\n\n      if (typeof methodReference === 'function') {\n        return methodReference.call(dataContext, additionalHelperVariables['$event']);\n      }\n    }\n\n    return new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { ${expression} }`)(dataContext, ...Object.values(additionalHelperVariables));\n  }\n  const xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)\\b/;\n  function isXAttr(attr) {\n    const name = replaceAtAndColonWithStandardSyntax(attr.name);\n    return xAttrRE.test(name);\n  }\n  function getXAttrs(el, type) {\n    return Array.from(el.attributes).filter(isXAttr).map(attr => {\n      const name = replaceAtAndColonWithStandardSyntax(attr.name);\n      const typeMatch = name.match(xAttrRE);\n      const valueMatch = name.match(/:([a-zA-Z\\-:]+)/);\n      const modifiers = name.match(/\\.[^.\\]]+(?=[^\\]]*$)/g) || [];\n      return {\n        type: typeMatch ? typeMatch[1] : null,\n        value: valueMatch ? valueMatch[1] : null,\n        modifiers: modifiers.map(i => i.replace('.', '')),\n        expression: attr.value\n      };\n    }).filter(i => {\n      // If no type is passed in for filtering, bypass filter\n      if (!type) return true;\n      return i.type === type;\n    });\n  }\n  function isBooleanAttr(attrName) {\n    // As per HTML spec table https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute\n    // Array roughly ordered by estimated usage\n    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'];\n    return booleanAttributes.includes(attrName);\n  }\n  function replaceAtAndColonWithStandardSyntax(name) {\n    if (name.startsWith('@')) {\n      return name.replace('@', 'x-on:');\n    } else if (name.startsWith(':')) {\n      return name.replace(':', 'x-bind:');\n    }\n\n    return name;\n  }\n  function transitionIn(el, show, forceSkip = false) {\n    // We don't want to transition on the initial page load.\n    if (forceSkip) return show();\n    const attrs = getXAttrs(el, 'transition');\n    const showAttr = getXAttrs(el, 'show')[0]; // If this is triggered by a x-show.transition.\n\n    if (showAttr && showAttr.modifiers.includes('transition')) {\n      let modifiers = showAttr.modifiers; // If x-show.transition.out, we'll skip the \"in\" transition.\n\n      if (modifiers.includes('out') && !modifiers.includes('in')) return show();\n      const settingBothSidesOfTransition = modifiers.includes('in') && modifiers.includes('out'); // If x-show.transition.in...out... only use \"in\" related modifiers for this transition.\n\n      modifiers = settingBothSidesOfTransition ? modifiers.filter((i, index) => index < modifiers.indexOf('out')) : modifiers;\n      transitionHelperIn(el, modifiers, show); // Otherwise, we can assume x-transition:enter.\n    } else if (attrs.length > 0) {\n      transitionClassesIn(el, attrs, show);\n    } else {\n      // If neither, just show that damn thing.\n      show();\n    }\n  }\n  function transitionOut(el, hide, forceSkip = false) {\n    if (forceSkip) return hide();\n    const attrs = getXAttrs(el, 'transition');\n    const showAttr = getXAttrs(el, 'show')[0];\n\n    if (showAttr && showAttr.modifiers.includes('transition')) {\n      let modifiers = showAttr.modifiers;\n      if (modifiers.includes('in') && !modifiers.includes('out')) return hide();\n      const settingBothSidesOfTransition = modifiers.includes('in') && modifiers.includes('out');\n      modifiers = settingBothSidesOfTransition ? modifiers.filter((i, index) => index > modifiers.indexOf('out')) : modifiers;\n      transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hide);\n    } else if (attrs.length > 0) {\n      transitionClassesOut(el, attrs, hide);\n    } else {\n      hide();\n    }\n  }\n  function transitionHelperIn(el, modifiers, showCallback) {\n    // Default values inspired by: https://material.io/design/motion/speed.html#duration\n    const styleValues = {\n      duration: modifierValue(modifiers, 'duration', 150),\n      origin: modifierValue(modifiers, 'origin', 'center'),\n      first: {\n        opacity: 0,\n        scale: modifierValue(modifiers, 'scale', 95)\n      },\n      second: {\n        opacity: 1,\n        scale: 100\n      }\n    };\n    transitionHelper(el, modifiers, showCallback, () => {}, styleValues);\n  }\n  function transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hideCallback) {\n    // Make the \"out\" transition .5x slower than the \"in\". (Visually better)\n    // HOWEVER, if they explicitly set a duration for the \"out\" transition,\n    // use that.\n    const duration = settingBothSidesOfTransition ? modifierValue(modifiers, 'duration', 150) : modifierValue(modifiers, 'duration', 150) / 2;\n    const styleValues = {\n      duration: duration,\n      origin: modifierValue(modifiers, 'origin', 'center'),\n      first: {\n        opacity: 1,\n        scale: 100\n      },\n      second: {\n        opacity: 0,\n        scale: modifierValue(modifiers, 'scale', 95)\n      }\n    };\n    transitionHelper(el, modifiers, () => {}, hideCallback, styleValues);\n  }\n\n  function modifierValue(modifiers, key, fallback) {\n    // If the modifier isn't present, use the default.\n    if (modifiers.indexOf(key) === -1) return fallback; // If it IS present, grab the value after it: x-show.transition.duration.500ms\n\n    const rawValue = modifiers[modifiers.indexOf(key) + 1];\n    if (!rawValue) return fallback;\n\n    if (key === 'scale') {\n      // Check if the very next value is NOT a number and return the fallback.\n      // If x-show.transition.scale, we'll use the default scale value.\n      // That is how a user opts out of the opacity transition.\n      if (!isNumeric(rawValue)) return fallback;\n    }\n\n    if (key === 'duration') {\n      // Support x-show.transition.duration.500ms && duration.500\n      let match = rawValue.match(/([0-9]+)ms/);\n      if (match) return match[1];\n    }\n\n    if (key === 'origin') {\n      // Support chaining origin directions: x-show.transition.top.right\n      if (['top', 'right', 'left', 'center', 'bottom'].includes(modifiers[modifiers.indexOf(key) + 2])) {\n        return [rawValue, modifiers[modifiers.indexOf(key) + 2]].join(' ');\n      }\n    }\n\n    return rawValue;\n  }\n\n  function transitionHelper(el, modifiers, hook1, hook2, styleValues) {\n    // If the user set these style values, we'll put them back when we're done with them.\n    const opacityCache = el.style.opacity;\n    const transformCache = el.style.transform;\n    const transformOriginCache = el.style.transformOrigin; // If no modifiers are present: x-show.transition, we'll default to both opacity and scale.\n\n    const noModifiers = !modifiers.includes('opacity') && !modifiers.includes('scale');\n    const transitionOpacity = noModifiers || modifiers.includes('opacity');\n    const transitionScale = noModifiers || modifiers.includes('scale'); // These are the explicit stages of a transition (same stages for in and for out).\n    // This way you can get a birds eye view of the hooks, and the differences\n    // between them.\n\n    const stages = {\n      start() {\n        if (transitionOpacity) el.style.opacity = styleValues.first.opacity;\n        if (transitionScale) el.style.transform = `scale(${styleValues.first.scale / 100})`;\n      },\n\n      during() {\n        if (transitionScale) el.style.transformOrigin = styleValues.origin;\n        el.style.transitionProperty = [transitionOpacity ? `opacity` : ``, transitionScale ? `transform` : ``].join(' ').trim();\n        el.style.transitionDuration = `${styleValues.duration / 1000}s`;\n        el.style.transitionTimingFunction = `cubic-bezier(0.4, 0.0, 0.2, 1)`;\n      },\n\n      show() {\n        hook1();\n      },\n\n      end() {\n        if (transitionOpacity) el.style.opacity = styleValues.second.opacity;\n        if (transitionScale) el.style.transform = `scale(${styleValues.second.scale / 100})`;\n      },\n\n      hide() {\n        hook2();\n      },\n\n      cleanup() {\n        if (transitionOpacity) el.style.opacity = opacityCache;\n        if (transitionScale) el.style.transform = transformCache;\n        if (transitionScale) el.style.transformOrigin = transformOriginCache;\n        el.style.transitionProperty = null;\n        el.style.transitionDuration = null;\n        el.style.transitionTimingFunction = null;\n      }\n\n    };\n    transition(el, stages);\n  }\n  function transitionClassesIn(el, directives, showCallback) {\n    const enter = (directives.find(i => i.value === 'enter') || {\n      expression: ''\n    }).expression.split(' ').filter(i => i !== '');\n    const enterStart = (directives.find(i => i.value === 'enter-start') || {\n      expression: ''\n    }).expression.split(' ').filter(i => i !== '');\n    const enterEnd = (directives.find(i => i.value === 'enter-end') || {\n      expression: ''\n    }).expression.split(' ').filter(i => i !== '');\n    transitionClasses(el, enter, enterStart, enterEnd, showCallback, () => {});\n  }\n  function transitionClassesOut(el, directives, hideCallback) {\n    const leave = (directives.find(i => i.value === 'leave') || {\n      expression: ''\n    }).expression.split(' ').filter(i => i !== '');\n    const leaveStart = (directives.find(i => i.value === 'leave-start') || {\n      expression: ''\n    }).expression.split(' ').filter(i => i !== '');\n    const leaveEnd = (directives.find(i => i.value === 'leave-end') || {\n      expression: ''\n    }).expression.split(' ').filter(i => i !== '');\n    transitionClasses(el, leave, leaveStart, leaveEnd, () => {}, hideCallback);\n  }\n  function transitionClasses(el, classesDuring, classesStart, classesEnd, hook1, hook2) {\n    const originalClasses = el.__x_original_classes || [];\n    const stages = {\n      start() {\n        el.classList.add(...classesStart);\n      },\n\n      during() {\n        el.classList.add(...classesDuring);\n      },\n\n      show() {\n        hook1();\n      },\n\n      end() {\n        // Don't remove classes that were in the original class attribute.\n        el.classList.remove(...classesStart.filter(i => !originalClasses.includes(i)));\n        el.classList.add(...classesEnd);\n      },\n\n      hide() {\n        hook2();\n      },\n\n      cleanup() {\n        el.classList.remove(...classesDuring.filter(i => !originalClasses.includes(i)));\n        el.classList.remove(...classesEnd.filter(i => !originalClasses.includes(i)));\n      }\n\n    };\n    transition(el, stages);\n  }\n  function transition(el, stages) {\n    stages.start();\n    stages.during();\n    requestAnimationFrame(() => {\n      // Note: Safari's transitionDuration property will list out comma separated transition durations\n      // for every single transition property. Let's grab the first one and call it a day.\n      let duration = Number(getComputedStyle(el).transitionDuration.replace(/,.*/, '').replace('s', '')) * 1000;\n      stages.show();\n      requestAnimationFrame(() => {\n        stages.end();\n        setTimeout(() => {\n          stages.hide(); // Adding an \"isConnected\" check, in case the callback\n          // removed the element from the DOM.\n\n          if (el.isConnected) {\n            stages.cleanup();\n          }\n        }, duration);\n      });\n    });\n  }\n  function isNumeric(subject) {\n    return !isNaN(subject);\n  }\n\n  function handleForDirective(component, templateEl, expression, initialUpdate, extraVars) {\n    warnIfNotTemplateTag(templateEl);\n    let iteratorNames = parseForExpression(expression);\n    let items = evaluateItemsAndReturnEmptyIfXIfIsPresentAndFalseOnElement(component, templateEl, iteratorNames, extraVars); // As we walk the array, we'll also walk the DOM (updating/creating as we go).\n\n    let currentEl = templateEl;\n    items.forEach((item, index) => {\n      let iterationScopeVariables = getIterationScopeVariables(iteratorNames, item, index, items, extraVars());\n      let currentKey = generateKeyForIteration(component, templateEl, index, iterationScopeVariables);\n      let nextEl = currentEl.nextElementSibling; // If there's no previously x-for processed element ahead, add one.\n\n      if (!nextEl || nextEl.__x_for_key === undefined) {\n        nextEl = addElementInLoopAfterCurrentEl(templateEl, currentEl); // And transition it in if it's not the first page load.\n\n        transitionIn(nextEl, () => {}, initialUpdate);\n        nextEl.__x_for = iterationScopeVariables;\n        component.initializeElements(nextEl, () => nextEl.__x_for);\n      } else {\n        nextEl = lookAheadForMatchingKeyedElementAndMoveItIfFound(nextEl, currentKey); // If we haven't found a matching key, just insert the element at the current position\n\n        if (!nextEl) {\n          nextEl = addElementInLoopAfterCurrentEl(templateEl, currentEl);\n        } // Temporarily remove the key indicator to allow the normal \"updateElements\" to work\n\n\n        delete nextEl.__x_for_key;\n        nextEl.__x_for = iterationScopeVariables;\n        component.updateElements(nextEl, () => nextEl.__x_for);\n      }\n\n      currentEl = nextEl;\n      currentEl.__x_for_key = currentKey;\n    });\n    removeAnyLeftOverElementsFromPreviousUpdate(currentEl);\n  } // This was taken from VueJS 2.* core. Thanks Vue!\n\n  function parseForExpression(expression) {\n    let forIteratorRE = /,([^,\\}\\]]*)(?:,([^,\\}\\]]*))?$/;\n    let stripParensRE = /^\\(|\\)$/g;\n    let forAliasRE = /([\\s\\S]*?)\\s+(?:in|of)\\s+([\\s\\S]*)/;\n    let inMatch = expression.match(forAliasRE);\n    if (!inMatch) return;\n    let res = {};\n    res.items = inMatch[2].trim();\n    let item = inMatch[1].trim().replace(stripParensRE, '');\n    let iteratorMatch = item.match(forIteratorRE);\n\n    if (iteratorMatch) {\n      res.item = item.replace(forIteratorRE, '').trim();\n      res.index = iteratorMatch[1].trim();\n\n      if (iteratorMatch[2]) {\n        res.collection = iteratorMatch[2].trim();\n      }\n    } else {\n      res.item = item;\n    }\n\n    return res;\n  }\n\n  function getIterationScopeVariables(iteratorNames, item, index, items, extraVars) {\n    // We must create a new object, so each iteration has a new scope\n    let scopeVariables = extraVars ? _objectSpread2({}, extraVars) : {};\n    scopeVariables[iteratorNames.item] = item;\n    if (iteratorNames.index) scopeVariables[iteratorNames.index] = index;\n    if (iteratorNames.collection) scopeVariables[iteratorNames.collection] = items;\n    return scopeVariables;\n  }\n\n  function generateKeyForIteration(component, el, index, iterationScopeVariables) {\n    let bindKeyAttribute = getXAttrs(el, 'bind').filter(attr => attr.value === 'key')[0]; // If the dev hasn't specified a key, just return the index of the iteration.\n\n    if (!bindKeyAttribute) return index;\n    return component.evaluateReturnExpression(el, bindKeyAttribute.expression, () => iterationScopeVariables);\n  }\n\n  function warnIfNotTemplateTag(el) {\n    if (el.tagName.toLowerCase() !== 'template') console.warn('Alpine: [x-for] directive should only be added to <template> tags.');\n  }\n\n  function evaluateItemsAndReturnEmptyIfXIfIsPresentAndFalseOnElement(component, el, iteratorNames, extraVars) {\n    let ifAttribute = getXAttrs(el, 'if')[0];\n\n    if (ifAttribute && !component.evaluateReturnExpression(el, ifAttribute.expression)) {\n      return [];\n    }\n\n    return component.evaluateReturnExpression(el, iteratorNames.items, extraVars);\n  }\n\n  function addElementInLoopAfterCurrentEl(templateEl, currentEl) {\n    let clone = document.importNode(templateEl.content, true);\n    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.');\n    currentEl.parentElement.insertBefore(clone, currentEl.nextElementSibling);\n    return currentEl.nextElementSibling;\n  }\n\n  function lookAheadForMatchingKeyedElementAndMoveItIfFound(nextEl, currentKey) {\n    // If the the key's DO match, no need to look ahead.\n    if (nextEl.__x_for_key === currentKey) return nextEl; // If they don't, we'll look ahead for a match.\n    // If we find it, we'll move it to the current position in the loop.\n\n    let tmpNextEl = nextEl;\n\n    while (tmpNextEl) {\n      if (tmpNextEl.__x_for_key === currentKey) {\n        return tmpNextEl.parentElement.insertBefore(tmpNextEl, nextEl);\n      }\n\n      tmpNextEl = tmpNextEl.nextElementSibling && tmpNextEl.nextElementSibling.__x_for_key !== undefined ? tmpNextEl.nextElementSibling : false;\n    }\n  }\n\n  function removeAnyLeftOverElementsFromPreviousUpdate(currentEl) {\n    var nextElementFromOldLoop = currentEl.nextElementSibling && currentEl.nextElementSibling.__x_for_key !== undefined ? currentEl.nextElementSibling : false;\n\n    while (nextElementFromOldLoop) {\n      let nextElementFromOldLoopImmutable = nextElementFromOldLoop;\n      let nextSibling = nextElementFromOldLoop.nextElementSibling;\n      transitionOut(nextElementFromOldLoop, () => {\n        nextElementFromOldLoopImmutable.remove();\n      });\n      nextElementFromOldLoop = nextSibling && nextSibling.__x_for_key !== undefined ? nextSibling : false;\n    }\n  }\n\n  function handleAttributeBindingDirective(component, el, attrName, expression, extraVars, attrType) {\n    var value = component.evaluateReturnExpression(el, expression, extraVars);\n\n    if (attrName === 'value') {\n      // If nested model key is undefined, set the default value to empty string.\n      if (value === undefined && expression.match(/\\./).length) {\n        value = '';\n      }\n\n      if (el.type === 'radio') {\n        // Set radio value from x-bind:value, if no \"value\" attribute exists.\n        // If there are any initial state values, radio will have a correct\n        // \"checked\" value since x-bind:value is processed before x-model.\n        if (el.attributes.value === undefined && attrType === 'bind') {\n          el.value = value;\n        } else if (attrType !== 'bind') {\n          el.checked = el.value == value;\n        }\n      } else if (el.type === 'checkbox') {\n        if (Array.isArray(value)) {\n          // I'm purposely not using Array.includes here because it's\n          // strict, and because of Numeric/String mis-casting, I\n          // want the \"includes\" to be \"fuzzy\".\n          let valueFound = false;\n          value.forEach(val => {\n            if (val == el.value) {\n              valueFound = true;\n            }\n          });\n          el.checked = valueFound;\n        } else {\n          el.checked = !!value;\n        } // If we are explicitly binding a string to the :value, set the string,\n        // If the value is a boolean, leave it alone, it will be set to \"on\"\n        // automatically.\n\n\n        if (typeof value === 'string') {\n          el.value = value;\n        }\n      } else if (el.tagName === 'SELECT') {\n        updateSelect(el, value);\n      } else if (el.type === 'text') {\n        // Cursor position should be restored back to origin due to a safari bug\n        const selectionStart = el.selectionStart;\n        const selectionEnd = el.selectionEnd;\n        const selectionDirection = el.selectionDirection;\n        el.value = value;\n\n        if (el === document.activeElement && selectionStart !== null) {\n          el.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n        }\n      } else {\n        el.value = value;\n      }\n    } else if (attrName === 'class') {\n      if (Array.isArray(value)) {\n        const originalClasses = el.__x_original_classes || [];\n        el.setAttribute('class', arrayUnique(originalClasses.concat(value)).join(' '));\n      } else if (typeof value === 'object') {\n        // Sorting the keys / class names by their boolean value will ensure that\n        // anything that evaluates to `false` and needs to remove classes is run first.\n        const keysSortedByBooleanValue = Object.keys(value).sort((a, b) => value[a] - value[b]);\n        keysSortedByBooleanValue.forEach(classNames => {\n          if (value[classNames]) {\n            classNames.split(' ').forEach(className => el.classList.add(className));\n          } else {\n            classNames.split(' ').forEach(className => el.classList.remove(className));\n          }\n        });\n      } else {\n        const originalClasses = el.__x_original_classes || [];\n        const newClasses = value.split(' ');\n        el.setAttribute('class', arrayUnique(originalClasses.concat(newClasses)).join(' '));\n      }\n    } else if (isBooleanAttr(attrName)) {\n      // Boolean attributes have to be explicitly added and removed, not just set.\n      if (!!value) {\n        el.setAttribute(attrName, '');\n      } else {\n        el.removeAttribute(attrName);\n      }\n    } else {\n      el.setAttribute(attrName, value);\n    }\n  }\n\n  function updateSelect(el, value) {\n    const arrayWrappedValue = [].concat(value).map(value => {\n      return value + '';\n    });\n    Array.from(el.options).forEach(option => {\n      option.selected = arrayWrappedValue.includes(option.value || option.text);\n    });\n  }\n\n  function handleTextDirective(el, output, expression) {\n    // If nested model key is undefined, set the default value to empty string.\n    if (output === undefined && expression.match(/\\./).length) {\n      output = '';\n    }\n\n    el.innerText = output;\n  }\n\n  function handleHtmlDirective(component, el, expression, extraVars) {\n    el.innerHTML = component.evaluateReturnExpression(el, expression, extraVars);\n  }\n\n  function handleShowDirective(component, el, value, modifiers, initialUpdate = false) {\n    const hide = () => {\n      el.style.display = 'none';\n    };\n\n    const show = () => {\n      if (el.style.length === 1 && el.style.display === 'none') {\n        el.removeAttribute('style');\n      } else {\n        el.style.removeProperty('display');\n      }\n    };\n\n    if (initialUpdate === true) {\n      if (value) {\n        show();\n      } else {\n        hide();\n      }\n\n      return;\n    }\n\n    const handle = resolve => {\n      if (!value) {\n        if (el.style.display !== 'none') {\n          transitionOut(el, () => {\n            resolve(() => {\n              hide();\n            });\n          });\n        } else {\n          resolve(() => {});\n        }\n      } else {\n        if (el.style.display !== '') {\n          transitionIn(el, () => {\n            show();\n          });\n        } // Resolve immediately, only hold up parent `x-show`s for hidin.\n\n\n        resolve(() => {});\n      }\n    }; // The working of x-show is a bit complex because we need to\n    // wait for any child transitions to finish before hiding\n    // some element. Also, this has to be done recursively.\n    // If x-show.immediate, foregoe the waiting.\n\n\n    if (modifiers.includes('immediate')) {\n      handle(finish => finish());\n      return;\n    } // x-show is encountered during a DOM tree walk. If an element\n    // we encounter is NOT a child of another x-show element we\n    // can execute the previous x-show stack (if one exists).\n\n\n    if (component.showDirectiveLastElement && !component.showDirectiveLastElement.contains(el)) {\n      component.executeAndClearRemainingShowDirectiveStack();\n    } // We'll push the handler onto a stack to be handled later.\n\n\n    component.showDirectiveStack.push(handle);\n    component.showDirectiveLastElement = el;\n  }\n\n  function handleIfDirective(component, el, expressionResult, initialUpdate, extraVars) {\n    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`);\n    const elementHasAlreadyBeenAdded = el.nextElementSibling && el.nextElementSibling.__x_inserted_me === true;\n\n    if (expressionResult && !elementHasAlreadyBeenAdded) {\n      const clone = document.importNode(el.content, true);\n      el.parentElement.insertBefore(clone, el.nextElementSibling);\n      transitionIn(el.nextElementSibling, () => {}, initialUpdate);\n      component.initializeElements(el.nextElementSibling, extraVars);\n      el.nextElementSibling.__x_inserted_me = true;\n    } else if (!expressionResult && elementHasAlreadyBeenAdded) {\n      transitionOut(el.nextElementSibling, () => {\n        el.nextElementSibling.remove();\n      }, initialUpdate);\n    }\n  }\n\n  function registerListener(component, el, event, modifiers, expression, extraVars = {}) {\n    if (modifiers.includes('away')) {\n      let handler = e => {\n        // Don't do anything if the click came form the element or within it.\n        if (el.contains(e.target)) return; // Don't do anything if this element isn't currently visible.\n\n        if (el.offsetWidth < 1 && el.offsetHeight < 1) return; // Now that we are sure the element is visible, AND the click\n        // is from outside it, let's run the expression.\n\n        runListenerHandler(component, expression, e, extraVars);\n\n        if (modifiers.includes('once')) {\n          document.removeEventListener(event, handler);\n        }\n      }; // Listen for this event at the root level.\n\n\n      document.addEventListener(event, handler);\n    } else {\n      let listenerTarget = modifiers.includes('window') ? window : modifiers.includes('document') ? document : el;\n\n      let handler = e => {\n        // Remove this global event handler if the element that declared it\n        // has been removed. It's now stale.\n        if (listenerTarget === window || listenerTarget === document) {\n          if (!document.body.contains(el)) {\n            listenerTarget.removeEventListener(event, handler);\n            return;\n          }\n        }\n\n        if (isKeyEvent(event)) {\n          if (isListeningForASpecificKeyThatHasntBeenPressed(e, modifiers)) {\n            return;\n          }\n        }\n\n        if (modifiers.includes('prevent')) e.preventDefault();\n        if (modifiers.includes('stop')) e.stopPropagation(); // If the .self modifier isn't present, or if it is present and\n        // the target element matches the element we are registering the\n        // event on, run the handler\n\n        if (!modifiers.includes('self') || e.target === el) {\n          const returnValue = runListenerHandler(component, expression, e, extraVars);\n\n          if (returnValue === false) {\n            e.preventDefault();\n          } else {\n            if (modifiers.includes('once')) {\n              listenerTarget.removeEventListener(event, handler);\n            }\n          }\n        }\n      };\n\n      if (modifiers.includes('debounce')) {\n        let nextModifier = modifiers[modifiers.indexOf('debounce') + 1] || 'invalid-wait';\n        let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250;\n        handler = debounce(handler, wait);\n      }\n\n      listenerTarget.addEventListener(event, handler);\n    }\n  }\n\n  function runListenerHandler(component, expression, e, extraVars) {\n    return component.evaluateCommandExpression(e.target, expression, () => {\n      return _objectSpread2({}, extraVars(), {\n        '$event': e\n      });\n    });\n  }\n\n  function isKeyEvent(event) {\n    return ['keydown', 'keyup'].includes(event);\n  }\n\n  function isListeningForASpecificKeyThatHasntBeenPressed(e, modifiers) {\n    let keyModifiers = modifiers.filter(i => {\n      return !['window', 'document', 'prevent', 'stop'].includes(i);\n    });\n\n    if (keyModifiers.includes('debounce')) {\n      let debounceIndex = keyModifiers.indexOf('debounce');\n      keyModifiers.splice(debounceIndex, isNumeric((keyModifiers[debounceIndex + 1] || 'invalid-wait').split('ms')[0]) ? 2 : 1);\n    } // If no modifier is specified, we'll call it a press.\n\n\n    if (keyModifiers.length === 0) return false; // If one is passed, AND it matches the key pressed, we'll call it a press.\n\n    if (keyModifiers.length === 1 && keyModifiers[0] === keyToModifier(e.key)) return false; // The user is listening for key combinations.\n\n    const systemKeyModifiers = ['ctrl', 'shift', 'alt', 'meta', 'cmd', 'super'];\n    const selectedSystemKeyModifiers = systemKeyModifiers.filter(modifier => keyModifiers.includes(modifier));\n    keyModifiers = keyModifiers.filter(i => !selectedSystemKeyModifiers.includes(i));\n\n    if (selectedSystemKeyModifiers.length > 0) {\n      const activelyPressedKeyModifiers = selectedSystemKeyModifiers.filter(modifier => {\n        // Alias \"cmd\" and \"super\" to \"meta\"\n        if (modifier === 'cmd' || modifier === 'super') modifier = 'meta';\n        return e[`${modifier}Key`];\n      }); // If all the modifiers selected are pressed, ...\n\n      if (activelyPressedKeyModifiers.length === selectedSystemKeyModifiers.length) {\n        // AND the remaining key is pressed as well. It's a press.\n        if (keyModifiers[0] === keyToModifier(e.key)) return false;\n      }\n    } // We'll call it NOT a valid keypress.\n\n\n    return true;\n  }\n\n  function keyToModifier(key) {\n    switch (key) {\n      case '/':\n        return 'slash';\n\n      case ' ':\n      case 'Spacebar':\n        return 'space';\n\n      default:\n        return key && kebabCase(key);\n    }\n  }\n\n  function registerModelListener(component, el, modifiers, expression, extraVars) {\n    // If the element we are binding to is a select, a radio, or checkbox\n    // we'll listen for the change event instead of the \"input\" event.\n    var event = el.tagName.toLowerCase() === 'select' || ['checkbox', 'radio'].includes(el.type) || modifiers.includes('lazy') ? 'change' : 'input';\n    const listenerExpression = `${expression} = rightSideOfExpression($event, ${expression})`;\n    registerListener(component, el, event, modifiers, listenerExpression, () => {\n      return _objectSpread2({}, extraVars(), {\n        rightSideOfExpression: generateModelAssignmentFunction(el, modifiers, expression)\n      });\n    });\n  }\n\n  function generateModelAssignmentFunction(el, modifiers, expression) {\n    if (el.type === 'radio') {\n      // Radio buttons only work properly when they share a name attribute.\n      // People might assume we take care of that for them, because\n      // they already set a shared \"x-model\" attribute.\n      if (!el.hasAttribute('name')) el.setAttribute('name', expression);\n    }\n\n    return (event, currentValue) => {\n      // Check for event.detail due to an issue where IE11 handles other events as a CustomEvent.\n      if (event instanceof CustomEvent && event.detail) {\n        return event.detail;\n      } else if (el.type === 'checkbox') {\n        // If the data we are binding to is an array, toggle it's value inside the array.\n        if (Array.isArray(currentValue)) {\n          return event.target.checked ? currentValue.concat([event.target.value]) : currentValue.filter(i => i !== event.target.value);\n        } else {\n          return event.target.checked;\n        }\n      } else if (el.tagName.toLowerCase() === 'select' && el.multiple) {\n        return modifiers.includes('number') ? Array.from(event.target.selectedOptions).map(option => {\n          const rawValue = option.value || option.text;\n          const number = rawValue ? parseFloat(rawValue) : null;\n          return isNaN(number) ? rawValue : number;\n        }) : Array.from(event.target.selectedOptions).map(option => {\n          return option.value || option.text;\n        });\n      } else {\n        const rawValue = event.target.value;\n        const number = rawValue ? parseFloat(rawValue) : null;\n        return modifiers.includes('number') ? isNaN(number) ? rawValue : number : modifiers.includes('trim') ? rawValue.trim() : rawValue;\n      }\n    };\n  }\n\n  /**\n   * Copyright (C) 2017 salesforce.com, inc.\n   */\n  const { isArray } = Array;\n  const { getPrototypeOf, create: ObjectCreate, defineProperty: ObjectDefineProperty, defineProperties: ObjectDefineProperties, isExtensible, getOwnPropertyDescriptor, getOwnPropertyNames, getOwnPropertySymbols, preventExtensions, hasOwnProperty, } = Object;\n  const { push: ArrayPush, concat: ArrayConcat, map: ArrayMap, } = Array.prototype;\n  function isUndefined(obj) {\n      return obj === undefined;\n  }\n  function isFunction(obj) {\n      return typeof obj === 'function';\n  }\n  function isObject(obj) {\n      return typeof obj === 'object';\n  }\n  const proxyToValueMap = new WeakMap();\n  function registerProxy(proxy, value) {\n      proxyToValueMap.set(proxy, value);\n  }\n  const unwrap = (replicaOrAny) => proxyToValueMap.get(replicaOrAny) || replicaOrAny;\n\n  function wrapValue(membrane, value) {\n      return membrane.valueIsObservable(value) ? membrane.getProxy(value) : value;\n  }\n  /**\n   * Unwrap property descriptors will set value on original descriptor\n   * We only need to unwrap if value is specified\n   * @param descriptor external descrpitor provided to define new property on original value\n   */\n  function unwrapDescriptor(descriptor) {\n      if (hasOwnProperty.call(descriptor, 'value')) {\n          descriptor.value = unwrap(descriptor.value);\n      }\n      return descriptor;\n  }\n  function lockShadowTarget(membrane, shadowTarget, originalTarget) {\n      const targetKeys = ArrayConcat.call(getOwnPropertyNames(originalTarget), getOwnPropertySymbols(originalTarget));\n      targetKeys.forEach((key) => {\n          let descriptor = getOwnPropertyDescriptor(originalTarget, key);\n          // We do not need to wrap the descriptor if configurable\n          // Because we can deal with wrapping it when user goes through\n          // Get own property descriptor. There is also a chance that this descriptor\n          // could change sometime in the future, so we can defer wrapping\n          // until we need to\n          if (!descriptor.configurable) {\n              descriptor = wrapDescriptor(membrane, descriptor, wrapValue);\n          }\n          ObjectDefineProperty(shadowTarget, key, descriptor);\n      });\n      preventExtensions(shadowTarget);\n  }\n  class ReactiveProxyHandler {\n      constructor(membrane, value) {\n          this.originalTarget = value;\n          this.membrane = membrane;\n      }\n      get(shadowTarget, key) {\n          const { originalTarget, membrane } = this;\n          const value = originalTarget[key];\n          const { valueObserved } = membrane;\n          valueObserved(originalTarget, key);\n          return membrane.getProxy(value);\n      }\n      set(shadowTarget, key, value) {\n          const { originalTarget, membrane: { valueMutated } } = this;\n          const oldValue = originalTarget[key];\n          if (oldValue !== value) {\n              originalTarget[key] = value;\n              valueMutated(originalTarget, key);\n          }\n          else if (key === 'length' && isArray(originalTarget)) {\n              // fix for issue #236: push will add the new index, and by the time length\n              // is updated, the internal length is already equal to the new length value\n              // therefore, the oldValue is equal to the value. This is the forking logic\n              // to support this use case.\n              valueMutated(originalTarget, key);\n          }\n          return true;\n      }\n      deleteProperty(shadowTarget, key) {\n          const { originalTarget, membrane: { valueMutated } } = this;\n          delete originalTarget[key];\n          valueMutated(originalTarget, key);\n          return true;\n      }\n      apply(shadowTarget, thisArg, argArray) {\n          /* No op */\n      }\n      construct(target, argArray, newTarget) {\n          /* No op */\n      }\n      has(shadowTarget, key) {\n          const { originalTarget, membrane: { valueObserved } } = this;\n          valueObserved(originalTarget, key);\n          return key in originalTarget;\n      }\n      ownKeys(shadowTarget) {\n          const { originalTarget } = this;\n          return ArrayConcat.call(getOwnPropertyNames(originalTarget), getOwnPropertySymbols(originalTarget));\n      }\n      isExtensible(shadowTarget) {\n          const shadowIsExtensible = isExtensible(shadowTarget);\n          if (!shadowIsExtensible) {\n              return shadowIsExtensible;\n          }\n          const { originalTarget, membrane } = this;\n          const targetIsExtensible = isExtensible(originalTarget);\n          if (!targetIsExtensible) {\n              lockShadowTarget(membrane, shadowTarget, originalTarget);\n          }\n          return targetIsExtensible;\n      }\n      setPrototypeOf(shadowTarget, prototype) {\n      }\n      getPrototypeOf(shadowTarget) {\n          const { originalTarget } = this;\n          return getPrototypeOf(originalTarget);\n      }\n      getOwnPropertyDescriptor(shadowTarget, key) {\n          const { originalTarget, membrane } = this;\n          const { valueObserved } = this.membrane;\n          // keys looked up via hasOwnProperty need to be reactive\n          valueObserved(originalTarget, key);\n          let desc = getOwnPropertyDescriptor(originalTarget, key);\n          if (isUndefined(desc)) {\n              return desc;\n          }\n          const shadowDescriptor = getOwnPropertyDescriptor(shadowTarget, key);\n          if (!isUndefined(shadowDescriptor)) {\n              return shadowDescriptor;\n          }\n          // Note: by accessing the descriptor, the key is marked as observed\n          // but access to the value, setter or getter (if available) cannot observe\n          // mutations, just like regular methods, in which case we just do nothing.\n          desc = wrapDescriptor(membrane, desc, wrapValue);\n          if (!desc.configurable) {\n              // If descriptor from original target is not configurable,\n              // We must copy the wrapped descriptor over to the shadow target.\n              // Otherwise, proxy will throw an invariant error.\n              // This is our last chance to lock the value.\n              // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor#Invariants\n              ObjectDefineProperty(shadowTarget, key, desc);\n          }\n          return desc;\n      }\n      preventExtensions(shadowTarget) {\n          const { originalTarget, membrane } = this;\n          lockShadowTarget(membrane, shadowTarget, originalTarget);\n          preventExtensions(originalTarget);\n          return true;\n      }\n      defineProperty(shadowTarget, key, descriptor) {\n          const { originalTarget, membrane } = this;\n          const { valueMutated } = membrane;\n          const { configurable } = descriptor;\n          // We have to check for value in descriptor\n          // because Object.freeze(proxy) calls this method\n          // with only { configurable: false, writeable: false }\n          // Additionally, method will only be called with writeable:false\n          // if the descriptor has a value, as opposed to getter/setter\n          // So we can just check if writable is present and then see if\n          // value is present. This eliminates getter and setter descriptors\n          if (hasOwnProperty.call(descriptor, 'writable') && !hasOwnProperty.call(descriptor, 'value')) {\n              const originalDescriptor = getOwnPropertyDescriptor(originalTarget, key);\n              descriptor.value = originalDescriptor.value;\n          }\n          ObjectDefineProperty(originalTarget, key, unwrapDescriptor(descriptor));\n          if (configurable === false) {\n              ObjectDefineProperty(shadowTarget, key, wrapDescriptor(membrane, descriptor, wrapValue));\n          }\n          valueMutated(originalTarget, key);\n          return true;\n      }\n  }\n\n  function wrapReadOnlyValue(membrane, value) {\n      return membrane.valueIsObservable(value) ? membrane.getReadOnlyProxy(value) : value;\n  }\n  class ReadOnlyHandler {\n      constructor(membrane, value) {\n          this.originalTarget = value;\n          this.membrane = membrane;\n      }\n      get(shadowTarget, key) {\n          const { membrane, originalTarget } = this;\n          const value = originalTarget[key];\n          const { valueObserved } = membrane;\n          valueObserved(originalTarget, key);\n          return membrane.getReadOnlyProxy(value);\n      }\n      set(shadowTarget, key, value) {\n          return false;\n      }\n      deleteProperty(shadowTarget, key) {\n          return false;\n      }\n      apply(shadowTarget, thisArg, argArray) {\n          /* No op */\n      }\n      construct(target, argArray, newTarget) {\n          /* No op */\n      }\n      has(shadowTarget, key) {\n          const { originalTarget, membrane: { valueObserved } } = this;\n          valueObserved(originalTarget, key);\n          return key in originalTarget;\n      }\n      ownKeys(shadowTarget) {\n          const { originalTarget } = this;\n          return ArrayConcat.call(getOwnPropertyNames(originalTarget), getOwnPropertySymbols(originalTarget));\n      }\n      setPrototypeOf(shadowTarget, prototype) {\n      }\n      getOwnPropertyDescriptor(shadowTarget, key) {\n          const { originalTarget, membrane } = this;\n          const { valueObserved } = membrane;\n          // keys looked up via hasOwnProperty need to be reactive\n          valueObserved(originalTarget, key);\n          let desc = getOwnPropertyDescriptor(originalTarget, key);\n          if (isUndefined(desc)) {\n              return desc;\n          }\n          const shadowDescriptor = getOwnPropertyDescriptor(shadowTarget, key);\n          if (!isUndefined(shadowDescriptor)) {\n              return shadowDescriptor;\n          }\n          // Note: by accessing the descriptor, the key is marked as observed\n          // but access to the value or getter (if available) cannot be observed,\n          // just like regular methods, in which case we just do nothing.\n          desc = wrapDescriptor(membrane, desc, wrapReadOnlyValue);\n          if (hasOwnProperty.call(desc, 'set')) {\n              desc.set = undefined; // readOnly membrane does not allow setters\n          }\n          if (!desc.configurable) {\n              // If descriptor from original target is not configurable,\n              // We must copy the wrapped descriptor over to the shadow target.\n              // Otherwise, proxy will throw an invariant error.\n              // This is our last chance to lock the value.\n              // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor#Invariants\n              ObjectDefineProperty(shadowTarget, key, desc);\n          }\n          return desc;\n      }\n      preventExtensions(shadowTarget) {\n          return false;\n      }\n      defineProperty(shadowTarget, key, descriptor) {\n          return false;\n      }\n  }\n  function createShadowTarget(value) {\n      let shadowTarget = undefined;\n      if (isArray(value)) {\n          shadowTarget = [];\n      }\n      else if (isObject(value)) {\n          shadowTarget = {};\n      }\n      return shadowTarget;\n  }\n  const ObjectDotPrototype = Object.prototype;\n  function defaultValueIsObservable(value) {\n      // intentionally checking for null\n      if (value === null) {\n          return false;\n      }\n      // treat all non-object types, including undefined, as non-observable values\n      if (typeof value !== 'object') {\n          return false;\n      }\n      if (isArray(value)) {\n          return true;\n      }\n      const proto = getPrototypeOf(value);\n      return (proto === ObjectDotPrototype || proto === null || getPrototypeOf(proto) === null);\n  }\n  const defaultValueObserved = (obj, key) => {\n      /* do nothing */\n  };\n  const defaultValueMutated = (obj, key) => {\n      /* do nothing */\n  };\n  const defaultValueDistortion = (value) => value;\n  function wrapDescriptor(membrane, descriptor, getValue) {\n      const { set, get } = descriptor;\n      if (hasOwnProperty.call(descriptor, 'value')) {\n          descriptor.value = getValue(membrane, descriptor.value);\n      }\n      else {\n          if (!isUndefined(get)) {\n              descriptor.get = function () {\n                  // invoking the original getter with the original target\n                  return getValue(membrane, get.call(unwrap(this)));\n              };\n          }\n          if (!isUndefined(set)) {\n              descriptor.set = function (value) {\n                  // At this point we don't have a clear indication of whether\n                  // or not a valid mutation will occur, we don't have the key,\n                  // and we are not sure why and how they are invoking this setter.\n                  // Nevertheless we preserve the original semantics by invoking the\n                  // original setter with the original target and the unwrapped value\n                  set.call(unwrap(this), membrane.unwrapProxy(value));\n              };\n          }\n      }\n      return descriptor;\n  }\n  class ReactiveMembrane {\n      constructor(options) {\n          this.valueDistortion = defaultValueDistortion;\n          this.valueMutated = defaultValueMutated;\n          this.valueObserved = defaultValueObserved;\n          this.valueIsObservable = defaultValueIsObservable;\n          this.objectGraph = new WeakMap();\n          if (!isUndefined(options)) {\n              const { valueDistortion, valueMutated, valueObserved, valueIsObservable } = options;\n              this.valueDistortion = isFunction(valueDistortion) ? valueDistortion : defaultValueDistortion;\n              this.valueMutated = isFunction(valueMutated) ? valueMutated : defaultValueMutated;\n              this.valueObserved = isFunction(valueObserved) ? valueObserved : defaultValueObserved;\n              this.valueIsObservable = isFunction(valueIsObservable) ? valueIsObservable : defaultValueIsObservable;\n          }\n      }\n      getProxy(value) {\n          const unwrappedValue = unwrap(value);\n          const distorted = this.valueDistortion(unwrappedValue);\n          if (this.valueIsObservable(distorted)) {\n              const o = this.getReactiveState(unwrappedValue, distorted);\n              // when trying to extract the writable version of a readonly\n              // we return the readonly.\n              return o.readOnly === value ? value : o.reactive;\n          }\n          return distorted;\n      }\n      getReadOnlyProxy(value) {\n          value = unwrap(value);\n          const distorted = this.valueDistortion(value);\n          if (this.valueIsObservable(distorted)) {\n              return this.getReactiveState(value, distorted).readOnly;\n          }\n          return distorted;\n      }\n      unwrapProxy(p) {\n          return unwrap(p);\n      }\n      getReactiveState(value, distortedValue) {\n          const { objectGraph, } = this;\n          let reactiveState = objectGraph.get(distortedValue);\n          if (reactiveState) {\n              return reactiveState;\n          }\n          const membrane = this;\n          reactiveState = {\n              get reactive() {\n                  const reactiveHandler = new ReactiveProxyHandler(membrane, distortedValue);\n                  // caching the reactive proxy after the first time it is accessed\n                  const proxy = new Proxy(createShadowTarget(distortedValue), reactiveHandler);\n                  registerProxy(proxy, value);\n                  ObjectDefineProperty(this, 'reactive', { value: proxy });\n                  return proxy;\n              },\n              get readOnly() {\n                  const readOnlyHandler = new ReadOnlyHandler(membrane, distortedValue);\n                  // caching the readOnly proxy after the first time it is accessed\n                  const proxy = new Proxy(createShadowTarget(distortedValue), readOnlyHandler);\n                  registerProxy(proxy, value);\n                  ObjectDefineProperty(this, 'readOnly', { value: proxy });\n                  return proxy;\n              }\n          };\n          objectGraph.set(distortedValue, reactiveState);\n          return reactiveState;\n      }\n  }\n  /** version: 0.26.0 */\n\n  function wrap(data, mutationCallback) {\n\n    let membrane = new ReactiveMembrane({\n      valueMutated(target, key) {\n        mutationCallback(target, key);\n      }\n\n    });\n    return {\n      data: membrane.getProxy(data),\n      membrane: membrane\n    };\n  }\n  function unwrap$1(membrane, observable) {\n    let unwrappedData = membrane.unwrapProxy(observable);\n    let copy = {};\n    Object.keys(unwrappedData).forEach(key => {\n      if (['$el', '$refs', '$nextTick', '$watch'].includes(key)) return;\n      copy[key] = unwrappedData[key];\n    });\n    return copy;\n  }\n\n  class Component {\n    constructor(el, seedDataForCloning = null) {\n      this.$el = el;\n      const dataAttr = this.$el.getAttribute('x-data');\n      const dataExpression = dataAttr === '' ? '{}' : dataAttr;\n      const initExpression = this.$el.getAttribute('x-init');\n      this.unobservedData = seedDataForCloning ? seedDataForCloning : saferEval(dataExpression, {});\n      // Construct a Proxy-based observable. This will be used to handle reactivity.\n\n      let {\n        membrane,\n        data\n      } = this.wrapDataInObservable(this.unobservedData);\n      this.$data = data;\n      this.membrane = membrane; // After making user-supplied data methods reactive, we can now add\n      // our magic properties to the original data for access.\n\n      this.unobservedData.$el = this.$el;\n      this.unobservedData.$refs = this.getRefsProxy();\n      this.nextTickStack = [];\n\n      this.unobservedData.$nextTick = callback => {\n        this.nextTickStack.push(callback);\n      };\n\n      this.watchers = {};\n\n      this.unobservedData.$watch = (property, callback) => {\n        if (!this.watchers[property]) this.watchers[property] = [];\n        this.watchers[property].push(callback);\n      };\n\n      this.showDirectiveStack = [];\n      this.showDirectiveLastElement;\n      var initReturnedCallback; // If x-init is present AND we aren't cloning (skip x-init on clone)\n\n      if (initExpression && !seedDataForCloning) {\n        // We want to allow data manipulation, but not trigger DOM updates just yet.\n        // We haven't even initialized the elements with their Alpine bindings. I mean c'mon.\n        this.pauseReactivity = true;\n        initReturnedCallback = this.evaluateReturnExpression(this.$el, initExpression);\n        this.pauseReactivity = false;\n      } // Register all our listeners and set all our attribute bindings.\n\n\n      this.initializeElements(this.$el); // Use mutation observer to detect new elements being added within this component at run-time.\n      // Alpine's just so darn flexible amirite?\n\n      this.listenForNewElementsToInitialize();\n\n      if (typeof initReturnedCallback === 'function') {\n        // Run the callback returned from the \"x-init\" hook to allow the user to do stuff after\n        // Alpine's got it's grubby little paws all over everything.\n        initReturnedCallback.call(this.$data);\n      }\n    }\n\n    getUnobservedData() {\n      return unwrap$1(this.membrane, this.$data);\n    }\n\n    wrapDataInObservable(data) {\n      var self = this;\n      let updateDom = debounce(function () {\n        self.updateElements(self.$el);\n      }, 0);\n      return wrap(data, (target, key) => {\n        if (self.watchers[key]) {\n          // If there's a watcher for this specific key, run it.\n          self.watchers[key].forEach(callback => callback(target[key]));\n        } else {\n          // Let's walk through the watchers with \"dot-notation\" (foo.bar) and see\n          // if this mutation fits any of them.\n          Object.keys(self.watchers).filter(i => i.includes('.')).forEach(fullDotNotationKey => {\n            let dotNotationParts = fullDotNotationKey.split('.'); // If this dot-notation watcher's last \"part\" doesn't match the current\n            // key, then skip it early for performance reasons.\n\n            if (key !== dotNotationParts[dotNotationParts.length - 1]) return; // Now, walk through the dot-notation \"parts\" recursively to find\n            // a match, and call the watcher if one's found.\n\n            dotNotationParts.reduce((comparisonData, part) => {\n              if (Object.is(target, comparisonData)) {\n                // Run the watchers.\n                self.watchers[fullDotNotationKey].forEach(callback => callback(target[key]));\n              }\n\n              return comparisonData[part];\n            }, self.getUnobservedData());\n          });\n        } // Don't react to data changes for cases like the `x-created` hook.\n\n\n        if (self.pauseReactivity) return;\n        updateDom();\n      });\n    }\n\n    walkAndSkipNestedComponents(el, callback, initializeComponentCallback = () => {}) {\n      walk(el, el => {\n        // We've hit a component.\n        if (el.hasAttribute('x-data')) {\n          // If it's not the current one.\n          if (!el.isSameNode(this.$el)) {\n            // Initialize it if it's not.\n            if (!el.__x) initializeComponentCallback(el); // Now we'll let that sub-component deal with itself.\n\n            return false;\n          }\n        }\n\n        return callback(el);\n      });\n    }\n\n    initializeElements(rootEl, extraVars = () => {}) {\n      this.walkAndSkipNestedComponents(rootEl, el => {\n        // Don't touch spawns from for loop\n        if (el.__x_for_key !== undefined) return false; // Don't touch spawns from if directives\n\n        if (el.__x_inserted_me !== undefined) return false;\n        this.initializeElement(el, extraVars);\n      }, el => {\n        el.__x = new Component(el);\n      });\n      this.executeAndClearRemainingShowDirectiveStack();\n      this.executeAndClearNextTickStack(rootEl);\n    }\n\n    initializeElement(el, extraVars) {\n      // To support class attribute merging, we have to know what the element's\n      // original class attribute looked like for reference.\n      if (el.hasAttribute('class') && getXAttrs(el).length > 0) {\n        el.__x_original_classes = el.getAttribute('class').split(' ');\n      }\n\n      this.registerListeners(el, extraVars);\n      this.resolveBoundAttributes(el, true, extraVars);\n    }\n\n    updateElements(rootEl, extraVars = () => {}) {\n      this.walkAndSkipNestedComponents(rootEl, el => {\n        // Don't touch spawns from for loop (and check if the root is actually a for loop in a parent, don't skip it.)\n        if (el.__x_for_key !== undefined && !el.isSameNode(this.$el)) return false;\n        this.updateElement(el, extraVars);\n      }, el => {\n        el.__x = new Component(el);\n      });\n      this.executeAndClearRemainingShowDirectiveStack();\n      this.executeAndClearNextTickStack(rootEl);\n    }\n\n    executeAndClearNextTickStack(el) {\n      // Skip spawns from alpine directives\n      if (el === this.$el) {\n        // Walk through the $nextTick stack and clear it as we go.\n        while (this.nextTickStack.length > 0) {\n          this.nextTickStack.shift()();\n        }\n      }\n    }\n\n    executeAndClearRemainingShowDirectiveStack() {\n      // The goal here is to start all the x-show transitions\n      // and build a nested promise chain so that elements\n      // only hide when the children are finished hiding.\n      this.showDirectiveStack.reverse().map(thing => {\n        return new Promise(resolve => {\n          thing(finish => {\n            resolve(finish);\n          });\n        });\n      }).reduce((nestedPromise, promise) => {\n        return nestedPromise.then(() => {\n          return promise.then(finish => finish());\n        });\n      }, Promise.resolve(() => {})); // We've processed the handler stack. let's clear it.\n\n      this.showDirectiveStack = [];\n      this.showDirectiveLastElement = undefined;\n    }\n\n    updateElement(el, extraVars) {\n      this.resolveBoundAttributes(el, false, extraVars);\n    }\n\n    registerListeners(el, extraVars) {\n      getXAttrs(el).forEach(({\n        type,\n        value,\n        modifiers,\n        expression\n      }) => {\n        switch (type) {\n          case 'on':\n            registerListener(this, el, value, modifiers, expression, extraVars);\n            break;\n\n          case 'model':\n            registerModelListener(this, el, modifiers, expression, extraVars);\n            break;\n        }\n      });\n    }\n\n    resolveBoundAttributes(el, initialUpdate = false, extraVars) {\n      let attrs = getXAttrs(el);\n\n      if (el.type !== undefined && el.type === 'radio') {\n        // If there's an x-model on a radio input, move it to end of attribute list\n        // to ensure that x-bind:value (if present) is processed first.\n        const modelIdx = attrs.findIndex(attr => attr.type === 'model');\n\n        if (modelIdx > -1) {\n          attrs.push(attrs.splice(modelIdx, 1)[0]);\n        }\n      }\n\n      attrs.forEach(({\n        type,\n        value,\n        modifiers,\n        expression\n      }) => {\n        switch (type) {\n          case 'model':\n            handleAttributeBindingDirective(this, el, 'value', expression, extraVars, type);\n            break;\n\n          case 'bind':\n            // The :key binding on an x-for is special, ignore it.\n            if (el.tagName.toLowerCase() === 'template' && value === 'key') return;\n            handleAttributeBindingDirective(this, el, value, expression, extraVars, type);\n            break;\n\n          case 'text':\n            var output = this.evaluateReturnExpression(el, expression, extraVars);\n            handleTextDirective(el, output, expression);\n            break;\n\n          case 'html':\n            handleHtmlDirective(this, el, expression, extraVars);\n            break;\n\n          case 'show':\n            var output = this.evaluateReturnExpression(el, expression, extraVars);\n            handleShowDirective(this, el, output, modifiers, initialUpdate);\n            break;\n\n          case 'if':\n            // If this element also has x-for on it, don't process x-if.\n            // We will let the \"x-for\" directive handle the \"if\"ing.\n            if (attrs.filter(i => i.type === 'for').length > 0) return;\n            var output = this.evaluateReturnExpression(el, expression, extraVars);\n            handleIfDirective(this, el, output, initialUpdate, extraVars);\n            break;\n\n          case 'for':\n            handleForDirective(this, el, expression, initialUpdate, extraVars);\n            break;\n\n          case 'cloak':\n            el.removeAttribute('x-cloak');\n            break;\n        }\n      });\n    }\n\n    evaluateReturnExpression(el, expression, extraVars = () => {}) {\n      return saferEval(expression, this.$data, _objectSpread2({}, extraVars(), {\n        $dispatch: this.getDispatchFunction(el)\n      }));\n    }\n\n    evaluateCommandExpression(el, expression, extraVars = () => {}) {\n      return saferEvalNoReturn(expression, this.$data, _objectSpread2({}, extraVars(), {\n        $dispatch: this.getDispatchFunction(el)\n      }));\n    }\n\n    getDispatchFunction(el) {\n      return (event, detail = {}) => {\n        el.dispatchEvent(new CustomEvent(event, {\n          detail,\n          bubbles: true\n        }));\n      };\n    }\n\n    listenForNewElementsToInitialize() {\n      const targetNode = this.$el;\n      const observerOptions = {\n        childList: true,\n        attributes: true,\n        subtree: true\n      };\n      const observer = new MutationObserver(mutations => {\n        for (let i = 0; i < mutations.length; i++) {\n          // Filter out mutations triggered from child components.\n          const closestParentComponent = mutations[i].target.closest('[x-data]');\n          if (!(closestParentComponent && closestParentComponent.isSameNode(this.$el))) continue;\n\n          if (mutations[i].type === 'attributes' && mutations[i].attributeName === 'x-data') {\n            const rawData = saferEval(mutations[i].target.getAttribute('x-data'), {});\n            Object.keys(rawData).forEach(key => {\n              if (this.$data[key] !== rawData[key]) {\n                this.$data[key] = rawData[key];\n              }\n            });\n          }\n\n          if (mutations[i].addedNodes.length > 0) {\n            mutations[i].addedNodes.forEach(node => {\n              if (node.nodeType !== 1 || node.__x_inserted_me) return;\n\n              if (node.matches('[x-data]')) {\n                node.__x = new Component(node);\n                return;\n              }\n\n              this.initializeElements(node);\n            });\n          }\n        }\n      });\n      observer.observe(targetNode, observerOptions);\n    }\n\n    getRefsProxy() {\n      var self = this;\n      var refObj = {};\n      // One of the goals of this is to not hold elements in memory, but rather re-evaluate\n      // the DOM when the system needs something from it. This way, the framework is flexible and\n      // friendly to outside DOM changes from libraries like Vue/Livewire.\n      // For this reason, I'm using an \"on-demand\" proxy to fake a \"$refs\" object.\n\n      return new Proxy(refObj, {\n        get(object, property) {\n          if (property === '$isAlpineProxy') return true;\n          var ref; // We can't just query the DOM because it's hard to filter out refs in\n          // nested components.\n\n          self.walkAndSkipNestedComponents(self.$el, el => {\n            if (el.hasAttribute('x-ref') && el.getAttribute('x-ref') === property) {\n              ref = el;\n            }\n          });\n          return ref;\n        }\n\n      });\n    }\n\n  }\n\n  const Alpine = {\n    version: \"2.3.3\",\n    start: async function start() {\n      if (!isTesting()) {\n        await domReady();\n      }\n\n      this.discoverComponents(el => {\n        this.initializeComponent(el);\n      }); // It's easier and more performant to just support Turbolinks than listen\n      // to MutationObserver mutations at the document level.\n\n      document.addEventListener(\"turbolinks:load\", () => {\n        this.discoverUninitializedComponents(el => {\n          this.initializeComponent(el);\n        });\n      });\n      this.listenForNewUninitializedComponentsAtRunTime(el => {\n        this.initializeComponent(el);\n      });\n    },\n    discoverComponents: function discoverComponents(callback) {\n      const rootEls = document.querySelectorAll('[x-data]');\n      rootEls.forEach(rootEl => {\n        callback(rootEl);\n      });\n    },\n    discoverUninitializedComponents: function discoverUninitializedComponents(callback, el = null) {\n      const rootEls = (el || document).querySelectorAll('[x-data]');\n      Array.from(rootEls).filter(el => el.__x === undefined).forEach(rootEl => {\n        callback(rootEl);\n      });\n    },\n    listenForNewUninitializedComponentsAtRunTime: function listenForNewUninitializedComponentsAtRunTime(callback) {\n      const targetNode = document.querySelector('body');\n      const observerOptions = {\n        childList: true,\n        attributes: true,\n        subtree: true\n      };\n      const observer = new MutationObserver(mutations => {\n        for (let i = 0; i < mutations.length; i++) {\n          if (mutations[i].addedNodes.length > 0) {\n            mutations[i].addedNodes.forEach(node => {\n              // Discard non-element nodes (like line-breaks)\n              if (node.nodeType !== 1) return; // Discard any changes happening within an existing component.\n              // They will take care of themselves.\n\n              if (node.parentElement && node.parentElement.closest('[x-data]')) return;\n              this.discoverUninitializedComponents(el => {\n                this.initializeComponent(el);\n              }, node.parentElement);\n            });\n          }\n        }\n      });\n      observer.observe(targetNode, observerOptions);\n    },\n    initializeComponent: function initializeComponent(el) {\n      if (!el.__x) {\n        el.__x = new Component(el);\n      }\n    },\n    clone: function clone(component, newEl) {\n      if (!newEl.__x) {\n        newEl.__x = new Component(newEl, component.getUnobservedData());\n      }\n    }\n  };\n\n  if (!isTesting()) {\n    window.Alpine = Alpine;\n\n    if (window.deferLoadingAlpine) {\n      window.deferLoadingAlpine(function () {\n        window.Alpine.start();\n      });\n    } else {\n      window.Alpine.start();\n    }\n  }\n\n  return Alpine;\n\n})));\n"]}
\ No newline at end of file
diff --git a/themes/default/public/js/lufi-common.js b/themes/default/public/js/lufi-common.js
index 39bb44a..65cd2b0 100644
--- a/themes/default/public/js/lufi-common.js
+++ b/themes/default/public/js/lufi-common.js
@@ -14,8 +14,8 @@ function escapeHtml(string) {
         return entityMap[s];
     });
 }
-function changeLang() {
-    window.location = langUrl+$(this).val();
+function changeLang(lang) {
+    window.location = langUrl+lang;
 }
 $(document).ready(function(){
     $('select').material_select();
diff --git a/themes/default/tailwindcss/.gitignore b/themes/default/tailwindcss/.gitignore
new file mode 100644
index 0000000..8d87b1d
--- /dev/null
+++ b/themes/default/tailwindcss/.gitignore
@@ -0,0 +1 @@
+node_modules/*
diff --git a/themes/default/tailwindcss/Makefile b/themes/default/tailwindcss/Makefile
new file mode 100644
index 0000000..14534f6
--- /dev/null
+++ b/themes/default/tailwindcss/Makefile
@@ -0,0 +1,18 @@
+all: minify
+
+build:
+	@NODE_ENV=production npx tailwindcss build styles.css -c tailwind.config.js -o ../public/css/tailwindcss.css
+
+minify: build
+	@npx csso ../public/css/tailwindcss.css -o ../public/css/tailwindcss.min.css
+	@ls -lh ../public/css/tailwindcss*.css
+
+watch: all
+	@inotify-hookable -f tailwind.config.js -f styles.css -w ../templates -c "make" 2>/dev/null
+
+first-install:
+	yarn add csso-cli tailwindcss
+	npx tailwindcss init --full
+
+install:
+	yarn install --production --pure-lockfile
diff --git a/themes/default/tailwindcss/package.json b/themes/default/tailwindcss/package.json
new file mode 100644
index 0000000..5605ad3
--- /dev/null
+++ b/themes/default/tailwindcss/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "csso-cli": "^3.0.0",
+    "tailwindcss": "^1.4.5"
+  }
+}
diff --git a/themes/default/tailwindcss/styles.css b/themes/default/tailwindcss/styles.css
new file mode 100644
index 0000000..b279f58
--- /dev/null
+++ b/themes/default/tailwindcss/styles.css
@@ -0,0 +1,240 @@
+@tailwind base;
+
+/* Recreate some normal files */
+h1 {
+    @apply text-2xl;
+}
+h2 {
+    @apply text-xl;
+}
+h3 {
+    @apply text-lg;
+}
+@tailwind components;
+
+/* Default */
+body {
+    @apply bg-cover;
+    background-image: repeating-linear-gradient(135deg, #00000033, #00000033 63%, transparent 63%, transparent),
+                      url('../img/backgrounds/only-komona.jpg');
+    @apply text-white;
+    @apply min-h-screen;
+}
+body > * {
+    @apply px-4;
+}
+body.rtl {
+    direction: rtl;
+}
+a {
+    @apply underline;
+    text-decoration-style: dotted;
+}
+select {
+    @apply appearance-none;
+    @apply block appearance-none w-full;
+    @apply border border-gray-200 rounded;
+}
+
+/* Navbar */
+.navbar {
+    @apply bg-gray-800 bg-opacity-75;
+    @apply w-full;
+    @apply text-base uppercase;
+}
+.navbar .navbrand {
+    @apply font-bold;
+}
+.navbar ul li.navbrand * {
+    @apply border-none;
+}
+.navbar ul li {
+    @apply px-2 py-1;
+}
+.navbar ul li * {
+    @apply align-middle;
+    @apply no-underline;
+    @apply border-solid border-gray-400 border-b-4;
+}
+.navbar ul li.active {
+    @apply font-bold;
+}
+.navbar ul li.active * {
+    @apply border-solid border-teal-400 border-b-4;
+    @apply no-underline;
+}
+.navbar ul li.lang-dropdown {
+    @apply relative;
+}
+.navbar ul li.lang-dropdown * {
+    @apply border-opacity-0;
+}
+.lang-dropdown span,
+.lang-dropdown li {
+    @apply cursor-pointer;
+}
+.lang-dropdown span {
+    display: ruby;
+}
+.navbar ul li.lang-dropdown ul {
+    @apply bg-gray-800 bg-opacity-100;
+    @apply absolute;
+    @apply mt-1;
+    white-space: nowrap;
+}
+/* Not index page */
+.block-div {
+    @apply bg-gray-900 bg-opacity-75;
+    @apply mt-4 p-4 w-auto mx-auto;
+    @apply grid grid-cols-1;
+    max-width: 60rem;
+}
+.block-div a {
+    @apply text-teal-200;
+}
+.block-div a:visited {
+    @apply text-purple-400;
+}
+
+/* My files page */
+.block-div.myfiles hr {
+    @apply mb-2;
+}
+.block-div.myfiles {
+    @apply leading-tight;
+}
+.files-buttons {
+    @apply my-4 grid grid-cols-1 gap-2;
+    @apply text-center;
+}
+@screen lg {
+    .files-buttons {
+        @apply mt-4 grid grid-cols-2;
+    }
+}
+.files-buttons .btn {
+    @apply w-full;
+}
+
+/* Index page */
+.upload {
+    @apply my-4 grid grid-cols-1 gap-2;
+}
+@screen lg {
+    .upload {
+        @apply mt-4 grid grid-cols-2;
+    }
+}
+@screen xl {
+    .upload {
+        @apply mt-4 grid grid-cols-3;
+    }
+    .upload #results {
+        @apply col-span-2;
+    }
+}
+.upload .upload-form {
+    @apply bg-gray-900 bg-opacity-75;
+    @apply rounded-md;
+    @apply p-4;
+}
+@screen md {
+    .upload .upload-form {
+        @apply leading-relaxed;
+    }
+}
+@screen lg {
+    .upload .upload-form {
+        @apply leading-loose;
+    }
+}
+.upload .upload-form select {
+    @apply leading-normal;
+}
+.upload .upload-form input {
+    @apply pl-2;
+    @apply leading-relaxed;
+}
+.upload .upload-form select,
+.upload .upload-form input,
+.upload .upload-form {
+    @apply bg-gray-700 bg-opacity-75;
+}
+.upload #results h1 {
+    @apply text-xl text-center;
+}
+.upload .upload-form .input-field {
+    @apply relative;
+}
+.upload .upload-form [type="checkbox"] {
+    @apply w-4 h-4;
+}
+
+.upload #files {
+    @apply text-center;
+    @apply mt-4 p-4;
+    @apply border-2 border-gray-200 border-dashed;
+}
+
+.upload #results {
+    @apply bg-gray-700 bg-opacity-75;
+    @apply rounded-md;
+    @apply p-4 mx-10;
+}
+
+/* Buttons */
+.btn,
+.btn a {
+    @apply text-white text-center no-underline !important;
+}
+.btn {
+    @apply bg-transparent;
+    @apply font-bold;
+    @apply py-1 px-2;
+    @apply border-2 border-teal-500 rounded;
+    @apply text-white text-center no-underline !important;
+}
+.btn:hover {
+    @apply bg-teal-800 bg-opacity-75;
+    @apply border-teal-800;
+}
+.btn.disabled {
+    @apply opacity-50 cursor-not-allowed;
+}
+
+/* Icons */
+svg {
+    @apply h-4 w-4;
+    @apply text-white;
+}
+svg.icon-hamburger {
+    @apply h-8 w-8;
+}
+svg.icon-infos {
+    @apply text-teal-200 inline-block;
+}
+svg.icon-upload {
+    @apply mx-auto;
+    @apply rounded-full border border-gray-200 border-8;
+    @apply h-32 w-32;
+    @apply text-gray-200;
+}
+
+/* Cards */
+.card {
+    @apply p-4 mt-4;
+}
+.card.mini {
+    @apply pl-1 pr-0 py-0 my-1;
+}
+.card.error {
+    @apply bg-orange-100;
+    @apply text-orange-700;
+    @apply border-l-4 border-orange-500;
+}
+.card.info {
+    @apply bg-blue-100;
+    @apply text-blue-700;
+    @apply border-l-4 border-blue-500;
+}
+@tailwind utilities;
diff --git a/themes/default/tailwindcss/tailwind.config.js b/themes/default/tailwindcss/tailwind.config.js
new file mode 100644
index 0000000..66146c7
--- /dev/null
+++ b/themes/default/tailwindcss/tailwind.config.js
@@ -0,0 +1,730 @@
+module.exports = {
+  purge: [
+      '../templates/*.ep',
+      '../templates/*/*.ep',
+  ],
+  target: 'relaxed',
+  prefix: '',
+  important: false,
+  separator: ':',
+  theme: {
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+    },
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+
+      black: '#000',
+      white: '#fff',
+
+      gray: {
+        100: '#f7fafc',
+        200: '#edf2f7',
+        300: '#e2e8f0',
+        400: '#cbd5e0',
+        500: '#a0aec0',
+        600: '#718096',
+        700: '#4a5568',
+        800: '#2d3748',
+        900: '#1a202c',
+      },
+      red: {
+        100: '#fff5f5',
+        200: '#fed7d7',
+        300: '#feb2b2',
+        400: '#fc8181',
+        500: '#f56565',
+        600: '#e53e3e',
+        700: '#c53030',
+        800: '#9b2c2c',
+        900: '#742a2a',
+      },
+      orange: {
+        100: '#fffaf0',
+        200: '#feebc8',
+        300: '#fbd38d',
+        400: '#f6ad55',
+        500: '#ed8936',
+        600: '#dd6b20',
+        700: '#c05621',
+        800: '#9c4221',
+        900: '#7b341e',
+      },
+      yellow: {
+        100: '#fffff0',
+        200: '#fefcbf',
+        300: '#faf089',
+        400: '#f6e05e',
+        500: '#ecc94b',
+        600: '#d69e2e',
+        700: '#b7791f',
+        800: '#975a16',
+        900: '#744210',
+      },
+      green: {
+        100: '#f0fff4',
+        200: '#c6f6d5',
+        300: '#9ae6b4',
+        400: '#68d391',
+        500: '#48bb78',
+        600: '#38a169',
+        700: '#2f855a',
+        800: '#276749',
+        900: '#22543d',
+      },
+      teal: {
+        100: '#e6fffa',
+        200: '#b2f5ea',
+        300: '#81e6d9',
+        400: '#4fd1c5',
+        500: '#38b2ac',
+        600: '#319795',
+        700: '#2c7a7b',
+        800: '#285e61',
+        900: '#234e52',
+      },
+      blue: {
+        100: '#ebf8ff',
+        200: '#bee3f8',
+        300: '#90cdf4',
+        400: '#63b3ed',
+        500: '#4299e1',
+        600: '#3182ce',
+        700: '#2b6cb0',
+        800: '#2c5282',
+        900: '#2a4365',
+      },
+      indigo: {
+        100: '#ebf4ff',
+        200: '#c3dafe',
+        300: '#a3bffa',
+        400: '#7f9cf5',
+        500: '#667eea',
+        600: '#5a67d8',
+        700: '#4c51bf',
+        800: '#434190',
+        900: '#3c366b',
+      },
+      purple: {
+        100: '#faf5ff',
+        200: '#e9d8fd',
+        300: '#d6bcfa',
+        400: '#b794f4',
+        500: '#9f7aea',
+        600: '#805ad5',
+        700: '#6b46c1',
+        800: '#553c9a',
+        900: '#44337a',
+      },
+      pink: {
+        100: '#fff5f7',
+        200: '#fed7e2',
+        300: '#fbb6ce',
+        400: '#f687b3',
+        500: '#ed64a6',
+        600: '#d53f8c',
+        700: '#b83280',
+        800: '#97266d',
+        900: '#702459',
+      },
+    },
+    spacing: {
+      px: '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem',
+      '20': '5rem',
+      '24': '6rem',
+      '32': '8rem',
+      '40': '10rem',
+      '48': '12rem',
+      '56': '14rem',
+      '64': '16rem',
+    },
+    backgroundColor: theme => theme('colors'),
+    backgroundOpacity: theme => theme('opacity'),
+    backgroundPosition: {
+      bottom: 'bottom',
+      center: 'center',
+      left: 'left',
+      'left-bottom': 'left bottom',
+      'left-top': 'left top',
+      right: 'right',
+      'right-bottom': 'right bottom',
+      'right-top': 'right top',
+      top: 'top',
+    },
+    backgroundSize: {
+      auto: 'auto',
+      cover: 'cover',
+      contain: 'contain',
+    },
+    borderColor: theme => ({
+      ...theme('colors'),
+      default: theme('colors.gray.300', 'currentColor'),
+    }),
+    borderOpacity: theme => theme('opacity'),
+    borderRadius: {
+      none: '0',
+      sm: '0.125rem',
+      default: '0.25rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      full: '9999px',
+    },
+    borderWidth: {
+      default: '1px',
+      '0': '0',
+      '2': '2px',
+      '4': '4px',
+      '8': '8px',
+    },
+    boxShadow: {
+      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
+      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+      default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
+      none: 'none',
+    },
+    container: {},
+    cursor: {
+      auto: 'auto',
+      default: 'default',
+      pointer: 'pointer',
+      wait: 'wait',
+      text: 'text',
+      move: 'move',
+      'not-allowed': 'not-allowed',
+    },
+    divideColor: theme => theme('borderColor'),
+    divideOpacity: theme => theme('borderOpacity'),
+    divideWidth: theme => theme('borderWidth'),
+    fill: {
+      current: 'currentColor',
+    },
+    flex: {
+      '1': '1 1 0%',
+      auto: '1 1 auto',
+      initial: '0 1 auto',
+      none: 'none',
+    },
+    flexGrow: {
+      '0': '0',
+      default: '1',
+    },
+    flexShrink: {
+      '0': '0',
+      default: '1',
+    },
+    fontFamily: {
+      sans: [
+        'system-ui',
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        '"Noto Sans"',
+        'sans-serif',
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+        '"Noto Color Emoji"',
+      ],
+      serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+      mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
+    },
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
+    },
+    fontWeight: {
+      hairline: '100',
+      thin: '200',
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900',
+    },
+    height: theme => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      full: '100%',
+      screen: '100vh',
+    }),
+    inset: {
+      '0': '0',
+      auto: 'auto',
+    },
+    letterSpacing: {
+      tighter: '-0.05em',
+      tight: '-0.025em',
+      normal: '0',
+      wide: '0.025em',
+      wider: '0.05em',
+      widest: '0.1em',
+    },
+    lineHeight: {
+      none: '1',
+      tight: '1.25',
+      snug: '1.375',
+      normal: '1.5',
+      relaxed: '1.625',
+      loose: '2',
+      '3': '.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '7': '1.75rem',
+      '8': '2rem',
+      '9': '2.25rem',
+      '10': '2.5rem',
+    },
+    listStyleType: {
+      none: 'none',
+      disc: 'disc',
+      decimal: 'decimal',
+    },
+    margin: (theme, { negative }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+    }),
+    maxHeight: {
+      full: '100%',
+      screen: '100vh',
+    },
+    maxWidth: (theme, { breakpoints }) => ({
+      none: 'none',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      full: '100%',
+      ...breakpoints(theme('screens')),
+    }),
+    minHeight: {
+      '0': '0',
+      full: '100%',
+      screen: '100vh',
+    },
+    minWidth: {
+      '0': '0',
+      full: '100%',
+    },
+    objectPosition: {
+      bottom: 'bottom',
+      center: 'center',
+      left: 'left',
+      'left-bottom': 'left bottom',
+      'left-top': 'left top',
+      right: 'right',
+      'right-bottom': 'right bottom',
+      'right-top': 'right top',
+      top: 'top',
+    },
+    opacity: {
+      '0': '0',
+      '25': '0.25',
+      '50': '0.5',
+      '75': '0.75',
+      '100': '1',
+    },
+    order: {
+      first: '-9999',
+      last: '9999',
+      none: '0',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
+    },
+    padding: theme => theme('spacing'),
+    placeholderColor: theme => theme('colors'),
+    placeholderOpacity: theme => theme('opacity'),
+    space: (theme, { negative }) => ({
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+    }),
+    stroke: {
+      current: 'currentColor',
+    },
+    strokeWidth: {
+      '0': '0',
+      '1': '1',
+      '2': '2',
+    },
+    textColor: theme => theme('colors'),
+    textOpacity: theme => theme('opacity'),
+    width: theme => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.666667%',
+      '2/6': '33.333333%',
+      '3/6': '50%',
+      '4/6': '66.666667%',
+      '5/6': '83.333333%',
+      '1/12': '8.333333%',
+      '2/12': '16.666667%',
+      '3/12': '25%',
+      '4/12': '33.333333%',
+      '5/12': '41.666667%',
+      '6/12': '50%',
+      '7/12': '58.333333%',
+      '8/12': '66.666667%',
+      '9/12': '75%',
+      '10/12': '83.333333%',
+      '11/12': '91.666667%',
+      full: '100%',
+      screen: '100vw',
+    }),
+    zIndex: {
+      auto: 'auto',
+      '0': '0',
+      '10': '10',
+      '20': '20',
+      '30': '30',
+      '40': '40',
+      '50': '50',
+    },
+    gap: theme => theme('spacing'),
+    gridTemplateColumns: {
+      none: 'none',
+      '1': 'repeat(1, minmax(0, 1fr))',
+      '2': 'repeat(2, minmax(0, 1fr))',
+      '3': 'repeat(3, minmax(0, 1fr))',
+      '4': 'repeat(4, minmax(0, 1fr))',
+      '5': 'repeat(5, minmax(0, 1fr))',
+      '6': 'repeat(6, minmax(0, 1fr))',
+      '7': 'repeat(7, minmax(0, 1fr))',
+      '8': 'repeat(8, minmax(0, 1fr))',
+      '9': 'repeat(9, minmax(0, 1fr))',
+      '10': 'repeat(10, minmax(0, 1fr))',
+      '11': 'repeat(11, minmax(0, 1fr))',
+      '12': 'repeat(12, minmax(0, 1fr))',
+    },
+    gridColumn: {
+      auto: 'auto',
+      'span-1': 'span 1 / span 1',
+      'span-2': 'span 2 / span 2',
+      'span-3': 'span 3 / span 3',
+      'span-4': 'span 4 / span 4',
+      'span-5': 'span 5 / span 5',
+      'span-6': 'span 6 / span 6',
+      'span-7': 'span 7 / span 7',
+      'span-8': 'span 8 / span 8',
+      'span-9': 'span 9 / span 9',
+      'span-10': 'span 10 / span 10',
+      'span-11': 'span 11 / span 11',
+      'span-12': 'span 12 / span 12',
+    },
+    gridColumnStart: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
+      '13': '13',
+    },
+    gridColumnEnd: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
+      '13': '13',
+    },
+    gridTemplateRows: {
+      none: 'none',
+      '1': 'repeat(1, minmax(0, 1fr))',
+      '2': 'repeat(2, minmax(0, 1fr))',
+      '3': 'repeat(3, minmax(0, 1fr))',
+      '4': 'repeat(4, minmax(0, 1fr))',
+      '5': 'repeat(5, minmax(0, 1fr))',
+      '6': 'repeat(6, minmax(0, 1fr))',
+    },
+    gridRow: {
+      auto: 'auto',
+      'span-1': 'span 1 / span 1',
+      'span-2': 'span 2 / span 2',
+      'span-3': 'span 3 / span 3',
+      'span-4': 'span 4 / span 4',
+      'span-5': 'span 5 / span 5',
+      'span-6': 'span 6 / span 6',
+    },
+    gridRowStart: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+    },
+    gridRowEnd: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+    },
+    transformOrigin: {
+      center: 'center',
+      top: 'top',
+      'top-right': 'top right',
+      right: 'right',
+      'bottom-right': 'bottom right',
+      bottom: 'bottom',
+      'bottom-left': 'bottom left',
+      left: 'left',
+      'top-left': 'top left',
+    },
+    scale: {
+      '0': '0',
+      '50': '.5',
+      '75': '.75',
+      '90': '.9',
+      '95': '.95',
+      '100': '1',
+      '105': '1.05',
+      '110': '1.1',
+      '125': '1.25',
+      '150': '1.5',
+    },
+    rotate: {
+      '-180': '-180deg',
+      '-90': '-90deg',
+      '-45': '-45deg',
+      '0': '0',
+      '45': '45deg',
+      '90': '90deg',
+      '180': '180deg',
+    },
+    translate: (theme, { negative }) => ({
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+      '-full': '-100%',
+      '-1/2': '-50%',
+      '1/2': '50%',
+      full: '100%',
+    }),
+    skew: {
+      '-12': '-12deg',
+      '-6': '-6deg',
+      '-3': '-3deg',
+      '0': '0',
+      '3': '3deg',
+      '6': '6deg',
+      '12': '12deg',
+    },
+    transitionProperty: {
+      none: 'none',
+      all: 'all',
+      default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
+      colors: 'background-color, border-color, color, fill, stroke',
+      opacity: 'opacity',
+      shadow: 'box-shadow',
+      transform: 'transform',
+    },
+    transitionTimingFunction: {
+      linear: 'linear',
+      in: 'cubic-bezier(0.4, 0, 1, 1)',
+      out: 'cubic-bezier(0, 0, 0.2, 1)',
+      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+    transitionDuration: {
+      '75': '75ms',
+      '100': '100ms',
+      '150': '150ms',
+      '200': '200ms',
+      '300': '300ms',
+      '500': '500ms',
+      '700': '700ms',
+      '1000': '1000ms',
+    },
+    transitionDelay: {
+      '75': '75ms',
+      '100': '100ms',
+      '150': '150ms',
+      '200': '200ms',
+      '300': '300ms',
+      '500': '500ms',
+      '700': '700ms',
+      '1000': '1000ms',
+    },
+  },
+  variants: {
+    accessibility: ['responsive', 'focus'],
+    alignContent: ['responsive'],
+    alignItems: ['responsive'],
+    alignSelf: ['responsive'],
+    appearance: ['responsive'],
+    backgroundAttachment: ['responsive'],
+    backgroundColor: ['responsive', 'hover', 'focus'],
+    backgroundOpacity: ['responsive', 'hover', 'focus'],
+    backgroundPosition: ['responsive'],
+    backgroundRepeat: ['responsive'],
+    backgroundSize: ['responsive'],
+    borderCollapse: ['responsive'],
+    borderColor: ['responsive', 'hover', 'focus'],
+    borderOpacity: ['responsive', 'hover', 'focus'],
+    borderRadius: ['responsive'],
+    borderStyle: ['responsive'],
+    borderWidth: ['responsive'],
+    boxShadow: ['responsive', 'hover', 'focus'],
+    boxSizing: ['responsive'],
+    cursor: ['responsive'],
+    display: ['responsive'],
+    divideColor: ['responsive'],
+    divideOpacity: ['responsive'],
+    divideWidth: ['responsive'],
+    fill: ['responsive'],
+    flex: ['responsive'],
+    flexDirection: ['responsive'],
+    flexGrow: ['responsive'],
+    flexShrink: ['responsive'],
+    flexWrap: ['responsive'],
+    float: ['responsive'],
+    clear: ['responsive'],
+    fontFamily: ['responsive'],
+    fontSize: ['responsive'],
+    fontSmoothing: ['responsive'],
+    fontStyle: ['responsive'],
+    fontWeight: ['responsive', 'hover', 'focus'],
+    height: ['responsive'],
+    inset: ['responsive'],
+    justifyContent: ['responsive'],
+    letterSpacing: ['responsive'],
+    lineHeight: ['responsive'],
+    listStylePosition: ['responsive'],
+    listStyleType: ['responsive'],
+    margin: ['responsive'],
+    maxHeight: ['responsive'],
+    maxWidth: ['responsive'],
+    minHeight: ['responsive'],
+    minWidth: ['responsive'],
+    objectFit: ['responsive'],
+    objectPosition: ['responsive'],
+    opacity: ['responsive', 'hover', 'focus'],
+    order: ['responsive'],
+    outline: ['responsive', 'focus'],
+    overflow: ['responsive'],
+    padding: ['responsive'],
+    placeholderColor: ['responsive', 'focus'],
+    placeholderOpacity: ['responsive', 'focus'],
+    pointerEvents: ['responsive'],
+    position: ['responsive'],
+    resize: ['responsive'],
+    space: ['responsive'],
+    stroke: ['responsive'],
+    strokeWidth: ['responsive'],
+    tableLayout: ['responsive'],
+    textAlign: ['responsive'],
+    textColor: ['responsive', 'hover', 'focus'],
+    textOpacity: ['responsive', 'hover', 'focus'],
+    textDecoration: ['responsive', 'hover', 'focus'],
+    textTransform: ['responsive'],
+    userSelect: ['responsive'],
+    verticalAlign: ['responsive'],
+    visibility: ['responsive'],
+    whitespace: ['responsive'],
+    width: ['responsive'],
+    wordBreak: ['responsive'],
+    zIndex: ['responsive'],
+    gap: ['responsive'],
+    gridAutoFlow: ['responsive'],
+    gridTemplateColumns: ['responsive'],
+    gridColumn: ['responsive'],
+    gridColumnStart: ['responsive'],
+    gridColumnEnd: ['responsive'],
+    gridTemplateRows: ['responsive'],
+    gridRow: ['responsive'],
+    gridRowStart: ['responsive'],
+    gridRowEnd: ['responsive'],
+    transform: ['responsive'],
+    transformOrigin: ['responsive'],
+    scale: ['responsive', 'hover', 'focus'],
+    rotate: ['responsive', 'hover', 'focus'],
+    translate: ['responsive', 'hover', 'focus'],
+    skew: ['responsive', 'hover', 'focus'],
+    transitionProperty: ['responsive'],
+    transitionTimingFunction: ['responsive'],
+    transitionDuration: ['responsive'],
+    transitionDelay: ['responsive'],
+  },
+  corePlugins: {},
+  plugins: [],
+}
diff --git a/themes/default/tailwindcss/yarn.lock b/themes/default/tailwindcss/yarn.lock
new file mode 100644
index 0000000..e5f7561
--- /dev/null
+++ b/themes/default/tailwindcss/yarn.lock
@@ -0,0 +1,749 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@fullhuman/postcss-purgecss@^2.1.2":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.2.0.tgz#2b3699287163ff515f25ccdae5b96a244eebb41a"
+  integrity sha512-q4zYAn8L9olA5uneaLhxkHRBoug9dnAqytbdX9R5dbzSORobhYr1yGR2JN3Q1UMd5RB0apm1NvJekHaymal/BQ==
+  dependencies:
+    postcss "7.0.28"
+    purgecss "^2.2.0"
+
+"@types/color-name@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+
+acorn-node@^1.6.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
+  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
+  dependencies:
+    acorn "^7.0.0"
+    acorn-walk "^7.0.0"
+    xtend "^4.0.2"
+
+acorn-walk@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.1.1.tgz#345f0dffad5c735e7373d2fec9a1023e6a44b83e"
+  integrity sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==
+
+acorn@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
+  integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
+
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
+  integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
+  dependencies:
+    "@types/color-name" "^1.1.1"
+    color-convert "^2.0.1"
+
+anymatch@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+autoprefixer@^9.4.5:
+  version "9.7.6"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.6.tgz#63ac5bbc0ce7934e6997207d5bb00d68fa8293a4"
+  integrity sha512-F7cYpbN7uVVhACZTeeIeealwdGM6wMtfWARVLTy5xmKtgVdBNJvbDRoCK3YO1orcs7gv/KwYlb3iXwu9Ug9BkQ==
+  dependencies:
+    browserslist "^4.11.1"
+    caniuse-lite "^1.0.30001039"
+    chalk "^2.4.2"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^7.0.27"
+    postcss-value-parser "^4.0.3"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
+
+binary-extensions@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.0.0.tgz#23c0df14f6a88077f5f986c0d167ec03c3d5537c"
+  integrity sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+browserslist@^4.11.1, browserslist@^4.12.0:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.0.tgz#06c6d5715a1ede6c51fc39ff67fd647f740b656d"
+  integrity sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==
+  dependencies:
+    caniuse-lite "^1.0.30001043"
+    electron-to-chromium "^1.3.413"
+    node-releases "^1.1.53"
+    pkg-up "^2.0.0"
+
+bytes@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
+  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
+
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
+caniuse-lite@^1.0.30001039, caniuse-lite@^1.0.30001043:
+  version "1.0.30001053"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001053.tgz#b7ae027567ce2665b965b0437e4512b296ccd20d"
+  integrity sha512-HtV4wwIZl6GA4Oznse8aR274XUOYGZnQLcf/P8vHgmlfqSNelwD+id8CyHOceqLqt9yfKmo7DUZTh1EuS9pukg==
+
+chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chalk@^2.4.1, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.0.0.tgz#6e98081ed2d17faab615eb52ac66ec1fe6209e72"
+  integrity sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chokidar@^3.0.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.0.tgz#b30611423ce376357c765b9b8f904b9fba3c0be8"
+  integrity sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.4.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
+clap@^1.0.9:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"
+  integrity sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==
+  dependencies:
+    chalk "^1.1.3"
+
+color-convert@^1.9.0, color-convert@^1.9.1:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@^1.0.0, color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+color-string@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
+  integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
+  integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
+commander@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
+  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
+css-tree@1.0.0-alpha.39:
+  version "1.0.0-alpha.39"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.39.tgz#2bff3ffe1bb3f776cf7eefd91ee5cba77a149eeb"
+  integrity sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==
+  dependencies:
+    mdn-data "2.0.6"
+    source-map "^0.6.1"
+
+css-unit-converter@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
+  integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+csso-cli@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/csso-cli/-/csso-cli-3.0.0.tgz#a9bf3de54067c5ee471cbdb002da2b89ece9b06c"
+  integrity sha512-j0ytVZ8qHXcFnR3HOvfH8RWOeHtlqwt97mYe32AnJ2yG6noqV0Jsn8OwOQq8wpdavkHr8JOx6drRtY2HoKLjqw==
+  dependencies:
+    chokidar "^3.0.0"
+    clap "^1.0.9"
+    csso "^4.0.1"
+    source-map "^0.6.1"
+
+csso@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.3.tgz#0d9985dc852c7cc2b2cacfbbe1079014d1a8e903"
+  integrity sha512-NL3spysxUkcrOgnpsT4Xdl2aiEiBG6bXswAABQVHcMrfjjBisFOKwLDOmf4wf32aPdcJws1zds2B0Rg+jqMyHQ==
+  dependencies:
+    css-tree "1.0.0-alpha.39"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
+
+detective@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
+  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
+  dependencies:
+    acorn-node "^1.6.1"
+    defined "^1.0.0"
+    minimist "^1.1.1"
+
+electron-to-chromium@^1.3.413:
+  version "1.3.430"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.430.tgz#33914f7c2db771bdcf30977bd4fd6258ee8a2f37"
+  integrity sha512-HMDYkANGhx6vfbqpOf/hc6hWEmiOipOHGDeRDeUb3HLD3XIWpvKQxFgWf0tgHcr3aNv6I/8VPecplqmQsXoZSw==
+
+escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+find-up@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
+  dependencies:
+    locate-path "^2.0.0"
+
+fs-extra@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+fsevents@~2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+
+glob-parent@~5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.0.0, glob@^7.1.2:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
+  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
+
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
+lodash.toarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
+  integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
+
+lodash@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
+
+mdn-data@2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.6.tgz#852dc60fcaa5daa2e8cf6c9189c440ed3e042978"
+  integrity sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==
+
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.1.1:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+node-emoji@^1.8.1:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
+  integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
+  dependencies:
+    lodash.toarray "^4.4.0"
+
+node-releases@^1.1.53:
+  version "1.1.55"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.55.tgz#8af23b7c561d8e2e6e36a46637bab84633b07cee"
+  integrity sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
+normalize.css@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
+
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+p-limit@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
+  dependencies:
+    p-try "^1.0.0"
+
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
+  dependencies:
+    p-limit "^1.1.0"
+
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-parse@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
+pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
+  integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
+  dependencies:
+    find-up "^2.1.0"
+
+postcss-functions@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
+  integrity sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=
+  dependencies:
+    glob "^7.1.2"
+    object-assign "^4.1.1"
+    postcss "^6.0.9"
+    postcss-value-parser "^3.3.0"
+
+postcss-js@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-2.0.3.tgz#a96f0f23ff3d08cec7dc5b11bf11c5f8077cdab9"
+  integrity sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==
+  dependencies:
+    camelcase-css "^2.0.1"
+    postcss "^7.0.18"
+
+postcss-nested@^4.1.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.2.1.tgz#4bc2e5b35e3b1e481ff81e23b700da7f82a8b248"
+  integrity sha512-AMayXX8tS0HCp4O4lolp4ygj9wBn32DJWXvG6gCv+ZvJrEa00GUxJcJEEzMh87BIe6FrWdYkpR2cuyqHKrxmXw==
+  dependencies:
+    postcss "^7.0.21"
+    postcss-selector-parser "^6.0.2"
+
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
+  integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
+  dependencies:
+    cssesc "^3.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-value-parser@^3.3.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+
+postcss-value-parser@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
+  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
+
+postcss@7.0.28:
+  version "7.0.28"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.28.tgz#d349ced7743475717ba91f6810efb58c51fb5dbb"
+  integrity sha512-YU6nVhyWIsVtlNlnAj1fHTsUKW5qxm3KEgzq2Jj6KTEFOTK8QWR12eIDvrlWhiSTK8WIBFTBhOJV4DY6dUuEbw==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
+postcss@^6.0.9:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
+postcss@^7.0.11, postcss@^7.0.18, postcss@^7.0.21, postcss@^7.0.27:
+  version "7.0.29"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.29.tgz#d3a903872bd52280b83bce38cdc83ce55c06129e"
+  integrity sha512-ba0ApvR3LxGvRMMiUa9n0WR4HjzcYm7tS+ht4/2Nd0NLtHpPIH77fuB9Xh1/yJVz9O/E/95Y/dn8ygWsyffXtw==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
+pretty-hrtime@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
+  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
+
+purgecss@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-2.2.1.tgz#aa3bdf23370f7539df6154f5e25df2da311cd018"
+  integrity sha512-wngRSLW1dpNr8kr3TL9nTJMyTFI5BiRiaUUEys5M1CA4zEHLF25fRHoshEeDqmhstaNTOddmpYM34zRrUtEGbQ==
+  dependencies:
+    commander "^5.0.0"
+    glob "^7.0.0"
+    postcss "7.0.28"
+    postcss-selector-parser "^6.0.2"
+
+readdirp@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
+  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
+  dependencies:
+    picomatch "^2.2.1"
+
+reduce-css-calc@^2.1.6:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz#1ace2e02c286d78abcd01fd92bfe8097ab0602c2"
+  integrity sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
+resolve@^1.14.2:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
+  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
+  dependencies:
+    path-parse "^1.0.6"
+
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
+  dependencies:
+    is-arrayish "^0.3.1"
+
+source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+strip-ansi@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
+  dependencies:
+    ansi-regex "^2.0.0"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
+
+supports-color@^5.3.0, supports-color@^5.4.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  dependencies:
+    has-flag "^4.0.0"
+
+tailwindcss@^1.4.5:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.4.5.tgz#893ccddd226dc264f2bd53acd11e58077149e11d"
+  integrity sha512-MJW96Rz3G3RrFDbDuQCU893y4bf5hMWeVbMgcCqUfLNPbO9wRogDibCEvdKitD6aX9Y90SDT2FOKD17+WmIFLQ==
+  dependencies:
+    "@fullhuman/postcss-purgecss" "^2.1.2"
+    autoprefixer "^9.4.5"
+    browserslist "^4.12.0"
+    bytes "^3.0.0"
+    chalk "^4.0.0"
+    color "^3.1.2"
+    detective "^5.2.0"
+    fs-extra "^8.0.0"
+    lodash "^4.17.15"
+    node-emoji "^1.8.1"
+    normalize.css "^8.0.1"
+    postcss "^7.0.11"
+    postcss-functions "^3.0.0"
+    postcss-js "^2.0.0"
+    postcss-nested "^4.1.1"
+    postcss-selector-parser "^6.0.0"
+    pretty-hrtime "^1.0.3"
+    reduce-css-calc "^2.1.6"
+    resolve "^1.14.2"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
+
+universalify@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+xtend@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
diff --git a/themes/default/templates/about.html.ep b/themes/default/templates/about.html.ep
index 27c4854..9ee3281 100644
--- a/themes/default/templates/about.html.ep
+++ b/themes/default/templates/about.html.ep
@@ -1,21 +1,54 @@
 % # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
-<div class="text-left">
-    <h3><%= l('What is Lufi?') %></h3>
-    <p><%= l('Lufi is a free (as in free speech) file hosting software.') %></p>
-    <h3><%= l('Privacy') %></h3>
-    <p><%= l('The files uploaded on a Lufi instance are encrypted before the upload to the server: the administrator of the server can not see the file\'s content.') %><br>
-    <%= l('The administrator can only see the file\'s name, its size and its mimetype (what kind of file it is: video, text, etc.).') %></p>
-    <p><%= l('You don\'t need to register yourself to upload files but be aware that, for legal reasons, your IP address will be stored when you send a file. Don\'t panic, this is normally the case for all sites on which you send files.') %></p>
-    <h3><%= l('How does it work?') %></h3>
-    <p><%= l('Drag and drop files in the appropriate area or use the traditional way to send files and the files will be chunked, encrypted and sent to the server. You will get two links per file: a download link, that you give to the people you want to share the file with and a deletion link, allowing you to delete the file whenever you want.') %></p>
-    <p><%= l('You can see the list of your files by clicking on the "My files" link at the top right of this page.') %></p>
-    <h3><%= l('How to report an illegal file?') %></h3>
-    <p><%== l('Please contact the administrator: %1', config('contact')) %></p>
-    <h3><%= l('Who wrote this software?') %></h3>
-    <p><%== l('The original (and only for now) author is <a href="https://fiat-tux.fr" class="classic">Luc Didry</a>.') %></p>
-    <h3><%= l('How to install the software on my server?') %></h3>
-    <p><%== l('As Lufi is a free software licensed under of the terms of the <a href="https://gnu.org/licenses/agpl.html" class="classic">AGPLv3</a>, you can install it on you own server. Have a look on the <a href="https://framagit.org/fiat-tux/hat-softwares/lufi/wikis/home" class="classic">Wiki</a> for the procedure.') %><br>
-       <%== l('Get the source code on <a href="https://framagit.org/fiat-tux/hat-softwares/lufi" class="classic">the official repository</a> or on its <a href="https://github.com/ldidry/lufi" class="classic">Github mirror</a>') %>
-    </p>
-    <p><%= link_to url_for('/') => ( class => "btn waves-effect waves-light cyan" ) => begin %><%= l('Back to homepage') %><% end%></p>
+<div class="block-div">
+    <h1>
+        <%= l('What is Lufi?') %>
+    </h1>
+    <p>
+        <%= l('Lufi is a free (as in free speech) file hosting software.') %>
+    </p>
+    <h1>
+        <%= l('Privacy') %>
+    </h1>
+    <p>
+        <%= l('The files uploaded on a Lufi instance are encrypted before the upload to the server: the administrator of the server can not see the file\'s content.') %>
+        <br>
+        <%= l('The administrator can only see the file\'s name, its size and its mimetype (what kind of file it is: video, text, etc.).') %>
+    </p>
+    <p>
+        <%= l('You don\'t need to register yourself to upload files but be aware that, for legal reasons, your IP address will be stored when you send a file. Don\'t panic, this is normally the case for all sites on which you send files.') %>
+    </p>
+    <h1>
+        <%= l('How does it work?') %>
+    </h1>
+    <p>
+        <%= l('Drag and drop files in the appropriate area or use the traditional way to send files and the files will be chunked, encrypted and sent to the server. You will get two links per file: a download link, that you give to the people you want to share the file with and a deletion link, allowing you to delete the file whenever you want.') %>
+    </p>
+    <p>
+        <%= l('You can see the list of your files by clicking on the "My files" link at the top right of this page.') %>
+    </p>
+    <h1>
+        <%= l('How to report an illegal file?') %>
+    </h1>
+    <p>
+        <%== l('Please contact the administrator: %1', config('contact')) %>
+    </p>
+    <h1>
+        <%= l('Who wrote this software?') %>
+    </h1>
+    <p>
+        <%== l('The original (and only for now) author is <a href="https://fiat-tux.fr" class="classic">Luc Didry</a>.') %>
+    </p>
+    <h1>
+        <%= l('How to install the software on my server?') %>
+    </h1>
+    <p>
+        <%== l('As Lufi is a free software licensed under of the terms of the <a href="https://gnu.org/licenses/agpl.html" class="classic">AGPLv3</a>, you can install it on you own server. Have a look on the <a href="https://framagit.org/fiat-tux/hat-softwares/lufi/wikis/home" class="classic">Wiki</a> for the procedure.') %>
+        <br>
+        <%== l('Get the source code on <a href="https://framagit.org/fiat-tux/hat-softwares/lufi" class="classic">the official repository</a> or on its <a href="https://github.com/ldidry/lufi" class="classic">Github mirror</a>') %>
+    </p>
+    <p class="mt-2">
+        <%= link_to url_for('/') => ( class => "btn" ) => begin %>
+            <%= l('Back to homepage') %>
+        <% end%>
+    </p>
 </div>
diff --git a/themes/default/templates/delays.html.ep b/themes/default/templates/delays.html.ep
index 39f59ca..f354b37 100644
--- a/themes/default/templates/delays.html.ep
+++ b/themes/default/templates/delays.html.ep
@@ -1,6 +1,6 @@
 % # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
 % use Number::Bytes::Human qw(format_bytes);
-<div id="delays-info" class="modal">
+<div id="delays-info" class="modal hidden">
     <div class="modal-content">
         <h1><%= l('Information about delays') %></h1>
         <div class="text-left">
diff --git a/themes/default/templates/files.html.ep b/themes/default/templates/files.html.ep
index 954ed9d..b1b3381 100644
--- a/themes/default/templates/files.html.ep
+++ b/themes/default/templates/files.html.ep
@@ -1,42 +1,64 @@
 % # vim:set sts=4 sw=4 ts=4 ft=html.epl expandtab:
 
-<h2><%= l('My files') %></h2>
-<hr>
+<div class="block myfiles">
+    <h1><%= l('My files') %></h1>
+    <hr>
+    <p>
+        <%= l('Only the files sent with this browser will be listed here. This list is stored in localStorage: if you delete your localStorage data, you\'ll lose this list.') %><br>
+        <%= l('Rows in red mean that the files have expired and are no longer available.') %>
+    </p>
+    <div class="files-buttons">
+        <div class="btn">
+            <a href="#" id="exportStorage">
+                <%= l('Export localStorage data') %>
+            </a>
+        </div>
+        <div class="btn">
+            <a href="#" id="purgeExpired">
+                <%= l('Purge expired files from localStorage') %>
+            </a>
+        </div>
+        <div class="btn">
+            <a href="#" id="clickImport">
+                <%= l('Import localStorage data') %>
+            </a>
+        </div>
+        <div class="hidden">
+            <span class="file-field input-field">
+                <input type="file" id="import" onchange="importStorage(this.files)">
+            </span>
+        </div>
+        <div class="btn">
+            <a href="#" id="invertSelection">
+                <%= l('Invert selection') %>
+            </a>
+        </div>
+        <div class="btn disabled">
+            <a href="#" id="mass-delete">
+                <%= l('Delete selected files') %>
+            </a>
+        </div>
+    </div>
 
-
-<p>
-    <%= l('Only the files sent with this browser will be listed here. This list is stored in localStorage: if you delete your localStorage data, you\'ll lose this list.') %><br>
-    <%= l('Rows in red mean that the files have expired and are no longer available.') %>
-</p>
-<div class="files-buttons">
-    <a href="#" id="exportStorage"   class="btn left-mg cyan"><%= l('Export localStorage data') %></a>
-    <a href="#" id="purgeExpired"    class="btn left-mg cyan"><%= l('Purge expired files from localStorage') %></a>
-    <a href="#" id="clickImport"     class="btn left-mg cyan"><%= l('Import localStorage data') %></a>
-    <span class="file-field input-field">
-        <input type="file" id="import" onchange="importStorage(this.files)">
-    </span>
-    <a href="#" id="invertSelection" class="btn left-mg cyan"><%= l('Invert selection') %></a>
-    <a href="#" class="btn left-mg cyan disabled" id="mass-delete" disabled><%= l('Delete selected files') %></a>
-</div>
-
-<div>
-    <table class="responsive-table highlight striped">
-        <thead>
-            <tr>
-                <th class="center-align"></th>
-                <th class="center-align"><%= l('File name') %></th>
-                <th class="center-align"><%= l('Download link') %></th>
-                <th class="center-align"><%= l('Counter') %></th>
-                <th class="center-align"><%= l('Delete at first download?') %></th>
-                <th class="center-align"><%= l('Uploaded at') %></th>
-                <th class="center-align"><%= l('Expires at') %></th>
-                <th class="center-align"><%= l('Deletion link') %></th>
-                <th class="center-align"><%= l('Mail') %></th>
-            </tr>
-        </thead>
-        <tbody id="myfiles">
-        </tbody>
-    </table>
+    <div>
+        <table class="responsive-table highlight striped">
+            <thead>
+                <tr>
+                    <th class="center-align"></th>
+                    <th class="center-align"><%= l('File name') %></th>
+                    <th class="center-align"><%= l('Download link') %></th>
+                    <th class="center-align"><%= l('Counter') %></th>
+                    <th class="center-align"><%= l('Delete at first download?') %></th>
+                    <th class="center-align"><%= l('Uploaded at') %></th>
+                    <th class="center-align"><%= l('Expires at') %></th>
+                    <th class="center-align"><%= l('Deletion link') %></th>
+                    <th class="center-align"><%= l('Mail') %></th>
+                </tr>
+            </thead>
+            <tbody id="myfiles">
+            </tbody>
+        </table>
+    </div>
 </div>
 
 %= javascript '/partial/files.js.ep'
diff --git a/themes/default/templates/icons/check.svg.html.ep b/themes/default/templates/icons/check.svg.html.ep
new file mode 100644
index 0000000..e746641
--- /dev/null
+++ b/themes/default/templates/icons/check.svg.html.ep
@@ -0,0 +1,3 @@
+<svg class="icon-check" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+</svg>
diff --git a/themes/default/templates/icons/checkbox.svg.html.ep b/themes/default/templates/icons/checkbox.svg.html.ep
new file mode 100644
index 0000000..8d04765
--- /dev/null
+++ b/themes/default/templates/icons/checkbox.svg.html.ep
@@ -0,0 +1,3 @@
+<svg class="icon-checkbox" viewBox="0 0 20 20">
+	<path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/>
+</svg>
diff --git a/themes/default/templates/icons/cross.svg.html.ep b/themes/default/templates/icons/cross.svg.html.ep
new file mode 100644
index 0000000..1df90eb
--- /dev/null
+++ b/themes/default/templates/icons/cross.svg.html.ep
@@ -0,0 +1,3 @@
+<svg class="icon-cross" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+</svg>
diff --git a/themes/default/templates/icons/down.svg.html.ep b/themes/default/templates/icons/down.svg.html.ep
new file mode 100644
index 0000000..3071f21
--- /dev/null
+++ b/themes/default/templates/icons/down.svg.html.ep
@@ -0,0 +1,3 @@
+<svg class="icon-down"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+</svg>
diff --git a/themes/default/templates/icons/download.svg.html.ep b/themes/default/templates/icons/download.svg.html.ep
new file mode 100644
index 0000000..041d89b
--- /dev/null
+++ b/themes/default/templates/icons/download.svg.html.ep
@@ -0,0 +1,3 @@
+<svg class="icon-download" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16a5 5 0 01-.916-9.916 5.002 5.002 0 019.832 0A5.002 5.002 0 0116 16m-7 3l3 3m0 0l3-3m-3 3V10"/>
+</svg>
diff --git a/themes/default/templates/icons/hamburger.svg.html.ep b/themes/default/templates/icons/hamburger.svg.html.ep
new file mode 100644
index 0000000..613518f
--- /dev/null
+++ b/themes/default/templates/icons/hamburger.svg.html.ep
@@ -0,0 +1,3 @@
+<svg class="icon-hamburger"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+</svg>
diff --git a/themes/default/templates/icons/infos.svg.html.ep b/themes/default/templates/icons/infos.svg.html.ep
new file mode 100644
index 0000000..cd1a1c0
--- /dev/null
+++ b/themes/default/templates/icons/infos.svg.html.ep
@@ -0,0 +1,3 @@
+<svg class="icon-infos"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+</svg>
\ No newline at end of file
diff --git a/themes/default/templates/icons/meridian.svg.html.ep b/themes/default/templates/icons/meridian.svg.html.ep
new file mode 100644
index 0000000..dbdea62
--- /dev/null
+++ b/themes/default/templates/icons/meridian.svg.html.ep
@@ -0,0 +1,3 @@
+<svg class="icon-meridian"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
+</svg>
diff --git a/themes/default/templates/icons/trash.svg.html.ep b/themes/default/templates/icons/trash.svg.html.ep
new file mode 100644
index 0000000..2dd666d
--- /dev/null
+++ b/themes/default/templates/icons/trash.svg.html.ep
@@ -0,0 +1,3 @@
+<svg class="icon-trash" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path class="heroicon-ui" d="M8 6V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2h5a1 1 0 0 1 0 2h-1v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8H3a1 1 0 1 1 0-2h5zM6 8v12h12V8H6zm8-2V4h-4v2h4zm-4 4a1 1 0 0 1 1 1v6a1 1 0 0 1-2 0v-6a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v6a1 1 0 0 1-2 0v-6a1 1 0 0 1 1-1z"/>
+</svg>
diff --git a/themes/default/templates/icons/up.svg.html.ep b/themes/default/templates/icons/up.svg.html.ep
new file mode 100644
index 0000000..4bece01
--- /dev/null
+++ b/themes/default/templates/icons/up.svg.html.ep
@@ -0,0 +1,3 @@
+<svg class="icon-up"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>
+</svg>
diff --git a/themes/default/templates/icons/upload.svg.html.ep b/themes/default/templates/icons/upload.svg.html.ep
new file mode 100644
index 0000000..b3fb7a7
--- /dev/null
+++ b/themes/default/templates/icons/upload.svg.html.ep
@@ -0,0 +1,3 @@
+<svg class="icon-upload"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+</svg>
diff --git a/themes/default/templates/index.html.ep b/themes/default/templates/index.html.ep
index 6409f78..64f3fe7 100644
--- a/themes/default/templates/index.html.ep
+++ b/themes/default/templates/index.html.ep
@@ -1,170 +1,74 @@
 % # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
-% my %d = (
-%   delay_0   => l('no time limit'),
-%   delay_1   => l('24 hours'),
-%   delay_365 => l('1 year')
-% );
-    <form class="row">
-        <noscript>
-            <div class="col s12">
-                <div class="card pink">
-                    <div class="card-content white-text">
-                        <strong><%= l('Javascript is disabled. You won\'t be able to use Lufi.') %></strong>
-                    </div>
-                </div>
-            </div>
-        </noscript>
-% if (defined(config('broadcast_message'))) {
-        <div class="col s12">
-            <div class="card pink">
-                <div class="card-content white-text">
-                    <strong><%= config('broadcast_message') %></strong>
-                </div>
-            </div>
-        </div>
-% }
-% if (stash('invitation')) {
-        <div class="col s12">
-            <div class="card blue">
-                <div class="card-content white-text">
-                    <strong><%= l('The link(s) of your file(s) will automatically be sent by mail to %1 (%2)', stash('invitation')->ldap_user, stash('invitation')->ldap_user_mail) %></strong>
-                </div>
-            </div>
-        </div>
-% }
-        <div class="col s12 hiddendiv" id="not-enough-entropy">
-            <div class="card pink">
-                <div class="card-content white-text">
-                    <strong><%= l('Your browser does not have enough entropy to generate a strong encryption key. Please wait (it\'s better if you do things on your computer while waiting).') %></strong>
-                </div>
+% my $burn_after_reading_class = (config('force_burn_after_reading') || stash('invitation')) ? 'class="hidden"' : '';
+<div class="upload-page">
+    <!-- Messages -->
+    %= include 'index/messages'
+    <!-- End Messages -->
+%   if (!stop_upload) {
+    <!-- Upload stuff -->
+    <div class="upload">
+        <div class="upload-form">
+            <!-- Delay -->
+            %= include 'index/delay'
+            <!-- End Delay -->
+            <!-- Burn after reading -->
+            <div class="input-field">
+    %       if ($self->config('force_burn_after_reading')) {
+                <p class="card info mini">
+                    <%= l('Files deleted at first download') %>
+                </p>
+    %       }
+                <p <%== $burn_after_reading_class %>>
+                    <input
+                        type="checkbox"
+                        id="first-view"
+                        data-checked="<%= 'data-checked' if config('force_burn_after_reading') %>"
+                        <%= 'disabled="disabled"' if config('force_burn_after_reading') %>
+                    >
+                    <label for="first-view" aria-describedby="label">
+                        <%= l('Delete at first download?') %>
+                    </label>
+                </p>
             </div>
+            <!-- End Burn after reading -->
+            <!-- Zip file -->
+            %= include 'index/zipfile'
+            <!-- End Zip file -->
+    %       if (config('allow_pwd_on_files') && (!stash('invitation'))) {
+            <!-- Password on files -->
+            %= include 'index/password'
+            <!-- End Password on files -->
+    %       }
+            <!-- Zipname -->
+            %= include 'index/zipname'
+            <!-- End Zipname -->
+            <!-- Zipped files -->
+            %= include 'index/zipped_files'
+            <!-- End Zipped files -->
+            <!-- Drag and drop -->
+            %= include 'index/drag_n_drop'
+            <!-- Drag and drop -->
         </div>
-% if (stop_upload) {
-        <div class="col s12">
-            <div class="card pink">
-                <div class="card-content white-text">
-                    <strong><%= l('Sorry, the uploading is currently disabled. Please try again later.') %></strong>
-                </div>
-            </div>
+        <div id="results" class="hidden">
+            <h1>
+                <%= l('Uploaded files') %>
+            </h1>
+            <div id="misc"></div>
+            <ul class="list-group" id="ul-results">
+            </ul>
         </div>
-% } else {
-        <div class="col s12 m6">
-            <div class="input-field">
-                <a class="waves-effect waves-light modal-trigger prefix" href="#delays-info" title="<%= l('Important: more information on delays') %>"><i class="mdi-action-info small"></i></a>
-                <select id="delete-day">
-% for my $delay (qw/0 1 7 30 365/) {
-%   my $text = ($delay == 7 || $delay == 30) ? l('%1 days', $delay) : $d{'delay_'.$delay};
-%   if (max_delay) {
-%       if ($delay) {
-%           if ($delay < max_delay) {
-                    <option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
-%           } elsif ($delay == max_delay) {
-                    <option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
-%               last;
-%           } else {
-%               my $text = ($delay == 1) ? l('24 hours') : l('%1 days', $delay);
-                    <option value="<%= max_delay %>" <%== is_selected(max_delay) %>><%= l('%1 days', max_delay) %></option>
-%               last;
-%           }
+    </div> <!-- /Upload stuff -->
+</div>
+%=      include 'delays'
+%       if (defined stash('invitation')) {
+%=          javascript '/partial/index.js?token=' . stash('invitation')->token
+%       } else {
+%=          javascript '/partial/index.js'
 %       }
-%   } else {
-                    <option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
+%=      javascript '/js/sjcl.js'
+%=      javascript '/js/moment-with-locales.min.js'
+%=      javascript '/js/filesize.min.js'
+%=      javascript '/js/jszip.min.js'
+%=      javascript '/js/lufi-notifications.js'
+%=      javascript '/js/lufi-up.js'
 %   }
-% }
-                </select>
-            </div>
-        </div>
-        <div class="input-field">
-        % if ($self->config('force_burn_after_reading')) {
-            <p class="col s12 m6 text-left like-label">
-                <%= l('Files deleted at first download') %>
-            </p>
-        % }
-            <p class="col s12 m6 text-left<%= ' hiddendiv' if (config('force_burn_after_reading') || stash('invitation')) %>">
-                <input
-                    type="checkbox"
-                    id="first-view"
-                    data-checked="<%= 'data-checked' if config('force_burn_after_reading') %>"
-                    <%= 'disabled="disabled"' if config('force_burn_after_reading') %>
-                >
-                <label for="first-view"><%= l('Delete at first download?') %></label>
-            </p>
-        </div>
-        <div class="input-field">
-            <p class="col s12 m6 text-left">
-                <input
-                    type="checkbox"
-                    id="zip-files"
-                    data-checked=""
-                >
-                <label for="zip-files"><%= l('Create a zip archive with the files before uploading?') %></label>
-            </p>
-        </div>
-    % if (config('allow_pwd_on_files') && (!stash('invitation'))) {
-        <div class="col s12 m6">
-            <div class="input-field">
-                <input type="password" id="file_pwd" placeholder="<%= l('Password') %>" class="validate" autocomplete="off">
-                <label for="file_pwd"><%= l('Add a password to file(s)') %></label>
-            </div>
-        </div>
-    % }
-        <div class="col s12 m12 hide" id="zipname-input">
-            <div class="col s12 m6">
-                <div class="input-field">
-                    <input type="text" id="zipname" placeholder="documents.zip" value="documents.zip" class="validate">
-                    <label for="zipname"><%= l('Name of the zip file') %></label>
-                </div>
-            </div>
-        </div>
-    </form>
-    <div class="row">
-        <div id="files" class="col s12 m12">
-            <h2><%= l('Drop files here') %></h2>
-            <p id="max-file-size"></p>
-            <p><small><%= l('or') %></small></p>
-            <label>
-                <span id="file-browser-span" class="btn disabled waves-effect waves-light"><%= l('Click to open the file browser') %></span>
-                <input type="file" id="file-browser-button" multiple disabled>
-            </label>
-        </div>
-        <div id="zipping" class="col s12 m6 hide">
-            <div class="card">
-                <div>
-                    <a href="#" id="reset-zipping">
-                        <i class="right mdi-navigation-close small"></i>
-                    </a>
-                    <div class="card-content">
-                        <span class="card-title" id="zip-name">documents.zip</span> (<span id="zip-size"></span>)
-                        <p id="zip-compressing" class="hide">
-                            <button class="btn-floating pulse"><i class="mdi-content-archive"></i></button>
-                            <%= l('Compressing zip file…') %>
-                        </p>
-                        <ul id="zip-parts">
-                        </ul>
-                        <div class="right-align">
-                            <a href="#" id="uploadZip" class="btn waves-effect waves-light"><%= l('Upload generated zip file') %></a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="results">
-        <h2><%= l('Uploaded files') %></h2>
-        <div id="misc"></div>
-        <ul class="list-group" id="ul-results">
-        </ul>
-    </div>
-%= include 'delays'
-% if (defined stash('invitation')) {
-%= javascript '/partial/index.js?token=' . stash('invitation')->token
-% } else {
-%= javascript '/partial/index.js'
-% }
-%= javascript '/js/sjcl.js'
-%= javascript '/js/moment-with-locales.min.js'
-%= javascript '/js/filesize.min.js'
-%= javascript '/js/jszip.min.js'
-%= javascript '/js/lufi-notifications.js'
-%= javascript '/js/lufi-up.js'
-% }
diff --git a/themes/default/templates/index/delay.html.ep b/themes/default/templates/index/delay.html.ep
new file mode 100644
index 0000000..5ae8e01
--- /dev/null
+++ b/themes/default/templates/index/delay.html.ep
@@ -0,0 +1,42 @@
+% # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
+% my %d = (
+%   delay_0   => l('no time limit'),
+%   delay_1   => l('24 hours'),
+%   delay_365 => l('1 year')
+% );
+<div class="">
+    <div class="inline-block">
+        <a href="#delays-info" class="inline-block" title="<%= l('Important: more information on delays') %>">
+            %= include 'icons/infos.svg'
+        </a>
+        <label for="delete-day">
+            <%= l('File availability') %>
+        </label>
+        <div class="relative inline-block">
+            <select id="delete-day">
+% for my $delay (qw/0 1 7 30 365/) {
+%     my $text = ($delay == 7 || $delay == 30) ? l('%1 days', $delay) : $d{'delay_'.$delay};
+%     if (max_delay) {
+%         if ($delay) {
+%             if ($delay < max_delay) {
+                <option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
+%             } elsif ($delay == max_delay) {
+                <option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
+%                 last;
+%             } else {
+%                 my $text = ($delay == 1) ? l('24 hours') : l('%1 days', $delay);
+                <option value="<%= max_delay %>" <%== is_selected(max_delay) %>><%= l('%1 days', max_delay) %></option>
+%                 last;
+%             }
+%         }
+%     } else {
+                <option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
+%     }
+% }
+            </select>
+            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                %= include 'icons/down.svg'
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/themes/default/templates/index/drag_n_drop.html.ep b/themes/default/templates/index/drag_n_drop.html.ep
new file mode 100644
index 0000000..a23a5a3
--- /dev/null
+++ b/themes/default/templates/index/drag_n_drop.html.ep
@@ -0,0 +1,20 @@
+% # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
+<div id="files" class="col s12 m12">
+    %= include 'icons/upload.svg'
+    <h2><%= l('Drop files here') %></h2>
+    <p id="max-file-size"></p>
+    <p>
+        <small><%= l('or') %></small>
+    </p>
+    <label>
+        <span id="file-browser-span" class="btn">
+            <%= l('Click to open the file browser') %>
+        </span>
+        <input
+            type="file"
+            id="file-browser-button"
+            class="hidden"
+            multiple
+            disabled>
+    </label>
+</div>
diff --git a/themes/default/templates/index/messages.html.ep b/themes/default/templates/index/messages.html.ep
new file mode 100644
index 0000000..e8a16dc
--- /dev/null
+++ b/themes/default/templates/index/messages.html.ep
@@ -0,0 +1,40 @@
+% # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
+<div class="messages">
+% if (defined(config('broadcast_message'))) {
+    <div class="card error">
+        <strong>
+            <%= config('broadcast_message') %>
+        </strong>
+    </div>
+% }
+
+% if (stash('invitation')) {
+    <div class="card info">
+        <strong>
+            <%= l('The link(s) of your file(s) will automatically be sent by mail to %1 (%2)', stash('invitation')->ldap_user, stash('invitation')->ldap_user_mail) %>
+        </strong>
+    </div>
+% }
+
+% if (stop_upload) {
+    <div class="card error">
+        <strong>
+            <%= l('Sorry, the uploading is currently disabled. Please try again later.') %>
+        </strong>
+    </div>
+%   }
+
+    <noscript>
+        <div class="card error">
+            <strong>
+                <%= l('Javascript is disabled. You won\'t be able to use Lufi.') %>
+            </strong>
+        </div>
+    </noscript>
+
+    <div class="card error hidden" id="not-enough-entropy">
+        <strong>
+            <%= l('Your browser does not have enough entropy to generate a strong encryption key. Please wait (it\'s better if you do things on your computer while waiting).') %>
+        </strong>
+    </div>
+</div>
diff --git a/themes/default/templates/index/password.html.ep b/themes/default/templates/index/password.html.ep
new file mode 100644
index 0000000..79119b1
--- /dev/null
+++ b/themes/default/templates/index/password.html.ep
@@ -0,0 +1,12 @@
+% # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
+<div>
+    <label for="file_pwd">
+        <%= l('Add a password to file(s)') %>
+    </label>
+    <input
+        type="password"
+        id="file_pwd"
+        placeholder="<%= l('Password') %>"
+        class="validate w-full"
+        autocomplete="off">
+</div>
diff --git a/themes/default/templates/index/zipfile.html.ep b/themes/default/templates/index/zipfile.html.ep
new file mode 100644
index 0000000..3603999
--- /dev/null
+++ b/themes/default/templates/index/zipfile.html.ep
@@ -0,0 +1,10 @@
+% # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
+<div>
+    <input
+        type="checkbox"
+        id="zip-files"
+        data-checked="">
+    <label for="zip-files">
+        <%= l('Create a zip archive with the files before uploading?') %>
+    </label>
+</div>
diff --git a/themes/default/templates/index/zipname.html.ep b/themes/default/templates/index/zipname.html.ep
new file mode 100644
index 0000000..7bb0bfd
--- /dev/null
+++ b/themes/default/templates/index/zipname.html.ep
@@ -0,0 +1,12 @@
+% # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
+<div class="hidden" id="zipname-input">
+    <label for="zipname">
+        <%= l('Name of the zip file') %>
+    </label>
+    <input
+        type="text"
+        id="zipname"
+        placeholder="documents.zip"
+        value="documents.zip"
+        class="validate w-full">
+</div>
diff --git a/themes/default/templates/index/zipped_files.html.ep b/themes/default/templates/index/zipped_files.html.ep
new file mode 100644
index 0000000..42e5a8a
--- /dev/null
+++ b/themes/default/templates/index/zipped_files.html.ep
@@ -0,0 +1,24 @@
+% # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
+<div id="zipping" class="hidden">
+    <div class="card">
+        <a href="#" id="reset-zipping">
+            <i class="right mdi-navigation-close small"></i>
+        </a>
+        <div class="card">
+            <span id="zip-name">documents.zip</span> (<span id="zip-size"></span>)
+            <p id="zip-compressing" class="hidden">
+                <button class="btn-floating pulse">
+                    <i class="mdi-content-archive"></i>
+                </button>
+                <%= l('Compressing zip file…') %>
+            </p>
+            <ul id="zip-parts">
+            </ul>
+            <div class="right-align">
+                <a href="#" id="uploadZip" class="btn">
+                    <%= l('Upload generated zip file') %>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/themes/default/templates/layouts/default.html.ep b/themes/default/templates/layouts/default.html.ep
index b269f00..388a40e 100644
--- a/themes/default/templates/layouts/default.html.ep
+++ b/themes/default/templates/layouts/default.html.ep
@@ -1,8 +1,9 @@
 % # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
 % my $lang = $self->languages;
 %    $lang =~ s/-(.*)/_\U$1/;
+% my $body_class = ($lang eq 'ar') ? 'class="rtl"' : '';
 <!DOCTYPE html>
-<html>
+<html lang="<%= $lang %>">
     <head>
         <title><%= config('instance_name') %></title>
         <meta charset="utf-8">
@@ -17,86 +18,169 @@
         <link rel="apple-touch-icon" sizes="120x120" href="<%= url_for('/img/lufi120.png') %>">
         <link rel="apple-touch-icon" sizes="152x152" href="<%= url_for('/img/lufi152.png') %>">
         <link rel="apple-touch-icon-precomposed" sizes="128x128" href="<%= url_for('/img/lufi128.png') %>">
-        %= stylesheet '/css/materialize.min.css'
-        %= stylesheet '/css/lufi.css'
+        %= stylesheet '/css/tailwindcss.css'
         %= javascript '/js/ie-detection.js'
+        %= javascript '/js/alpine.min.js', defer => undef
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
-    <body>
-        <nav class="cyan">
-            <div class="nav-wrapper container">
-                <a href="<%= url_for('/') %>" class="brand-logo">&nbsp;<img src="<%= url_for('/img/lufi-min.png') %>" alt="logo"> <%= config('instance_name') %></a>
-                <a href="#" data-activates="mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
-                <ul id="nav-mobile" class="right hide-on-med-and-down">
-                    <li><a href="<%= $self->config('report') %>"><%= l('Report file') %></a></li>
-                % if ((!defined(config('ldap')) && !defined(config('htpasswd'))) || is_user_authenticated()) {
-                    <li<%== ' class="active"' if (current_route eq 'index') %>><a href="<%= url_for('/') %>"><%= l('Upload files') %></a></li>
-                    <li<%== ' class="active"' if (current_route eq 'files') %>><a href="<%= url_for('/files') %>"><%= l('My files') %></a></li>
-                    % if (defined config('ldap') && defined config('invitations')) {
-                        <li<%== ' class="active"' if (current_route eq 'invite') %>><a href="<%= url_for('/invite') %>"><%= l('Invite a guest') %></a></li>
-                        <li<%== ' class="active"' if (current_route eq 'invite/list') %>><a href="<%= url_for('/invite/list') %>"><%= l('My invitations') %></a></li>
-                    % }
-                % } else {
-                    <li><a href="<%= url_for('/login') %>"><%= l('Signin') %></a></li>
-                % }
-                    <li>
-                        <div class="input-field select-lang">
-                            <label class="hiddendiv"><%= l('Language') %></label>
-                            <select>
-                                <option value="" disabled selected><%= l('Language') %></option>
-                            % for my $i (@{$self->available_langs}) {
-                                <option value="<%= $i %>"><%= iso639_native_name($i) %></option>
-                            % }
-                            </select>
-                        </div>
+    <body <%== $body_class %>>
+        <nav class="navbar" x-data="{ route: '<%= current_route %>', langDpdwn: false }">
+            <ul id="nav-mobile" class="flex">
+                    <li class="navbrand">
+                        <img src="<%= url_for('/img/lufi-min.png') %>" alt="logo" class="inline">
+                        <%= config('instance_name') %>
+                    </li>
+                    <li class="sm:hidden">
+                        <a href="#">
+                            %= include 'icons/hamburger.svg'
+                        </a>
                     </li>
-                    <li<%== ' class="active"' if (current_route eq 'about') %>><a href="<%= url_for('/about') %>"><%= l('About') %></a></li>
-                % if ((defined(config('ldap')) || defined(config('htpasswd'))) && is_user_authenticated()) {
                     <li>
-                        <form action="<%= url_for('/logout') %>" method="POST">
-                            %= csrf_field
-                            <button class="btn-flat" type="submit"><%= l('Logout') %></button>
-                        </form>
+                        <a href="<%= $self->config('report') %>">
+                            <%= l('Report file') %>
+                        </a>
                     </li>
-                % }
-                </ul>
-                <ul id="mobile" class="side-nav">
-                    <li><a href="<%= $self->config('report') %>"><%= l('Report file') %></a></li>
                 % if ((!defined(config('ldap')) && !defined(config('htpasswd'))) || is_user_authenticated()) {
-                    <li<%== ' class="active"' if (current_route eq 'index') %>><a href="<%= url_for('/') %>"><%= l('Upload files') %></a></li>
-                    <li<%== ' class="active"' if (current_route eq 'files') %>><a href="<%= url_for('/files') %>"><%= l('My files') %></a></li>
+                    <li :class="{ 'active': route === 'index' }">
+                        <a href="<%= url_for('/') %>">
+                            <%= l('Upload files') %>
+                        </a>
+                    </li>
+                    <li :class="{ 'active': route === 'files' }">
+                        <a href="<%= url_for('/files') %>">
+                            <%= l('My files') %>
+                        </a>
+                    </li>
                     % if (defined config('ldap') && defined config('invitations')) {
-                        <li<%== ' class="active"' if (current_route eq 'invite') %>><a href="<%= url_for('/invite') %>"><%= l('Invite a guest') %></a></li>
-                        <li<%== ' class="active"' if (current_route eq 'invite/list') %>><a href="<%= url_for('/invite/list') %>"><%= l('My invitations') %></a></li>
+                        <li :class="{ 'active': route === 'invite' }">
+                            <a href="<%= url_for('/invite') %>">
+                                <%= l('Invite a guest') %>
+                            </a>
+                        </li>
+                        <li :class="{ 'active': route === 'invite/list' }">
+                            <a href="<%= url_for('/invite/list') %>">
+                                <%= l('My invitations') %>
+                            </a>
+                        </li>
                     % }
                 % } else {
-                    <li><a href="<%= url_for('/login') %>"><%= l('Signin') %></a></li>
-                % }
                     <li>
-                        <div class="input-field select-lang-mobile">
-                            <label class="hiddendiv"><%= l('Language') %></label>
-                            <select>
-                                <option value="" disabled selected><%= l('Language') %></option>
-                            % for my $i (@{$self->available_langs}) {
-                                <option value="<%= $i %>"><%= iso639_native_name($i) %></option>
-                            % }
-                            </select>
-                        </div>
+                        <a href="<%= url_for('/login') %>">
+                            <%= l('Signin') %>
+                        </a>
+                    </li>
+                % }
+                    <li :class="{ 'active': route === 'about' }">
+                        <a href="<%= url_for('/about') %>">
+                            <%= l('About') %>
+                        </a>
                     </li>
-                    <li<%== ' class="active"' if (current_route eq 'about') %>><a href="<%= url_for('/about') %>"><%= l('About') %></a></li>
                 % if ((defined(config('ldap')) || defined(config('htpasswd'))) && is_user_authenticated()) {
                     <li>
                         <form action="<%= url_for('/logout') %>" method="POST">
                             %= csrf_field
-                            <button class="btn-flat" type="submit"><%= l('Logout') %></button>
+                            <button class="btn-flat" type="submit">
+                                <%= l('Logout') %>
+                            </button>
                         </form>
                     </li>
                 % }
+                    <li class="lang-dropdown">
+                        <span
+                            @click="langDpdwn = !langDpdwn"
+                            @click.away="langDpdwn = false">
+                            %= include 'icons/meridian.svg'
+                            <%= l('Language') %>
+                            <span x-show="!langDpdwn">
+                                %= include 'icons/down.svg'
+                            </span>
+                            <span x-show="langDpdwn">
+                                %= include 'icons/up.svg'
+                            </span>
+                        </span>
+                        <ul x-show="langDpdwn">
+                        % for my $i (@{$self->available_langs}) {
+                            <li @click="changeLang('<%= $i %>')">
+                                <%= iso639_native_name($i) %>
+                            </li>
+                        % }
+                        </ul>
+                    </li>
                 </ul>
-            </div>
+            </ul>
+%#            <div class="">
+%#                <a href="<%= url_for('/') %>" class="">&nbsp;<img src="<%= url_for('/img/lufi-min.png') %>" alt="logo"> <%= config('instance_name') %></a>
+%#                <a href="#" data-activates="mobile" class=""><i class=""></i></a>
+%#                <ul id="nav-mobiile" class="hidden">
+%#                    <li><a href="<%= $self->config('report') %>"><%= l('Report file') %></a></li>
+%#                % if ((!defined(config('ldap')) && !defined(config('htpasswd'))) || is_user_authenticated()) {
+%#                    <li<%== ' class="active"' if (current_route eq 'index') %>><a href="<%= url_for('/') %>"><%= l('Upload files') %></a></li>
+%#                    <li<%== ' class="active"' if (current_route eq 'files') %>><a href="<%= url_for('/files') %>"><%= l('My files') %></a></li>
+%#                    % if (defined config('ldap') && defined config('invitations')) {
+%#                        <li<%== ' class="active"' if (current_route eq 'invite') %>><a href="<%= url_for('/invite') %>"><%= l('Invite a guest') %></a></li>
+%#                        <li<%== ' class="active"' if (current_route eq 'invite/list') %>><a href="<%= url_for('/invite/list') %>"><%= l('My invitations') %></a></li>
+%#                    % }
+%#                % } else {
+%#                    <li><a href="<%= url_for('/login') %>"><%= l('Signin') %></a></li>
+%#                % }
+%#                    <li>
+%#                        <div class="input-field select-lang">
+%#                            <label class="hiddendiv"><%= l('Language') %></label>
+%#                            <select>
+%#                                <option value="" disabled selected><%= l('Language') %></option>
+%#                            % for my $i (@{$self->available_langs}) {
+%#                                <option value="<%= $i %>"><%= iso639_native_name($i) %></option>
+%#                            % }
+%#                            </select>
+%#                        </div>
+%#                    </li>
+%#                    <li<%== ' class="active"' if (current_route eq 'about') %>><a href="<%= url_for('/about') %>"><%= l('About') %></a></li>
+%#                % if ((defined(config('ldap')) || defined(config('htpasswd'))) && is_user_authenticated()) {
+%#                    <li>
+%#                        <form action="<%= url_for('/logout') %>" method="POST">
+%#                            %= csrf_field
+%#                            <button class="btn-flat" type="submit"><%= l('Logout') %></button>
+%#                        </form>
+%#                    </li>
+%#                % }
+%#                </ul>
+%#                <ul id="mobile" class="side-nav">
+%#                    <li><a href="<%= $self->config('report') %>"><%= l('Report file') %></a></li>
+%#                % if ((!defined(config('ldap')) && !defined(config('htpasswd'))) || is_user_authenticated()) {
+%#                    <li<%== ' class="active"' if (current_route eq 'index') %>><a href="<%= url_for('/') %>"><%= l('Upload files') %></a></li>
+%#                    <li<%== ' class="active"' if (current_route eq 'files') %>><a href="<%= url_for('/files') %>"><%= l('My files') %></a></li>
+%#                    % if (defined config('ldap') && defined config('invitations')) {
+%#                        <li<%== ' class="active"' if (current_route eq 'invite') %>><a href="<%= url_for('/invite') %>"><%= l('Invite a guest') %></a></li>
+%#                        <li<%== ' class="active"' if (current_route eq 'invite/list') %>><a href="<%= url_for('/invite/list') %>"><%= l('My invitations') %></a></li>
+%#                    % }
+%#                % } else {
+%#                    <li><a href="<%= url_for('/login') %>"><%= l('Signin') %></a></li>
+%#                % }
+%#                    <li>
+%#                        <div class="input-field select-lang-mobile">
+%#                            <label class="hiddendiv"><%= l('Language') %></label>
+%#                            <select>
+%#                                <option value="" disabled selected><%= l('Language') %></option>
+%#                            % for my $i (@{$self->available_langs}) {
+%#                                <option value="<%= $i %>"><%= iso639_native_name($i) %></option>
+%#                            % }
+%#                            </select>
+%#                        </div>
+%#                    </li>
+%#                    <li<%== ' class="active"' if (current_route eq 'about') %>><a href="<%= url_for('/about') %>"><%= l('About') %></a></li>
+%#                % if ((defined(config('ldap')) || defined(config('htpasswd'))) && is_user_authenticated()) {
+%#                    <li>
+%#                        <form action="<%= url_for('/logout') %>" method="POST">
+%#                            %= csrf_field
+%#                            <button class="btn-flat" type="submit"><%= l('Logout') %></button>
+%#                        </form>
+%#                    </li>
+%#                % }
+%#                </ul>
+%#            </div>
         </nav>
-        <div class="container">
-            %= javascript '/js/jquery-2.2.4.min.js'
+        <div class="w-full">
+            %#= javascript '/js/jquery-2.2.4.min.js'
             %= javascript '/partial/layout.js'
             %= javascript '/js/lufi-common.js'
             <%= content %>
@@ -104,7 +188,7 @@
 % if (defined(config('piwik_img'))) {
         <img src="<%== config('piwik_img') %>" class="no_border" alt="" />
 % }
-            %= javascript '/js/materialize.js'
-            %= javascript '/js/sidenav.js'
+            %#= javascript '/js/materialize.js'
+            %#= javascript '/js/sidenav.js'
     </body>
 </html>