@knapsack/sandbox-components 4.68.14--canary.4532.73337f0.0 → 4.68.14--canary.4623.e51dcc2.0

package/dist/web-components/bundle.js

@@ -0,0 +1,890 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i5 = decorators.length - 1, decorator; i5 >= 0; i5--)
+    if (decorator = decorators[i5])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+
+// ../../../../node_modules/.pnpm/@lit+reactive-element@1.6.3/node_modules/@lit/reactive-element/css-tag.js
+var t = window;
+var e = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
+var s = Symbol();
+var n = /* @__PURE__ */ new WeakMap();
+var o = class {
+  constructor(t4, e7, n7) {
+    if (this._$cssResult$ = true, n7 !== s)
+      throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = t4, this.t = e7;
+  }
+  get styleSheet() {
+    let t4 = this.o;
+    const s5 = this.t;
+    if (e && void 0 === t4) {
+      const e7 = void 0 !== s5 && 1 === s5.length;
+      e7 && (t4 = n.get(s5)), void 0 === t4 && ((this.o = t4 = new CSSStyleSheet()).replaceSync(this.cssText), e7 && n.set(s5, t4));
+    }
+    return t4;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+var r = (t4) => new o("string" == typeof t4 ? t4 : t4 + "", void 0, s);
+var i = (t4, ...e7) => {
+  const n7 = 1 === t4.length ? t4[0] : e7.reduce((e8, s5, n8) => e8 + ((t5) => {
+    if (true === t5._$cssResult$)
+      return t5.cssText;
+    if ("number" == typeof t5)
+      return t5;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + t5 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(s5) + t4[n8 + 1], t4[0]);
+  return new o(n7, t4, s);
+};
+var S = (s5, n7) => {
+  e ? s5.adoptedStyleSheets = n7.map((t4) => t4 instanceof CSSStyleSheet ? t4 : t4.styleSheet) : n7.forEach((e7) => {
+    const n8 = document.createElement("style"), o7 = t.litNonce;
+    void 0 !== o7 && n8.setAttribute("nonce", o7), n8.textContent = e7.cssText, s5.appendChild(n8);
+  });
+};
+var c = e ? (t4) => t4 : (t4) => t4 instanceof CSSStyleSheet ? ((t5) => {
+  let e7 = "";
+  for (const s5 of t5.cssRules)
+    e7 += s5.cssText;
+  return r(e7);
+})(t4) : t4;
+
+// ../../../../node_modules/.pnpm/@lit+reactive-element@1.6.3/node_modules/@lit/reactive-element/reactive-element.js
+var s2;
+var e2 = window;
+var r2 = e2.trustedTypes;
+var h = r2 ? r2.emptyScript : "";
+var o2 = e2.reactiveElementPolyfillSupport;
+var n2 = { toAttribute(t4, i5) {
+  switch (i5) {
+    case Boolean:
+      t4 = t4 ? h : null;
+      break;
+    case Object:
+    case Array:
+      t4 = null == t4 ? t4 : JSON.stringify(t4);
+  }
+  return t4;
+}, fromAttribute(t4, i5) {
+  let s5 = t4;
+  switch (i5) {
+    case Boolean:
+      s5 = null !== t4;
+      break;
+    case Number:
+      s5 = null === t4 ? null : Number(t4);
+      break;
+    case Object:
+    case Array:
+      try {
+        s5 = JSON.parse(t4);
+      } catch (t5) {
+        s5 = null;
+      }
+  }
+  return s5;
+} };
+var a = (t4, i5) => i5 !== t4 && (i5 == i5 || t4 == t4);
+var l = { attribute: true, type: String, converter: n2, reflect: false, hasChanged: a };
+var d = "finalized";
+var u = class extends HTMLElement {
+  constructor() {
+    super(), this._$Ei = /* @__PURE__ */ new Map(), this.isUpdatePending = false, this.hasUpdated = false, this._$El = null, this._$Eu();
+  }
+  static addInitializer(t4) {
+    var i5;
+    this.finalize(), (null !== (i5 = this.h) && void 0 !== i5 ? i5 : this.h = []).push(t4);
+  }
+  static get observedAttributes() {
+    this.finalize();
+    const t4 = [];
+    return this.elementProperties.forEach((i5, s5) => {
+      const e7 = this._$Ep(s5, i5);
+      void 0 !== e7 && (this._$Ev.set(e7, s5), t4.push(e7));
+    }), t4;
+  }
+  static createProperty(t4, i5 = l) {
+    if (i5.state && (i5.attribute = false), this.finalize(), this.elementProperties.set(t4, i5), !i5.noAccessor && !this.prototype.hasOwnProperty(t4)) {
+      const s5 = "symbol" == typeof t4 ? Symbol() : "__" + t4, e7 = this.getPropertyDescriptor(t4, s5, i5);
+      void 0 !== e7 && Object.defineProperty(this.prototype, t4, e7);
+    }
+  }
+  static getPropertyDescriptor(t4, i5, s5) {
+    return { get() {
+      return this[i5];
+    }, set(e7) {
+      const r4 = this[t4];
+      this[i5] = e7, this.requestUpdate(t4, r4, s5);
+    }, configurable: true, enumerable: true };
+  }
+  static getPropertyOptions(t4) {
+    return this.elementProperties.get(t4) || l;
+  }
+  static finalize() {
+    if (this.hasOwnProperty(d))
+      return false;
+    this[d] = true;
+    const t4 = Object.getPrototypeOf(this);
+    if (t4.finalize(), void 0 !== t4.h && (this.h = [...t4.h]), this.elementProperties = new Map(t4.elementProperties), this._$Ev = /* @__PURE__ */ new Map(), this.hasOwnProperty("properties")) {
+      const t5 = this.properties, i5 = [...Object.getOwnPropertyNames(t5), ...Object.getOwnPropertySymbols(t5)];
+      for (const s5 of i5)
+        this.createProperty(s5, t5[s5]);
+    }
+    return this.elementStyles = this.finalizeStyles(this.styles), true;
+  }
+  static finalizeStyles(i5) {
+    const s5 = [];
+    if (Array.isArray(i5)) {
+      const e7 = new Set(i5.flat(1 / 0).reverse());
+      for (const i6 of e7)
+        s5.unshift(c(i6));
+    } else
+      void 0 !== i5 && s5.push(c(i5));
+    return s5;
+  }
+  static _$Ep(t4, i5) {
+    const s5 = i5.attribute;
+    return false === s5 ? void 0 : "string" == typeof s5 ? s5 : "string" == typeof t4 ? t4.toLowerCase() : void 0;
+  }
+  _$Eu() {
+    var t4;
+    this._$E_ = new Promise((t5) => this.enableUpdating = t5), this._$AL = /* @__PURE__ */ new Map(), this._$Eg(), this.requestUpdate(), null === (t4 = this.constructor.h) || void 0 === t4 || t4.forEach((t5) => t5(this));
+  }
+  addController(t4) {
+    var i5, s5;
+    (null !== (i5 = this._$ES) && void 0 !== i5 ? i5 : this._$ES = []).push(t4), void 0 !== this.renderRoot && this.isConnected && (null === (s5 = t4.hostConnected) || void 0 === s5 || s5.call(t4));
+  }
+  removeController(t4) {
+    var i5;
+    null === (i5 = this._$ES) || void 0 === i5 || i5.splice(this._$ES.indexOf(t4) >>> 0, 1);
+  }
+  _$Eg() {
+    this.constructor.elementProperties.forEach((t4, i5) => {
+      this.hasOwnProperty(i5) && (this._$Ei.set(i5, this[i5]), delete this[i5]);
+    });
+  }
+  createRenderRoot() {
+    var t4;
+    const s5 = null !== (t4 = this.shadowRoot) && void 0 !== t4 ? t4 : this.attachShadow(this.constructor.shadowRootOptions);
+    return S(s5, this.constructor.elementStyles), s5;
+  }
+  connectedCallback() {
+    var t4;
+    void 0 === this.renderRoot && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), null === (t4 = this._$ES) || void 0 === t4 || t4.forEach((t5) => {
+      var i5;
+      return null === (i5 = t5.hostConnected) || void 0 === i5 ? void 0 : i5.call(t5);
+    });
+  }
+  enableUpdating(t4) {
+  }
+  disconnectedCallback() {
+    var t4;
+    null === (t4 = this._$ES) || void 0 === t4 || t4.forEach((t5) => {
+      var i5;
+      return null === (i5 = t5.hostDisconnected) || void 0 === i5 ? void 0 : i5.call(t5);
+    });
+  }
+  attributeChangedCallback(t4, i5, s5) {
+    this._$AK(t4, s5);
+  }
+  _$EO(t4, i5, s5 = l) {
+    var e7;
+    const r4 = this.constructor._$Ep(t4, s5);
+    if (void 0 !== r4 && true === s5.reflect) {
+      const h3 = (void 0 !== (null === (e7 = s5.converter) || void 0 === e7 ? void 0 : e7.toAttribute) ? s5.converter : n2).toAttribute(i5, s5.type);
+      this._$El = t4, null == h3 ? this.removeAttribute(r4) : this.setAttribute(r4, h3), this._$El = null;
+    }
+  }
+  _$AK(t4, i5) {
+    var s5;
+    const e7 = this.constructor, r4 = e7._$Ev.get(t4);
+    if (void 0 !== r4 && this._$El !== r4) {
+      const t5 = e7.getPropertyOptions(r4), h3 = "function" == typeof t5.converter ? { fromAttribute: t5.converter } : void 0 !== (null === (s5 = t5.converter) || void 0 === s5 ? void 0 : s5.fromAttribute) ? t5.converter : n2;
+      this._$El = r4, this[r4] = h3.fromAttribute(i5, t5.type), this._$El = null;
+    }
+  }
+  requestUpdate(t4, i5, s5) {
+    let e7 = true;
+    void 0 !== t4 && (((s5 = s5 || this.constructor.getPropertyOptions(t4)).hasChanged || a)(this[t4], i5) ? (this._$AL.has(t4) || this._$AL.set(t4, i5), true === s5.reflect && this._$El !== t4 && (void 0 === this._$EC && (this._$EC = /* @__PURE__ */ new Map()), this._$EC.set(t4, s5))) : e7 = false), !this.isUpdatePending && e7 && (this._$E_ = this._$Ej());
+  }
+  async _$Ej() {
+    this.isUpdatePending = true;
+    try {
+      await this._$E_;
+    } catch (t5) {
+      Promise.reject(t5);
+    }
+    const t4 = this.scheduleUpdate();
+    return null != t4 && await t4, !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    var t4;
+    if (!this.isUpdatePending)
+      return;
+    this.hasUpdated, this._$Ei && (this._$Ei.forEach((t5, i6) => this[i6] = t5), this._$Ei = void 0);
+    let i5 = false;
+    const s5 = this._$AL;
+    try {
+      i5 = this.shouldUpdate(s5), i5 ? (this.willUpdate(s5), null === (t4 = this._$ES) || void 0 === t4 || t4.forEach((t5) => {
+        var i6;
+        return null === (i6 = t5.hostUpdate) || void 0 === i6 ? void 0 : i6.call(t5);
+      }), this.update(s5)) : this._$Ek();
+    } catch (t5) {
+      throw i5 = false, this._$Ek(), t5;
+    }
+    i5 && this._$AE(s5);
+  }
+  willUpdate(t4) {
+  }
+  _$AE(t4) {
+    var i5;
+    null === (i5 = this._$ES) || void 0 === i5 || i5.forEach((t5) => {
+      var i6;
+      return null === (i6 = t5.hostUpdated) || void 0 === i6 ? void 0 : i6.call(t5);
+    }), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t4)), this.updated(t4);
+  }
+  _$Ek() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$E_;
+  }
+  shouldUpdate(t4) {
+    return true;
+  }
+  update(t4) {
+    void 0 !== this._$EC && (this._$EC.forEach((t5, i5) => this._$EO(i5, this[i5], t5)), this._$EC = void 0), this._$Ek();
+  }
+  updated(t4) {
+  }
+  firstUpdated(t4) {
+  }
+};
+u[d] = true, u.elementProperties = /* @__PURE__ */ new Map(), u.elementStyles = [], u.shadowRootOptions = { mode: "open" }, null == o2 || o2({ ReactiveElement: u }), (null !== (s2 = e2.reactiveElementVersions) && void 0 !== s2 ? s2 : e2.reactiveElementVersions = []).push("1.6.3");
+
+// ../../../../node_modules/.pnpm/lit-html@2.8.0/node_modules/lit-html/lit-html.js
+var t2;
+var i2 = window;
+var s3 = i2.trustedTypes;
+var e3 = s3 ? s3.createPolicy("lit-html", { createHTML: (t4) => t4 }) : void 0;
+var o3 = "$lit$";
+var n3 = `lit$${(Math.random() + "").slice(9)}$`;
+var l2 = "?" + n3;
+var h2 = `<${l2}>`;
+var r3 = document;
+var u2 = () => r3.createComment("");
+var d2 = (t4) => null === t4 || "object" != typeof t4 && "function" != typeof t4;
+var c2 = Array.isArray;
+var v = (t4) => c2(t4) || "function" == typeof (null == t4 ? void 0 : t4[Symbol.iterator]);
+var a2 = "[ 	\n\f\r]";
+var f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g;
+var _ = /-->/g;
+var m = />/g;
+var p = RegExp(`>|${a2}(?:([^\\s"'>=/]+)(${a2}*=${a2}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g");
+var g = /'/g;
+var $ = /"/g;
+var y = /^(?:script|style|textarea|title)$/i;
+var w = (t4) => (i5, ...s5) => ({ _$litType$: t4, strings: i5, values: s5 });
+var x = w(1);
+var b = w(2);
+var T = Symbol.for("lit-noChange");
+var A = Symbol.for("lit-nothing");
+var E = /* @__PURE__ */ new WeakMap();
+var C = r3.createTreeWalker(r3, 129, null, false);
+function P(t4, i5) {
+  if (!Array.isArray(t4) || !t4.hasOwnProperty("raw"))
+    throw Error("invalid template strings array");
+  return void 0 !== e3 ? e3.createHTML(i5) : i5;
+}
+var V = (t4, i5) => {
+  const s5 = t4.length - 1, e7 = [];
+  let l5, r4 = 2 === i5 ? "<svg>" : "", u3 = f;
+  for (let i6 = 0; i6 < s5; i6++) {
+    const s6 = t4[i6];
+    let d3, c3, v2 = -1, a3 = 0;
+    for (; a3 < s6.length && (u3.lastIndex = a3, c3 = u3.exec(s6), null !== c3); )
+      a3 = u3.lastIndex, u3 === f ? "!--" === c3[1] ? u3 = _ : void 0 !== c3[1] ? u3 = m : void 0 !== c3[2] ? (y.test(c3[2]) && (l5 = RegExp("</" + c3[2], "g")), u3 = p) : void 0 !== c3[3] && (u3 = p) : u3 === p ? ">" === c3[0] ? (u3 = null != l5 ? l5 : f, v2 = -1) : void 0 === c3[1] ? v2 = -2 : (v2 = u3.lastIndex - c3[2].length, d3 = c3[1], u3 = void 0 === c3[3] ? p : '"' === c3[3] ? $ : g) : u3 === $ || u3 === g ? u3 = p : u3 === _ || u3 === m ? u3 = f : (u3 = p, l5 = void 0);
+    const w2 = u3 === p && t4[i6 + 1].startsWith("/>") ? " " : "";
+    r4 += u3 === f ? s6 + h2 : v2 >= 0 ? (e7.push(d3), s6.slice(0, v2) + o3 + s6.slice(v2) + n3 + w2) : s6 + n3 + (-2 === v2 ? (e7.push(void 0), i6) : w2);
+  }
+  return [P(t4, r4 + (t4[s5] || "<?>") + (2 === i5 ? "</svg>" : "")), e7];
+};
+var N = class _N {
+  constructor({ strings: t4, _$litType$: i5 }, e7) {
+    let h3;
+    this.parts = [];
+    let r4 = 0, d3 = 0;
+    const c3 = t4.length - 1, v2 = this.parts, [a3, f2] = V(t4, i5);
+    if (this.el = _N.createElement(a3, e7), C.currentNode = this.el.content, 2 === i5) {
+      const t5 = this.el.content, i6 = t5.firstChild;
+      i6.remove(), t5.append(...i6.childNodes);
+    }
+    for (; null !== (h3 = C.nextNode()) && v2.length < c3; ) {
+      if (1 === h3.nodeType) {
+        if (h3.hasAttributes()) {
+          const t5 = [];
+          for (const i6 of h3.getAttributeNames())
+            if (i6.endsWith(o3) || i6.startsWith(n3)) {
+              const s5 = f2[d3++];
+              if (t5.push(i6), void 0 !== s5) {
+                const t6 = h3.getAttribute(s5.toLowerCase() + o3).split(n3), i7 = /([.?@])?(.*)/.exec(s5);
+                v2.push({ type: 1, index: r4, name: i7[2], strings: t6, ctor: "." === i7[1] ? H : "?" === i7[1] ? L : "@" === i7[1] ? z : k });
+              } else
+                v2.push({ type: 6, index: r4 });
+            }
+          for (const i6 of t5)
+            h3.removeAttribute(i6);
+        }
+        if (y.test(h3.tagName)) {
+          const t5 = h3.textContent.split(n3), i6 = t5.length - 1;
+          if (i6 > 0) {
+            h3.textContent = s3 ? s3.emptyScript : "";
+            for (let s5 = 0; s5 < i6; s5++)
+              h3.append(t5[s5], u2()), C.nextNode(), v2.push({ type: 2, index: ++r4 });
+            h3.append(t5[i6], u2());
+          }
+        }
+      } else if (8 === h3.nodeType)
+        if (h3.data === l2)
+          v2.push({ type: 2, index: r4 });
+        else {
+          let t5 = -1;
+          for (; -1 !== (t5 = h3.data.indexOf(n3, t5 + 1)); )
+            v2.push({ type: 7, index: r4 }), t5 += n3.length - 1;
+        }
+      r4++;
+    }
+  }
+  static createElement(t4, i5) {
+    const s5 = r3.createElement("template");
+    return s5.innerHTML = t4, s5;
+  }
+};
+function S2(t4, i5, s5 = t4, e7) {
+  var o7, n7, l5, h3;
+  if (i5 === T)
+    return i5;
+  let r4 = void 0 !== e7 ? null === (o7 = s5._$Co) || void 0 === o7 ? void 0 : o7[e7] : s5._$Cl;
+  const u3 = d2(i5) ? void 0 : i5._$litDirective$;
+  return (null == r4 ? void 0 : r4.constructor) !== u3 && (null === (n7 = null == r4 ? void 0 : r4._$AO) || void 0 === n7 || n7.call(r4, false), void 0 === u3 ? r4 = void 0 : (r4 = new u3(t4), r4._$AT(t4, s5, e7)), void 0 !== e7 ? (null !== (l5 = (h3 = s5)._$Co) && void 0 !== l5 ? l5 : h3._$Co = [])[e7] = r4 : s5._$Cl = r4), void 0 !== r4 && (i5 = S2(t4, r4._$AS(t4, i5.values), r4, e7)), i5;
+}
+var M = class {
+  constructor(t4, i5) {
+    this._$AV = [], this._$AN = void 0, this._$AD = t4, this._$AM = i5;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(t4) {
+    var i5;
+    const { el: { content: s5 }, parts: e7 } = this._$AD, o7 = (null !== (i5 = null == t4 ? void 0 : t4.creationScope) && void 0 !== i5 ? i5 : r3).importNode(s5, true);
+    C.currentNode = o7;
+    let n7 = C.nextNode(), l5 = 0, h3 = 0, u3 = e7[0];
+    for (; void 0 !== u3; ) {
+      if (l5 === u3.index) {
+        let i6;
+        2 === u3.type ? i6 = new R(n7, n7.nextSibling, this, t4) : 1 === u3.type ? i6 = new u3.ctor(n7, u3.name, u3.strings, this, t4) : 6 === u3.type && (i6 = new Z(n7, this, t4)), this._$AV.push(i6), u3 = e7[++h3];
+      }
+      l5 !== (null == u3 ? void 0 : u3.index) && (n7 = C.nextNode(), l5++);
+    }
+    return C.currentNode = r3, o7;
+  }
+  v(t4) {
+    let i5 = 0;
+    for (const s5 of this._$AV)
+      void 0 !== s5 && (void 0 !== s5.strings ? (s5._$AI(t4, s5, i5), i5 += s5.strings.length - 2) : s5._$AI(t4[i5])), i5++;
+  }
+};
+var R = class _R {
+  constructor(t4, i5, s5, e7) {
+    var o7;
+    this.type = 2, this._$AH = A, this._$AN = void 0, this._$AA = t4, this._$AB = i5, this._$AM = s5, this.options = e7, this._$Cp = null === (o7 = null == e7 ? void 0 : e7.isConnected) || void 0 === o7 || o7;
+  }
+  get _$AU() {
+    var t4, i5;
+    return null !== (i5 = null === (t4 = this._$AM) || void 0 === t4 ? void 0 : t4._$AU) && void 0 !== i5 ? i5 : this._$Cp;
+  }
+  get parentNode() {
+    let t4 = this._$AA.parentNode;
+    const i5 = this._$AM;
+    return void 0 !== i5 && 11 === (null == t4 ? void 0 : t4.nodeType) && (t4 = i5.parentNode), t4;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(t4, i5 = this) {
+    t4 = S2(this, t4, i5), d2(t4) ? t4 === A || null == t4 || "" === t4 ? (this._$AH !== A && this._$AR(), this._$AH = A) : t4 !== this._$AH && t4 !== T && this._(t4) : void 0 !== t4._$litType$ ? this.g(t4) : void 0 !== t4.nodeType ? this.$(t4) : v(t4) ? this.T(t4) : this._(t4);
+  }
+  k(t4) {
+    return this._$AA.parentNode.insertBefore(t4, this._$AB);
+  }
+  $(t4) {
+    this._$AH !== t4 && (this._$AR(), this._$AH = this.k(t4));
+  }
+  _(t4) {
+    this._$AH !== A && d2(this._$AH) ? this._$AA.nextSibling.data = t4 : this.$(r3.createTextNode(t4)), this._$AH = t4;
+  }
+  g(t4) {
+    var i5;
+    const { values: s5, _$litType$: e7 } = t4, o7 = "number" == typeof e7 ? this._$AC(t4) : (void 0 === e7.el && (e7.el = N.createElement(P(e7.h, e7.h[0]), this.options)), e7);
+    if ((null === (i5 = this._$AH) || void 0 === i5 ? void 0 : i5._$AD) === o7)
+      this._$AH.v(s5);
+    else {
+      const t5 = new M(o7, this), i6 = t5.u(this.options);
+      t5.v(s5), this.$(i6), this._$AH = t5;
+    }
+  }
+  _$AC(t4) {
+    let i5 = E.get(t4.strings);
+    return void 0 === i5 && E.set(t4.strings, i5 = new N(t4)), i5;
+  }
+  T(t4) {
+    c2(this._$AH) || (this._$AH = [], this._$AR());
+    const i5 = this._$AH;
+    let s5, e7 = 0;
+    for (const o7 of t4)
+      e7 === i5.length ? i5.push(s5 = new _R(this.k(u2()), this.k(u2()), this, this.options)) : s5 = i5[e7], s5._$AI(o7), e7++;
+    e7 < i5.length && (this._$AR(s5 && s5._$AB.nextSibling, e7), i5.length = e7);
+  }
+  _$AR(t4 = this._$AA.nextSibling, i5) {
+    var s5;
+    for (null === (s5 = this._$AP) || void 0 === s5 || s5.call(this, false, true, i5); t4 && t4 !== this._$AB; ) {
+      const i6 = t4.nextSibling;
+      t4.remove(), t4 = i6;
+    }
+  }
+  setConnected(t4) {
+    var i5;
+    void 0 === this._$AM && (this._$Cp = t4, null === (i5 = this._$AP) || void 0 === i5 || i5.call(this, t4));
+  }
+};
+var k = class {
+  constructor(t4, i5, s5, e7, o7) {
+    this.type = 1, this._$AH = A, this._$AN = void 0, this.element = t4, this.name = i5, this._$AM = e7, this.options = o7, s5.length > 2 || "" !== s5[0] || "" !== s5[1] ? (this._$AH = Array(s5.length - 1).fill(new String()), this.strings = s5) : this._$AH = A;
+  }
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(t4, i5 = this, s5, e7) {
+    const o7 = this.strings;
+    let n7 = false;
+    if (void 0 === o7)
+      t4 = S2(this, t4, i5, 0), n7 = !d2(t4) || t4 !== this._$AH && t4 !== T, n7 && (this._$AH = t4);
+    else {
+      const e8 = t4;
+      let l5, h3;
+      for (t4 = o7[0], l5 = 0; l5 < o7.length - 1; l5++)
+        h3 = S2(this, e8[s5 + l5], i5, l5), h3 === T && (h3 = this._$AH[l5]), n7 || (n7 = !d2(h3) || h3 !== this._$AH[l5]), h3 === A ? t4 = A : t4 !== A && (t4 += (null != h3 ? h3 : "") + o7[l5 + 1]), this._$AH[l5] = h3;
+    }
+    n7 && !e7 && this.j(t4);
+  }
+  j(t4) {
+    t4 === A ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, null != t4 ? t4 : "");
+  }
+};
+var H = class extends k {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(t4) {
+    this.element[this.name] = t4 === A ? void 0 : t4;
+  }
+};
+var I = s3 ? s3.emptyScript : "";
+var L = class extends k {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(t4) {
+    t4 && t4 !== A ? this.element.setAttribute(this.name, I) : this.element.removeAttribute(this.name);
+  }
+};
+var z = class extends k {
+  constructor(t4, i5, s5, e7, o7) {
+    super(t4, i5, s5, e7, o7), this.type = 5;
+  }
+  _$AI(t4, i5 = this) {
+    var s5;
+    if ((t4 = null !== (s5 = S2(this, t4, i5, 0)) && void 0 !== s5 ? s5 : A) === T)
+      return;
+    const e7 = this._$AH, o7 = t4 === A && e7 !== A || t4.capture !== e7.capture || t4.once !== e7.once || t4.passive !== e7.passive, n7 = t4 !== A && (e7 === A || o7);
+    o7 && this.element.removeEventListener(this.name, this, e7), n7 && this.element.addEventListener(this.name, this, t4), this._$AH = t4;
+  }
+  handleEvent(t4) {
+    var i5, s5;
+    "function" == typeof this._$AH ? this._$AH.call(null !== (s5 = null === (i5 = this.options) || void 0 === i5 ? void 0 : i5.host) && void 0 !== s5 ? s5 : this.element, t4) : this._$AH.handleEvent(t4);
+  }
+};
+var Z = class {
+  constructor(t4, i5, s5) {
+    this.element = t4, this.type = 6, this._$AN = void 0, this._$AM = i5, this.options = s5;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(t4) {
+    S2(this, t4);
+  }
+};
+var B = i2.litHtmlPolyfillSupport;
+null == B || B(N, R), (null !== (t2 = i2.litHtmlVersions) && void 0 !== t2 ? t2 : i2.litHtmlVersions = []).push("2.8.0");
+var D = (t4, i5, s5) => {
+  var e7, o7;
+  const n7 = null !== (e7 = null == s5 ? void 0 : s5.renderBefore) && void 0 !== e7 ? e7 : i5;
+  let l5 = n7._$litPart$;
+  if (void 0 === l5) {
+    const t5 = null !== (o7 = null == s5 ? void 0 : s5.renderBefore) && void 0 !== o7 ? o7 : null;
+    n7._$litPart$ = l5 = new R(i5.insertBefore(u2(), t5), t5, void 0, null != s5 ? s5 : {});
+  }
+  return l5._$AI(t4), l5;
+};
+
+// ../../../../node_modules/.pnpm/lit-element@3.3.3/node_modules/lit-element/lit-element.js
+var l3;
+var o4;
+var s4 = class extends u {
+  constructor() {
+    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+  }
+  createRenderRoot() {
+    var t4, e7;
+    const i5 = super.createRenderRoot();
+    return null !== (t4 = (e7 = this.renderOptions).renderBefore) && void 0 !== t4 || (e7.renderBefore = i5.firstChild), i5;
+  }
+  update(t4) {
+    const i5 = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t4), this._$Do = D(i5, this.renderRoot, this.renderOptions);
+  }
+  connectedCallback() {
+    var t4;
+    super.connectedCallback(), null === (t4 = this._$Do) || void 0 === t4 || t4.setConnected(true);
+  }
+  disconnectedCallback() {
+    var t4;
+    super.disconnectedCallback(), null === (t4 = this._$Do) || void 0 === t4 || t4.setConnected(false);
+  }
+  render() {
+    return T;
+  }
+};
+s4.finalized = true, s4._$litElement$ = true, null === (l3 = globalThis.litElementHydrateSupport) || void 0 === l3 || l3.call(globalThis, { LitElement: s4 });
+var n4 = globalThis.litElementPolyfillSupport;
+null == n4 || n4({ LitElement: s4 });
+(null !== (o4 = globalThis.litElementVersions) && void 0 !== o4 ? o4 : globalThis.litElementVersions = []).push("3.3.3");
+
+// ../../../../node_modules/.pnpm/lit-html@2.8.0/node_modules/lit-html/directive.js
+var t3 = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 };
+var e4 = (t4) => (...e7) => ({ _$litDirective$: t4, values: e7 });
+var i3 = class {
+  constructor(t4) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t4, e7, i5) {
+    this._$Ct = t4, this._$AM = e7, this._$Ci = i5;
+  }
+  _$AS(t4, e7) {
+    return this.update(t4, e7);
+  }
+  update(t4, e7) {
+    return this.render(...e7);
+  }
+};
+
+// ../../../../node_modules/.pnpm/lit-html@2.8.0/node_modules/lit-html/directives/class-map.js
+var o5 = e4(class extends i3 {
+  constructor(t4) {
+    var i5;
+    if (super(t4), t4.type !== t3.ATTRIBUTE || "class" !== t4.name || (null === (i5 = t4.strings) || void 0 === i5 ? void 0 : i5.length) > 2)
+      throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
+  }
+  render(t4) {
+    return " " + Object.keys(t4).filter((i5) => t4[i5]).join(" ") + " ";
+  }
+  update(i5, [s5]) {
+    var r4, o7;
+    if (void 0 === this.it) {
+      this.it = /* @__PURE__ */ new Set(), void 0 !== i5.strings && (this.nt = new Set(i5.strings.join(" ").split(/\s/).filter((t4) => "" !== t4)));
+      for (const t4 in s5)
+        s5[t4] && !(null === (r4 = this.nt) || void 0 === r4 ? void 0 : r4.has(t4)) && this.it.add(t4);
+      return this.render(s5);
+    }
+    const e7 = i5.element.classList;
+    this.it.forEach((t4) => {
+      t4 in s5 || (e7.remove(t4), this.it.delete(t4));
+    });
+    for (const t4 in s5) {
+      const i6 = !!s5[t4];
+      i6 === this.it.has(t4) || (null === (o7 = this.nt) || void 0 === o7 ? void 0 : o7.has(t4)) || (i6 ? (e7.add(t4), this.it.add(t4)) : (e7.remove(t4), this.it.delete(t4)));
+    }
+    return T;
+  }
+});
+
+// ../../../../node_modules/.pnpm/@lit+reactive-element@1.6.3/node_modules/@lit/reactive-element/decorators/property.js
+var i4 = (i5, e7) => "method" === e7.kind && e7.descriptor && !("value" in e7.descriptor) ? { ...e7, finisher(n7) {
+  n7.createProperty(e7.key, i5);
+} } : { kind: "field", key: Symbol(), placement: "own", descriptor: {}, originalKey: e7.key, initializer() {
+  "function" == typeof e7.initializer && (this[e7.key] = e7.initializer.call(this));
+}, finisher(n7) {
+  n7.createProperty(e7.key, i5);
+} };
+var e5 = (i5, e7, n7) => {
+  e7.constructor.createProperty(n7, i5);
+};
+function n5(n7) {
+  return (t4, o7) => void 0 !== o7 ? e5(n7, t4, o7) : i4(n7, t4);
+}
+
+// ../../../../node_modules/.pnpm/@lit+reactive-element@1.6.3/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js
+var n6;
+var e6 = null != (null === (n6 = window.HTMLSlotElement) || void 0 === n6 ? void 0 : n6.prototype.assignedElements) ? (o7, n7) => o7.assignedElements(n7) : (o7, n7) => o7.assignedNodes(n7).filter((o8) => o8.nodeType === Node.ELEMENT_NODE);
+
+// src/web-components/button.ts
+var SimpleButton = class extends s4 {
+  constructor() {
+    super(...arguments);
+    this.label = "Click me";
+    this.size = "medium";
+    this.type = "filled";
+  }
+  _handleClick() {
+    console.log("Button clicked!");
+    this.dispatchEvent(new CustomEvent("button-click"));
+  }
+  render() {
+    const classes = {
+      button: true,
+      [`button--size-${this.size}`]: true,
+      [`button--type-${this.type}`]: true
+    };
+    return x`
+      <button @click=${this._handleClick} class=${o5(classes)}>
+        ${this.label}
+      </button>
+    `;
+  }
+};
+SimpleButton.shadowRootOptions = {
+  ...s4.shadowRootOptions,
+  mode: "open"
+};
+SimpleButton.styles = i`
+    .button {
+      border-radius: 4px;
+      border-radius: var(--radius-small);
+      border: 1px solid #7a34ed;
+      border: 1px solid var(--brand-color);
+      font-family: Inter;
+      font-family: var(--brand-font-family);
+      font-weight: 600;
+      transition: all 0.3s ease;
+    }
+
+    .button--size-small {
+      font-size: 12px;
+      padding-top: 4px;
+      padding-bottom: 4px;
+      padding-top: var(--spacing-xsmall);
+      padding-bottom: var(--spacing-xsmall);
+      padding-left: 12px;
+      padding-right: 12px;
+      padding-left: var(--spacing-medium);
+      padding-right: var(--spacing-medium);
+    }
+
+    .button--size-medium {
+      font-size: 14px;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      padding-top: var(--spacing-small);
+      padding-bottom: var(--spacing-small);
+      padding-left: 16px;
+      padding-right: 16px;
+      padding-left: var(--spacing-large);
+      padding-right: var(--spacing-large);
+    }
+
+    .button--size-large {
+      font-size: 16px;
+      padding-top: 12px;
+      padding-bottom: 12px;
+      padding-top: var(--spacing-medium);
+      padding-bottom: var(--spacing-medium);
+      padding-left: 24px;
+      padding-right: 24px;
+      padding-left: var(--spacing-xlarge);
+      padding-right: var(--spacing-xlarge);
+    }
+
+    .button--type-outlined {
+      background-color: #ffffff;
+      background-color: var(--color-white);
+      color: #7a34ed;
+      color: var(--brand-color);
+    }
+
+    .button--type-filled {
+      background-color: #7a34ed;
+      background-color: var(--brand-color);
+      color: #ffffff;
+      color: var(--color-white);
+    }
+  `;
+__decorateClass([
+  n5({ type: String })
+], SimpleButton.prototype, "label", 2);
+__decorateClass([
+  n5({ type: String })
+], SimpleButton.prototype, "size", 2);
+__decorateClass([
+  n5({ type: String })
+], SimpleButton.prototype, "type", 2);
+customElements.define("simple-button", SimpleButton);
+/*! Bundled license information:
+
+@lit/reactive-element/css-tag.js:
+  (**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/reactive-element.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/lit-html.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-element/lit-element.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/is-server.js:
+  (**
+   * @license
+   * Copyright 2022 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/directive.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/directives/class-map.js:
+  (**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/custom-element.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/property.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/state.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/base.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/event-options.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/query.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/query-all.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/query-async.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/query-assigned-elements.js:
+  (**
+   * @license
+   * Copyright 2021 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/query-assigned-nodes.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

package/dist/web-components/button.d.ts

@@ -1,2 +1,16 @@
-export {};
+import { LitElement } from 'lit';
+export declare class SimpleButton extends LitElement {
+    static shadowRootOptions: {
+        mode: "open";
+        delegatesFocus?: boolean;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    label: string;
+    size: 'small' | 'medium' | 'large';
+    type: 'filled' | 'outlined';
+    static styles: import("lit").CSSResult;
+    _handleClick(): void;
+    render(): import("lit").TemplateResult<1>;
+}
 //# sourceMappingURL=button.d.ts.map

package/dist/web-components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/web-components/button.ts"],"names":[],"mappings":""}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/web-components/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,iBAAiB;;;;;MAGwB;IAGhD,KAAK,SAAc;IAGnB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9C,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvC,MAAM,CAAC,MAAM,0BA6DX;IAEF,YAAY;IAKZ,MAAM;CAaP"}

package/dist/web-components/button.js

@@ -1,41 +1,116 @@
-class MyButton extends HTMLElement {
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { LitElement, css, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+export class SimpleButton extends LitElement {
     constructor() {
-        super();
-        this.buttonText = this.querySelector('slot')
-            .assignedNodes()[0]
-            .textContent.trim();
-        this.button = document.createElement('button');
-        this.button.id = 'my-button';
-        this.button.setAttribute('part', 'my-button');
-        this.button.textContent = this.buttonText;
-        this.button.addEventListener('click', this.handleClick.bind(this));
-        // Apply the styles to the button
-        this.applyStyles(this.button);
-        // Append the button to the shadow DOM
-        this.attachShadow({ mode: 'open' }).appendChild(this.button);
-    }
-    handleClick() {
+        super(...arguments);
+        this.label = 'Click me';
+        this.size = 'medium';
+        this.type = 'filled';
+    }
+    _handleClick() {
         console.log('Button clicked!');
+        this.dispatchEvent(new CustomEvent('button-click'));
     }
-    applyStyles(element) {
-        const style = document.createElement('style');
-        style.textContent = `
-      #my-button {
-        background-color: #4CAF50;
-        border: none;
-        color: white;
-        padding: 15px 32px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font-size: 16px;
-        margin: 4px 2px;
-        cursor: pointer;
-      }
+    render() {
+        const classes = {
+            button: true,
+            [`button--size-${this.size}`]: true,
+            [`button--type-${this.type}`]: true,
+        };
+        return html `
+      <button @click=${this._handleClick} class=${classMap(classes)}>
+        ${this.label}
+      </button>
     `;
-        element.shadowRoot.appendChild(style);
     }
 }
