@revotech-group/revotech-ui-kit 0.0.53 → 0.0.55

package/dist/revotech-ui-kit.js

@@ -146,11 +146,11 @@ const as = "-", Ro = (e) => {
       }
       k === "[" ? b++ : k === "]" && b--;
     }
-    const S = v.length === 0 ? g : g.substring(w), G = S.startsWith(Ks), L = G ? S.substring(1) : S, E = O && O > w ? O - w : void 0;
+    const S = v.length === 0 ? g : g.substring(w), G = S.startsWith(Ks), j = G ? S.substring(1) : S, E = O && O > w ? O - w : void 0;
     return {
       modifiers: v,
       hasImportantModifier: G,
-      baseClassName: L,
+      baseClassName: j,
       maybePostfixModifierPosition: E
     };
   };
@@ -184,9 +184,9 @@ const as = "-", Ro = (e) => {
       baseClassName: S,
       maybePostfixModifierPosition: G
     } = s(b);
-    let L = !!G, E = o(L ? S.substring(0, G) : S);
+    let j = !!G, E = o(j ? S.substring(0, G) : S);
     if (!E) {
-      if (!L) {
+      if (!j) {
         g = b + (g.length > 0 ? " " + g : g);
         continue;
       }
@@ -194,13 +194,13 @@ const as = "-", Ro = (e) => {
         g = b + (g.length > 0 ? " " + g : g);
         continue;
       }
-      L = !1;
+      j = !1;
     }
-    const x = Go(w).join(":"), k = O ? x + Ks : x, A = k + E;
-    if (i.includes(A))
+    const x = Go(w).join(":"), k = O ? x + Ks : x, L = k + E;
+    if (i.includes(L))
       continue;
-    i.push(A);
-    const mt = r(E, L);
+    i.push(L);
+    const mt = r(E, j);
     for (let Me = 0; Me < mt.length; ++Me) {
       const Vt = mt[Me];
       i.push(k + Vt);
@@ -252,7 +252,7 @@ const _ = (e) => {
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   ei.test(e) && !ti.test(e)
 ), Js = () => !1, ui = (e) => ri.test(e), hi = (e) => si.test(e), gi = () => {
-  const e = _("colors"), t = _("spacing"), s = _("blur"), o = _("brightness"), r = _("borderColor"), i = _("borderRadius"), n = _("borderSpacing"), g = _("borderWidth"), v = _("contrast"), b = _("grayscale"), w = _("hueRotate"), O = _("invert"), S = _("gap"), G = _("gradientColorStops"), L = _("gradientColorStopPositions"), E = _("inset"), x = _("margin"), k = _("opacity"), A = _("padding"), mt = _("saturate"), Me = _("scale"), Vt = _("sepia"), Ms = _("skew"), Is = _("space"), zs = _("translate"), Cr = () => ["auto", "contain", "none"], Or = () => ["auto", "hidden", "clip", "visible", "scroll"], Pr = () => ["auto", m, t], C = () => [m, t], Bs = () => ["", se, fe], Ut = () => ["auto", tt, m], Rs = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], Ft = () => ["solid", "dashed", "dotted", "double", "none"], qs = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], Sr = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], vt = () => ["", "0", m], Ns = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], re = () => [tt, m];
+  const e = _("colors"), t = _("spacing"), s = _("blur"), o = _("brightness"), r = _("borderColor"), i = _("borderRadius"), n = _("borderSpacing"), g = _("borderWidth"), v = _("contrast"), b = _("grayscale"), w = _("hueRotate"), O = _("invert"), S = _("gap"), G = _("gradientColorStops"), j = _("gradientColorStopPositions"), E = _("inset"), x = _("margin"), k = _("opacity"), L = _("padding"), mt = _("saturate"), Me = _("scale"), Vt = _("sepia"), Ms = _("skew"), Is = _("space"), zs = _("translate"), Cr = () => ["auto", "contain", "none"], Or = () => ["auto", "hidden", "clip", "visible", "scroll"], Pr = () => ["auto", m, t], C = () => [m, t], Bs = () => ["", se, fe], Ut = () => ["auto", tt, m], Rs = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], Ft = () => ["solid", "dashed", "dotted", "double", "none"], qs = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], Sr = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], vt = () => ["", "0", m], Ns = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], re = () => [tt, m];
   return {
     cacheSize: 500,
     separator: ":",
@@ -720,63 +720,63 @@ const _ = (e) => {
        * @see https://tailwindcss.com/docs/padding
        */
       p: [{
-        p: [A]
+        p: [L]
       }],
       /**
        * Padding X
        * @see https://tailwindcss.com/docs/padding
        */
       px: [{
-        px: [A]
+        px: [L]
       }],
       /**
        * Padding Y
        * @see https://tailwindcss.com/docs/padding
        */
       py: [{
-        py: [A]
+        py: [L]
       }],
       /**
        * Padding Start
        * @see https://tailwindcss.com/docs/padding
        */
       ps: [{
-        ps: [A]
+        ps: [L]
       }],
       /**
        * Padding End
        * @see https://tailwindcss.com/docs/padding
        */
       pe: [{
-        pe: [A]
+        pe: [L]
       }],
       /**
        * Padding Top
        * @see https://tailwindcss.com/docs/padding
        */
       pt: [{
-        pt: [A]
+        pt: [L]
       }],
       /**
        * Padding Right
        * @see https://tailwindcss.com/docs/padding
        */
       pr: [{
-        pr: [A]
+        pr: [L]
       }],
       /**
        * Padding Bottom
        * @see https://tailwindcss.com/docs/padding
        */
       pb: [{
-        pb: [A]
+        pb: [L]
       }],
       /**
        * Padding Left
        * @see https://tailwindcss.com/docs/padding
        */
       pl: [{
-        pl: [A]
+        pl: [L]
       }],
       /**
        * Margin
@@ -1223,21 +1223,21 @@ const _ = (e) => {
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-from-pos": [{
-        from: [L]
+        from: [j]
       }],
       /**
        * Gradient Color Stops Via Position
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-via-pos": [{
-        via: [L]
+        via: [j]
       }],
       /**
        * Gradient Color Stops To Position
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-to-pos": [{
-        to: [L]
+        to: [j]
       }],
       /**
        * Gradient Color Stops From
@@ -2301,11 +2301,17 @@ function Qs() {
     }
   );
 }
-const c = p` @font-face {
+const c = p` 
+@font-face {
   font-family: 'GeistSans';
 
   src: url('assets/fonts/Geist/Geist-Regular.woff2') format('woff2');
 }
+@font-face {
+  font-family: 'GeistThin';
+ 
+  src: url('assets/fonts/Geist/GeistVariableVF.woff2') format('woff2');
+}
 
 /*
 ! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
@@ -2768,7 +2774,7 @@ video {
   --secondary-foreground: 240 5.9% 10%;
   --muted: 240 4.8% 95.9%;
   --muted-foreground: 240 4% 46%;
-  --accent: 240 4.8% 95.9%;
+  --accent: 240 5% 96%;
   --accent-foreground: 240 5.9% 10%;
   --destructive: 0 84.2% 60.2%;
   --destructive-foreground: 0 0% 98%;
@@ -2791,7 +2797,7 @@ video {
 }
 
 .dark {
-  --background: 240 10% 3.9%;
+  --background: 240 10% 4%;
   --foreground: 0 0% 98%;
   --card: 240 10% 3.9%;
   --card-foreground: 0 0% 98%;
@@ -2803,7 +2809,7 @@ video {
   --secondary-foreground: 0 0% 98%;
   --muted: 240 3.7% 15.9%;
   --muted-foreground: 240 5% 65%;
-  --accent: 240 3.7% 15.9%;
+  --accent: 240 4% 16%;
   --accent-foreground: 0 0% 98%;
   --destructive: 0 62.8% 30.6%;
   --destructive-foreground: 0 0% 98%;
@@ -2826,7 +2832,7 @@ video {
 
 * {
   border-color: hsl(var(--border));
-  font-family: GeistSans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: GeistSans,GeistThin, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 body {
@@ -4161,7 +4167,7 @@ body {
 }
 
 .font-geist {
-  font-family: GeistSans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: GeistSans,GeistThin, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 .font-mono {
@@ -4219,6 +4225,9 @@ body {
 .font-normal {
   font-weight: 400;
 }
+.font-thin {
+  font-weight: 300;
+}
 
 .font-semibold {
   font-weight: 600;
@@ -5684,8 +5693,8 @@ const Us = (e) => typeof e == "boolean" ? "".concat(e) : e === 0 ? "0" : e, Fs =
     return S === void 0 || (b[O] = S), b;
   }, {}), v = t == null || (o = t.compoundVariants) === null || o === void 0 ? void 0 : o.reduce((b, w) => {
     let { class: O, className: S, ...G } = w;
-    return Object.entries(G).every((L) => {
-      let [E, x] = L;
+    return Object.entries(G).every((j) => {
+      let [E, x] = j;
       return Array.isArray(x) ? x.includes({
         ...i,
         ...g
@@ -5974,7 +5983,7 @@ var Ji = Object.defineProperty, Qi = Object.getOwnPropertyDescriptor, Le = (e, t
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
   return o && r && Ji(t, s, r), r;
 };
-let M = class extends $ {
+let A = class extends $ {
   constructor() {
     super(...arguments), this.click = () => {
     }, this.disabled = !1, this.type = "button", this.variant = "default", this.size = "default", this.externalClass = "", this.isCustomClass = !1;
@@ -5994,7 +6003,7 @@ let M = class extends $ {
         ${P(e)}
         ?disabled="${this.disabled}"
         class="${h(
-      M.buttonVariants({
+      A.buttonVariants({
         variant: this.variant,
         size: this.size,
         className: this.className
@@ -6007,8 +6016,8 @@ let M = class extends $ {
     `;
   }
 };
-M.buttonVariants = Zi;
-M.styles = [
+A.buttonVariants = Zi;
+A.styles = [
   p`
       :host {
         --rtg-button-bg: unset;
@@ -6027,28 +6036,28 @@ M.styles = [
 ];
 Le([
   a({ type: Function })
-], M.prototype, "click", 2);
+], A.prototype, "click", 2);
 Le([
   a({ type: Boolean })
-], M.prototype, "disabled", 2);
+], A.prototype, "disabled", 2);
 Le([
   a({ type: String })
-], M.prototype, "type", 2);
+], A.prototype, "type", 2);
 Le([
   a({ type: String })
-], M.prototype, "variant", 2);
+], A.prototype, "variant", 2);
 Le([
   a({ type: String })
-], M.prototype, "size", 2);
+], A.prototype, "size", 2);
 Le([
   a({ type: String })
-], M.prototype, "externalClass", 2);
+], A.prototype, "externalClass", 2);
 Le([
   a({ type: String })
-], M.prototype, "isCustomClass", 2);
-M = Le([
+], A.prototype, "isCustomClass", 2);
+A = Le([
   d("rtg-button")
-], M);
+], A);
 const en = Y(
   "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",
   {
@@ -6445,7 +6454,7 @@ var zn = Object.defineProperty, Bn = Object.getOwnPropertyDescriptor, Ue = (e, t
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
   return o && r && zn(t, s, r), r;
 };
-let I = class extends u {
+let M = class extends u {
   constructor() {
     super(...arguments), this._id = "", this._hidden = "", this.selected = !1, this.checked = !1, this.disabled = !1;
   }
@@ -6456,7 +6465,7 @@ let I = class extends u {
     const e = (s = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : s.querySelector("div[rtgcmd-group]");
     return e ? this._id = `${e.getAttribute(
       "id"
-    )}li${I._counter++}` : this._id = `rtgcmdrxgxli${I._counter++}`, this._id;
+    )}li${M._counter++}` : this._id = `rtgcmdrxgxli${M._counter++}`, this._id;
   }
   get value() {
     var e;
@@ -6510,8 +6519,8 @@ let I = class extends u {
     `;
   }
 };
-I._counter = 0;
-I.styles = [
+M._counter = 0;
+M.styles = [
   p`
       .icon-space {
         width: 16px; /* Fixed width to reserve space for the check icon */
@@ -6523,25 +6532,25 @@ I.styles = [
 ];
 Ue([
   a({ type: String })
-], I.prototype, "_id", 2);
+], M.prototype, "_id", 2);
 Ue([
   a({ attribute: "aria-hidden", type: String })
-], I.prototype, "_hidden", 2);
+], M.prototype, "_hidden", 2);
 Ue([
   a({ attribute: "data-value", type: String })
-], I.prototype, "value", 1);
+], M.prototype, "value", 1);
 Ue([
   a({ type: Boolean })
-], I.prototype, "selected", 2);
+], M.prototype, "selected", 2);
 Ue([
   a({ type: Boolean })
-], I.prototype, "checked", 2);
+], M.prototype, "checked", 2);
 Ue([
   a({ type: Boolean })
-], I.prototype, "disabled", 2);
-I = Ue([
+], M.prototype, "disabled", 2);
+M = Ue([
   d("rtg-context-menu-checkbox-item")
-], I);
+], M);
 var Rn = Object.defineProperty, qn = Object.getOwnPropertyDescriptor, ur = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? qn(t, s) : t, i = e.length - 1, n; i >= 0; i--)
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
@@ -6669,7 +6678,7 @@ var Vn = Object.defineProperty, Un = Object.getOwnPropertyDescriptor, Fe = (e, t
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
   return o && r && Vn(t, s, r), r;
 };
