@joe-truecode/components 1.0.1

package/README.md

@@ -0,0 +1,221 @@
+lit/mycomponents/README.md
+# MyComponents
+
+A framework-agnostic UI component library built with **TypeScript**, **TailwindCSS v4**, and **Alpine.js**. This package is designed for maximum compatibility and ease of use in any modern frontend stack, including React, Vue, Laravel, and plain HTML.
+
+---
+
+## Table of Contents
+
+- [Project Structure](#project-structure)
+- [Getting Started](#getting-started)
+- [Editing & Adding Features](#editing--adding-features)
+  - [Adding New Components](#adding-new-components)
+  - [Using TailwindCSS & Alpine.js](#using-tailwindcss--alpinejs)
+  - [TypeScript Best Practices](#typescript-best-practices)
+- [Building & Development](#building--development)
+- [Deploying & Publishing](#deploying--publishing)
+- [Consuming in Other Frameworks](#consuming-in-other-frameworks)
+  - [React](#react)
+  - [Vue](#vue)
+  - [Laravel & Blade](#laravel--blade)
+  - [Plain HTML/JS](#plain-htmljs)
+- [Troubleshooting](#troubleshooting)
+- [References](#references)
+
+---
+
+## Project Structure
+
+```
+mycomponents/
+├── dist/                # Build output
+├── src/
+│   ├── index.ts         # Entry point, exports components
+│   ├── style.css        # TailwindCSS entry
+│   └── index.html       # Demo HTML
+├── package.json
+├── postcss.config.js
+├── tailwind.config.js
+├── webpack.config.ts
+├── tsconfig.json
+└── README.md
+```
+
+---
+
+## Getting Started
+
+1. **Install dependencies:**
+   ```sh
+   npm install
+   ```
+
+2. **Development mode (hot reload):**
+   ```sh
+   npm run dev
+   ```
+   Visit [http://localhost:3000](http://localhost:3000) to see the demo.
+
+3. **Production build:**
+   ```sh
+   npm run build
+   ```
+
+---
+
+## Editing & Adding Features
+
+### Adding New Components
+
+1. **Create a new TypeScript file in `src/`**  
+   Example: `src/my-button.ts`
+   ```ts
+   export class MyButton extends HTMLElement {
+     connectedCallback() {
+       this.innerHTML = `
+         <button class="bg-green-500 text-white px-4 py-2 rounded" @click="alert('Clicked!')">
+           <slot>Click Me</slot>
+         </button>
+       `;
+       window.Alpine && window.Alpine.initTree(this);
+     }
+   }
+   if (!customElements.get('my-button')) {
+     customElements.define('my-button', MyButton);
+   }
+   ```
+
+2. **Export your component in `src/index.ts`:**
+   ```ts
+   export * from './my-button';
+   ```
+
+3. **Use Tailwind utility classes and Alpine.js directives as needed.**
+
+### Using TailwindCSS & Alpine.js
+
+- **TailwindCSS:**  
+  Use utility classes directly in your component templates.
+- **Alpine.js:**  
+  Use `x-data`, `x-show`, `@click`, etc. Alpine is globally available.
+
+### TypeScript Best Practices
+
+- Use strict types for all custom elements.
+- Use `declare global` for extending the `window` object if needed.
+- Always check if a custom element is already defined before registering.
+
+---
+
+## Building & Development
+
+- **Development:**  
+  `npm run dev` (Webpack dev server, hot reload)
+- **Production:**  
+  `npm run build` (Outputs to `dist/`)
+- **Type checking:**  
+  `npm run typecheck`
+
+---
+
+## Deploying & Publishing
+
+1. **Login to npm (if not already):**
+   ```sh
+   npm login
+   ```
+
+2. **Publish:**
+   ```sh
+   npm publish --access public
+   ```
+
+3. **After publishing:**  
+   Your package can be installed via npm in any project.
+
+---
+
+## Consuming in Other Frameworks
+
+### React
+
+1. **Install the package:**
+   ```sh
+   npm install mycomponents
+   ```
+
+2. **Import the bundle in your entry file (e.g., `index.tsx`):**
+   ```ts
+   import 'mycomponents/dist/bundle.js';
+   import 'mycomponents/dist/bundle.css'; // If you extract CSS separately
+   ```
+
+3. **Use the custom element in JSX:**
+   ```jsx
+   <my-toggle></my-toggle>
+   ```
+
+   > Note: For TypeScript, add a declaration for custom elements:
+   ```ts
+   declare namespace JSX {
+     interface IntrinsicElements {
+       'my-toggle': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+     }
+   }
+   ```
+
+### Vue
+
+1. **Install and import as above.**
+2. **Use in templates:**
+   ```html
+   <my-toggle></my-toggle>
+   ```
+
+### Laravel & Blade
+
+1. **Install via npm/yarn.**
+2. **Include the bundle in your Blade template:**
+   ```blade
+   <script src="{{ mix('node_modules/mycomponents/dist/bundle.js') }}"></script>
+   <link rel="stylesheet" href="{{ mix('node_modules/mycomponents/dist/bundle.css') }}">
+   <my-toggle></my-toggle>
+   ```
+
+### Plain HTML/JS
+
+1. **Include the bundle via CDN or local build:**
+   ```html
+   <script src="path/to/bundle.js"></script>
+   <link rel="stylesheet" href="path/to/bundle.css">
+   <my-toggle></my-toggle>
+   ```
+
+---
+
+## Troubleshooting
+
+- **TailwindCSS not working?**  
+  Ensure you are using the correct PostCSS plugin: `@tailwindcss/postcss`.
+- **Custom elements not rendering?**  
+  Make sure the bundle is loaded before using the elements.
+- **TypeScript errors for custom elements in React?**  
+  Add a JSX namespace declaration as shown above.
+- **Alpine.js not working?**  
+  Ensure `window.Alpine` is available and `initTree` is called in your component.
+
+---
+
+## References
+
+- [TailwindCSS v4 Announcement](https://tailwindcss.com/blog/tailwindcss-v4)
+- [Alpine.js Documentation](https://alpinejs.dev/)
+- [Web Components Guide](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
+- [TypeScript Custom Elements](https://www.typescriptlang.org/docs/handbook/declaration-files/templates/web-component-dts.html)
+- [PostCSS Plugin Migration](https://tailwindcss.com/docs/installation#using-tailwind-with-postcss)
+
+---
+
+**Happy hacking!**  
+Feel free to open issues or PRs for improvements.

package/dist/bundle.js

@@ -0,0 +1,253 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./node_modules/alpinejs/dist/module.esm.js":
+/*!**************************************************!*\
+  !*** ./node_modules/alpinejs/dist/module.esm.js ***!
+  \**************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Alpine: () => (/* binding */ src_default),\n/* harmony export */   \"default\": () => (/* binding */ module_default)\n/* harmony export */ });\n// packages/alpinejs/src/scheduler.js\nvar flushPending = false;\nvar flushing = false;\nvar queue = [];\nvar lastFlushedIndex = -1;\nfunction scheduler(callback) {\n  queueJob(callback);\n}\nfunction queueJob(job) {\n  if (!queue.includes(job))\n    queue.push(job);\n  queueFlush();\n}\nfunction dequeueJob(job) {\n  let index = queue.indexOf(job);\n  if (index !== -1 && index > lastFlushedIndex)\n    queue.splice(index, 1);\n}\nfunction queueFlush() {\n  if (!flushing && !flushPending) {\n    flushPending = true;\n    queueMicrotask(flushJobs);\n  }\n}\nfunction flushJobs() {\n  flushPending = false;\n  flushing = true;\n  for (let i = 0; i < queue.length; i++) {\n    queue[i]();\n    lastFlushedIndex = i;\n  }\n  queue.length = 0;\n  lastFlushedIndex = -1;\n  flushing = false;\n}\n\n// packages/alpinejs/src/reactivity.js\nvar reactive;\nvar effect;\nvar release;\nvar raw;\nvar shouldSchedule = true;\nfunction disableEffectScheduling(callback) {\n  shouldSchedule = false;\n  callback();\n  shouldSchedule = true;\n}\nfunction setReactivityEngine(engine) {\n  reactive = engine.reactive;\n  release = engine.release;\n  effect = (callback) => engine.effect(callback, { scheduler: (task) => {\n    if (shouldSchedule) {\n      scheduler(task);\n    } else {\n      task();\n    }\n  } });\n  raw = engine.raw;\n}\nfunction overrideEffect(override) {\n  effect = override;\n}\nfunction elementBoundEffect(el) {\n  let cleanup2 = () => {\n  };\n  let wrappedEffect = (callback) => {\n    let effectReference = effect(callback);\n    if (!el._x_effects) {\n      el._x_effects = /* @__PURE__ */ new Set();\n      el._x_runEffects = () => {\n        el._x_effects.forEach((i) => i());\n      };\n    }\n    el._x_effects.add(effectReference);\n    cleanup2 = () => {\n      if (effectReference === void 0)\n        return;\n      el._x_effects.delete(effectReference);\n      release(effectReference);\n    };\n    return effectReference;\n  };\n  return [wrappedEffect, () => {\n    cleanup2();\n  }];\n}\nfunction watch(getter, callback) {\n  let firstTime = true;\n  let oldValue;\n  let effectReference = effect(() => {\n    let value = getter();\n    JSON.stringify(value);\n    if (!firstTime) {\n      queueMicrotask(() => {\n        callback(value, oldValue);\n        oldValue = value;\n      });\n    } else {\n      oldValue = value;\n    }\n    firstTime = false;\n  });\n  return () => release(effectReference);\n}\n\n// packages/alpinejs/src/mutation.js\nvar onAttributeAddeds = [];\nvar onElRemoveds = [];\nvar onElAddeds = [];\nfunction onElAdded(callback) {\n  onElAddeds.push(callback);\n}\nfunction onElRemoved(el, callback) {\n  if (typeof callback === \"function\") {\n    if (!el._x_cleanups)\n      el._x_cleanups = [];\n    el._x_cleanups.push(callback);\n  } else {\n    callback = el;\n    onElRemoveds.push(callback);\n  }\n}\nfunction onAttributesAdded(callback) {\n  onAttributeAddeds.push(callback);\n}\nfunction onAttributeRemoved(el, name, callback) {\n  if (!el._x_attributeCleanups)\n    el._x_attributeCleanups = {};\n  if (!el._x_attributeCleanups[name])\n    el._x_attributeCleanups[name] = [];\n  el._x_attributeCleanups[name].push(callback);\n}\nfunction cleanupAttributes(el, names) {\n  if (!el._x_attributeCleanups)\n    return;\n  Object.entries(el._x_attributeCleanups).forEach(([name, value]) => {\n    if (names === void 0 || names.includes(name)) {\n      value.forEach((i) => i());\n      delete el._x_attributeCleanups[name];\n    }\n  });\n}\nfunction cleanupElement(el) {\n  el._x_effects?.forEach(dequeueJob);\n  while (el._x_cleanups?.length)\n    el._x_cleanups.pop()();\n}\nvar observer = new MutationObserver(onMutate);\nvar currentlyObserving = false;\nfunction startObservingMutations() {\n  observer.observe(document, { subtree: true, childList: true, attributes: true, attributeOldValue: true });\n  currentlyObserving = true;\n}\nfunction stopObservingMutations() {\n  flushObserver();\n  observer.disconnect();\n  currentlyObserving = false;\n}\nvar queuedMutations = [];\nfunction flushObserver() {\n  let records = observer.takeRecords();\n  queuedMutations.push(() => records.length > 0 && onMutate(records));\n  let queueLengthWhenTriggered = queuedMutations.length;\n  queueMicrotask(() => {\n    if (queuedMutations.length === queueLengthWhenTriggered) {\n      while (queuedMutations.length > 0)\n        queuedMutations.shift()();\n    }\n  });\n}\nfunction mutateDom(callback) {\n  if (!currentlyObserving)\n    return callback();\n  stopObservingMutations();\n  let result = callback();\n  startObservingMutations();\n  return result;\n}\nvar isCollecting = false;\nvar deferredMutations = [];\nfunction deferMutations() {\n  isCollecting = true;\n}\nfunction flushAndStopDeferringMutations() {\n  isCollecting = false;\n  onMutate(deferredMutations);\n  deferredMutations = [];\n}\nfunction onMutate(mutations) {\n  if (isCollecting) {\n    deferredMutations = deferredMutations.concat(mutations);\n    return;\n  }\n  let addedNodes = [];\n  let removedNodes = /* @__PURE__ */ new Set();\n  let addedAttributes = /* @__PURE__ */ new Map();\n  let removedAttributes = /* @__PURE__ */ new Map();\n  for (let i = 0; i < mutations.length; i++) {\n    if (mutations[i].target._x_ignoreMutationObserver)\n      continue;\n    if (mutations[i].type === \"childList\") {\n      mutations[i].removedNodes.forEach((node) => {\n        if (node.nodeType !== 1)\n          return;\n        if (!node._x_marker)\n          return;\n        removedNodes.add(node);\n      });\n      mutations[i].addedNodes.forEach((node) => {\n        if (node.nodeType !== 1)\n          return;\n        if (removedNodes.has(node)) {\n          removedNodes.delete(node);\n          return;\n        }\n        if (node._x_marker)\n          return;\n        addedNodes.push(node);\n      });\n    }\n    if (mutations[i].type === \"attributes\") {\n      let el = mutations[i].target;\n      let name = mutations[i].attributeName;\n      let oldValue = mutations[i].oldValue;\n      let add2 = () => {\n        if (!addedAttributes.has(el))\n          addedAttributes.set(el, []);\n        addedAttributes.get(el).push({ name, value: el.getAttribute(name) });\n      };\n      let remove = () => {\n        if (!removedAttributes.has(el))\n          removedAttributes.set(el, []);\n        removedAttributes.get(el).push(name);\n      };\n      if (el.hasAttribute(name) && oldValue === null) {\n        add2();\n      } else if (el.hasAttribute(name)) {\n        remove();\n        add2();\n      } else {\n        remove();\n      }\n    }\n  }\n  removedAttributes.forEach((attrs, el) => {\n    cleanupAttributes(el, attrs);\n  });\n  addedAttributes.forEach((attrs, el) => {\n    onAttributeAddeds.forEach((i) => i(el, attrs));\n  });\n  for (let node of removedNodes) {\n    if (addedNodes.some((i) => i.contains(node)))\n      continue;\n    onElRemoveds.forEach((i) => i(node));\n  }\n  for (let node of addedNodes) {\n    if (!node.isConnected)\n      continue;\n    onElAddeds.forEach((i) => i(node));\n  }\n  addedNodes = null;\n  removedNodes = null;\n  addedAttributes = null;\n  removedAttributes = null;\n}\n\n// packages/alpinejs/src/scope.js\nfunction scope(node) {\n  return mergeProxies(closestDataStack(node));\n}\nfunction addScopeToNode(node, data2, referenceNode) {\n  node._x_dataStack = [data2, ...closestDataStack(referenceNode || node)];\n  return () => {\n    node._x_dataStack = node._x_dataStack.filter((i) => i !== data2);\n  };\n}\nfunction closestDataStack(node) {\n  if (node._x_dataStack)\n    return node._x_dataStack;\n  if (typeof ShadowRoot === \"function\" && node instanceof ShadowRoot) {\n    return closestDataStack(node.host);\n  }\n  if (!node.parentNode) {\n    return [];\n  }\n  return closestDataStack(node.parentNode);\n}\nfunction mergeProxies(objects) {\n  return new Proxy({ objects }, mergeProxyTrap);\n}\nvar mergeProxyTrap = {\n  ownKeys({ objects }) {\n    return Array.from(\n      new Set(objects.flatMap((i) => Object.keys(i)))\n    );\n  },\n  has({ objects }, name) {\n    if (name == Symbol.unscopables)\n      return false;\n    return objects.some(\n      (obj) => Object.prototype.hasOwnProperty.call(obj, name) || Reflect.has(obj, name)\n    );\n  },\n  get({ objects }, name, thisProxy) {\n    if (name == \"toJSON\")\n      return collapseProxies;\n    return Reflect.get(\n      objects.find(\n        (obj) => Reflect.has(obj, name)\n      ) || {},\n      name,\n      thisProxy\n    );\n  },\n  set({ objects }, name, value, thisProxy) {\n    const target = objects.find(\n      (obj) => Object.prototype.hasOwnProperty.call(obj, name)\n    ) || objects[objects.length - 1];\n    const descriptor = Object.getOwnPropertyDescriptor(target, name);\n    if (descriptor?.set && descriptor?.get)\n      return descriptor.set.call(thisProxy, value) || true;\n    return Reflect.set(target, name, value);\n  }\n};\nfunction collapseProxies() {\n  let keys = Reflect.ownKeys(this);\n  return keys.reduce((acc, key) => {\n    acc[key] = Reflect.get(this, key);\n    return acc;\n  }, {});\n}\n\n// packages/alpinejs/src/interceptor.js\nfunction initInterceptors(data2) {\n  let isObject2 = (val) => typeof val === \"object\" && !Array.isArray(val) && val !== null;\n  let recurse = (obj, basePath = \"\") => {\n    Object.entries(Object.getOwnPropertyDescriptors(obj)).forEach(([key, { value, enumerable }]) => {\n      if (enumerable === false || value === void 0)\n        return;\n      if (typeof value === \"object\" && value !== null && value.__v_skip)\n        return;\n      let path = basePath === \"\" ? key : `${basePath}.${key}`;\n      if (typeof value === \"object\" && value !== null && value._x_interceptor) {\n        obj[key] = value.initialize(data2, path, key);\n      } else {\n        if (isObject2(value) && value !== obj && !(value instanceof Element)) {\n          recurse(value, path);\n        }\n      }\n    });\n  };\n  return recurse(data2);\n}\nfunction interceptor(callback, mutateObj = () => {\n}) {\n  let obj = {\n    initialValue: void 0,\n    _x_interceptor: true,\n    initialize(data2, path, key) {\n      return callback(this.initialValue, () => get(data2, path), (value) => set(data2, path, value), path, key);\n    }\n  };\n  mutateObj(obj);\n  return (initialValue) => {\n    if (typeof initialValue === \"object\" && initialValue !== null && initialValue._x_interceptor) {\n      let initialize = obj.initialize.bind(obj);\n      obj.initialize = (data2, path, key) => {\n        let innerValue = initialValue.initialize(data2, path, key);\n        obj.initialValue = innerValue;\n        return initialize(data2, path, key);\n      };\n    } else {\n      obj.initialValue = initialValue;\n    }\n    return obj;\n  };\n}\nfunction get(obj, path) {\n  return path.split(\".\").reduce((carry, segment) => carry[segment], obj);\n}\nfunction set(obj, path, value) {\n  if (typeof path === \"string\")\n    path = path.split(\".\");\n  if (path.length === 1)\n    obj[path[0]] = value;\n  else if (path.length === 0)\n    throw error;\n  else {\n    if (obj[path[0]])\n      return set(obj[path[0]], path.slice(1), value);\n    else {\n      obj[path[0]] = {};\n      return set(obj[path[0]], path.slice(1), value);\n    }\n  }\n}\n\n// packages/alpinejs/src/magics.js\nvar magics = {};\nfunction magic(name, callback) {\n  magics[name] = callback;\n}\nfunction injectMagics(obj, el) {\n  let memoizedUtilities = getUtilities(el);\n  Object.entries(magics).forEach(([name, callback]) => {\n    Object.defineProperty(obj, `$${name}`, {\n      get() {\n        return callback(el, memoizedUtilities);\n      },\n      enumerable: false\n    });\n  });\n  return obj;\n}\nfunction getUtilities(el) {\n  let [utilities, cleanup2] = getElementBoundUtilities(el);\n  let utils = { interceptor, ...utilities };\n  onElRemoved(el, cleanup2);\n  return utils;\n}\n\n// packages/alpinejs/src/utils/error.js\nfunction tryCatch(el, expression, callback, ...args) {\n  try {\n    return callback(...args);\n  } catch (e) {\n    handleError(e, el, expression);\n  }\n}\nfunction handleError(error2, el, expression = void 0) {\n  error2 = Object.assign(\n    error2 ?? { message: \"No error message given.\" },\n    { el, expression }\n  );\n  console.warn(`Alpine Expression Error: ${error2.message}\n\n${expression ? 'Expression: \"' + expression + '\"\\n\\n' : \"\"}`, el);\n  setTimeout(() => {\n    throw error2;\n  }, 0);\n}\n\n// packages/alpinejs/src/evaluator.js\nvar shouldAutoEvaluateFunctions = true;\nfunction dontAutoEvaluateFunctions(callback) {\n  let cache = shouldAutoEvaluateFunctions;\n  shouldAutoEvaluateFunctions = false;\n  let result = callback();\n  shouldAutoEvaluateFunctions = cache;\n  return result;\n}\nfunction evaluate(el, expression, extras = {}) {\n  let result;\n  evaluateLater(el, expression)((value) => result = value, extras);\n  return result;\n}\nfunction evaluateLater(...args) {\n  return theEvaluatorFunction(...args);\n}\nvar theEvaluatorFunction = normalEvaluator;\nfunction setEvaluator(newEvaluator) {\n  theEvaluatorFunction = newEvaluator;\n}\nfunction normalEvaluator(el, expression) {\n  let overriddenMagics = {};\n  injectMagics(overriddenMagics, el);\n  let dataStack = [overriddenMagics, ...closestDataStack(el)];\n  let evaluator = typeof expression === \"function\" ? generateEvaluatorFromFunction(dataStack, expression) : generateEvaluatorFromString(dataStack, expression, el);\n  return tryCatch.bind(null, el, expression, evaluator);\n}\nfunction generateEvaluatorFromFunction(dataStack, func) {\n  return (receiver = () => {\n  }, { scope: scope2 = {}, params = [] } = {}) => {\n    let result = func.apply(mergeProxies([scope2, ...dataStack]), params);\n    runIfTypeOfFunction(receiver, result);\n  };\n}\nvar evaluatorMemo = {};\nfunction generateFunctionFromString(expression, el) {\n  if (evaluatorMemo[expression]) {\n    return evaluatorMemo[expression];\n  }\n  let AsyncFunction = Object.getPrototypeOf(async function() {\n  }).constructor;\n  let rightSideSafeExpression = /^[\\n\\s]*if.*\\(.*\\)/.test(expression.trim()) || /^(let|const)\\s/.test(expression.trim()) ? `(async()=>{ ${expression} })()` : expression;\n  const safeAsyncFunction = () => {\n    try {\n      let func2 = new AsyncFunction(\n        [\"__self\", \"scope\"],\n        `with (scope) { __self.result = ${rightSideSafeExpression} }; __self.finished = true; return __self.result;`\n      );\n      Object.defineProperty(func2, \"name\", {\n        value: `[Alpine] ${expression}`\n      });\n      return func2;\n    } catch (error2) {\n      handleError(error2, el, expression);\n      return Promise.resolve();\n    }\n  };\n  let func = safeAsyncFunction();\n  evaluatorMemo[expression] = func;\n  return func;\n}\nfunction generateEvaluatorFromString(dataStack, expression, el) {\n  let func = generateFunctionFromString(expression, el);\n  return (receiver = () => {\n  }, { scope: scope2 = {}, params = [] } = {}) => {\n    func.result = void 0;\n    func.finished = false;\n    let completeScope = mergeProxies([scope2, ...dataStack]);\n    if (typeof func === \"function\") {\n      let promise = func(func, completeScope).catch((error2) => handleError(error2, el, expression));\n      if (func.finished) {\n        runIfTypeOfFunction(receiver, func.result, completeScope, params, el);\n        func.result = void 0;\n      } else {\n        promise.then((result) => {\n          runIfTypeOfFunction(receiver, result, completeScope, params, el);\n        }).catch((error2) => handleError(error2, el, expression)).finally(() => func.result = void 0);\n      }\n    }\n  };\n}\nfunction runIfTypeOfFunction(receiver, value, scope2, params, el) {\n  if (shouldAutoEvaluateFunctions && typeof value === \"function\") {\n    let result = value.apply(scope2, params);\n    if (result instanceof Promise) {\n      result.then((i) => runIfTypeOfFunction(receiver, i, scope2, params)).catch((error2) => handleError(error2, el, value));\n    } else {\n      receiver(result);\n    }\n  } else if (typeof value === \"object\" && value instanceof Promise) {\n    value.then((i) => receiver(i));\n  } else {\n    receiver(value);\n  }\n}\n\n// packages/alpinejs/src/directives.js\nvar prefixAsString = \"x-\";\nfunction prefix(subject = \"\") {\n  return prefixAsString + subject;\n}\nfunction setPrefix(newPrefix) {\n  prefixAsString = newPrefix;\n}\nvar directiveHandlers = {};\nfunction directive(name, callback) {\n  directiveHandlers[name] = callback;\n  return {\n    before(directive2) {\n      if (!directiveHandlers[directive2]) {\n        console.warn(String.raw`Cannot find directive \\`${directive2}\\`. \\`${name}\\` will use the default order of execution`);\n        return;\n      }\n      const pos = directiveOrder.indexOf(directive2);\n      directiveOrder.splice(pos >= 0 ? pos : directiveOrder.indexOf(\"DEFAULT\"), 0, name);\n    }\n  };\n}\nfunction directiveExists(name) {\n  return Object.keys(directiveHandlers).includes(name);\n}\nfunction directives(el, attributes, originalAttributeOverride) {\n  attributes = Array.from(attributes);\n  if (el._x_virtualDirectives) {\n    let vAttributes = Object.entries(el._x_virtualDirectives).map(([name, value]) => ({ name, value }));\n    let staticAttributes = attributesOnly(vAttributes);\n    vAttributes = vAttributes.map((attribute) => {\n      if (staticAttributes.find((attr) => attr.name === attribute.name)) {\n        return {\n          name: `x-bind:${attribute.name}`,\n          value: `\"${attribute.value}\"`\n        };\n      }\n      return attribute;\n    });\n    attributes = attributes.concat(vAttributes);\n  }\n  let transformedAttributeMap = {};\n  let directives2 = attributes.map(toTransformedAttributes((newName, oldName) => transformedAttributeMap[newName] = oldName)).filter(outNonAlpineAttributes).map(toParsedDirectives(transformedAttributeMap, originalAttributeOverride)).sort(byPriority);\n  return directives2.map((directive2) => {\n    return getDirectiveHandler(el, directive2);\n  });\n}\nfunction attributesOnly(attributes) {\n  return Array.from(attributes).map(toTransformedAttributes()).filter((attr) => !outNonAlpineAttributes(attr));\n}\nvar isDeferringHandlers = false;\nvar directiveHandlerStacks = /* @__PURE__ */ new Map();\nvar currentHandlerStackKey = Symbol();\nfunction deferHandlingDirectives(callback) {\n  isDeferringHandlers = true;\n  let key = Symbol();\n  currentHandlerStackKey = key;\n  directiveHandlerStacks.set(key, []);\n  let flushHandlers = () => {\n    while (directiveHandlerStacks.get(key).length)\n      directiveHandlerStacks.get(key).shift()();\n    directiveHandlerStacks.delete(key);\n  };\n  let stopDeferring = () => {\n    isDeferringHandlers = false;\n    flushHandlers();\n  };\n  callback(flushHandlers);\n  stopDeferring();\n}\nfunction getElementBoundUtilities(el) {\n  let cleanups = [];\n  let cleanup2 = (callback) => cleanups.push(callback);\n  let [effect3, cleanupEffect] = elementBoundEffect(el);\n  cleanups.push(cleanupEffect);\n  let utilities = {\n    Alpine: alpine_default,\n    effect: effect3,\n    cleanup: cleanup2,\n    evaluateLater: evaluateLater.bind(evaluateLater, el),\n    evaluate: evaluate.bind(evaluate, el)\n  };\n  let doCleanup = () => cleanups.forEach((i) => i());\n  return [utilities, doCleanup];\n}\nfunction getDirectiveHandler(el, directive2) {\n  let noop = () => {\n  };\n  let handler4 = directiveHandlers[directive2.type] || noop;\n  let [utilities, cleanup2] = getElementBoundUtilities(el);\n  onAttributeRemoved(el, directive2.original, cleanup2);\n  let fullHandler = () => {\n    if (el._x_ignore || el._x_ignoreSelf)\n      return;\n    handler4.inline && handler4.inline(el, directive2, utilities);\n    handler4 = handler4.bind(handler4, el, directive2, utilities);\n    isDeferringHandlers ? directiveHandlerStacks.get(currentHandlerStackKey).push(handler4) : handler4();\n  };\n  fullHandler.runCleanups = cleanup2;\n  return fullHandler;\n}\nvar startingWith = (subject, replacement) => ({ name, value }) => {\n  if (name.startsWith(subject))\n    name = name.replace(subject, replacement);\n  return { name, value };\n};\nvar into = (i) => i;\nfunction toTransformedAttributes(callback = () => {\n}) {\n  return ({ name, value }) => {\n    let { name: newName, value: newValue } = attributeTransformers.reduce((carry, transform) => {\n      return transform(carry);\n    }, { name, value });\n    if (newName !== name)\n      callback(newName, name);\n    return { name: newName, value: newValue };\n  };\n}\nvar attributeTransformers = [];\nfunction mapAttributes(callback) {\n  attributeTransformers.push(callback);\n}\nfunction outNonAlpineAttributes({ name }) {\n  return alpineAttributeRegex().test(name);\n}\nvar alpineAttributeRegex = () => new RegExp(`^${prefixAsString}([^:^.]+)\\\\b`);\nfunction toParsedDirectives(transformedAttributeMap, originalAttributeOverride) {\n  return ({ name, value }) => {\n    let typeMatch = name.match(alpineAttributeRegex());\n    let valueMatch = name.match(/:([a-zA-Z0-9\\-_:]+)/);\n    let modifiers = name.match(/\\.[^.\\]]+(?=[^\\]]*$)/g) || [];\n    let original = originalAttributeOverride || transformedAttributeMap[name] || name;\n    return {\n      type: typeMatch ? typeMatch[1] : null,\n      value: valueMatch ? valueMatch[1] : null,\n      modifiers: modifiers.map((i) => i.replace(\".\", \"\")),\n      expression: value,\n      original\n    };\n  };\n}\nvar DEFAULT = \"DEFAULT\";\nvar directiveOrder = [\n  \"ignore\",\n  \"ref\",\n  \"data\",\n  \"id\",\n  \"anchor\",\n  \"bind\",\n  \"init\",\n  \"for\",\n  \"model\",\n  \"modelable\",\n  \"transition\",\n  \"show\",\n  \"if\",\n  DEFAULT,\n  \"teleport\"\n];\nfunction byPriority(a, b) {\n  let typeA = directiveOrder.indexOf(a.type) === -1 ? DEFAULT : a.type;\n  let typeB = directiveOrder.indexOf(b.type) === -1 ? DEFAULT : b.type;\n  return directiveOrder.indexOf(typeA) - directiveOrder.indexOf(typeB);\n}\n\n// packages/alpinejs/src/utils/dispatch.js\nfunction dispatch(el, name, detail = {}) {\n  el.dispatchEvent(\n    new CustomEvent(name, {\n      detail,\n      bubbles: true,\n      // Allows events to pass the shadow DOM barrier.\n      composed: true,\n      cancelable: true\n    })\n  );\n}\n\n// packages/alpinejs/src/utils/walk.js\nfunction walk(el, callback) {\n  if (typeof ShadowRoot === \"function\" && el instanceof ShadowRoot) {\n    Array.from(el.children).forEach((el2) => walk(el2, callback));\n    return;\n  }\n  let skip = false;\n  callback(el, () => skip = true);\n  if (skip)\n    return;\n  let node = el.firstElementChild;\n  while (node) {\n    walk(node, callback, false);\n    node = node.nextElementSibling;\n  }\n}\n\n// packages/alpinejs/src/utils/warn.js\nfunction warn(message, ...args) {\n  console.warn(`Alpine Warning: ${message}`, ...args);\n}\n\n// packages/alpinejs/src/lifecycle.js\nvar started = false;\nfunction start() {\n  if (started)\n    warn(\"Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems.\");\n  started = true;\n  if (!document.body)\n    warn(\"Unable to initialize. Trying to load Alpine before `<body>` is available. Did you forget to add `defer` in Alpine's `<script>` tag?\");\n  dispatch(document, \"alpine:init\");\n  dispatch(document, \"alpine:initializing\");\n  startObservingMutations();\n  onElAdded((el) => initTree(el, walk));\n  onElRemoved((el) => destroyTree(el));\n  onAttributesAdded((el, attrs) => {\n    directives(el, attrs).forEach((handle) => handle());\n  });\n  let outNestedComponents = (el) => !closestRoot(el.parentElement, true);\n  Array.from(document.querySelectorAll(allSelectors().join(\",\"))).filter(outNestedComponents).forEach((el) => {\n    initTree(el);\n  });\n  dispatch(document, \"alpine:initialized\");\n  setTimeout(() => {\n    warnAboutMissingPlugins();\n  });\n}\nvar rootSelectorCallbacks = [];\nvar initSelectorCallbacks = [];\nfunction rootSelectors() {\n  return rootSelectorCallbacks.map((fn) => fn());\n}\nfunction allSelectors() {\n  return rootSelectorCallbacks.concat(initSelectorCallbacks).map((fn) => fn());\n}\nfunction addRootSelector(selectorCallback) {\n  rootSelectorCallbacks.push(selectorCallback);\n}\nfunction addInitSelector(selectorCallback) {\n  initSelectorCallbacks.push(selectorCallback);\n}\nfunction closestRoot(el, includeInitSelectors = false) {\n  return findClosest(el, (element) => {\n    const selectors = includeInitSelectors ? allSelectors() : rootSelectors();\n    if (selectors.some((selector) => element.matches(selector)))\n      return true;\n  });\n}\nfunction findClosest(el, callback) {\n  if (!el)\n    return;\n  if (callback(el))\n    return el;\n  if (el._x_teleportBack)\n    el = el._x_teleportBack;\n  if (!el.parentElement)\n    return;\n  return findClosest(el.parentElement, callback);\n}\nfunction isRoot(el) {\n  return rootSelectors().some((selector) => el.matches(selector));\n}\nvar initInterceptors2 = [];\nfunction interceptInit(callback) {\n  initInterceptors2.push(callback);\n}\nvar markerDispenser = 1;\nfunction initTree(el, walker = walk, intercept = () => {\n}) {\n  if (findClosest(el, (i) => i._x_ignore))\n    return;\n  deferHandlingDirectives(() => {\n    walker(el, (el2, skip) => {\n      if (el2._x_marker)\n        return;\n      intercept(el2, skip);\n      initInterceptors2.forEach((i) => i(el2, skip));\n      directives(el2, el2.attributes).forEach((handle) => handle());\n      if (!el2._x_ignore)\n        el2._x_marker = markerDispenser++;\n      el2._x_ignore && skip();\n    });\n  });\n}\nfunction destroyTree(root, walker = walk) {\n  walker(root, (el) => {\n    cleanupElement(el);\n    cleanupAttributes(el);\n    delete el._x_marker;\n  });\n}\nfunction warnAboutMissingPlugins() {\n  let pluginDirectives = [\n    [\"ui\", \"dialog\", [\"[x-dialog], [x-popover]\"]],\n    [\"anchor\", \"anchor\", [\"[x-anchor]\"]],\n    [\"sort\", \"sort\", [\"[x-sort]\"]]\n  ];\n  pluginDirectives.forEach(([plugin2, directive2, selectors]) => {\n    if (directiveExists(directive2))\n      return;\n    selectors.some((selector) => {\n      if (document.querySelector(selector)) {\n        warn(`found \"${selector}\", but missing ${plugin2} plugin`);\n        return true;\n      }\n    });\n  });\n}\n\n// packages/alpinejs/src/nextTick.js\nvar tickStack = [];\nvar isHolding = false;\nfunction nextTick(callback = () => {\n}) {\n  queueMicrotask(() => {\n    isHolding || setTimeout(() => {\n      releaseNextTicks();\n    });\n  });\n  return new Promise((res) => {\n    tickStack.push(() => {\n      callback();\n      res();\n    });\n  });\n}\nfunction releaseNextTicks() {\n  isHolding = false;\n  while (tickStack.length)\n    tickStack.shift()();\n}\nfunction holdNextTicks() {\n  isHolding = true;\n}\n\n// packages/alpinejs/src/utils/classes.js\nfunction setClasses(el, value) {\n  if (Array.isArray(value)) {\n    return setClassesFromString(el, value.join(\" \"));\n  } else if (typeof value === \"object\" && value !== null) {\n    return setClassesFromObject(el, value);\n  } else if (typeof value === \"function\") {\n    return setClasses(el, value());\n  }\n  return setClassesFromString(el, value);\n}\nfunction setClassesFromString(el, classString) {\n  let split = (classString2) => classString2.split(\" \").filter(Boolean);\n  let missingClasses = (classString2) => classString2.split(\" \").filter((i) => !el.classList.contains(i)).filter(Boolean);\n  let addClassesAndReturnUndo = (classes) => {\n    el.classList.add(...classes);\n    return () => {\n      el.classList.remove(...classes);\n    };\n  };\n  classString = classString === true ? classString = \"\" : classString || \"\";\n  return addClassesAndReturnUndo(missingClasses(classString));\n}\nfunction setClassesFromObject(el, classObject) {\n  let split = (classString) => classString.split(\" \").filter(Boolean);\n  let forAdd = Object.entries(classObject).flatMap(([classString, bool]) => bool ? split(classString) : false).filter(Boolean);\n  let forRemove = Object.entries(classObject).flatMap(([classString, bool]) => !bool ? split(classString) : false).filter(Boolean);\n  let added = [];\n  let removed = [];\n  forRemove.forEach((i) => {\n    if (el.classList.contains(i)) {\n      el.classList.remove(i);\n      removed.push(i);\n    }\n  });\n  forAdd.forEach((i) => {\n    if (!el.classList.contains(i)) {\n      el.classList.add(i);\n      added.push(i);\n    }\n  });\n  return () => {\n    removed.forEach((i) => el.classList.add(i));\n    added.forEach((i) => el.classList.remove(i));\n  };\n}\n\n// packages/alpinejs/src/utils/styles.js\nfunction setStyles(el, value) {\n  if (typeof value === \"object\" && value !== null) {\n    return setStylesFromObject(el, value);\n  }\n  return setStylesFromString(el, value);\n}\nfunction setStylesFromObject(el, value) {\n  let previousStyles = {};\n  Object.entries(value).forEach(([key, value2]) => {\n    previousStyles[key] = el.style[key];\n    if (!key.startsWith(\"--\")) {\n      key = kebabCase(key);\n    }\n    el.style.setProperty(key, value2);\n  });\n  setTimeout(() => {\n    if (el.style.length === 0) {\n      el.removeAttribute(\"style\");\n    }\n  });\n  return () => {\n    setStyles(el, previousStyles);\n  };\n}\nfunction setStylesFromString(el, value) {\n  let cache = el.getAttribute(\"style\", value);\n  el.setAttribute(\"style\", value);\n  return () => {\n    el.setAttribute(\"style\", cache || \"\");\n  };\n}\nfunction kebabCase(subject) {\n  return subject.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n}\n\n// packages/alpinejs/src/utils/once.js\nfunction once(callback, fallback = () => {\n}) {\n  let called = false;\n  return function() {\n    if (!called) {\n      called = true;\n      callback.apply(this, arguments);\n    } else {\n      fallback.apply(this, arguments);\n    }\n  };\n}\n\n// packages/alpinejs/src/directives/x-transition.js\ndirective(\"transition\", (el, { value, modifiers, expression }, { evaluate: evaluate2 }) => {\n  if (typeof expression === \"function\")\n    expression = evaluate2(expression);\n  if (expression === false)\n    return;\n  if (!expression || typeof expression === \"boolean\") {\n    registerTransitionsFromHelper(el, modifiers, value);\n  } else {\n    registerTransitionsFromClassString(el, expression, value);\n  }\n});\nfunction registerTransitionsFromClassString(el, classString, stage) {\n  registerTransitionObject(el, setClasses, \"\");\n  let directiveStorageMap = {\n    \"enter\": (classes) => {\n      el._x_transition.enter.during = classes;\n    },\n    \"enter-start\": (classes) => {\n      el._x_transition.enter.start = classes;\n    },\n    \"enter-end\": (classes) => {\n      el._x_transition.enter.end = classes;\n    },\n    \"leave\": (classes) => {\n      el._x_transition.leave.during = classes;\n    },\n    \"leave-start\": (classes) => {\n      el._x_transition.leave.start = classes;\n    },\n    \"leave-end\": (classes) => {\n      el._x_transition.leave.end = classes;\n    }\n  };\n  directiveStorageMap[stage](classString);\n}\nfunction registerTransitionsFromHelper(el, modifiers, stage) {\n  registerTransitionObject(el, setStyles);\n  let doesntSpecify = !modifiers.includes(\"in\") && !modifiers.includes(\"out\") && !stage;\n  let transitioningIn = doesntSpecify || modifiers.includes(\"in\") || [\"enter\"].includes(stage);\n  let transitioningOut = doesntSpecify || modifiers.includes(\"out\") || [\"leave\"].includes(stage);\n  if (modifiers.includes(\"in\") && !doesntSpecify) {\n    modifiers = modifiers.filter((i, index) => index < modifiers.indexOf(\"out\"));\n  }\n  if (modifiers.includes(\"out\") && !doesntSpecify) {\n    modifiers = modifiers.filter((i, index) => index > modifiers.indexOf(\"out\"));\n  }\n  let wantsAll = !modifiers.includes(\"opacity\") && !modifiers.includes(\"scale\");\n  let wantsOpacity = wantsAll || modifiers.includes(\"opacity\");\n  let wantsScale = wantsAll || modifiers.includes(\"scale\");\n  let opacityValue = wantsOpacity ? 0 : 1;\n  let scaleValue = wantsScale ? modifierValue(modifiers, \"scale\", 95) / 100 : 1;\n  let delay = modifierValue(modifiers, \"delay\", 0) / 1e3;\n  let origin = modifierValue(modifiers, \"origin\", \"center\");\n  let property = \"opacity, transform\";\n  let durationIn = modifierValue(modifiers, \"duration\", 150) / 1e3;\n  let durationOut = modifierValue(modifiers, \"duration\", 75) / 1e3;\n  let easing = `cubic-bezier(0.4, 0.0, 0.2, 1)`;\n  if (transitioningIn) {\n    el._x_transition.enter.during = {\n      transformOrigin: origin,\n      transitionDelay: `${delay}s`,\n      transitionProperty: property,\n      transitionDuration: `${durationIn}s`,\n      transitionTimingFunction: easing\n    };\n    el._x_transition.enter.start = {\n      opacity: opacityValue,\n      transform: `scale(${scaleValue})`\n    };\n    el._x_transition.enter.end = {\n      opacity: 1,\n      transform: `scale(1)`\n    };\n  }\n  if (transitioningOut) {\n    el._x_transition.leave.during = {\n      transformOrigin: origin,\n      transitionDelay: `${delay}s`,\n      transitionProperty: property,\n      transitionDuration: `${durationOut}s`,\n      transitionTimingFunction: easing\n    };\n    el._x_transition.leave.start = {\n      opacity: 1,\n      transform: `scale(1)`\n    };\n    el._x_transition.leave.end = {\n      opacity: opacityValue,\n      transform: `scale(${scaleValue})`\n    };\n  }\n}\nfunction registerTransitionObject(el, setFunction, defaultValue = {}) {\n  if (!el._x_transition)\n    el._x_transition = {\n      enter: { during: defaultValue, start: defaultValue, end: defaultValue },\n      leave: { during: defaultValue, start: defaultValue, end: defaultValue },\n      in(before = () => {\n      }, after = () => {\n      }) {\n        transition(el, setFunction, {\n          during: this.enter.during,\n          start: this.enter.start,\n          end: this.enter.end\n        }, before, after);\n      },\n      out(before = () => {\n      }, after = () => {\n      }) {\n        transition(el, setFunction, {\n          during: this.leave.during,\n          start: this.leave.start,\n          end: this.leave.end\n        }, before, after);\n      }\n    };\n}\nwindow.Element.prototype._x_toggleAndCascadeWithTransitions = function(el, value, show, hide) {\n  const nextTick2 = document.visibilityState === \"visible\" ? requestAnimationFrame : setTimeout;\n  let clickAwayCompatibleShow = () => nextTick2(show);\n  if (value) {\n    if (el._x_transition && (el._x_transition.enter || el._x_transition.leave)) {\n      el._x_transition.enter && (Object.entries(el._x_transition.enter.during).length || Object.entries(el._x_transition.enter.start).length || Object.entries(el._x_transition.enter.end).length) ? el._x_transition.in(show) : clickAwayCompatibleShow();\n    } else {\n      el._x_transition ? el._x_transition.in(show) : clickAwayCompatibleShow();\n    }\n    return;\n  }\n  el._x_hidePromise = el._x_transition ? new Promise((resolve, reject) => {\n    el._x_transition.out(() => {\n    }, () => resolve(hide));\n    el._x_transitioning && el._x_transitioning.beforeCancel(() => reject({ isFromCancelledTransition: true }));\n  }) : Promise.resolve(hide);\n  queueMicrotask(() => {\n    let closest = closestHide(el);\n    if (closest) {\n      if (!closest._x_hideChildren)\n        closest._x_hideChildren = [];\n      closest._x_hideChildren.push(el);\n    } else {\n      nextTick2(() => {\n        let hideAfterChildren = (el2) => {\n          let carry = Promise.all([\n            el2._x_hidePromise,\n            ...(el2._x_hideChildren || []).map(hideAfterChildren)\n          ]).then(([i]) => i?.());\n          delete el2._x_hidePromise;\n          delete el2._x_hideChildren;\n          return carry;\n        };\n        hideAfterChildren(el).catch((e) => {\n          if (!e.isFromCancelledTransition)\n            throw e;\n        });\n      });\n    }\n  });\n};\nfunction closestHide(el) {\n  let parent = el.parentNode;\n  if (!parent)\n    return;\n  return parent._x_hidePromise ? parent : closestHide(parent);\n}\nfunction transition(el, setFunction, { during, start: start2, end } = {}, before = () => {\n}, after = () => {\n}) {\n  if (el._x_transitioning)\n    el._x_transitioning.cancel();\n  if (Object.keys(during).length === 0 && Object.keys(start2).length === 0 && Object.keys(end).length === 0) {\n    before();\n    after();\n    return;\n  }\n  let undoStart, undoDuring, undoEnd;\n  performTransition(el, {\n    start() {\n      undoStart = setFunction(el, start2);\n    },\n    during() {\n      undoDuring = setFunction(el, during);\n    },\n    before,\n    end() {\n      undoStart();\n      undoEnd = setFunction(el, end);\n    },\n    after,\n    cleanup() {\n      undoDuring();\n      undoEnd();\n    }\n  });\n}\nfunction performTransition(el, stages) {\n  let interrupted, reachedBefore, reachedEnd;\n  let finish = once(() => {\n    mutateDom(() => {\n      interrupted = true;\n      if (!reachedBefore)\n        stages.before();\n      if (!reachedEnd) {\n        stages.end();\n        releaseNextTicks();\n      }\n      stages.after();\n      if (el.isConnected)\n        stages.cleanup();\n      delete el._x_transitioning;\n    });\n  });\n  el._x_transitioning = {\n    beforeCancels: [],\n    beforeCancel(callback) {\n      this.beforeCancels.push(callback);\n    },\n    cancel: once(function() {\n      while (this.beforeCancels.length) {\n        this.beforeCancels.shift()();\n      }\n      ;\n      finish();\n    }),\n    finish\n  };\n  mutateDom(() => {\n    stages.start();\n    stages.during();\n  });\n  holdNextTicks();\n  requestAnimationFrame(() => {\n    if (interrupted)\n      return;\n    let duration = Number(getComputedStyle(el).transitionDuration.replace(/,.*/, \"\").replace(\"s\", \"\")) * 1e3;\n    let delay = Number(getComputedStyle(el).transitionDelay.replace(/,.*/, \"\").replace(\"s\", \"\")) * 1e3;\n    if (duration === 0)\n      duration = Number(getComputedStyle(el).animationDuration.replace(\"s\", \"\")) * 1e3;\n    mutateDom(() => {\n      stages.before();\n    });\n    reachedBefore = true;\n    requestAnimationFrame(() => {\n      if (interrupted)\n        return;\n      mutateDom(() => {\n        stages.end();\n      });\n      releaseNextTicks();\n      setTimeout(el._x_transitioning.finish, duration + delay);\n      reachedEnd = true;\n    });\n  });\n}\nfunction modifierValue(modifiers, key, fallback) {\n  if (modifiers.indexOf(key) === -1)\n    return fallback;\n  const rawValue = modifiers[modifiers.indexOf(key) + 1];\n  if (!rawValue)\n    return fallback;\n  if (key === \"scale\") {\n    if (isNaN(rawValue))\n      return fallback;\n  }\n  if (key === \"duration\" || key === \"delay\") {\n    let match = rawValue.match(/([0-9]+)ms/);\n    if (match)\n      return match[1];\n  }\n  if (key === \"origin\") {\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  return rawValue;\n}\n\n// packages/alpinejs/src/clone.js\nvar isCloning = false;\nfunction skipDuringClone(callback, fallback = () => {\n}) {\n  return (...args) => isCloning ? fallback(...args) : callback(...args);\n}\nfunction onlyDuringClone(callback) {\n  return (...args) => isCloning && callback(...args);\n}\nvar interceptors = [];\nfunction interceptClone(callback) {\n  interceptors.push(callback);\n}\nfunction cloneNode(from, to) {\n  interceptors.forEach((i) => i(from, to));\n  isCloning = true;\n  dontRegisterReactiveSideEffects(() => {\n    initTree(to, (el, callback) => {\n      callback(el, () => {\n      });\n    });\n  });\n  isCloning = false;\n}\nvar isCloningLegacy = false;\nfunction clone(oldEl, newEl) {\n  if (!newEl._x_dataStack)\n    newEl._x_dataStack = oldEl._x_dataStack;\n  isCloning = true;\n  isCloningLegacy = true;\n  dontRegisterReactiveSideEffects(() => {\n    cloneTree(newEl);\n  });\n  isCloning = false;\n  isCloningLegacy = false;\n}\nfunction cloneTree(el) {\n  let hasRunThroughFirstEl = false;\n  let shallowWalker = (el2, callback) => {\n    walk(el2, (el3, skip) => {\n      if (hasRunThroughFirstEl && isRoot(el3))\n        return skip();\n      hasRunThroughFirstEl = true;\n      callback(el3, skip);\n    });\n  };\n  initTree(el, shallowWalker);\n}\nfunction dontRegisterReactiveSideEffects(callback) {\n  let cache = effect;\n  overrideEffect((callback2, el) => {\n    let storedEffect = cache(callback2);\n    release(storedEffect);\n    return () => {\n    };\n  });\n  callback();\n  overrideEffect(cache);\n}\n\n// packages/alpinejs/src/utils/bind.js\nfunction bind(el, name, value, modifiers = []) {\n  if (!el._x_bindings)\n    el._x_bindings = reactive({});\n  el._x_bindings[name] = value;\n  name = modifiers.includes(\"camel\") ? camelCase(name) : name;\n  switch (name) {\n    case \"value\":\n      bindInputValue(el, value);\n      break;\n    case \"style\":\n      bindStyles(el, value);\n      break;\n    case \"class\":\n      bindClasses(el, value);\n      break;\n    case \"selected\":\n    case \"checked\":\n      bindAttributeAndProperty(el, name, value);\n      break;\n    default:\n      bindAttribute(el, name, value);\n      break;\n  }\n}\nfunction bindInputValue(el, value) {\n  if (isRadio(el)) {\n    if (el.attributes.value === void 0) {\n      el.value = value;\n    }\n    if (window.fromModel) {\n      if (typeof value === \"boolean\") {\n        el.checked = safeParseBoolean(el.value) === value;\n      } else {\n        el.checked = checkedAttrLooseCompare(el.value, value);\n      }\n    }\n  } else if (isCheckbox(el)) {\n    if (Number.isInteger(value)) {\n      el.value = value;\n    } else if (!Array.isArray(value) && typeof value !== \"boolean\" && ![null, void 0].includes(value)) {\n      el.value = String(value);\n    } else {\n      if (Array.isArray(value)) {\n        el.checked = value.some((val) => checkedAttrLooseCompare(val, el.value));\n      } else {\n        el.checked = !!value;\n      }\n    }\n  } else if (el.tagName === \"SELECT\") {\n    updateSelect(el, value);\n  } else {\n    if (el.value === value)\n      return;\n    el.value = value === void 0 ? \"\" : value;\n  }\n}\nfunction bindClasses(el, value) {\n  if (el._x_undoAddedClasses)\n    el._x_undoAddedClasses();\n  el._x_undoAddedClasses = setClasses(el, value);\n}\nfunction bindStyles(el, value) {\n  if (el._x_undoAddedStyles)\n    el._x_undoAddedStyles();\n  el._x_undoAddedStyles = setStyles(el, value);\n}\nfunction bindAttributeAndProperty(el, name, value) {\n  bindAttribute(el, name, value);\n  setPropertyIfChanged(el, name, value);\n}\nfunction bindAttribute(el, name, value) {\n  if ([null, void 0, false].includes(value) && attributeShouldntBePreservedIfFalsy(name)) {\n    el.removeAttribute(name);\n  } else {\n    if (isBooleanAttr(name))\n      value = name;\n    setIfChanged(el, name, value);\n  }\n}\nfunction setIfChanged(el, attrName, value) {\n  if (el.getAttribute(attrName) != value) {\n    el.setAttribute(attrName, value);\n  }\n}\nfunction setPropertyIfChanged(el, propName, value) {\n  if (el[propName] !== value) {\n    el[propName] = value;\n  }\n}\nfunction updateSelect(el, value) {\n  const arrayWrappedValue = [].concat(value).map((value2) => {\n    return value2 + \"\";\n  });\n  Array.from(el.options).forEach((option) => {\n    option.selected = arrayWrappedValue.includes(option.value);\n  });\n}\nfunction camelCase(subject) {\n  return subject.toLowerCase().replace(/-(\\w)/g, (match, char) => char.toUpperCase());\n}\nfunction checkedAttrLooseCompare(valueA, valueB) {\n  return valueA == valueB;\n}\nfunction safeParseBoolean(rawValue) {\n  if ([1, \"1\", \"true\", \"on\", \"yes\", true].includes(rawValue)) {\n    return true;\n  }\n  if ([0, \"0\", \"false\", \"off\", \"no\", false].includes(rawValue)) {\n    return false;\n  }\n  return rawValue ? Boolean(rawValue) : null;\n}\nvar booleanAttributes = /* @__PURE__ */ new Set([\n  \"allowfullscreen\",\n  \"async\",\n  \"autofocus\",\n  \"autoplay\",\n  \"checked\",\n  \"controls\",\n  \"default\",\n  \"defer\",\n  \"disabled\",\n  \"formnovalidate\",\n  \"inert\",\n  \"ismap\",\n  \"itemscope\",\n  \"loop\",\n  \"multiple\",\n  \"muted\",\n  \"nomodule\",\n  \"novalidate\",\n  \"open\",\n  \"playsinline\",\n  \"readonly\",\n  \"required\",\n  \"reversed\",\n  \"selected\",\n  \"shadowrootclonable\",\n  \"shadowrootdelegatesfocus\",\n  \"shadowrootserializable\"\n]);\nfunction isBooleanAttr(attrName) {\n  return booleanAttributes.has(attrName);\n}\nfunction attributeShouldntBePreservedIfFalsy(name) {\n  return ![\"aria-pressed\", \"aria-checked\", \"aria-expanded\", \"aria-selected\"].includes(name);\n}\nfunction getBinding(el, name, fallback) {\n  if (el._x_bindings && el._x_bindings[name] !== void 0)\n    return el._x_bindings[name];\n  return getAttributeBinding(el, name, fallback);\n}\nfunction extractProp(el, name, fallback, extract = true) {\n  if (el._x_bindings && el._x_bindings[name] !== void 0)\n    return el._x_bindings[name];\n  if (el._x_inlineBindings && el._x_inlineBindings[name] !== void 0) {\n    let binding = el._x_inlineBindings[name];\n    binding.extract = extract;\n    return dontAutoEvaluateFunctions(() => {\n      return evaluate(el, binding.expression);\n    });\n  }\n  return getAttributeBinding(el, name, fallback);\n}\nfunction getAttributeBinding(el, name, fallback) {\n  let attr = el.getAttribute(name);\n  if (attr === null)\n    return typeof fallback === \"function\" ? fallback() : fallback;\n  if (attr === \"\")\n    return true;\n  if (isBooleanAttr(name)) {\n    return !![name, \"true\"].includes(attr);\n  }\n  return attr;\n}\nfunction isCheckbox(el) {\n  return el.type === \"checkbox\" || el.localName === \"ui-checkbox\" || el.localName === \"ui-switch\";\n}\nfunction isRadio(el) {\n  return el.type === \"radio\" || el.localName === \"ui-radio\";\n}\n\n// packages/alpinejs/src/utils/debounce.js\nfunction debounce(func, wait) {\n  var timeout;\n  return function() {\n    var context = this, args = arguments;\n    var later = function() {\n      timeout = null;\n      func.apply(context, args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n}\n\n// packages/alpinejs/src/utils/throttle.js\nfunction throttle(func, limit) {\n  let inThrottle;\n  return function() {\n    let context = this, args = arguments;\n    if (!inThrottle) {\n      func.apply(context, args);\n      inThrottle = true;\n      setTimeout(() => inThrottle = false, limit);\n    }\n  };\n}\n\n// packages/alpinejs/src/entangle.js\nfunction entangle({ get: outerGet, set: outerSet }, { get: innerGet, set: innerSet }) {\n  let firstRun = true;\n  let outerHash;\n  let innerHash;\n  let reference = effect(() => {\n    let outer = outerGet();\n    let inner = innerGet();\n    if (firstRun) {\n      innerSet(cloneIfObject(outer));\n      firstRun = false;\n    } else {\n      let outerHashLatest = JSON.stringify(outer);\n      let innerHashLatest = JSON.stringify(inner);\n      if (outerHashLatest !== outerHash) {\n        innerSet(cloneIfObject(outer));\n      } else if (outerHashLatest !== innerHashLatest) {\n        outerSet(cloneIfObject(inner));\n      } else {\n      }\n    }\n    outerHash = JSON.stringify(outerGet());\n    innerHash = JSON.stringify(innerGet());\n  });\n  return () => {\n    release(reference);\n  };\n}\nfunction cloneIfObject(value) {\n  return typeof value === \"object\" ? JSON.parse(JSON.stringify(value)) : value;\n}\n\n// packages/alpinejs/src/plugin.js\nfunction plugin(callback) {\n  let callbacks = Array.isArray(callback) ? callback : [callback];\n  callbacks.forEach((i) => i(alpine_default));\n}\n\n// packages/alpinejs/src/store.js\nvar stores = {};\nvar isReactive = false;\nfunction store(name, value) {\n  if (!isReactive) {\n    stores = reactive(stores);\n    isReactive = true;\n  }\n  if (value === void 0) {\n    return stores[name];\n  }\n  stores[name] = value;\n  initInterceptors(stores[name]);\n  if (typeof value === \"object\" && value !== null && value.hasOwnProperty(\"init\") && typeof value.init === \"function\") {\n    stores[name].init();\n  }\n}\nfunction getStores() {\n  return stores;\n}\n\n// packages/alpinejs/src/binds.js\nvar binds = {};\nfunction bind2(name, bindings) {\n  let getBindings = typeof bindings !== \"function\" ? () => bindings : bindings;\n  if (name instanceof Element) {\n    return applyBindingsObject(name, getBindings());\n  } else {\n    binds[name] = getBindings;\n  }\n  return () => {\n  };\n}\nfunction injectBindingProviders(obj) {\n  Object.entries(binds).forEach(([name, callback]) => {\n    Object.defineProperty(obj, name, {\n      get() {\n        return (...args) => {\n          return callback(...args);\n        };\n      }\n    });\n  });\n  return obj;\n}\nfunction applyBindingsObject(el, obj, original) {\n  let cleanupRunners = [];\n  while (cleanupRunners.length)\n    cleanupRunners.pop()();\n  let attributes = Object.entries(obj).map(([name, value]) => ({ name, value }));\n  let staticAttributes = attributesOnly(attributes);\n  attributes = attributes.map((attribute) => {\n    if (staticAttributes.find((attr) => attr.name === attribute.name)) {\n      return {\n        name: `x-bind:${attribute.name}`,\n        value: `\"${attribute.value}\"`\n      };\n    }\n    return attribute;\n  });\n  directives(el, attributes, original).map((handle) => {\n    cleanupRunners.push(handle.runCleanups);\n    handle();\n  });\n  return () => {\n    while (cleanupRunners.length)\n      cleanupRunners.pop()();\n  };\n}\n\n// packages/alpinejs/src/datas.js\nvar datas = {};\nfunction data(name, callback) {\n  datas[name] = callback;\n}\nfunction injectDataProviders(obj, context) {\n  Object.entries(datas).forEach(([name, callback]) => {\n    Object.defineProperty(obj, name, {\n      get() {\n        return (...args) => {\n          return callback.bind(context)(...args);\n        };\n      },\n      enumerable: false\n    });\n  });\n  return obj;\n}\n\n// packages/alpinejs/src/alpine.js\nvar Alpine = {\n  get reactive() {\n    return reactive;\n  },\n  get release() {\n    return release;\n  },\n  get effect() {\n    return effect;\n  },\n  get raw() {\n    return raw;\n  },\n  version: \"3.14.9\",\n  flushAndStopDeferringMutations,\n  dontAutoEvaluateFunctions,\n  disableEffectScheduling,\n  startObservingMutations,\n  stopObservingMutations,\n  setReactivityEngine,\n  onAttributeRemoved,\n  onAttributesAdded,\n  closestDataStack,\n  skipDuringClone,\n  onlyDuringClone,\n  addRootSelector,\n  addInitSelector,\n  interceptClone,\n  addScopeToNode,\n  deferMutations,\n  mapAttributes,\n  evaluateLater,\n  interceptInit,\n  setEvaluator,\n  mergeProxies,\n  extractProp,\n  findClosest,\n  onElRemoved,\n  closestRoot,\n  destroyTree,\n  interceptor,\n  // INTERNAL: not public API and is subject to change without major release.\n  transition,\n  // INTERNAL\n  setStyles,\n  // INTERNAL\n  mutateDom,\n  directive,\n  entangle,\n  throttle,\n  debounce,\n  evaluate,\n  initTree,\n  nextTick,\n  prefixed: prefix,\n  prefix: setPrefix,\n  plugin,\n  magic,\n  store,\n  start,\n  clone,\n  // INTERNAL\n  cloneNode,\n  // INTERNAL\n  bound: getBinding,\n  $data: scope,\n  watch,\n  walk,\n  data,\n  bind: bind2\n};\nvar alpine_default = Alpine;\n\n// node_modules/@vue/shared/dist/shared.esm-bundler.js\nfunction makeMap(str, expectsLowerCase) {\n  const map = /* @__PURE__ */ Object.create(null);\n  const list = str.split(\",\");\n  for (let i = 0; i < list.length; i++) {\n    map[list[i]] = true;\n  }\n  return expectsLowerCase ? (val) => !!map[val.toLowerCase()] : (val) => !!map[val];\n}\nvar specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;\nvar isBooleanAttr2 = /* @__PURE__ */ makeMap(specialBooleanAttrs + `,async,autofocus,autoplay,controls,default,defer,disabled,hidden,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`);\nvar EMPTY_OBJ =  true ? Object.freeze({}) : 0;\nvar EMPTY_ARR =  true ? Object.freeze([]) : 0;\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\nvar hasOwn = (val, key) => hasOwnProperty.call(val, key);\nvar isArray = Array.isArray;\nvar isMap = (val) => toTypeString(val) === \"[object Map]\";\nvar isString = (val) => typeof val === \"string\";\nvar isSymbol = (val) => typeof val === \"symbol\";\nvar isObject = (val) => val !== null && typeof val === \"object\";\nvar objectToString = Object.prototype.toString;\nvar toTypeString = (value) => objectToString.call(value);\nvar toRawType = (value) => {\n  return toTypeString(value).slice(8, -1);\n};\nvar isIntegerKey = (key) => isString(key) && key !== \"NaN\" && key[0] !== \"-\" && \"\" + parseInt(key, 10) === key;\nvar cacheStringFunction = (fn) => {\n  const cache = /* @__PURE__ */ Object.create(null);\n  return (str) => {\n    const hit = cache[str];\n    return hit || (cache[str] = fn(str));\n  };\n};\nvar camelizeRE = /-(\\w)/g;\nvar camelize = cacheStringFunction((str) => {\n  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : \"\");\n});\nvar hyphenateRE = /\\B([A-Z])/g;\nvar hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, \"-$1\").toLowerCase());\nvar capitalize = cacheStringFunction((str) => str.charAt(0).toUpperCase() + str.slice(1));\nvar toHandlerKey = cacheStringFunction((str) => str ? `on${capitalize(str)}` : ``);\nvar hasChanged = (value, oldValue) => value !== oldValue && (value === value || oldValue === oldValue);\n\n// node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js\nvar targetMap = /* @__PURE__ */ new WeakMap();\nvar effectStack = [];\nvar activeEffect;\nvar ITERATE_KEY = Symbol( true ? \"iterate\" : 0);\nvar MAP_KEY_ITERATE_KEY = Symbol( true ? \"Map key iterate\" : 0);\nfunction isEffect(fn) {\n  return fn && fn._isEffect === true;\n}\nfunction effect2(fn, options = EMPTY_OBJ) {\n  if (isEffect(fn)) {\n    fn = fn.raw;\n  }\n  const effect3 = createReactiveEffect(fn, options);\n  if (!options.lazy) {\n    effect3();\n  }\n  return effect3;\n}\nfunction stop(effect3) {\n  if (effect3.active) {\n    cleanup(effect3);\n    if (effect3.options.onStop) {\n      effect3.options.onStop();\n    }\n    effect3.active = false;\n  }\n}\nvar uid = 0;\nfunction createReactiveEffect(fn, options) {\n  const effect3 = function reactiveEffect() {\n    if (!effect3.active) {\n      return fn();\n    }\n    if (!effectStack.includes(effect3)) {\n      cleanup(effect3);\n      try {\n        enableTracking();\n        effectStack.push(effect3);\n        activeEffect = effect3;\n        return fn();\n      } finally {\n        effectStack.pop();\n        resetTracking();\n        activeEffect = effectStack[effectStack.length - 1];\n      }\n    }\n  };\n  effect3.id = uid++;\n  effect3.allowRecurse = !!options.allowRecurse;\n  effect3._isEffect = true;\n  effect3.active = true;\n  effect3.raw = fn;\n  effect3.deps = [];\n  effect3.options = options;\n  return effect3;\n}\nfunction cleanup(effect3) {\n  const { deps } = effect3;\n  if (deps.length) {\n    for (let i = 0; i < deps.length; i++) {\n      deps[i].delete(effect3);\n    }\n    deps.length = 0;\n  }\n}\nvar shouldTrack = true;\nvar trackStack = [];\nfunction pauseTracking() {\n  trackStack.push(shouldTrack);\n  shouldTrack = false;\n}\nfunction enableTracking() {\n  trackStack.push(shouldTrack);\n  shouldTrack = true;\n}\nfunction resetTracking() {\n  const last = trackStack.pop();\n  shouldTrack = last === void 0 ? true : last;\n}\nfunction track(target, type, key) {\n  if (!shouldTrack || activeEffect === void 0) {\n    return;\n  }\n  let depsMap = targetMap.get(target);\n  if (!depsMap) {\n    targetMap.set(target, depsMap = /* @__PURE__ */ new Map());\n  }\n  let dep = depsMap.get(key);\n  if (!dep) {\n    depsMap.set(key, dep = /* @__PURE__ */ new Set());\n  }\n  if (!dep.has(activeEffect)) {\n    dep.add(activeEffect);\n    activeEffect.deps.push(dep);\n    if (activeEffect.options.onTrack) {\n      activeEffect.options.onTrack({\n        effect: activeEffect,\n        target,\n        type,\n        key\n      });\n    }\n  }\n}\nfunction trigger(target, type, key, newValue, oldValue, oldTarget) {\n  const depsMap = targetMap.get(target);\n  if (!depsMap) {\n    return;\n  }\n  const effects = /* @__PURE__ */ new Set();\n  const add2 = (effectsToAdd) => {\n    if (effectsToAdd) {\n      effectsToAdd.forEach((effect3) => {\n        if (effect3 !== activeEffect || effect3.allowRecurse) {\n          effects.add(effect3);\n        }\n      });\n    }\n  };\n  if (type === \"clear\") {\n    depsMap.forEach(add2);\n  } else if (key === \"length\" && isArray(target)) {\n    depsMap.forEach((dep, key2) => {\n      if (key2 === \"length\" || key2 >= newValue) {\n        add2(dep);\n      }\n    });\n  } else {\n    if (key !== void 0) {\n      add2(depsMap.get(key));\n    }\n    switch (type) {\n      case \"add\":\n        if (!isArray(target)) {\n          add2(depsMap.get(ITERATE_KEY));\n          if (isMap(target)) {\n            add2(depsMap.get(MAP_KEY_ITERATE_KEY));\n          }\n        } else if (isIntegerKey(key)) {\n          add2(depsMap.get(\"length\"));\n        }\n        break;\n      case \"delete\":\n        if (!isArray(target)) {\n          add2(depsMap.get(ITERATE_KEY));\n          if (isMap(target)) {\n            add2(depsMap.get(MAP_KEY_ITERATE_KEY));\n          }\n        }\n        break;\n      case \"set\":\n        if (isMap(target)) {\n          add2(depsMap.get(ITERATE_KEY));\n        }\n        break;\n    }\n  }\n  const run = (effect3) => {\n    if (effect3.options.onTrigger) {\n      effect3.options.onTrigger({\n        effect: effect3,\n        target,\n        key,\n        type,\n        newValue,\n        oldValue,\n        oldTarget\n      });\n    }\n    if (effect3.options.scheduler) {\n      effect3.options.scheduler(effect3);\n    } else {\n      effect3();\n    }\n  };\n  effects.forEach(run);\n}\nvar isNonTrackableKeys = /* @__PURE__ */ makeMap(`__proto__,__v_isRef,__isVue`);\nvar builtInSymbols = new Set(Object.getOwnPropertyNames(Symbol).map((key) => Symbol[key]).filter(isSymbol));\nvar get2 = /* @__PURE__ */ createGetter();\nvar readonlyGet = /* @__PURE__ */ createGetter(true);\nvar arrayInstrumentations = /* @__PURE__ */ createArrayInstrumentations();\nfunction createArrayInstrumentations() {\n  const instrumentations = {};\n  [\"includes\", \"indexOf\", \"lastIndexOf\"].forEach((key) => {\n    instrumentations[key] = function(...args) {\n      const arr = toRaw(this);\n      for (let i = 0, l = this.length; i < l; i++) {\n        track(arr, \"get\", i + \"\");\n      }\n      const res = arr[key](...args);\n      if (res === -1 || res === false) {\n        return arr[key](...args.map(toRaw));\n      } else {\n        return res;\n      }\n    };\n  });\n  [\"push\", \"pop\", \"shift\", \"unshift\", \"splice\"].forEach((key) => {\n    instrumentations[key] = function(...args) {\n      pauseTracking();\n      const res = toRaw(this)[key].apply(this, args);\n      resetTracking();\n      return res;\n    };\n  });\n  return instrumentations;\n}\nfunction createGetter(isReadonly = false, shallow = false) {\n  return function get3(target, key, receiver) {\n    if (key === \"__v_isReactive\") {\n      return !isReadonly;\n    } else if (key === \"__v_isReadonly\") {\n      return isReadonly;\n    } else if (key === \"__v_raw\" && receiver === (isReadonly ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target)) {\n      return target;\n    }\n    const targetIsArray = isArray(target);\n    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {\n      return Reflect.get(arrayInstrumentations, key, receiver);\n    }\n    const res = Reflect.get(target, key, receiver);\n    if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {\n      return res;\n    }\n    if (!isReadonly) {\n      track(target, \"get\", key);\n    }\n    if (shallow) {\n      return res;\n    }\n    if (isRef(res)) {\n      const shouldUnwrap = !targetIsArray || !isIntegerKey(key);\n      return shouldUnwrap ? res.value : res;\n    }\n    if (isObject(res)) {\n      return isReadonly ? readonly(res) : reactive2(res);\n    }\n    return res;\n  };\n}\nvar set2 = /* @__PURE__ */ createSetter();\nfunction createSetter(shallow = false) {\n  return function set3(target, key, value, receiver) {\n    let oldValue = target[key];\n    if (!shallow) {\n      value = toRaw(value);\n      oldValue = toRaw(oldValue);\n      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {\n        oldValue.value = value;\n        return true;\n      }\n    }\n    const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key);\n    const result = Reflect.set(target, key, value, receiver);\n    if (target === toRaw(receiver)) {\n      if (!hadKey) {\n        trigger(target, \"add\", key, value);\n      } else if (hasChanged(value, oldValue)) {\n        trigger(target, \"set\", key, value, oldValue);\n      }\n    }\n    return result;\n  };\n}\nfunction deleteProperty(target, key) {\n  const hadKey = hasOwn(target, key);\n  const oldValue = target[key];\n  const result = Reflect.deleteProperty(target, key);\n  if (result && hadKey) {\n    trigger(target, \"delete\", key, void 0, oldValue);\n  }\n  return result;\n}\nfunction has(target, key) {\n  const result = Reflect.has(target, key);\n  if (!isSymbol(key) || !builtInSymbols.has(key)) {\n    track(target, \"has\", key);\n  }\n  return result;\n}\nfunction ownKeys(target) {\n  track(target, \"iterate\", isArray(target) ? \"length\" : ITERATE_KEY);\n  return Reflect.ownKeys(target);\n}\nvar mutableHandlers = {\n  get: get2,\n  set: set2,\n  deleteProperty,\n  has,\n  ownKeys\n};\nvar readonlyHandlers = {\n  get: readonlyGet,\n  set(target, key) {\n    if (true) {\n      console.warn(`Set operation on key \"${String(key)}\" failed: target is readonly.`, target);\n    }\n    return true;\n  },\n  deleteProperty(target, key) {\n    if (true) {\n      console.warn(`Delete operation on key \"${String(key)}\" failed: target is readonly.`, target);\n    }\n    return true;\n  }\n};\nvar toReactive = (value) => isObject(value) ? reactive2(value) : value;\nvar toReadonly = (value) => isObject(value) ? readonly(value) : value;\nvar toShallow = (value) => value;\nvar getProto = (v) => Reflect.getPrototypeOf(v);\nfunction get$1(target, key, isReadonly = false, isShallow = false) {\n  target = target[\n    \"__v_raw\"\n    /* RAW */\n  ];\n  const rawTarget = toRaw(target);\n  const rawKey = toRaw(key);\n  if (key !== rawKey) {\n    !isReadonly && track(rawTarget, \"get\", key);\n  }\n  !isReadonly && track(rawTarget, \"get\", rawKey);\n  const { has: has2 } = getProto(rawTarget);\n  const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive;\n  if (has2.call(rawTarget, key)) {\n    return wrap(target.get(key));\n  } else if (has2.call(rawTarget, rawKey)) {\n    return wrap(target.get(rawKey));\n  } else if (target !== rawTarget) {\n    target.get(key);\n  }\n}\nfunction has$1(key, isReadonly = false) {\n  const target = this[\n    \"__v_raw\"\n    /* RAW */\n  ];\n  const rawTarget = toRaw(target);\n  const rawKey = toRaw(key);\n  if (key !== rawKey) {\n    !isReadonly && track(rawTarget, \"has\", key);\n  }\n  !isReadonly && track(rawTarget, \"has\", rawKey);\n  return key === rawKey ? target.has(key) : target.has(key) || target.has(rawKey);\n}\nfunction size(target, isReadonly = false) {\n  target = target[\n    \"__v_raw\"\n    /* RAW */\n  ];\n  !isReadonly && track(toRaw(target), \"iterate\", ITERATE_KEY);\n  return Reflect.get(target, \"size\", target);\n}\nfunction add(value) {\n  value = toRaw(value);\n  const target = toRaw(this);\n  const proto = getProto(target);\n  const hadKey = proto.has.call(target, value);\n  if (!hadKey) {\n    target.add(value);\n    trigger(target, \"add\", value, value);\n  }\n  return this;\n}\nfunction set$1(key, value) {\n  value = toRaw(value);\n  const target = toRaw(this);\n  const { has: has2, get: get3 } = getProto(target);\n  let hadKey = has2.call(target, key);\n  if (!hadKey) {\n    key = toRaw(key);\n    hadKey = has2.call(target, key);\n  } else if (true) {\n    checkIdentityKeys(target, has2, key);\n  }\n  const oldValue = get3.call(target, key);\n  target.set(key, value);\n  if (!hadKey) {\n    trigger(target, \"add\", key, value);\n  } else if (hasChanged(value, oldValue)) {\n    trigger(target, \"set\", key, value, oldValue);\n  }\n  return this;\n}\nfunction deleteEntry(key) {\n  const target = toRaw(this);\n  const { has: has2, get: get3 } = getProto(target);\n  let hadKey = has2.call(target, key);\n  if (!hadKey) {\n    key = toRaw(key);\n    hadKey = has2.call(target, key);\n  } else if (true) {\n    checkIdentityKeys(target, has2, key);\n  }\n  const oldValue = get3 ? get3.call(target, key) : void 0;\n  const result = target.delete(key);\n  if (hadKey) {\n    trigger(target, \"delete\", key, void 0, oldValue);\n  }\n  return result;\n}\nfunction clear() {\n  const target = toRaw(this);\n  const hadItems = target.size !== 0;\n  const oldTarget =  true ? isMap(target) ? new Map(target) : new Set(target) : 0;\n  const result = target.clear();\n  if (hadItems) {\n    trigger(target, \"clear\", void 0, void 0, oldTarget);\n  }\n  return result;\n}\nfunction createForEach(isReadonly, isShallow) {\n  return function forEach(callback, thisArg) {\n    const observed = this;\n    const target = observed[\n      \"__v_raw\"\n      /* RAW */\n    ];\n    const rawTarget = toRaw(target);\n    const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive;\n    !isReadonly && track(rawTarget, \"iterate\", ITERATE_KEY);\n    return target.forEach((value, key) => {\n      return callback.call(thisArg, wrap(value), wrap(key), observed);\n    });\n  };\n}\nfunction createIterableMethod(method, isReadonly, isShallow) {\n  return function(...args) {\n    const target = this[\n      \"__v_raw\"\n      /* RAW */\n    ];\n    const rawTarget = toRaw(target);\n    const targetIsMap = isMap(rawTarget);\n    const isPair = method === \"entries\" || method === Symbol.iterator && targetIsMap;\n    const isKeyOnly = method === \"keys\" && targetIsMap;\n    const innerIterator = target[method](...args);\n    const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive;\n    !isReadonly && track(rawTarget, \"iterate\", isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY);\n    return {\n      // iterator protocol\n      next() {\n        const { value, done } = innerIterator.next();\n        return done ? { value, done } : {\n          value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),\n          done\n        };\n      },\n      // iterable protocol\n      [Symbol.iterator]() {\n        return this;\n      }\n    };\n  };\n}\nfunction createReadonlyMethod(type) {\n  return function(...args) {\n    if (true) {\n      const key = args[0] ? `on key \"${args[0]}\" ` : ``;\n      console.warn(`${capitalize(type)} operation ${key}failed: target is readonly.`, toRaw(this));\n    }\n    return type === \"delete\" ? false : this;\n  };\n}\nfunction createInstrumentations() {\n  const mutableInstrumentations2 = {\n    get(key) {\n      return get$1(this, key);\n    },\n    get size() {\n      return size(this);\n    },\n    has: has$1,\n    add,\n    set: set$1,\n    delete: deleteEntry,\n    clear,\n    forEach: createForEach(false, false)\n  };\n  const shallowInstrumentations2 = {\n    get(key) {\n      return get$1(this, key, false, true);\n    },\n    get size() {\n      return size(this);\n    },\n    has: has$1,\n    add,\n    set: set$1,\n    delete: deleteEntry,\n    clear,\n    forEach: createForEach(false, true)\n  };\n  const readonlyInstrumentations2 = {\n    get(key) {\n      return get$1(this, key, true);\n    },\n    get size() {\n      return size(this, true);\n    },\n    has(key) {\n      return has$1.call(this, key, true);\n    },\n    add: createReadonlyMethod(\n      \"add\"\n      /* ADD */\n    ),\n    set: createReadonlyMethod(\n      \"set\"\n      /* SET */\n    ),\n    delete: createReadonlyMethod(\n      \"delete\"\n      /* DELETE */\n    ),\n    clear: createReadonlyMethod(\n      \"clear\"\n      /* CLEAR */\n    ),\n    forEach: createForEach(true, false)\n  };\n  const shallowReadonlyInstrumentations2 = {\n    get(key) {\n      return get$1(this, key, true, true);\n    },\n    get size() {\n      return size(this, true);\n    },\n    has(key) {\n      return has$1.call(this, key, true);\n    },\n    add: createReadonlyMethod(\n      \"add\"\n      /* ADD */\n    ),\n    set: createReadonlyMethod(\n      \"set\"\n      /* SET */\n    ),\n    delete: createReadonlyMethod(\n      \"delete\"\n      /* DELETE */\n    ),\n    clear: createReadonlyMethod(\n      \"clear\"\n      /* CLEAR */\n    ),\n    forEach: createForEach(true, true)\n  };\n  const iteratorMethods = [\"keys\", \"values\", \"entries\", Symbol.iterator];\n  iteratorMethods.forEach((method) => {\n    mutableInstrumentations2[method] = createIterableMethod(method, false, false);\n    readonlyInstrumentations2[method] = createIterableMethod(method, true, false);\n    shallowInstrumentations2[method] = createIterableMethod(method, false, true);\n    shallowReadonlyInstrumentations2[method] = createIterableMethod(method, true, true);\n  });\n  return [\n    mutableInstrumentations2,\n    readonlyInstrumentations2,\n    shallowInstrumentations2,\n    shallowReadonlyInstrumentations2\n  ];\n}\nvar [mutableInstrumentations, readonlyInstrumentations, shallowInstrumentations, shallowReadonlyInstrumentations] = /* @__PURE__ */ createInstrumentations();\nfunction createInstrumentationGetter(isReadonly, shallow) {\n  const instrumentations = shallow ? isReadonly ? shallowReadonlyInstrumentations : shallowInstrumentations : isReadonly ? readonlyInstrumentations : mutableInstrumentations;\n  return (target, key, receiver) => {\n    if (key === \"__v_isReactive\") {\n      return !isReadonly;\n    } else if (key === \"__v_isReadonly\") {\n      return isReadonly;\n    } else if (key === \"__v_raw\") {\n      return target;\n    }\n    return Reflect.get(hasOwn(instrumentations, key) && key in target ? instrumentations : target, key, receiver);\n  };\n}\nvar mutableCollectionHandlers = {\n  get: /* @__PURE__ */ createInstrumentationGetter(false, false)\n};\nvar readonlyCollectionHandlers = {\n  get: /* @__PURE__ */ createInstrumentationGetter(true, false)\n};\nfunction checkIdentityKeys(target, has2, key) {\n  const rawKey = toRaw(key);\n  if (rawKey !== key && has2.call(target, rawKey)) {\n    const type = toRawType(target);\n    console.warn(`Reactive ${type} contains both the raw and reactive versions of the same object${type === `Map` ? ` as keys` : ``}, which can lead to inconsistencies. Avoid differentiating between the raw and reactive versions of an object and only use the reactive version if possible.`);\n  }\n}\nvar reactiveMap = /* @__PURE__ */ new WeakMap();\nvar shallowReactiveMap = /* @__PURE__ */ new WeakMap();\nvar readonlyMap = /* @__PURE__ */ new WeakMap();\nvar shallowReadonlyMap = /* @__PURE__ */ new WeakMap();\nfunction targetTypeMap(rawType) {\n  switch (rawType) {\n    case \"Object\":\n    case \"Array\":\n      return 1;\n    case \"Map\":\n    case \"Set\":\n    case \"WeakMap\":\n    case \"WeakSet\":\n      return 2;\n    default:\n      return 0;\n  }\n}\nfunction getTargetType(value) {\n  return value[\n    \"__v_skip\"\n    /* SKIP */\n  ] || !Object.isExtensible(value) ? 0 : targetTypeMap(toRawType(value));\n}\nfunction reactive2(target) {\n  if (target && target[\n    \"__v_isReadonly\"\n    /* IS_READONLY */\n  ]) {\n    return target;\n  }\n  return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);\n}\nfunction readonly(target) {\n  return createReactiveObject(target, true, readonlyHandlers, readonlyCollectionHandlers, readonlyMap);\n}\nfunction createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) {\n  if (!isObject(target)) {\n    if (true) {\n      console.warn(`value cannot be made reactive: ${String(target)}`);\n    }\n    return target;\n  }\n  if (target[\n    \"__v_raw\"\n    /* RAW */\n  ] && !(isReadonly && target[\n    \"__v_isReactive\"\n    /* IS_REACTIVE */\n  ])) {\n    return target;\n  }\n  const existingProxy = proxyMap.get(target);\n  if (existingProxy) {\n    return existingProxy;\n  }\n  const targetType = getTargetType(target);\n  if (targetType === 0) {\n    return target;\n  }\n  const proxy = new Proxy(target, targetType === 2 ? collectionHandlers : baseHandlers);\n  proxyMap.set(target, proxy);\n  return proxy;\n}\nfunction toRaw(observed) {\n  return observed && toRaw(observed[\n    \"__v_raw\"\n    /* RAW */\n  ]) || observed;\n}\nfunction isRef(r) {\n  return Boolean(r && r.__v_isRef === true);\n}\n\n// packages/alpinejs/src/magics/$nextTick.js\nmagic(\"nextTick\", () => nextTick);\n\n// packages/alpinejs/src/magics/$dispatch.js\nmagic(\"dispatch\", (el) => dispatch.bind(dispatch, el));\n\n// packages/alpinejs/src/magics/$watch.js\nmagic(\"watch\", (el, { evaluateLater: evaluateLater2, cleanup: cleanup2 }) => (key, callback) => {\n  let evaluate2 = evaluateLater2(key);\n  let getter = () => {\n    let value;\n    evaluate2((i) => value = i);\n    return value;\n  };\n  let unwatch = watch(getter, callback);\n  cleanup2(unwatch);\n});\n\n// packages/alpinejs/src/magics/$store.js\nmagic(\"store\", getStores);\n\n// packages/alpinejs/src/magics/$data.js\nmagic(\"data\", (el) => scope(el));\n\n// packages/alpinejs/src/magics/$root.js\nmagic(\"root\", (el) => closestRoot(el));\n\n// packages/alpinejs/src/magics/$refs.js\nmagic(\"refs\", (el) => {\n  if (el._x_refs_proxy)\n    return el._x_refs_proxy;\n  el._x_refs_proxy = mergeProxies(getArrayOfRefObject(el));\n  return el._x_refs_proxy;\n});\nfunction getArrayOfRefObject(el) {\n  let refObjects = [];\n  findClosest(el, (i) => {\n    if (i._x_refs)\n      refObjects.push(i._x_refs);\n  });\n  return refObjects;\n}\n\n// packages/alpinejs/src/ids.js\nvar globalIdMemo = {};\nfunction findAndIncrementId(name) {\n  if (!globalIdMemo[name])\n    globalIdMemo[name] = 0;\n  return ++globalIdMemo[name];\n}\nfunction closestIdRoot(el, name) {\n  return findClosest(el, (element) => {\n    if (element._x_ids && element._x_ids[name])\n      return true;\n  });\n}\nfunction setIdRoot(el, name) {\n  if (!el._x_ids)\n    el._x_ids = {};\n  if (!el._x_ids[name])\n    el._x_ids[name] = findAndIncrementId(name);\n}\n\n// packages/alpinejs/src/magics/$id.js\nmagic(\"id\", (el, { cleanup: cleanup2 }) => (name, key = null) => {\n  let cacheKey = `${name}${key ? `-${key}` : \"\"}`;\n  return cacheIdByNameOnElement(el, cacheKey, cleanup2, () => {\n    let root = closestIdRoot(el, name);\n    let id = root ? root._x_ids[name] : findAndIncrementId(name);\n    return key ? `${name}-${id}-${key}` : `${name}-${id}`;\n  });\n});\ninterceptClone((from, to) => {\n  if (from._x_id) {\n    to._x_id = from._x_id;\n  }\n});\nfunction cacheIdByNameOnElement(el, cacheKey, cleanup2, callback) {\n  if (!el._x_id)\n    el._x_id = {};\n  if (el._x_id[cacheKey])\n    return el._x_id[cacheKey];\n  let output = callback();\n  el._x_id[cacheKey] = output;\n  cleanup2(() => {\n    delete el._x_id[cacheKey];\n  });\n  return output;\n}\n\n// packages/alpinejs/src/magics/$el.js\nmagic(\"el\", (el) => el);\n\n// packages/alpinejs/src/magics/index.js\nwarnMissingPluginMagic(\"Focus\", \"focus\", \"focus\");\nwarnMissingPluginMagic(\"Persist\", \"persist\", \"persist\");\nfunction warnMissingPluginMagic(name, magicName, slug) {\n  magic(magicName, (el) => warn(`You can't use [$${magicName}] without first installing the \"${name}\" plugin here: https://alpinejs.dev/plugins/${slug}`, el));\n}\n\n// packages/alpinejs/src/directives/x-modelable.js\ndirective(\"modelable\", (el, { expression }, { effect: effect3, evaluateLater: evaluateLater2, cleanup: cleanup2 }) => {\n  let func = evaluateLater2(expression);\n  let innerGet = () => {\n    let result;\n    func((i) => result = i);\n    return result;\n  };\n  let evaluateInnerSet = evaluateLater2(`${expression} = __placeholder`);\n  let innerSet = (val) => evaluateInnerSet(() => {\n  }, { scope: { \"__placeholder\": val } });\n  let initialValue = innerGet();\n  innerSet(initialValue);\n  queueMicrotask(() => {\n    if (!el._x_model)\n      return;\n    el._x_removeModelListeners[\"default\"]();\n    let outerGet = el._x_model.get;\n    let outerSet = el._x_model.set;\n    let releaseEntanglement = entangle(\n      {\n        get() {\n          return outerGet();\n        },\n        set(value) {\n          outerSet(value);\n        }\n      },\n      {\n        get() {\n          return innerGet();\n        },\n        set(value) {\n          innerSet(value);\n        }\n      }\n    );\n    cleanup2(releaseEntanglement);\n  });\n});\n\n// packages/alpinejs/src/directives/x-teleport.js\ndirective(\"teleport\", (el, { modifiers, expression }, { cleanup: cleanup2 }) => {\n  if (el.tagName.toLowerCase() !== \"template\")\n    warn(\"x-teleport can only be used on a <template> tag\", el);\n  let target = getTarget(expression);\n  let clone2 = el.content.cloneNode(true).firstElementChild;\n  el._x_teleport = clone2;\n  clone2._x_teleportBack = el;\n  el.setAttribute(\"data-teleport-template\", true);\n  clone2.setAttribute(\"data-teleport-target\", true);\n  if (el._x_forwardEvents) {\n    el._x_forwardEvents.forEach((eventName) => {\n      clone2.addEventListener(eventName, (e) => {\n        e.stopPropagation();\n        el.dispatchEvent(new e.constructor(e.type, e));\n      });\n    });\n  }\n  addScopeToNode(clone2, {}, el);\n  let placeInDom = (clone3, target2, modifiers2) => {\n    if (modifiers2.includes(\"prepend\")) {\n      target2.parentNode.insertBefore(clone3, target2);\n    } else if (modifiers2.includes(\"append\")) {\n      target2.parentNode.insertBefore(clone3, target2.nextSibling);\n    } else {\n      target2.appendChild(clone3);\n    }\n  };\n  mutateDom(() => {\n    placeInDom(clone2, target, modifiers);\n    skipDuringClone(() => {\n      initTree(clone2);\n    })();\n  });\n  el._x_teleportPutBack = () => {\n    let target2 = getTarget(expression);\n    mutateDom(() => {\n      placeInDom(el._x_teleport, target2, modifiers);\n    });\n  };\n  cleanup2(\n    () => mutateDom(() => {\n      clone2.remove();\n      destroyTree(clone2);\n    })\n  );\n});\nvar teleportContainerDuringClone = document.createElement(\"div\");\nfunction getTarget(expression) {\n  let target = skipDuringClone(() => {\n    return document.querySelector(expression);\n  }, () => {\n    return teleportContainerDuringClone;\n  })();\n  if (!target)\n    warn(`Cannot find x-teleport element for selector: \"${expression}\"`);\n  return target;\n}\n\n// packages/alpinejs/src/directives/x-ignore.js\nvar handler = () => {\n};\nhandler.inline = (el, { modifiers }, { cleanup: cleanup2 }) => {\n  modifiers.includes(\"self\") ? el._x_ignoreSelf = true : el._x_ignore = true;\n  cleanup2(() => {\n    modifiers.includes(\"self\") ? delete el._x_ignoreSelf : delete el._x_ignore;\n  });\n};\ndirective(\"ignore\", handler);\n\n// packages/alpinejs/src/directives/x-effect.js\ndirective(\"effect\", skipDuringClone((el, { expression }, { effect: effect3 }) => {\n  effect3(evaluateLater(el, expression));\n}));\n\n// packages/alpinejs/src/utils/on.js\nfunction on(el, event, modifiers, callback) {\n  let listenerTarget = el;\n  let handler4 = (e) => callback(e);\n  let options = {};\n  let wrapHandler = (callback2, wrapper) => (e) => wrapper(callback2, e);\n  if (modifiers.includes(\"dot\"))\n    event = dotSyntax(event);\n  if (modifiers.includes(\"camel\"))\n    event = camelCase2(event);\n  if (modifiers.includes(\"passive\"))\n    options.passive = true;\n  if (modifiers.includes(\"capture\"))\n    options.capture = true;\n  if (modifiers.includes(\"window\"))\n    listenerTarget = window;\n  if (modifiers.includes(\"document\"))\n    listenerTarget = document;\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    handler4 = debounce(handler4, wait);\n  }\n  if (modifiers.includes(\"throttle\")) {\n    let nextModifier = modifiers[modifiers.indexOf(\"throttle\") + 1] || \"invalid-wait\";\n    let wait = isNumeric(nextModifier.split(\"ms\")[0]) ? Number(nextModifier.split(\"ms\")[0]) : 250;\n    handler4 = throttle(handler4, wait);\n  }\n  if (modifiers.includes(\"prevent\"))\n    handler4 = wrapHandler(handler4, (next, e) => {\n      e.preventDefault();\n      next(e);\n    });\n  if (modifiers.includes(\"stop\"))\n    handler4 = wrapHandler(handler4, (next, e) => {\n      e.stopPropagation();\n      next(e);\n    });\n  if (modifiers.includes(\"once\")) {\n    handler4 = wrapHandler(handler4, (next, e) => {\n      next(e);\n      listenerTarget.removeEventListener(event, handler4, options);\n    });\n  }\n  if (modifiers.includes(\"away\") || modifiers.includes(\"outside\")) {\n    listenerTarget = document;\n    handler4 = wrapHandler(handler4, (next, e) => {\n      if (el.contains(e.target))\n        return;\n      if (e.target.isConnected === false)\n        return;\n      if (el.offsetWidth < 1 && el.offsetHeight < 1)\n        return;\n      if (el._x_isShown === false)\n        return;\n      next(e);\n    });\n  }\n  if (modifiers.includes(\"self\"))\n    handler4 = wrapHandler(handler4, (next, e) => {\n      e.target === el && next(e);\n    });\n  if (isKeyEvent(event) || isClickEvent(event)) {\n    handler4 = wrapHandler(handler4, (next, e) => {\n      if (isListeningForASpecificKeyThatHasntBeenPressed(e, modifiers)) {\n        return;\n      }\n      next(e);\n    });\n  }\n  listenerTarget.addEventListener(event, handler4, options);\n  return () => {\n    listenerTarget.removeEventListener(event, handler4, options);\n  };\n}\nfunction dotSyntax(subject) {\n  return subject.replace(/-/g, \".\");\n}\nfunction camelCase2(subject) {\n  return subject.toLowerCase().replace(/-(\\w)/g, (match, char) => char.toUpperCase());\n}\nfunction isNumeric(subject) {\n  return !Array.isArray(subject) && !isNaN(subject);\n}\nfunction kebabCase2(subject) {\n  if ([\" \", \"_\"].includes(\n    subject\n  ))\n    return subject;\n  return subject.replace(/([a-z])([A-Z])/g, \"$1-$2\").replace(/[_\\s]/, \"-\").toLowerCase();\n}\nfunction isKeyEvent(event) {\n  return [\"keydown\", \"keyup\"].includes(event);\n}\nfunction isClickEvent(event) {\n  return [\"contextmenu\", \"click\", \"mouse\"].some((i) => event.includes(i));\n}\nfunction isListeningForASpecificKeyThatHasntBeenPressed(e, modifiers) {\n  let keyModifiers = modifiers.filter((i) => {\n    return ![\"window\", \"document\", \"prevent\", \"stop\", \"once\", \"capture\", \"self\", \"away\", \"outside\", \"passive\"].includes(i);\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  }\n  if (keyModifiers.includes(\"throttle\")) {\n    let debounceIndex = keyModifiers.indexOf(\"throttle\");\n    keyModifiers.splice(debounceIndex, isNumeric((keyModifiers[debounceIndex + 1] || \"invalid-wait\").split(\"ms\")[0]) ? 2 : 1);\n  }\n  if (keyModifiers.length === 0)\n    return false;\n  if (keyModifiers.length === 1 && keyToModifiers(e.key).includes(keyModifiers[0]))\n    return false;\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  if (selectedSystemKeyModifiers.length > 0) {\n    const activelyPressedKeyModifiers = selectedSystemKeyModifiers.filter((modifier) => {\n      if (modifier === \"cmd\" || modifier === \"super\")\n        modifier = \"meta\";\n      return e[`${modifier}Key`];\n    });\n    if (activelyPressedKeyModifiers.length === selectedSystemKeyModifiers.length) {\n      if (isClickEvent(e.type))\n        return false;\n      if (keyToModifiers(e.key).includes(keyModifiers[0]))\n        return false;\n    }\n  }\n  return true;\n}\nfunction keyToModifiers(key) {\n  if (!key)\n    return [];\n  key = kebabCase2(key);\n  let modifierToKeyMap = {\n    \"ctrl\": \"control\",\n    \"slash\": \"/\",\n    \"space\": \" \",\n    \"spacebar\": \" \",\n    \"cmd\": \"meta\",\n    \"esc\": \"escape\",\n    \"up\": \"arrow-up\",\n    \"down\": \"arrow-down\",\n    \"left\": \"arrow-left\",\n    \"right\": \"arrow-right\",\n    \"period\": \".\",\n    \"comma\": \",\",\n    \"equal\": \"=\",\n    \"minus\": \"-\",\n    \"underscore\": \"_\"\n  };\n  modifierToKeyMap[key] = key;\n  return Object.keys(modifierToKeyMap).map((modifier) => {\n    if (modifierToKeyMap[modifier] === key)\n      return modifier;\n  }).filter((modifier) => modifier);\n}\n\n// packages/alpinejs/src/directives/x-model.js\ndirective(\"model\", (el, { modifiers, expression }, { effect: effect3, cleanup: cleanup2 }) => {\n  let scopeTarget = el;\n  if (modifiers.includes(\"parent\")) {\n    scopeTarget = el.parentNode;\n  }\n  let evaluateGet = evaluateLater(scopeTarget, expression);\n  let evaluateSet;\n  if (typeof expression === \"string\") {\n    evaluateSet = evaluateLater(scopeTarget, `${expression} = __placeholder`);\n  } else if (typeof expression === \"function\" && typeof expression() === \"string\") {\n    evaluateSet = evaluateLater(scopeTarget, `${expression()} = __placeholder`);\n  } else {\n    evaluateSet = () => {\n    };\n  }\n  let getValue = () => {\n    let result;\n    evaluateGet((value) => result = value);\n    return isGetterSetter(result) ? result.get() : result;\n  };\n  let setValue = (value) => {\n    let result;\n    evaluateGet((value2) => result = value2);\n    if (isGetterSetter(result)) {\n      result.set(value);\n    } else {\n      evaluateSet(() => {\n      }, {\n        scope: { \"__placeholder\": value }\n      });\n    }\n  };\n  if (typeof expression === \"string\" && el.type === \"radio\") {\n    mutateDom(() => {\n      if (!el.hasAttribute(\"name\"))\n        el.setAttribute(\"name\", expression);\n    });\n  }\n  var event = el.tagName.toLowerCase() === \"select\" || [\"checkbox\", \"radio\"].includes(el.type) || modifiers.includes(\"lazy\") ? \"change\" : \"input\";\n  let removeListener = isCloning ? () => {\n  } : on(el, event, modifiers, (e) => {\n    setValue(getInputValue(el, modifiers, e, getValue()));\n  });\n  if (modifiers.includes(\"fill\")) {\n    if ([void 0, null, \"\"].includes(getValue()) || isCheckbox(el) && Array.isArray(getValue()) || el.tagName.toLowerCase() === \"select\" && el.multiple) {\n      setValue(\n        getInputValue(el, modifiers, { target: el }, getValue())\n      );\n    }\n  }\n  if (!el._x_removeModelListeners)\n    el._x_removeModelListeners = {};\n  el._x_removeModelListeners[\"default\"] = removeListener;\n  cleanup2(() => el._x_removeModelListeners[\"default\"]());\n  if (el.form) {\n    let removeResetListener = on(el.form, \"reset\", [], (e) => {\n      nextTick(() => el._x_model && el._x_model.set(getInputValue(el, modifiers, { target: el }, getValue())));\n    });\n    cleanup2(() => removeResetListener());\n  }\n  el._x_model = {\n    get() {\n      return getValue();\n    },\n    set(value) {\n      setValue(value);\n    }\n  };\n  el._x_forceModelUpdate = (value) => {\n    if (value === void 0 && typeof expression === \"string\" && expression.match(/\\./))\n      value = \"\";\n    window.fromModel = true;\n    mutateDom(() => bind(el, \"value\", value));\n    delete window.fromModel;\n  };\n  effect3(() => {\n    let value = getValue();\n    if (modifiers.includes(\"unintrusive\") && document.activeElement.isSameNode(el))\n      return;\n    el._x_forceModelUpdate(value);\n  });\n});\nfunction getInputValue(el, modifiers, event, currentValue) {\n  return mutateDom(() => {\n    if (event instanceof CustomEvent && event.detail !== void 0)\n      return event.detail !== null && event.detail !== void 0 ? event.detail : event.target.value;\n    else if (isCheckbox(el)) {\n      if (Array.isArray(currentValue)) {\n        let newValue = null;\n        if (modifiers.includes(\"number\")) {\n          newValue = safeParseNumber(event.target.value);\n        } else if (modifiers.includes(\"boolean\")) {\n          newValue = safeParseBoolean(event.target.value);\n        } else {\n          newValue = event.target.value;\n        }\n        return event.target.checked ? currentValue.includes(newValue) ? currentValue : currentValue.concat([newValue]) : currentValue.filter((el2) => !checkedAttrLooseCompare2(el2, newValue));\n      } else {\n        return event.target.checked;\n      }\n    } else if (el.tagName.toLowerCase() === \"select\" && el.multiple) {\n      if (modifiers.includes(\"number\")) {\n        return Array.from(event.target.selectedOptions).map((option) => {\n          let rawValue = option.value || option.text;\n          return safeParseNumber(rawValue);\n        });\n      } else if (modifiers.includes(\"boolean\")) {\n        return Array.from(event.target.selectedOptions).map((option) => {\n          let rawValue = option.value || option.text;\n          return safeParseBoolean(rawValue);\n        });\n      }\n      return Array.from(event.target.selectedOptions).map((option) => {\n        return option.value || option.text;\n      });\n    } else {\n      let newValue;\n      if (isRadio(el)) {\n        if (event.target.checked) {\n          newValue = event.target.value;\n        } else {\n          newValue = currentValue;\n        }\n      } else {\n        newValue = event.target.value;\n      }\n      if (modifiers.includes(\"number\")) {\n        return safeParseNumber(newValue);\n      } else if (modifiers.includes(\"boolean\")) {\n        return safeParseBoolean(newValue);\n      } else if (modifiers.includes(\"trim\")) {\n        return newValue.trim();\n      } else {\n        return newValue;\n      }\n    }\n  });\n}\nfunction safeParseNumber(rawValue) {\n  let number = rawValue ? parseFloat(rawValue) : null;\n  return isNumeric2(number) ? number : rawValue;\n}\nfunction checkedAttrLooseCompare2(valueA, valueB) {\n  return valueA == valueB;\n}\nfunction isNumeric2(subject) {\n  return !Array.isArray(subject) && !isNaN(subject);\n}\nfunction isGetterSetter(value) {\n  return value !== null && typeof value === \"object\" && typeof value.get === \"function\" && typeof value.set === \"function\";\n}\n\n// packages/alpinejs/src/directives/x-cloak.js\ndirective(\"cloak\", (el) => queueMicrotask(() => mutateDom(() => el.removeAttribute(prefix(\"cloak\")))));\n\n// packages/alpinejs/src/directives/x-init.js\naddInitSelector(() => `[${prefix(\"init\")}]`);\ndirective(\"init\", skipDuringClone((el, { expression }, { evaluate: evaluate2 }) => {\n  if (typeof expression === \"string\") {\n    return !!expression.trim() && evaluate2(expression, {}, false);\n  }\n  return evaluate2(expression, {}, false);\n}));\n\n// packages/alpinejs/src/directives/x-text.js\ndirective(\"text\", (el, { expression }, { effect: effect3, evaluateLater: evaluateLater2 }) => {\n  let evaluate2 = evaluateLater2(expression);\n  effect3(() => {\n    evaluate2((value) => {\n      mutateDom(() => {\n        el.textContent = value;\n      });\n    });\n  });\n});\n\n// packages/alpinejs/src/directives/x-html.js\ndirective(\"html\", (el, { expression }, { effect: effect3, evaluateLater: evaluateLater2 }) => {\n  let evaluate2 = evaluateLater2(expression);\n  effect3(() => {\n    evaluate2((value) => {\n      mutateDom(() => {\n        el.innerHTML = value;\n        el._x_ignoreSelf = true;\n        initTree(el);\n        delete el._x_ignoreSelf;\n      });\n    });\n  });\n});\n\n// packages/alpinejs/src/directives/x-bind.js\nmapAttributes(startingWith(\":\", into(prefix(\"bind:\"))));\nvar handler2 = (el, { value, modifiers, expression, original }, { effect: effect3, cleanup: cleanup2 }) => {\n  if (!value) {\n    let bindingProviders = {};\n    injectBindingProviders(bindingProviders);\n    let getBindings = evaluateLater(el, expression);\n    getBindings((bindings) => {\n      applyBindingsObject(el, bindings, original);\n    }, { scope: bindingProviders });\n    return;\n  }\n  if (value === \"key\")\n    return storeKeyForXFor(el, expression);\n  if (el._x_inlineBindings && el._x_inlineBindings[value] && el._x_inlineBindings[value].extract) {\n    return;\n  }\n  let evaluate2 = evaluateLater(el, expression);\n  effect3(() => evaluate2((result) => {\n    if (result === void 0 && typeof expression === \"string\" && expression.match(/\\./)) {\n      result = \"\";\n    }\n    mutateDom(() => bind(el, value, result, modifiers));\n  }));\n  cleanup2(() => {\n    el._x_undoAddedClasses && el._x_undoAddedClasses();\n    el._x_undoAddedStyles && el._x_undoAddedStyles();\n  });\n};\nhandler2.inline = (el, { value, modifiers, expression }) => {\n  if (!value)\n    return;\n  if (!el._x_inlineBindings)\n    el._x_inlineBindings = {};\n  el._x_inlineBindings[value] = { expression, extract: false };\n};\ndirective(\"bind\", handler2);\nfunction storeKeyForXFor(el, expression) {\n  el._x_keyExpression = expression;\n}\n\n// packages/alpinejs/src/directives/x-data.js\naddRootSelector(() => `[${prefix(\"data\")}]`);\ndirective(\"data\", (el, { expression }, { cleanup: cleanup2 }) => {\n  if (shouldSkipRegisteringDataDuringClone(el))\n    return;\n  expression = expression === \"\" ? \"{}\" : expression;\n  let magicContext = {};\n  injectMagics(magicContext, el);\n  let dataProviderContext = {};\n  injectDataProviders(dataProviderContext, magicContext);\n  let data2 = evaluate(el, expression, { scope: dataProviderContext });\n  if (data2 === void 0 || data2 === true)\n    data2 = {};\n  injectMagics(data2, el);\n  let reactiveData = reactive(data2);\n  initInterceptors(reactiveData);\n  let undo = addScopeToNode(el, reactiveData);\n  reactiveData[\"init\"] && evaluate(el, reactiveData[\"init\"]);\n  cleanup2(() => {\n    reactiveData[\"destroy\"] && evaluate(el, reactiveData[\"destroy\"]);\n    undo();\n  });\n});\ninterceptClone((from, to) => {\n  if (from._x_dataStack) {\n    to._x_dataStack = from._x_dataStack;\n    to.setAttribute(\"data-has-alpine-state\", true);\n  }\n});\nfunction shouldSkipRegisteringDataDuringClone(el) {\n  if (!isCloning)\n    return false;\n  if (isCloningLegacy)\n    return true;\n  return el.hasAttribute(\"data-has-alpine-state\");\n}\n\n// packages/alpinejs/src/directives/x-show.js\ndirective(\"show\", (el, { modifiers, expression }, { effect: effect3 }) => {\n  let evaluate2 = evaluateLater(el, expression);\n  if (!el._x_doHide)\n    el._x_doHide = () => {\n      mutateDom(() => {\n        el.style.setProperty(\"display\", \"none\", modifiers.includes(\"important\") ? \"important\" : void 0);\n      });\n    };\n  if (!el._x_doShow)\n    el._x_doShow = () => {\n      mutateDom(() => {\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  let hide = () => {\n    el._x_doHide();\n    el._x_isShown = false;\n  };\n  let show = () => {\n    el._x_doShow();\n    el._x_isShown = true;\n  };\n  let clickAwayCompatibleShow = () => setTimeout(show);\n  let toggle = once(\n    (value) => value ? show() : hide(),\n    (value) => {\n      if (typeof el._x_toggleAndCascadeWithTransitions === \"function\") {\n        el._x_toggleAndCascadeWithTransitions(el, value, show, hide);\n      } else {\n        value ? clickAwayCompatibleShow() : hide();\n      }\n    }\n  );\n  let oldValue;\n  let firstTime = true;\n  effect3(() => evaluate2((value) => {\n    if (!firstTime && value === oldValue)\n      return;\n    if (modifiers.includes(\"immediate\"))\n      value ? clickAwayCompatibleShow() : hide();\n    toggle(value);\n    oldValue = value;\n    firstTime = false;\n  }));\n});\n\n// packages/alpinejs/src/directives/x-for.js\ndirective(\"for\", (el, { expression }, { effect: effect3, cleanup: cleanup2 }) => {\n  let iteratorNames = parseForExpression(expression);\n  let evaluateItems = evaluateLater(el, iteratorNames.items);\n  let evaluateKey = evaluateLater(\n    el,\n    // the x-bind:key expression is stored for our use instead of evaluated.\n    el._x_keyExpression || \"index\"\n  );\n  el._x_prevKeys = [];\n  el._x_lookup = {};\n  effect3(() => loop(el, iteratorNames, evaluateItems, evaluateKey));\n  cleanup2(() => {\n    Object.values(el._x_lookup).forEach((el2) => mutateDom(\n      () => {\n        destroyTree(el2);\n        el2.remove();\n      }\n    ));\n    delete el._x_prevKeys;\n    delete el._x_lookup;\n  });\n});\nfunction loop(el, iteratorNames, evaluateItems, evaluateKey) {\n  let isObject2 = (i) => typeof i === \"object\" && !Array.isArray(i);\n  let templateEl = el;\n  evaluateItems((items) => {\n    if (isNumeric3(items) && items >= 0) {\n      items = Array.from(Array(items).keys(), (i) => i + 1);\n    }\n    if (items === void 0)\n      items = [];\n    let lookup = el._x_lookup;\n    let prevKeys = el._x_prevKeys;\n    let scopes = [];\n    let keys = [];\n    if (isObject2(items)) {\n      items = Object.entries(items).map(([key, value]) => {\n        let scope2 = getIterationScopeVariables(iteratorNames, value, key, items);\n        evaluateKey((value2) => {\n          if (keys.includes(value2))\n            warn(\"Duplicate key on x-for\", el);\n          keys.push(value2);\n        }, { scope: { index: key, ...scope2 } });\n        scopes.push(scope2);\n      });\n    } else {\n      for (let i = 0; i < items.length; i++) {\n        let scope2 = getIterationScopeVariables(iteratorNames, items[i], i, items);\n        evaluateKey((value) => {\n          if (keys.includes(value))\n            warn(\"Duplicate key on x-for\", el);\n          keys.push(value);\n        }, { scope: { index: i, ...scope2 } });\n        scopes.push(scope2);\n      }\n    }\n    let adds = [];\n    let moves = [];\n    let removes = [];\n    let sames = [];\n    for (let i = 0; i < prevKeys.length; i++) {\n      let key = prevKeys[i];\n      if (keys.indexOf(key) === -1)\n        removes.push(key);\n    }\n    prevKeys = prevKeys.filter((key) => !removes.includes(key));\n    let lastKey = \"template\";\n    for (let i = 0; i < keys.length; i++) {\n      let key = keys[i];\n      let prevIndex = prevKeys.indexOf(key);\n      if (prevIndex === -1) {\n        prevKeys.splice(i, 0, key);\n        adds.push([lastKey, i]);\n      } else if (prevIndex !== i) {\n        let keyInSpot = prevKeys.splice(i, 1)[0];\n        let keyForSpot = prevKeys.splice(prevIndex - 1, 1)[0];\n        prevKeys.splice(i, 0, keyForSpot);\n        prevKeys.splice(prevIndex, 0, keyInSpot);\n        moves.push([keyInSpot, keyForSpot]);\n      } else {\n        sames.push(key);\n      }\n      lastKey = key;\n    }\n    for (let i = 0; i < removes.length; i++) {\n      let key = removes[i];\n      if (!(key in lookup))\n        continue;\n      mutateDom(() => {\n        destroyTree(lookup[key]);\n        lookup[key].remove();\n      });\n      delete lookup[key];\n    }\n    for (let i = 0; i < moves.length; i++) {\n      let [keyInSpot, keyForSpot] = moves[i];\n      let elInSpot = lookup[keyInSpot];\n      let elForSpot = lookup[keyForSpot];\n      let marker = document.createElement(\"div\");\n      mutateDom(() => {\n        if (!elForSpot)\n          warn(`x-for \":key\" is undefined or invalid`, templateEl, keyForSpot, lookup);\n        elForSpot.after(marker);\n        elInSpot.after(elForSpot);\n        elForSpot._x_currentIfEl && elForSpot.after(elForSpot._x_currentIfEl);\n        marker.before(elInSpot);\n        elInSpot._x_currentIfEl && elInSpot.after(elInSpot._x_currentIfEl);\n        marker.remove();\n      });\n      elForSpot._x_refreshXForScope(scopes[keys.indexOf(keyForSpot)]);\n    }\n    for (let i = 0; i < adds.length; i++) {\n      let [lastKey2, index] = adds[i];\n      let lastEl = lastKey2 === \"template\" ? templateEl : lookup[lastKey2];\n      if (lastEl._x_currentIfEl)\n        lastEl = lastEl._x_currentIfEl;\n      let scope2 = scopes[index];\n      let key = keys[index];\n      let clone2 = document.importNode(templateEl.content, true).firstElementChild;\n      let reactiveScope = reactive(scope2);\n      addScopeToNode(clone2, reactiveScope, templateEl);\n      clone2._x_refreshXForScope = (newScope) => {\n        Object.entries(newScope).forEach(([key2, value]) => {\n          reactiveScope[key2] = value;\n        });\n      };\n      mutateDom(() => {\n        lastEl.after(clone2);\n        skipDuringClone(() => initTree(clone2))();\n      });\n      if (typeof key === \"object\") {\n        warn(\"x-for key cannot be an object, it must be a string or an integer\", templateEl);\n      }\n      lookup[key] = clone2;\n    }\n    for (let i = 0; i < sames.length; i++) {\n      lookup[sames[i]]._x_refreshXForScope(scopes[keys.indexOf(sames[i])]);\n    }\n    templateEl._x_prevKeys = keys;\n  });\n}\nfunction parseForExpression(expression) {\n  let forIteratorRE = /,([^,\\}\\]]*)(?:,([^,\\}\\]]*))?$/;\n  let stripParensRE = /^\\s*\\(|\\)\\s*$/g;\n  let forAliasRE = /([\\s\\S]*?)\\s+(?:in|of)\\s+([\\s\\S]*)/;\n  let inMatch = expression.match(forAliasRE);\n  if (!inMatch)\n    return;\n  let res = {};\n  res.items = inMatch[2].trim();\n  let item = inMatch[1].replace(stripParensRE, \"\").trim();\n  let iteratorMatch = item.match(forIteratorRE);\n  if (iteratorMatch) {\n    res.item = item.replace(forIteratorRE, \"\").trim();\n    res.index = iteratorMatch[1].trim();\n    if (iteratorMatch[2]) {\n      res.collection = iteratorMatch[2].trim();\n    }\n  } else {\n    res.item = item;\n  }\n  return res;\n}\nfunction getIterationScopeVariables(iteratorNames, item, index, items) {\n  let scopeVariables = {};\n  if (/^\\[.*\\]$/.test(iteratorNames.item) && Array.isArray(item)) {\n    let names = iteratorNames.item.replace(\"[\", \"\").replace(\"]\", \"\").split(\",\").map((i) => i.trim());\n    names.forEach((name, i) => {\n      scopeVariables[name] = item[i];\n    });\n  } else if (/^\\{.*\\}$/.test(iteratorNames.item) && !Array.isArray(item) && typeof item === \"object\") {\n    let names = iteratorNames.item.replace(\"{\", \"\").replace(\"}\", \"\").split(\",\").map((i) => i.trim());\n    names.forEach((name) => {\n      scopeVariables[name] = item[name];\n    });\n  } else {\n    scopeVariables[iteratorNames.item] = item;\n  }\n  if (iteratorNames.index)\n    scopeVariables[iteratorNames.index] = index;\n  if (iteratorNames.collection)\n    scopeVariables[iteratorNames.collection] = items;\n  return scopeVariables;\n}\nfunction isNumeric3(subject) {\n  return !Array.isArray(subject) && !isNaN(subject);\n}\n\n// packages/alpinejs/src/directives/x-ref.js\nfunction handler3() {\n}\nhandler3.inline = (el, { expression }, { cleanup: cleanup2 }) => {\n  let root = closestRoot(el);\n  if (!root._x_refs)\n    root._x_refs = {};\n  root._x_refs[expression] = el;\n  cleanup2(() => delete root._x_refs[expression]);\n};\ndirective(\"ref\", handler3);\n\n// packages/alpinejs/src/directives/x-if.js\ndirective(\"if\", (el, { expression }, { effect: effect3, cleanup: cleanup2 }) => {\n  if (el.tagName.toLowerCase() !== \"template\")\n    warn(\"x-if can only be used on a <template> tag\", el);\n  let evaluate2 = evaluateLater(el, expression);\n  let show = () => {\n    if (el._x_currentIfEl)\n      return el._x_currentIfEl;\n    let clone2 = el.content.cloneNode(true).firstElementChild;\n    addScopeToNode(clone2, {}, el);\n    mutateDom(() => {\n      el.after(clone2);\n      skipDuringClone(() => initTree(clone2))();\n    });\n    el._x_currentIfEl = clone2;\n    el._x_undoIf = () => {\n      mutateDom(() => {\n        destroyTree(clone2);\n        clone2.remove();\n      });\n      delete el._x_currentIfEl;\n    };\n    return clone2;\n  };\n  let hide = () => {\n    if (!el._x_undoIf)\n      return;\n    el._x_undoIf();\n    delete el._x_undoIf;\n  };\n  effect3(() => evaluate2((value) => {\n    value ? show() : hide();\n  }));\n  cleanup2(() => el._x_undoIf && el._x_undoIf());\n});\n\n// packages/alpinejs/src/directives/x-id.js\ndirective(\"id\", (el, { expression }, { evaluate: evaluate2 }) => {\n  let names = evaluate2(expression);\n  names.forEach((name) => setIdRoot(el, name));\n});\ninterceptClone((from, to) => {\n  if (from._x_ids) {\n    to._x_ids = from._x_ids;\n  }\n});\n\n// packages/alpinejs/src/directives/x-on.js\nmapAttributes(startingWith(\"@\", into(prefix(\"on:\"))));\ndirective(\"on\", skipDuringClone((el, { value, modifiers, expression }, { cleanup: cleanup2 }) => {\n  let evaluate2 = expression ? evaluateLater(el, expression) : () => {\n  };\n  if (el.tagName.toLowerCase() === \"template\") {\n    if (!el._x_forwardEvents)\n      el._x_forwardEvents = [];\n    if (!el._x_forwardEvents.includes(value))\n      el._x_forwardEvents.push(value);\n  }\n  let removeListener = on(el, value, modifiers, (e) => {\n    evaluate2(() => {\n    }, { scope: { \"$event\": e }, params: [e] });\n  });\n  cleanup2(() => removeListener());\n}));\n\n// packages/alpinejs/src/directives/index.js\nwarnMissingPluginDirective(\"Collapse\", \"collapse\", \"collapse\");\nwarnMissingPluginDirective(\"Intersect\", \"intersect\", \"intersect\");\nwarnMissingPluginDirective(\"Focus\", \"trap\", \"focus\");\nwarnMissingPluginDirective(\"Mask\", \"mask\", \"mask\");\nfunction warnMissingPluginDirective(name, directiveName, slug) {\n  directive(directiveName, (el) => warn(`You can't use [x-${directiveName}] without first installing the \"${name}\" plugin here: https://alpinejs.dev/plugins/${slug}`, el));\n}\n\n// packages/alpinejs/src/index.js\nalpine_default.setEvaluator(normalEvaluator);\nalpine_default.setReactivityEngine({ reactive: reactive2, effect: effect2, release: stop, raw: toRaw });\nvar src_default = alpine_default;\n\n// packages/alpinejs/builds/module.js\nvar module_default = src_default;\n\n\n\n//# sourceURL=webpack://@joe-truecode/components/./node_modules/alpinejs/dist/module.esm.js?\n}");
+
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/style.css":
+/*!*******************************************************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/style.css ***!
+  \*******************************************************************************************************/
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-green-500: oklch(72.3% 0.219 149.579);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-50: oklch(98.5% 0.002 247.839);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    -moz-tab-size: 4;\n      -o-tab-size: 4;\n         tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::-moz-placeholder {\n    opacity: 1;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::-moz-placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    -webkit-appearance: button;\n       -moz-appearance: button;\n            appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .collapse {\n    visibility: collapse;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .static {\n    position: static;\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .flex {\n    display: flex;\n  }\n  .inline {\n    display: inline;\n  }\n  .table {\n    display: table;\n  }\n  .min-h-screen {\n    min-height: 100vh;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .resize {\n    resize: both;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-blue-500 {\n    border-color: var(--color-blue-500);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .bg-blue-500 {\n    background-color: var(--color-blue-500);\n  }\n  .bg-gray-50 {\n    background-color: var(--color-gray-50);\n  }\n  .bg-green-500 {\n    background-color: var(--color-green-500);\n  }\n  .bg-red-500 {\n    background-color: var(--color-red-500);\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .capitalize {\n    text-transform: capitalize;\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .blur {\n    --tw-blur: blur(8px);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .focus\\\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: \"*\";\n  inherits: false;\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n    }\n  }\n}\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@joe-truecode/components/./src/style.css?./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js\n}");
+
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/runtime/api.js":
+/*!*****************************************************!*\
+  !*** ./node_modules/css-loader/dist/runtime/api.js ***!
+  \*****************************************************/
+/***/ ((module) => {
+
+eval("{\n\n/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n*/\nmodule.exports = function (cssWithMappingToString) {\n  var list = [];\n\n  // return the list of modules as css string\n  list.toString = function toString() {\n    return this.map(function (item) {\n      var content = \"\";\n      var needLayer = typeof item[5] !== \"undefined\";\n      if (item[4]) {\n        content += \"@supports (\".concat(item[4], \") {\");\n      }\n      if (item[2]) {\n        content += \"@media \".concat(item[2], \" {\");\n      }\n      if (needLayer) {\n        content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n      }\n      content += cssWithMappingToString(item);\n      if (needLayer) {\n        content += \"}\";\n      }\n      if (item[2]) {\n        content += \"}\";\n      }\n      if (item[4]) {\n        content += \"}\";\n      }\n      return content;\n    }).join(\"\");\n  };\n\n  // import a list of modules into the list\n  list.i = function i(modules, media, dedupe, supports, layer) {\n    if (typeof modules === \"string\") {\n      modules = [[null, modules, undefined]];\n    }\n    var alreadyImportedModules = {};\n    if (dedupe) {\n      for (var k = 0; k < this.length; k++) {\n        var id = this[k][0];\n        if (id != null) {\n          alreadyImportedModules[id] = true;\n        }\n      }\n    }\n    for (var _k = 0; _k < modules.length; _k++) {\n      var item = [].concat(modules[_k]);\n      if (dedupe && alreadyImportedModules[item[0]]) {\n        continue;\n      }\n      if (typeof layer !== \"undefined\") {\n        if (typeof item[5] === \"undefined\") {\n          item[5] = layer;\n        } else {\n          item[1] = \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\").concat(item[1], \"}\");\n          item[5] = layer;\n        }\n      }\n      if (media) {\n        if (!item[2]) {\n          item[2] = media;\n        } else {\n          item[1] = \"@media \".concat(item[2], \" {\").concat(item[1], \"}\");\n          item[2] = media;\n        }\n      }\n      if (supports) {\n        if (!item[4]) {\n          item[4] = \"\".concat(supports);\n        } else {\n          item[1] = \"@supports (\".concat(item[4], \") {\").concat(item[1], \"}\");\n          item[4] = supports;\n        }\n      }\n      list.push(item);\n    }\n  };\n  return list;\n};\n\n//# sourceURL=webpack://@joe-truecode/components/./node_modules/css-loader/dist/runtime/api.js?\n}");
+
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/runtime/noSourceMaps.js":
+/*!**************************************************************!*\
+  !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***!
+  \**************************************************************/
+/***/ ((module) => {
+
+eval("{\n\nmodule.exports = function (i) {\n  return i[1];\n};\n\n//# sourceURL=webpack://@joe-truecode/components/./node_modules/css-loader/dist/runtime/noSourceMaps.js?\n}");
+
+/***/ }),
+
+/***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":
+/*!****************************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
+  \****************************************************************************/
+/***/ ((module) => {
+
+eval("{\n\nvar stylesInDOM = [];\nfunction getIndexByIdentifier(identifier) {\n  var result = -1;\n  for (var i = 0; i < stylesInDOM.length; i++) {\n    if (stylesInDOM[i].identifier === identifier) {\n      result = i;\n      break;\n    }\n  }\n  return result;\n}\nfunction modulesToDom(list, options) {\n  var idCountMap = {};\n  var identifiers = [];\n  for (var i = 0; i < list.length; i++) {\n    var item = list[i];\n    var id = options.base ? item[0] + options.base : item[0];\n    var count = idCountMap[id] || 0;\n    var identifier = \"\".concat(id, \" \").concat(count);\n    idCountMap[id] = count + 1;\n    var indexByIdentifier = getIndexByIdentifier(identifier);\n    var obj = {\n      css: item[1],\n      media: item[2],\n      sourceMap: item[3],\n      supports: item[4],\n      layer: item[5]\n    };\n    if (indexByIdentifier !== -1) {\n      stylesInDOM[indexByIdentifier].references++;\n      stylesInDOM[indexByIdentifier].updater(obj);\n    } else {\n      var updater = addElementStyle(obj, options);\n      options.byIndex = i;\n      stylesInDOM.splice(i, 0, {\n        identifier: identifier,\n        updater: updater,\n        references: 1\n      });\n    }\n    identifiers.push(identifier);\n  }\n  return identifiers;\n}\nfunction addElementStyle(obj, options) {\n  var api = options.domAPI(options);\n  api.update(obj);\n  var updater = function updater(newObj) {\n    if (newObj) {\n      if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {\n        return;\n      }\n      api.update(obj = newObj);\n    } else {\n      api.remove();\n    }\n  };\n  return updater;\n}\nmodule.exports = function (list, options) {\n  options = options || {};\n  list = list || [];\n  var lastIdentifiers = modulesToDom(list, options);\n  return function update(newList) {\n    newList = newList || [];\n    for (var i = 0; i < lastIdentifiers.length; i++) {\n      var identifier = lastIdentifiers[i];\n      var index = getIndexByIdentifier(identifier);\n      stylesInDOM[index].references--;\n    }\n    var newLastIdentifiers = modulesToDom(newList, options);\n    for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n      var _identifier = lastIdentifiers[_i];\n      var _index = getIndexByIdentifier(_identifier);\n      if (stylesInDOM[_index].references === 0) {\n        stylesInDOM[_index].updater();\n        stylesInDOM.splice(_index, 1);\n      }\n    }\n    lastIdentifiers = newLastIdentifiers;\n  };\n};\n\n//# sourceURL=webpack://@joe-truecode/components/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?\n}");
+
+/***/ }),
+
+/***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js":
+/*!********************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***!
+  \********************************************************************/
+/***/ ((module) => {
+
+eval("{\n\nvar memo = {};\n\n/* istanbul ignore next  */\nfunction getTarget(target) {\n  if (typeof memo[target] === \"undefined\") {\n    var styleTarget = document.querySelector(target);\n\n    // Special case to return head of iframe instead of iframe itself\n    if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n      try {\n        // This will throw an exception if access to iframe is blocked\n        // due to cross-origin restrictions\n        styleTarget = styleTarget.contentDocument.head;\n      } catch (e) {\n        // istanbul ignore next\n        styleTarget = null;\n      }\n    }\n    memo[target] = styleTarget;\n  }\n  return memo[target];\n}\n\n/* istanbul ignore next  */\nfunction insertBySelector(insert, style) {\n  var target = getTarget(insert);\n  if (!target) {\n    throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n  }\n  target.appendChild(style);\n}\nmodule.exports = insertBySelector;\n\n//# sourceURL=webpack://@joe-truecode/components/./node_modules/style-loader/dist/runtime/insertBySelector.js?\n}");
+
+/***/ }),
+
+/***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js":
+/*!**********************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***!
+  \**********************************************************************/
+/***/ ((module) => {
+
+eval("{\n\n/* istanbul ignore next  */\nfunction insertStyleElement(options) {\n  var element = document.createElement(\"style\");\n  options.setAttributes(element, options.attributes);\n  options.insert(element, options.options);\n  return element;\n}\nmodule.exports = insertStyleElement;\n\n//# sourceURL=webpack://@joe-truecode/components/./node_modules/style-loader/dist/runtime/insertStyleElement.js?\n}");
+
+/***/ }),
+
+/***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":
+/*!**********************************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***!
+  \**********************************************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+eval("{\n\n/* istanbul ignore next  */\nfunction setAttributesWithoutAttributes(styleElement) {\n  var nonce =  true ? __webpack_require__.nc : 0;\n  if (nonce) {\n    styleElement.setAttribute(\"nonce\", nonce);\n  }\n}\nmodule.exports = setAttributesWithoutAttributes;\n\n//# sourceURL=webpack://@joe-truecode/components/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js?\n}");
+
+/***/ }),
+
+/***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js":
+/*!***************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***!
+  \***************************************************************/
+/***/ ((module) => {
+
+eval("{\n\n/* istanbul ignore next  */\nfunction apply(styleElement, options, obj) {\n  var css = \"\";\n  if (obj.supports) {\n    css += \"@supports (\".concat(obj.supports, \") {\");\n  }\n  if (obj.media) {\n    css += \"@media \".concat(obj.media, \" {\");\n  }\n  var needLayer = typeof obj.layer !== \"undefined\";\n  if (needLayer) {\n    css += \"@layer\".concat(obj.layer.length > 0 ? \" \".concat(obj.layer) : \"\", \" {\");\n  }\n  css += obj.css;\n  if (needLayer) {\n    css += \"}\";\n  }\n  if (obj.media) {\n    css += \"}\";\n  }\n  if (obj.supports) {\n    css += \"}\";\n  }\n  var sourceMap = obj.sourceMap;\n  if (sourceMap && typeof btoa !== \"undefined\") {\n    css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n  }\n\n  // For old IE\n  /* istanbul ignore if  */\n  options.styleTagTransform(css, styleElement, options.options);\n}\nfunction removeStyleElement(styleElement) {\n  // istanbul ignore if\n  if (styleElement.parentNode === null) {\n    return false;\n  }\n  styleElement.parentNode.removeChild(styleElement);\n}\n\n/* istanbul ignore next  */\nfunction domAPI(options) {\n  if (typeof document === \"undefined\") {\n    return {\n      update: function update() {},\n      remove: function remove() {}\n    };\n  }\n  var styleElement = options.insertStyleElement(options);\n  return {\n    update: function update(obj) {\n      apply(styleElement, options, obj);\n    },\n    remove: function remove() {\n      removeStyleElement(styleElement);\n    }\n  };\n}\nmodule.exports = domAPI;\n\n//# sourceURL=webpack://@joe-truecode/components/./node_modules/style-loader/dist/runtime/styleDomAPI.js?\n}");
+
+/***/ }),
+
+/***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js":
+/*!*********************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***!
+  \*********************************************************************/
+/***/ ((module) => {
+
+eval("{\n\n/* istanbul ignore next  */\nfunction styleTagTransform(css, styleElement) {\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = css;\n  } else {\n    while (styleElement.firstChild) {\n      styleElement.removeChild(styleElement.firstChild);\n    }\n    styleElement.appendChild(document.createTextNode(css));\n  }\n}\nmodule.exports = styleTagTransform;\n\n//# sourceURL=webpack://@joe-truecode/components/./node_modules/style-loader/dist/runtime/styleTagTransform.js?\n}");
+
+/***/ }),
+
+/***/ "./src/components/button.ts":
+/*!**********************************!*\
+  !*** ./src/components/button.ts ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   MyButton: () => (/* binding */ MyButton)\n/* harmony export */ });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ \"./src/constants.ts\");\n\nclass MyButton extends HTMLElement {\n    constructor() {\n        super();\n    }\n    connectedCallback() {\n        // Remove any previous content\n        this.innerHTML = '';\n        // Create the button element\n        const button = document.createElement('button');\n        // Merge default and user classes (user classes override defaults)\n        const defaultClass = 'bg-green-500 text-white px-4 py-2 rounded';\n        const userClass = this.getAttribute('class');\n        button.className = userClass ? `${defaultClass} ${userClass}` : defaultClass;\n        // Forward all attributes except 'class' and inline event handlers\n        for (const attr of this.getAttributeNames()) {\n            if (attr === 'class')\n                continue;\n            if (attr.startsWith('on'))\n                continue; // skip inline event attributes for now\n            button.setAttribute(attr, this.getAttribute(attr));\n        }\n        // Handle inline event attributes (onclick, onfocus, etc.)\n        for (const attr of this.getAttributeNames()) {\n            if (attr.startsWith('on')) {\n                const handler = this.getAttribute(attr);\n                if (handler) {\n                    // e.g., attr = \"onclick\" => eventName = \"click\"\n                    const eventName = attr.slice(2);\n                    button.addEventListener(eventName, function (event) {\n                        // 'this' is the button element\n                        // Use 'new Function' to mimic inline handler (event is passed as argument)\n                        return new Function('event', handler).call(button, event);\n                    });\n                }\n            }\n        }\n        // Set button content (slot)\n        button.innerHTML = this.innerHTML || 'Click Me';\n        // Append the button to the custom element\n        this.appendChild(button);\n        // Re-emit common events for JS event listeners on <my-button>\n        [\n            'click', 'focus', 'blur', 'keydown', 'keyup', 'mousedown', 'mouseup', 'mouseenter', 'mouseleave', 'input', 'change'\n        ].forEach(eventType => {\n            button.addEventListener(eventType, (e) => {\n                // Only re-emit if the event originated from the button itself\n                if (e.target === button) {\n                    const event = new e.constructor(e.type, e);\n                    this.dispatchEvent(event);\n                }\n            });\n        });\n    }\n}\n// Register the custom element if not already defined\nconst tagName = `${_constants__WEBPACK_IMPORTED_MODULE_0__.PREFIX.toLowerCase()}-button`;\nif (!customElements.get(tagName)) {\n    customElements.define(tagName, MyButton);\n}\n\n\n//# sourceURL=webpack://@joe-truecode/components/./src/components/button.ts?\n}");
+
+/***/ }),
+
+/***/ "./src/components/input.ts":
+/*!*********************************!*\
+  !*** ./src/components/input.ts ***!
+  \*********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   MyInput: () => (/* binding */ MyInput)\n/* harmony export */ });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ \"./src/constants.ts\");\n\nclass MyInput extends HTMLElement {\n    constructor() {\n        super();\n    }\n    connectedCallback() {\n        const input = document.createElement('input');\n        const defaultClass = 'border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500';\n        const userClass = this.getAttribute('class');\n        input.className = userClass ? `${defaultClass} ${userClass}` : defaultClass;\n        // Forward all attributes except 'class'\n        for (const attr of this.getAttributeNames()) {\n            if (attr !== 'class') {\n                input.setAttribute(attr, this.getAttribute(attr));\n            }\n        }\n        // Set value from inner content if not already set by attribute\n        if (!input.hasAttribute('value') && this.innerHTML.trim()) {\n            input.value = this.innerHTML.trim();\n        }\n        // Clear host content and append input\n        this.innerHTML = '';\n        this.appendChild(input);\n        // Re-emit common events for JS event listeners on <my-input>\n        [\n            'input', 'change', 'focus', 'blur', 'keydown', 'keyup', 'click'\n        ].forEach(eventType => {\n            input.addEventListener(eventType, (e) => {\n                const event = new Event(e.type, { bubbles: e.bubbles, cancelable: e.cancelable });\n                this.dispatchEvent(event);\n            });\n        });\n    }\n}\n// Register the custom element if not already defined\nconst tagName = `${_constants__WEBPACK_IMPORTED_MODULE_0__.PREFIX.toLowerCase()}-input`;\nif (!customElements.get(tagName)) {\n    customElements.define(tagName, MyInput);\n}\n\n\n//# sourceURL=webpack://@joe-truecode/components/./src/components/input.ts?\n}");
+
+/***/ }),
+
+/***/ "./src/components/toggle.ts":
+/*!**********************************!*\
+  !*** ./src/components/toggle.ts ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   MyToggle: () => (/* binding */ MyToggle)\n/* harmony export */ });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ \"./src/constants.ts\");\n\nclass MyToggle extends HTMLElement {\n    constructor() {\n        super();\n    }\n    connectedCallback() {\n        this.innerHTML = `\n      <div x-data=\"{ open: false }\" class=\"p-4\">\n        <button @click=\"open = !open\" class=\"bg-blue-500 text-white px-4 py-2 rounded\">\n          Toggle\n        </button>\n        <div x-show=\"open\" class=\"mt-2 text-gray-700\">\n          Hello from MyToggle!\n        </div>\n      </div>\n    `;\n        // Ensure Alpine.js initializes the x-data/x-show in this subtree\n        if (window.Alpine && typeof window.Alpine.initTree === 'function') {\n            window.Alpine.initTree(this);\n        }\n    }\n}\n// Register the custom element if not already defined\nconst tagName = `${_constants__WEBPACK_IMPORTED_MODULE_0__.PREFIX.toLowerCase()}-toggle`;\nif (!customElements.get(tagName)) {\n    customElements.define(tagName, MyToggle);\n}\n\n\n//# sourceURL=webpack://@joe-truecode/components/./src/components/toggle.ts?\n}");
+
+/***/ }),
+
+/***/ "./src/constants.ts":
+/*!**************************!*\
+  !*** ./src/constants.ts ***!
+  \**************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PREFIX: () => (/* binding */ PREFIX)\n/* harmony export */ });\nconst PREFIX = 'My';\n\n\n//# sourceURL=webpack://@joe-truecode/components/./src/constants.ts?\n}");
+
+/***/ }),
+
+/***/ "./src/index.ts":
+/*!**********************!*\
+  !*** ./src/index.ts ***!
+  \**********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var alpinejs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! alpinejs */ \"./node_modules/alpinejs/dist/module.esm.js\");\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _components_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/button */ \"./src/components/button.ts\");\n/* harmony import */ var _components_input__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/input */ \"./src/components/input.ts\");\n/* harmony import */ var _components_toggle__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/toggle */ \"./src/components/toggle.ts\");\n\n\n\n\n\n\n\n//# sourceURL=webpack://@joe-truecode/components/./src/index.ts?\n}");
+
+/***/ }),
+
+/***/ "./src/style.css":
+/*!***********************!*\
+  !*** ./src/style.css ***!
+  \***********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_node_modules_postcss_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!../node_modules/postcss-loader/dist/cjs.js!./style.css */ \"./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/style.css\");\n\n      \n      \n      \n      \n      \n      \n      \n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n      options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n    \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_node_modules_postcss_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_node_modules_postcss_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_node_modules_postcss_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_node_modules_postcss_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://@joe-truecode/components/./src/style.css?\n}");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			id: moduleId,
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/nonce */
+/******/ 	(() => {
+/******/ 		__webpack_require__.nc = undefined;
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = __webpack_require__("./src/index.ts");
+/******/ 	
+/******/ })()
+;

package/dist/components/button.d.ts

@@ -0,0 +1,4 @@
+export declare class MyButton extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+}

package/dist/components/input.d.ts

@@ -0,0 +1,4 @@
+export declare class MyInput extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+}