-customElements.define('my-button', MyButton);
-export {};
+SimpleButton.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    mode: 'open',
+};
+SimpleButton.styles = css `
+    .button {
+      border-radius: 4px;
+      border-radius: var(--radius-small);
+      border: 1px solid #7a34ed;
+      border: 1px solid var(--brand-color);
+      font-family: Inter;
+      font-family: var(--brand-font-family);
+      font-weight: 600;
+      transition: all 0.3s ease;
+    }
+
+    .button--size-small {
+      font-size: 12px;
+      padding-top: 4px;
+      padding-bottom: 4px;
+      padding-top: var(--spacing-xsmall);
+      padding-bottom: var(--spacing-xsmall);
+      padding-left: 12px;
+      padding-right: 12px;
+      padding-left: var(--spacing-medium);
+      padding-right: var(--spacing-medium);
+    }
+
+    .button--size-medium {
+      font-size: 14px;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      padding-top: var(--spacing-small);
+      padding-bottom: var(--spacing-small);
+      padding-left: 16px;
+      padding-right: 16px;
+      padding-left: var(--spacing-large);
+      padding-right: var(--spacing-large);
+    }
+
+    .button--size-large {
+      font-size: 16px;
+      padding-top: 12px;
+      padding-bottom: 12px;
+      padding-top: var(--spacing-medium);
+      padding-bottom: var(--spacing-medium);
+      padding-left: 24px;
+      padding-right: 24px;
+      padding-left: var(--spacing-xlarge);
+      padding-right: var(--spacing-xlarge);
+    }
+
+    .button--type-outlined {
+      background-color: #ffffff;
+      background-color: var(--color-white);
+      color: #7a34ed;
+      color: var(--brand-color);
+    }
+
+    .button--type-filled {
+      background-color: #7a34ed;
+      background-color: var(--brand-color);
+      color: #ffffff;
+      color: var(--color-white);
+    }
+  `;
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], SimpleButton.prototype, "label", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SimpleButton.prototype, "size", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SimpleButton.prototype, "type", void 0);
+customElements.define('simple-button', SimpleButton);
 //# sourceMappingURL=button.js.map

