revotech-ui-kit 0.0.24 → 0.0.25

package/dist/revotech-ui-kit.js

@@ -4,7 +4,7 @@ import { nothing as lo } from "lit/html.js";
 import { directive as Qt } from "lit/directive.js";
 import { AsyncDirective as co } from "lit/async-directive.js";
 import { html as Xe, css as er, nothing as po, LitElement as uo } from "lit-element";
-import { createRef as _e } from "lit/directives/ref.js";
+import { createRef as $e } from "lit/directives/ref.js";
 function Dr(e) {
   var t, o, s = "";
   if (typeof e == "string" || typeof e == "number")
@@ -244,7 +244,7 @@ function Po(e, ...t) {
 const y = (e) => {
   const t = (o) => o[e] || [];
   return t.isThemeGetter = !0, t;
-}, Lr = /^\[(?:([a-z-]+):)?(.+)\]$/i, ko = /^\d+\/\d+$/, So = /* @__PURE__ */ new Set(["px", "full", "screen"]), Eo = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, jo = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Do = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, Ao = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, zo = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, K = (e) => Oe(e) || So.has(e) || ko.test(e), Q = (e) => Me(e, "length", Fo), Oe = (e) => !!e && !Number.isNaN(Number(e)), Pt = (e) => Me(e, "number", Oe), Ue = (e) => !!e && Number.isInteger(Number(e)), Io = (e) => e.endsWith("%") && Oe(e.slice(0, -1)), f = (e) => Lr.test(e), ee = (e) => Eo.test(e), Lo = /* @__PURE__ */ new Set(["length", "size", "percentage"]), Mo = (e) => Me(e, Lo, Mr), To = (e) => Me(e, "position", Mr), No = /* @__PURE__ */ new Set(["image", "url"]), Ro = (e) => Me(e, No, qo), Bo = (e) => Me(e, "", Vo), Ge = () => !0, Me = (e, t, o) => {
+}, Lr = /^\[(?:([a-z-]+):)?(.+)\]$/i, ko = /^\d+\/\d+$/, So = /* @__PURE__ */ new Set(["px", "full", "screen"]), Eo = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, jo = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Do = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, Ao = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, zo = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, K = (e) => Ce(e) || So.has(e) || ko.test(e), ee = (e) => Te(e, "length", Fo), Ce = (e) => !!e && !Number.isNaN(Number(e)), Pt = (e) => Te(e, "number", Ce), Ue = (e) => !!e && Number.isInteger(Number(e)), Io = (e) => e.endsWith("%") && Ce(e.slice(0, -1)), f = (e) => Lr.test(e), te = (e) => Eo.test(e), Lo = /* @__PURE__ */ new Set(["length", "size", "percentage"]), Mo = (e) => Te(e, Lo, Mr), To = (e) => Te(e, "position", Mr), No = /* @__PURE__ */ new Set(["image", "url"]), Ro = (e) => Te(e, No, qo), Bo = (e) => Te(e, "", Vo), Ge = () => !0, Te = (e, t, o) => {
   const s = Lr.exec(e);
   return s ? s[1] ? typeof t == "string" ? s[1] === t : t.has(s[1]) : o(s[2]) : !1;
 }, Fo = (e) => (
@@ -253,17 +253,17 @@ const y = (e) => {
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   jo.test(e) && !Do.test(e)
 ), Mr = () => !1, Vo = (e) => Ao.test(e), qo = (e) => zo.test(e), Uo = () => {
-  const e = y("colors"), t = y("spacing"), o = y("blur"), s = y("brightness"), r = y("borderColor"), i = y("borderRadius"), a = y("borderSpacing"), u = y("borderWidth"), v = y("contrast"), b = y("grayscale"), m = y("hueRotate"), P = y("invert"), k = y("gap"), N = y("gradientColorStops"), D = y("gradientColorStopPositions"), $ = y("inset"), w = y("margin"), j = y("opacity"), A = y("padding"), Ve = y("saturate"), be = y("scale"), nt = y("sepia"), wr = y("skew"), yr = y("space"), xr = y("translate"), _t = () => ["auto", "contain", "none"], $t = () => ["auto", "hidden", "clip", "visible", "scroll"], Ot = () => ["auto", f, t], x = () => [f, t], _r = () => ["", K, Q], lt = () => ["auto", Oe, f], $r = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], dt = () => ["solid", "dashed", "dotted", "double", "none"], Or = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], Ct = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], qe = () => ["", "0", f], Cr = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], Y = () => [Oe, f];
+  const e = y("colors"), t = y("spacing"), o = y("blur"), s = y("brightness"), r = y("borderColor"), i = y("borderRadius"), a = y("borderSpacing"), u = y("borderWidth"), v = y("contrast"), b = y("grayscale"), m = y("hueRotate"), P = y("invert"), k = y("gap"), N = y("gradientColorStops"), D = y("gradientColorStopPositions"), $ = y("inset"), w = y("margin"), j = y("opacity"), A = y("padding"), Ve = y("saturate"), be = y("scale"), nt = y("sepia"), wr = y("skew"), yr = y("space"), xr = y("translate"), _t = () => ["auto", "contain", "none"], $t = () => ["auto", "hidden", "clip", "visible", "scroll"], Ot = () => ["auto", f, t], x = () => [f, t], _r = () => ["", K, ee], lt = () => ["auto", Ce, f], $r = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], dt = () => ["solid", "dashed", "dotted", "double", "none"], Or = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], Ct = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], qe = () => ["", "0", f], Cr = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], Y = () => [Ce, f];
   return {
     cacheSize: 500,
     separator: ":",
     theme: {
       colors: [Ge],
-      spacing: [K, Q],
-      blur: ["none", "", ee, f],
+      spacing: [K, ee],
+      blur: ["none", "", te, f],
       brightness: Y(),
       borderColor: [e],
-      borderRadius: ["none", "", "full", ee, f],
+      borderRadius: ["none", "", "full", te, f],
       borderSpacing: x(),
       borderWidth: _r(),
       contrast: Y(),
@@ -272,7 +272,7 @@ const y = (e) => {
       invert: qe(),
       gap: x(),
       gradientColorStops: [e],
-      gradientColorStopPositions: [Io, Q],
+      gradientColorStopPositions: [Io, ee],
       inset: Ot(),
       margin: Ot(),
       opacity: Y(),
@@ -303,7 +303,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/columns
        */
       columns: [{
-        columns: [ee]
+        columns: [te]
       }],
       /**
        * Break After
@@ -887,8 +887,8 @@ const y = (e) => {
        */
       "max-w": [{
         "max-w": [f, t, "none", "full", "min", "max", "fit", "prose", {
-          screen: [ee]
-        }, ee]
+          screen: [te]
+        }, te]
       }],
       /**
        * Height
@@ -924,7 +924,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/font-size
        */
       "font-size": [{
-        text: ["base", ee, Q]
+        text: ["base", te, ee]
       }],
       /**
        * Font Smoothing
@@ -992,7 +992,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/line-clamp
        */
       "line-clamp": [{
-        "line-clamp": ["none", Oe, Pt]
+        "line-clamp": ["none", Ce, Pt]
       }],
       /**
        * Line Height
@@ -1075,7 +1075,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/text-decoration-thickness
        */
       "text-decoration-thickness": [{
-        decoration: ["auto", "from-font", K, Q]
+        decoration: ["auto", "from-font", K, ee]
       }],
       /**
        * Text Underline Offset
@@ -1557,7 +1557,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/outline-width
        */
       "outline-w": [{
-        outline: [K, Q]
+        outline: [K, ee]
       }],
       /**
        * Outline Color
@@ -1597,7 +1597,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/ring-offset-width
        */
       "ring-offset-w": [{
-        "ring-offset": [K, Q]
+        "ring-offset": [K, ee]
       }],
       /**
        * Ring Offset Color
@@ -1612,7 +1612,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/box-shadow
        */
       shadow: [{
-        shadow: ["", "inner", "none", ee, Bo]
+        shadow: ["", "inner", "none", te, Bo]
       }],
       /**
        * Box Shadow Color
@@ -1677,7 +1677,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/drop-shadow
        */
       "drop-shadow": [{
-        "drop-shadow": ["", "none", ee, f]
+        "drop-shadow": ["", "none", te, f]
       }],
       /**
        * Grayscale
@@ -2192,7 +2192,7 @@ const y = (e) => {
        * @see https://tailwindcss.com/docs/stroke-width
        */
       "stroke-w": [{
-        stroke: [K, Q, Pt]
+        stroke: [K, ee, Pt]
       }],
       /**
        * Stroke
@@ -5243,12 +5243,12 @@ z = ce([
   d("rtg-button")
 ], z);
 const Zo = "peer h-4 w-4 align-middle shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", Jo = "flex items-center justify-center text-current pointer-events-none";
-var Qo = Object.defineProperty, es = Object.getOwnPropertyDescriptor, Te = (e, t, o, s) => {
+var Qo = Object.defineProperty, es = Object.getOwnPropertyDescriptor, Ne = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? es(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Qo(t, o, r), r;
 };
-let te = class extends h {
+let re = class extends h {
   constructor() {
     super(...arguments), this.disabled = !1, this.checked = !1, this.type = "text", this.value = "", this.required = !1;
   }
@@ -5295,25 +5295,25 @@ let te = class extends h {
     `;
   }
 };
-te.styles = [p``, c];
-Te([
+re.styles = [p``, c];
+Ne([
   n({ type: Boolean })
-], te.prototype, "disabled", 2);
-Te([
+], re.prototype, "disabled", 2);
+Ne([
   n({ type: Boolean })
-], te.prototype, "checked", 2);
-Te([
+], re.prototype, "checked", 2);
+Ne([
   n({ type: String })
-], te.prototype, "type", 2);
-Te([
+], re.prototype, "type", 2);
+Ne([
   n({ type: String })
-], te.prototype, "value", 2);
-Te([
+], re.prototype, "value", 2);
+Ne([
   n({ type: Boolean })
-], te.prototype, "required", 2);
-te = Te([
+], re.prototype, "required", 2);
+re = Ne([
   d("rtg-checkbox")
-], te);
+], re);
 var ts = Object.defineProperty, rs = Object.getOwnPropertyDescriptor, Br = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? rs(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -5330,7 +5330,7 @@ let Ye = class extends h {
   get _dialog() {
     let e = this.parentElement;
     for (; e; ) {
-      if (e instanceof Ce)
+      if (e instanceof Pe)
         return e;
       e = e.parentElement;
     }
@@ -5388,7 +5388,7 @@ let St = class extends h {
   get _dialog() {
     let e = this.parentElement;
     for (; e; ) {
-      if (e instanceof Ce)
+      if (e instanceof Pe)
         return e;
       e = e.parentElement;
     }
@@ -5507,7 +5507,7 @@ var bs = Object.defineProperty, ms = Object.getOwnPropertyDescriptor, Fr = (e, t
   return s && r && bs(t, o, r), r;
 };
 const vs = "open", ws = "closed";
-let Ce = class extends h {
+let Pe = class extends h {
   constructor() {
     super(...arguments), this.state = ws;
   }
@@ -5535,22 +5535,22 @@ let Ce = class extends h {
     `;
   }
 };
-Ce.styles = [p``, c];
+Pe.styles = [p``, c];
 Fr([
   n({ attribute: "data-state", type: String })
-], Ce.prototype, "state", 2);
-Ce = Fr([
+], Pe.prototype, "state", 2);
+Pe = Fr([
   d("rtg-dialog")
-], Ce);
+], Pe);
 const ys = "flex h-8 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 input-base";
-var xs = Object.defineProperty, _s = Object.getOwnPropertyDescriptor, Ne = (e, t, o, s) => {
+var xs = Object.defineProperty, _s = Object.getOwnPropertyDescriptor, ve = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? _s(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && xs(t, o, r), r;
 };
-let re = class extends _ {
+let H = class extends _ {
   constructor() {
-    super(), this.disabled = !1, this.type = "text", this.placeholder = "", this.defaultValue = "", this.value = "", this.attachShadow({ mode: "open" }), this.value = this.value || this.defaultValue;
+    super(), this.disabled = !1, this.type = "text", this.placeholder = "", this.defaultValue = "", this.value = "", this.twCLass = "", this.value = this.value || this.defaultValue;
   }
   firstUpdated(e) {
     const t = ["--input-border-radius", "--input-padding"];
@@ -5571,7 +5571,7 @@ let re = class extends _ {
         type="${this.type}"
         placeholder="${this.placeholder}"
         ?disabled=${this.disabled}
-        class="${g(ys, this.className)}"
+        class="${g(ys, this.classList, this.twCLass)}"
         .value=${this.type !== "file" ? this.value : ""}
         @change="${this.handleInputChange}"
         ${O(e)}
@@ -5579,25 +5579,28 @@ let re = class extends _ {
     `;
   }
 };
-re.styles = [p``, c];
-Ne([
+H.styles = [p``, c];
+ve([
   n({ type: Boolean })
-], re.prototype, "disabled", 2);
-Ne([
+], H.prototype, "disabled", 2);
+ve([
   n({ type: String })
-], re.prototype, "type", 2);
-Ne([
+], H.prototype, "type", 2);
+ve([
   n({ type: String })
-], re.prototype, "placeholder", 2);
-Ne([
+], H.prototype, "placeholder", 2);
+ve([
   n({ type: String })
-], re.prototype, "defaultValue", 2);
-Ne([
+], H.prototype, "defaultValue", 2);
+ve([
   n({ type: String })
-], re.prototype, "value", 2);
-re = Ne([
+], H.prototype, "value", 2);
+ve([
+  n({ type: String })
+], H.prototype, "twCLass", 2);
+H = ve([
   d("rtg-input")
-], re);
+], H);
 const $s = de(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
@@ -5606,7 +5609,7 @@ var Os = Object.defineProperty, Cs = Object.getOwnPropertyDescriptor, Vr = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Os(t, o, r), r;
 };
-let Pe = class extends _ {
+let ke = class extends _ {
   constructor() {
     super(...arguments), this.for = "";
   }
@@ -5632,7 +5635,7 @@ let Pe = class extends _ {
         @click="${this._onClick}"
         @keydown="${this._onClick}"
         class="${g(
-      Pe.labelVariants({
+      ke.labelVariants({
         className: this.className
       })
     )}"
@@ -5643,8 +5646,8 @@ let Pe = class extends _ {
     `;
   }
 };
-Pe.labelVariants = $s;
-Pe.styles = [
+ke.labelVariants = $s;
+ke.styles = [
   p`
       :root {
         --label-text-color: inherit;
@@ -5659,10 +5662,10 @@ Pe.styles = [
 ];
 Vr([
   n({ type: String })
-], Pe.prototype, "for", 2);
-Pe = Vr([
+], ke.prototype, "for", 2);
+ke = Vr([
   d("rtg-label")
-], Pe);
+], ke);
 var Ps = Object.defineProperty, ks = Object.getOwnPropertyDescriptor, qr = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? ks(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -5736,7 +5739,7 @@ var js = Object.defineProperty, Ds = Object.getOwnPropertyDescriptor, bt = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && js(t, o, r), r;
 };
-let H = class extends h {
+let W = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this._id = "", this._hidden = "";
   }
@@ -5745,7 +5748,7 @@ let H = class extends h {
     if (this._id !== "")
       return this._id;
     const e = (o = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : o.querySelector("div[rtgcmd-list]");
-    return e ? this._id = `${e.getAttribute("id")}g${H._counter++}` : this._id = `rtgcmdrxlxg${H._counter++}`, this._id;
+    return e ? this._id = `${e.getAttribute("id")}g${W._counter++}` : this._id = `rtgcmdrxlxg${W._counter++}`, this._id;
   }
   render() {
     const e = "overflow-hidden p-1 text-foreground [&_[rtgcmd-group-heading]]:px-2 [&_[rtgcmd-group-heading]]:py-1.5 [&_[rtgcmd-group-heading]]:text-xs [&_[rtgcmd-group-heading]]:font-medium [&_[rtgcmd-group-heading]]:text-muted-foreground";
@@ -5774,20 +5777,20 @@ let H = class extends h {
         `}`;
   }
 };
-H._counter = 0;
-H.styles = [p``, c];
+W._counter = 0;
+W.styles = [p``, c];
 bt([
   n({ type: String })
-], H.prototype, "heading", 2);
+], W.prototype, "heading", 2);
 bt([
   n({ attribute: "id", type: String })
-], H.prototype, "_id", 2);
+], W.prototype, "_id", 2);
 bt([
   n({ attribute: "aria-hidden", type: String })
-], H.prototype, "_hidden", 2);
-H = bt([
+], W.prototype, "_hidden", 2);
+W = bt([
   d("rtg-command-group")
-], H);
+], W);
 var As = Object.defineProperty, zs = Object.getOwnPropertyDescriptor, sr = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? zs(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -6168,7 +6171,7 @@ let We = class extends h {
   }
   get _popover() {
     let e = this.parentElement;
-    for (; e && !(e instanceof ke); )
+    for (; e && !(e instanceof Se); )
       e = e.parentElement;
     return e;
   }
@@ -6226,7 +6229,7 @@ let Nt = class extends h {
   }
   get _popover() {
     let e = this.parentElement;
-    for (; e && !(e instanceof ke); )
+    for (; e && !(e instanceof Se); )
       e = e.parentElement;
     return e;
   }
@@ -6257,7 +6260,7 @@ var ui = Object.defineProperty, hi = Object.getOwnPropertyDescriptor, Ur = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && ui(t, o, r), r;
 };
-let ke = class extends h {
+let Se = class extends h {
   constructor() {
     super(...arguments), this.isOpen = !1;
   }
@@ -6281,13 +6284,13 @@ let ke = class extends h {
     `;
   }
 };
-ke.styles = [p``, c];
+Se.styles = [p``, c];
 Ur([
   S()
-], ke.prototype, "isOpen", 2);
-ke = Ur([
+], Se.prototype, "isOpen", 2);
+Se = Ur([
   d("rtg-popover")
-], ke);
+], Se);
 const Gr = de("p-4 rounded-sm text-sm font-medium", {
   variants: {
     variant: {
@@ -6350,7 +6353,7 @@ var yi = Object.defineProperty, xi = Object.getOwnPropertyDescriptor, nr = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && yi(t, o, r), r;
 };
-let Se = class extends h {
+let Ee = class extends h {
   constructor() {
     super(...arguments), this.variant = "info", this.size = "default";
   }
@@ -6366,7 +6369,7 @@ let Se = class extends h {
     `;
   }
 };
-Se.styles = [
+Ee.styles = [
   p`
       :host {
         display: block;
@@ -6383,16 +6386,16 @@ Se.styles = [
     `,
   c
 ];
-Se.alertVairants = Gr;
+Ee.alertVairants = Gr;
 nr([
   n({ type: String })
-], Se.prototype, "variant", 2);
+], Ee.prototype, "variant", 2);
 nr([
   n({ type: String })
-], Se.prototype, "size", 2);
-Se = nr([
+], Ee.prototype, "size", 2);
+Ee = nr([
   d("rtg-alert")
-], Se);
+], Ee);
 const _i = de(
   "inline-flex items-center border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent rounded-full",
   {
@@ -6416,7 +6419,7 @@ var $i = Object.defineProperty, Oi = Object.getOwnPropertyDescriptor, Xr = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && $i(t, o, r), r;
 };
-let Ee = class extends _ {
+let je = class extends _ {
   constructor() {
     super(...arguments), this.variant = "default";
   }
@@ -6430,7 +6433,7 @@ let Ee = class extends _ {
         id="rtg-badge-id"
         class="
         ${g(
-      Ee.badgeVariants({
+      je.badgeVariants({
         variant: this.variant,
         className: this.className
       })
@@ -6442,14 +6445,14 @@ let Ee = class extends _ {
     `;
   }
 };
-Ee.badgeVariants = _i;
-Ee.styles = [p``, c];
+je.badgeVariants = _i;
+je.styles = [p``, c];
 Xr([
   n({ type: String })
-], Ee.prototype, "variant", 2);
-Ee = Xr([
+], je.prototype, "variant", 2);
+je = Xr([
   d("rtg-badge")
-], Ee);
+], je);
 function Yr() {
   return me` <svg
   class="shrink-0 size-3.5 text-gray-500 dark:text-neutral-500"
@@ -6549,7 +6552,7 @@ var Si = Object.defineProperty, Ei = Object.getOwnPropertyDescriptor, mt = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Si(t, o, r), r;
 };
-let je = class extends h {
+let De = class extends h {
   constructor() {
     super(...arguments), this.value = "", this.handleClick = () => {
     }, this.handleKeyDown = () => {
@@ -6576,19 +6579,19 @@ let je = class extends h {
     `;
   }
 };
-je.styles = [p``, c];
+De.styles = [p``, c];
 mt([
   n({ type: String })
-], je.prototype, "value", 2);
+], De.prototype, "value", 2);
 mt([
   n({ type: Function })
-], je.prototype, "handleClick", 2);
+], De.prototype, "handleClick", 2);
 mt([
   n({ type: Function })
-], je.prototype, "handleKeyDown", 2);
-je = mt([
+], De.prototype, "handleKeyDown", 2);
+De = mt([
   d("rtg-combo-box-input")
-], je);
+], De);
 var ji = Object.defineProperty, Di = Object.getOwnPropertyDescriptor, pe = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? Di(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -6915,7 +6918,7 @@ var Ti = Object.defineProperty, Ni = Object.getOwnPropertyDescriptor, dr = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Ti(t, o, r), r;
 };
-let De = class extends h {
+let Ae = class extends h {
   constructor() {
     super(...arguments), this.state = vt, this.isOpen = !1;
   }
@@ -6952,16 +6955,16 @@ let De = class extends h {
     `;
   }
 };
-De.styles = [p``, c];
+Ae.styles = [p``, c];
 dr([
   n({ attribute: "data-state", type: String })
-], De.prototype, "state", 2);
+], Ae.prototype, "state", 2);
 dr([
   S()
-], De.prototype, "isOpen", 2);
-De = dr([
+], Ae.prototype, "isOpen", 2);
+Ae = dr([
   d("rtg-dropdown-menu-content")
-], De);
+], Ae);
 var Ri = Object.defineProperty, Bi = Object.getOwnPropertyDescriptor, it = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? Bi(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -7025,7 +7028,7 @@ it([
 V = it([
   d("rtg-dropdown-menu-item")
 ], V);
-var Fi = Object.defineProperty, Vi = Object.getOwnPropertyDescriptor, ve = (e, t, o, s) => {
+var Fi = Object.defineProperty, Vi = Object.getOwnPropertyDescriptor, we = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? Vi(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Fi(t, o, r), r;
@@ -7096,25 +7099,25 @@ I.styles = [
     `,
   c
 ];
-ve([
+we([
   n({ type: String })
 ], I.prototype, "_id", 2);
-ve([
+we([
   n({ attribute: "aria-hidden", type: String })
 ], I.prototype, "_hidden", 2);
-ve([
+we([
   n({ attribute: "data-value", type: String })
 ], I.prototype, "value", 1);
-ve([
+we([
   n({ type: Boolean })
 ], I.prototype, "selected", 2);
-ve([
+we([
   n({ type: Boolean })
 ], I.prototype, "checked", 2);
-ve([
+we([
   n({ type: Boolean })
 ], I.prototype, "disabled", 2);
-I = ve([
+I = we([
   d("rtg-dropdown-menu-radio-item")
 ], I);
 var qi = Object.defineProperty, Ui = Object.getOwnPropertyDescriptor, cr = (e, t, o, s) => {
@@ -7157,7 +7160,7 @@ cr([
 ie = cr([
   d("rtg-dropdown-menu-separator")
 ], ie);
-var Gi = Object.defineProperty, Xi = Object.getOwnPropertyDescriptor, we = (e, t, o, s) => {
+var Gi = Object.defineProperty, Xi = Object.getOwnPropertyDescriptor, ye = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? Xi(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Gi(t, o, r), r;
@@ -7237,25 +7240,25 @@ L.styles = [
     `,
   c
 ];
-we([
+ye([
   n({ type: String })
 ], L.prototype, "_id", 2);
-we([
+ye([
   n({ attribute: "aria-hidden", type: String })
 ], L.prototype, "_hidden", 2);
-we([
+ye([
   n({ attribute: "data-value", type: String })
 ], L.prototype, "value", 1);
-we([
+ye([
   n({ type: Boolean })
 ], L.prototype, "selected", 2);
-we([
+ye([
   n({ type: Boolean })
 ], L.prototype, "checked", 2);
-we([
+ye([
   n({ type: Boolean })
 ], L.prototype, "disabled", 2);
-L = we([
+L = ye([
   d("rtg-dropdown-menu-checkbox-item")
 ], L);
 var Yi = Object.defineProperty, Ki = Object.getOwnPropertyDescriptor, wt = (e, t, o, s) => {
@@ -7263,7 +7266,7 @@ var Yi = Object.defineProperty, Ki = Object.getOwnPropertyDescriptor, wt = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Yi(t, o, r), r;
 };
-let W = class extends h {
+let Z = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this._id = "", this._hidden = "";
   }
@@ -7272,7 +7275,7 @@ let W = class extends h {
     if (this._id !== "")
       return this._id;
     const e = (o = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : o.querySelector("div[rtgcmd-list]");
-    return e ? this._id = `${e.getAttribute("id")}g${W._counter++}` : this._id = `rtgcmdrxlxg${W._counter++}`, this._id;
+    return e ? this._id = `${e.getAttribute("id")}g${Z._counter++}` : this._id = `rtgcmdrxlxg${Z._counter++}`, this._id;
   }
   render() {
     const e = "overflow-hidden p-1 text-foreground [&_[rtgcmd-group-heading]]:px-2 [&_[rtgcmd-group-heading]]:py-1.5 [&_[rtgcmd-group-heading]]:text-xs [&_[rtgcmd-group-heading]]:font-medium [&_[rtgcmd-group-heading]]:text-muted-foreground";
@@ -7301,20 +7304,20 @@ let W = class extends h {
         `}`;
   }
 };
-W._counter = 0;
-W.styles = [p``, c];
+Z._counter = 0;
+Z.styles = [p``, c];
 wt([
   n({ type: String })
-], W.prototype, "heading", 2);
+], Z.prototype, "heading", 2);
 wt([
   n({ attribute: "id", type: String })
-], W.prototype, "_id", 2);
+], Z.prototype, "_id", 2);
 wt([
   n({ attribute: "aria-hidden", type: String })
-], W.prototype, "_hidden", 2);
-W = wt([
+], Z.prototype, "_hidden", 2);
+Z = wt([
   d("rtg-dropdown-menu-group")
-], W);
+], Z);
 var Hi = Object.defineProperty, Wi = Object.getOwnPropertyDescriptor, Zr = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? Wi(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -7342,7 +7345,7 @@ let Je = class extends h {
     const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot"), t = e == null ? void 0 : e.assignedElements();
     if (t) {
       for (let s = 0; s < t.length; s++)
-        if (t[s] instanceof De)
+        if (t[s] instanceof Ae)
           return t[s];
     }
     return null;
@@ -7463,7 +7466,7 @@ var ea = Object.defineProperty, ta = Object.getOwnPropertyDescriptor, pr = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && ea(t, o, r), r;
 };
-let Ae = class extends h {
+let ze = class extends h {
   constructor() {
     super(...arguments), this.state = vt, this.isOpen = !1;
   }
@@ -7501,17 +7504,17 @@ let Ae = class extends h {
     `;
   }
 };
-Ae.styles = [p``, c];
+ze.styles = [p``, c];
 pr([
   n({ attribute: "data-state", type: String })
-], Ae.prototype, "state", 2);
+], ze.prototype, "state", 2);
 pr([
   S()
-], Ae.prototype, "isOpen", 2);
-Ae = pr([
+], ze.prototype, "isOpen", 2);
+ze = pr([
   d("rtg-context-menu-content")
-], Ae);
-var ra = Object.defineProperty, oa = Object.getOwnPropertyDescriptor, ye = (e, t, o, s) => {
+], ze);
+var ra = Object.defineProperty, oa = Object.getOwnPropertyDescriptor, xe = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? oa(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && ra(t, o, r), r;
@@ -7591,25 +7594,25 @@ M.styles = [
     `,
   c
 ];
-ye([
+xe([
   n({ type: String })
 ], M.prototype, "_id", 2);
-ye([
+xe([
   n({ attribute: "aria-hidden", type: String })
 ], M.prototype, "_hidden", 2);
-ye([
+xe([
   n({ attribute: "data-value", type: String })
 ], M.prototype, "value", 1);
-ye([
+xe([
   n({ type: Boolean })
 ], M.prototype, "selected", 2);
-ye([
+xe([
   n({ type: Boolean })
 ], M.prototype, "checked", 2);
-ye([
+xe([
   n({ type: Boolean })
 ], M.prototype, "disabled", 2);
-M = ye([
+M = xe([
   d("rtg-context-menu-checkbox-item")
 ], M);
 var sa = Object.defineProperty, ia = Object.getOwnPropertyDescriptor, yt = (e, t, o, s) => {
@@ -7617,7 +7620,7 @@ var sa = Object.defineProperty, ia = Object.getOwnPropertyDescriptor, yt = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && sa(t, o, r), r;
 };
-let Z = class extends h {
+let J = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this._id = "", this._hidden = "";
   }
@@ -7626,7 +7629,7 @@ let Z = class extends h {
     if (this._id !== "")
       return this._id;
     const e = (o = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : o.querySelector("div[rtgcmd-list]");
-    return e ? this._id = `${e.getAttribute("id")}g${Z._counter++}` : this._id = `rtgcmdrxlxg${Z._counter++}`, this._id;
+    return e ? this._id = `${e.getAttribute("id")}g${J._counter++}` : this._id = `rtgcmdrxlxg${J._counter++}`, this._id;
   }
   render() {
     const e = "overflow-hidden p-1 text-foreground [&_[rtgcmd-group-heading]]:px-2 [&_[rtgcmd-group-heading]]:py-1.5 [&_[rtgcmd-group-heading]]:text-xs [&_[rtgcmd-group-heading]]:font-medium [&_[rtgcmd-group-heading]]:text-muted-foreground";
@@ -7655,20 +7658,20 @@ let Z = class extends h {
         `}`;
   }
 };
-Z._counter = 0;
-Z.styles = [p``, c];
+J._counter = 0;
+J.styles = [p``, c];
 yt([
   n({ type: String })
-], Z.prototype, "heading", 2);
+], J.prototype, "heading", 2);
 yt([
   n({ attribute: "id", type: String })
-], Z.prototype, "_id", 2);
+], J.prototype, "_id", 2);
 yt([
   n({ attribute: "aria-hidden", type: String })
-], Z.prototype, "_hidden", 2);
-Z = yt([
+], J.prototype, "_hidden", 2);
+J = yt([
   d("rtg-context-menu-group")
-], Z);
+], J);
 var aa = Object.defineProperty, na = Object.getOwnPropertyDescriptor, at = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? na(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -7732,7 +7735,7 @@ at([
 U = at([
   d("rtg-context-menu-item")
 ], U);
-var la = Object.defineProperty, da = Object.getOwnPropertyDescriptor, xe = (e, t, o, s) => {
+var la = Object.defineProperty, da = Object.getOwnPropertyDescriptor, _e = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? da(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && la(t, o, r), r;
@@ -7803,25 +7806,25 @@ T.styles = [
     `,
   c
 ];
-xe([
+_e([
   n({ type: String })
 ], T.prototype, "_id", 2);
-xe([
+_e([
   n({ attribute: "aria-hidden", type: String })
 ], T.prototype, "_hidden", 2);
-xe([
+_e([
   n({ attribute: "data-value", type: String })
 ], T.prototype, "value", 1);
-xe([
+_e([
   n({ type: Boolean })
 ], T.prototype, "selected", 2);
-xe([
+_e([
   n({ type: Boolean })
 ], T.prototype, "checked", 2);
-xe([
+_e([
   n({ type: Boolean })
 ], T.prototype, "disabled", 2);
-T = xe([
+T = _e([
   d("rtg-context-menu-radio-item")
 ], T);
 var ca = Object.defineProperty, pa = Object.getOwnPropertyDescriptor, ur = (e, t, o, s) => {
@@ -7914,7 +7917,7 @@ let Qe = class extends h {
     const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot"), t = e == null ? void 0 : e.assignedElements();
     if (t) {
       for (let s = 0; s < t.length; s++)
-        if (t[s] instanceof Ae)
+        if (t[s] instanceof ze)
           return t[s];
     }
     return null;
@@ -8422,7 +8425,7 @@ let rt = class extends _ {
   }
   get _accordion() {
     let e = this.parentElement;
-    for (; e && !(e instanceof Ie); )
+    for (; e && !(e instanceof Le); )
       e = e.parentElement;
     return e;
   }
@@ -8464,7 +8467,7 @@ var Na = Object.defineProperty, Ra = Object.getOwnPropertyDescriptor, xt = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Na(t, o, r), r;
 };
-let ze = class extends _ {
+let Ie = class extends _ {
   constructor() {
     super(...arguments), this.defaultValue = "", this.value = "";
   }
@@ -8497,19 +8500,19 @@ let ze = class extends _ {
     `;
   }
 };
-ze.styles = [er``, c];
+Ie.styles = [er``, c];
 xt([
   n({ type: String })
-], ze.prototype, "defaultValue", 2);
+], Ie.prototype, "defaultValue", 2);
 xt([
   n({ type: String })
-], ze.prototype, "value", 2);
+], Ie.prototype, "value", 2);
 xt([
   n({ type: Function })
-], ze.prototype, "onClickCallback", 2);
-ze = xt([
+], Ie.prototype, "onClickCallback", 2);
+Ie = xt([
   d("rtg-accordion-trigger")
-], ze);
+], Ie);
 var Ba = Object.defineProperty, Fa = Object.getOwnPropertyDescriptor, mr = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? Fa(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -8521,7 +8524,7 @@ let ot = class extends uo {
   }
   get _accordion() {
     let e = this.parentElement;
-    for (; e && !(e instanceof Ie); )
+    for (; e && !(e instanceof Le); )
       e = e.parentElement;
     return e;
   }
@@ -8558,14 +8561,14 @@ mr([
 ot = mr([
   d("rtg-accordion-content")
 ], ot);
-var $e = /* @__PURE__ */ ((e) => (e.MULTIPLE = "multiple", e.SINGLE = "single", e))($e || {}), Va = Object.defineProperty, qa = Object.getOwnPropertyDescriptor, to = (e, t, o, s) => {
+var Oe = /* @__PURE__ */ ((e) => (e.MULTIPLE = "multiple", e.SINGLE = "single", e))(Oe || {}), Va = Object.defineProperty, qa = Object.getOwnPropertyDescriptor, to = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? qa(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Va(t, o, r), r;
 };
-let Ie = class extends _ {
+let Le = class extends _ {
   constructor() {
-    super(...arguments), this.type = $e.MULTIPLE, this.selectedItems = [];
+    super(...arguments), this.type = Oe.MULTIPLE, this.selectedItems = [];
   }
   getAttributesToExclude() {
     return ["variant"];
@@ -8581,15 +8584,15 @@ let Ie = class extends _ {
   setSelectedItems(e) {
     const t = this.selectedItems.indexOf(e);
     if (t > -1)
-      if (this.type === $e.SINGLE)
+      if (this.type === Oe.SINGLE)
         this.selectedItems = [];
-      else if (this.type === $e.MULTIPLE)
+      else if (this.type === Oe.MULTIPLE)
         this.selectedItems.splice(t, 1);
       else
         throw new Error("Type does not correct");
-    else if (this.type === $e.SINGLE)
+    else if (this.type === Oe.SINGLE)
       this.selectedItems[0] = e;
-    else if (this.type === $e.MULTIPLE)
+    else if (this.type === Oe.MULTIPLE)
       this.selectedItems.push(e);
     else
       throw new Error("Type does not correct");
@@ -8614,13 +8617,13 @@ let Ie = class extends _ {
     `;
   }
 };
-Ie.styles = [p``, c];
+Le.styles = [p``, c];
 to([
   n({ type: String })
-], Ie.prototype, "type", 2);
-Ie = to([
+], Le.prototype, "type", 2);
+Le = to([
   d("rtg-accordion")
-], Ie);
+], Le);
 var Ut = /* @__PURE__ */ ((e) => (e.VERTICAL = "vertical", e.HORIZONTAL = "horizontal", e))(Ut || {}), Ua = Object.defineProperty, Ga = Object.getOwnPropertyDescriptor, ro = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? Ga(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -8686,149 +8689,152 @@ var Ya = Object.defineProperty, Ka = Object.getOwnPropertyDescriptor, Fe = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && Ya(t, o, r), r;
 };
-let J = class extends h {
+let Q = class extends h {
   constructor() {
     super(...arguments), this.click = () => {
     }, this.disabled = !1, this.isCustomClass = !1, this.variant = "default", this.size = "default";
   }
   render() {
     return l`
-      <rtg-card class="rounded block w-96" data-testid="card-id">
-        <cardheader data-testid="card-header-id">
-          <cardtitle data-testid="card-title-id">
-            <h3 class="text-white font-bold">Payment Method</h3>
-          </cardtitle>
-          <carddescription data-testid="card-description-id">
-            <p class="text-sm text-gray-400 mt-1">
-              Add a new payment method to your account.
-            </p>
-          </carddescription>
-        </cardheader>
-        <cardcontent data-testid="card-content-id">
-          <div class="grid grid-cols-3 gap-3 mt-7">
-            <div
-              class="flex flex-col border-2 border-white rounded-lg p-4 text-center"
-            >
-              <span>Card</span>
-              <span>test</span>
-            </div>
-            <div
-              class="flex flex-col border-2 border-white rounded-lg p-4 text-center"
-            >
-              <span>Card</span>
-              <span>test</span>
-            </div>
-            <div
-              class="flex flex-col border-2 border-white rounded-lg p-4 text-center"
-            >
-              <span>Card</span>
-              <span>test</span>
-            </div>
-          </div>
-          <div class="mt-6">
-            <span class="block text-sm mb-1 font-bold">Name</span>
-            <rtg-input
-              data-testid="input-id"
-              data-testchild="children-id"
-              id=""
-              type="text"
-              placeholder="Enter text"
-            ></rtg-input>
-          </div>
-          <div class="mt-4">
-            <span class="block text-sm mb-1 font-bold">Card Number</span>
-            <rtg-input type="text"></rtg-input>
-          </div>
-          <div class="grid grid-cols-3 gap-3 mt-6 mb-6">
-            <div>
-              <span class="block text-sm mb-1 font-bold">Expires</span>
-              <rtg-combo-box
-                label="Month"
-                .items='["next.js", "sveltekit", "nuxt.js", "remix", "astro"]'
+      <div class="${this.className}">
+        <rtg-card class="rounded block w-96" data-testid="card-id">
+          <cardheader data-testid="card-header-id">
+            <cardtitle data-testid="card-title-id">
+              <h3 class="text-white font-bold">Payment Method</h3>
+            </cardtitle>
+            <carddescription data-testid="card-description-id">
+              <p class="text-sm text-gray-400 mt-1">
+                Add a new payment method to your account.
+              </p>
+            </carddescription>
+          </cardheader>
+          <cardcontent data-testid="card-content-id">
+            <div class="grid grid-cols-3 gap-3 mt-7">
+              <div
+                class="flex flex-col border-2 border-white rounded-lg p-4 text-center"
               >
-                <rtg-combo-box-list>
-                  <rtg-combo-box-item
-                    data-hs-combo-box-value="next.js"
-                    tabindex="0"
-                  ></rtg-combo-box-item>
-                  <rtg-combo-box-item
-                    data-hs-combo-box-value="sveltekit"
-                    tabindex="1"
-                  ></rtg-combo-box-item>
-                  <rtg-combo-box-item
-                    data-hs-combo-box-value="nuxt.js"
-                    tabindex="2"
-                  ></rtg-combo-box-item>
-                  <rtg-combo-box-item
-                    data-hs-combo-box-value="remix"
-                    tabindex="3"
-                  ></rtg-combo-box-item>
-                  <rtg-combo-box-item
-                    data-hs-combo-box-value="astro"
-                    tabindex="4"
-                  ></rtg-combo-box-item>
-                </rtg-combo-box-list>
-              </rtg-combo-box>
-            </div>
-            <div>
-              <span class="block text-sm mb-1 font-bold">Year</span>
-              <rtg-combo-box
-                label="Year"
-                items='["next.js", "sveltekit", "nuxt.js", "remix", "astro"]'
+                <span>Card</span>
+                <span>test</span>
+              </div>
+              <div
+                class="flex flex-col border-2 border-white rounded-lg p-4 text-center"
+              >
+                <span>Card</span>
+                <span>test</span>
+              </div>
+              <div
+                class="flex flex-col border-2 border-white rounded-lg p-4 text-center"
               >
-                <rtg-combo-box-list>
-                  <rtg-combo-box-item
-                    data-hs-combo-box-value="next.js"
-                    tabindex="0"
-                  ></rtg-combo-box-item>
-                  <rtg-combo-box-item
-                    data-hs-combo-box-value="sveltekit"
-                    tabindex="1"
-                  ></rtg-combo-box-item>
-                  <rtg-combo-box-item
-                    data-hs-combo-box-value="nuxt.js"
-                    tabindex="2"
-                  ></rtg-combo-box-item>
-                  <rtg-combo-box-item
-                    data-hs-combo-box-value="remix"
-                    tabindex="3"
-                  ></rtg-combo-box-item>
-                  <rtg-combo-box-item
-                    data-hs-combo-box-value="astro"
-                    tabindex="4"
-                  ></rtg-combo-box-item>
-                </rtg-combo-box-list>
-              </rtg-combo-box>
+                <span>Card</span>
+                <span>test</span>
+              </div>
             </div>
-            <div>
-              <span class="block text-sm mb-1 font-bold">CVC</span>
+            <div class="mt-6">
+              <span class="block text-sm mb-1 font-bold">Name</span>
               <rtg-input
                 data-testid="input-id"
                 data-testchild="children-id"
                 id=""
                 type="text"
                 placeholder="Enter text"
+                twCLass="px-5 border"
               ></rtg-input>
             </div>
-          </div>
-        </cardcontent>
-        <cardfooter data-testid="card-footer-id">
-          <rtg-button
-            class="w-full text-black bg-white py-2 rounded-lg"
-            method="post"
-            data-testid="btn-id"
-            data-testchild="children-id"
-            variant="default"
-            size="default"
-            >Continue</rtg-button
-          >
-        </cardfooter>
-      </rtg-card>
+            <div class="mt-4">
+              <span class="block text-sm mb-1 font-bold">Card Number</span>
+              <rtg-input type="text"></rtg-input>
+            </div>
+            <div class="grid grid-cols-3 gap-3 mt-6 mb-6">
+              <div>
+                <span class="block text-sm mb-1 font-bold">Expires</span>
+                <rtg-combo-box
+                  label="Month"
+                  .items='["next.js", "sveltekit", "nuxt.js", "remix", "astro"]'
+                >
+                  <rtg-combo-box-list>
+                    <rtg-combo-box-item
+                      data-hs-combo-box-value="next.js"
+                      tabindex="0"
+                    ></rtg-combo-box-item>
+                    <rtg-combo-box-item
+                      data-hs-combo-box-value="sveltekit"
+                      tabindex="1"
+                    ></rtg-combo-box-item>
+                    <rtg-combo-box-item
+                      data-hs-combo-box-value="nuxt.js"
+                      tabindex="2"
+                    ></rtg-combo-box-item>
+                    <rtg-combo-box-item
+                      data-hs-combo-box-value="remix"
+                      tabindex="3"
+                    ></rtg-combo-box-item>
+                    <rtg-combo-box-item
+                      data-hs-combo-box-value="astro"
+                      tabindex="4"
+                    ></rtg-combo-box-item>
+                  </rtg-combo-box-list>
+                </rtg-combo-box>
+              </div>
+              <div>
+                <span class="block text-sm mb-1 font-bold">Year</span>
+                <rtg-combo-box
+                  label="Year"
+                  items='["next.js", "sveltekit", "nuxt.js", "remix", "astro"]'
+                >
+                  <rtg-combo-box-list>
+                    <rtg-combo-box-item
+                      data-hs-combo-box-value="next.js"
+                      tabindex="0"
+                    ></rtg-combo-box-item>
+                    <rtg-combo-box-item
+                      data-hs-combo-box-value="sveltekit"
+                      tabindex="1"
+                    ></rtg-combo-box-item>
+                    <rtg-combo-box-item
+                      data-hs-combo-box-value="nuxt.js"
+                      tabindex="2"
+                    ></rtg-combo-box-item>
+                    <rtg-combo-box-item
+                      data-hs-combo-box-value="remix"
+                      tabindex="3"
+                    ></rtg-combo-box-item>
+                    <rtg-combo-box-item
+                      data-hs-combo-box-value="astro"
+                      tabindex="4"
+                    ></rtg-combo-box-item>
+                  </rtg-combo-box-list>
+                </rtg-combo-box>
+              </div>
+              <div>
+                <span class="block text-sm mb-1 font-bold">CVC</span>
+                <rtg-input
+                  data-testid="input-id"
+                  data-testchild="children-id"
+                  id=""
+                  type="text"
+                  placeholder="Enter text"
+                ></rtg-input>
+              </div>
+            </div>
+          </cardcontent>
+          <cardfooter data-testid="card-footer-id">
+            <rtg-button
+              class="w-full text-black bg-white py-2 rounded-lg px-2"
+              method="post"
+              data-testid="btn-id"
+              data-testchild="children-id"
+              variant="default"
+              size="default"
+              >Continue</rtg-button
+            >
+          </cardfooter>
+        </rtg-card>
+      </div>
     `;
   }
 };
-J.buttonVariants = Xa;
-J.styles = [
+Q.buttonVariants = Xa;
+Q.styles = [
   c,
   p`
       :host {
@@ -8847,22 +8853,22 @@ J.styles = [
 ];
 Fe([
   n({ type: Function })
-], J.prototype, "click", 2);
+], Q.prototype, "click", 2);
 Fe([
   n({ type: Boolean })
-], J.prototype, "disabled", 2);
+], Q.prototype, "disabled", 2);
 Fe([
   n({ type: String })
-], J.prototype, "isCustomClass", 2);
+], Q.prototype, "isCustomClass", 2);
 Fe([
   n({ type: String })
-], J.prototype, "variant", 2);
+], Q.prototype, "variant", 2);
 Fe([
   n({ type: String })
-], J.prototype, "size", 2);
-J = Fe([
+], Q.prototype, "size", 2);
+Q = Fe([
   d("rtg-sample-demo")
-], J);
+], Q);
 var Ha = Object.defineProperty, Wa = Object.getOwnPropertyDescriptor, Za = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? Wa(t, o) : t, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