-let z = class extends u {
+let I = class extends u {
   constructor() {
     super(...arguments), this._id = "", this._hidden = "", this.selected = !1, this.checked = !1, this.disabled = !1;
   }
@@ -6680,7 +6689,7 @@ let z = class extends u {
     const e = (s = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : s.querySelector("div[rtgcmd-group]");
     return e ? this._id = `${e.getAttribute(
       "id"
-    )}li${z._counter++}` : this._id = `rtgcmdrxgxli${z._counter++}`, this._id;
+    )}li${I._counter++}` : this._id = `rtgcmdrxgxli${I._counter++}`, this._id;
   }
   get value() {
     var e;
@@ -6725,8 +6734,8 @@ let z = class extends u {
     `;
   }
 };
-z._counter = 0;
-z.styles = [
+I._counter = 0;
+I.styles = [
   p`
       .icon-space {
         width: 16px; /* Fixed width to reserve space for the check icon */
@@ -6738,25 +6747,25 @@ z.styles = [
 ];
 Fe([
   a({ type: String })
-], z.prototype, "_id", 2);
+], I.prototype, "_id", 2);
 Fe([
   a({ attribute: "aria-hidden", type: String })
-], z.prototype, "_hidden", 2);
+], I.prototype, "_hidden", 2);
 Fe([
   a({ attribute: "data-value", type: String })
-], z.prototype, "value", 1);
+], I.prototype, "value", 1);
 Fe([
   a({ type: Boolean })
-], z.prototype, "selected", 2);
+], I.prototype, "selected", 2);
 Fe([
   a({ type: Boolean })
-], z.prototype, "checked", 2);
+], I.prototype, "checked", 2);
 Fe([
   a({ type: Boolean })
-], z.prototype, "disabled", 2);
-z = Fe([
+], I.prototype, "disabled", 2);
+I = Fe([
   d("rtg-context-menu-radio-item")
-], z);
+], I);
 var Fn = Object.defineProperty, Gn = Object.getOwnPropertyDescriptor, ms = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? Gn(t, s) : t, i = e.length - 1, n; i >= 0; i--)
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
@@ -7516,7 +7525,7 @@ var wa = Object.defineProperty, ya = Object.getOwnPropertyDescriptor, ee = (e, t
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
   return o && r && wa(t, s, r), r;
 };
-let B = class extends $ {
+let z = class extends $ {
   constructor() {
     super(...arguments), this.value = "", this.key = "", this.tabindex = 0, this.isSelected = !1, this.isFocus = !1, this.class = "", this.selectItemIndex = -1, this.onSelect = (e, t) => {
     }, this.onMouseOver = (e, t) => {
@@ -7570,37 +7579,37 @@ let B = class extends $ {
     `;
   }
 };