package/dist/components/toggle.d.ts

@@ -0,0 +1,4 @@
+export declare class MyToggle extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+}

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "My";

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import 'alpinejs';
+import './style.css';
+import './components/button';
+import './components/input';
+import './components/toggle';
+declare global {
+    interface Window {
+        Alpine?: {
+            initTree: (el: Element) => void;
+        };
+    }
+}

package/dist/index.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>MyComponents Demo</title>
+    <script defer src="bundle.js"></script></head>
+    <body class="bg-gray-50 min-h-screen flex items-center justify-center">
+        <div class="w-full max-w-md mx-auto p-6 bg-white rounded shadow">
+            <h1 class="text-2xl font-bold mb-4 text-center">
+                MyComponents Demo
+            </h1>
+            <my-toggle>User</my-toggle>
+            <div class="mt-6 text-center">
+                <h2 class="text-lg font-semibold mb-2">Button Examples</h2>
+                <my-button class="bg-red-500" disabled
+                    >Disabled Red Button</my-button
+                >
+                <my-button>Default Button</my-button>
+                <my-button onclick="alert('hi')">Alert</my-button>
+                <my-button disabled>Disabled</my-button>
+            </div>
+            <div class="mt-8 text-center">
+                <h2 class="text-lg font-semibold mb-2">Input Examples</h2>
+                <my-input placeholder="Default input"></my-input>
+                <my-input
+                    class="border-blue-500"
+                    placeholder="Blue border"
+                ></my-input>
+                <my-input type="password" placeholder="Password"></my-input>
+                <my-input disabled value="Disabled input"></my-input>
+            </div>
+        </div>
+        <script src="bundle.js"></script>
+    </body>
+</html>

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@joe-truecode/components",
+  "version": "1.0.1",
+  "description": "Framework-agnostic UI components using TailwindCSS v4 and Alpine.js.",
+  "main": "dist/bundle.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "NODE_OPTIONS='--require ts-node/register' webpack serve --config webpack.config.ts",
+    "build": "NODE_OPTIONS='--require ts-node/register' webpack --config webpack.config.ts",
+    "typecheck": "tsc --noEmit",
+    "prepare": "npm run build",
+    "publish": "npm publish --access public"
+  },
+  "keywords": [
+    "tailwindcss",
+    "alpinejs",
+    "web-components",
+    "ui",
+    "npm-package"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "alpinejs": "^3.14.9",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
+    "@types/html-webpack-plugin": "^3.2.7",
+    "@types/webpack": "^5.28.4",
+    "@types/webpack-env": "^1.18.0",
+    "copy-webpack-plugin": "^12.0.0",
+    "css-loader": "^6.8.1",
+    "html-webpack-plugin": "^5.5.0",
+    "postcss-loader": "^7.3.3",
+    "style-loader": "^3.3.4",
+    "ts-loader": "^9.5.0",
+    "ts-node": "^10.9.1",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}

