@ayu-sh-kr/dota-ui 0.0.4 → 0.0.6

package/dist/dota-ui.cjs

@@ -0,0 +1,3350 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var _a, _b, _c, _d, _e;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dotaCore = require("@ayu-sh-kr/dota-core");
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+var _Reflect = {};
+/*! *****************************************************************************
+Copyright (C) Microsoft. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+var hasRequired_Reflect;
+function require_Reflect() {
+  if (hasRequired_Reflect) return _Reflect;
+  hasRequired_Reflect = 1;
+  var Reflect2;
+  (function(Reflect3) {
+    (function(factory) {
+      var root = typeof globalThis === "object" ? globalThis : typeof commonjsGlobal === "object" ? commonjsGlobal : typeof self === "object" ? self : typeof this === "object" ? this : sloppyModeThis();
+      var exporter = makeExporter(Reflect3);
+      if (typeof root.Reflect !== "undefined") {
+        exporter = makeExporter(root.Reflect, exporter);
+      }
+      factory(exporter, root);
+      if (typeof root.Reflect === "undefined") {
+        root.Reflect = Reflect3;
+      }
+      function makeExporter(target, previous) {
+        return function(key, value) {
+          Object.defineProperty(target, key, { configurable: true, writable: true, value });
+          if (previous)
+            previous(key, value);
+        };
+      }
+      function functionThis() {
+        try {
+          return Function("return this;")();
+        } catch (_) {
+        }
+      }
+      function indirectEvalThis() {
+        try {
+          return (void 0, eval)("(function() { return this; })()");
+        } catch (_) {
+        }
+      }
+      function sloppyModeThis() {
+        return functionThis() || indirectEvalThis();
+      }
+    })(function(exporter, root) {
+      var hasOwn = Object.prototype.hasOwnProperty;
+      var supportsSymbol = typeof Symbol === "function";
+      var toPrimitiveSymbol = supportsSymbol && typeof Symbol.toPrimitive !== "undefined" ? Symbol.toPrimitive : "@@toPrimitive";
+      var iteratorSymbol = supportsSymbol && typeof Symbol.iterator !== "undefined" ? Symbol.iterator : "@@iterator";
+      var supportsCreate = typeof Object.create === "function";
+      var supportsProto = { __proto__: [] } instanceof Array;
+      var downLevel = !supportsCreate && !supportsProto;
+      var HashMap = {
+        // create an object in dictionary mode (a.k.a. "slow" mode in v8)
+        create: supportsCreate ? function() {
+          return MakeDictionary(/* @__PURE__ */ Object.create(null));
+        } : supportsProto ? function() {
+          return MakeDictionary({ __proto__: null });
+        } : function() {
+          return MakeDictionary({});
+        },
+        has: downLevel ? function(map, key) {
+          return hasOwn.call(map, key);
+        } : function(map, key) {
+          return key in map;
+        },
+        get: downLevel ? function(map, key) {
+          return hasOwn.call(map, key) ? map[key] : void 0;
+        } : function(map, key) {
+          return map[key];
+        }
+      };
+      var functionPrototype = Object.getPrototypeOf(Function);
+      var _Map = typeof Map === "function" && typeof Map.prototype.entries === "function" ? Map : CreateMapPolyfill();
+      var _Set = typeof Set === "function" && typeof Set.prototype.entries === "function" ? Set : CreateSetPolyfill();
+      var _WeakMap = typeof WeakMap === "function" ? WeakMap : CreateWeakMapPolyfill();
+      var registrySymbol = supportsSymbol ? Symbol.for("@reflect-metadata:registry") : void 0;
+      var metadataRegistry = GetOrCreateMetadataRegistry();
+      var metadataProvider = CreateMetadataProvider(metadataRegistry);
+      function decorate(decorators, target, propertyKey, attributes) {
+        if (!IsUndefined(propertyKey)) {
+          if (!IsArray(decorators))
+            throw new TypeError();
+          if (!IsObject(target))
+            throw new TypeError();
+          if (!IsObject(attributes) && !IsUndefined(attributes) && !IsNull(attributes))
+            throw new TypeError();
+          if (IsNull(attributes))
+            attributes = void 0;
+          propertyKey = ToPropertyKey(propertyKey);
+          return DecorateProperty(decorators, target, propertyKey, attributes);
+        } else {
+          if (!IsArray(decorators))
+            throw new TypeError();
+          if (!IsConstructor(target))
+            throw new TypeError();
+          return DecorateConstructor(decorators, target);
+        }
+      }
+      exporter("decorate", decorate);
+      function metadata(metadataKey, metadataValue) {
+        function decorator(target, propertyKey) {
+          if (!IsObject(target))
+            throw new TypeError();
+          if (!IsUndefined(propertyKey) && !IsPropertyKey(propertyKey))
+            throw new TypeError();
+          OrdinaryDefineOwnMetadata(metadataKey, metadataValue, target, propertyKey);
+        }
+        return decorator;
+      }
+      exporter("metadata", metadata);
+      function defineMetadata(metadataKey, metadataValue, target, propertyKey) {
+        if (!IsObject(target))
+          throw new TypeError();
+        if (!IsUndefined(propertyKey))
+          propertyKey = ToPropertyKey(propertyKey);
+        return OrdinaryDefineOwnMetadata(metadataKey, metadataValue, target, propertyKey);
+      }
+      exporter("defineMetadata", defineMetadata);
+      function hasMetadata(metadataKey, target, propertyKey) {
+        if (!IsObject(target))
+          throw new TypeError();
+        if (!IsUndefined(propertyKey))
+          propertyKey = ToPropertyKey(propertyKey);
+        return OrdinaryHasMetadata(metadataKey, target, propertyKey);
+      }
+      exporter("hasMetadata", hasMetadata);
+      function hasOwnMetadata(metadataKey, target, propertyKey) {
+        if (!IsObject(target))
+          throw new TypeError();
+        if (!IsUndefined(propertyKey))
+          propertyKey = ToPropertyKey(propertyKey);
+        return OrdinaryHasOwnMetadata(metadataKey, target, propertyKey);
+      }
+      exporter("hasOwnMetadata", hasOwnMetadata);
+      function getMetadata(metadataKey, target, propertyKey) {
+        if (!IsObject(target))
+          throw new TypeError();
+        if (!IsUndefined(propertyKey))
+          propertyKey = ToPropertyKey(propertyKey);
+        return OrdinaryGetMetadata(metadataKey, target, propertyKey);
+      }
+      exporter("getMetadata", getMetadata);
+      function getOwnMetadata(metadataKey, target, propertyKey) {
+        if (!IsObject(target))
+          throw new TypeError();
+        if (!IsUndefined(propertyKey))
+          propertyKey = ToPropertyKey(propertyKey);
+        return OrdinaryGetOwnMetadata(metadataKey, target, propertyKey);
+      }
+      exporter("getOwnMetadata", getOwnMetadata);
+      function getMetadataKeys(target, propertyKey) {
+        if (!IsObject(target))
+          throw new TypeError();
+        if (!IsUndefined(propertyKey))
+          propertyKey = ToPropertyKey(propertyKey);
+        return OrdinaryMetadataKeys(target, propertyKey);
+      }
+      exporter("getMetadataKeys", getMetadataKeys);
+      function getOwnMetadataKeys(target, propertyKey) {
+        if (!IsObject(target))
+          throw new TypeError();
+        if (!IsUndefined(propertyKey))
+          propertyKey = ToPropertyKey(propertyKey);
+        return OrdinaryOwnMetadataKeys(target, propertyKey);
+      }
+      exporter("getOwnMetadataKeys", getOwnMetadataKeys);
+      function deleteMetadata(metadataKey, target, propertyKey) {
+        if (!IsObject(target))
+          throw new TypeError();
+        if (!IsUndefined(propertyKey))
+          propertyKey = ToPropertyKey(propertyKey);
+        if (!IsObject(target))
+          throw new TypeError();
+        if (!IsUndefined(propertyKey))
+          propertyKey = ToPropertyKey(propertyKey);
+        var provider = GetMetadataProvider(
+          target,
+          propertyKey,
+          /*Create*/
+          false
+        );
+        if (IsUndefined(provider))
+          return false;
+        return provider.OrdinaryDeleteMetadata(metadataKey, target, propertyKey);
+      }
+      exporter("deleteMetadata", deleteMetadata);
+      function DecorateConstructor(decorators, target) {
+        for (var i = decorators.length - 1; i >= 0; --i) {
+          var decorator = decorators[i];
+          var decorated = decorator(target);
+          if (!IsUndefined(decorated) && !IsNull(decorated)) {
+            if (!IsConstructor(decorated))
+              throw new TypeError();
+            target = decorated;
+          }
+        }
+        return target;
+      }
+      function DecorateProperty(decorators, target, propertyKey, descriptor) {
+        for (var i = decorators.length - 1; i >= 0; --i) {
+          var decorator = decorators[i];
+          var decorated = decorator(target, propertyKey, descriptor);
+          if (!IsUndefined(decorated) && !IsNull(decorated)) {
+            if (!IsObject(decorated))
+              throw new TypeError();
+            descriptor = decorated;
+          }
+        }
+        return descriptor;
+      }
+      function OrdinaryHasMetadata(MetadataKey, O, P) {
+        var hasOwn2 = OrdinaryHasOwnMetadata(MetadataKey, O, P);
+        if (hasOwn2)
+          return true;
+        var parent = OrdinaryGetPrototypeOf(O);
+        if (!IsNull(parent))
+          return OrdinaryHasMetadata(MetadataKey, parent, P);
+        return false;
+      }
+      function OrdinaryHasOwnMetadata(MetadataKey, O, P) {
+        var provider = GetMetadataProvider(
+          O,
+          P,
+          /*Create*/
+          false
+        );
+        if (IsUndefined(provider))
+          return false;
+        return ToBoolean(provider.OrdinaryHasOwnMetadata(MetadataKey, O, P));
+      }
+      function OrdinaryGetMetadata(MetadataKey, O, P) {
+        var hasOwn2 = OrdinaryHasOwnMetadata(MetadataKey, O, P);
+        if (hasOwn2)
+          return OrdinaryGetOwnMetadata(MetadataKey, O, P);
+        var parent = OrdinaryGetPrototypeOf(O);
+        if (!IsNull(parent))
+          return OrdinaryGetMetadata(MetadataKey, parent, P);
+        return void 0;
+      }
+      function OrdinaryGetOwnMetadata(MetadataKey, O, P) {
+        var provider = GetMetadataProvider(
+          O,
+          P,
+          /*Create*/
+          false
+        );
+        if (IsUndefined(provider))
+          return;
+        return provider.OrdinaryGetOwnMetadata(MetadataKey, O, P);
+      }
+      function OrdinaryDefineOwnMetadata(MetadataKey, MetadataValue, O, P) {
+        var provider = GetMetadataProvider(
+          O,
+          P,
+          /*Create*/
+          true
+        );
+        provider.OrdinaryDefineOwnMetadata(MetadataKey, MetadataValue, O, P);
+      }
+      function OrdinaryMetadataKeys(O, P) {
+        var ownKeys = OrdinaryOwnMetadataKeys(O, P);
+        var parent = OrdinaryGetPrototypeOf(O);
+        if (parent === null)
+          return ownKeys;
+        var parentKeys = OrdinaryMetadataKeys(parent, P);
+        if (parentKeys.length <= 0)
+          return ownKeys;
+        if (ownKeys.length <= 0)
+          return parentKeys;
+        var set = new _Set();
+        var keys = [];
+        for (var _i = 0, ownKeys_1 = ownKeys; _i < ownKeys_1.length; _i++) {
+          var key = ownKeys_1[_i];
+          var hasKey = set.has(key);
+          if (!hasKey) {
+            set.add(key);
+            keys.push(key);
+          }
+        }
+        for (var _a2 = 0, parentKeys_1 = parentKeys; _a2 < parentKeys_1.length; _a2++) {
+          var key = parentKeys_1[_a2];
+          var hasKey = set.has(key);
+          if (!hasKey) {
+            set.add(key);
+            keys.push(key);
+          }
+        }
+        return keys;
+      }
+      function OrdinaryOwnMetadataKeys(O, P) {
+        var provider = GetMetadataProvider(
+          O,
+          P,
+          /*create*/
+          false
+        );
+        if (!provider) {
+          return [];
+        }
+        return provider.OrdinaryOwnMetadataKeys(O, P);
+      }
+      function Type(x) {
+        if (x === null)
+          return 1;
+        switch (typeof x) {
+          case "undefined":
+            return 0;
+          case "boolean":
+            return 2;
+          case "string":
+            return 3;
+          case "symbol":
+            return 4;
+          case "number":
+            return 5;
+          case "object":
+            return x === null ? 1 : 6;
+          default:
+            return 6;
+        }
+      }
+      function IsUndefined(x) {
+        return x === void 0;
+      }
+      function IsNull(x) {
+        return x === null;
+      }
+      function IsSymbol(x) {
+        return typeof x === "symbol";
+      }
+      function IsObject(x) {
+        return typeof x === "object" ? x !== null : typeof x === "function";
+      }
+      function ToPrimitive(input, PreferredType) {
+        switch (Type(input)) {
+          case 0:
+            return input;
+          case 1:
+            return input;
+          case 2:
+            return input;
+          case 3:
+            return input;
+          case 4:
+            return input;
+          case 5:
+            return input;
+        }
+        var hint = "string";
+        var exoticToPrim = GetMethod(input, toPrimitiveSymbol);
+        if (exoticToPrim !== void 0) {
+          var result = exoticToPrim.call(input, hint);
+          if (IsObject(result))
+            throw new TypeError();
+          return result;
+        }
+        return OrdinaryToPrimitive(input);
+      }
+      function OrdinaryToPrimitive(O, hint) {
+        var valueOf, result, toString_2;
+        {
+          var toString_1 = O.toString;
+          if (IsCallable(toString_1)) {
+            var result = toString_1.call(O);
+            if (!IsObject(result))
+              return result;
+          }
+          var valueOf = O.valueOf;
+          if (IsCallable(valueOf)) {
+            var result = valueOf.call(O);
+            if (!IsObject(result))
+              return result;
+          }
+        }
+        throw new TypeError();
+      }
+      function ToBoolean(argument) {
+        return !!argument;
+      }
+      function ToString(argument) {
+        return "" + argument;
+      }
+      function ToPropertyKey(argument) {
+        var key = ToPrimitive(argument);
+        if (IsSymbol(key))
+          return key;
+        return ToString(key);
+      }
+      function IsArray(argument) {
+        return Array.isArray ? Array.isArray(argument) : argument instanceof Object ? argument instanceof Array : Object.prototype.toString.call(argument) === "[object Array]";
+      }
+      function IsCallable(argument) {
+        return typeof argument === "function";
+      }
+      function IsConstructor(argument) {
+        return typeof argument === "function";
+      }
+      function IsPropertyKey(argument) {
+        switch (Type(argument)) {
+          case 3:
+            return true;
+          case 4:
+            return true;
+          default:
+            return false;
+        }
+      }
+      function SameValueZero(x, y) {
+        return x === y || x !== x && y !== y;
+      }
+      function GetMethod(V, P) {
+        var func = V[P];
+        if (func === void 0 || func === null)
+          return void 0;
+        if (!IsCallable(func))
+          throw new TypeError();
+        return func;
+      }
+      function GetIterator(obj) {
+        var method = GetMethod(obj, iteratorSymbol);
+        if (!IsCallable(method))
+          throw new TypeError();
+        var iterator = method.call(obj);
+        if (!IsObject(iterator))
+          throw new TypeError();
+        return iterator;
+      }
+      function IteratorValue(iterResult) {
+        return iterResult.value;
+      }
+      function IteratorStep(iterator) {
+        var result = iterator.next();
+        return result.done ? false : result;
+      }
+      function IteratorClose(iterator) {
+        var f = iterator["return"];
+        if (f)
+          f.call(iterator);
+      }
+      function OrdinaryGetPrototypeOf(O) {
+        var proto = Object.getPrototypeOf(O);
+        if (typeof O !== "function" || O === functionPrototype)
+          return proto;
+        if (proto !== functionPrototype)
+          return proto;
+        var prototype = O.prototype;
+        var prototypeProto = prototype && Object.getPrototypeOf(prototype);
+        if (prototypeProto == null || prototypeProto === Object.prototype)
+          return proto;
+        var constructor = prototypeProto.constructor;
+        if (typeof constructor !== "function")
+          return proto;
+        if (constructor === O)
+          return proto;
+        return constructor;
+      }
+      function CreateMetadataRegistry() {
+        var fallback;
+        if (!IsUndefined(registrySymbol) && typeof root.Reflect !== "undefined" && !(registrySymbol in root.Reflect) && typeof root.Reflect.defineMetadata === "function") {
+          fallback = CreateFallbackProvider(root.Reflect);
+        }
+        var first;
+        var second;
+        var rest;
+        var targetProviderMap = new _WeakMap();
+        var registry = {
+          registerProvider,
+          getProvider,
+          setProvider
+        };
+        return registry;
+        function registerProvider(provider) {
+          if (!Object.isExtensible(registry)) {
+            throw new Error("Cannot add provider to a frozen registry.");
+          }
+          switch (true) {
+            case fallback === provider:
+              break;
+            case IsUndefined(first):
+              first = provider;
+              break;
+            case first === provider:
+              break;
+            case IsUndefined(second):
+              second = provider;
+              break;
+            case second === provider:
+              break;
+            default:
+              if (rest === void 0)
+                rest = new _Set();
+              rest.add(provider);
+              break;
+          }
+        }
+        function getProviderNoCache(O, P) {
+          if (!IsUndefined(first)) {
+            if (first.isProviderFor(O, P))
+              return first;
+            if (!IsUndefined(second)) {
+              if (second.isProviderFor(O, P))
+                return first;
+              if (!IsUndefined(rest)) {
+                var iterator = GetIterator(rest);
+                while (true) {
+                  var next = IteratorStep(iterator);
+                  if (!next) {
+                    return void 0;
+                  }
+                  var provider = IteratorValue(next);
+                  if (provider.isProviderFor(O, P)) {
+                    IteratorClose(iterator);
+                    return provider;
+                  }
+                }
+              }
+            }
+          }
+          if (!IsUndefined(fallback) && fallback.isProviderFor(O, P)) {
+            return fallback;
+          }
+          return void 0;
+        }
+        function getProvider(O, P) {
+          var providerMap = targetProviderMap.get(O);
+          var provider;
+          if (!IsUndefined(providerMap)) {
+            provider = providerMap.get(P);
+          }
+          if (!IsUndefined(provider)) {
+            return provider;
+          }
+          provider = getProviderNoCache(O, P);
+          if (!IsUndefined(provider)) {
+            if (IsUndefined(providerMap)) {
+              providerMap = new _Map();
+              targetProviderMap.set(O, providerMap);
+            }
+            providerMap.set(P, provider);
+          }
+          return provider;
+        }
+        function hasProvider(provider) {
+          if (IsUndefined(provider))
+            throw new TypeError();
+          return first === provider || second === provider || !IsUndefined(rest) && rest.has(provider);
+        }
+        function setProvider(O, P, provider) {
+          if (!hasProvider(provider)) {
+            throw new Error("Metadata provider not registered.");
+          }
+          var existingProvider = getProvider(O, P);
+          if (existingProvider !== provider) {
+            if (!IsUndefined(existingProvider)) {
+              return false;
+            }
+            var providerMap = targetProviderMap.get(O);
+            if (IsUndefined(providerMap)) {
+              providerMap = new _Map();
+              targetProviderMap.set(O, providerMap);
+            }
+            providerMap.set(P, provider);
+          }
+          return true;
+        }
+      }
+      function GetOrCreateMetadataRegistry() {
+        var metadataRegistry2;
+        if (!IsUndefined(registrySymbol) && IsObject(root.Reflect) && Object.isExtensible(root.Reflect)) {
+          metadataRegistry2 = root.Reflect[registrySymbol];
+        }
+        if (IsUndefined(metadataRegistry2)) {
+          metadataRegistry2 = CreateMetadataRegistry();
+        }
+        if (!IsUndefined(registrySymbol) && IsObject(root.Reflect) && Object.isExtensible(root.Reflect)) {
+          Object.defineProperty(root.Reflect, registrySymbol, {
+            enumerable: false,
+            configurable: false,
+            writable: false,
+            value: metadataRegistry2
+          });
+        }
+        return metadataRegistry2;
+      }
+      function CreateMetadataProvider(registry) {
+        var metadata2 = new _WeakMap();
+        var provider = {
+          isProviderFor: function(O, P) {
+            var targetMetadata = metadata2.get(O);
+            if (IsUndefined(targetMetadata))
+              return false;
+            return targetMetadata.has(P);
+          },
+          OrdinaryDefineOwnMetadata: OrdinaryDefineOwnMetadata2,
+          OrdinaryHasOwnMetadata: OrdinaryHasOwnMetadata2,
+          OrdinaryGetOwnMetadata: OrdinaryGetOwnMetadata2,
+          OrdinaryOwnMetadataKeys: OrdinaryOwnMetadataKeys2,
+          OrdinaryDeleteMetadata
+        };
+        metadataRegistry.registerProvider(provider);
+        return provider;
+        function GetOrCreateMetadataMap(O, P, Create) {
+          var targetMetadata = metadata2.get(O);
+          var createdTargetMetadata = false;
+          if (IsUndefined(targetMetadata)) {
+            if (!Create)
+              return void 0;
+            targetMetadata = new _Map();
+            metadata2.set(O, targetMetadata);
+            createdTargetMetadata = true;
+          }
+          var metadataMap = targetMetadata.get(P);
+          if (IsUndefined(metadataMap)) {
+            if (!Create)
+              return void 0;
+            metadataMap = new _Map();
+            targetMetadata.set(P, metadataMap);
+            if (!registry.setProvider(O, P, provider)) {
+              targetMetadata.delete(P);
+              if (createdTargetMetadata) {
+                metadata2.delete(O);
+              }
+              throw new Error("Wrong provider for target.");
+            }
+          }
+          return metadataMap;
+        }
+        function OrdinaryHasOwnMetadata2(MetadataKey, O, P) {
+          var metadataMap = GetOrCreateMetadataMap(
+            O,
+            P,
+            /*Create*/
+            false
+          );
+          if (IsUndefined(metadataMap))
+            return false;
+          return ToBoolean(metadataMap.has(MetadataKey));
+        }
+        function OrdinaryGetOwnMetadata2(MetadataKey, O, P) {
+          var metadataMap = GetOrCreateMetadataMap(
+            O,
+            P,
+            /*Create*/
+            false
+          );
+          if (IsUndefined(metadataMap))
+            return void 0;
+          return metadataMap.get(MetadataKey);
+        }
+        function OrdinaryDefineOwnMetadata2(MetadataKey, MetadataValue, O, P) {
+          var metadataMap = GetOrCreateMetadataMap(
+            O,
+            P,
+            /*Create*/
+            true
+          );
+          metadataMap.set(MetadataKey, MetadataValue);
+        }
+        function OrdinaryOwnMetadataKeys2(O, P) {
+          var keys = [];
+          var metadataMap = GetOrCreateMetadataMap(
+            O,
+            P,
+            /*Create*/
+            false
+          );
+          if (IsUndefined(metadataMap))
+            return keys;
+          var keysObj = metadataMap.keys();
+          var iterator = GetIterator(keysObj);
+          var k = 0;
+          while (true) {
+            var next = IteratorStep(iterator);
+            if (!next) {
+              keys.length = k;
+              return keys;
+            }
+            var nextValue = IteratorValue(next);
+            try {
+              keys[k] = nextValue;
+            } catch (e) {
+              try {
+                IteratorClose(iterator);
+              } finally {
+                throw e;
+              }
+            }
+            k++;
+          }
+        }
+        function OrdinaryDeleteMetadata(MetadataKey, O, P) {
+          var metadataMap = GetOrCreateMetadataMap(
+            O,
+            P,
+            /*Create*/
+            false
+          );
+          if (IsUndefined(metadataMap))
+            return false;
+          if (!metadataMap.delete(MetadataKey))
+            return false;
+          if (metadataMap.size === 0) {
+            var targetMetadata = metadata2.get(O);
+            if (!IsUndefined(targetMetadata)) {
+              targetMetadata.delete(P);
+              if (targetMetadata.size === 0) {
+                metadata2.delete(targetMetadata);
+              }
+            }
+          }
+          return true;
+        }
+      }
+      function CreateFallbackProvider(reflect) {
+        var defineMetadata2 = reflect.defineMetadata, hasOwnMetadata2 = reflect.hasOwnMetadata, getOwnMetadata2 = reflect.getOwnMetadata, getOwnMetadataKeys2 = reflect.getOwnMetadataKeys, deleteMetadata2 = reflect.deleteMetadata;
+        var metadataOwner = new _WeakMap();
+        var provider = {
+          isProviderFor: function(O, P) {
+            var metadataPropertySet = metadataOwner.get(O);
+            if (!IsUndefined(metadataPropertySet) && metadataPropertySet.has(P)) {
+              return true;
+            }
+            if (getOwnMetadataKeys2(O, P).length) {
+              if (IsUndefined(metadataPropertySet)) {
+                metadataPropertySet = new _Set();
+                metadataOwner.set(O, metadataPropertySet);
+              }
+              metadataPropertySet.add(P);
+              return true;
+            }
+            return false;
+          },
+          OrdinaryDefineOwnMetadata: defineMetadata2,
+          OrdinaryHasOwnMetadata: hasOwnMetadata2,
+          OrdinaryGetOwnMetadata: getOwnMetadata2,
+          OrdinaryOwnMetadataKeys: getOwnMetadataKeys2,
+          OrdinaryDeleteMetadata: deleteMetadata2
+        };
+        return provider;
+      }
+      function GetMetadataProvider(O, P, Create) {
+        var registeredProvider = metadataRegistry.getProvider(O, P);
+        if (!IsUndefined(registeredProvider)) {
+          return registeredProvider;
+        }
+        if (Create) {
+          if (metadataRegistry.setProvider(O, P, metadataProvider)) {
+            return metadataProvider;
+          }
+          throw new Error("Illegal state.");
+        }
+        return void 0;
+      }
+      function CreateMapPolyfill() {
+        var cacheSentinel = {};
+        var arraySentinel = [];
+        var MapIterator = (
+          /** @class */
+          function() {
+            function MapIterator2(keys, values, selector) {
+              this._index = 0;
+              this._keys = keys;
+              this._values = values;
+              this._selector = selector;
+            }
+            MapIterator2.prototype["@@iterator"] = function() {
+              return this;
+            };
+            MapIterator2.prototype[iteratorSymbol] = function() {
+              return this;
+            };
+            MapIterator2.prototype.next = function() {
+              var index = this._index;
+              if (index >= 0 && index < this._keys.length) {
+                var result = this._selector(this._keys[index], this._values[index]);
+                if (index + 1 >= this._keys.length) {
+                  this._index = -1;
+                  this._keys = arraySentinel;
+                  this._values = arraySentinel;
+                } else {
+                  this._index++;
+                }
+                return { value: result, done: false };
+              }
+              return { value: void 0, done: true };
+            };
+            MapIterator2.prototype.throw = function(error) {
+              if (this._index >= 0) {
+                this._index = -1;
+                this._keys = arraySentinel;
+                this._values = arraySentinel;
+              }
+              throw error;
+            };
+            MapIterator2.prototype.return = function(value) {
+              if (this._index >= 0) {
+                this._index = -1;
+                this._keys = arraySentinel;
+                this._values = arraySentinel;
+              }
+              return { value, done: true };
+            };
+            return MapIterator2;
+          }()
+        );
+        var Map2 = (
+          /** @class */
+          function() {
+            function Map3() {
+              this._keys = [];
+              this._values = [];
+              this._cacheKey = cacheSentinel;
+              this._cacheIndex = -2;
+            }
+            Object.defineProperty(Map3.prototype, "size", {
+              get: function() {
+                return this._keys.length;
+              },
+              enumerable: true,
+              configurable: true
+            });
+            Map3.prototype.has = function(key) {
+              return this._find(
+                key,
+                /*insert*/
+                false
+              ) >= 0;
+            };
+            Map3.prototype.get = function(key) {
+              var index = this._find(
+                key,
+                /*insert*/
+                false
+              );
+              return index >= 0 ? this._values[index] : void 0;
+            };
+            Map3.prototype.set = function(key, value) {
+              var index = this._find(
+                key,
+                /*insert*/
+                true
+              );
+              this._values[index] = value;
+              return this;
+            };
+            Map3.prototype.delete = function(key) {
+              var index = this._find(
+                key,
+                /*insert*/
+                false
+              );
+              if (index >= 0) {
+                var size = this._keys.length;
+                for (var i = index + 1; i < size; i++) {
+                  this._keys[i - 1] = this._keys[i];
+                  this._values[i - 1] = this._values[i];
+                }
+                this._keys.length--;
+                this._values.length--;
+                if (SameValueZero(key, this._cacheKey)) {
+                  this._cacheKey = cacheSentinel;
+                  this._cacheIndex = -2;
+                }
+                return true;
+              }
+              return false;
+            };
+            Map3.prototype.clear = function() {
+              this._keys.length = 0;
+              this._values.length = 0;
+              this._cacheKey = cacheSentinel;
+              this._cacheIndex = -2;
+            };
+            Map3.prototype.keys = function() {
+              return new MapIterator(this._keys, this._values, getKey);
+            };
+            Map3.prototype.values = function() {
+              return new MapIterator(this._keys, this._values, getValue);
+            };
+            Map3.prototype.entries = function() {
+              return new MapIterator(this._keys, this._values, getEntry);
+            };
+            Map3.prototype["@@iterator"] = function() {
+              return this.entries();
+            };
+            Map3.prototype[iteratorSymbol] = function() {
+              return this.entries();
+            };
+            Map3.prototype._find = function(key, insert) {
+              if (!SameValueZero(this._cacheKey, key)) {
+                this._cacheIndex = -1;
+                for (var i = 0; i < this._keys.length; i++) {
+                  if (SameValueZero(this._keys[i], key)) {
+                    this._cacheIndex = i;
+                    break;
+                  }
+                }
+              }
+              if (this._cacheIndex < 0 && insert) {
+                this._cacheIndex = this._keys.length;
+                this._keys.push(key);
+                this._values.push(void 0);
+              }
+              return this._cacheIndex;
+            };
+            return Map3;
+          }()
+        );
+        return Map2;
+        function getKey(key, _) {
+          return key;
+        }
+        function getValue(_, value) {
+          return value;
+        }
+        function getEntry(key, value) {
+          return [key, value];
+        }
+      }
+      function CreateSetPolyfill() {
+        var Set2 = (
+          /** @class */
+          function() {
+            function Set3() {
+              this._map = new _Map();
+            }
+            Object.defineProperty(Set3.prototype, "size", {
+              get: function() {
+                return this._map.size;
+              },
+              enumerable: true,
+              configurable: true
+            });
+            Set3.prototype.has = function(value) {
+              return this._map.has(value);
+            };
+            Set3.prototype.add = function(value) {
+              return this._map.set(value, value), this;
+            };
+            Set3.prototype.delete = function(value) {
+              return this._map.delete(value);
+            };
+            Set3.prototype.clear = function() {
+              this._map.clear();
+            };
+            Set3.prototype.keys = function() {
+              return this._map.keys();
+            };
+            Set3.prototype.values = function() {
+              return this._map.keys();
+            };
+            Set3.prototype.entries = function() {
+              return this._map.entries();
+            };
+            Set3.prototype["@@iterator"] = function() {
+              return this.keys();
+            };
+            Set3.prototype[iteratorSymbol] = function() {
+              return this.keys();
+            };
+            return Set3;
+          }()
+        );
+        return Set2;
+      }
+      function CreateWeakMapPolyfill() {
+        var UUID_SIZE = 16;
+        var keys = HashMap.create();
+        var rootKey = CreateUniqueKey();
+        return (
+          /** @class */
+          function() {
+            function WeakMap2() {
+              this._key = CreateUniqueKey();
+            }
+            WeakMap2.prototype.has = function(target) {
+              var table = GetOrCreateWeakMapTable(
+                target,
+                /*create*/
+                false
+              );
+              return table !== void 0 ? HashMap.has(table, this._key) : false;
+            };
+            WeakMap2.prototype.get = function(target) {
+              var table = GetOrCreateWeakMapTable(
+                target,
+                /*create*/
+                false
+              );
+              return table !== void 0 ? HashMap.get(table, this._key) : void 0;
+            };
+            WeakMap2.prototype.set = function(target, value) {
+              var table = GetOrCreateWeakMapTable(
+                target,
+                /*create*/
+                true
+              );
+              table[this._key] = value;
+              return this;
+            };
+            WeakMap2.prototype.delete = function(target) {
+              var table = GetOrCreateWeakMapTable(
+                target,
+                /*create*/
+                false
+              );
+              return table !== void 0 ? delete table[this._key] : false;
+            };
+            WeakMap2.prototype.clear = function() {
+              this._key = CreateUniqueKey();
+            };
+            return WeakMap2;
+          }()
+        );
+        function CreateUniqueKey() {
+          var key;
+          do
+            key = "@@WeakMap@@" + CreateUUID();
+          while (HashMap.has(keys, key));
+          keys[key] = true;
+          return key;
+        }
+        function GetOrCreateWeakMapTable(target, create) {
+          if (!hasOwn.call(target, rootKey)) {
+            if (!create)
+              return void 0;
+            Object.defineProperty(target, rootKey, { value: HashMap.create() });
+          }
+          return target[rootKey];
+        }
+        function FillRandomBytes(buffer, size) {
+          for (var i = 0; i < size; ++i)
+            buffer[i] = Math.random() * 255 | 0;
+          return buffer;
+        }
+        function GenRandomBytes(size) {
+          if (typeof Uint8Array === "function") {
+            var array = new Uint8Array(size);
+            if (typeof crypto !== "undefined") {
+              crypto.getRandomValues(array);
+            } else if (typeof msCrypto !== "undefined") {
+              msCrypto.getRandomValues(array);
+            } else {
+              FillRandomBytes(array, size);
+            }
+            return array;
+          }
+          return FillRandomBytes(new Array(size), size);
+        }
+        function CreateUUID() {
+          var data = GenRandomBytes(UUID_SIZE);
+          data[6] = data[6] & 79 | 64;
+          data[8] = data[8] & 191 | 128;
+          var result = "";
+          for (var offset = 0; offset < UUID_SIZE; ++offset) {
+            var byte = data[offset];
+            if (offset === 4 || offset === 6 || offset === 8)
+              result += "-";
+            if (byte < 16)
+              result += "0";
+            result += byte.toString(16).toLowerCase();
+          }
+          return result;
+        }
+      }
+      function MakeDictionary(obj) {
+        obj.__ = void 0;
+        delete obj.__;
+        return obj;
+      }
+    });
+  })(Reflect2 || (Reflect2 = {}));
+  return _Reflect;
+}
+require_Reflect();
+var __defProp$b = Object.defineProperty;
+var __name = (target, value) => __defProp$b(target, "name", { value, configurable: true });
+var HelperUtils = (_a = class {
+  /**
+   * Fetches existing metadata or creates new metadata for a given target and appender.
+   *
+   * This method retrieves metadata associated with the target's constructor using the specified appender.
+   * If the metadata does not exist, it creates a new Map, defines it as metadata, and returns it.
+   * If the metadata already exists, it simply returns the existing Map.
+   *
+   * @template T - The type of the metadata value.
+   * @param {any} target - The target object to fetch or create metadata for.
+   * @param {string} appender - The appender string used to construct the metadata key.
+   * @returns {Map<string, T>} - The metadata Map associated with the target and appender.
+   */
+  static fetchOrCreate(target, appender) {
+    const key = `${target.constructor.name}:${appender}`;
+    let data;
+    if (!Reflect.hasMetadata(key, target)) {
+      data = /* @__PURE__ */ new Map();
+      Reflect.defineMetadata(key, data, target);
+    }
+    data = Reflect.getMetadata(key, target);
+    return data;
+  }
+  /**
+   * Binds reactive properties to an element based on metadata.
+   *
+   * This function retrieves metadata associated with the element to find property details.
+   * It then defines getter and setter methods for each property to enable reactivity.
+   * When a property is set, the element's `updateHTML` method is called to re-render the component.
+   *
+   * The function also checks for any watchers associated with the property and calls them if they exist.
+   *
+   * @function bindReactive
+   * @param {any} element - The element to bind reactive properties to.
+   *
+   * @example
+   * // Assuming `element` is an instance of a class that extends `BaseElement`
+   * bindReactive(element);
+   *
+   * // Now, when a property defined in the metadata is set, the element's `updateHTML` method will be called.
+   * element.someProperty = 'newValue'; // This will trigger element.updateHTML()
+   */
+  static bindReactive(element) {
+    let data = _a.fetchOrCreate(element, "Property");
+    data.forEach((value) => {
+      const propertyKey = `_${value.prototype}`;
+      Object.defineProperty(element, value.prototype, {
+        get() {
+          return element[propertyKey];
+        },
+        set(v) {
+          if (element[propertyKey] !== v) {
+            element[propertyKey] = v;
+            element.setAttribute(value.name, v);
+            const watchers = _a.fetchOrCreate(element, `Watcher:${value.prototype}`);
+            if (watchers && watchers.size > 0) {
+              watchers.forEach((item) => {
+                if (element[item.name] && typeof element[item.name] === "function") {
+                  item.method.call(element);
+                }
+              });
+            }
+          }
+        },
+        enumerable: true,
+        configurable: true
+      });
+    });
+    element.reactive = true;
+  }
+  /**
+   * Extracts metadata for a given decorator from a class.
+   *
+   * @param {Function} targetClass - The class from which to extract metadata.
+   * @param {string} decoratorName - The name of the decorator.
+   * @returns {any} - The metadata associated with the specified decorator.
+   */
+  static getComponentMetadata(targetClass, decoratorName) {
+    if (Reflect.hasOwnMetadata(decoratorName, targetClass)) {
+      return Reflect.getOwnMetadata(decoratorName, targetClass);
+    }
+  }
+}, __name(_a, "HelperUtils"), _a);
+function AfterInitDecorator() {
+  return function(target, propertyKey, descriptor) {
+    let data = HelperUtils.fetchOrCreate(target, "After");
+    data.set(propertyKey.toString(), descriptor.value);
+    return descriptor;
+  };
+}
+__name(AfterInitDecorator, "AfterInitDecorator");
+function BeforeInitDecorator() {
+  return function(target, propertyKey, descriptor) {
+    let data = HelperUtils.fetchOrCreate(target, "Before");
+    data.set(propertyKey.toString(), descriptor.value);
+    return descriptor;
+  };
+}
+__name(BeforeInitDecorator, "BeforeInitDecorator");
+function BindEventDecorator(config) {
+  return function(target, propertyKey, descriptor) {
+    let data = HelperUtils.fetchOrCreate(target, "Bind");
+    data.set(propertyKey.toString(), config);
+    return descriptor;
+  };
+}
+__name(BindEventDecorator, "BindEventDecorator");
+function ComponentDecorator(config) {
+  return function(target) {
+    const methodNames = Object.getOwnPropertyNames(target.prototype).filter((prop) => typeof target.prototype[prop] === "function" && prop !== "constructor");
+    const methods = methodNames.map((name) => ({
+      name,
+      method: target.prototype[name]
+    }));
+    Reflect.defineMetadata(target.name, methods, target);
+    if (!customElements.get(config.selector)) {
+      customElements.define(config.selector, target);
+    }
+    Reflect.defineMetadata(target.name + ":shadow", config.shadow, target);
+    Reflect.defineMetadata("Component", config, target);
+  };
+}
+__name(ComponentDecorator, "ComponentDecorator");
+function PropertyDecorator(config) {
+  return function(target, propertyKey) {
+    if (!target.constructor.observedAttributes) {
+      target.constructor.observedAttributes = [];
+    }
+    target.constructor.observedAttributes.push(config.name);
+    let data = HelperUtils.fetchOrCreate(target, "Property");
+    data.set(config.name, {
+      name: config.name,
+      prototype: propertyKey.toString(),
+      default: config.default,
+      type: config.type
+    });
+  };
+}
+__name(PropertyDecorator, "PropertyDecorator");
+var StringType = {
+  process: /* @__PURE__ */ __name((value) => {
+    if (value === null || value === void 0) {
+      throw new Error(`Value is not of given type: ${value}`);
+    }
+    return String(value);
+  }, "process")
+};
+var BooleanType = {
+  process: /* @__PURE__ */ __name((value) => {
+    if (value === "false") {
+      return false;
+    } else if (value === "true") {
+      return true;
+    }
+    throw new Error(`Value is not of type boolean: ${value}`);
+  }, "process")
+};
+var EventType = /* @__PURE__ */ function(EventType2) {
+  EventType2[EventType2["WINDOW"] = 0] = "WINDOW";
+  EventType2[EventType2["ROOT"] = 1] = "ROOT";
+  return EventType2;
+}(EventType || {});
+function EventListenerDecorator(config) {
+  return function(target, propertyKey, descriptor) {
+    const originalConnectedCallback = target.connectedCallback;
+    target.connectedCallback = function() {
+      if (originalConnectedCallback) {
+        originalConnectedCallback.apply(this);
+      }
+      if (config.type === EventType.WINDOW) {
+        window.addEventListener(config.name, descriptor.value.bind(this));
+      } else if (config.type === EventType.ROOT) {
+        this.addEventListener(config.name, descriptor.value.bind(this));
+      }
+    };
+    const originalDisconnectedCallback = target.disconnectedCallback;
+    target.disconnectedCallback = function() {
+      if (config.type === EventType.WINDOW) {
+        window.removeEventListener(config.name, descriptor.value.bind(this));
+      } else if (config.type === EventType.ROOT) {
+        this.removeEventListener(config.name, descriptor.value.bind(this));
+      }
+      if (originalDisconnectedCallback) {
+        originalDisconnectedCallback.apply(this);
+      }
+    };
+    return descriptor;
+  };
+}
+__name(EventListenerDecorator, "EventListenerDecorator");
+function ExposeDecorator() {
+  return function(target, propertyKey, descriptor) {
+    let data = HelperUtils.fetchOrCreate(target, "Exposed");
+    data.set(propertyKey.toString(), {
+      name: propertyKey.toString(),
+      method: descriptor.value
+    });
+    return descriptor;
+  };
+}
+__name(ExposeDecorator, "ExposeDecorator");
+function EventDecorator() {
+  return function(target, propertyKey) {
+    let data = HelperUtils.fetchOrCreate(target, "Output");
+    const event = `on${capitalize(propertyKey.toString())}`;
+    const details = {
+      eventName: event,
+      propertyName: propertyKey.toString()
+    };
+    data.set(propertyKey.toString(), details);
+  };
+}
+__name(EventDecorator, "EventDecorator");
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+__name(capitalize, "capitalize");
+function HostListenerDecorator(options) {
+  return function(target, propertyKey, descriptor) {
+    const data = HelperUtils.fetchOrCreate(target, "Host");
+    data.set(propertyKey.toString(), {
+      event: options.event,
+      name: propertyKey.toString(),
+      method: descriptor.value
+    });
+    return descriptor;
+  };
+}
+__name(HostListenerDecorator, "HostListenerDecorator");
+function WindowListenerDecorator(config) {
+  return function(target, propertyKey, descriptor) {
+    const data = HelperUtils.fetchOrCreate(target, "Window");
+    data.set(propertyKey.toString(), {
+      name: propertyKey.toString(),
+      method: descriptor.value,
+      event: config.event
+    });
+  };
+}
+__name(WindowListenerDecorator, "WindowListenerDecorator");
+var GeneralUtils = (_b = class {
+  static convertToArray(value) {
+    return Array.isArray(value) ? value : [
+      value
+    ];
+  }
+}, __name(_b, "GeneralUtils"), _b);
+function WatcherDecorator(value) {
+  return function(target, propertyKey, descriptor) {
+    if (value) {
+      const properties = GeneralUtils.convertToArray(value);
+      properties.forEach((property) => {
+        const data = HelperUtils.fetchOrCreate(target, `Watcher:${property}`);
+        data.set(propertyKey.toString(), {
+          name: propertyKey.toString(),
+          method: descriptor.value,
+          value: property
+        });
+      });
+    }
+    return descriptor;
+  };
+}
+__name(WatcherDecorator, "WatcherDecorator");
+function HTML(strings, ...values) {
+  let str = "";
+  strings.forEach((string, i) => {
+    str += string + (values[i] || "");
+  });
+  return str;
+}
+__name(HTML, "HTML");
+var Sanitizer = (_c = class {
+  /**
+   * Sanitizes a given value based on the specified property type.
+   *
+   * This method processes the incoming value using the provided `PropertyType` to ensure
+   * it conforms to the expected type. The `PropertyType` defines a `process` method that
+   * handles the conversion or validation of the value.
+   *
+   * @param {any} newValue - The new value to be sanitized.
+   * @param {PropertyType<any>} type - The property type used to process the value.
+   * @returns {any} - The sanitized value, converted to the expected type.
+   *
+   * @example
+   * // Assuming `NumberType` is a PropertyType that converts values to numbers
+   * const sanitizedValue = Sanitizer.sanitize('123', NumberType);
+   * console.log(sanitizedValue); // Output: 123
+   *
+   * @example
+   * // Assuming `ObjectType` is a PropertyType that converts JSON strings to objects
+   * interface ExampleObject {
+   *     key: string;
+   *     value: number;
+   * }
+   * const exampleObjectType = ObjectType<ExampleObject>();
+   * const sanitizedObject = Sanitizer.sanitize('{"key": "example", "value": 42}', exampleObjectType);
+   * console.log(sanitizedObject); // Output: { key: "example", value: 42 }
+   */
+  static sanitize(newValue, type) {
+    return type.process(newValue);
+  }
+}, __name(_c, "Sanitizer"), _c);
+var EventEmitter = (_d = class {
+  /**
+   * Creates an instance of `EventEmitter`.
+   *
+   * @param {string} name - The name of the event to be emitted.
+   */
+  constructor(name) {
+    __publicField(this, "name");
+    this.name = name;
+  }
+  /**
+   * Emits an event with the specified data.
+   *
+   * This method creates a `CustomEvent` with the provided data and dispatches it.
+   * If a root element is specified, the event is dispatched from that element.
+   * Otherwise, the event is dispatched from the global window object.
+   *
+   * @param {T} data - The data to be included in the event's detail.
+   * @param {HTMLElement} [root] - The root element from which to dispatch the event. If not provided, the event is dispatched from the window.
+   */
+  emit(data, root) {
+    const event = new CustomEvent(this.name, {
+      bubbles: true,
+      detail: data
+    });
+    if (root) {
+      root.dispatchEvent(event);
+    } else window.dispatchEvent(event);
+  }
+}, __name(_d, "EventEmitter"), _d);
+var BaseElement = (_e = class extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "isShadow");
+    __publicField(this, "shadowRoot");
+    __publicField(this, "reactive", false);
+  }
+  /**
+   * Lifecycle method called when the component is added to the DOM.
+   *
+   * This method performs the following tasks:
+   * 1. Executes methods annotated with `@BeforeInit` decorator.
+   * 2. Exposes methods annotated with `@Expose` decorator to the global scope.
+   * 3. Binds the component's HTML content and events.
+   * 4. Binds the component's internal methods to their corresponding events.
+   * 5. Binds event emitters to the component's properties.
+   * 6. Binds the event related to host to its internal methods.
+   * 7. Bind the event on window to its internal methods.
+   * 8. Executed methods annotated with `@AfterInit`
+   * @method connectedCallback
+   */
+  connectedCallback() {
+    this.handleBeforeInit();
+    this.bindHTML();
+    this.exposeMethods();
+    this.bindMethods();
+    this.bindEmitter();
+    this.bindHostEvents();
+    this.bindWindowEvents();
+    this.handleAfterInit();
+  }
+  disconnectedCallback() {
+    this.unbindMethods();
+  }
+  /**
+   * Updates the component's rendered HTML.
+   *
+   * This method re-renders the component's HTML content based on the current state.
+   * If the component uses a shadow DOM, it updates the shadow root's inner HTML.
+   * Otherwise, it updates the component's inner HTML. After updating the HTML,
+   * it re-binds the component's methods to their corresponding events.
+   *
+   * @method updateHTML
+   */
+  updateHTML() {
+    if (this.isShadow && this.shadowRoot) {
+      this.shadowRoot.innerHTML = this.render();
+    } else {
+      this.innerHTML = this.render();
+    }
+    this.bindMethods();
+  }
+  /**
+   * Called when an observed attribute changes.
+   *
+   * This method is invoked when one of the component's attributes, specified in the `observedAttributes` array, changes.
+   * It updates the component's properties and re-renders the component if the new value is different from the old value.
+   *
+   * @method attributeChangedCallback
+   * @param {string} name - The name of the attribute that changed.
+   * @param {string} oldValue - The old value of the attribute.
+   * @param {string} newValue - The new value of the attribute.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.reactive) {
+      HelperUtils.bindReactive(this);
+    }
+    if (!newValue) {
+      return;
+    }
+    if (newValue !== oldValue) {
+      this.bindProperty(name, newValue);
+      this.updateHTML();
+    }
+  }
+  /**
+   * Sets the value of an attribute on the component and updates the corresponding property.
+   *
+   * This method overrides the default `setAttribute` method to ensure that the component's
+   * property is updated whenever an attribute is set. It assigns the provided value to the
+   * property with the same name as the attribute and then calls the superclasses `setAttribute`
+   * method to update the attribute on the DOM element.
+   *
+   * @param {number} qualifiedName - The name of the attribute to set.
+   * @param {number} value - The value to assign to the attribute.
+   */
+  setAttribute(qualifiedName, value) {
+    super.setAttribute(qualifiedName, value);
+  }
+  /**
+   * Executes methods annotated with `@BeforeInit` decorator before the component initializes.
+   *
+   * This method retrieves metadata associated with the component's constructor
+   * to find methods marked with the `@BeforeInit` decorator. It then invokes the
+   * `beforeInit` method if it exists in the metadata, allowing for any setup
+   * or initialization tasks to be performed before the component is fully initialized.
+   *
+   * @method handleBeforeInit
+   */
+  handleBeforeInit() {
+    let data = HelperUtils.fetchOrCreate(this, "Before");
+    const fun = data.get("beforeViewInit");
+    if (fun) {
+      fun.apply(this);
+    }
+  }
+  /**
+   * Executes methods annotated with `@AfterInit` decorator after the component initializes.
+   *
+   * This method retrieves metadata associated with the component's constructor
+   * to find methods marked with the `@AfterInit` decorator. It then invokes the
+   * `afterInit` method if it exists in the metadata, allowing for any setup
+   * or initialization tasks to be performed after the component is fully initialized.
+   *
+   * @method handleAfterInit
+   */
+  handleAfterInit() {
+    let data = HelperUtils.fetchOrCreate(this, "After");
+    let fun = data.get("afterViewInit");
+    if (fun) {
+      fun.apply(this);
+    }
+  }
+  /**
+   * Binds the component's `HTML` content and events based on metadata.
+   *
+   * This method retrieves metadata associated with the component's constructor
+   * to determine if the component should use a shadow DOM. It then sets the inner
+   * HTML of the component or its shadow root to the result of the `render` method.
+   * After setting the HTML, it binds events specified in the component's inner HTML
+   * to their corresponding methods.
+   *
+   * @method bindHTML
+   */
+  bindHTML() {
+    let methods = Reflect.getMetadata(this.constructor.name, this.constructor);
+    this.isShadow = Reflect.getMetadata(this.constructor.name + ":shadow", this.constructor);
+    if (this.isShadow) {
+      this.shadowRoot = this.attachShadow({
+        mode: "open"
+      });
+    }
+    if (this.isShadow) {
+      if (this.shadowRoot) {
+        this.shadowRoot.innerHTML = this.render();
+        this.bindEvents(this, methods);
+      }
+    } else {
+      this.innerHTML = this.render();
+      this.bindEvents(this, methods);
+    }
+  }
+  /**
+   * Binds events specified in the component's inner HTML to their corresponding methods.
+   *
+   * This method searches the component's inner HTML for event bindings in the format
+   * `@event="{method}"`. It then attaches event listeners to the elements matching
+   * these bindings, ensuring that the specified methods are called when the events
+   * are triggered.
+   *
+   * @method bindEvents
+   * @param {HTMLElement | ShadowRoot} root - The root element to search for event bindings.
+   * @param {MethodDetails[]} methods - An array of method details to bind to the events.
+   */
+  bindEvents(root, methods) {
+    const eventPattern = /@(\w+)="{(\w+)}"/g;
+    for (const match of root.innerHTML.matchAll(eventPattern)) {
+      const eventName = match[1];
+      const methodName = match[2];
+      const methodDetail = methods.find((m) => m.name === methodName);
+      if (methodDetail) {
+        const elements = root.querySelectorAll(`[\\@${eventName}="{${methodName}}"]`);
+        elements.forEach((element) => {
+          element.addEventListener(eventName, methodDetail.method.bind(this));
+        });
+      }
+    }
+  }
+  /**
+   * Binds the component's internal events to its methods based on metadata.
+   *
+   * This method retrieves metadata associated with the component's constructor
+   * to find event binding configurations. It then binds the specified methods
+   * to the corresponding events on the elements identified by the metadata.
+   *
+   * @method bindMethods
+   */
+  bindMethods() {
+    let data = HelperUtils.fetchOrCreate(this, "Bind");
+    if (data) {
+      data.forEach((config, methodName) => {
+        const element = this.isShadow ? this.shadowRoot.querySelector(config.id) : this.querySelector(config.id);
+        if (element) {
+          const method = this[methodName];
+          if (config.params) {
+            const boundMethodWithParams = /* @__PURE__ */ __name((event, ...args) => method.apply(this, event, [
+              ...config.params,
+              ...args
+            ]), "boundMethodWithParams");
+            element.addEventListener(config.event, boundMethodWithParams);
+          } else {
+            element.addEventListener(config.event, method.bind(this));
+          }
+        }
+      });
+    }
+  }
+  /**
+   * Unbinds component's methods from their associated events.
+   *
+   * This method retrieves metadata associated with the component's constructor
+   * to find methods that were previously bound to events. It then removes the
+   * event listeners for these methods, effectively unbinding them.
+   *
+   * @method unbindMethods
+   */
+  unbindMethods() {
+    const data = HelperUtils.fetchOrCreate(this, "Bind");
+    if (!data) return;
+    data.forEach((config) => {
+      const element = this.querySelector(config.id);
+      if (!element) return;
+      element.removeEventListener(config.event, () => {
+      });
+    });
+  }
+  /**
+   * Exposes component methods to the global scope.
+   *
+   * This method retrieves metadata associated with the component's constructor
+   * to find methods marked for exposure. It then binds these methods to the global
+   * `window` object, making them accessible globally.
+   *
+   * @method exposeMethods
+   */
+  exposeMethods() {
+    let data = HelperUtils.fetchOrCreate(this, "Exposed");
+    if (data) {
+      data.forEach((value, key) => {
+        if (typeof window !== "undefined") {
+          if (!window[key]) {
+            window[key] = value.method.bind(this);
+          }
+        }
+      });
+    }
+  }
+  /**
+   * Binds a component's property to a new value based on metadata.
+   *
+   * This method is called by `attributeChangedCallback` to update the component's
+   * properties when an attribute changes. It retrieves metadata associated with
+   * the component's constructor to find property details and assigns the new value
+   * to the corresponding property.
+   *
+   * @method bindProperty
+   * @param {string} name - The name of the attribute that changed.
+   * @param {string} value - The new value of the attribute.
+   */
+  bindProperty(name, value) {
+    let data = HelperUtils.fetchOrCreate(this, "Property");
+    if (data) {
+      let property = data.get(name);
+      if (property) {
+        this[property.prototype] = Sanitizer.sanitize(value, property.type);
+        return;
+      }
+    }
+  }
+  /**
+   * Binds event emitters to the component's properties based on metadata.
+   *
+   * This method retrieves metadata associated with the component's constructor
+   * to find event details and binds an `EventEmitter` instance to each property
+   * specified in the metadata. The event name is derived from the metadata.
+   *
+   * @method bindEmitter
+   */
+  bindEmitter() {
+    let data = HelperUtils.fetchOrCreate(this, "Output");
+    if (!data) return;
+    data.forEach((value, key) => {
+      this[key] = new EventEmitter(value.eventName);
+    });
+  }
+  /**
+   * Binds host events to the component's methods based on metadata.
+   *
+   * This method retrieves metadata associated with the component's constructor
+   * to find host event configurations. It then binds the specified methods
+   * to the corresponding events on the host element or its shadow root. If the event is
+   * a string, it adds a single event listener. If the event is an array of strings,
+   * it traverses the array and adds event listeners for each event.
+   *
+   * @method bindHostEvents
+   *
+   * @example
+   * // Example of using bindHostEvents to bind host events
+   * class MyComponent extends BaseElement {
+   *   \@HostListener({ event: 'click' })
+   *   public handleClick(event: Event) {
+   *     console.log('Host element clicked', event);
+   *   }
+   * }
+   *
+   * const myComponent = new MyComponent();
+   * myComponent.bindHostEvents();
+   * // The click event on the host element will now trigger the handleClick method
+   */
+  bindHostEvents() {
+    const data = HelperUtils.fetchOrCreate(this, "Host");
+    if (!data) return;
+    data.forEach((value) => {
+      const element = this.isShadow ? this.shadowRoot : this;
+      if (element) {
+        if (typeof value.event === "string") {
+          element.addEventListener(value.event, (event) => value.method.call(this, event));
+        } else if (Array.isArray(value.event)) {
+          value.event.forEach((eventName) => {
+            element.addEventListener(eventName, (event) => value.method.call(this, event));
+          });
+        }
+      }
+    });
+  }
+  /**
+   * Binds window events to the component's methods based on metadata.
+   *
+   * This method retrieves metadata associated with the component's constructor
+   * to find window event configurations. It then binds the specified methods
+   * to the corresponding events on the global `window` object. If the event is
+   * a string, it adds a single event listener. If the event is an array of strings,
+   * it traverses the array and adds event listeners for each event.
+   *
+   * @method bindWindowEvents
+   *
+   * @example
+   * // Example of using bindWindowEvents to bind window events
+   * class MyComponent extends BaseElement {
+   *   \@WindowListener({ event: 'resize' })
+   *   public handleResize(event: Event) {
+   *     console.log('Window resized', event);
+   *   }
+   * }
+   *
+   * const myComponent = new MyComponent();
+   * myComponent.bindWindowEvents();
+   * // The resize event on the window will now trigger the handleResize method
+   */
+  bindWindowEvents() {
+    const data = HelperUtils.fetchOrCreate(this, "Window");
+    if (!data) return;
+    data.forEach((value) => {
+      if (typeof value.event === "string") {
+        window.addEventListener(value.event, (event) => value.method.call(this, event));
+      } else if (Array.isArray(value.event)) {
+        value.event.forEach((eventName) => {
+          window.addEventListener(eventName, (event) => value.method.call(this, event));
+        });
+      }
+    });
+  }
+}, __name(_e, "BaseElement"), _e);
+const ModalStyle = {
+  base: "bg-white border border-gray-200 fixed left-1/2 top-1/2 space-y-4 shadow-md p-6 min-w-[320px] z-[999]",
+  duration: {
+    "0": "0s",
+    "100": "100ms",
+    "150": "150ms",
+    "200": "200ms",
+    "300": "300ms",
+    "500": "500ms",
+    "700": "700ms",
+    "1000": "1000ms",
+    "1200": "1200ms",
+    "1300": "1300ms",
+    "2000": "2000ms"
+  },
+  rounded: {
+    "none": "",
+    "sm": "rounded-sm",
+    "md": "rounded-md",
+    "lg": "rounded-lg",
+    "xl": "rounded-xl",
+    "2xl": "rounded-2xl",
+    "3xl": "rounded-3xl",
+    "full": "rounded-full"
+  },
+  direction: {
+    up: {
+      startX: "-50%",
+      endX: "-50%",
+      startY: "-200%",
+      endY: "-50%"
+    },
+    down: {
+      startX: "-50%",
+      endX: "-50%",
+      startY: "200%",
+      endY: "-50%"
+    },
+    left: {
+      startX: "-180%",
+      endX: "-50%",
+      startY: "-50%",
+      endY: "-50%"
+    },
+    right: {
+      startX: "140%",
+      endX: "-50%",
+      startY: "-50%",
+      endY: "-50%"
+    }
+  }
+};
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$a(target, key, result);
+  return result;
+};
+exports.ModalComponent = class ModalComponent extends BaseElement {
+  constructor() {
+    super();
+    __publicField(this, "isOpen");
+    __publicField(this, "content");
+    __publicField(this, "className");
+    __publicField(this, "rounded");
+    __publicField(this, "duration");
+    __publicField(this, "direction");
+    __publicField(this, "modalChange");
+    __publicField(this, "template", (open) => {
+      return `
+            <div style="
+            --start-x: ${ModalStyle.direction[`${this.direction ?? "up"}`].startX};
+            --end-x: ${ModalStyle.direction[`${this.direction ?? "up"}`].endX};
+            --start-y: ${ModalStyle.direction[`${this.direction ?? "up"}`].startY};
+            --end-y: ${ModalStyle.direction[`${this.direction ?? "up"}`].endY};
+            --animation-duration: ${ModalStyle.duration[`${this.duration ?? "1300"}`]};
+            " id="model" class="${open ? "modelOpen" : "modelClose"}  ${ModalStyle.base} ${ModalStyle.rounded[`${this.rounded ?? "none"}`]}">
+                <button type="button" id="close" class="absolute right-4 top-3">X</button>
+               ${this.content}
+            </div>
+        `;
+    });
+    this.content = this.innerHTML;
+  }
+  handleClose() {
+    this.isOpen = false;
+    this.modalChange.emit(false, this);
+  }
+  render() {
+    return this.template(this.isOpen);
+  }
+};
+__decorateClass$b([
+  PropertyDecorator({ name: "open", type: StringType })
+], exports.ModalComponent.prototype, "isOpen", 2);
+__decorateClass$b([
+  PropertyDecorator({ name: "className", type: StringType })
+], exports.ModalComponent.prototype, "className", 2);
+__decorateClass$b([
+  PropertyDecorator({ name: "rounded", type: StringType })
+], exports.ModalComponent.prototype, "rounded", 2);
+__decorateClass$b([
+  PropertyDecorator({ name: "duration", type: StringType })
+], exports.ModalComponent.prototype, "duration", 2);
+__decorateClass$b([
+  PropertyDecorator({ name: "direction", type: StringType })
+], exports.ModalComponent.prototype, "direction", 2);
+__decorateClass$b([
+  EventDecorator()
+], exports.ModalComponent.prototype, "modalChange", 2);
+__decorateClass$b([
+  BindEventDecorator({ event: "click", id: "#close" })
+], exports.ModalComponent.prototype, "handleClose", 1);
+exports.ModalComponent = __decorateClass$b([
+  ComponentDecorator({
+    selector: "dota-modal",
+    shadow: false
+  })
+], exports.ModalComponent);
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$9(target, key, result);
+  return result;
+};
+exports.CardComponent = class CardComponent extends BaseElement {
+  constructor() {
+    super();
+    __publicField(this, "content");
+    __publicField(this, "className");
+    this.content = this.innerHTML;
+  }
+  render() {
+    return `
+            <div class="${this.className}">
+                ${this.content}
+            </div>
+        `;
+  }
+};
+__decorateClass$a([
+  PropertyDecorator({ name: "className", type: StringType })
+], exports.CardComponent.prototype, "className", 2);
+exports.CardComponent = __decorateClass$a([
+  ComponentDecorator({
+    selector: "dota-card",
+    shadow: false
+  })
+], exports.CardComponent);
+exports.CardTitleComponent = class CardTitleComponent extends BaseElement {
+  constructor() {
+    super();
+    __publicField(this, "title");
+    __publicField(this, "className");
+    __publicField(this, "template", (title) => {
+      let content;
+      content = title || this.innerHTML;
+      return `
+        <h1 class="text-3xl font-bold ${this.className ?? ""}">
+                    ${content}
+        </h1>
+        `;
+    });
+  }
+  render() {
+    return this.template(this.title);
+  }
+};
+__decorateClass$a([
+  PropertyDecorator({ name: "title", type: StringType })
+], exports.CardTitleComponent.prototype, "title", 2);
+__decorateClass$a([
+  PropertyDecorator({ name: "className", type: StringType })
+], exports.CardTitleComponent.prototype, "className", 2);
+exports.CardTitleComponent = __decorateClass$a([
+  ComponentDecorator({
+    selector: "card-title",
+    shadow: true
+  })
+], exports.CardTitleComponent);
+exports.CardHeaderComponent = class CardHeaderComponent extends BaseElement {
+  constructor() {
+    super();
+    __publicField(this, "header");
+    __publicField(this, "template", (header) => {
+      let content = header || this.innerHTML;
+      return `
+            <header class="py-4 text-4xl font-bold">${content}</header>
+        `;
+    });
+  }
+  render() {
+    return this.template(this.header);
+  }
+};
+__decorateClass$a([
+  PropertyDecorator({ name: "", type: StringType })
+], exports.CardHeaderComponent.prototype, "header", 2);
+exports.CardHeaderComponent = __decorateClass$a([
+  ComponentDecorator({
+    selector: "card-header",
+    shadow: false
+  })
+], exports.CardHeaderComponent);
+exports.CardDescriptionComponent = class CardDescriptionComponent extends BaseElement {
+  constructor() {
+    super();
+    __publicField(this, "description");
+    __publicField(this, "className");
+    __publicField(this, "template", (description) => {
+      let content = description || this.innerHTML;
+      return `
+            <p class="text-lg font-medium ${this.className}">${content}</p>
+        `;
+    });
+  }
+  render() {
+    return this.template(this.description);
+  }
+};
+__decorateClass$a([
+  PropertyDecorator({ name: "description", type: StringType })
+], exports.CardDescriptionComponent.prototype, "description", 2);
+__decorateClass$a([
+  PropertyDecorator({ name: "className", type: StringType })
+], exports.CardDescriptionComponent.prototype, "className", 2);
+exports.CardDescriptionComponent = __decorateClass$a([
+  ComponentDecorator({
+    selector: "card-description",
+    shadow: false
+  })
+], exports.CardDescriptionComponent);
+exports.CardFooterComponent = class CardFooterComponent extends BaseElement {
+  constructor() {
+    super();
+    __publicField(this, "content");
+    __publicField(this, "className");
+    this.content = this.innerHTML;
+  }
+  render() {
+    return `
+            <footer class="flex items-center gap-4 justify-center ${this.className}">
+                ${this.content}
+            </footer>
+        `;
+  }
+};
+__decorateClass$a([
+  PropertyDecorator({ name: "className", type: StringType })
+], exports.CardFooterComponent.prototype, "className", 2);
+exports.CardFooterComponent = __decorateClass$a([
+  ComponentDecorator({
+    selector: "card-footer",
+    shadow: false
+  })
+], exports.CardFooterComponent);
+const BadgeStyle = {
+  base: "inline-flex item-center text-center w-fit px-3 py-1",
+  rounded: {
+    "none": "",
+    "sm": "rounded-sm",
+    "md": "rounded-md",
+    "lg": "rounded-lg",
+    "xl": "rounded-xl"
+  },
+  size: {
+    xs: "text-xs",
+    sm: "text-sm",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl"
+  },
+  color: {
+    red: {
+      solid: "bg-red-500 dark:bg-red-400 text-white dark:text-gray-900",
+      outline: "text-red-500 dark:text-red-400 ring-1 ring-inset ring-red-500 dark:ring-red-400",
+      soft: "bg-red-50 dark:bg-red-400 dark:bg-opacity-10 text-red-500 dark:text-red-400",
+      subtle: "bg-red-50 dark:bg-red-400 dark:bg-opacity-10 text-red-500 dark:text-red-400 ring-1 ring-inset ring-red-500 dark:ring-red-400 ring-opacity-25 dark:ring-opacity-25"
+    },
+    yellow: {
+      solid: "bg-yellow-500 dark:bg-yellow-400 text-white dark:text-gray-900",
+      outline: "text-yellow-500 dark:text-yellow-400 ring-1 ring-inset ring-yellow-500 dark:ring-yellow-400",
+      soft: "bg-yellow-50 dark:bg-yellow-400 dark:bg-opacity-10 text-yellow-500 dark:text-yellow-400",
+      subtle: "bg-yellow-50 dark:bg-yellow-400 dark:bg-opacity-10 text-yellow-500 dark:text-yellow-400 ring-1 ring-inset ring-yellow-500 dark:ring-yellow-400 ring-opacity-25 dark:ring-opacity-25"
+    },
+    pink: {
+      solid: "bg-pink-500 dark:bg-pink-400 text-white dark:text-gray-900",
+      outline: "text-pink-500 dark:text-pink-400 ring-1 ring-inset ring-pink-500 dark:ring-pink-400",
+      soft: "bg-pink-50 dark:bg-pink-400 dark:bg-opacity-10 text-pink-500 dark:text-pink-400",
+      subtle: "bg-pink-50 dark:bg-pink-400 dark:bg-opacity-10 text-pink-500 dark:text-pink-400 ring-1 ring-inset ring-pink-500 dark:ring-pink-400 ring-opacity-25 dark:ring-opacity-25"
+    },
+    purple: {
+      solid: "bg-purple-500 dark:bg-purple-400 text-white dark:text-gray-900",
+      outline: "text-purple-500 dark:text-purple-400 ring-1 ring-inset ring-purple-500 dark:ring-purple-400",
+      soft: "bg-purple-50 dark:bg-purple-400 dark:bg-opacity-10 text-purple-500 dark:text-purple-400",
+      subtle: "bg-purple-50 dark:bg-purple-400 dark:bg-opacity-10 text-purple-500 dark:text-purple-400 ring-1 ring-inset ring-purple-500 dark:ring-purple-400 ring-opacity-25 dark:ring-opacity-25"
+    },
+    blue: {
+      solid: "bg-blue-500 dark:bg-blue-400 text-white dark:text-gray-900",
+      outline: "text-blue-500 dark:text-blue-400 ring-1 ring-inset ring-blue-500 dark:ring-blue-400",
+      soft: "bg-blue-50 dark:bg-blue-400 dark:bg-opacity-10 text-blue-500 dark:text-blue-400",
+      subtle: "bg-blue-50 dark:bg-blue-400 dark:bg-opacity-10 text-blue-500 dark:text-blue-400 ring-1 ring-inset ring-blue-500 dark:ring-blue-400 ring-opacity-25 dark:ring-opacity-25"
+    },
+    cyan: {
+      solid: "bg-cyan-500 dark:bg-cyan-400 text-white dark:text-gray-900",
+      outline: "text-cyan-500 dark:text-cyan-400 ring-1 ring-inset ring-cyan-500 dark:ring-cyan-400",
+      soft: "bg-cyan-50 dark:bg-cyan-400 dark:bg-opacity-10 text-cyan-500 dark:text-cyan-400",
+      subtle: "bg-cyan-50 dark:bg-cyan-400 dark:bg-opacity-10 text-cyan-500 dark:text-cyan-400 ring-1 ring-inset ring-cyan-500 dark:ring-cyan-400 ring-opacity-25 dark:ring-opacity-25"
+    },
+    green: {
+      solid: "bg-green-500 dark:bg-green-400 text-white dark:text-gray-900",
+      outline: "text-green-500 dark:text-green-400 ring-1 ring-inset ring-green-500 dark:ring-green-400",
+      soft: "bg-green-50 dark:bg-green-400 dark:bg-opacity-10 text-green-500 dark:text-green-400",
+      subtle: "bg-green-50 dark:bg-green-400 dark:bg-opacity-10 text-green-500 dark:text-green-400 ring-1 ring-inset ring-green-500 dark:ring-green-400 ring-opacity-25 dark:ring-opacity-25"
+    },
+    emerald: {
+      solid: "bg-emerald-500 dark:bg-emerald-400 text-white dark:text-gray-900",
+      outline: "text-emerald-500 dark:text-emerald-400 ring-1 ring-inset ring-emerald-500 dark:ring-emerald-400",
+      soft: "bg-emerald-50 dark:bg-emerald-400 dark:bg-opacity-10 text-emerald-500 dark:text-emerald-400",
+      subtle: "bg-emerald-50 dark:bg-emerald-400 dark:bg-opacity-10 text-emerald-500 dark:text-emerald-400 ring-1 ring-inset ring-emerald-500 dark:ring-emerald-400 ring-opacity-25 dark:ring-opacity-25"
+    }
+  }
+};
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$8(target, key, result);
+  return result;
+};
+exports.BadgeComponent = class BadgeComponent extends BaseElement {
+  constructor() {
+    super();
+    __publicField(this, "className");
+    __publicField(this, "color");
+    __publicField(this, "variant");
+    __publicField(this, "size");
+    __publicField(this, "rounded");
+    __publicField(this, "label");
+    __publicField(this, "content");
+    this.content = this.innerHTML;
+    this.counter = 0;
+  }
+  render() {
+    return `
+            <span id="click" class="${BadgeStyle.base} ${BadgeStyle["color"][`${this.color ?? "red"}`][`${this.variant ?? "solid"}`]} ${BadgeStyle.size[`${this.size ?? ""}`]} ${BadgeStyle.rounded[`${this.rounded ?? "none"}`]} ${this.className ?? ""}">
+                ${this.label ? this.label : this.content}
+            </span>
+        `;
+  }
+};
+__decorateClass$9([
+  PropertyDecorator({ name: "classname", type: StringType })
+], exports.BadgeComponent.prototype, "className", 2);
+__decorateClass$9([
+  PropertyDecorator({ name: "color", type: StringType })
+], exports.BadgeComponent.prototype, "color", 2);
+__decorateClass$9([
+  PropertyDecorator({ name: "variant", type: StringType })
+], exports.BadgeComponent.prototype, "variant", 2);
+__decorateClass$9([
+  PropertyDecorator({ name: "size", type: StringType })
+], exports.BadgeComponent.prototype, "size", 2);
+__decorateClass$9([
+  PropertyDecorator({ name: "rounded", type: StringType })
+], exports.BadgeComponent.prototype, "rounded", 2);
+__decorateClass$9([
+  PropertyDecorator({ name: "label", type: StringType })
+], exports.BadgeComponent.prototype, "label", 2);
+exports.BadgeComponent = __decorateClass$9([
+  ComponentDecorator({
+    selector: "dota-badge",
+    shadow: false
+  })
+], exports.BadgeComponent);
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$7(target, key, result);
+  return result;
+};
+exports.ScaffoldComponent = class ScaffoldComponent extends BaseElement {
+  /**
+   * Initializes the component and captures inner content
+   */
+  constructor() {
+    super();
+    __publicField(this, "className");
+    /**
+     * Inner HTML content of the component
+     */
+    __publicField(this, "content");
+    this.content = this.innerHTML;
+  }
+  /**
+   * Renders the component with the stored content and applied classes
+   * @returns Rendered HTML string
+   */
+  render() {
+    return `
+             <section class="p-2 ${this.className ?? ""}">
+                ${this.content}
+            </section>
+        `;
+  }
+};
+__decorateClass$8([
+  PropertyDecorator({ name: "classname", type: StringType })
+], exports.ScaffoldComponent.prototype, "className", 2);
+exports.ScaffoldComponent = __decorateClass$8([
+  ComponentDecorator({
+    selector: "app-scaffold",
+    shadow: false
+  })
+], exports.ScaffoldComponent);
+const UIConfig = {
+  color: {
+    none: {
+      solid: "",
+      soft: "",
+      outline: "",
+      ghost: "",
+      link: ""
+    },
+    red: {
+      solid: "dark:text-gray-800 text-gray-200 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400",
+      soft: "text-red-500 dark:text-red-400 bg-red-50 hover:bg-red-100 disabled:bg-red-50 dark:bg-red-950 dark:hover:bg-red-900 dark:disabled:bg-red-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-500 dark:focus-visible:ring-red-400",
+      outline: "ring-1 ring-inset ring-current text-red-500 dark:text-red-400 hover:bg-red-50 disabled:bg-transparent dark:hover:bg-red-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400",
+      ghost: "text-red-500 dark:text-red-400 hover:bg-red-50 disabled:bg-transparent dark:hover:bg-red-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-500 dark:focus-visible:ring-red-400",
+      link: "text-red-500 hover:text-red-600 disabled:text-red-500 dark:text-red-400 dark:hover:text-red-500 dark:disabled:text-red-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-500 dark:focus-visible:ring-red-400"
+    },
+    yellow: {
+      solid: "text-white bg-yellow-500 hover:bg-yellow-600 disabled:bg-yellow-500 dark:bg-yellow-400 dark:hover:bg-yellow-500 dark:disabled:bg-yellow-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-yellow-500 dark:focus-visible:ring-yellow-400",
+      soft: "text-yellow-500 dark:text-yellow-400 bg-yellow-50 hover:bg-yellow-100 disabled:bg-yellow-50 dark:bg-yellow-950 dark:hover:bg-yellow-900 dark:disabled:bg-yellow-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-yellow-500 dark:focus-visible:ring-yellow-400",
+      outline: "text-yellow-500 dark:text-yellow-400 border border-yellow-500 hover:bg-yellow-50 disabled:bg-yellow-50 dark:border-yellow-400 dark:hover:bg-yellow-900 dark:disabled:bg-yellow-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-yellow-500 dark:focus-visible:ring-yellow-400",
+      ghost: "text-yellow-500 dark:text-yellow-400 bg-transparent hover:bg-yellow-50 disabled:bg-transparent dark:hover:bg-yellow-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-yellow-500 dark:focus-visible:ring-yellow-400",
+      link: "text-yellow-500 hover:text-yellow-600 disabled:text-yellow-500 dark:text-yellow-400 dark:hover:text-yellow-500 dark:disabled:text-yellow-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-yellow-500 dark:focus-visible:ring-yellow-400"
+    },
+    rose: {
+      solid: "text-white bg-rose-500 hover:bg-rose-600 disabled:bg-rose-500 dark:bg-rose-400 dark:hover:bg-rose-500 dark:disabled:bg-rose-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-rose-500 dark:focus-visible:ring-rose-400",
+      soft: "text-rose-500 dark:text-rose-400 bg-rose-50 hover:bg-rose-100 disabled:bg-rose-50 dark:bg-rose-950 dark:hover:bg-rose-900 dark:disabled:bg-rose-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-rose-500 dark:focus-visible:ring-rose-400",
+      outline: "text-rose-500 dark:text-rose-400 border border-rose-500 hover:bg-rose-50 disabled:bg-rose-50 dark:border-rose-400 dark:hover:bg-rose-900 dark:disabled:bg-rose-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-rose-500 dark:focus-visible:ring-rose-400",
+      ghost: "text-rose-500 dark:text-rose-400 bg-transparent hover:bg-rose-50 disabled:bg-transparent dark:hover:bg-rose-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-rose-500 dark:focus-visible:ring-rose-400",
+      link: "text-rose-500 hover:text-rose-600 disabled:text-rose-500 dark:text-rose-400 dark:hover:text-rose-500 dark:disabled:text-rose-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-rose-500 dark:focus-visible:ring-rose-400"
+    },
+    emerald: {
+      solid: "text-white bg-emerald-500 hover:bg-emerald-600 disabled:bg-emerald-500 dark:bg-emerald-400 dark:hover:bg-emerald-500 dark:disabled:bg-emerald-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 dark:focus-visible:ring-emerald-400",
+      soft: "text-emerald-500 dark:text-emerald-400 bg-emerald-50 hover:bg-emerald-100 disabled:bg-emerald-50 dark:bg-emerald-950 dark:hover:bg-emerald-900 dark:disabled:bg-emerald-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 dark:focus-visible:ring-emerald-400",
+      outline: "text-emerald-500 dark:text-emerald-400 border border-emerald-500 hover:bg-emerald-50 disabled:bg-emerald-50 dark:border-emerald-400 dark:hover:bg-emerald-900 dark:disabled:bg-emerald-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 dark:focus-visible:ring-emerald-400",
+      ghost: "text-emerald-500 dark:text-emerald-400 bg-transparent hover:bg-emerald-50 disabled:bg-transparent dark:hover:bg-emerald-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 dark:focus-visible:ring-emerald-400",
+      link: "text-emerald-500 hover:text-emerald-600 disabled:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-500 dark:disabled:text-emerald-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 dark:focus-visible:ring-emerald-400"
+    },
+    green: {
+      solid: "text-white bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-green-500 dark:focus-visible:ring-green-400",
+      soft: "text-green-500 dark:text-green-400 bg-green-50 hover:bg-green-100 disabled:bg-green-50 dark:bg-green-950 dark:hover:bg-green-900 dark:disabled:bg-green-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-green-500 dark:focus-visible:ring-green-400",
+      outline: "text-green-500 dark:text-green-400 border border-green-500 hover:bg-green-50 disabled:bg-green-50 dark:border-green-400 dark:hover:bg-green-900 dark:disabled:bg-green-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-green-500 dark:focus-visible:ring-green-400",
+      ghost: "text-green-500 dark:text-green-400 bg-transparent hover:bg-green-50 disabled:bg-transparent dark:hover:bg-green-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-green-500 dark:focus-visible:ring-green-400",
+      link: "text-green-500 hover:text-green-600 disabled:text-green-500 dark:text-green-400 dark:hover:text-green-500 dark:disabled:text-green-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-green-500 dark:focus-visible:ring-green-400"
+    },
+    blue: {
+      solid: "text-white bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500 dark:bg-blue-400 dark:hover:bg-blue-500 dark:disabled:bg-blue-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400",
+      soft: "text-blue-500 dark:text-blue-400 bg-blue-50 hover:bg-blue-100 disabled:bg-blue-50 dark:bg-blue-950 dark:hover:bg-blue-900 dark:disabled:bg-blue-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400",
+      outline: "text-blue-500 dark:text-blue-400 border border-blue-500 hover:bg-blue-50 disabled:bg-blue-50 dark:border-blue-400 dark:hover:bg-blue-900 dark:disabled:bg-blue-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400",
+      ghost: "text-blue-500 dark:text-blue-400 bg-transparent hover:bg-blue-50 disabled:bg-transparent dark:hover:bg-blue-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400",
+      link: "text-blue-500 hover:text-blue-600 disabled:text-blue-500 dark:text-blue-400 dark:hover:text-blue-500 dark:disabled:text-blue-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400"
+    },
+    cyan: {
+      solid: "text-white bg-cyan-500 hover:bg-cyan-600 disabled:bg-cyan-500 dark:bg-cyan-400 dark:hover:bg-cyan-500 dark:disabled:bg-cyan-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-cyan-500 dark:focus-visible:ring-cyan-400",
+      soft: "text-cyan-500 dark:text-cyan-400 bg-cyan-50 hover:bg-cyan-100 disabled:bg-cyan-50 dark:bg-cyan-950 dark:hover:bg-cyan-900 dark:disabled:bg-cyan-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-cyan-500 dark:focus-visible:ring-cyan-400",
+      outline: "text-cyan-500 dark:text-cyan-400 border border-cyan-500 hover:bg-cyan-50 disabled:bg-cyan-50 dark:border-cyan-400 dark:hover:bg-cyan-900 dark:disabled:bg-cyan-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-cyan-500 dark:focus-visible:ring-cyan-400",
+      ghost: "text-cyan-500 dark:text-cyan-400 bg-transparent hover:bg-cyan-50 disabled:bg-transparent dark:hover:bg-cyan-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-cyan-500 dark:focus-visible:ring-cyan-400",
+      link: "text-cyan-500 hover:text-cyan-600 disabled:text-cyan-500 dark:text-cyan-400 dark:hover:text-cyan-500 dark:disabled:text-cyan-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-cyan-500 dark:focus-visible:ring-cyan-400"
+    },
+    teal: {
+      solid: "text-white bg-teal-500 hover:bg-teal-600 disabled:bg-teal-500 dark:bg-teal-400 dark:hover:bg-teal-500 dark:disabled:bg-teal-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-teal-500 dark:focus-visible:ring-teal-400",
+      soft: "text-teal-500 dark:text-teal-400 bg-teal-50 hover:bg-teal-100 disabled:bg-teal-50 dark:bg-teal-950 dark:hover:bg-teal-900 dark:disabled:bg-teal-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-teal-500 dark:focus-visible:ring-teal-400",
+      outline: "text-teal-500 dark:text-teal-400 border border-teal-500 hover:bg-teal-50 disabled:bg-teal-50 dark:border-teal-400 dark:hover:bg-teal-900 dark:disabled:bg-teal-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-teal-500 dark:focus-visible:ring-teal-400",
+      ghost: "text-teal-500 dark:text-teal-400 bg-transparent hover:bg-teal-50 disabled:bg-transparent dark:hover:bg-teal-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-teal-500 dark:focus-visible:ring-teal-400",
+      link: "text-teal-500 hover:text-teal-600 disabled:text-teal-500 dark:text-teal-400 dark:hover:text-teal-500 dark:disabled:text-teal-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-teal-500 dark:focus-visible:ring-teal-400"
+    },
+    gray: {
+      solid: "text-white bg-gray-500 hover:bg-gray-600 disabled:bg-gray-500 dark:bg-gray-400 dark:hover:bg-gray-500 dark:disabled:bg-gray-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-500 dark:focus-visible:ring-gray-400",
+      soft: "text-gray-500 dark:text-gray-400 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-950 dark:hover:bg-gray-900 dark:disabled:bg-gray-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-500 dark:focus-visible:ring-gray-400",
+      outline: "text-gray-500 dark:text-gray-400 border border-gray-500 hover:bg-gray-50 disabled:bg-gray-50 dark:border-gray-400 dark:hover:bg-gray-900 dark:disabled:bg-gray-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-500 dark:focus-visible:ring-gray-400",
+      ghost: "text-gray-500 dark:text-gray-400 bg-transparent hover:bg-gray-50 disabled:bg-transparent dark:hover:bg-gray-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-500 dark:focus-visible:ring-gray-400",
+      link: "text-gray-500 hover:text-gray-600 disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-500 dark:disabled:text-gray-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-500 dark:focus-visible:ring-gray-400"
+    },
+    purple: {
+      solid: "text-white bg-purple-500 hover:bg-purple-600 disabled:bg-purple-500 dark:bg-purple-400 dark:hover:bg-purple-500 dark:disabled:bg-purple-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-purple-500 dark:focus-visible:ring-purple-400",
+      soft: "text-purple-500 dark:text-purple-400 bg-purple-50 hover:bg-purple-100 disabled:bg-purple-50 dark:bg-purple-950 dark:hover:bg-purple-900 dark:disabled:bg-purple-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-purple-500 dark:focus-visible:ring-purple-400",
+      outline: "text-purple-500 dark:text-purple-400 border border-purple-500 hover:bg-purple-50 disabled:bg-purple-50 dark:border-purple-400 dark:hover:bg-purple-900 dark:disabled:bg-purple-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-purple-500 dark:focus-visible:ring-purple-400",
+      ghost: "text-purple-500 dark:text-purple-400 bg-transparent hover:bg-purple-50 disabled:bg-transparent dark:hover:bg-purple-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-purple-500 dark:focus-visible:ring-purple-400",
+      link: "text-purple-500 hover:text-purple-600 disabled:text-purple-500 dark:text-purple-400 dark:hover:text-purple-500 dark:disabled:text-purple-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-purple-500 dark:focus-visible:ring-purple-400"
+    },
+    violet: {
+      solid: "text-white bg-violet-500 hover:bg-violet-600 disabled:bg-violet-500 dark:bg-violet-400 dark:hover:bg-violet-500 dark:disabled:bg-violet-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-violet-500 dark:focus-visible:ring-violet-400",
+      soft: "text-violet-500 dark:text-violet-400 bg-violet-50 hover:bg-violet-100 disabled:bg-violet-50 dark:bg-violet-950 dark:hover:bg-violet-900 dark:disabled:bg-violet-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-violet-500 dark:focus-visible:ring-violet-400",
+      outline: "text-violet-500 dark:text-violet-400 border border-violet-500 hover:bg-violet-50 disabled:bg-violet-50 dark:border-violet-400 dark:hover:bg-violet-900 dark:disabled:bg-violet-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-violet-500 dark:focus-visible:ring-violet-400",
+      ghost: "text-violet-500 dark:text-violet-400 bg-transparent hover:bg-violet-50 disabled:bg-transparent dark:hover:bg-violet-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-violet-500 dark:focus-visible:ring-violet-400",
+      link: "text-violet-500 hover:text-violet-600 disabled:text-violet-500 dark:text-violet-400 dark:hover:text-violet-500 dark:disabled:text-violet-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-violet-500 dark:focus-visible:ring-violet-400"
+    },
+    pink: {
+      solid: "text-white bg-pink-500 hover:bg-pink-600 disabled:bg-pink-500 dark:bg-pink-400 dark:hover:bg-pink-500 dark:disabled:bg-pink-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-pink-500 dark:focus-visible:ring-pink-400",
+      soft: "text-pink-500 dark:text-pink-400 bg-pink-50 hover:bg-pink-100 disabled:bg-pink-50 dark:bg-pink-950 dark:hover:bg-pink-900 dark:disabled:bg-pink-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-pink-500 dark:focus-visible:ring-pink-400",
+      outline: "text-pink-500 dark:text-pink-400 border border-pink-500 hover:bg-pink-50 disabled:bg-pink-50 dark:border-pink-400 dark:hover:bg-pink-900 dark:disabled:bg-pink-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-pink-500 dark:focus-visible:ring-pink-400",
+      ghost: "text-pink-500 dark:text-pink-400 bg-transparent hover:bg-pink-50 disabled:bg-transparent dark:hover:bg-pink-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-pink-500 dark:focus-visible:ring-pink-400",
+      link: "text-pink-500 hover:text-pink-600 disabled:text-pink-500 dark:text-pink-400 dark:hover:text-pink-500 dark:disabled:text-pink-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-pink-500 dark:focus-visible:ring-pink-400"
+    },
+    sky: {
+      solid: "text-white bg-sky-500 hover:bg-sky-600 disabled:bg-sky-500 dark:bg-sky-400 dark:hover:bg-sky-500 dark:disabled:bg-sky-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sky-500 dark:focus-visible:ring-sky-400",
+      soft: "text-sky-500 dark:text-sky-400 bg-sky-50 hover:bg-sky-100 disabled:bg-sky-50 dark:bg-sky-950 dark:hover:bg-sky-900 dark:disabled:bg-sky-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sky-500 dark:focus-visible:ring-sky-400",
+      outline: "text-sky-500 dark:text-sky-400 border border-sky-500 hover:bg-sky-50 disabled:bg-sky-50 dark:border-sky-400 dark:hover:bg-sky-900 dark:disabled:bg-sky-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sky-500 dark:focus-visible:ring-sky-400",
+      ghost: "text-sky-500 dark:text-sky-400 bg-transparent hover:bg-sky-50 disabled:bg-transparent dark:hover:bg-sky-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sky-500 dark:focus-visible:ring-sky-400",
+      link: "text-sky-500 hover:text-sky-600 disabled:text-sky-500 dark:text-sky-400 dark:hover:text-sky-500 dark:disabled:text-sky-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sky-500 dark:focus-visible:ring-sky-400"
+    },
+    orange: {
+      solid: "text-white bg-orange-500 hover:bg-orange-600 disabled:bg-orange-500 dark:bg-orange-400 dark:hover:bg-orange-500 dark:disabled:bg-orange-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-orange-500 dark:focus-visible:ring-orange-400",
+      soft: "text-orange-500 dark:text-orange-400 bg-orange-50 hover:bg-orange-100 disabled:bg-orange-50 dark:bg-orange-950 dark:hover:bg-orange-900 dark:disabled:bg-orange-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-orange-500 dark:focus-visible:ring-orange-400",
+      outline: "text-orange-500 dark:text-orange-400 border border-orange-500 hover:bg-orange-50 disabled:bg-orange-50 dark:border-orange-400 dark:hover:bg-orange-900 dark:disabled:bg-orange-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-orange-500 dark:focus-visible:ring-orange-400",
+      ghost: "text-orange-500 dark:text-orange-400 bg-transparent hover:bg-orange-50 disabled:bg-transparent dark:hover:bg-orange-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-orange-500 dark:focus-visible:ring-orange-400",
+      link: "text-orange-500 hover:text-orange-600 disabled:text-orange-500 dark:text-orange-400 dark:hover:text-orange-500 dark:disabled:text-orange-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-orange-500 dark:focus-visible:ring-orange-400"
+    },
+    slate: {
+      solid: "text-white bg-slate-500 hover:bg-slate-600 disabled:bg-slate-500 dark:bg-slate-400 dark:hover:bg-slate-500 dark:disabled:bg-slate-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-slate-500 dark:focus-visible:ring-slate-400",
+      soft: "text-slate-500 dark:text-slate-400 bg-slate-50 hover:bg-slate-100 disabled:bg-slate-50 dark:bg-slate-950 dark:hover:bg-slate-900 dark:disabled:bg-slate-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-slate-500 dark:focus-visible:ring-slate-400",
+      outline: "text-slate-500 dark:text-slate-400 border border-slate-500 hover:bg-slate-50 disabled:bg-slate-50 dark:border-slate-400 dark:hover:bg-slate-900 dark:disabled:bg-slate-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-slate-500 dark:focus-visible:ring-slate-400",
+      ghost: "text-slate-500 dark:text-slate-400 bg-transparent hover:bg-slate-50 disabled:bg-transparent dark:hover:bg-slate-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-slate-500 dark:focus-visible:ring-slate-400",
+      link: "text-slate-500 hover:text-slate-600 disabled:text-slate-500 dark:text-slate-400 dark:hover:text-slate-500 dark:disabled:text-slate-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-slate-500 dark:focus-visible:ring-slate-400"
+    },
+    indigo: {
+      solid: "text-white bg-indigo-500 hover:bg-indigo-600 disabled:bg-indigo-500 dark:bg-indigo-400 dark:hover:bg-indigo-500 dark:disabled:bg-indigo-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500 dark:focus-visible:ring-indigo-400",
+      soft: "text-indigo-500 dark:text-indigo-400 bg-indigo-50 hover:bg-indigo-100 disabled:bg-indigo-50 dark:bg-indigo-950 dark:hover:bg-indigo-900 dark:disabled:bg-indigo-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500 dark:focus-visible:ring-indigo-400",
+      outline: "text-indigo-500 dark:text-indigo-400 border border-indigo-500 hover:bg-indigo-50 disabled:bg-indigo-50 dark:border-indigo-400 dark:hover:bg-indigo-900 dark:disabled:bg-indigo-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500 dark:focus-visible:ring-indigo-400",
+      ghost: "text-indigo-500 dark:text-indigo-400 bg-transparent hover:bg-indigo-50 disabled:bg-transparent dark:hover:bg-indigo-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500 dark:focus-visible:ring-indigo-400",
+      link: "text-indigo-500 hover:text-indigo-600 disabled:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-500 dark:disabled:text-indigo-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500 dark:focus-visible:ring-indigo-400"
+    },
+    fuchsia: {
+      solid: "text-white bg-fuchsia-500 hover:bg-fuchsia-600 disabled:bg-fuchsia-500 dark:bg-fuchsia-400 dark:hover:bg-fuchsia-500 dark:disabled:bg-fuchsia-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fuchsia-500 dark:focus-visible:ring-fuchsia-400",
+      soft: "text-fuchsia-500 dark:text-fuchsia-400 bg-fuchsia-50 hover:bg-fuchsia-100 disabled:bg-fuchsia-50 dark:bg-fuchsia-950 dark:hover:bg-fuchsia-900 dark:disabled:bg-fuchsia-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fuchsia-500 dark:focus-visible:ring-fuchsia-400",
+      outline: "text-fuchsia-500 dark:text-fuchsia-400 border border-fuchsia-500 hover:bg-fuchsia-50 disabled:bg-fuchsia-50 dark:border-fuchsia-400 dark:hover:bg-fuchsia-900 dark:disabled:bg-fuchsia-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fuchsia-500 dark:focus-visible:ring-fuchsia-400",
+      ghost: "text-fuchsia-500 dark:text-fuchsia-400 bg-transparent hover:bg-fuchsia-50 disabled:bg-transparent dark:hover:bg-fuchsia-900 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fuchsia-500 dark:focus-visible:ring-fuchsia-400",
+      link: "text-fuchsia-500 hover:text-fuchsia-600 disabled:text-fuchsia-500 dark:text-fuchsia-400 dark:hover:text-fuchsia-500 dark:disabled:text-fuchsia-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fuchsia-500 dark:focus-visible:ring-fuchsia-400"
+    }
+  }
+};
+const IconStyle = {
+  shadow: "shadow-sm",
+  base: "overflow-hidden rounded-md focus:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 relative font-medium",
+  color: {
+    ...UIConfig.color
+  },
+  size: {
+    sm: "p-0.5 size-4",
+    md: "p-0.5 size-6",
+    lg: "p-1 size-8",
+    xl: "p-1 size-10",
+    "2xl": "p-1.5 size-12",
+    "3xl": "p-1.5 size-14"
+  }
+};
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$6(target, key, result);
+  return result;
+};
+exports.IconsComponent = class IconsComponent extends BaseElement {
+  constructor() {
+    super();
+    __publicField(this, "name");
+    __publicField(this, "className");
+    __publicField(this, "size");
+    __publicField(this, "color");
+    __publicField(this, "variant");
+  }
+  afterViewInit() {
+    this.getSvg().then();
+  }
+  /**
+   * Fetches and renders the SVG icon from the Iconify API
+   * Applies the configured size, color, and variant styles
+   */
+  async getSvg() {
+    let url = `https://api.iconify.design/${this.name}.svg?color=%23888888`;
+    const response = await fetch(url);
+    if (response.status === 200) {
+      let text = await response.text();
+      if (text !== "404") {
+        this.innerHTML = text;
+        const svg = this.querySelector("svg");
+        if (svg) {
+          svg.setAttribute("class", IconStyle.size[this.size] || IconStyle.size.sm);
+          IconStyle.base.split(" ").forEach((value) => svg.classList.add(value));
+          if (this.color) {
+            const iconColor = this.variant ? IconStyle.color[this.color][this.variant] : IconStyle.color[this.color].solid;
+            iconColor.split(" ").forEach((value) => svg.classList.add(value));
+          }
+        }
+        const svgPath = this.querySelector("svg path");
+        if (svgPath) {
+          svgPath.setAttribute("fill", "currentColor");
+        }
+      }
+    } else {
+      console.warn("Invalid Icon Name");
+      this.innerHTML = "";
+    }
+  }
+  render() {
+    return HTML`
+            <div id="svg" class="flex items-center justify-center">
+                
+            </div> 
+        `;
+  }
+};
+__decorateClass$7([
+  PropertyDecorator({ name: "name", type: StringType })
+], exports.IconsComponent.prototype, "name", 2);
+__decorateClass$7([
+  PropertyDecorator({ name: "classname", type: StringType })
+], exports.IconsComponent.prototype, "className", 2);
+__decorateClass$7([
+  PropertyDecorator({ name: "size", type: StringType })
+], exports.IconsComponent.prototype, "size", 2);
+__decorateClass$7([
+  PropertyDecorator({ name: "color", type: StringType })
+], exports.IconsComponent.prototype, "color", 2);
+__decorateClass$7([
+  PropertyDecorator({ name: "variant", type: StringType })
+], exports.IconsComponent.prototype, "variant", 2);
+__decorateClass$7([
+  AfterInitDecorator()
+], exports.IconsComponent.prototype, "afterViewInit", 1);
+exports.IconsComponent = __decorateClass$7([
+  ComponentDecorator({
+    selector: "dota-icon",
+    shadow: false
+  })
+], exports.IconsComponent);
+const AccordionStyle = {
+  button: {
+    base: "focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md inline-flex justify-between items-center mb-1.5 w-full",
+    size: {
+      "2xs": "text-xs gap-x-1 px-2 py-1",
+      xs: "text-xs gap-x-1.5 px-2.5 py-1.5",
+      sm: "text-sm gap-x-1.5 px-2.5 py-1.5",
+      md: "text-sm gap-x-2 px-3 py-2",
+      lg: "text-sm gap-x-2.5 px-3.5 py-2.5",
+      xl: "text-base gap-x-2.5 px-3.5 py-2.5"
+    },
+    color: {
+      ...UIConfig.color
+    }
+  },
+  paragraph: "text-sm text-gray-500 dark:text-gray-400 pt-1.5 pb-3"
+};
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$5(target, key, result);
+  return result;
+};
+exports.AccordionComponent = class AccordionComponent extends BaseElement {
+  constructor() {
+    super();
+    __publicField(this, "className");
+    __publicField(this, "header");
+    __publicField(this, "description");
+    __publicField(this, "icon");
+    __publicField(this, "color");
+    __publicField(this, "variant");
+    __publicField(this, "size");
+    /**
+     * Processes the icon name and returns the HTML string for the icon component.
+     * @param icon - The name of the icon to be displayed
+     * @returns HTML string containing the icon component or empty string if no icon provided
+     */
+    __publicField(this, "processIcon", (icon) => {
+      return icon ? `<dota-icon className="text-blue-400 text-xl" name="${icon}"></dota-icon>` : "";
+    });
+  }
+  handleAccordion() {
+    const element = this.querySelector("#description");
+    if (element) {
+      element.classList.toggle("description-active");
+    }
+    const icon = this.querySelector("#icon");
+    if (icon) {
+      icon.classList.toggle("active");
+    }
+  }
+  render() {
+    return `
+            <div class="${this.className ?? ""} w-full flex flex-col">
+                <button type="button" id="header" class="${AccordionStyle.button.base} ${AccordionStyle.button.size[this.size] ?? AccordionStyle.button.size.md} ${AccordionStyle.button.color[this.color][`${this.variant ?? "solid"}`] ?? AccordionStyle.button.color.gray.soft}">
+                    <div class="flex">
+                        ${this.processIcon(this.icon)}
+                        <span class="text-left break-all line-clamp-1">${this.header}</span>
+                    </div>
+                    <div id="icon" class="icon">
+                        <dota-icon name="material-symbols:arrow-forward-ios-rounded"></dota-icon>
+                    </div>
+                </button>
+                <div id="description" class="description">
+                    <p class="overflow-hidden p-2 ${AccordionStyle.paragraph}">${this.description}</p>
+                </div>
+            </div>
+        `;
+  }
+};
+__decorateClass$6([
+  PropertyDecorator({ name: "classname", type: StringType })
+], exports.AccordionComponent.prototype, "className", 2);
+__decorateClass$6([
+  PropertyDecorator({ name: "header", type: StringType })
+], exports.AccordionComponent.prototype, "header", 2);
+__decorateClass$6([
+  PropertyDecorator({ name: "description", type: StringType })
+], exports.AccordionComponent.prototype, "description", 2);
+__decorateClass$6([
+  PropertyDecorator({ name: "icon", type: StringType })
+], exports.AccordionComponent.prototype, "icon", 2);
+__decorateClass$6([
+  PropertyDecorator({ name: "color", type: StringType })
+], exports.AccordionComponent.prototype, "color", 2);
+__decorateClass$6([
+  PropertyDecorator({ name: "variant", type: StringType })
+], exports.AccordionComponent.prototype, "variant", 2);
+__decorateClass$6([
+  PropertyDecorator({ name: "size", type: StringType })
+], exports.AccordionComponent.prototype, "size", 2);
+__decorateClass$6([
+  BindEventDecorator({ event: "click", id: "#header" })
+], exports.AccordionComponent.prototype, "handleAccordion", 1);
+exports.AccordionComponent = __decorateClass$6([
+  ComponentDecorator({
+    selector: "dota-accordion",
+    shadow: false
+  })
+], exports.AccordionComponent);
+const ChipStyle = {
+  base: {
+    parent: "relative inline-flex items-center justify-center flex-shrink-0",
+    chip: "absolute rounded-full text-center text-white flex item-center justify-center"
+  },
+  position: {
+    "top-left": "top-0 left-0 -translate-y-1/2 -translate-x-1/2",
+    "top-right": "top-0 right-0 -translate-y-1/2 translate-x-1/2",
+    "bottom-right": "bottom-0 right-0 translate-y-1/2 translate-x-1/2",
+    "bottom-left": "bottom-0 left-0 translate-y-1/2 -translate-x-1/2"
+  },
+  color: {
+    red: "bg-red-500 dark:bg-red-400",
+    yellow: "bg-yellow-500 dark:bg-yellow-400",
+    rose: "bg-rose-500 dark:bg-rose-400",
+    emerald: "bg-emerald-500 dark:bg-emerald-400",
+    green: "bg-green-500 dark:bg-green-400",
+    blue: "bg-blue-500 dark:bg-blue-400",
+    cyan: "bg-cyan-500 dark:bg-cyan-400",
+    teal: "bg-teal-500 dark:bg-teal-400",
+    gray: "bg-gray-500 dark:bg-gray-400",
+    orange: "bg-orange-500 dark:bg-orange-400",
+    sky: "bg-sky-500 dark:bg-sky-400",
+    purple: "bg-purple-500 dark:bg-purple-400",
+    violet: "bg-violet-500 dark:bg-violet-400",
+    pink: "bg-pink-500 dark:bg-pink-400"
+  }
+};
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$4(target, key, result);
+  return result;
+};
+exports.ChipComponent = class ChipComponent extends BaseElement {
+  constructor() {
+    super();
+    __publicField(this, "text");
+    __publicField(this, "position");
+    __publicField(this, "color");
+    __publicField(this, "content");
+    this.content = this.innerHTML;
+  }
+  render() {
+    return `
+            <div class="${ChipStyle.base.parent}">
+                <span class="
+                            ${ChipStyle.base.chip} ${ChipStyle.position[this.position] ?? ChipStyle.position["top-right"]} 
+                            ${ChipStyle.color[this.color] ?? ChipStyle.color.yellow} text-[10px]  
+                            ${this.text ? "size-4" : "size-2"}">
+                    ${this.text ?? ""}
+                </span>
+                ${this.content}
+            </div>
+        `;
+  }
+};
+__decorateClass$5([
+  PropertyDecorator({ name: "text", type: StringType })
+], exports.ChipComponent.prototype, "text", 2);
+__decorateClass$5([
+  PropertyDecorator({ name: "position", type: StringType })
+], exports.ChipComponent.prototype, "position", 2);
+__decorateClass$5([
+  PropertyDecorator({ name: "color", type: StringType })
+], exports.ChipComponent.prototype, "color", 2);
+exports.ChipComponent = __decorateClass$5([
+  ComponentDecorator({
+    selector: "dota-chip",
+    shadow: false
+  })
+], exports.ChipComponent);
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$3(target, key, result);
+  return result;
+};
+exports.AvatarComponent = class AvatarComponent extends BaseElement {
+  constructor() {
+    super();
+    __publicField(this, "img");
+    __publicField(this, "imgAlt");
+    __publicField(this, "label");
+    __publicField(this, "icon");
+    __publicField(this, "isChip");
+    __publicField(this, "chipText");
+    __publicField(this, "chipColor");
+    __publicField(this, "chipPosition");
+    __publicField(this, "variant");
+    __publicField(this, "size");
+    __publicField(this, "template", () => {
+      const size = this.size || "md";
+      if (this.img) {
+        return this.isChip ? `
+                    <dota-chip color="${this.chipColor}" size="sm" position="${this.chipPosition}">
+                        <avatar-wrapper color="${this.chipColor}" variant="${this.variant}" size="${size}">
+                            <img src="${this.img}" alt="${this.imgAlt}" class="w-full h-full">
+                        </avatar-wrapper>
+                    </dota-chip>
+                    
+                ` : `
+                    <avatar-wrapper color="${this.chipColor}" variant="${this.variant}" size="${size}">
+                        <img src="${this.img}" alt="${this.imgAlt}" class="w-full h-full">
+                    </avatar-wrapper>
+                `;
+      } else if (this.label) {
+        return this.isChip ? `
+                    <dota-chip color="${this.chipColor}" size="sm" position="${this.chipPosition}">
+                        <avatar-wrapper color="${this.chipColor}" variant="${this.variant}" size="${size}">
+                            ${this.label.split(" ").map((value, index) => {
+          if (index < 2) {
+            return value.toUpperCase().at(0);
+          }
+        }).join("")}
+                        </avatar-wrapper>
+                    </dota-chip>
+                ` : `
+                    <avatar-wrapper color="${this.chipColor}" variant="${this.variant}" size="${size}">
+                        <span>
+                            ${this.label.split(" ").map((value, index) => {
+          if (index < 2) {
+            return value.toUpperCase().at(0);
+          }
+        }).join("")}
+                        </span>
+                    </avatar-wrapper>
+                `;
+      } else {
+        return this.isChip ? `
+                    <dota-chip color="${this.chipColor}" size="sm" position="${this.chipPosition}">
+                        <avatar-wrapper color="${this.chipColor}" variant="${this.variant}" size="${size}">
+                            <dota-icon name="${this.icon}" color="${this.chipColor}" size="${size}" variant="${this.variant}"></dota-icon>
+                        </avatar-wrapper>
+                    </dota-chip>
+                ` : `
+                    <avatar-wrapper color="${this.chipColor}" variant="${this.variant}" size="${size}">
+                        <dota-icon name="${this.icon}" color="${this.chipColor}" size="${size}" variant="${this.variant}"></dota-icon>
+                    </avatar-wrapper>
+                `;
+      }
+    });
+  }
+  render() {
+    return this.template();
+  }
+};
+__decorateClass$4([
+  PropertyDecorator({
+    name: "img",
+    type: StringType
+  })
+], exports.AvatarComponent.prototype, "img", 2);
+__decorateClass$4([
+  PropertyDecorator({
+    name: "img-alt",
+    type: StringType
+  })
+], exports.AvatarComponent.prototype, "imgAlt", 2);
+__decorateClass$4([
+  PropertyDecorator({
+    name: "label",
+    type: StringType
+  })
+], exports.AvatarComponent.prototype, "label", 2);
+__decorateClass$4([
+  PropertyDecorator({
+    name: "icon",
+    type: StringType
+  })
+], exports.AvatarComponent.prototype, "icon", 2);
+__decorateClass$4([
+  PropertyDecorator({
+    name: "is-chip",
+    type: BooleanType
+  })
+], exports.AvatarComponent.prototype, "isChip", 2);
+__decorateClass$4([
+  PropertyDecorator({
+    name: "chip-text",
+    type: StringType
+  })
+], exports.AvatarComponent.prototype, "chipText", 2);
+__decorateClass$4([
+  PropertyDecorator({
+    name: "chip-color",
+    type: StringType
+  })
+], exports.AvatarComponent.prototype, "chipColor", 2);
+__decorateClass$4([
+  PropertyDecorator({
+    name: "chip-position",
+    type: StringType
+  })
+], exports.AvatarComponent.prototype, "chipPosition", 2);
+__decorateClass$4([
+  PropertyDecorator({
+    name: "variant",
+    type: StringType
+  })
+], exports.AvatarComponent.prototype, "variant", 2);
+__decorateClass$4([
+  PropertyDecorator({
+    name: "size",
+    type: StringType
+  })
+], exports.AvatarComponent.prototype, "size", 2);
+exports.AvatarComponent = __decorateClass$4([
+  ComponentDecorator({
+    selector: "d-avatar",
+    shadow: false
+  })
+], exports.AvatarComponent);
+exports.AvatarWrapper = class AvatarWrapper extends BaseElement {
+  constructor() {
+    super();
+    /** Content to be rendered inside the avatar wrapper */
+    __publicField(this, "content");
+    __publicField(this, "color");
+    __publicField(this, "variant");
+    __publicField(this, "size");
+    this.content = this.innerHTML;
+  }
+  render() {
+    const color = AvatarConfig.color[this.color] || AvatarConfig.color.gray;
+    const variant = color[this.variant] || color.solid;
+    const size = AvatarConfig.size[this.size] || AvatarConfig.size.lg;
+    return `
+            <div class="rounded-full content-center ${variant} ${size} flex items-center justify-center font-semibold overflow-hidden">
+                ${this.content}
+            </div>
+        `;
+  }
+};
+__decorateClass$4([
+  PropertyDecorator({
+    name: "color",
+    type: StringType
+  })
+], exports.AvatarWrapper.prototype, "color", 2);
+__decorateClass$4([
+  PropertyDecorator({
+    name: "variant",
+    type: StringType
+  })
+], exports.AvatarWrapper.prototype, "variant", 2);
+__decorateClass$4([
+  PropertyDecorator({
+    name: "size",
+    type: StringType
+  })
+], exports.AvatarWrapper.prototype, "size", 2);
+exports.AvatarWrapper = __decorateClass$4([
+  ComponentDecorator({
+    selector: "avatar-wrapper",
+    shadow: false
+  })
+], exports.AvatarWrapper);
+const AvatarConfig = {
+  color: IconStyle.color,
+  size: IconStyle.size
+};
+const ButtonStyle = {
+  base: "inline-flex relative justify-center items-center w-fit transition-all duration-300 active:scale-95 ease-in-out w-full",
+  size: {
+    xs: "px-1 py-0.5 text-xs",
+    sm: "px-1.5 py-1 text-sm",
+    md: "px-2 py-1 text-base",
+    lg: "px-3 py-1.5 text-lg",
+    xl: "px-4 py-0.5 text-lg",
+    "2xl": "px-5 py-0.5 text-xl",
+    "3xl": "px-5 py-0.5 text-2xl"
+  },
+  rounded: {
+    xs: "rounded-xs",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl",
+    "3xl": "rounded-3xl"
+  },
+  color: {
+    ...UIConfig.color
+  },
+  animation: {
+    fill: {
+      base: "buttonFill",
+      color: {
+        emerald: "after:bg-emerald-400 before:bg-emerald-500 dark:before:bg-emerald-500 hover:text-white",
+        blue: "after:bg-blue-400 before:bg-blue-500 dark:before:bg-blue-500 hover:text-white",
+        sky: "after:bg-sky-400 before:bg-sky-500 dark:before:bg-sky-500 hover:text-white",
+        indigo: "after:bg-indigo-400 before:bg-indigo-500 dark:before:bg-indigo-500 hover:text-white",
+        purple: "after:bg-purple-400 before:bg-purple-500 dark:before:bg-purple-500 hover:text-white",
+        cyan: "after:bg-cyan-400 before:bg-cyan-500 dark:before:bg-cyan-500 hover:text-white",
+        green: "after:bg-green-400 before:bg-green-500 dark:before:bg-green-500 hover:text-white",
+        teal: "after:bg-teal-400 before:bg-teal-500 dark:before:bg-teal-500 hover:text-white",
+        orange: "after:bg-orange-400 before:bg-orange-500 dark:before:bg-orange-500 hover:text-white",
+        yellow: "after:bg-yellow-400 before:bg-yellow-500 dark:before:bg-yellow-500 hover:text-white",
+        rose: "after:bg-rose-400 before:bg-rose-500 dark:before:bg-rose-500 hover:text-white",
+        violet: "after:bg-violet-400 before:bg-violet-500 dark:before:bg-violet-500 hover:text-white",
+        slate: "after:bg-slate-400 before:bg-slate-500 dark:before:bg-slate-500 hover:text-white",
+        gray: "after:bg-gray-400 before:bg-gray-500 dark:before:bg-gray-500 hover:text-white",
+        pink: "after:bg-pink-400 before:bg-pink-500 dark:before:bg-pink-500 hover:text-white",
+        fuchsia: "after:bg-fuchsia-400 before:bg-fuchsia-500 dark:before:bg-fuchsia-500 hover:text-white"
+      }
+    }
+  }
+};
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$2(target, key, result);
+  return result;
+};
+exports.ButtonComponent = class ButtonComponent extends BaseElement {
+  constructor() {
+    super();
+    /** Inner content of the button */
+    __publicField(this, "content");
+    __publicField(this, "animation");
+    __publicField(this, "className");
+    __publicField(this, "label");
+    __publicField(this, "color");
+    __publicField(this, "variant");
+    __publicField(this, "icon");
+    __publicField(this, "loading");
+    __publicField(this, "iconPosition");
+    __publicField(this, "animationColor");
+    __publicField(this, "type");
+    __publicField(this, "size");
+    __publicField(this, "rounded");
+    __publicField(this, "template", () => {
+      var _a2, _b2, _c2, _d2;
+      const iconComponent = this.icon ? `<dota-icon class="relative block" name="${this.icon}" size="${this.size || "md"}"></dota-icon>` : "";
+      const size = ((_a2 = ButtonStyle.size) == null ? void 0 : _a2[this.size ?? "md"]) ?? "";
+      const round = ((_b2 = ButtonStyle.rounded) == null ? void 0 : _b2[this.rounded]) ?? "";
+      let content;
+      switch (this.iconPosition) {
+        case "forward": {
+          content = `
+                    <p>${this.label || this.content}</p>
+                   ${iconComponent}
+                `;
+          break;
+        }
+        case "leading": {
+          content = `
+                    ${iconComponent}
+                    <p>${this.label || this.content}</p>
+                `;
+          break;
+        }
+        default: {
+          content = `
+                    ${iconComponent}
+                    <p>${this.label || this.content}</p>
+                `;
+        }
+      }
+      if (this.animation) {
+        return `
+                <button class="${ButtonStyle.base} ${ButtonStyle.animation[this.animation || "fill"].base} ${size} ${round}
+                               ${ButtonStyle.animation[this.animation ?? "fill"].color[this.animationColor ?? "indigo"]}
+                               
+                ">
+                    ${this.label || this.content}
+                </button>
+            `;
+      }
+      const color = ((_d2 = (_c2 = ButtonStyle.color) == null ? void 0 : _c2[this.color ?? "none"]) == null ? void 0 : _d2[this.variant ?? "solid"]) ?? "";
+      return `
+            <button class="${ButtonStyle.base} ${color} ${size} ${round}">
+                ${content}
+            </button>
+        `;
+    });
+    this.content = this.innerHTML;
+  }
+  render() {
+    return this.template();
+  }
+};
+__decorateClass$3([
+  PropertyDecorator({ name: "animation", type: StringType })
+], exports.ButtonComponent.prototype, "animation", 2);
+__decorateClass$3([
+  PropertyDecorator({ name: "className", type: StringType })
+], exports.ButtonComponent.prototype, "className", 2);
+__decorateClass$3([
+  PropertyDecorator({ name: "label", type: StringType })
+], exports.ButtonComponent.prototype, "label", 2);
+__decorateClass$3([
+  PropertyDecorator({ name: "color", type: StringType })
+], exports.ButtonComponent.prototype, "color", 2);
+__decorateClass$3([
+  PropertyDecorator({ name: "variant", type: StringType })
+], exports.ButtonComponent.prototype, "variant", 2);
+__decorateClass$3([
+  PropertyDecorator({ name: "icon", type: StringType })
+], exports.ButtonComponent.prototype, "icon", 2);
+__decorateClass$3([
+  PropertyDecorator({ name: "loading", type: BooleanType })
+], exports.ButtonComponent.prototype, "loading", 2);
+__decorateClass$3([
+  PropertyDecorator({ name: "icon-position", type: StringType })
+], exports.ButtonComponent.prototype, "iconPosition", 2);
+__decorateClass$3([
+  PropertyDecorator({ name: "animation-color", type: StringType })
+], exports.ButtonComponent.prototype, "animationColor", 2);
+__decorateClass$3([
+  PropertyDecorator({ name: "type", type: StringType })
+], exports.ButtonComponent.prototype, "type", 2);
+__decorateClass$3([
+  PropertyDecorator({ name: "size", type: StringType })
+], exports.ButtonComponent.prototype, "size", 2);
+__decorateClass$3([
+  PropertyDecorator({ name: "round", type: StringType })
+], exports.ButtonComponent.prototype, "rounded", 2);
+exports.ButtonComponent = __decorateClass$3([
+  ComponentDecorator({
+    selector: "dota-button",
+    shadow: false
+  })
+], exports.ButtonComponent);
+function debounce(func, wait) {
+  let timeout;
+  return function(...args) {
+    return new Promise((resolve) => {
+      clearTimeout(timeout);
+      timeout = window.setTimeout(() => {
+        const result = func.apply(this, args);
+        resolve(result);
+      }, wait);
+    });
+  };
+}
+const isElementInViewport = debounce((element) => {
+  const rect = element.getBoundingClientRect();
+  const viewportHeight = getViewportHeight();
+  const viewportWidth = getViewportWidth();
+  return rect.x <= viewportWidth && rect.y <= viewportHeight;
+}, 2e3);
+const elementPositionInViewport = (element) => {
+  const rect = element.getBoundingClientRect();
+  const position = {
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    left: rect.left
+  };
+  return position;
+};
+const calculateElementSize = (element) => {
+  const rect = element.getBoundingClientRect();
+  const width = rect.width;
+  const height = rect.height;
+  return { width, height };
+};
+const calculatePosition = (element) => {
+  const rect = element.getBoundingClientRect();
+  return {
+    left: rect.x + window.scrollX,
+    top: rect.y + window.scrollY
+  };
+};
+const getViewportHeight = () => {
+  return window.innerHeight || document.documentElement.clientHeight;
+};
+const getViewportWidth = () => {
+  return window.innerWidth || document.documentElement.clientWidth;
+};
+function extractSizeAndPositions(reference, target) {
+  const referencePosition = calculatePosition(reference);
+  const referenceSize = calculateElementSize(reference);
+  const targetSize = calculateElementSize(target);
+  const targetPosition = calculatePosition(target);
+  return { referencePosition, referenceSize, targetSize, targetPosition };
+}
+const getBottomCenterCoords = (reference, target, offset) => {
+  const { referencePosition, referenceSize, targetSize } = extractSizeAndPositions(reference, target);
+  const totalOffset = offset + referenceSize.height;
+  const top = totalOffset + referencePosition.top;
+  const widthDiff = targetSize.width - referenceSize.width;
+  const left = referencePosition.left - widthDiff / 2;
+  return { left, top };
+};
+const getTopCenterCoords = (reference, target, offset) => {
+  const { referencePosition, referenceSize, targetSize } = extractSizeAndPositions(reference, target);
+  const top = referencePosition.top - offset - targetSize.height;
+  const widthDiff = targetSize.width - referenceSize.width;
+  const left = referencePosition.left - widthDiff / 2;
+  return { left, top };
+};
+const getRightCenterCoords = (reference, target, offset) => {
+  const { referencePosition, referenceSize, targetSize } = extractSizeAndPositions(reference, target);
+  const top = referencePosition.top - targetSize.height / 2 + referenceSize.height / 2;
+  const left = referencePosition.left + referenceSize.width + offset;
+  return { left, top };
+};
+const getLeftCenterCoords = (reference, target, offset) => {
+  const { referencePosition, referenceSize, targetSize } = extractSizeAndPositions(reference, target);
+  const top = referencePosition.top - targetSize.height / 2 + referenceSize.height / 2;
+  const left = referencePosition.left - offset - targetSize.width;
+  return { left, top };
+};
+class PositionCalculator {
+  constructor() {
+    __publicField(this, "_reference");
+    __publicField(this, "_target");
+    __publicField(this, "_placement", "bottom");
+    __publicField(this, "_offset", 0);
+  }
+  /**
+   * Sets the reference element.
+   *
+   * @param element - The reference HTML element.
+   * @returns The current instance of PositionCalculator for method chaining.
+   */
+  reference(element) {
+    this._reference = element;
+    return this;
+  }
+  /**
+   * Sets the target element.
+   *
+   * @param element - The target HTML element.
+   * @returns The current instance of PositionCalculator for method chaining.
+   */
+  target(element) {
+    this._target = element;
+    return this;
+  }
+  /**
+   * Sets the placement direction for the target element.
+   *
+   * @param value - The placement direction ('bottom', 'left', 'top', or 'right').
+   * @returns The current instance of PositionCalculator for method chaining.
+   */
+  placement(value) {
+    this._placement = value;
+    return this;
+  }
+  /**
+   * Sets the offset in pixels to apply to the target element.
+   *
+   * @param value - The offset in pixels.
+   * @returns The current instance of PositionCalculator for method chaining.
+   */
+  offset(value) {
+    this._offset = value;
+    return this;
+  }
+  /**
+   * Calculates the coordinates for positioning the target element based on the specified placement and offset.
+   *
+   * @returns An object representing the coordinates with `left` and `top` properties.
+   */
+  calculate() {
+    switch (this._placement) {
+      case "bottom": {
+        return getBottomCenterCoords(this._reference, this._target, this._offset);
+      }
+      case "left": {
+        return getLeftCenterCoords(this._reference, this._target, this._offset);
+      }
+      case "top": {
+        return getTopCenterCoords(this._reference, this._target, this._offset);
+      }
+      case "right": {
+        return getRightCenterCoords(this._reference, this._target, this._offset);
+      }
+    }
+  }
+}
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$1(target, key, result);
+  return result;
+};
+exports.PopoverComponent = class PopoverComponent extends dotaCore.BaseElement {
+  constructor() {
+    super();
+    __publicField(this, "isOpen");
+    __publicField(this, "placement");
+    __publicField(this, "offset");
+    /**
+     * Content of the trigger element
+     */
+    __publicField(this, "label");
+    /**
+     * Content to be displayed in the popover
+     */
+    __publicField(this, "content");
+    __publicField(this, "posX");
+    __publicField(this, "posY");
+    this.extractResource();
+    this.posX = 0;
+    this.posY = 0;
+  }
+  extractResource() {
+    const template = this.querySelector("#panel");
+    if (template) {
+      this.content = template.innerHTML;
+    }
+    const firstChild = this.firstElementChild;
+    if (firstChild) {
+      this.label = firstChild.outerHTML;
+    }
+  }
+  async afterViewInit() {
+    console.log("Initiated Popover");
+    this.updatePosition();
+  }
+  handlePopover() {
+    this.isOpen = !this.isOpen;
+    this.updatePosition();
+  }
+  updatePosition() {
+    if (!this.isOpen) return;
+    const button = this.querySelector("#button");
+    const popper = this.querySelector("#tooltip");
+    const position = new PositionCalculator().reference(button).target(popper).offset(5).placement(this.placement).calculate();
+    this.posY = position.top;
+    this.posX = position.left;
+  }
+  handleWindowClick(event) {
+    const path = event.composedPath();
+    if (!path.includes(this)) {
+      this.isOpen = false;
+      this.status = false;
+    }
+  }
+  render() {
+    return `
+            <button id="button" aria-describedby="tooltip">
+                ${this.label}
+            </button>
+            <div id="tooltip" role="tooltip" class="${this.isOpen ? "" : "hidden"}" style="top: ${this.posY}px; left: ${this.posX}px">
+                ${this.content}
+            </div>
+        `;
+  }
+};
+__decorateClass$2([
+  dotaCore.Property({
+    name: "is-open",
+    type: dotaCore.Boolean
+  })
+], exports.PopoverComponent.prototype, "isOpen", 2);
+__decorateClass$2([
+  dotaCore.Property({
+    name: "placement",
+    type: dotaCore.String
+  })
+], exports.PopoverComponent.prototype, "placement", 2);
+__decorateClass$2([
+  dotaCore.Property({
+    name: "offset",
+    type: dotaCore.String
+  })
+], exports.PopoverComponent.prototype, "offset", 2);
+__decorateClass$2([
+  dotaCore.Property({
+    name: "pos-x",
+    type: dotaCore.Number
+  })
+], exports.PopoverComponent.prototype, "posX", 2);
+__decorateClass$2([
+  dotaCore.Property({
+    name: "pos-y",
+    type: dotaCore.Number
+  })
+], exports.PopoverComponent.prototype, "posY", 2);
+__decorateClass$2([
+  dotaCore.AfterInit()
+], exports.PopoverComponent.prototype, "afterViewInit", 1);
+__decorateClass$2([
+  dotaCore.BindEvent({ event: "click", id: "#button" })
+], exports.PopoverComponent.prototype, "handlePopover", 1);
+__decorateClass$2([
+  dotaCore.WindowListener({ event: ["resize", "scroll"] })
+], exports.PopoverComponent.prototype, "updatePosition", 1);
+__decorateClass$2([
+  dotaCore.WindowListener({ event: "click" })
+], exports.PopoverComponent.prototype, "handleWindowClick", 1);
+exports.PopoverComponent = __decorateClass$2([
+  dotaCore.Component({
+    selector: "dota-popover",
+    shadow: false
+  })
+], exports.PopoverComponent);
+var __defProp2 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp2(target, key, result);
+  return result;
+};
+exports.PlaceholderComponent = class PlaceholderComponent extends BaseElement {
+  constructor() {
+    super();
+    __publicField(this, "className");
+  }
+  render() {
+    return `
+            <div class="bg-slate-400 flex justify-center items-center p-1 rounded-lg overflow-hidden ${this.className}">
+                <div class="placeholder w-full h-full bg-slate-300 rounded-lg"></div>
+            </div>
+        `;
+  }
+};
+__decorateClass$1([
+  PropertyDecorator({ name: "classname", type: StringType })
+], exports.PlaceholderComponent.prototype, "className", 2);
+exports.PlaceholderComponent = __decorateClass$1([
+  ComponentDecorator({
+    selector: "dota-placeholder",
+    shadow: false
+  })
+], exports.PlaceholderComponent);
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(result) || result;
+  return result;
+};
+exports.BlobsComponent = class BlobsComponent extends BaseElement {
+  constructor() {
+    super();
+    __publicField(this, "content");
+    this.content = this.innerHTML;
+  }
+  render() {
+    return `
+            <div class="bg-gray-50 min-h-screen flex items-center justify-center px-16">
+              <div class="relative w-full max-w-lg">
+                <div class="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
+                <div class="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
+                <div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
+                <div class="relative">
+                  ${this.content}
+                </div>
+              </div>
+            </div>
+        `;
+  }
+};
+exports.BlobsComponent = __decorateClass([
+  ComponentDecorator({
+    selector: "blob-animation",
+    shadow: false
+  })
+], exports.BlobsComponent);
+exports.AccordionConfig = AccordionStyle;
+exports.BadgeConfig = BadgeStyle;
+exports.ButtonConfig = ButtonStyle;
+exports.ChipStyle = ChipStyle;
+exports.IconStyle = IconStyle;
+exports.ModalConfig = ModalStyle;
+exports.PositionCalculator = PositionCalculator;
+exports.UIConfig = UIConfig;
+exports.calculateElementSize = calculateElementSize;
+exports.calculatePosition = calculatePosition;
+exports.debounce = debounce;
+exports.elementPositionInViewport = elementPositionInViewport;
+exports.getBottomCenterCoords = getBottomCenterCoords;
+exports.getLeftCenterCoords = getLeftCenterCoords;
+exports.getRightCenterCoords = getRightCenterCoords;
+exports.getTopCenterCoords = getTopCenterCoords;
+exports.isElementInViewport = isElementInViewport;