-B.styles = [p``, c];
+z.styles = [p``, c];
 ee([
   a({ type: String })
-], B.prototype, "value", 2);
+], z.prototype, "value", 2);
 ee([
   a({ type: String })
-], B.prototype, "key", 2);
+], z.prototype, "key", 2);
 ee([
   a({ type: Number })
-], B.prototype, "tabindex", 2);
+], z.prototype, "tabindex", 2);
 ee([
   a({ type: Boolean })
-], B.prototype, "isSelected", 2);
+], z.prototype, "isSelected", 2);
 ee([
   a({ type: Boolean })
-], B.prototype, "isFocus", 2);
+], z.prototype, "isFocus", 2);
 ee([
   a({ type: String })
-], B.prototype, "class", 2);
+], z.prototype, "class", 2);
 ee([
   a({ type: Number })
-], B.prototype, "selectItemIndex", 2);
+], z.prototype, "selectItemIndex", 2);
 ee([
   a({ type: Function })
-], B.prototype, "onSelect", 2);
+], z.prototype, "onSelect", 2);
 ee([
   a({ type: Function })
-], B.prototype, "onMouseOver", 2);
-B = ee([
+], z.prototype, "onMouseOver", 2);
+z = ee([
   d("rtg-combo-box-item")
-], B);
+], z);
 var xa = Object.defineProperty, _a = Object.getOwnPropertyDescriptor, mr = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? _a(t, s) : t, i = e.length - 1, n; i >= 0; i--)
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
@@ -8165,7 +8174,7 @@ var tl = Object.defineProperty, rl = Object.getOwnPropertyDescriptor, Ge = (e, t
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
   return o && r && tl(t, s, r), r;
 };