@@ -8874,7 +8880,7 @@ let Gt = class extends _ {
   }
   get _collapsible() {
     let e = this.parentElement;
-    for (; e && !(e instanceof Le); )
+    for (; e && !(e instanceof Me); )
       e = e.parentElement;
     return e;
   }
@@ -8926,7 +8932,7 @@ var tn = Object.defineProperty, rn = Object.getOwnPropertyDescriptor, vr = (e, t
     (a = e[i]) && (r = (s ? a(t, o, r) : a(r)) || r);
   return s && r && tn(t, o, r), r;
 };
-let Le = class extends _ {
+let Me = class extends _ {
   constructor() {
     super(...arguments), this.open = !1, this.onOpenChange = () => {
     };
@@ -8944,16 +8950,16 @@ let Le = class extends _ {
     `;
   }
 };
-Le.styles = [p``, c];
+Me.styles = [p``, c];
 vr([
   n({ type: Boolean })
-], Le.prototype, "open", 2);
+], Me.prototype, "open", 2);
 vr([
   n({ type: Function })
-], Le.prototype, "onOpenChange", 2);
-Le = vr([
+], Me.prototype, "onOpenChange", 2);
+Me = vr([
   d("rtg-collapsible")
-], Le);
+], Me);
 const on = "inline-flex items-center gap-1.5", sn = "transition-colors hover:text-foreground", an = "font-normal text-foreground", nn = "[&>svg]:size-3.5", ln = "flex h-9 w-9 items-center justify-center", dn = "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5";
 var cn = Object.defineProperty, pn = Object.getOwnPropertyDescriptor, un = (e, t, o, s) => {
   for (var r = s > 1 ? void 0 : s ? pn(t, o) : t, i = e.length - 1, a; i >= 0; i--)
@@ -9184,12 +9190,12 @@ let E = class extends _ {
     super(...arguments), this.click = () => {
     }, this.clientName = "", this.username = "", this.pinLength = 6, this.onChange = (e, t) => {
     }, this.pin = new Array(this.pinLength), this.inputElement = [
-      _e(),
-      _e(),
-      _e(),
-      _e(),
-      _e(),
-      _e()
+      $e(),
+      $e(),
+      $e(),
+      $e(),
+      $e(),
+      $e()
     ];
   }
   getAttributesToExclude() {
@@ -9395,10 +9401,10 @@ ft = ao([
   d("input-otp-slot")
 ], ft);
 export {
-  Se as Alert,
+  Ee as Alert,
   Bt as AlertDescription,
   Rt as AlertTitle,
-  Ee as Badge,
+  je as Badge,
   z as Button,
   Tt as Card,
   Mt as CardContent,
@@ -9406,17 +9412,17 @@ export {
   It as CardFooter,
   zt as CardHeader,
   At as CardTitle,
-  te as Checkbox,
+  re as Checkbox,
   R as ComboBox,
   Qe as ContextMenu,
   M as ContextMenuCheckboxItem,
-  Ae as ContextMenuContent,
-  Z as ContextMenuGroup,
+  ze as ContextMenuContent,
+  J as ContextMenuGroup,
   U as ContextMenuItem,
   T as ContextMenuRadioItem,
   ae as ContextMenuSeparator,
   Ft as ContextMenuShortcut,
-  Ce as Dialog,
+  Pe as Dialog,
   St as DialogClose,
   Ye as DialogContent,
   Et as DialogFooter,
@@ -9424,13 +9430,13 @@ export {
   jt as DialogOverlay,
   Je as DropdownMenu,
   L as DropdownMenuCheckboxItem,
-  De as DropdownMenuContent,
-  W as DropdownMenuGroup,
+  Ae as DropdownMenuContent,
+  Z as DropdownMenuGroup,
   V as DropdownMenuItem,
   I as DropdownMenuRadioItem,
   ie as DropdownMenuSeparator,
-  re as Input,
-  ke as Popover,
+  H as Input,
+  Se as Popover,
   We as PopoverContent,
   Nt as PopoverTrigger,
   qt as RadioGroup,