package/postcss.config.d.ts

@@ -0,0 +1,3 @@
+import type { Config } from 'postcss';
+declare const config: Config;
+export default config;

package/postcss.config.js

@@ -0,0 +1,7 @@
+   module.exports = {
+     plugins: {
+       '@tailwindcss/postcss': {},
+       autoprefixer: {},
+     }
+   };
+   

package/src/components/button.ts

@@ -0,0 +1,69 @@
+
+import { PREFIX } from '../constants';
+
+export class MyButton extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback(): void {
+    // Remove any previous content
+    this.innerHTML = '';
+
+    // Create the button element
+    const button = document.createElement('button');
+
+    // Merge default and user classes (user classes override defaults)
+    const defaultClass = 'bg-green-500 text-white px-4 py-2 rounded';
+    const userClass = this.getAttribute('class');
+    button.className = userClass ? `${defaultClass} ${userClass}` : defaultClass;
+
+    // Forward all attributes except 'class' and inline event handlers
+    for (const attr of this.getAttributeNames()) {
+      if (attr === 'class') continue;
+      if (attr.startsWith('on')) continue; // skip inline event attributes for now
+      button.setAttribute(attr, this.getAttribute(attr)!);
+    }
+
+    // Handle inline event attributes (onclick, onfocus, etc.)
+    for (const attr of this.getAttributeNames()) {
+      if (attr.startsWith('on')) {
+        const handler = this.getAttribute(attr);
+        if (handler) {
+          // e.g., attr = "onclick" => eventName = "click"
+          const eventName = attr.slice(2);
+          button.addEventListener(eventName, function(event) {
+            // 'this' is the button element
+            // Use 'new Function' to mimic inline handler (event is passed as argument)
+            return new Function('event', handler).call(button, event);
+          });
+        }
+      }
+    }
+
+    // Set button content (slot)
+    button.innerHTML = this.innerHTML || 'Click Me';
+
+    // Append the button to the custom element
+    this.appendChild(button);
+
+    // Re-emit common events for JS event listeners on <my-button>
+    [
+      'click', 'focus', 'blur', 'keydown', 'keyup', 'mousedown', 'mouseup', 'mouseenter', 'mouseleave', 'input', 'change'
+    ].forEach(eventType => {
+      button.addEventListener(eventType, (e) => {
+        // Only re-emit if the event originated from the button itself
+        if (e.target === button) {
+          const event = new (e.constructor as { new(type: string, eventInitDict?: any): Event })(e.type, e);
+          this.dispatchEvent(event);
+        }
+      });
+    });
+  }
+}
+
+// Register the custom element if not already defined
+const tagName = `${PREFIX.toLowerCase()}-button`;
+if (!customElements.get(tagName)) {
+  customElements.define(tagName, MyButton);
+}