-let R = class extends u {
+let B = class extends u {
   constructor() {
     super(...arguments), this._id = "", this._hidden = "", this.selected = !1, this.checked = !1, this.disabled = !1;
   }
@@ -8176,7 +8185,7 @@ let R = class extends u {
     const e = (s = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : s.querySelector("div[rtgcmd-group]");
     return e ? this._id = `${e.getAttribute(
       "id"
-    )}li${R._counter++}` : this._id = `rtgcmdrxgxli${R._counter++}`, this._id;
+    )}li${B._counter++}` : this._id = `rtgcmdrxgxli${B._counter++}`, this._id;
   }
   get value() {
     var e;
@@ -8221,8 +8230,8 @@ let R = class extends u {
     `;
   }
 };
-R._counter = 0;
-R.styles = [
+B._counter = 0;
+B.styles = [
   p`
       .icon-space {
         width: 16px; /* Fixed width to reserve space for the check icon */
@@ -8234,25 +8243,25 @@ R.styles = [
 ];
 Ge([
   a({ type: String })
-], R.prototype, "_id", 2);
+], B.prototype, "_id", 2);
 Ge([
   a({ attribute: "aria-hidden", type: String })
-], R.prototype, "_hidden", 2);
+], B.prototype, "_hidden", 2);
 Ge([
   a({ attribute: "data-value", type: String })
-], R.prototype, "value", 1);
+], B.prototype, "value", 1);
 Ge([
   a({ type: Boolean })
-], R.prototype, "selected", 2);
+], B.prototype, "selected", 2);
 Ge([
   a({ type: Boolean })
-], R.prototype, "checked", 2);
+], B.prototype, "checked", 2);
 Ge([
   a({ type: Boolean })
-], R.prototype, "disabled", 2);
-R = Ge([
+], B.prototype, "disabled", 2);
+B = Ge([
   d("rtg-dropdown-menu-radio-item")
-], R);
+], B);
 var sl = Object.defineProperty, ol = Object.getOwnPropertyDescriptor, _s = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? ol(t, s) : t, i = e.length - 1, n; i >= 0; i--)
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
@@ -8299,7 +8308,7 @@ var il = Object.defineProperty, nl = Object.getOwnPropertyDescriptor, He = (e, t
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
   return o && r && il(t, s, r), r;
 };
-let q = class extends u {
+let R = class extends u {
   constructor() {
     super(...arguments), this._id = "", this._hidden = "", this.selected = !1, this.checked = !1, this.disabled = !1;
   }
@@ -8310,7 +8319,7 @@ let q = class extends u {
     const e = (s = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : s.querySelector("div[rtgcmd-group]");
     return e ? this._id = `${e.getAttribute(
       "id"
-    )}li${q._counter++}` : this._id = `rtgcmdrxgxli${q._counter++}`, this._id;
+    )}li${R._counter++}` : this._id = `rtgcmdrxgxli${R._counter++}`, this._id;
   }
   get value() {
     var e;
@@ -8364,8 +8373,8 @@ let q = class extends u {
     `;
   }
 };
-q._counter = 0;
-q.styles = [
+R._counter = 0;
+R.styles = [
   p`
       .icon-space {
         width: 16px; /* Fixed width to reserve space for the check icon */
@@ -8377,25 +8386,25 @@ q.styles = [
 ];
 He([
   a({ type: String })
-], q.prototype, "_id", 2);
+], R.prototype, "_id", 2);
 He([
   a({ attribute: "aria-hidden", type: String })
-], q.prototype, "_hidden", 2);
+], R.prototype, "_hidden", 2);
 He([
   a({ attribute: "data-value", type: String })
-], q.prototype, "value", 1);
+], R.prototype, "value", 1);
 He([
   a({ type: Boolean })
-], q.prototype, "selected", 2);
+], R.prototype, "selected", 2);
 He([
   a({ type: Boolean })
-], q.prototype, "checked", 2);
+], R.prototype, "checked", 2);
 He([
   a({ type: Boolean })
-], q.prototype, "disabled", 2);
-q = He([
+], R.prototype, "disabled", 2);
+R = He([
   d("rtg-dropdown-menu-checkbox-item")
-], q);
+], R);
 var al = Object.defineProperty, ll = Object.getOwnPropertyDescriptor, vr = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? ll(t, s) : t, i = e.length - 1, n; i >= 0; i--)
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
@@ -9048,7 +9057,7 @@ var Il = Object.defineProperty, zl = Object.getOwnPropertyDescriptor, te = (e, t
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
   return o && r && Il(t, s, r), r;
 };