package/dist/web-components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/web-components/button.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IAGhC;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;aACzC,aAAa,EAAE,CAAC,CAAC,CAAC;aAClB,WAAW,CAAC,IAAI,EAAE,CAAC;QAEtB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC/C,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,WAAW,CAAC;QAC7B,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;QAC9C,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC;QAC1C,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAEnE,iCAAiC;QACjC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAE9B,sCAAsC;QACtC,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/D,CAAC;IAED,WAAW;QACT,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACjC,CAAC;IAED,WAAW,CAAC,OAAoB;QAC9B,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,WAAW,GAAG;;;;;;;;;;;;;KAanB,CAAC;QACF,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/web-components/button.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAOE,UAAK,GAAG,UAAU,CAAC;QAGnB,SAAI,GAAiC,QAAQ,CAAC;QAG9C,SAAI,GAA0B,QAAQ,CAAC;IAmFzC,CAAC;IAlBC,YAAY;QACV,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,MAAM,EAAE,IAAI;YACZ,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YACnC,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;SACpC,CAAC;QAEF,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,YAAY,UAAU,QAAQ,CAAC,OAAO,CAAC;UACzD,IAAI,CAAC,KAAK;;KAEf,CAAC;IACJ,CAAC;;AA9FM,8BAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,IAAI,EAAE,MAAM;CACiC,AAHvB,CAGwB;AAWzC,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DlB,AA7DY,CA6DX;AArEF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CACmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CACY;AAqFzC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knapsack/sandbox-components",
   "description": "",