package/src/components/input.ts

@@ -0,0 +1,46 @@
+
+import { PREFIX } from '../constants';
+export class MyInput extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback(): void {
+    const input = document.createElement('input');
+    const defaultClass = 'border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500';
+    const userClass = this.getAttribute('class');
+    input.className = userClass ? `${defaultClass} ${userClass}` : defaultClass;
+
+    // Forward all attributes except 'class'
+    for (const attr of this.getAttributeNames()) {
+      if (attr !== 'class') {
+        input.setAttribute(attr, this.getAttribute(attr)!);
+      }
+    }
+
+    // Set value from inner content if not already set by attribute
+    if (!input.hasAttribute('value') && this.innerHTML.trim()) {
+      input.value = this.innerHTML.trim();
+    }
+
+    // Clear host content and append input
+    this.innerHTML = '';
+    this.appendChild(input);
+
+    // Re-emit common events for JS event listeners on <my-input>
+    [
+      'input', 'change', 'focus', 'blur', 'keydown', 'keyup', 'click'
+    ].forEach(eventType => {
+      input.addEventListener(eventType, (e) => {
+        const event = new Event(e.type, { bubbles: e.bubbles, cancelable: e.cancelable });
+        this.dispatchEvent(event);
+      });
+    });
+  }
+}
+
+// Register the custom element if not already defined
+const tagName = `${PREFIX.toLowerCase()}-input`;
+if (!customElements.get(tagName)) {
+  customElements.define(tagName, MyInput);
+}