-let N = class extends $ {
+let q = class extends $ {
   constructor() {
     super(...arguments), this.value = "", this.key = "", this.tabindex = 0, this.isSelected = !1, this.isFocus = !1, this.class = "", this.selectItemIndex = -1, this.onSelect = (e, t) => {
     }, this.onMouseOver = (e, t) => {
@@ -9099,37 +9108,37 @@ let N = class extends $ {
     `;
   }
 };
-N.styles = [p``, c];
+q.styles = [p``, c];
 te([
   a({ type: String })
-], N.prototype, "value", 2);
+], q.prototype, "value", 2);
 te([
   a({ type: String })
-], N.prototype, "key", 2);
+], q.prototype, "key", 2);
 te([
   a({ type: Number })
-], N.prototype, "tabindex", 2);
+], q.prototype, "tabindex", 2);
 te([
   a({ type: Boolean })
-], N.prototype, "isSelected", 2);
+], q.prototype, "isSelected", 2);
 te([
   a({ type: Boolean })
-], N.prototype, "isFocus", 2);
+], q.prototype, "isFocus", 2);
 te([
   a({ type: String })
-], N.prototype, "class", 2);
+], q.prototype, "class", 2);
 te([
   a({ type: Number })
-], N.prototype, "selectItemIndex", 2);
+], q.prototype, "selectItemIndex", 2);
 te([
   a({ type: Function })
-], N.prototype, "onSelect", 2);
+], q.prototype, "onSelect", 2);
 te([
   a({ type: Function })
-], N.prototype, "onMouseOver", 2);
-N = te([
+], q.prototype, "onMouseOver", 2);
+q = te([
   d("rtg-select-item")
-], N);
+], q);
 var Bl = Object.defineProperty, Rl = Object.getOwnPropertyDescriptor, Cs = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? Rl(t, s) : t, i = e.length - 1, n; i >= 0; i--)
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
@@ -9913,7 +9922,7 @@ var fd = Object.defineProperty, bd = Object.getOwnPropertyDescriptor, me = (e, t
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
   return o && r && fd(t, s, r), r;
 };
-let T = class extends u {
+let N = class extends u {
   constructor() {
     super(...arguments), this.click = () => {
     }, this.disabled = !1, this.isCustomClass = !1, this.variant = "default", this.size = "default", this.mode = "single", this.selectedStartDate = null, this.selectedEndDate = null;
@@ -9922,7 +9931,7 @@ let T = class extends u {
     const e = ["1", "2", "3", "4", "5", "6"];
     return l`
     <main>
-    <rtg-progress .progressValue="${15}"></rtg-progress>
+    <rtg-progress .value="${50}"></rtg-progress>
     </main>
     <main>
     <rtg-date-picker>
@@ -10396,8 +10405,8 @@ let T = class extends u {
     `;
   }
 };
-T.buttonVariants = vd;
-T.styles = [
+N.buttonVariants = vd;
+N.styles = [
   c,
   p`
       :host {
@@ -10416,31 +10425,31 @@ T.styles = [
 ];
 me([
   a({ type: Function })
-], T.prototype, "click", 2);
+], N.prototype, "click", 2);
 me([
   a({ type: Boolean })
-], T.prototype, "disabled", 2);
+], N.prototype, "disabled", 2);
 me([
   a({ type: String })
-], T.prototype, "isCustomClass", 2);
+], N.prototype, "isCustomClass", 2);
 me([
   a({ type: String })
-], T.prototype, "variant", 2);
+], N.prototype, "variant", 2);
 me([
   a({ type: String })
-], T.prototype, "size", 2);
+], N.prototype, "size", 2);
 me([
   a({ type: String })
-], T.prototype, "mode", 2);
+], N.prototype, "mode", 2);
 me([
   a({ type: Object })
-], T.prototype, "selectedStartDate", 2);
+], N.prototype, "selectedStartDate", 2);
 me([
   a({ type: Object })
-], T.prototype, "selectedEndDate", 2);
-T = me([
+], N.prototype, "selectedEndDate", 2);
+N = me([
   d("rtg-sample-demo")
-], T);
+], N);
 var wd = Object.defineProperty, yd = Object.getOwnPropertyDescriptor, ut = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? yd(t, s) : t, i = e.length - 1, n; i >= 0; i--)
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
@@ -10758,7 +10767,7 @@ var Sd = Object.defineProperty, Ed = Object.getOwnPropertyDescriptor, Ke = (e, t
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
   return o && r && Sd(t, s, r), r;
 };
-let V = class extends u {
+let T = class extends u {
   constructor() {
     super(...arguments), this._id = "", this._hidden = "", this.selected = !1, this.checked = !1, this.disabled = !1;
   }
@@ -10767,7 +10776,7 @@ let V = class extends u {
     if (this._id !== "")
       return this._id;
     const e = (s = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : s.querySelector("div[rtgcmd-group]");
-    return e ? this._id = `${e.getAttribute("id")}li${V._counter++}` : this._id = `rtgcmdrxgxli${V._counter++}`, this._id;
+    return e ? this._id = `${e.getAttribute("id")}li${T._counter++}` : this._id = `rtgcmdrxgxli${T._counter++}`, this._id;
   }
   get value() {
     var e;
@@ -10812,8 +10821,8 @@ let V = class extends u {
     `;
   }
 };
-V._counter = 0;
-V.styles = [
+T._counter = 0;
+T.styles = [
   p`
       .icon-space {
         width: 16px; /* Fixed width to reserve space for the check icon */
@@ -10825,31 +10834,31 @@ V.styles = [
 ];
 Ke([
   a({ type: String })
-], V.prototype, "_id", 2);
+], T.prototype, "_id", 2);
 Ke([
   a({ attribute: "aria-hidden", type: String })
-], V.prototype, "_hidden", 2);
+], T.prototype, "_hidden", 2);
 Ke([
   a({ attribute: "data-value", type: String })
-], V.prototype, "value", 1);
+], T.prototype, "value", 1);
 Ke([
   a({ type: Boolean })
-], V.prototype, "selected", 2);
+], T.prototype, "selected", 2);
 Ke([
   a({ type: Boolean })
-], V.prototype, "checked", 2);
+], T.prototype, "checked", 2);
 Ke([
   a({ type: Boolean })
-], V.prototype, "disabled", 2);
-V = Ke([
+], T.prototype, "disabled", 2);
+T = Ke([
   d("rtg-menubar-radio-item")
-], V);
+], T);
 var kd = Object.defineProperty, Dd = Object.getOwnPropertyDescriptor, We = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? Dd(t, s) : t, i = e.length - 1, n; i >= 0; i--)
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
   return o && r && kd(t, s, r), r;
 };