-  "version": "4.68.14--canary.4532.73337f0.0",
+  "version": "4.68.14--canary.4623.e51dcc2.0",
   "type": "module",
   "exports": {
     "./css": "./dist/css/ks-sandbox-styles.css",
@@ -17,14 +17,18 @@
     "./vue/*": "./src/vue/*",
     "./web-components": {
       "types": "./dist/web-components/index.d.ts",
-      "default": "./dist/web-components/index.js"
+      "default": "./dist/web-components/bundle.js"
     }
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./src/web-components/*"
+  ],
   "scripts": {
     "build": "run-p build:*",
     "build:css": "postcss ./src/css/index.css --output ./dist/css/ks-sandbox-styles.css",
     "build:ts": "tsc",
+    "build:wc": "esbuild --bundle --outfile=./dist/web-components/bundle.js --format=esm --platform=browser --target=es2020 --loader:.js=jsx --loader:.svg=file --loader:.png=file --loader:.json=json ./src/web-components/index.ts",
+    "build:wc:type-info": "npx web-component-analyzer src/web-components --outFile dist/web-components/custom-elements.json",
     "clean": "rm -rf ./dist",
     "lint": "eslint ./",
     "start": "run-p watch:*",
@@ -32,18 +36,21 @@
     "watch:ts": "npm run build:ts -- --watch --preserveWatchOutput"
   },
   "dependencies": {
+    "@webcomponents/custom-elements": "^1.6.0",
     "clsx": "^2.1.1",
+    "lit": "^2.7.0",
     "react": "^18.3.1",
     "vue": "^3.4.27"
   },
   "devDependencies": {
-    "@knapsack/eslint-config-starter": "4.68.14--canary.4532.73337f0.0",
-    "@knapsack/postcss-config-starter": "4.68.14--canary.4532.73337f0.0",
-    "@knapsack/prettier-config": "4.68.14--canary.4532.73337f0.0",
-    "@knapsack/sandbox-tokens": "4.68.14--canary.4532.73337f0.0",
-    "@knapsack/typescript-config-starter": "4.68.14--canary.4532.73337f0.0",
+    "@knapsack/eslint-config-starter": "4.68.14--canary.4623.e51dcc2.0",
+    "@knapsack/postcss-config-starter": "4.68.14--canary.4623.e51dcc2.0",
+    "@knapsack/prettier-config": "4.68.14--canary.4623.e51dcc2.0",
+    "@knapsack/sandbox-tokens": "4.68.14--canary.4623.e51dcc2.0",
+    "@knapsack/typescript-config-starter": "4.68.14--canary.4623.e51dcc2.0",
     "@types/node": "^20.16.1",
     "@types/react": "^18.3.3",
+    "esbuild": "^0.20.2",
     "eslint": "^8.57.0",
     "npm-run-all2": "^5.0.2",
     "postcss-cli": "^9.1.0",
@@ -59,5 +66,5 @@
     "directory": "apps/ui/libs/sandbox-components",
     "type": "git"
   },
-  "gitHead": "73337f05d70f64e83c732d6a0d06c087f2b24688"
+  "gitHead": "e51dcc2edbf13b5685c98e0951680e69505d4bb7"
 }

package/src/web-components/button.ts

@@ -1,48 +1,103 @@
-class MyButton extends HTMLElement {
-  buttonText: string;
-  button: HTMLButtonElement;
-  constructor() {
-    super();
-
-    this.buttonText = this.querySelector('slot')
-      .assignedNodes()[0]
-      .textContent.trim();
-
-    this.button = document.createElement('button');
-    this.button.id = 'my-button';
-    this.button.setAttribute('part', 'my-button');
-    this.button.textContent = this.buttonText;
-    this.button.addEventListener('click', this.handleClick.bind(this));
-
-    // Apply the styles to the button
-    this.applyStyles(this.button);
-
-    // Append the button to the shadow DOM
-    this.attachShadow({ mode: 'open' }).appendChild(this.button);
-  }
+import { LitElement, css, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+
+export class SimpleButton extends LitElement {
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    mode: 'open',
+  } satisfies typeof LitElement.shadowRootOptions;
+
+  @property({ type: String })
+  label = 'Click me';
+
+  @property({ type: String })
+  size: 'small' | 'medium' | 'large' = 'medium';
+
+  @property({ type: String })
+  type: 'filled' | 'outlined' = 'filled';
+
+  static styles = css`
+    .button {
+      border-radius: 4px;
+      border-radius: var(--radius-small);
+      border: 1px solid #7a34ed;
+      border: 1px solid var(--brand-color);
+      font-family: Inter;
+      font-family: var(--brand-font-family);
+      font-weight: 600;
+      transition: all 0.3s ease;
+    }
 
-  handleClick() {
+    .button--size-small {
+      font-size: 12px;
+      padding-top: 4px;
+      padding-bottom: 4px;
+      padding-top: var(--spacing-xsmall);
+      padding-bottom: var(--spacing-xsmall);
+      padding-left: 12px;
+      padding-right: 12px;
+      padding-left: var(--spacing-medium);
+      padding-right: var(--spacing-medium);
+    }
+
+    .button--size-medium {
+      font-size: 14px;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      padding-top: var(--spacing-small);
+      padding-bottom: var(--spacing-small);
+      padding-left: 16px;
+      padding-right: 16px;
+      padding-left: var(--spacing-large);
+      padding-right: var(--spacing-large);
+    }
+
+    .button--size-large {
+      font-size: 16px;
+      padding-top: 12px;
+      padding-bottom: 12px;
+      padding-top: var(--spacing-medium);
+      padding-bottom: var(--spacing-medium);
+      padding-left: 24px;
+      padding-right: 24px;
+      padding-left: var(--spacing-xlarge);
+      padding-right: var(--spacing-xlarge);
+    }
+
+    .button--type-outlined {
+      background-color: #ffffff;
+      background-color: var(--color-white);
+      color: #7a34ed;
+      color: var(--brand-color);
+    }
+
+    .button--type-filled {
+      background-color: #7a34ed;
+      background-color: var(--brand-color);
+      color: #ffffff;
+      color: var(--color-white);
+    }
+  `;
+
+  _handleClick() {
     console.log('Button clicked!');
+    this.dispatchEvent(new CustomEvent('button-click'));
   }
 
-  applyStyles(element: HTMLElement) {
-    const style = document.createElement('style');
-    style.textContent = `
-      #my-button {
-        background-color: #4CAF50;
-        border: none;
-        color: white;
-        padding: 15px 32px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font-size: 16px;
-        margin: 4px 2px;
-        cursor: pointer;
-      }
+  render() {
+    const classes = {
+      button: true,
+      [`button--size-${this.size}`]: true,
+      [`button--type-${this.type}`]: true,
+    };
+
+    return html`
+      <button @click=${this._handleClick} class=${classMap(classes)}>
+        ${this.label}
+      </button>
     `;
-    element.shadowRoot.appendChild(style);
   }
 }
 
-customElements.define('my-button', MyButton);
+customElements.define('simple-button', SimpleButton);

package/tsconfig.json

@@ -3,7 +3,10 @@
   "compilerOptions": {
     "noImplicitAny": true,
     "lib": ["es2020", "dom"],
-    "outDir": "./dist"
+    "outDir": "./dist",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false
   },
   "include": ["./src"]
 }