package/src/components/toggle.ts

@@ -0,0 +1,30 @@
+import { PREFIX } from '../constants';
+
+export class MyToggle extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback(): void {
+    this.innerHTML = `
+      <div x-data="{ open: false }" class="p-4">
+        <button @click="open = !open" class="bg-blue-500 text-white px-4 py-2 rounded">
+          Toggle
+        </button>
+        <div x-show="open" class="mt-2 text-gray-700">
+          Hello from MyToggle!
+        </div>
+      </div>
+    `;
+    // Ensure Alpine.js initializes the x-data/x-show in this subtree
+    if (window.Alpine && typeof window.Alpine.initTree === 'function') {
+      window.Alpine.initTree(this);
+    }
+  }
+}
+
+// Register the custom element if not already defined
+const tagName = `${PREFIX.toLowerCase()}-toggle`;
+if (!customElements.get(tagName)) {
+  customElements.define(tagName, MyToggle);
+}

package/src/constants.ts

@@ -0,0 +1 @@
+export const PREFIX = 'My';

package/src/index.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>MyComponents Demo</title>
+    </head>
+    <body class="bg-gray-50 min-h-screen flex items-center justify-center">
+        <div class="w-full max-w-md mx-auto p-6 bg-white rounded shadow">
+            <h1 class="text-2xl font-bold mb-4 text-center">
+                MyComponents Demo
+            </h1>
+            <my-toggle>User</my-toggle>
+            <div class="mt-6 text-center">
+                <h2 class="text-lg font-semibold mb-2">Button Examples</h2>
+                <my-button class="bg-red-500" disabled
+                    >Disabled Red Button</my-button
+                >
+                <my-button>Default Button</my-button>
+                <my-button onclick="alert('hi')">Alert</my-button>
+                <my-button disabled>Disabled</my-button>
+            </div>
+            <div class="mt-8 text-center">
+                <h2 class="text-lg font-semibold mb-2">Input Examples</h2>
+                <my-input placeholder="Default input"></my-input>
+                <my-input
+                    class="border-blue-500"
+                    placeholder="Blue border"
+                ></my-input>
+                <my-input type="password" placeholder="Password"></my-input>
+                <my-input disabled value="Disabled input"></my-input>
+            </div>
+        </div>
+        <script src="bundle.js"></script>
+    </body>
+</html>

package/src/index.ts

@@ -0,0 +1,14 @@
+import 'alpinejs';
+import './style.css';
+import './components/button';
+import './components/input';
+import './components/toggle';
+
+// Type for Alpine.js global (for TS awareness)
+declare global {
+  interface Window {
+    Alpine?: {
+      initTree: (el: Element) => void;
+    };
+  }
+}

package/src/style.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/tailwind.config.d.ts

@@ -0,0 +1,3 @@
+import type { Config } from 'tailwindcss';
+declare const config: Config;
+export default config;

package/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{html,ts}"
+  ],
+  // No theme customization for minimal CSS-first config
+  // Add theme or plugins as needed
+};

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "lib": ["DOM", "ES2020"],
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowJs": true,
+    "checkJs": false,
+    "resolveJsonModule": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/webpack.config.d.ts

@@ -0,0 +1,2 @@
+declare const path: any;
+declare const HtmlWebpackPlugin: any;

package/webpack.config.ts

@@ -0,0 +1,39 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  mode: process.env.NODE_ENV || 'development',
+  entry: './src/index.ts',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    }),
+  ],
+  devServer: {
+    static: './dist',
+    port: 3000,
+    open: true,
+    hot: true,
+  },
+};