-let U = class extends u {
+let V = class extends u {
   constructor() {
     super(...arguments), this._id = "", this._hidden = "", this.selected = !1, this.checked = !1, this.disabled = !1;
   }
@@ -10860,7 +10869,7 @@ let U = class extends u {
     const e = (s = (t = this.parentElement) == null ? void 0 : t.shadowRoot) == null ? void 0 : s.querySelector("div[rtgcmd-group]");
     return e ? this._id = `${e.getAttribute(
       "id"
-    )}li${U._counter++}` : this._id = `rtgcmdrxgxli${U._counter++}`, this._id;
+    )}li${V._counter++}` : this._id = `rtgcmdrxgxli${V._counter++}`, this._id;
   }
   get value() {
     var e;
@@ -10914,8 +10923,8 @@ let U = class extends u {
     `;
   }
 };
-U._counter = 0;
-U.styles = [
+V._counter = 0;
+V.styles = [
   p`
       .icon-space {
         width: 16px; /* Fixed width to reserve space for the check icon */
@@ -10927,25 +10936,25 @@ U.styles = [
 ];
 We([
   a({ type: String })
-], U.prototype, "_id", 2);
+], V.prototype, "_id", 2);
 We([
   a({ attribute: "aria-hidden", type: String })
-], U.prototype, "_hidden", 2);
+], V.prototype, "_hidden", 2);
 We([
   a({ attribute: "data-value", type: String })
-], U.prototype, "value", 1);
+], V.prototype, "value", 1);
 We([
   a({ type: Boolean })
-], U.prototype, "selected", 2);
+], V.prototype, "selected", 2);
 We([
   a({ type: Boolean })
-], U.prototype, "checked", 2);
+], V.prototype, "checked", 2);
 We([
   a({ type: Boolean })
-], U.prototype, "disabled", 2);
-U = We([
+], V.prototype, "disabled", 2);
+V = We([
   d("rtg-menubar-checkbox-item")
-], U);
+], V);
 var jd = Object.defineProperty, Ld = Object.getOwnPropertyDescriptor, Ds = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? Ld(t, s) : t, i = e.length - 1, n; i >= 0; i--)
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
@@ -11417,7 +11426,7 @@ var Zd = Object.defineProperty, Jd = Object.getOwnPropertyDescriptor, Je = (e, t
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
   return o && r && Zd(t, s, r), r;
 };
-let F = class extends u {
+let U = class extends u {
   constructor() {
     super(...arguments), this.state = "close", this.twClass = "", this.isActive = !1, this.size = "icon", this.variant = "ghost", this.href = "javascript:void(0)";
   }
@@ -11433,7 +11442,7 @@ let F = class extends u {
         href="${this.href}"
         aria-current="${this.isActive ? "page" : void 0}"
         class="${h(
-      F.paginationVariants({
+      U.paginationVariants({
         variant: this.isActive ? "outline" : "ghost",
         size: this.size,
         className: this.className
@@ -11446,29 +11455,29 @@ let F = class extends u {
     `;
   }
 };
-F.styles = [p``, c];
-F.paginationVariants = Wd;
+U.styles = [p``, c];
+U.paginationVariants = Wd;
 Je([
   a({ attribute: "data-state", type: String })
-], F.prototype, "state", 2);
+], U.prototype, "state", 2);
 Je([
   a({ type: String })
-], F.prototype, "twClass", 2);
+], U.prototype, "twClass", 2);
 Je([
   a({ type: Boolean })
-], F.prototype, "isActive", 2);
+], U.prototype, "isActive", 2);
 Je([
   a({ type: String })
-], F.prototype, "size", 2);
+], U.prototype, "size", 2);
 Je([
   a({ type: String })
-], F.prototype, "variant", 2);
+], U.prototype, "variant", 2);
 Je([
   a({ type: String })
-], F.prototype, "href", 2);
-F = Je([
+], U.prototype, "href", 2);
+U = Je([
   d("rtg-pagination-link")
-], F);
+], U);
 var Qd = Object.defineProperty, ec = Object.getOwnPropertyDescriptor, _r = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? ec(t, s) : t, i = e.length - 1, n; i >= 0; i--)
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
@@ -11483,7 +11492,7 @@ let dt = class extends u {
     const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot"), t = e == null ? void 0 : e.assignedElements();
     if (t) {
       for (let o = 0; o < t.length; o++)
-        if (t[o] instanceof F)
+        if (t[o] instanceof U)
           return t[o];
     }
     return null;
@@ -11978,7 +11987,7 @@ var uc = Object.defineProperty, hc = Object.getOwnPropertyDescriptor, ve = (e, t
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
   return o && r && uc(t, s, r), r;
 };
-let j = class extends u {
+let F = class extends u {
   constructor() {
     super(...arguments), this.currentDate = /* @__PURE__ */ new Date(), this.selectedStartDate = null, this.selectedEndDate = null, this.variant = "outline", this.size = "default", this.styleCalendar = !1, this.twCLass = "", this.mode = "single";
   }
@@ -12032,7 +12041,7 @@ let j = class extends u {
       <div
         part="calendar"
         class="${h(
-      "p-3 rounded-md border shadow",
+      "p-3 rounded-md border shadow bg-popover",
       this.styleCalendar ? "styled-calendar" : "",
       this.className,
       this.twCLass
@@ -12046,13 +12055,7 @@ let j = class extends u {
               <div class="space-x-1 flex items-center">
                 <button
                   style="width:1.75rem"
-                  class="${h(
-      j.buttonVariants({
-        variant: this.variant,
-        size: this.size,
-        className: this.className
-      })
-    ), "nav-button absolute left-2"}"
+                  class="nav-button text-muted-foreground absolute left-2 inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground h-7 w-7 p-0"
                   @click="${this.previousMonth}"
                 >
                   <svg
@@ -12065,13 +12068,16 @@ let j = class extends u {
                     stroke-width="2"
                     stroke-linecap="round"
                     stroke-linejoin="round"
-                    style="width:1.2rem;height:1.2rem;margin-left:-4px"
-                    class="lucide lucide-chevron-left rdp-nav_icon"
+                    style="width:1.2rem;height:1.2rem;margin-top:-2px;margin-left:2px"
+                    class="lucide lucide-chevron-left rdp-nav_icon hover:text-muted-foreground"
                   >
                     <path d="m15 18-6-6 6-6"></path>
                   </svg>
                 </button>
-                <div class="text-sm font-medium">
+                <div
+                  style="font-family:GeistThin;font-weight:600"
+                  class="text-sm text-accent-foreground"
+                >
                   ${this.currentDate.toLocaleString("default", {
       month: "long",
       year: "numeric"
@@ -12079,13 +12085,7 @@ let j = class extends u {
                 </div>
                 <button
                   style="width:1.75rem"
-                  class="${h(
-      j.buttonVariants({
-        variant: this.variant,
-        size: this.size,
-        className: this.className
-      })
-    ), "nav-button absolute right-1"}"
+                  class="nav-button absolute right-1 text-muted-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground h-7 w-7 p-0"
                   @click="${this.nextMonth}"
                 >
                   <svg
@@ -12098,8 +12098,8 @@ let j = class extends u {
                     stroke-width="2"
                     stroke-linecap="round"
                     stroke-linejoin="round"
-                    style="width:1.2rem;height:1.2rem;margin-left:-4px"
-                    class="lucide lucide-chevron-right rdp-nav_icon"
+                    style="width:1.2rem;height:1.2rem;margin-top:-2px;margin-left:2px"
+                    class="lucide lucide-chevron-right rdp-nav_icon hover:text-muted-foreground"
                   >
                     <path d="m9 18 6-6-6-6"></path>
                   </svg>
@@ -12112,8 +12112,9 @@ let j = class extends u {
                   ${["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(
       (n) => l`
                       <th
+                        style="font-family:GeistThin"
                         scope="col"
-                        class="text-xs text-muted-foreground rounded-md w-8 font-normal"
+                        class="text-day text-muted-foreground rounded-md w-8 font-normal"
                         aria-label="${n}"
                       >
                         ${n}
@@ -12144,12 +12145,12 @@ let j = class extends u {
                               role="presentation"
                             >
                               <button
+                                style="font-family:GeistThin"
                                 name="day"
                                 class="${h(
           "flex justify-center items-center rounded cursor-pointer transition-colors duration-300 ease-in-out h-8 w-8 font-normal text-sm text-accent-foreground  hover:bg-accent hover:text-accent-foreground",
-          v.isInactive && "hover:bg-accent text-muted-foreground opacity-50",
-          (w || O) && v.isCurrentMonth && // فقط اگر روز متعلق به ماه فعلی باشد
-          "bg-primary text-primary-foreground opacity-100 hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground"
+          v.isInactive && "hover:bg-accent text-muted-foreground",
+          (w || O) && v.isCurrentMonth && "bg-primary text-primary-foreground opacity-100 hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground"
         )}"
                                 role="gridcell"
                                 tabindex="-1"
@@ -12176,11 +12177,11 @@ let j = class extends u {
     `;
   }
 };
-j.styles = [
+F.styles = [
   p`
       :host {
         display: inline-block;
-        font-family: Arial, sans-serif;
+
         border: 1px solid #e0e0e0;
         border-radius: 8px;
         padding: 8px;
@@ -12221,37 +12222,40 @@ j.styles = [
         border-top-right-radius: 8px;
         border-bottom-right-radius: 8px;
       }
+      .text-day {
+        font-size: 0.8rem;
+      }
     `,
   c
 ];
-j.buttonVariants = pc;
+F.buttonVariants = pc;
 ve([
   a({ type: Object })
-], j.prototype, "currentDate", 2);
+], F.prototype, "currentDate", 2);
 ve([
   a({ type: Object })
-], j.prototype, "selectedStartDate", 2);
+], F.prototype, "selectedStartDate", 2);
 ve([
   a({ type: Object })
-], j.prototype, "selectedEndDate", 2);
+], F.prototype, "selectedEndDate", 2);
 ve([
   a({ type: String })
-], j.prototype, "variant", 2);
+], F.prototype, "variant", 2);
 ve([
   a({ type: String })
-], j.prototype, "size", 2);
+], F.prototype, "size", 2);
 ve([
   a({ type: Boolean })
-], j.prototype, "styleCalendar", 2);
+], F.prototype, "styleCalendar", 2);
 ve([
   a({ type: String })
-], j.prototype, "twCLass", 2);
+], F.prototype, "twCLass", 2);
 ve([
   a({ type: String })
-], j.prototype, "mode", 2);
-j = ve([
+], F.prototype, "mode", 2);
+F = ve([
   d("rtg-calendar")
-], j);
+], F);
 var gc = Object.defineProperty, mc = Object.getOwnPropertyDescriptor, Ls = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? mc(t, s) : t, i = e.length - 1, n; i >= 0; i--)
     (n = e[i]) && (r = (o ? n(t, s, r) : n(r)) || r);
@@ -12262,7 +12266,7 @@ let It = class extends u {
     super(...arguments), this.twCLass = "", this.selectedDate = null;
   }
   handleDateSelected(e) {
-    this.selectedDate = e.detail.date, this.requestUpdate();
+    this.selectedDate = e.detail.startDate, this.requestUpdate();
   }
   render() {
     return l`
@@ -12275,7 +12279,7 @@ let It = class extends u {
           <!-- Trigger to open/close the popover -->
           <rtg-popover-trigger slot="trigger">
             <rtg-button
-              class="w-64 justify-start text-left font-normal text-muted-foreground"
+              class="w-64 justify-start text-left text-sm font-normal bg-background hover:bg-accent text-muted-foreground hover:text-muted-foreground"
               variant="outline"
               slot="trigger-button"
             >
@@ -12340,18 +12344,13 @@ var vc = Object.defineProperty, fc = Object.getOwnPropertyDescriptor, As = (e, t
 };
 let zt = class extends u {
   constructor() {
-    super(...arguments), this.twClass = "", this.progressValue = 15;
-  }
-  firstUpdated() {
-    setTimeout(() => {
-      this.progressValue = 65;
-    }, 500);
+    super(...arguments), this.twClass = "", this.value = 15;
   }
   render() {
     return l`
       <div
         part="progress"
-        aria-valuenow="${this.progressValue}"
+        aria-valuenow="${this.value}"
         aria-valuemax="100"
         aria-valuemin="0"
         role="progressbar"
@@ -12368,23 +12367,31 @@ let zt = class extends u {
           data-state="indeterminate"
           data-max="100"
           class="${h(
-      "h-full w-full flex-1 bg-primary transition-all duration-500",
+      "progress-bar__fill h-full w-full flex-1 bg-primary",
       this.className,
       this.twClass
     )}"
-          style="width: ${this.progressValue}%;"
+          style="width: ${this.value}%;"
         ></div>
       </div>
     `;
   }
 };
-zt.styles = [p``, c];
+zt.styles = [
+  p`
+      .progress-bar__fill {
+        height: 100%;
+        transition: width 0.5s ease-in-out;
+      }
+    `,
+  c
+];
 As([
   a({ type: String })
 ], zt.prototype, "twClass", 2);
 As([
   a({ type: Number })
-], zt.prototype, "progressValue", 2);
+], zt.prototype, "value", 2);
 zt = As([
   d("rtg-progress")
 ], zt);
@@ -12851,8 +12858,8 @@ export {
   Dr as AlertTitle,
   xt as AspectRatio,
   ye as Badge,
-  M as Button,
-  j as Calendar,
+  A as Button,
+  F as Calendar,
   Rr as Card,
   Br as CardContent,
   zr as CardDescription,
@@ -12863,11 +12870,11 @@ export {
   oe as Checkbox,
   D as ComboBox,
   $t as ContextMenu,
-  I as ContextMenuCheckboxItem,
+  M as ContextMenuCheckboxItem,
   rt as ContextMenuContent,
   ie as ContextMenuGroup,
   X as ContextMenuItem,
-  z as ContextMenuRadioItem,
+  I as ContextMenuRadioItem,
   xe as ContextMenuSeparator,
   Tr as ContextMenuShortcut,
   It as DatePicker,
@@ -12878,20 +12885,20 @@ export {
   St as DialogHeader,
   Yr as DialogOverlay,
   Et as DropdownMenu,
-  q as DropdownMenuCheckboxItem,
+  R as DropdownMenuCheckboxItem,
   ot as DropdownMenuContent,
   ae as DropdownMenuGroup,
   W as DropdownMenuItem,
-  R as DropdownMenuRadioItem,
+  B as DropdownMenuRadioItem,
   Ce as DropdownMenuSeparator,
   le as Input,
   Zt as Menubar,
-  U as MenubarCheckboxItem,
+  V as MenubarCheckboxItem,
   Ee as MenubarContent,
   pe as MenubarGroup,
   J as MenubarItem,
   ce as MenubarMenu,
-  V as MenubarRadioItem,
+  T as MenubarRadioItem,
   ke as MenubarSeparator,
   Jr as MenubarShortcut,
   Qt as NavigationMenu,
@@ -12903,7 +12910,7 @@ export {
   er as PaginationContent,
   tr as PaginationEllipsis,
   dt as PaginationItem,
-  F as PaginationLink,
+  U as PaginationLink,
   rr as PaginationNext,
   sr as PaginationPrevious,
   at as Popover,
@@ -12913,7 +12920,7 @@ export {
   Kt as RadioGroup,
   Oe as RadioGroupItem,
   de as Select,
-  N as SelectItem,
+  q as SelectItem,
   Wr as SelectLabel,
   Dt as SelectList,
   Pe as SelectSeperator,