@saasbase-io/core-elements 1.19.0 → 1.21.0

package/dist/index.mjs

@@ -1366,7 +1366,7 @@ const { is: Eh, defineProperty: kh, getOwnPropertyDescriptor: Rh, getOwnProperty
       }
   }
   return r;
-} }, aa = (t, e) => !Eh(t, e), Fa = { attribute: !0, type: String, converter: Zs, reflect: !1, useDefault: !1, hasChanged: aa };
+} }, aa = (t, e) => !Eh(t, e), Ma = { attribute: !0, type: String, converter: Zs, reflect: !1, useDefault: !1, hasChanged: aa };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), tr.litPropertyMetadata ?? (tr.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let ai = class extends HTMLElement {
   static addInitializer(e) {
@@ -1375,7 +1375,7 @@ let ai = class extends HTMLElement {
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(e, r = Fa) {
+  static createProperty(e, r = Ma) {
     if (r.state && (r.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((r = Object.create(r)).wrapped = !0), this.elementProperties.set(e, r), !r.noAccessor) {
       const i = Symbol(), s = this.getPropertyDescriptor(e, i, r);
       s !== void 0 && kh(this.prototype, e, s);
@@ -1393,7 +1393,7 @@ let ai = class extends HTMLElement {
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(e) {
-    return this.elementProperties.get(e) ?? Fa;
+    return this.elementProperties.get(e) ?? Ma;
   }
   static _$Ei() {
     if (this.hasOwnProperty(Di("elementProperties"))) return;
@@ -1577,9 +1577,9 @@ ai.elementStyles = [], ai.shadowRootOptions = { mode: "open" }, ai[Di("elementPr
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Ui = globalThis, Ma = (t) => t, Js = Ui.trustedTypes, Ba = Js ? Js.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, _c = "$lit$", Je = `lit$${Math.random().toFixed(9).slice(2)}$`, xc = "?" + Je, Lh = `<${xc}>`, Mr = document, Gi = () => Mr.createComment(""), Ki = (t) => t === null || typeof t != "object" && typeof t != "function", la = Array.isArray, Ph = (t) => la(t) || typeof (t == null ? void 0 : t[Symbol.iterator]) == "function", Xo = `[ 	
+const Ui = globalThis, Fa = (t) => t, Js = Ui.trustedTypes, Ba = Js ? Js.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, _c = "$lit$", Je = `lit$${Math.random().toFixed(9).slice(2)}$`, xc = "?" + Je, Lh = `<${xc}>`, Fr = document, Gi = () => Fr.createComment(""), Ki = (t) => t === null || typeof t != "object" && typeof t != "function", la = Array.isArray, Ph = (t) => la(t) || typeof (t == null ? void 0 : t[Symbol.iterator]) == "function", Xo = `[ 	
 \f\r]`, Ei = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, qa = /-->/g, Va = />/g, gr = RegExp(`>|${Xo}(?:([^\\s"'>=/]+)(${Xo}*=${Xo}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Ha = /'/g, Ga = /"/g, $c = /^(?:script|style|textarea|title)$/i, Sc = (t) => (e, ...r) => ({ _$litType$: t, strings: e, values: r }), d = Sc(1), fe = Sc(2), Br = Symbol.for("lit-noChange"), g = Symbol.for("lit-nothing"), Ka = /* @__PURE__ */ new WeakMap(), Cr = Mr.createTreeWalker(Mr, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Ha = /'/g, Ga = /"/g, $c = /^(?:script|style|textarea|title)$/i, Sc = (t) => (e, ...r) => ({ _$litType$: t, strings: e, values: r }), d = Sc(1), fe = Sc(2), Br = Symbol.for("lit-noChange"), g = Symbol.for("lit-nothing"), Ka = /* @__PURE__ */ new WeakMap(), Cr = Fr.createTreeWalker(Fr, 129);
 function Cc(t, e) {
   if (!la(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return Ba !== void 0 ? Ba.createHTML(e) : e;
@@ -1629,7 +1629,7 @@ let Gn = class Ec {
     }
   }
   static createElement(e, r) {
-    const i = Mr.createElement("template");
+    const i = Fr.createElement("template");
     return i.innerHTML = e, i;
   }
 };
@@ -1651,17 +1651,17 @@ let zh = class {
     return this._$AM._$AU;
   }
   u(e) {
-    const { el: { content: r }, parts: i } = this._$AD, s = ((e == null ? void 0 : e.creationScope) ?? Mr).importNode(r, !0);
+    const { el: { content: r }, parts: i } = this._$AD, s = ((e == null ? void 0 : e.creationScope) ?? Fr).importNode(r, !0);
     Cr.currentNode = s;
     let o = Cr.nextNode(), n = 0, h = 0, p = i[0];
     for (; p !== void 0; ) {
       if (n === p.index) {
         let b;
-        p.type === 2 ? b = new da(o, o.nextSibling, this, e) : p.type === 1 ? b = new p.ctor(o, p.name, p.strings, this, e) : p.type === 6 && (b = new Fh(o, this, e)), this._$AV.push(b), p = i[++h];
+        p.type === 2 ? b = new da(o, o.nextSibling, this, e) : p.type === 1 ? b = new p.ctor(o, p.name, p.strings, this, e) : p.type === 6 && (b = new Mh(o, this, e)), this._$AV.push(b), p = i[++h];
       }
       n !== (p == null ? void 0 : p.index) && (o = Cr.nextNode(), n++);
     }
-    return Cr.currentNode = Mr, s;
+    return Cr.currentNode = Fr, s;
   }
   p(e) {
     let r = 0;
@@ -1696,7 +1696,7 @@ let zh = class {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== g && Ki(this._$AH) ? this._$AA.nextSibling.data = e : this.T(Mr.createTextNode(e)), this._$AH = e;
+    this._$AH !== g && Ki(this._$AH) ? this._$AA.nextSibling.data = e : this.T(Fr.createTextNode(e)), this._$AH = e;
   }
   $(e) {
     var o;
@@ -1721,8 +1721,8 @@ let zh = class {
   _$AR(e = this._$AA.nextSibling, r) {
     var i;
     for ((i = this._$AP) == null ? void 0 : i.call(this, !1, !0, r); e !== this._$AB; ) {
-      const s = Ma(e).nextSibling;
-      Ma(e).remove(), e = s;
+      const s = Fa(e).nextSibling;
+      Fa(e).remove(), e = s;
     }
   }
   setConnected(e) {
@@ -1780,7 +1780,7 @@ let zh = class {
     var r;
     typeof this._$AH == "function" ? this._$AH.call(((r = this.options) == null ? void 0 : r.host) ?? this.element, e) : this._$AH.handleEvent(e);
   }
-}, Fh = class {
+}, Mh = class {
   constructor(e, r, i) {
     this.element = e, this.type = 6, this._$AN = void 0, this._$AM = r, this.options = i;
   }
@@ -1793,7 +1793,7 @@ let zh = class {
 };
 const Zo = Ui.litHtmlPolyfillSupport;
 Zo == null || Zo(Gn, da), (Ui.litHtmlVersions ?? (Ui.litHtmlVersions = [])).push("3.3.2");
-const Mh = (t, e, r) => {
+const Fh = (t, e, r) => {
   const i = (r == null ? void 0 : r.renderBefore) ?? e;
   let s = i._$litPart$;
   if (s === void 0) {
@@ -1819,7 +1819,7 @@ let v = class extends ai {
   }
   update(e) {
     const r = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Mh(r, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Fh(r, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     var e;
@@ -2057,11 +2057,11 @@ const Kh = (t) => t.strings === void 0;
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Fi = (t, e) => {
+const Mi = (t, e) => {
   var i;
   const r = t._$AN;
   if (r === void 0) return !1;
-  for (const s of r) (i = s._$AO) == null || i.call(s, e, !1), Fi(s, e);
+  for (const s of r) (i = s._$AO) == null || i.call(s, e, !1), Mi(s, e);
   return !0;
 }, Qs = (t) => {
   let e, r;
@@ -2082,9 +2082,9 @@ function Wh(t) {
 }
 function Yh(t, e = !1, r = 0) {
   const i = this._$AH, s = this._$AN;
-  if (s !== void 0 && s.size !== 0) if (e) if (Array.isArray(i)) for (let o = r; o < i.length; o++) Fi(i[o], !1), Qs(i[o]);
-  else i != null && (Fi(i, !1), Qs(i));
-  else Fi(this, t);
+  if (s !== void 0 && s.size !== 0) if (e) if (Array.isArray(i)) for (let o = r; o < i.length; o++) Mi(i[o], !1), Qs(i[o]);
+  else i != null && (Mi(i, !1), Qs(i));
+  else Mi(this, t);
 }
 const Xh = (t) => {
   t.type == Rc.CHILD && (t._$AP ?? (t._$AP = Yh), t._$AQ ?? (t._$AQ = Wh));
@@ -2098,7 +2098,7 @@ class Ac extends Oc {
   }
   _$AO(e, r = !0) {
     var i, s;
-    e !== this.isConnected && (this.isConnected = e, e ? (i = this.reconnected) == null || i.call(this) : (s = this.disconnected) == null || s.call(this)), r && (Fi(this, e), Qs(this));
+    e !== this.isConnected && (this.isConnected = e, e ? (i = this.reconnected) == null || i.call(this) : (s = this.disconnected) == null || s.call(this)), r && (Mi(this, e), Qs(this));
   }
   setValue(e) {
     if (Kh(this._$Ct)) this._$Ct._$AI(e, this);
@@ -5489,9 +5489,9 @@ var pa = "-", dp = (t) => {
       }
       S = !1;
     }
-    let T = bp(y).join(":"), I = w ? T + Dc : T, N = I + k;
-    if (o.includes(N)) continue;
-    o.push(N);
+    let T = bp(y).join(":"), I = w ? T + Dc : T, z = I + k;
+    if (o.includes(z)) continue;
+    o.push(z);
     let J = s(k, S);
     for (let Y = 0; Y < J.length; ++Y) {
       let nt = J[Y];
@@ -5530,19 +5530,19 @@ function _p(t, ...e) {
 var it = (t) => {
   let e = (r) => r[t] || [];
   return e.isThemeGetter = !0, e;
-}, Fc = /^\[(?:([a-z-]+):)?(.+)\]$/i, xp = /^\d+\/\d+$/, $p = /* @__PURE__ */ new Set([
+}, Mc = /^\[(?:([a-z-]+):)?(.+)\]$/i, xp = /^\d+\/\d+$/, $p = /* @__PURE__ */ new Set([
   "px",
   "full",
   "screen"
-]), Sp = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Cp = /\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$/, Ep = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, kp = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Rp = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, Ae = (t) => ci(t) || $p.has(t) || xp.test(t), Fe = (t) => yi(t, "length", zp), ci = (t) => !!t && !Number.isNaN(Number(t)), tn = (t) => yi(t, "number", ci), ki = (t) => !!t && Number.isInteger(Number(t)), Op = (t) => t.endsWith("%") && ci(t.slice(0, -1)), q = (t) => Fc.test(t), Me = (t) => Sp.test(t), Ip = /* @__PURE__ */ new Set([
+]), Sp = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Cp = /\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$/, Ep = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, kp = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Rp = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, Ae = (t) => ci(t) || $p.has(t) || xp.test(t), Me = (t) => yi(t, "length", zp), ci = (t) => !!t && !Number.isNaN(Number(t)), tn = (t) => yi(t, "number", ci), ki = (t) => !!t && Number.isInteger(Number(t)), Op = (t) => t.endsWith("%") && ci(t.slice(0, -1)), V = (t) => Mc.test(t), Fe = (t) => Sp.test(t), Ip = /* @__PURE__ */ new Set([
   "length",
   "size",
   "percentage"
-]), Ap = (t) => yi(t, Ip, Mc), Tp = (t) => yi(t, "position", Mc), Lp = /* @__PURE__ */ new Set(["image", "url"]), Pp = (t) => yi(t, Lp, Dp), Np = (t) => yi(t, "", jp), Ri = () => !0, yi = (t, e, r) => {
-  let i = Fc.exec(t);
+]), Ap = (t) => yi(t, Ip, Fc), Tp = (t) => yi(t, "position", Fc), Lp = /* @__PURE__ */ new Set(["image", "url"]), Pp = (t) => yi(t, Lp, Dp), Np = (t) => yi(t, "", jp), Ri = () => !0, yi = (t, e, r) => {
+  let i = Mc.exec(t);
   return i ? i[1] ? typeof e == "string" ? i[1] === e : e.has(i[1]) : r(i[2]) : !1;
-}, zp = (t) => Cp.test(t) && !Ep.test(t), Mc = () => !1, jp = (t) => kp.test(t), Dp = (t) => Rp.test(t), Up = /* @__PURE__ */ _p(() => {
-  let t = it("colors"), e = it("spacing"), r = it("blur"), i = it("brightness"), s = it("borderColor"), o = it("borderRadius"), n = it("borderSpacing"), h = it("borderWidth"), p = it("contrast"), b = it("grayscale"), y = it("hueRotate"), w = it("invert"), E = it("gap"), C = it("gradientColorStops"), S = it("gradientColorStopPositions"), k = it("inset"), T = it("margin"), I = it("opacity"), N = it("padding"), J = it("saturate"), Y = it("scale"), nt = it("sepia"), gt = it("skew"), jt = it("space"), H = it("translate"), Yt = () => [
+}, zp = (t) => Cp.test(t) && !Ep.test(t), Fc = () => !1, jp = (t) => kp.test(t), Dp = (t) => Rp.test(t), Up = /* @__PURE__ */ _p(() => {
+  let t = it("colors"), e = it("spacing"), r = it("blur"), i = it("brightness"), s = it("borderColor"), o = it("borderRadius"), n = it("borderSpacing"), h = it("borderWidth"), p = it("contrast"), b = it("grayscale"), y = it("hueRotate"), w = it("invert"), E = it("gap"), C = it("gradientColorStops"), S = it("gradientColorStopPositions"), k = it("inset"), T = it("margin"), I = it("opacity"), z = it("padding"), J = it("saturate"), Y = it("scale"), nt = it("sepia"), gt = it("skew"), jt = it("space"), G = it("translate"), Yt = () => [
     "auto",
     "contain",
     "none"
@@ -5554,16 +5554,16 @@ var it = (t) => {
     "scroll"
   ], Oe = () => [
     "auto",
-    q,
+    V,
     e
-  ], L = () => [q, e], hr = () => [
+  ], L = () => [V, e], hr = () => [
     "",
     Ae,
-    Fe
+    Me
   ], Qt = () => [
     "auto",
     ci,
-    q
+    V
   ], Ie = () => [
     "bottom",
     "center",
@@ -5608,7 +5608,7 @@ var it = (t) => {
   ], Xt = () => [
     "",
     "0",
-    q
+    V
   ], Ue = () => [
     "auto",
     "avoid",
@@ -5618,18 +5618,18 @@ var it = (t) => {
     "left",
     "right",
     "column"
-  ], mt = () => [ci, q];
+  ], mt = () => [ci, V];
   return {
     cacheSize: 500,
     separator: ":",
     theme: {
       colors: [Ri],
-      spacing: [Ae, Fe],
+      spacing: [Ae, Me],
       blur: [
         "none",
         "",
-        Me,
-        q
+        Fe,
+        V
       ],
       brightness: mt(),
       borderColor: [t],
@@ -5637,8 +5637,8 @@ var it = (t) => {
         "none",
         "",
         "full",
-        Me,
-        q
+        Fe,
+        V
       ],
       borderSpacing: L(),
       borderWidth: hr(),
@@ -5648,7 +5648,7 @@ var it = (t) => {
       invert: Xt(),
       gap: L(),
       gradientColorStops: [t],
-      gradientColorStopPositions: [Op, Fe],
+      gradientColorStopPositions: [Op, Me],
       inset: Oe(),
       margin: Oe(),
       opacity: mt(),
@@ -5665,10 +5665,10 @@ var it = (t) => {
         "auto",
         "square",
         "video",
-        q
+        V
       ] }],
       container: ["container"],
-      columns: [{ columns: [Me] }],
+      columns: [{ columns: [Fe] }],
       "break-after": [{ "break-after": Ue() }],
       "break-before": [{ "break-before": Ue() }],
       "break-inside": [{ "break-inside": [
@@ -5725,7 +5725,7 @@ var it = (t) => {
         "none",
         "scale-down"
       ] }],
-      "object-position": [{ object: [...Ie(), q] }],
+      "object-position": [{ object: [...Ie(), V] }],
       overflow: [{ overflow: de() }],
       "overflow-x": [{ "overflow-x": de() }],
       "overflow-y": [{ "overflow-y": de() }],
@@ -5756,7 +5756,7 @@ var it = (t) => {
       z: [{ z: [
         "auto",
         ki,
-        q
+        V
       ] }],
       basis: [{ basis: Oe() }],
       "flex-direction": [{ flex: [
@@ -5775,7 +5775,7 @@ var it = (t) => {
         "auto",
         "initial",
         "none",
-        q
+        V
       ] }],
       grow: [{ grow: Xt() }],
       shrink: [{ shrink: Xt() }],
@@ -5784,7 +5784,7 @@ var it = (t) => {
         "last",
         "none",
         ki,
-        q
+        V
       ] }],
       "grid-cols": [{ "grid-cols": [Ri] }],
       "col-start-end": [{ col: [
@@ -5792,17 +5792,17 @@ var it = (t) => {
         { span: [
           "full",
           ki,
-          q
+          V
         ] },
-        q
+        V
       ] }],
       "col-start": [{ "col-start": Qt() }],
       "col-end": [{ "col-end": Qt() }],
       "grid-rows": [{ "grid-rows": [Ri] }],
       "row-start-end": [{ row: [
         "auto",
-        { span: [ki, q] },
-        q
+        { span: [ki, V] },
+        V
       ] }],
       "row-start": [{ "row-start": Qt() }],
       "row-end": [{ "row-end": Qt() }],
@@ -5818,14 +5818,14 @@ var it = (t) => {
         "min",
         "max",
         "fr",
-        q
+        V
       ] }],
       "auto-rows": [{ "auto-rows": [
         "auto",
         "min",
         "max",
         "fr",
-        q
+        V
       ] }],
       gap: [{ gap: [E] }],
       "gap-x": [{ "gap-x": [E] }],
@@ -5879,15 +5879,15 @@ var it = (t) => {
         "center",
         "stretch"
       ] }],
-      p: [{ p: [N] }],
-      px: [{ px: [N] }],
-      py: [{ py: [N] }],
-      ps: [{ ps: [N] }],
-      pe: [{ pe: [N] }],
-      pt: [{ pt: [N] }],
-      pr: [{ pr: [N] }],
-      pb: [{ pb: [N] }],
-      pl: [{ pl: [N] }],
+      p: [{ p: [z] }],
+      px: [{ px: [z] }],
+      py: [{ py: [z] }],
+      ps: [{ ps: [z] }],
+      pe: [{ pe: [z] }],
+      pt: [{ pt: [z] }],
+      pr: [{ pr: [z] }],
+      pb: [{ pb: [z] }],
+      pl: [{ pl: [z] }],
       m: [{ m: [T] }],
       mx: [{ mx: [T] }],
       my: [{ my: [T] }],
@@ -5909,18 +5909,18 @@ var it = (t) => {
         "svw",
         "lvw",
         "dvw",
-        q,
+        V,
         e
       ] }],
       "min-w": [{ "min-w": [
-        q,
+        V,
         e,
         "min",
         "max",
         "fit"
       ] }],
       "max-w": [{ "max-w": [
-        q,
+        V,
         e,
         "none",
         "full",
@@ -5928,11 +5928,11 @@ var it = (t) => {
         "max",
         "fit",
         "prose",
-        { screen: [Me] },
-        Me
+        { screen: [Fe] },
+        Fe
       ] }],
       h: [{ h: [
-        q,
+        V,
         e,
         "auto",
         "min",
@@ -5943,7 +5943,7 @@ var it = (t) => {
         "dvh"
       ] }],
       "min-h": [{ "min-h": [
-        q,
+        V,
         e,
         "min",
         "max",
@@ -5953,7 +5953,7 @@ var it = (t) => {
         "dvh"
       ] }],
       "max-h": [{ "max-h": [
-        q,
+        V,
         e,
         "min",
         "max",
@@ -5963,7 +5963,7 @@ var it = (t) => {
         "dvh"
       ] }],
       size: [{ size: [
-        q,
+        V,
         e,
         "auto",
         "min",
@@ -5972,8 +5972,8 @@ var it = (t) => {
       ] }],
       "font-size": [{ text: [
         "base",
-        Me,
-        Fe
+        Fe,
+        Me
       ] }],
       "font-smoothing": ["antialiased", "subpixel-antialiased"],
       "font-style": ["italic", "not-italic"],
@@ -6003,7 +6003,7 @@ var it = (t) => {
         "wide",
         "wider",
         "widest",
-        q
+        V
       ] }],
       "line-clamp": [{ "line-clamp": [
         "none",
@@ -6018,14 +6018,14 @@ var it = (t) => {
         "relaxed",
         "loose",
         Ae,
-        q
+        V
       ] }],
-      "list-image": [{ "list-image": ["none", q] }],
+      "list-image": [{ "list-image": ["none", V] }],
       "list-style-type": [{ list: [
         "none",
         "disc",
         "decimal",
-        q
+        V
       ] }],
       "list-style-position": [{ list: ["inside", "outside"] }],
       "placeholder-color": [{ placeholder: [t] }],
@@ -6051,12 +6051,12 @@ var it = (t) => {
         "auto",
         "from-font",
         Ae,
-        Fe
+        Me
       ] }],
       "underline-offset": [{ "underline-offset": [
         "auto",
         Ae,
-        q
+        V
       ] }],
       "text-decoration-color": [{ decoration: [t] }],
       "text-transform": [
@@ -6086,7 +6086,7 @@ var it = (t) => {
         "text-bottom",
         "sub",
         "super",
-        q
+        V
       ] }],
       whitespace: [{ whitespace: [
         "normal",
@@ -6107,7 +6107,7 @@ var it = (t) => {
         "manual",
         "auto"
       ] }],
-      content: [{ content: ["none", q] }],
+      content: [{ content: ["none", V] }],
       "bg-attachment": [{ bg: [
         "fixed",
         "local",
@@ -6203,20 +6203,20 @@ var it = (t) => {
       "border-color-l": [{ "border-l": [s] }],
       "divide-color": [{ divide: [s] }],
       "outline-style": [{ outline: ["", ...ce()] }],
-      "outline-offset": [{ "outline-offset": [Ae, q] }],
-      "outline-w": [{ outline: [Ae, Fe] }],
+      "outline-offset": [{ "outline-offset": [Ae, V] }],
+      "outline-w": [{ outline: [Ae, Me] }],
       "outline-color": [{ outline: [t] }],
       "ring-w": [{ ring: hr() }],
       "ring-w-inset": ["ring-inset"],
       "ring-color": [{ ring: [t] }],
       "ring-opacity": [{ "ring-opacity": [I] }],
-      "ring-offset-w": [{ "ring-offset": [Ae, Fe] }],
+      "ring-offset-w": [{ "ring-offset": [Ae, Me] }],
       "ring-offset-color": [{ "ring-offset": [t] }],
       shadow: [{ shadow: [
         "",
         "inner",
         "none",
-        Me,
+        Fe,
         Np
       ] }],
       "shadow-color": [{ shadow: [Ri] }],
@@ -6234,8 +6234,8 @@ var it = (t) => {
       "drop-shadow": [{ "drop-shadow": [
         "",
         "none",
-        Me,
-        q
+        Fe,
+        V
       ] }],
       grayscale: [{ grayscale: [b] }],
       "hue-rotate": [{ "hue-rotate": [y] }],
@@ -6266,7 +6266,7 @@ var it = (t) => {
         "opacity",
         "shadow",
         "transform",
-        q
+        V
       ] }],
       duration: [{ duration: mt() }],
       ease: [{ ease: [
@@ -6274,7 +6274,7 @@ var it = (t) => {
         "in",
         "out",
         "in-out",
-        q
+        V
       ] }],
       delay: [{ delay: mt() }],
       animate: [{ animate: [
@@ -6283,7 +6283,7 @@ var it = (t) => {
         "ping",
         "pulse",
         "bounce",
-        q
+        V
       ] }],
       transform: [{ transform: [
         "",
@@ -6293,9 +6293,9 @@ var it = (t) => {
       scale: [{ scale: [Y] }],
       "scale-x": [{ "scale-x": [Y] }],
       "scale-y": [{ "scale-y": [Y] }],
-      rotate: [{ rotate: [ki, q] }],
-      "translate-x": [{ "translate-x": [H] }],
-      "translate-y": [{ "translate-y": [H] }],
+      rotate: [{ rotate: [ki, V] }],
+      "translate-x": [{ "translate-x": [G] }],
+      "translate-y": [{ "translate-y": [G] }],
       "skew-x": [{ "skew-x": [gt] }],
       "skew-y": [{ "skew-y": [gt] }],
       "transform-origin": [{ origin: [
@@ -6308,7 +6308,7 @@ var it = (t) => {
         "bottom-left",
         "left",
         "top-left",
-        q
+        V
       ] }],
       accent: [{ accent: ["auto", t] }],
       appearance: [{ appearance: ["none", "auto"] }],
@@ -6349,7 +6349,7 @@ var it = (t) => {
         "nwse-resize",
         "zoom-in",
         "zoom-out",
-        q
+        V
       ] }],
       "caret-color": [{ caret: [t] }],
       "pointer-events": [{ "pointer-events": ["none", "auto"] }],
@@ -6419,12 +6419,12 @@ var it = (t) => {
         "scroll",
         "contents",
         "transform",
-        q
+        V
       ] }],
       fill: [{ fill: [t, "none"] }],
       "stroke-w": [{ stroke: [
         Ae,
-        Fe,
+        Me,
         tn
       ] }],
       stroke: [{ stroke: [t, "none"] }],
@@ -6573,7 +6573,7 @@ var it = (t) => {
 function m(...t) {
   return Up(zc(t));
 }
-var Fp = class extends Ac {
+var Mp = class extends Ac {
   constructor() {
     super(...arguments), this.prevData = {};
   }
@@ -6596,7 +6596,7 @@ var Fp = class extends Ac {
     let { prevData: e, element: r } = this;
     if (e) for (let i in e) (!t || !(i in t) && r[i] === e[i]) && (r[i] = void 0);
   }
-}, Mp = class extends Fp {
+}, Fp = class extends Mp {
   constructor() {
     super(...arguments), this.eventData = {};
   }
@@ -6636,7 +6636,7 @@ var Fp = class extends Ac {
       e.addEventListener(i, this, s);
     }
   }
-}, Pt = _o(class extends Mp {
+}, Pt = _o(class extends Fp {
   apply(t) {
     if (!t) return;
     let { prevData: e, element: r } = this;
@@ -7550,7 +7550,7 @@ var gl = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, ml = zc, ua
       w
     ] : p;
   }, []), r == null ? void 0 : r.class, r == null ? void 0 : r.className);
-}, Mi = ua([
+}, Fi = ua([
   "rtg-inline-flex rtg-items-center rtg-justify-center rtg-shrink-0",
   "rtg-text-button-font-size rtg-font-button-font-weight rtg-whitespace-nowrap",
   "rtg-rounded-button-radius rtg-outline-none",
@@ -7637,7 +7637,7 @@ var gl = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, ml = zc, ua
     "rtg-w-full"
   ],
   buttonPrevious: [
-    m(Mi({
+    m(Fi({
       variant: "ghost",
       size: "icon-sm"
     })),
@@ -7645,7 +7645,7 @@ var gl = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, ml = zc, ua
     "aria-disabled:rtg-opacity-calendar-button-previous-opacity-disabled"
   ],
   buttonNext: [
-    m(Mi({
+    m(Fi({
       variant: "ghost",
       size: "icon-sm"
     })),
@@ -7699,7 +7699,7 @@ var gl = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, ml = zc, ua
   },
   dayButton: {
     base: [
-      Mi({
+      Fi({
         variant: "ghost",
         size: "icon"
       }),
@@ -7882,11 +7882,11 @@ var gl = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, ml = zc, ua
                 ${Array.from({ length: Math.ceil(o.length / 7) }, (b, y) => d`
                     <tr class=${m("calendar-week", X.week)}>
                       ${o.slice(y * 7, (y + 1) * 7).map((w, E) => {
-      var jt, H, Yt;
-      let C = new Date(this.currentDate.getFullYear(), w.month, Number(w.day)), S = C.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), k = this.mode === "range" && C.toDateString() === ((jt = this.selectedStartDate) == null ? void 0 : jt.toDateString()), T = this.mode === "range" && this.isDayInRange(C, !0), I = this.mode === "range" && C.toDateString() === ((H = this.selectedEndDate) == null ? void 0 : H.toDateString()), N = this.mode === "single" && C.toDateString() === ((Yt = this.selectedStartDate) == null ? void 0 : Yt.toDateString()), J = N || k || T || I, Y = E === 0, nt = E === 6, gt = S ? "Today, " : "";
+      var jt, G, Yt;
+      let C = new Date(this.currentDate.getFullYear(), w.month, Number(w.day)), S = C.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), k = this.mode === "range" && C.toDateString() === ((jt = this.selectedStartDate) == null ? void 0 : jt.toDateString()), T = this.mode === "range" && this.isDayInRange(C, !0), I = this.mode === "range" && C.toDateString() === ((G = this.selectedEndDate) == null ? void 0 : G.toDateString()), z = this.mode === "single" && C.toDateString() === ((Yt = this.selectedStartDate) == null ? void 0 : Yt.toDateString()), J = z || k || T || I, Y = E === 0, nt = E === 6, gt = S ? "Today, " : "";
       return gt += Vp(C), gt += J ? ", selected" : "", d`
                             <td
-                              class=${m("calendar-day", X.day.base, S && !J && X.day.today, J && X.day.selected.common, N && X.day.selected.single, k && X.day.selected.range.start, T && X.day.selected.range.middle, I && X.day.selected.range.end, Y && X.day.index.first, nt && X.day.index.last, !1)}
+                              class=${m("calendar-day", X.day.base, S && !J && X.day.today, J && X.day.selected.common, z && X.day.selected.single, k && X.day.selected.range.start, T && X.day.selected.range.middle, I && X.day.selected.range.end, Y && X.day.index.first, nt && X.day.index.last, !1)}
                               role="gridcell"
                               data-day=${C.toISOString().slice(0, 10)}
                               ?data-disabled=${void 0}
@@ -7904,11 +7904,11 @@ var gl = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, ml = zc, ua
                                 ?disabled=${void 0}
                                 data-variant="ghost"
                                 data-size="icon"
-                                data-selected-single=${N.toString()}
+                                data-selected-single=${z.toString()}
                                 data-range-start=${k.toString()}
                                 data-range-middle=${T.toString()}
                                 data-range-end=${I.toString()}
-                                tabindex=${N || I ? "0" : "-1"}
+                                tabindex=${z || I ? "0" : "-1"}
                                 type="button"
                                 aria-label=${gt}
                                 @click="${() => this.selectDate(Number(w.day), w.isOutside)}"
@@ -8600,7 +8600,7 @@ var _i = {
   }
   get _comboBox() {
     let t = this.parentElement;
-    for (; t && !(t instanceof Mt); ) t = t.parentElement;
+    for (; t && !(t instanceof Ft); ) t = t.parentElement;
     return t;
   }
   getAttributesToExclude() {
@@ -8643,7 +8643,7 @@ var dn = class extends v {
   }
   get _comboBox() {
     let t = this.parentElement;
-    for (; t && !(t instanceof Mt); ) t = t.parentElement;
+    for (; t && !(t instanceof Ft); ) t = t.parentElement;
     return t;
   }
   connectedCallback() {
@@ -8753,7 +8753,7 @@ var $r = class extends _ {
   }
   get _comboBox() {
     let e = this.parentElement;
-    for (; e && !(e instanceof Mt); ) e = e.parentElement;
+    for (; e && !(e instanceof Ft); ) e = e.parentElement;
     return e;
   }
   handleComboBoxStateChanged(e) {
@@ -8952,7 +8952,7 @@ var El = class extends _ {
   }
 };
 El = l([u("rtg-combo-box-empty")], El);
-var kl, Mt = class extends _ {
+var kl, Ft = class extends _ {
   constructor() {
     super(), this.isOpen = !1, this.selectedValue = "", this.searchTerm = "", this.focusedIndex = -1, this.filteredItems = [], this.uuid = ha(), this.label = "Select an item", this.items = [], this.handleClickOutside = (t) => {
       var i;
@@ -9008,7 +9008,7 @@ var kl, Mt = class extends _ {
     `;
   }
 };
-l([a({ type: Boolean }), c("design:type", Object)], Mt.prototype, "isOpen", void 0), l([x(), c("design:type", Object)], Mt.prototype, "selectedValue", void 0), l([x(), c("design:type", Object)], Mt.prototype, "searchTerm", void 0), l([x(), c("design:type", Object)], Mt.prototype, "focusedIndex", void 0), l([x(), c("design:type", Array)], Mt.prototype, "filteredItems", void 0), l([x(), c("design:type", Object)], Mt.prototype, "uuid", void 0), l([a({ type: String }), c("design:type", String)], Mt.prototype, "label", void 0), l([a({ type: Array }), c("design:type", Object)], Mt.prototype, "items", void 0), l([ls('[part="combo-box"]'), c("design:type", typeof (kl = typeof HTMLDivElement < "u" && HTMLDivElement) == "function" ? kl : Object)], Mt.prototype, "parentDiveElement", void 0), Mt = l([u("rtg-combo-box"), c("design:paramtypes", [])], Mt);
+l([a({ type: Boolean }), c("design:type", Object)], Ft.prototype, "isOpen", void 0), l([x(), c("design:type", Object)], Ft.prototype, "selectedValue", void 0), l([x(), c("design:type", Object)], Ft.prototype, "searchTerm", void 0), l([x(), c("design:type", Object)], Ft.prototype, "focusedIndex", void 0), l([x(), c("design:type", Array)], Ft.prototype, "filteredItems", void 0), l([x(), c("design:type", Object)], Ft.prototype, "uuid", void 0), l([a({ type: String }), c("design:type", String)], Ft.prototype, "label", void 0), l([a({ type: Array }), c("design:type", Object)], Ft.prototype, "items", void 0), l([ls('[part="combo-box"]'), c("design:type", typeof (kl = typeof HTMLDivElement < "u" && HTMLDivElement) == "function" ? kl : Object)], Ft.prototype, "parentDiveElement", void 0), Ft = l([u("rtg-combo-box"), c("design:paramtypes", [])], Ft);
 var Ce = {
   root: [
     "rtg-flex rtg-overflow-hidden",
@@ -9249,7 +9249,7 @@ l([a({ type: String }), c("design:type", Object)], bs.prototype, "placeholder",
   attribute: "value",
   type: String
 }), c("design:type", Object)], bs.prototype, "_value", void 0), bs = l([u("rtg-command-input")], bs);
-var Fs, Or, br = (Or = class extends _ {
+var Ms, Or, br = (Or = class extends _ {
   constructor(...e) {
     super(...e), this.selected = !1, this._id = "", this._hidden = "false", this.onSelect = () => {
     }, this.disabled = "false";
@@ -9260,7 +9260,7 @@ var Fs, Or, br = (Or = class extends _ {
   get identifier() {
     if (this._id !== "") return this._id;
     let e = this.parentElement;
-    return e ? this._id = `${e.getAttribute("id")}li${Fs._counter++}` : this._id = `rtgcmdrxgxli${Fs._counter++}`, this._id;
+    return e ? this._id = `${e.getAttribute("id")}li${Ms._counter++}` : this._id = `rtgcmdrxgxli${Ms._counter++}`, this._id;
   }
   get value() {
     var e;
@@ -9300,7 +9300,7 @@ var Fs, Or, br = (Or = class extends _ {
       ></div>
     `;
   }
-}, Fs = Or, Or._counter = 0, Or);
+}, Ms = Or, Or._counter = 0, Or);
 l([a({ type: String }), c("design:type", Object)], br.prototype, "_id", void 0), l([a({
   attribute: "aria-hidden",
   type: String
@@ -9315,7 +9315,7 @@ l([a({ type: String }), c("design:type", Object)], br.prototype, "_id", void 0),
 ], br.prototype, "containerElement", null), l([a({
   attribute: "data-disabled",
   type: String
-}), c("design:type", String)], br.prototype, "disabled", void 0), br = Fs = l([u("rtg-command-item")], br);
+}), c("design:type", String)], br.prototype, "disabled", void 0), br = Ms = l([u("rtg-command-item")], br);
 var Rl = class extends _ {
   get identifier() {
     let t = this.parentElement;
@@ -9348,14 +9348,14 @@ var Rl = class extends _ {
   }
 };
 Rl = l([u("rtg-command-list")], Rl);
-var Ms, Ir, fs = (Ir = class extends v {
+var Fs, Ir, fs = (Ir = class extends v {
   constructor(...e) {
     super(...e), this._id = "", this._hidden = "";
   }
   get identifier() {
     if (this._id !== "") return this._id;
     let e = this.parentElement;
-    return e ? this._id = `${e.getAttribute("id")}s${Ms._counter++}` : this._id = `rtgcmdrxlxs${Ms._counter++}`, this._id;
+    return e ? this._id = `${e.getAttribute("id")}s${Fs._counter++}` : this._id = `rtgcmdrxlxs${Fs._counter++}`, this._id;
   }
   createRenderRoot() {
     return this;
@@ -9371,11 +9371,11 @@ var Ms, Ir, fs = (Ir = class extends v {
           ></div>
         `}`;
   }
-}, Ms = Ir, Ir._counter = 0, Ir);
+}, Fs = Ir, Ir._counter = 0, Ir);
 l([a({ type: String }), c("design:type", Object)], fs.prototype, "_id", void 0), l([a({
   attribute: "aria-hidden",
   type: String
-}), c("design:type", Object)], fs.prototype, "_hidden", void 0), fs = Ms = l([u("rtg-command-separator")], fs);
+}), c("design:type", Object)], fs.prototype, "_hidden", void 0), fs = Fs = l([u("rtg-command-separator")], fs);
 var Ol = class extends _ {
   get containerElement() {
     return this.querySelector("div[rtgcmd-root]");
@@ -10022,7 +10022,7 @@ var ys = {
   root: [""],
   trigger: [""],
   triggerButton: [
-    Mi({ variant: "outline" }).replace("rtg-justify-center", ""),
+    Fi({ variant: "outline" }).replace("rtg-justify-center", ""),
     "rtg-justify-start",
     "rtg-w-date-picker-trigger-button-space-w",
     "rtg-text-left rtg-font-date-picker-trigger-button-font-weight",
@@ -10595,7 +10595,7 @@ var Ul = class extends _ {
   }
 };
 Ul = l([u("rtg-drawer-footer")], Ul);
-var Fl = class extends _ {
+var Ml = class extends _ {
   get _containerElement() {
     return this.querySelector("div[part=drawer-header");
   }
@@ -10614,8 +10614,8 @@ var Fl = class extends _ {
     `;
   }
 };
-Fl = l([u("rtg-drawer-header")], Fl);
-var Ml = class extends v {
+Ml = l([u("rtg-drawer-header")], Ml);
+var Fl = class extends v {
   createRenderRoot() {
     return this;
   }
@@ -10628,7 +10628,7 @@ var Ml = class extends v {
     `;
   }
 };
-Ml = l([u("rtg-drawer-overlay")], Ml);
+Fl = l([u("rtg-drawer-overlay")], Fl);
 var Bl = class extends _ {
   get _containerElement() {
     return this.querySelector("h2[part=drawer-title");
@@ -12283,7 +12283,7 @@ var ft = class extends v {
   }
 };
 l([a({ type: String }), c("design:type", Object)], ft.prototype, "autocomplete", void 0), l([a({ type: Number }), c("design:type", Number)], ft.prototype, "cols", void 0), l([a({ type: Boolean }), c("design:type", Boolean)], ft.prototype, "disabled", void 0), l([a({ type: String }), c("design:type", String)], ft.prototype, "form", void 0), l([a({ type: String }), c("design:type", Object)], ft.prototype, "id", void 0), l([a({ type: Boolean }), c("design:type", Boolean)], ft.prototype, "invalid", void 0), l([a({ type: Number }), c("design:type", Number)], ft.prototype, "maxlength", void 0), l([a({ type: Number }), c("design:type", Number)], ft.prototype, "minlength", void 0), l([a({ type: String }), c("design:type", String)], ft.prototype, "name", void 0), l([a({ type: String }), c("design:type", String)], ft.prototype, "placeholder", void 0), l([a({ type: Boolean }), c("design:type", Boolean)], ft.prototype, "readonly", void 0), l([a({ type: Boolean }), c("design:type", Boolean)], ft.prototype, "required", void 0), l([a({ type: Number }), c("design:type", Number)], ft.prototype, "rows", void 0), l([a({ type: String }), c("design:type", Object)], ft.prototype, "wrap", void 0), l([a({ type: String }), c("design:type", String)], ft.prototype, "value", void 0), l([a({ attribute: !1 }), c("design:type", Function)], ft.prototype, "onInput", void 0), l([a({ attribute: !1 }), c("design:type", Function)], ft.prototype, "onChange", void 0), l([a({ attribute: !1 }), c("design:type", Function)], ft.prototype, "onFocus", void 0), l([a({ attribute: !1 }), c("design:type", Function)], ft.prototype, "onBlur", void 0), ft = l([u("rtg-input-group-textarea")], ft);
-var pt = class extends v {
+var ut = class extends v {
   constructor() {
     super(), this.autocomplete = "one-time-code", this.id = "", this.inputmode = "numeric", this._activeSlot = null, this._hasFocus = !1, this._value = "", this._children = [], this._handleBlur = (t) => {
       var e;
@@ -12430,10 +12430,10 @@ var pt = class extends v {
     `;
   }
 };
-l([a({ type: String }), c("design:type", Object)], pt.prototype, "autocomplete", void 0), l([a({
+l([a({ type: String }), c("design:type", Object)], ut.prototype, "autocomplete", void 0), l([a({
   attribute: "default-value",
   type: String
-}), c("design:type", String)], pt.prototype, "defaultValue", void 0), l([a({ type: Boolean }), c("design:type", Boolean)], pt.prototype, "disabled", void 0), l([a({ type: String }), c("design:type", String)], pt.prototype, "form", void 0), l([a({ type: String }), c("design:type", Object)], pt.prototype, "id", void 0), l([a({ type: String }), c("design:type", Object)], pt.prototype, "inputmode", void 0), l([a({ type: Number }), c("design:type", Number)], pt.prototype, "maxlength", void 0), l([a({ type: String }), c("design:type", String)], pt.prototype, "name", void 0), l([a({ type: String }), c("design:type", String)], pt.prototype, "pattern", void 0), l([a({ type: Boolean }), c("design:type", Boolean)], pt.prototype, "required", void 0), l([a({ type: String }), c("design:type", String)], pt.prototype, "value", void 0), l([a({ attribute: !1 }), c("design:type", Function)], pt.prototype, "onChange", void 0), l([a({ attribute: !1 }), c("design:type", Function)], pt.prototype, "onComplete", void 0), l([a({ attribute: !1 }), c("design:type", Function)], pt.prototype, "onBlur", void 0), l([a({ attribute: !1 }), c("design:type", Function)], pt.prototype, "onFocus", void 0), l([a({ attribute: !1 }), c("design:type", Function)], pt.prototype, "onPaste", void 0), l([a({ attribute: !1 }), c("design:type", Function)], pt.prototype, "pasteTransformer", void 0), l([x(), c("design:type", Object)], pt.prototype, "_activeSlot", void 0), l([x(), c("design:type", Object)], pt.prototype, "_hasFocus", void 0), l([x(), c("design:type", Object)], pt.prototype, "_value", void 0), pt = l([u("rtg-input-otp"), c("design:paramtypes", [])], pt);
+}), c("design:type", String)], ut.prototype, "defaultValue", void 0), l([a({ type: Boolean }), c("design:type", Boolean)], ut.prototype, "disabled", void 0), l([a({ type: String }), c("design:type", String)], ut.prototype, "form", void 0), l([a({ type: String }), c("design:type", Object)], ut.prototype, "id", void 0), l([a({ type: String }), c("design:type", Object)], ut.prototype, "inputmode", void 0), l([a({ type: Number }), c("design:type", Number)], ut.prototype, "maxlength", void 0), l([a({ type: String }), c("design:type", String)], ut.prototype, "name", void 0), l([a({ type: String }), c("design:type", String)], ut.prototype, "pattern", void 0), l([a({ type: Boolean }), c("design:type", Boolean)], ut.prototype, "required", void 0), l([a({ type: String }), c("design:type", String)], ut.prototype, "value", void 0), l([a({ attribute: !1 }), c("design:type", Function)], ut.prototype, "onChange", void 0), l([a({ attribute: !1 }), c("design:type", Function)], ut.prototype, "onComplete", void 0), l([a({ attribute: !1 }), c("design:type", Function)], ut.prototype, "onBlur", void 0), l([a({ attribute: !1 }), c("design:type", Function)], ut.prototype, "onFocus", void 0), l([a({ attribute: !1 }), c("design:type", Function)], ut.prototype, "onPaste", void 0), l([a({ attribute: !1 }), c("design:type", Function)], ut.prototype, "pasteTransformer", void 0), l([x(), c("design:type", Object)], ut.prototype, "_activeSlot", void 0), l([x(), c("design:type", Object)], ut.prototype, "_hasFocus", void 0), l([x(), c("design:type", Object)], ut.prototype, "_value", void 0), ut = l([u("rtg-input-otp"), c("design:paramtypes", [])], ut);
 var ld = class extends v {
   createRenderRoot() {
     return this;
@@ -13699,7 +13699,7 @@ var ge = {
   ],
   content: ["rtg-flex", "rtg-flex-row rtg-gap-pagination-content-space-gap rtg-items-center"],
   item: [""],
-  link: Mi,
+  link: Fi,
   previous: {
     base: ["rtg-gap-pagination-previous-space-gap", "rtg-px-pagination-previous-space-px sm:rtg-pl-pagination-previous-space-px"],
     span: ["rtg-hidden sm:rtg-block"]
@@ -15368,7 +15368,7 @@ l([a({ type: String }), c("design:type", typeof (Dd = qc !== void 0 && void 0) =
   attribute: "data-state",
   type: String
 }), c("design:type", Object)], Ns.prototype, "state", void 0), Ns = Ks = l([u("rtg-toast-view-port")], Ns);
-var Fd, Ws, Dr, Fn = (Dr = class extends _ {
+var Md, Ws, Dr, Mn = (Dr = class extends _ {
   constructor(...e) {
     super(...e), this.variant = "default";
   }
@@ -15404,8 +15404,8 @@ var Fd, Ws, Dr, Fn = (Dr = class extends _ {
     `;
   }
 }, Ws = Dr, Dr.toastVariants = Yi.action, Dr);
-l([a({ type: String }), c("design:type", typeof (Fd = qc !== void 0 && void 0) == "function" ? Fd : Object)], Fn.prototype, "variant", void 0), Fn = Ws = l([u("rtg-toast-action")], Fn);
-var Md = class extends _ {
+l([a({ type: String }), c("design:type", typeof (Md = qc !== void 0 && void 0) == "function" ? Md : Object)], Mn.prototype, "variant", void 0), Mn = Ws = l([u("rtg-toast-action")], Mn);
+var Fd = class extends _ {
   get _containerElement() {
     return this.querySelector("div[part=toast-description]");
   }
@@ -15426,7 +15426,7 @@ var Md = class extends _ {
     `;
   }
 };
-Md = l([u("rtg-toast-description")], Md);
+Fd = l([u("rtg-toast-description")], Fd);
 var Bd = class extends _ {
   get _containerElement() {
     return this.querySelector("div[part=toast-title]");
@@ -15670,7 +15670,7 @@ var Vi = /* @__PURE__ */ (function(t) {
     md: "rtg-h-toggle-space-h-md rtg-px-toggle-space-px-md",
     lg: "rtg-h-toggle-space-h-lg rtg-px-toggle-space-px-lg"
   }
-} }), Xd, Zd, Zn, Fr, xr = (Fr = class extends _ {
+} }), Xd, Zd, Zn, Mr, xr = (Mr = class extends _ {
   constructor(...e) {
     super(...e), this.disabled = !1, this.checked = !1, this.required = !1, this.variant = Hi.DEFAULT, this.size = Vi.SMALL;
   }
@@ -15720,7 +15720,7 @@ var Vi = /* @__PURE__ */ (function(t) {
       ></button>
     `;
   }
-}, Zn = Fr, Fr.toggleVariants = vu, Fr);
+}, Zn = Mr, Mr.toggleVariants = vu, Mr);
 l([a({ type: Boolean }), c("design:type", Object)], xr.prototype, "disabled", void 0), l([a({
   attribute: !0,
   type: Boolean,
@@ -15768,7 +15768,7 @@ var Qd = class extends v {
   }
 };
 Qd = l([u("rtg-typography-code")], Qd);
-var Mn = class extends v {
+var Fn = class extends v {
   constructor(...t) {
     super(...t), this.level = "h1";
   }
@@ -15792,7 +15792,7 @@ var Mn = class extends v {
       ` : d`<h1 data-slot="typography-h" data-level="${this.level}"></h1>`;
   }
 };
-l([a({ type: String }), c("design:type", Object)], Mn.prototype, "level", void 0), Mn = l([u("rtg-typography-h")], Mn);
+l([a({ type: String }), c("design:type", Object)], Fn.prototype, "level", void 0), Fn = l([u("rtg-typography-h")], Fn);
 var tc = class extends v {
   createRenderRoot() {
     return this;
@@ -16180,7 +16180,7 @@ function Vc(t = window.React, e, r, i, s) {
         S !== null && _u(S, I), this.o = I, this.h = S;
       }), this.i = {};
       let T = { ref: this.u };
-      for (let [I, N] of Object.entries(k)) yu.has(I) ? T[I === "className" ? "class" : I] = N : y.has(I) || I in h.prototype ? this.i[I] = N : T[I] = N;
+      for (let [I, z] of Object.entries(k)) yu.has(I) ? T[I === "className" ? "class" : I] = z : y.has(I) || I in h.prototype ? this.i[I] = z : T[I] = z;
       return T.suppressHydrationWarning = !0, b(n, T);
     }
   }
@@ -16207,40 +16207,40 @@ var xu = /* @__PURE__ */ Lc(((t) => {
     enqueueSetState: function() {
     }
   }, T = Object.assign, I = {};
-  function N(f, $, B) {
-    this.props = f, this.context = $, this.refs = I, this.updater = B || k;
+  function z(f, $, q) {
+    this.props = f, this.context = $, this.refs = I, this.updater = q || k;
   }
-  N.prototype.isReactComponent = {}, N.prototype.setState = function(f, $) {
+  z.prototype.isReactComponent = {}, z.prototype.setState = function(f, $) {
     if (typeof f != "object" && typeof f != "function" && f != null) throw Error("takes an object of state variables to update or a function which returns an object of state variables.");
     this.updater.enqueueSetState(this, f, $, "setState");
-  }, N.prototype.forceUpdate = function(f) {
+  }, z.prototype.forceUpdate = function(f) {
     this.updater.enqueueForceUpdate(this, f, "forceUpdate");
   };
   function J() {
   }
-  J.prototype = N.prototype;
-  function Y(f, $, B) {
-    this.props = f, this.context = $, this.refs = I, this.updater = B || k;
+  J.prototype = z.prototype;
+  function Y(f, $, q) {
+    this.props = f, this.context = $, this.refs = I, this.updater = q || k;
   }
   var nt = Y.prototype = new J();
-  nt.constructor = Y, T(nt, N.prototype), nt.isPureReactComponent = !0;
+  nt.constructor = Y, T(nt, z.prototype), nt.isPureReactComponent = !0;
   var gt = Array.isArray;
   function jt() {
   }
-  var H = {
+  var G = {
     H: null,
     A: null,
     T: null,
     S: null
   }, Yt = Object.prototype.hasOwnProperty;
-  function de(f, $, B) {
-    var M = B.ref;
+  function de(f, $, q) {
+    var B = q.ref;
     return {
       $$typeof: e,
       type: f,
       key: $,
-      ref: M === void 0 ? null : M,
-      props: B
+      ref: B === void 0 ? null : B,
+      props: q
     };
   }
   function Oe(f, $) {
@@ -16254,8 +16254,8 @@ var xu = /* @__PURE__ */ Lc(((t) => {
       "=": "=0",
       ":": "=2"
     };
-    return "$" + f.replace(/[=:]/g, function(B) {
-      return $[B];
+    return "$" + f.replace(/[=:]/g, function(q) {
+      return $[q];
     });
   }
   var Qt = /\/+/g;
@@ -16282,7 +16282,7 @@ var xu = /* @__PURE__ */ Lc(((t) => {
     }
     throw f;
   }
-  function te(f, $, B, M, W) {
+  function te(f, $, q, B, W) {
     var Q = typeof f;
     (Q === "undefined" || Q === "boolean") && (f = null);
     var rt = !1;
@@ -16300,36 +16300,36 @@ var xu = /* @__PURE__ */ Lc(((t) => {
             rt = !0;
             break;
           case w:
-            return rt = f._init, te(rt(f._payload), $, B, M, W);
+            return rt = f._init, te(rt(f._payload), $, q, B, W);
         }
     }
-    if (rt) return W = W(f), rt = M === "" ? "." + Ie(f, 0) : M, gt(W) ? (B = "", rt != null && (B = rt.replace(Qt, "$&/") + "/"), te(W, $, B, "", function(fh) {
+    if (rt) return W = W(f), rt = B === "" ? "." + Ie(f, 0) : B, gt(W) ? (q = "", rt != null && (q = rt.replace(Qt, "$&/") + "/"), te(W, $, q, "", function(fh) {
       return fh;
-    })) : W != null && (L(W) && (W = Oe(W, B + (W.key == null || f && f.key === W.key ? "" : ("" + W.key).replace(Qt, "$&/") + "/") + rt)), $.push(W)), 1;
+    })) : W != null && (L(W) && (W = Oe(W, q + (W.key == null || f && f.key === W.key ? "" : ("" + W.key).replace(Qt, "$&/") + "/") + rt)), $.push(W)), 1;
     rt = 0;
-    var _e = M === "" ? "." : M + ":";
-    if (gt(f)) for (var Ft = 0; Ft < f.length; Ft++) M = f[Ft], Q = _e + Ie(M, Ft), rt += te(M, $, B, Q, W);
-    else if (Ft = S(f), typeof Ft == "function") for (f = Ft.call(f), Ft = 0; !(M = f.next()).done; ) M = M.value, Q = _e + Ie(M, Ft++), rt += te(M, $, B, Q, W);
+    var _e = B === "" ? "." : B + ":";
+    if (gt(f)) for (var Mt = 0; Mt < f.length; Mt++) B = f[Mt], Q = _e + Ie(B, Mt), rt += te(B, $, q, Q, W);
+    else if (Mt = S(f), typeof Mt == "function") for (f = Mt.call(f), Mt = 0; !(B = f.next()).done; ) B = B.value, Q = _e + Ie(B, Mt++), rt += te(B, $, q, Q, W);
     else if (Q === "object") {
-      if (typeof f.then == "function") return te(ce(f), $, B, M, W);
+      if (typeof f.then == "function") return te(ce(f), $, q, B, W);
       throw $ = String(f), Error("Objects are not valid as a React child (found: " + ($ === "[object Object]" ? "object with keys {" + Object.keys(f).join(", ") + "}" : $) + "). If you meant to render a collection of children, use an array instead.");
     }
     return rt;
   }
-  function ee(f, $, B) {
+  function ee(f, $, q) {
     if (f == null) return f;
-    var M = [], W = 0;
-    return te(f, M, "", "", function(Q) {
-      return $.call(B, Q, W++);
-    }), M;
+    var B = [], W = 0;
+    return te(f, B, "", "", function(Q) {
+      return $.call(q, Q, W++);
+    }), B;
   }
   function Xt(f) {
     if (f._status === -1) {
       var $ = f._result;
-      $ = $(), $.then(function(B) {
-        (f._status === 0 || f._status === -1) && (f._status = 1, f._result = B);
-      }, function(B) {
-        (f._status === 0 || f._status === -1) && (f._status = 2, f._result = B);
+      $ = $(), $.then(function(q) {
+        (f._status === 0 || f._status === -1) && (f._status = 1, f._result = q);
+      }, function(q) {
+        (f._status === 0 || f._status === -1) && (f._status = 2, f._result = q);
       }), f._status === -1 && (f._status = 0, f._result = $);
     }
     if (f._status === 1) return f._result.default;
@@ -16351,10 +16351,10 @@ var xu = /* @__PURE__ */ Lc(((t) => {
     console.error(f);
   }, mt = {
     map: ee,
-    forEach: function(f, $, B) {
+    forEach: function(f, $, q) {
       ee(f, function() {
         $.apply(this, arguments);
-      }, B);
+      }, q);
     },
     count: function(f) {
       var $ = 0;
@@ -16372,10 +16372,10 @@ var xu = /* @__PURE__ */ Lc(((t) => {
       return f;
     }
   };
-  t.Activity = E, t.Children = mt, t.Component = N, t.Fragment = i, t.Profiler = o, t.PureComponent = Y, t.StrictMode = s, t.Suspense = b, t.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = H, t.__COMPILER_RUNTIME = {
+  t.Activity = E, t.Children = mt, t.Component = z, t.Fragment = i, t.Profiler = o, t.PureComponent = Y, t.StrictMode = s, t.Suspense = b, t.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = G, t.__COMPILER_RUNTIME = {
     __proto__: null,
     c: function(f) {
-      return H.H.useMemoCache(f);
+      return G.H.useMemoCache(f);
     }
   }, t.cache = function(f) {
     return function() {
@@ -16383,17 +16383,17 @@ var xu = /* @__PURE__ */ Lc(((t) => {
     };
   }, t.cacheSignal = function() {
     return null;
-  }, t.cloneElement = function(f, $, B) {
+  }, t.cloneElement = function(f, $, q) {
     if (f == null) throw Error("The argument must be a React element, but you passed " + f + ".");
-    var M = T({}, f.props), W = f.key;
-    if ($ != null) for (Q in $.key !== void 0 && (W = "" + $.key), $) !Yt.call($, Q) || Q === "key" || Q === "__self" || Q === "__source" || Q === "ref" && $.ref === void 0 || (M[Q] = $[Q]);
+    var B = T({}, f.props), W = f.key;
+    if ($ != null) for (Q in $.key !== void 0 && (W = "" + $.key), $) !Yt.call($, Q) || Q === "key" || Q === "__self" || Q === "__source" || Q === "ref" && $.ref === void 0 || (B[Q] = $[Q]);
     var Q = arguments.length - 2;
-    if (Q === 1) M.children = B;
+    if (Q === 1) B.children = q;
     else if (1 < Q) {
       for (var rt = Array(Q), _e = 0; _e < Q; _e++) rt[_e] = arguments[_e + 2];
-      M.children = rt;
+      B.children = rt;
     }
-    return de(f.type, W, M);
+    return de(f.type, W, B);
   }, t.createContext = function(f) {
     return f = {
       $$typeof: h,
@@ -16406,16 +16406,16 @@ var xu = /* @__PURE__ */ Lc(((t) => {
       $$typeof: n,
       _context: f
     }, f;
-  }, t.createElement = function(f, $, B) {
-    var M, W = {}, Q = null;
-    if ($ != null) for (M in $.key !== void 0 && (Q = "" + $.key), $) Yt.call($, M) && M !== "key" && M !== "__self" && M !== "__source" && (W[M] = $[M]);
+  }, t.createElement = function(f, $, q) {
+    var B, W = {}, Q = null;
+    if ($ != null) for (B in $.key !== void 0 && (Q = "" + $.key), $) Yt.call($, B) && B !== "key" && B !== "__self" && B !== "__source" && (W[B] = $[B]);
     var rt = arguments.length - 2;
-    if (rt === 1) W.children = B;
+    if (rt === 1) W.children = q;
     else if (1 < rt) {
-      for (var _e = Array(rt), Ft = 0; Ft < rt; Ft++) _e[Ft] = arguments[Ft + 2];
+      for (var _e = Array(rt), Mt = 0; Mt < rt; Mt++) _e[Mt] = arguments[Mt + 2];
       W.children = _e;
     }
-    if (f && f.defaultProps) for (M in rt = f.defaultProps, rt) W[M] === void 0 && (W[M] = rt[M]);
+    if (f && f.defaultProps) for (B in rt = f.defaultProps, rt) W[B] === void 0 && (W[B] = rt[B]);
     return de(f, Q, W);
   }, t.createRef = function() {
     return { current: null };
@@ -16440,55 +16440,55 @@ var xu = /* @__PURE__ */ Lc(((t) => {
       compare: $ === void 0 ? null : $
     };
   }, t.startTransition = function(f) {
-    var $ = H.T, B = {};
-    H.T = B;
+    var $ = G.T, q = {};
+    G.T = q;
     try {
-      var M = f(), W = H.S;
-      W !== null && W(B, M), typeof M == "object" && M && typeof M.then == "function" && M.then(jt, Ue);
+      var B = f(), W = G.S;
+      W !== null && W(q, B), typeof B == "object" && B && typeof B.then == "function" && B.then(jt, Ue);
     } catch (Q) {
       Ue(Q);
     } finally {
-      $ !== null && B.types !== null && ($.types = B.types), H.T = $;
+      $ !== null && q.types !== null && ($.types = q.types), G.T = $;
     }
   }, t.unstable_useCacheRefresh = function() {
-    return H.H.useCacheRefresh();
+    return G.H.useCacheRefresh();
   }, t.use = function(f) {
-    return H.H.use(f);
-  }, t.useActionState = function(f, $, B) {
-    return H.H.useActionState(f, $, B);
+    return G.H.use(f);
+  }, t.useActionState = function(f, $, q) {
+    return G.H.useActionState(f, $, q);
   }, t.useCallback = function(f, $) {
-    return H.H.useCallback(f, $);
+    return G.H.useCallback(f, $);
   }, t.useContext = function(f) {
-    return H.H.useContext(f);
+    return G.H.useContext(f);
   }, t.useDebugValue = function() {
   }, t.useDeferredValue = function(f, $) {
-    return H.H.useDeferredValue(f, $);
+    return G.H.useDeferredValue(f, $);
   }, t.useEffect = function(f, $) {
-    return H.H.useEffect(f, $);
+    return G.H.useEffect(f, $);
   }, t.useEffectEvent = function(f) {
-    return H.H.useEffectEvent(f);
+    return G.H.useEffectEvent(f);
   }, t.useId = function() {
-    return H.H.useId();
-  }, t.useImperativeHandle = function(f, $, B) {
-    return H.H.useImperativeHandle(f, $, B);
+    return G.H.useId();
+  }, t.useImperativeHandle = function(f, $, q) {
+    return G.H.useImperativeHandle(f, $, q);
   }, t.useInsertionEffect = function(f, $) {
-    return H.H.useInsertionEffect(f, $);
+    return G.H.useInsertionEffect(f, $);
   }, t.useLayoutEffect = function(f, $) {
-    return H.H.useLayoutEffect(f, $);
+    return G.H.useLayoutEffect(f, $);
   }, t.useMemo = function(f, $) {
-    return H.H.useMemo(f, $);
+    return G.H.useMemo(f, $);
   }, t.useOptimistic = function(f, $) {
-    return H.H.useOptimistic(f, $);
-  }, t.useReducer = function(f, $, B) {
-    return H.H.useReducer(f, $, B);
+    return G.H.useOptimistic(f, $);
+  }, t.useReducer = function(f, $, q) {
+    return G.H.useReducer(f, $, q);
   }, t.useRef = function(f) {
-    return H.H.useRef(f);
+    return G.H.useRef(f);
   }, t.useState = function(f) {
-    return H.H.useState(f);
-  }, t.useSyncExternalStore = function(f, $, B) {
-    return H.H.useSyncExternalStore(f, $, B);
+    return G.H.useState(f);
+  }, t.useSyncExternalStore = function(f, $, q) {
+    return G.H.useSyncExternalStore(f, $, q);
   }, t.useTransition = function() {
-    return H.H.useTransition();
+    return G.H.useTransition();
   }, t.version = "19.2.4";
 })), Hc = /* @__PURE__ */ ap((/* @__PURE__ */ Lc(((t, e) => {
   e.exports = xu();
@@ -16627,7 +16627,7 @@ function ju() {
   return i;
 }
 const fa = "-", Du = (t) => {
-  const e = Fu(t), {
+  const e = Mu(t), {
     conflictingClassGroups: r,
     conflictingClassGroupModifiers: i
   } = t;
@@ -16660,7 +16660,7 @@ const fa = "-", Du = (t) => {
     if (r)
       return "arbitrary.." + r;
   }
-}, Fu = (t) => {
+}, Mu = (t) => {
   const {
     theme: e,
     prefix: r
@@ -16679,7 +16679,7 @@ const fa = "-", Du = (t) => {
       return;
     }
     if (typeof s == "function") {
-      if (Mu(s)) {
+      if (Fu(s)) {
         Jn(s(i), e, r, i);
         return;
       }
@@ -16701,7 +16701,7 @@ const fa = "-", Du = (t) => {
       validators: []
     }), r = r.nextPart.get(i);
   }), r;
-}, Mu = (t) => t.isThemeGetter, Bu = (t, e) => e ? t.map(([r, i]) => {
+}, Fu = (t) => t.isThemeGetter, Bu = (t, e) => e ? t.map(([r, i]) => {
   const s = i.map((o) => typeof o == "string" ? e + o : typeof o == "object" ? Object.fromEntries(Object.entries(o).map(([n, h]) => [e + n, h])) : o);
   return [r, s];
 }) : t, qu = (t) => {
@@ -16799,10 +16799,10 @@ const fa = "-", Du = (t) => {
       }
       S = !1;
     }
-    const T = Hu(y).join(":"), I = w ? T + sh : T, N = I + k;
-    if (o.includes(N))
+    const T = Hu(y).join(":"), I = w ? T + sh : T, z = I + k;
+    if (o.includes(z))
       continue;
-    o.push(N);
+    o.push(z);
     const J = s(k, S);
     for (let Y = 0; Y < J.length; ++Y) {
       const nt = J[Y];
@@ -16846,7 +16846,7 @@ function Xu(t, ...e) {
 const st = (t) => {
   const e = (r) => r[t] || [];
   return e.isThemeGetter = !0, e;
-}, nh = /^\[(?:([a-z-]+):)?(.+)\]$/i, Zu = /^\d+\/\d+$/, Ju = /* @__PURE__ */ new Set(["px", "full", "screen"]), Qu = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, tg = /\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$/, eg = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, rg = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, ig = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, Pe = (t) => gi(t) || Ju.has(t) || Zu.test(t), Ke = (t) => xi(t, "length", hg), gi = (t) => !!t && !Number.isNaN(Number(t)), Vn = (t) => xi(t, "number", gi), Ni = (t) => !!t && Number.isInteger(Number(t)), sg = (t) => t.endsWith("%") && gi(t.slice(0, -1)), V = (t) => nh.test(t), We = (t) => Qu.test(t), og = /* @__PURE__ */ new Set(["length", "size", "percentage"]), ng = (t) => xi(t, og, ah), ag = (t) => xi(t, "position", ah), lg = /* @__PURE__ */ new Set(["image", "url"]), dg = (t) => xi(t, lg, ug), cg = (t) => xi(t, "", pg), zi = () => !0, xi = (t, e, r) => {
+}, nh = /^\[(?:([a-z-]+):)?(.+)\]$/i, Zu = /^\d+\/\d+$/, Ju = /* @__PURE__ */ new Set(["px", "full", "screen"]), Qu = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, tg = /\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$/, eg = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, rg = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, ig = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, Pe = (t) => gi(t) || Ju.has(t) || Zu.test(t), Ke = (t) => xi(t, "length", hg), gi = (t) => !!t && !Number.isNaN(Number(t)), Vn = (t) => xi(t, "number", gi), Ni = (t) => !!t && Number.isInteger(Number(t)), sg = (t) => t.endsWith("%") && gi(t.slice(0, -1)), H = (t) => nh.test(t), We = (t) => Qu.test(t), og = /* @__PURE__ */ new Set(["length", "size", "percentage"]), ng = (t) => xi(t, og, ah), ag = (t) => xi(t, "position", ah), lg = /* @__PURE__ */ new Set(["image", "url"]), dg = (t) => xi(t, lg, ug), cg = (t) => xi(t, "", pg), zi = () => !0, xi = (t, e, r) => {
   const i = nh.exec(t);
   return i ? i[1] ? typeof e == "string" ? i[1] === e : e.has(i[1]) : r(i[2]) : !1;
 }, hg = (t) => (
@@ -16855,17 +16855,17 @@ const st = (t) => {
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   tg.test(t) && !eg.test(t)
 ), ah = () => !1, pg = (t) => rg.test(t), ug = (t) => ig.test(t), gg = () => {
-  const t = st("colors"), e = st("spacing"), r = st("blur"), i = st("brightness"), s = st("borderColor"), o = st("borderRadius"), n = st("borderSpacing"), h = st("borderWidth"), p = st("contrast"), b = st("grayscale"), y = st("hueRotate"), w = st("invert"), E = st("gap"), C = st("gradientColorStops"), S = st("gradientColorStopPositions"), k = st("inset"), T = st("margin"), I = st("opacity"), N = st("padding"), J = st("saturate"), Y = st("scale"), nt = st("sepia"), gt = st("skew"), jt = st("space"), H = st("translate"), Yt = () => ["auto", "contain", "none"], de = () => ["auto", "hidden", "clip", "visible", "scroll"], Oe = () => ["auto", V, e], L = () => [V, e], hr = () => ["", Pe, Ke], Qt = () => ["auto", gi, V], Ie = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], ce = () => ["solid", "dashed", "dotted", "double", "none"], te = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], ee = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], Xt = () => ["", "0", V], Ue = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], mt = () => [gi, V];
+  const t = st("colors"), e = st("spacing"), r = st("blur"), i = st("brightness"), s = st("borderColor"), o = st("borderRadius"), n = st("borderSpacing"), h = st("borderWidth"), p = st("contrast"), b = st("grayscale"), y = st("hueRotate"), w = st("invert"), E = st("gap"), C = st("gradientColorStops"), S = st("gradientColorStopPositions"), k = st("inset"), T = st("margin"), I = st("opacity"), z = st("padding"), J = st("saturate"), Y = st("scale"), nt = st("sepia"), gt = st("skew"), jt = st("space"), G = st("translate"), Yt = () => ["auto", "contain", "none"], de = () => ["auto", "hidden", "clip", "visible", "scroll"], Oe = () => ["auto", H, e], L = () => [H, e], hr = () => ["", Pe, Ke], Qt = () => ["auto", gi, H], Ie = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], ce = () => ["solid", "dashed", "dotted", "double", "none"], te = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], ee = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], Xt = () => ["", "0", H], Ue = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], mt = () => [gi, H];
   return {
     cacheSize: 500,
     separator: ":",
     theme: {
       colors: [zi],
       spacing: [Pe, Ke],
-      blur: ["none", "", We, V],
+      blur: ["none", "", We, H],
       brightness: mt(),
       borderColor: [t],
-      borderRadius: ["none", "", "full", We, V],
+      borderRadius: ["none", "", "full", We, H],
       borderSpacing: L(),
       borderWidth: hr(),
       contrast: mt(),
@@ -16893,7 +16893,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/aspect-ratio
        */
       aspect: [{
-        aspect: ["auto", "square", "video", V]
+        aspect: ["auto", "square", "video", H]
       }],
       /**
        * Container
@@ -16978,7 +16978,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/object-position
        */
       "object-position": [{
-        object: [...Ie(), V]
+        object: [...Ie(), H]
       }],
       /**
        * Overflow
@@ -17100,7 +17100,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/z-index
        */
       z: [{
-        z: ["auto", Ni, V]
+        z: ["auto", Ni, H]
       }],
       // Flexbox and Grid
       /**
@@ -17129,7 +17129,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/flex
        */
       flex: [{
-        flex: ["1", "auto", "initial", "none", V]
+        flex: ["1", "auto", "initial", "none", H]
       }],
       /**
        * Flex Grow
@@ -17150,7 +17150,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/order
        */
       order: [{
-        order: ["first", "last", "none", Ni, V]
+        order: ["first", "last", "none", Ni, H]
       }],
       /**
        * Grid Template Columns
@@ -17165,8 +17165,8 @@ const st = (t) => {
        */
       "col-start-end": [{
         col: ["auto", {
-          span: ["full", Ni, V]
-        }, V]
+          span: ["full", Ni, H]
+        }, H]
       }],
       /**
        * Grid Column Start
@@ -17195,8 +17195,8 @@ const st = (t) => {
        */
       "row-start-end": [{
         row: ["auto", {
-          span: [Ni, V]
-        }, V]
+          span: [Ni, H]
+        }, H]
       }],
       /**
        * Grid Row Start
@@ -17224,14 +17224,14 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/grid-auto-columns
        */
       "auto-cols": [{
-        "auto-cols": ["auto", "min", "max", "fr", V]
+        "auto-cols": ["auto", "min", "max", "fr", H]
       }],
       /**
        * Grid Auto Rows
        * @see https://tailwindcss.com/docs/grid-auto-rows
        */
       "auto-rows": [{
-        "auto-rows": ["auto", "min", "max", "fr", V]
+        "auto-rows": ["auto", "min", "max", "fr", H]
       }],
       /**
        * Gap
@@ -17323,63 +17323,63 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/padding
        */
       p: [{
-        p: [N]
+        p: [z]
       }],
       /**
        * Padding X
        * @see https://tailwindcss.com/docs/padding
        */
       px: [{
-        px: [N]
+        px: [z]
       }],
       /**
        * Padding Y
        * @see https://tailwindcss.com/docs/padding
        */
       py: [{
-        py: [N]
+        py: [z]
       }],
       /**
        * Padding Start
        * @see https://tailwindcss.com/docs/padding
        */
       ps: [{
-        ps: [N]
+        ps: [z]
       }],
       /**
        * Padding End
        * @see https://tailwindcss.com/docs/padding
        */
       pe: [{
-        pe: [N]
+        pe: [z]
       }],
       /**
        * Padding Top
        * @see https://tailwindcss.com/docs/padding
        */
       pt: [{
-        pt: [N]
+        pt: [z]
       }],
       /**
        * Padding Right
        * @see https://tailwindcss.com/docs/padding
        */
       pr: [{
-        pr: [N]
+        pr: [z]
       }],
       /**
        * Padding Bottom
        * @see https://tailwindcss.com/docs/padding
        */
       pb: [{
-        pb: [N]
+        pb: [z]
       }],
       /**
        * Padding Left
        * @see https://tailwindcss.com/docs/padding
        */
       pl: [{
-        pl: [N]
+        pl: [z]
       }],
       /**
        * Margin
@@ -17474,21 +17474,21 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/width
        */
       w: [{
-        w: ["auto", "min", "max", "fit", "svw", "lvw", "dvw", V, e]
+        w: ["auto", "min", "max", "fit", "svw", "lvw", "dvw", H, e]
       }],
       /**
        * Min-Width
        * @see https://tailwindcss.com/docs/min-width
        */
       "min-w": [{
-        "min-w": [V, e, "min", "max", "fit"]
+        "min-w": [H, e, "min", "max", "fit"]
       }],
       /**
        * Max-Width
        * @see https://tailwindcss.com/docs/max-width
        */
       "max-w": [{
-        "max-w": [V, e, "none", "full", "min", "max", "fit", "prose", {
+        "max-w": [H, e, "none", "full", "min", "max", "fit", "prose", {
           screen: [We]
         }, We]
       }],
@@ -17497,28 +17497,28 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/height
        */
       h: [{
-        h: [V, e, "auto", "min", "max", "fit", "svh", "lvh", "dvh"]
+        h: [H, e, "auto", "min", "max", "fit", "svh", "lvh", "dvh"]
       }],
       /**
        * Min-Height
        * @see https://tailwindcss.com/docs/min-height
        */
       "min-h": [{
-        "min-h": [V, e, "min", "max", "fit", "svh", "lvh", "dvh"]
+        "min-h": [H, e, "min", "max", "fit", "svh", "lvh", "dvh"]
       }],
       /**
        * Max-Height
        * @see https://tailwindcss.com/docs/max-height
        */
       "max-h": [{
-        "max-h": [V, e, "min", "max", "fit", "svh", "lvh", "dvh"]
+        "max-h": [H, e, "min", "max", "fit", "svh", "lvh", "dvh"]
       }],
       /**
        * Size
        * @see https://tailwindcss.com/docs/size
        */
       size: [{
-        size: [V, e, "auto", "min", "max", "fit"]
+        size: [H, e, "auto", "min", "max", "fit"]
       }],
       // Typography
       /**
@@ -17587,7 +17587,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/letter-spacing
        */
       tracking: [{
-        tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", V]
+        tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", H]
       }],
       /**
        * Line Clamp
@@ -17601,21 +17601,21 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/line-height
        */
       leading: [{
-        leading: ["none", "tight", "snug", "normal", "relaxed", "loose", Pe, V]
+        leading: ["none", "tight", "snug", "normal", "relaxed", "loose", Pe, H]
       }],
       /**
        * List Style Image
        * @see https://tailwindcss.com/docs/list-style-image
        */
       "list-image": [{
-        "list-image": ["none", V]
+        "list-image": ["none", H]
       }],
       /**
        * List Style Type
        * @see https://tailwindcss.com/docs/list-style-type
        */
       "list-style-type": [{
-        list: ["none", "disc", "decimal", V]
+        list: ["none", "disc", "decimal", H]
       }],
       /**
        * List Style Position
@@ -17684,7 +17684,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/text-underline-offset
        */
       "underline-offset": [{
-        "underline-offset": ["auto", Pe, V]
+        "underline-offset": ["auto", Pe, H]
       }],
       /**
        * Text Decoration Color
@@ -17722,7 +17722,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/vertical-align
        */
       "vertical-align": [{
-        align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", V]
+        align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", H]
       }],
       /**
        * Whitespace
@@ -17750,7 +17750,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/content
        */
       content: [{
-        content: ["none", V]
+        content: ["none", H]
       }],
       // Backgrounds
       /**
@@ -18166,7 +18166,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/outline-offset
        */
       "outline-offset": [{
-        "outline-offset": [Pe, V]
+        "outline-offset": [Pe, H]
       }],
       /**
        * Outline Width
@@ -18293,7 +18293,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/drop-shadow
        */
       "drop-shadow": [{
-        "drop-shadow": ["", "none", We, V]
+        "drop-shadow": ["", "none", We, H]
       }],
       /**
        * Grayscale
@@ -18450,7 +18450,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/transition-property
        */
       transition: [{
-        transition: ["none", "all", "", "colors", "opacity", "shadow", "transform", V]
+        transition: ["none", "all", "", "colors", "opacity", "shadow", "transform", H]
       }],
       /**
        * Transition Duration
@@ -18464,7 +18464,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/transition-timing-function
        */
       ease: [{
-        ease: ["linear", "in", "out", "in-out", V]
+        ease: ["linear", "in", "out", "in-out", H]
       }],
       /**
        * Transition Delay
@@ -18478,7 +18478,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/animation
        */
       animate: [{
-        animate: ["none", "spin", "ping", "pulse", "bounce", V]
+        animate: ["none", "spin", "ping", "pulse", "bounce", H]
       }],
       // Transforms
       /**
@@ -18514,21 +18514,21 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/rotate
        */
       rotate: [{
-        rotate: [Ni, V]
+        rotate: [Ni, H]
       }],
       /**
        * Translate X
        * @see https://tailwindcss.com/docs/translate
        */
       "translate-x": [{
-        "translate-x": [H]
+        "translate-x": [G]
       }],
       /**
        * Translate Y
        * @see https://tailwindcss.com/docs/translate
        */
       "translate-y": [{
-        "translate-y": [H]
+        "translate-y": [G]
       }],
       /**
        * Skew X
@@ -18549,7 +18549,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/transform-origin
        */
       "transform-origin": [{
-        origin: ["center", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left", V]
+        origin: ["center", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left", H]
       }],
       // Interactivity
       /**
@@ -18571,7 +18571,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/cursor
        */
       cursor: [{
-        cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", V]
+        cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", H]
       }],
       /**
        * Caret Color
@@ -18793,7 +18793,7 @@ const st = (t) => {
        * @see https://tailwindcss.com/docs/will-change
        */
       "will-change": [{
-        "will-change": ["auto", "scroll", "contents", "transform", V]
+        "will-change": ["auto", "scroll", "contents", "transform", H]
       }],
       // SVG
       /**
@@ -19547,8 +19547,8 @@ $i([
 Kr = $i([
   u("sb-spinner")
 ], Kr);
-var Ug = Object.defineProperty, Fg = Object.getOwnPropertyDescriptor, $a = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? Fg(e, r) : e, o = t.length - 1, n; o >= 0; o--)
+var Ug = Object.defineProperty, Mg = Object.getOwnPropertyDescriptor, $a = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? Mg(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && Ug(e, r, s), s;
 };
@@ -19649,10 +19649,10 @@ $a([
 ao = $a([
   u("sb-otp-renderer")
 ], ao);
-var Mg = Object.defineProperty, Bg = Object.getOwnPropertyDescriptor, Sa = (t, e, r, i) => {
+var Fg = Object.defineProperty, Bg = Object.getOwnPropertyDescriptor, Sa = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? Bg(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
-  return i && s && Mg(e, r, s), s;
+  return i && s && Fg(e, r, s), s;
 };
 let lo = class extends v {
   /**
@@ -21130,15 +21130,15 @@ var wm = Object.defineProperty, _m = Object.getOwnPropertyDescriptor, _t = (t, e
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && wm(e, r, s), s;
 };
-let z = class extends v {
+let j = class extends v {
   constructor() {
     super(...arguments), this.seed = Nt(), this.name = "confirm", this.variant = "simple", this.content = "split", this.pair = "sb-password-field", this.label = "Confirm Password", this.requiredError = "Confirm password is a required field.", this.matchError = "Passwords do not match.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
       const e = t.target;
-      e.matches(`[part="${z.parts.input}"] input`) && (this._value = e.value);
+      e.matches(`[part="${j.parts.input}"] input`) && (this._value = e.value);
     }, this._handleFormSubmit = (t) => {
       this._validate() || t.preventDefault();
     }, this._handleFormReset = () => {
-      const t = `[part="${z.parts.input}"]`, e = this.variant === "toggle" ? `rtg-password-input${t}` : `rtg-input${t}`, r = this.querySelector(e);
+      const t = `[part="${j.parts.input}"]`, e = this.variant === "toggle" ? `rtg-password-input${t}` : `rtg-input${t}`, r = this.querySelector(e);
       r && (r.value = ""), this._value = "", this._invalid = !1, this._error = "";
     };
   }
@@ -21166,49 +21166,49 @@ let z = class extends v {
    * derived from the component's part name and `seed`.
    */
   get rootId() {
-    return this.childId ?? `sb-${z.parts.root}-${this.seed}`;
+    return this.childId ?? `sb-${j.parts.root}-${this.seed}`;
   }
   /**
    * The `id` of the field content element, derived from `rootId` with the
    * content part name appended.
    */
   get contentId() {
-    return `${this.rootId}-${z._CONTENT}`;
+    return `${this.rootId}-${j._CONTENT}`;
   }
   /**
    * The `id` of the field label element, derived from `rootId` with the label
    * part name appended.
    */
   get labelId() {
-    return `${this.rootId}-${z._LABEL}`;
+    return `${this.rootId}-${j._LABEL}`;
   }
   /**
    * The `id` of the field description element, derived from `rootId` with the
    * description part name appended.
    */
   get descriptionId() {
-    return `${this.rootId}-${z._DESCRIPTION}`;
+    return `${this.rootId}-${j._DESCRIPTION}`;
   }
   /**
    * The `id` of the mark element, derived from `rootId` with the mark part name
    * appended.
    */
   get markId() {
-    return `${this.rootId}-${z._MARK}`;
+    return `${this.rootId}-${j._MARK}`;
   }
   /**
    * The `id` of the input element, equal to `fieldId` when provided, otherwise
    * derived from `rootId` with the input part name appended.
    */
   get inputId() {
-    return this.fieldId ?? `${this.rootId}-${z._INPUT}`;
+    return this.fieldId ?? `${this.rootId}-${j._INPUT}`;
   }
   /**
    * The `id` of the field error element, derived from `rootId` with the error
    * part name appended.
    */
   get errorId() {
-    return `${this.rootId}-${z._ERROR}`;
+    return `${this.rootId}-${j._ERROR}`;
   }
   /**
    * Adds the input, form submit, and form reset event listeners.
@@ -21247,7 +21247,7 @@ let z = class extends v {
    * Defines and dispatches the validate event.
    */
   _dispatchValidate(t, e, r, i, s) {
-    const o = this.inputId, n = this.rootId, h = this.name, p = this.pair, b = new CustomEvent(z.validateEventName, {
+    const o = this.inputId, n = this.rootId, h = this.name, p = this.pair, b = new CustomEvent(j.validateEventName, {
       detail: {
         id: o,
         parentId: n,
@@ -21315,7 +21315,7 @@ let z = class extends v {
     return !this.mark && (!this.caret || !this.required) ? g : d`
       <span
         id="${this.markId}"
-        part="${z.parts.mark}"
+        part="${j.parts.mark}"
         data-content="${this.mark ? "text" : "caret"}"
       >
         ${this.mark ? this.mark : d`&ast;`}
@@ -21329,7 +21329,7 @@ let z = class extends v {
     return d`
       <rtg-field-label
         id="${this.labelId}"
-        part="${z.parts.label}"
+        part="${j.parts.label}"
         for="${this.inputId}"
       >
         ${this.label} ${this._renderMark()}
@@ -21343,7 +21343,7 @@ let z = class extends v {
     return this.description ? d`
       <rtg-field-description
         id="${this.descriptionId}"
-        part="${z.parts.description}"
+        part="${j.parts.description}"
       >
         ${this.description}
       </rtg-field-description>
@@ -21357,7 +21357,7 @@ let z = class extends v {
     return this._invalid ? d`
       <rtg-field-error
         id="${this.errorId}"
-        part="${z.parts.error}"
+        part="${j.parts.error}"
         .errors="${[{ message: this._error }]}"
       ></rtg-field-error>
     ` : g;
@@ -21366,7 +21366,7 @@ let z = class extends v {
     return d`
       <rtg-field
         id="${this.rootId}"
-        part="${z.parts.root}"
+        part="${j.parts.root}"
         data-variant="${this.variant}"
         data-content="${this.content}"
         ?disabled="${this.disabled}"
@@ -21375,7 +21375,7 @@ let z = class extends v {
         ${this.content === "group" ? d`
               <rtg-field-content
                 id="${this.contentId}"
-                part="${z.parts.content}"
+                part="${j.parts.content}"
               >
                 ${this._renderLabel()} ${this._renderDescription()}
               </rtg-field-content>
@@ -21383,7 +21383,7 @@ let z = class extends v {
         ${this.variant === "toggle" ? d`
               <rtg-password-input
                 id="${this.inputId}"
-                part="${z.parts.input}"
+                part="${j.parts.input}"
                 name="${this.name}"
                 placeholder="${this.placeholder ?? g}"
                 ?disabled="${this.disabled}"
@@ -21393,7 +21393,7 @@ let z = class extends v {
             ` : d`
               <rtg-input
                 id="${this.inputId}"
-                part="${z.parts.input}"
+                part="${j.parts.input}"
                 type="password"
                 name="${this.name}"
                 placeholder="${this.placeholder ?? g}"
@@ -21408,89 +21408,89 @@ let z = class extends v {
     `;
   }
 };
-z._ROOT = "confirm-field";
-z._CONTENT = "content";
-z._LABEL = "label";
-z._MARK = "mark";
-z._DESCRIPTION = "description";
-z._INPUT = "input";
-z._ERROR = "error";
-z.TAG = `sb-${z._ROOT}`;
+j._ROOT = "confirm-field";
+j._CONTENT = "content";
+j._LABEL = "label";
+j._MARK = "mark";
+j._DESCRIPTION = "description";
+j._INPUT = "input";
+j._ERROR = "error";
+j.TAG = `sb-${j._ROOT}`;
 _t([
   a({ type: String })
-], z.prototype, "seed", 2);
+], j.prototype, "seed", 2);
 _t([
   a({ attribute: "child-id", type: String })
-], z.prototype, "childId", 2);
+], j.prototype, "childId", 2);
 _t([
   a({ attribute: "field-id", type: String })
-], z.prototype, "fieldId", 2);
+], j.prototype, "fieldId", 2);
 _t([
   a({ type: String })
-], z.prototype, "name", 2);
+], j.prototype, "name", 2);
 _t([
   a({ type: String })
-], z.prototype, "variant", 2);
+], j.prototype, "variant", 2);
 _t([
   a({ type: String })
-], z.prototype, "content", 2);
+], j.prototype, "content", 2);
 _t([
   a({ type: String })
-], z.prototype, "pair", 2);
+], j.prototype, "pair", 2);
 _t([
   a({ type: String })
-], z.prototype, "label", 2);
+], j.prototype, "label", 2);
 _t([
   a({ type: String })
-], z.prototype, "placeholder", 2);
+], j.prototype, "placeholder", 2);
 _t([
   a({ type: String })
-], z.prototype, "description", 2);
+], j.prototype, "description", 2);
 _t([
   a({ type: String })
-], z.prototype, "mark", 2);
+], j.prototype, "mark", 2);
 _t([
   a({ type: Boolean })
-], z.prototype, "caret", 2);
+], j.prototype, "caret", 2);
 _t([
   a({ type: Boolean })
-], z.prototype, "disabled", 2);
+], j.prototype, "disabled", 2);
 _t([
   a({ type: Boolean })
-], z.prototype, "required", 2);
+], j.prototype, "required", 2);
 _t([
   a({ attribute: "required-error", type: String })
-], z.prototype, "requiredError", 2);
+], j.prototype, "requiredError", 2);
 _t([
   a({ attribute: "match-error", type: String })
-], z.prototype, "matchError", 2);
+], j.prototype, "matchError", 2);
 _t([
   x()
-], z.prototype, "_invalid", 2);
+], j.prototype, "_invalid", 2);
 _t([
   x()
-], z.prototype, "_error", 2);
+], j.prototype, "_error", 2);
 _t([
   x()
-], z.prototype, "_value", 2);
-z = _t([
+], j.prototype, "_value", 2);
+j = _t([
   u("sb-confirm-field")
-], z);
+], j);
 var xm = Object.defineProperty, $m = Object.getOwnPropertyDescriptor, Rt = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? $m(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && xm(e, r, s), s;
 };
-let j = class extends v {
+let D = class extends v {
   constructor() {
     super(...arguments), this.seed = Nt(), this.name = "email", this.content = "split", this.label = "Email", this.requiredError = "Email is a required field.", this.formatError = "Enter a valid email address.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
       const e = t.target;
-      e.matches(`[part="${j.parts.input}"]>input`) && (this._value = e.value);
+      e.matches(`[part="${D.parts.input}"]>input`) && (this._value = e.value);
     }, this._handleFormSubmit = (t) => {
       this._validate() || t.preventDefault();
     }, this._handleFormReset = () => {
       const t = this.querySelector(
-        `rtg-input[part="${j.parts.input}"]`
+        `rtg-input[part="${D.parts.input}"]`
       );
       t && (t.value = ""), this._value = "", this._invalid = !1, this._error = "";
     };
@@ -21519,49 +21519,49 @@ let j = class extends v {
    * derived from the component's part name and `seed`.
    */
   get rootId() {
-    return this.childId ?? `sb-${j.parts.root}-${this.seed}`;
+    return this.childId ?? `sb-${D.parts.root}-${this.seed}`;
   }
   /**
    * The `id` of the field content element, derived from `rootId` with the
    * content part name appended.
    */
   get contentId() {
-    return `${this.rootId}-${j._CONTENT}`;
+    return `${this.rootId}-${D._CONTENT}`;
   }
   /**
    * The `id` of the field label element, derived from `rootId` with the label
    * part name appended.
    */
   get labelId() {
-    return `${this.rootId}-${j._LABEL}`;
+    return `${this.rootId}-${D._LABEL}`;
   }
   /**
    * The `id` of the field description element, derived from `rootId` with the
    * description part name appended.
    */
   get descriptionId() {
-    return `${this.rootId}-${j._DESCRIPTION}`;
+    return `${this.rootId}-${D._DESCRIPTION}`;
   }
   /**
    * The `id` of the mark element, derived from `rootId` with the mark part name
    * appended.
    */
   get markId() {
-    return `${this.rootId}-${j._MARK}`;
+    return `${this.rootId}-${D._MARK}`;
   }
   /**
    * The `id` of the input element, equal to `fieldId` when provided, otherwise
    * derived from `rootId` with the input part name appended.
    */
   get inputId() {
-    return this.fieldId ?? `${this.rootId}-${j._INPUT}`;
+    return this.fieldId ?? `${this.rootId}-${D._INPUT}`;
   }
   /**
    * The `id` of the field error element, derived from `rootId` with the error
    * part name appended.
    */
   get errorId() {
-    return `${this.rootId}-${j._ERROR}`;
+    return `${this.rootId}-${D._ERROR}`;
   }
   /**
    * Returns a the normalized value of `_value` by trimming whitespace and
@@ -21595,7 +21595,7 @@ let j = class extends v {
    * Defines and dispatches the validate event.
    */
   _dispatchValidate(t, e, r, i) {
-    const s = this.inputId, o = this.rootId, n = this.name, h = new CustomEvent(j.validateEventName, {
+    const s = this.inputId, o = this.rootId, n = this.name, h = new CustomEvent(D.validateEventName, {
       detail: { id: s, parentId: o, name: n, value: r, valid: t, type: e, message: i },
       bubbles: !0,
       composed: !0
@@ -21618,7 +21618,7 @@ let j = class extends v {
    * otherwise dispatching and displaying the format error.
    */
   _validateFormat(t) {
-    if (!this.required && t === "" || j._PATTERN.test(t))
+    if (!this.required && t === "" || D._PATTERN.test(t))
       return !0;
     const e = this.formatError;
     return this._invalid = !0, this._error = e, this._dispatchValidate(!1, "format", t, e), !1;
@@ -21645,7 +21645,7 @@ let j = class extends v {
     return !this.mark && (!this.caret || !this.required) ? g : d`
       <span
         id="${this.markId}"
-        part="${j.parts.mark}"
+        part="${D.parts.mark}"
         data-content="${this.mark ? "text" : "caret"}"
       >
         ${this.mark ? this.mark : d`&ast;`}
@@ -21659,7 +21659,7 @@ let j = class extends v {
     return d`
       <rtg-field-label
         id="${this.labelId}"
-        part="${j.parts.label}"
+        part="${D.parts.label}"
         for="${this.inputId}"
       >
         ${this.label} ${this._renderMark()}
@@ -21673,7 +21673,7 @@ let j = class extends v {
     return this.description ? d`
       <rtg-field-description
         id="${this.descriptionId}"
-        part="${j.parts.description}"
+        part="${D.parts.description}"
       >
         ${this.description}
       </rtg-field-description>
@@ -21687,7 +21687,7 @@ let j = class extends v {
     return this._invalid ? d`
       <rtg-field-error
         id="${this.errorId}"
-        part="${j.parts.error}"
+        part="${D.parts.error}"
         .errors=${[{ message: this._error }]}
       ></rtg-field-error>
     ` : g;
@@ -21696,7 +21696,7 @@ let j = class extends v {
     return d`
       <rtg-field
         id="${this.rootId}"
-        part="${j.parts.root}"
+        part="${D.parts.root}"
         data-content="${this.content}"
         ?disabled="${this.disabled}"
         ?invalid="${this._invalid}"
@@ -21704,7 +21704,7 @@ let j = class extends v {
         ${this.content === "group" ? d`
               <rtg-field-content
                 id="${this.contentId}"
-                part="${j.parts.content}"
+                part="${D.parts.content}"
               >
                 ${this._renderLabel()} ${this._renderDescription()}
               </rtg-field-content>
@@ -21712,7 +21712,7 @@ let j = class extends v {
 
         <rtg-input
           id="${this.inputId}"
-          part="${j.parts.input}"
+          part="${D.parts.input}"
           type="email"
           name="${this.name}"
           placeholder="${this.placeholder ?? g}"
@@ -21727,84 +21727,84 @@ let j = class extends v {
     `;
   }
 };
-j._ROOT = "email-field";
-j._CONTENT = "content";
-j._LABEL = "label";
-j._MARK = "mark";
-j._DESCRIPTION = "description";
-j._INPUT = "input";
-j._ERROR = "error";
-j.TAG = `sb-${j._ROOT}`;
-j._PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+D._ROOT = "email-field";
+D._CONTENT = "content";
+D._LABEL = "label";
+D._MARK = "mark";
+D._DESCRIPTION = "description";
+D._INPUT = "input";
+D._ERROR = "error";
+D.TAG = `sb-${D._ROOT}`;
+D._PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 Rt([
   a({ type: String })
-], j.prototype, "seed", 2);
+], D.prototype, "seed", 2);
 Rt([
   a({ attribute: "child-id", type: String })
-], j.prototype, "childId", 2);
+], D.prototype, "childId", 2);
 Rt([
   a({ attribute: "field-id", type: String })
-], j.prototype, "fieldId", 2);
+], D.prototype, "fieldId", 2);
 Rt([
   a({ type: String })
-], j.prototype, "name", 2);
+], D.prototype, "name", 2);
 Rt([
   a({ type: String })
-], j.prototype, "content", 2);
+], D.prototype, "content", 2);
 Rt([
   a({ type: String })
-], j.prototype, "label", 2);
+], D.prototype, "label", 2);
 Rt([
   a({ type: String })
-], j.prototype, "placeholder", 2);
+], D.prototype, "placeholder", 2);
 Rt([
   a({ type: String })
-], j.prototype, "description", 2);
+], D.prototype, "description", 2);
 Rt([
   a({ type: String })
-], j.prototype, "mark", 2);
+], D.prototype, "mark", 2);
 Rt([
   a({ type: Boolean })
-], j.prototype, "caret", 2);
+], D.prototype, "caret", 2);
 Rt([
   a({ type: Boolean })
-], j.prototype, "disabled", 2);
+], D.prototype, "disabled", 2);
 Rt([
   a({ type: Boolean })
-], j.prototype, "required", 2);
+], D.prototype, "required", 2);
 Rt([
   a({ attribute: "required-error", type: String })
-], j.prototype, "requiredError", 2);
+], D.prototype, "requiredError", 2);
 Rt([
   a({ attribute: "format-error", type: String })
-], j.prototype, "formatError", 2);
+], D.prototype, "formatError", 2);
 Rt([
   x()
-], j.prototype, "_invalid", 2);
+], D.prototype, "_invalid", 2);
 Rt([
   x()
-], j.prototype, "_error", 2);
+], D.prototype, "_error", 2);
 Rt([
   x()
-], j.prototype, "_value", 2);
-j = Rt([
+], D.prototype, "_value", 2);
+D = Rt([
   u("sb-email-field")
-], j);
+], D);
 var Sm = Object.defineProperty, Cm = Object.getOwnPropertyDescriptor, Ct = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? Cm(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && Sm(e, r, s), s;
 };
-let U = class extends v {
+let M = class extends v {
   constructor() {
     super(...arguments), this.seed = Nt(), this.name = "identifier", this.identifiers = [], this.content = "split", this.requiredError = "Identifier is a required field.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
       const e = t.target;
-      e.matches(`[part="${U.parts.input}"]>input`) && (this._value = e.value);
+      e.matches(`[part="${M.parts.input}"]>input`) && (this._value = e.value);
     }, this._handleFormSubmit = (t) => {
       this._validate() || t.preventDefault();
     }, this._handleFormReset = () => {
       const t = this.querySelector(
-        `rtg-input[part="${U.parts.input}"]`
+        `rtg-input[part="${M.parts.input}"]`
       );
       t && (t.value = ""), this._value = "", this._invalid = !1, this._error = "";
     };
@@ -21833,49 +21833,49 @@ let U = class extends v {
    * derived from the component's part name and `seed`.
    */
   get rootId() {
-    return this.childId ?? `sb-${U.parts.root}-${this.seed}`;
+    return this.childId ?? `sb-${M.parts.root}-${this.seed}`;
   }
   /**
    * The `id` of the field content element, derived from `rootId` with the
    * content part name appended.
    */
   get contentId() {
-    return `${this.rootId}-${U._CONTENT}`;
+    return `${this.rootId}-${M._CONTENT}`;
   }
   /**
    * The `id` of the field label element, derived from `rootId` with the label
    * part name appended.
    */
   get labelId() {
-    return `${this.rootId}-${U._LABEL}`;
+    return `${this.rootId}-${M._LABEL}`;
   }
   /**
    * The `id` of the field description element, derived from `rootId` with the
    * description part name appended.
    */
   get descriptionId() {
-    return `${this.rootId}-${U._DESCRIPTION}`;
+    return `${this.rootId}-${M._DESCRIPTION}`;
   }
   /**
    * The `id` of the mark element, derived from `rootId` with the mark part name
    * appended.
    */
   get markId() {
-    return `${this.rootId}-${U._MARK}`;
+    return `${this.rootId}-${M._MARK}`;
   }
   /**
    * The `id` of the input element, equal to `fieldId` when provided, otherwise
    * derived from `rootId` with the input part name appended.
    */
   get inputId() {
-    return this.fieldId ?? `${this.rootId}-${U._INPUT}`;
+    return this.fieldId ?? `${this.rootId}-${M._INPUT}`;
   }
   /**
    * The `id` of the field error element, derived from `rootId` with the error
    * part name appended.
    */
   get errorId() {
-    return `${this.rootId}-${U._ERROR}`;
+    return `${this.rootId}-${M._ERROR}`;
   }
   /**
    * Returns a the normalized value of `_value` by trimming whitespace and
@@ -21930,7 +21930,7 @@ let U = class extends v {
    * Defines and dispatches the validate event.
    */
   _dispatchValidate(t, e, r, i) {
-    const s = this.inputId, o = this.rootId, n = this.name, h = this.identifiers, p = new CustomEvent(U.validateEventName, {
+    const s = this.inputId, o = this.rootId, n = this.name, h = this.identifiers, p = new CustomEvent(M.validateEventName, {
       detail: { id: s, parentId: o, name: n, identifiers: h, value: r, valid: t, type: e, message: i },
       bubbles: !0,
       composed: !0
@@ -21968,7 +21968,7 @@ let U = class extends v {
     return !this.mark && (!this.caret || !this.required) ? g : d`
       <span
         id="${this.markId}"
-        part="${U.parts.mark}"
+        part="${M.parts.mark}"
         data-content="${this.mark ? "text" : "caret"}"
       >
         ${this.mark ? this.mark : d`&ast;`}
@@ -21982,7 +21982,7 @@ let U = class extends v {
     return d`
       <rtg-field-label
         id="${this.labelId}"
-        part="${U.parts.label}"
+        part="${M.parts.label}"
         for="${this.inputId}"
       >
         ${this.label ?? this._label} ${this._renderMark()}
@@ -21996,7 +21996,7 @@ let U = class extends v {
     return this.description ? d`
       <rtg-field-description
         id="${this.descriptionId}"
-        part="${U.parts.description}"
+        part="${M.parts.description}"
       >
         ${this.description}
       </rtg-field-description>
@@ -22010,7 +22010,7 @@ let U = class extends v {
     return this._invalid ? d`
       <rtg-field-error
         id="${this.errorId}"
-        part="${U.parts.error}"
+        part="${M.parts.error}"
         .errors=${[{ message: this._error }]}
       ></rtg-field-error>
     ` : g;
@@ -22019,7 +22019,7 @@ let U = class extends v {
     return d`
       <rtg-field
         id="${this.rootId}"
-        part="${U.parts.root}"
+        part="${M.parts.root}"
         data-content="${this.content}"
         ?disabled="${this.disabled}"
         ?invalid="${this._invalid}"
@@ -22027,7 +22027,7 @@ let U = class extends v {
         ${this.content === "group" ? d`
               <rtg-field-content
                 id="${this.contentId}"
-                part="${U.parts.content}"
+                part="${M.parts.content}"
               >
                 ${this._renderLabel()} ${this._renderDescription()}
               </rtg-field-content>
@@ -22035,7 +22035,7 @@ let U = class extends v {
 
         <rtg-input
           id="${this.inputId}"
-          part="${U.parts.input}"
+          part="${M.parts.input}"
           type="${this._type}"
           name="${this.name}"
           placeholder="${this.placeholder ?? g}"
@@ -22051,333 +22051,463 @@ let U = class extends v {
     `;
   }
 };
-U._ROOT = "identifier-field";
-U._CONTENT = "content";
-U._LABEL = "label";
-U._MARK = "mark";
-U._DESCRIPTION = "description";
-U._INPUT = "input";
-U._ERROR = "error";
-U.TAG = `sb-${U._ROOT}`;
+M._ROOT = "identifier-field";
+M._CONTENT = "content";
+M._LABEL = "label";
+M._MARK = "mark";
+M._DESCRIPTION = "description";
+M._INPUT = "input";
+M._ERROR = "error";
+M.TAG = `sb-${M._ROOT}`;
 Ct([
   a({ type: String })
-], U.prototype, "seed", 2);
+], M.prototype, "seed", 2);
 Ct([
   a({ attribute: "child-id", type: String })
-], U.prototype, "childId", 2);
+], M.prototype, "childId", 2);
 Ct([
   a({ attribute: "field-id", type: String })
-], U.prototype, "fieldId", 2);
+], M.prototype, "fieldId", 2);
 Ct([
   a({ type: String })
-], U.prototype, "name", 2);
+], M.prototype, "name", 2);
 Ct([
   a({ type: Array })
-], U.prototype, "identifiers", 2);
+], M.prototype, "identifiers", 2);
 Ct([
   a({ type: String })
-], U.prototype, "content", 2);
+], M.prototype, "content", 2);
 Ct([
   a({ type: String })
-], U.prototype, "label", 2);
+], M.prototype, "label", 2);
 Ct([
   a({ type: String })
-], U.prototype, "placeholder", 2);
+], M.prototype, "placeholder", 2);
 Ct([
   a({ type: String })
-], U.prototype, "description", 2);
+], M.prototype, "description", 2);
 Ct([
   a({ type: String })
-], U.prototype, "mark", 2);
+], M.prototype, "mark", 2);
 Ct([
   a({ type: Boolean })
-], U.prototype, "caret", 2);
+], M.prototype, "caret", 2);
 Ct([
   a({ type: Boolean })
-], U.prototype, "disabled", 2);
+], M.prototype, "disabled", 2);
 Ct([
   a({ type: String })
-], U.prototype, "autocomplete", 2);
+], M.prototype, "autocomplete", 2);
 Ct([
   a({ type: Boolean })
-], U.prototype, "required", 2);
+], M.prototype, "required", 2);
 Ct([
   a({ attribute: "required-error", type: String })
-], U.prototype, "requiredError", 2);
+], M.prototype, "requiredError", 2);
 Ct([
   x()
-], U.prototype, "_invalid", 2);
+], M.prototype, "_invalid", 2);
 Ct([
   x()
-], U.prototype, "_error", 2);
+], M.prototype, "_error", 2);
 Ct([
   x()
-], U.prototype, "_value", 2);
-U = Ct([
+], M.prototype, "_value", 2);
+M = Ct([
   u("sb-identifier-field")
-], U);
-var Em = Object.defineProperty, km = Object.getOwnPropertyDescriptor, ut = (t, e, r, i) => {
+], M);
+var Em = Object.defineProperty, km = Object.getOwnPropertyDescriptor, ht = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? km(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && Em(e, r, s), s;
 };
-let G = class extends v {
+let P = class extends v {
   constructor() {
-    super(...arguments), this.firstLabel = "First name", this.lastLabel = "Last name", this.seed = Nt(), this.name = "name", this.firstName = "first_name", this.lastName = "last_name", this.firstPlaceholder = "First name", this.lastPlaceholder = "Last name", this.requiredError = "This field is required.", this.formatError = "Enter a valid name.", this._first = "", this._firstInvalid = !1, this._firstError = "", this._last = "", this._lastInvalid = !1, this._lastError = "", this._handleInput = (t) => {
+    super(...arguments), this.seed = Nt(), this.name = "name", this.content = "split", this.label = "Name", this.requiredError = "Name is a required field.", this.formatError = "Enter a valid name.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
       const e = t.target;
-      e.name === this.firstName && (this._first = e.value), e.name === this.lastName && (this._last = e.value);
+      e.matches(`[part="${P.parts.input}"]>input`) && (this._value = e.value);
+    }, this._handleFormSubmit = (t) => {
+      this._validate() || t.preventDefault();
+    }, this._handleFormReset = () => {
+      const t = this.querySelector(
+        `rtg-input[part="${P.parts.input}"]`
+      );
+      t && (t.value = ""), this._value = "", this._invalid = !1, this._error = "";
     };
   }
+  /**
+   * The stable CSS part names exposed for external targeting.
+   */
   static get parts() {
-    const t = this._ROOT;
-    return {
-      root: t,
-      firstField: `${t}-first-field`,
-      lastField: `${t}-last-field`,
-      input: `${t}-input`,
-      label: `${t}-label`,
-      error: `${t}-error`,
-      mark: `${t}-mark`,
-      description: `${t}-description`
-    };
+    const t = this._ROOT, e = `${t}-${this._CONTENT}`, r = `${t}-${this._LABEL}`, i = `${t}-${this._MARK}`, s = `${t}-${this._DESCRIPTION}`, o = `${t}-${this._INPUT}`, n = `${t}-${this._ERROR}`;
+    return { root: t, content: e, label: r, mark: i, description: s, input: o, error: n };
   }
+  /**
+   * The name of the custom event fired on validate.
+   */
   static get validateEventName() {
-    return `sb-${this._ROOT}:validate`;
+    return `${this.TAG}:validate`;
   }
+  /**
+   * Overrides default behavior to render into light DOM.
+   */
   createRenderRoot() {
     return this;
   }
+  /**
+   * The `id` of the root element. Equal to `childId` when provided, otherwise
+   * derived from the component's part name and `seed`.
+   */
   get rootId() {
-    return this.childId ?? `sb-${G.parts.root}-${this.seed}`;
+    return this.childId ?? `sb-${P.parts.root}-${this.seed}`;
   }
-  // -------------------------
-  // MARK
-  // -------------------------
-  _renderMark() {
-    return !this.mark && (!this.caret || !this.required) ? g : d`
-      <span
-        id="${this.markId}"
-        part="${G.parts.mark}"
-        data-content="${this.mark ? "text" : "caret"}"
-      >
-        ${this.mark ? this.mark : d`&ast;`}
-      </span>
-    `;
+  /**
+   * The `id` of the field content element, derived from `rootId` with the
+   * content part name appended.
+   */
+  get contentId() {
+    return `${this.rootId}-${P._CONTENT}`;
   }
-  // -------------------------
-  // VALIDATION + DISPATCH
-  // -------------------------
-  _dispatchValidate(t, e, r, i, s) {
-    this.dispatchEvent(
-      new CustomEvent(G.validateEventName, {
-        detail: {
-          id: this.rootId,
-          parentId: this.rootId,
-          name: t,
-          value: i,
-          valid: e,
-          type: r,
-          message: s
-        },
-        bubbles: !0,
-        composed: !0
-      })
-    );
+  /**
+   * The `id` of the field label element, derived from `rootId` with the label
+   * part name appended.
+   */
+  get labelId() {
+    return `${this.rootId}-${P._LABEL}`;
   }
-  _validateName(t, e, r, i) {
-    const s = t.trim();
-    return this.required && !s ? (r(!0), i(this.requiredError), this._dispatchValidate(
-      e,
-      !1,
-      "required",
-      s,
-      this.requiredError
-    ), !1) : /^[a-zA-Z\-'\s]+$/.test(s) ? (r(!1), i(""), this._dispatchValidate(e, !0, "success", s, "Valid name"), !0) : (r(!0), i(this.formatError), this._dispatchValidate(e, !1, "format", s, this.formatError), !1);
+  /**
+   * The `id` of the field description element, derived from `rootId` with the
+   * description part name appended.
+   */
+  get descriptionId() {
+    return `${this.rootId}-${P._DESCRIPTION}`;
   }
-  _validate() {
-    const t = this._validateName(
-      this._first,
-      "first_name",
-      (r) => this._firstInvalid = r,
-      (r) => this._firstError = r
-    ), e = this._validateName(
-      this._last,
-      "last_name",
-      (r) => this._lastInvalid = r,
-      (r) => this._lastError = r
-    );
-    return t && e;
+  /**
+   * The `id` of the mark element, derived from `rootId` with the mark part name
+   * appended.
+   */
+  get markId() {
+    return `${this.rootId}-${P._MARK}`;
   }
-  validate() {
-    return this._validate();
+  /**
+   * The `id` of the input element, equal to `fieldId` when provided, otherwise
+   * derived from `rootId` with the input part name appended.
+   */
+  get inputId() {
+    return this.fieldId ?? `${this.rootId}-${P._INPUT}`;
+  }
+  /**
+   * The `id` of the field error element, derived from `rootId` with the error
+   * part name appended.
+   */
+  get errorId() {
+    return `${this.rootId}-${P._ERROR}`;
+  }
+  /**
+   * Returns the normalized value of `_value` by trimming leading/trailing
+   * whitespace and collapsing consecutive interior spaces into one.
+   */
+  get _normalizedValue() {
+    return this._value.trim().replace(/\s+/g, " ");
+  }
+  /**
+   * Returns sanitized `minlength` and `maxlength` values, filtering out
+   * non-positive numbers and discarding `maxlength` if it is less than
+   * `minlength` to prevent conflicting length constraints.
+   */
+  get _lengths() {
+    const t = {
+      minlength: this.minlength && this.minlength > 0 ? this.minlength : void 0,
+      maxlength: this.maxlength && this.maxlength > 0 ? this.maxlength : void 0
+    };
+    return t.minlength && t.maxlength && t.maxlength < t.minlength && (t.maxlength = void 0), t;
+  }
+  /**
+   * Returns the resolved regex pattern, using a `RegExp` built from the
+   * `pattern` prop when provided, otherwise falling back to `_PATTERN`.
+   */
+  get _pattern() {
+    return this.pattern ? new RegExp(this.pattern) : P._PATTERN;
   }
+  /**
+   * Adds the input, form submit, and form reset event listeners.
+   */
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("input", this._handleInput);
+    var t, e;
+    super.connectedCallback(), this.addEventListener("input", this._handleInput), this._form = this.closest("form"), this._form && (this._form.noValidate = !0), (t = this._form) == null || t.addEventListener("submit", this._handleFormSubmit), (e = this._form) == null || e.addEventListener("reset", this._handleFormReset);
   }
+  /**
+   * Removes the input, form submit, and form reset event listeners.
+   */
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("input", this._handleInput);
+    var t, e;
+    super.disconnectedCallback(), this.removeEventListener("input", this._handleInput), (t = this._form) == null || t.removeEventListener("submit", this._handleFormSubmit), (e = this._form) == null || e.removeEventListener("reset", this._handleFormReset), this._form = null;
+  }
+  /**
+   * The public validate method that calls the private `_validate()` method for
+   * manual, external validation.
+   */
+  validate() {
+    return this._validate();
+  }
+  /**
+   * Defines and dispatches the validate event.
+   */
+  _dispatchValidate(t, e, r, i) {
+    const s = this.inputId, o = this.rootId, n = this.name, h = new CustomEvent(P.validateEventName, {
+      detail: { id: s, parentId: o, name: n, value: r, valid: t, type: e, message: i },
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(h);
+  }
+  /**
+   * Handles the required condition validation, accepting empty non-required
+   * fields and non-empty required fields, otherwise dispatching and displaying
+   * the required error.
+   */
+  _validateRequired(t) {
+    if (!this.required || t) return !0;
+    const e = this.requiredError;
+    return this._invalid = !0, this._error = e, this._dispatchValidate(!1, "required", t, e), !1;
+  }
+  /**
+   * Handles the minlength condition validation, determining if a valid
+   * `minlength` prop was provided, dispatching and displaying the minlength
+   * error if the value is shorter than accepted.
+   */
+  _validateMinlength(t) {
+    const { minlength: e } = this._lengths;
+    if (!e || t.length >= e) return !0;
+    const r = this.minlengthError ?? `Name must be at least ${e} characters.`;
+    return this._invalid = !0, this._error = r, this._dispatchValidate(!1, "minlength", t, r), !1;
   }
-  // -------------------------
-  // RENDER FIELD (EMAIL-STYLE)
-  // -------------------------
-  _renderFirstField() {
-    const t = `${this.rootId}-first`;
+  /**
+   * Handles the maxlength condition validation, determining if a valid
+   * `maxlength` prop was provided, dispatching and displaying the maxlength
+   * error if the value is longer than accepted.
+   */
+  _validateMaxlength(t) {
+    const { maxlength: e } = this._lengths;
+    if (!e || t.length <= e) return !0;
+    const r = this.maxlengthError ?? `Name must be at most ${e} characters.`;
+    return this._invalid = !0, this._error = r, this._dispatchValidate(!1, "maxlength", t, r), !1;
+  }
+  /**
+   * Handles the format condition validation, testing against `_pattern`, and
+   * dispatching and displaying the format error for an invalid value.
+   */
+  _validateFormat(t) {
+    if (this._pattern.test(t)) return !0;
+    const e = this.formatError;
+    return this._invalid = !0, this._error = e, this._dispatchValidate(!1, "format", t, e), !1;
+  }
+  /**
+   * Resets the `_invalid` and `_error` private props and dispatches the
+   * validate event, indicating a successfully validated and valid name.
+   */
+  _doValidateSuccess(t, e) {
+    this._invalid = !1, this._error = "", this._dispatchValidate(!0, "success", t, e);
+  }
+  /**
+   * Handles validation and dispatches the success event if the required,
+   * length, and format conditions are met.
+   */
+  _validate() {
+    const t = this._normalizedValue;
+    let e = this._validateRequired(t);
+    return e ? t ? (e = this._validateMinlength(t), !e || (e = this._validateMaxlength(t), !e) || (e = this._validateFormat(t), !e) ? !1 : (this._doValidateSuccess(t, "Valid name."), !0)) : (this._doValidateSuccess(t, "Valid name (optional and empty)."), !0) : !1;
+  }
+  /**
+   * Conditionally returns the mark template for the field label. When `caret`
+   * and `required` are provided, the mark becomes an asterisk. When `mark` is
+   * provided, its value is rendered inside the element.
+   * If both a caret and custom text mark have their conditions met, the custom
+   * mark will be prioritised and rendered instead of the asterisk.
+   */
+  _renderMark() {
+    return !this.mark && (!this.caret || !this.required) ? g : d`
+      <span
+        id="${this.markId}"
+        part="${P.parts.mark}"
+        data-content="${this.mark ? "text" : "caret"}"
+      >
+        ${this.mark ? this.mark : d`&ast;`}
+      </span>
+    `;
+  }
+  /**
+   * Returns the field label template with the label text and optional mark.
+   */
+  _renderLabel() {
     return d`
-      <rtg-field
-        id="${t}"
-        part="${G.parts.firstField}"
-        data-content="split"
-        ?disabled="${this.disabled}"
-        ?invalid="${this._firstInvalid}"
+      <rtg-field-label
+        id="${this.labelId}"
+        part="${P.parts.label}"
+        for="${this.inputId}"
       >
-        <rtg-field-label part="${G.parts.label}">
-          ${this.firstLabel} ${this._renderMark()}
-        </rtg-field-label>
-
-        <rtg-input
-          id="${t}-input"
-          part="${G.parts.input}"
-          name="${this.firstName}"
-          placeholder="${this.firstPlaceholder}"
-          .value=${this._first}
-          ?disabled=${this.disabled}
-          ?invalid=${this._firstInvalid}
-          ?required=${this.required}
-        ></rtg-input>
-
-        ${this._firstInvalid ? d`
-              <rtg-field-error part="${G.parts.error}">
-                ${this._firstError}
-              </rtg-field-error>
-            ` : g}
-      </rtg-field>
+        ${this.label} ${this._renderMark()}
+      </rtg-field-label>
     `;
   }
-  _renderLastField() {
-    const t = `${this.rootId}-last`;
+  /**
+   * Returns the field description template if `description` is defined.
+   */
+  _renderDescription() {
+    return this.description ? d`
+      <rtg-field-description
+        id="${this.descriptionId}"
+        part="${P.parts.description}"
+      >
+        ${this.description}
+      </rtg-field-description>
+    ` : g;
+  }
+  /**
+   * Returns the field error template with the `_error` message if the
+   * `_invalid` state is `true`.
+   */
+  _renderError() {
+    return this._invalid ? d`
+      <rtg-field-error
+        id="${this.errorId}"
+        part="${P.parts.error}"
+        .errors=${[{ message: this._error }]}
+      ></rtg-field-error>
+    ` : g;
+  }
+  render() {
+    const { minlength: t, maxlength: e } = this._lengths;
     return d`
       <rtg-field
-        id="${t}"
-        part="${G.parts.lastField}"
-        data-content="split"
+        id="${this.rootId}"
+        part="${P.parts.root}"
+        data-content="${this.content}"
         ?disabled="${this.disabled}"
-        ?invalid="${this._lastInvalid}"
+        ?invalid="${this._invalid}"
       >
-        <rtg-field-label part="${G.parts.label}">
-          ${this.lastLabel} ${this._renderMark()}
-        </rtg-field-label>
+        ${this.content === "group" ? d`
+              <rtg-field-content
+                id="${this.contentId}"
+                part="${P.parts.content}"
+              >
+                ${this._renderLabel()} ${this._renderDescription()}
+              </rtg-field-content>
+            ` : this._renderLabel()}
 
         <rtg-input
-          id="${t}-input"
-          part="${G.parts.input}"
-          name="${this.lastName}"
-          placeholder="${this.lastPlaceholder}"
-          .value=${this._last}
-          ?disabled=${this.disabled}
-          ?invalid=${this._lastInvalid}
+          id="${this.inputId}"
+          part="${P.parts.input}"
+          type="text"
+          name="${this.name}"
+          placeholder="${this.placeholder ?? g}"
+          pattern="${this._pattern.source}"
+          minlength="${t ?? g}"
+          maxlength="${e ?? g}"
+          ?disabled="${this.disabled}"
+          ?invalid=${this._invalid}
           ?required=${this.required}
         ></rtg-input>
 
-        ${this._lastInvalid ? d`
-              <rtg-field-error part="${G.parts.error}">
-                ${this._lastError}
-              </rtg-field-error>
-            ` : g}
+        ${this._renderError()}
+        ${this.content === "split" && !this._invalid ? this._renderDescription() : g}
       </rtg-field>
     `;
   }
-  render() {
-    return d`
-      <div class="sb-flex">
-        ${this._renderFirstField()} ${this._renderLastField()}
-      </div>
-    `;
-  }
 };
-G._ROOT = "name-field";
-G._FIRST = "first";
-G._LAST = "last";
-ut([
-  a({ type: String })
-], G.prototype, "firstLabel", 2);
-ut([
-  a({ type: String })
-], G.prototype, "lastLabel", 2);
-ut([
-  a({ type: String })
-], G.prototype, "seed", 2);
-ut([
-  a({ attribute: "child-id" })
-], G.prototype, "childId", 2);
-ut([
-  a({ type: String })
-], G.prototype, "name", 2);
-ut([
-  a({ type: Boolean })
-], G.prototype, "required", 2);
-ut([
-  a({ type: Boolean })
-], G.prototype, "disabled", 2);
-ut([
+P._ROOT = "name-field";
+P._CONTENT = "content";
+P._LABEL = "label";
+P._MARK = "mark";
+P._DESCRIPTION = "description";
+P._INPUT = "input";
+P._ERROR = "error";
+P.TAG = `sb-${P._ROOT}`;
+P._PATTERN = /^[\p{L} .'-]*$/u;
+ht([
   a({ type: String })
-], G.prototype, "firstName", 2);
-ut([
+], P.prototype, "seed", 2);
+ht([
+  a({ attribute: "child-id", type: String })
+], P.prototype, "childId", 2);
+ht([
+  a({ attribute: "field-id", type: String })
+], P.prototype, "fieldId", 2);
+ht([
   a({ type: String })
-], G.prototype, "lastName", 2);
-ut([
+], P.prototype, "name", 2);
+ht([
   a({ type: String })
-], G.prototype, "firstPlaceholder", 2);
-ut([
+], P.prototype, "content", 2);
+ht([
   a({ type: String })
-], G.prototype, "lastPlaceholder", 2);
-ut([
+], P.prototype, "label", 2);
+ht([
   a({ type: String })
-], G.prototype, "requiredError", 2);
-ut([
+], P.prototype, "placeholder", 2);
+ht([
   a({ type: String })
-], G.prototype, "formatError", 2);
-ut([
+], P.prototype, "description", 2);
+ht([
   a({ type: String })
-], G.prototype, "mark", 2);
-ut([
+], P.prototype, "mark", 2);
+ht([
   a({ type: Boolean })
-], G.prototype, "caret", 2);
-ut([
-  x()
-], G.prototype, "_first", 2);
-ut([
-  x()
-], G.prototype, "_firstInvalid", 2);
-ut([
-  x()
-], G.prototype, "_firstError", 2);
-ut([
+], P.prototype, "caret", 2);
+ht([
+  a({ type: Boolean })
+], P.prototype, "disabled", 2);
+ht([
+  a({ type: Boolean })
+], P.prototype, "required", 2);
+ht([
+  a({ type: Number })
+], P.prototype, "minlength", 2);
+ht([
+  a({ type: Number })
+], P.prototype, "maxlength", 2);
+ht([
+  a({ type: String })
+], P.prototype, "pattern", 2);
+ht([
+  a({ attribute: "required-error", type: String })
+], P.prototype, "requiredError", 2);
+ht([
+  a({ attribute: "minlength-error", type: String })
+], P.prototype, "minlengthError", 2);
+ht([
+  a({ attribute: "maxlength-error", type: String })
+], P.prototype, "maxlengthError", 2);
+ht([
+  a({ attribute: "format-error", type: String })
+], P.prototype, "formatError", 2);
+ht([
   x()
-], G.prototype, "_last", 2);
-ut([
+], P.prototype, "_invalid", 2);
+ht([
   x()
-], G.prototype, "_lastInvalid", 2);
-ut([
+], P.prototype, "_error", 2);
+ht([
   x()
-], G.prototype, "_lastError", 2);
-G = ut([
+], P.prototype, "_value", 2);
+P = ht([
   u("sb-name-field")
-], G);
+], P);
 var Rm = Object.defineProperty, Om = Object.getOwnPropertyDescriptor, Ot = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? Om(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && Rm(e, r, s), s;
 };
-let D = class extends v {
+let U = class extends v {
   constructor() {
     super(...arguments), this.seed = Nt(), this.name = "phone", this.content = "split", this.label = "Phone", this.requiredError = "Phone is a required field.", this.formatError = "Enter a valid phone number.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
       const e = t.target;
-      e.matches(`[part="${D.parts.input}"]>input`) && (this._value = e.value);
+      e.matches(`[part="${U.parts.input}"]>input`) && (this._value = e.value);
     }, this._handleFormSubmit = (t) => {
       this._validate() || t.preventDefault();
     }, this._handleFormReset = () => {
       const t = this.querySelector(
-        `rtg-input[part="${D.parts.input}"]`
+        `rtg-input[part="${U.parts.input}"]`
       );
       t && (t.value = ""), this._value = "", this._invalid = !1, this._error = "";
     };
@@ -22406,49 +22536,49 @@ let D = class extends v {
    * derived from the component's part name and `seed`.
    */
   get rootId() {
-    return this.childId ?? `sb-${D.parts.root}-${this.seed}`;
+    return this.childId ?? `sb-${U.parts.root}-${this.seed}`;
   }
   /**
    * The `id` of the field content element, derived from `rootId` with the
    * content part name appended.
    */
   get contentId() {
-    return `${this.rootId}-${D._CONTENT}`;
+    return `${this.rootId}-${U._CONTENT}`;
   }
   /**
    * The `id` of the field label element, derived from `rootId` with the label
    * part name appended.
    */
   get labelId() {
-    return `${this.rootId}-${D._LABEL}`;
+    return `${this.rootId}-${U._LABEL}`;
   }
   /**
    * The `id` of the field description element, derived from `rootId` with the
    * description part name appended.
    */
   get descriptionId() {
-    return `${this.rootId}-${D._DESCRIPTION}`;
+    return `${this.rootId}-${U._DESCRIPTION}`;
   }
   /**
    * The `id` of the mark element, derived from `rootId` with the mark part name
    * appended.
    */
   get markId() {
-    return `${this.rootId}-${D._MARK}`;
+    return `${this.rootId}-${U._MARK}`;
   }
   /**
    * The `id` of the input element, equal to `fieldId` when provided, otherwise
    * derived from `rootId` with the input part name appended.
    */
   get inputId() {
-    return this.fieldId ?? `${this.rootId}-${D._INPUT}`;
+    return this.fieldId ?? `${this.rootId}-${U._INPUT}`;
   }
   /**
    * The `id` of the field error element, derived from `rootId` with the error
    * part name appended.
    */
   get errorId() {
-    return `${this.rootId}-${D._ERROR}`;
+    return `${this.rootId}-${U._ERROR}`;
   }
   /**
    * Returns the normalized value of `_value` by stripping all whitespace.
@@ -22481,7 +22611,7 @@ let D = class extends v {
    * Defines and dispatches the validate event.
    */
   _dispatchValidate(t, e, r, i) {
-    const s = this.inputId, o = this.rootId, n = this.name, h = new CustomEvent(D.validateEventName, {
+    const s = this.inputId, o = this.rootId, n = this.name, h = new CustomEvent(U.validateEventName, {
       detail: { id: s, parentId: o, name: n, value: r, valid: t, type: e, message: i },
       bubbles: !0,
       composed: !0
@@ -22504,7 +22634,7 @@ let D = class extends v {
    * otherwise dispatching and displaying the format error.
    */
   _validateFormat(t) {
-    if (!this.required && t === "" || D._PATTERN.test(t))
+    if (!this.required && t === "" || U._PATTERN.test(t))
       return !0;
     const e = this.formatError;
     return this._invalid = !0, this._error = e, this._dispatchValidate(!1, "format", t, e), !1;
@@ -22531,7 +22661,7 @@ let D = class extends v {
     return !this.mark && (!this.caret || !this.required) ? g : d`
       <span
         id="${this.markId}"
-        part="${D.parts.mark}"
+        part="${U.parts.mark}"
         data-content="${this.mark ? "text" : "caret"}"
       >
         ${this.mark ? this.mark : d`&ast;`}
@@ -22545,7 +22675,7 @@ let D = class extends v {
     return d`
       <rtg-field-label
         id="${this.labelId}"
-        part="${D.parts.label}"
+        part="${U.parts.label}"
         for="${this.inputId}"
       >
         ${this.label} ${this._renderMark()}
@@ -22559,7 +22689,7 @@ let D = class extends v {
     return this.description ? d`
       <rtg-field-description
         id="${this.descriptionId}"
-        part="${D.parts.description}"
+        part="${U.parts.description}"
       >
         ${this.description}
       </rtg-field-description>
@@ -22573,7 +22703,7 @@ let D = class extends v {
     return this._invalid ? d`
       <rtg-field-error
         id="${this.errorId}"
-        part="${D.parts.error}"
+        part="${U.parts.error}"
         .errors=${[{ message: this._error }]}
       ></rtg-field-error>
     ` : g;
@@ -22582,7 +22712,7 @@ let D = class extends v {
     return d`
       <rtg-field
         id="${this.rootId}"
-        part="${D.parts.root}"
+        part="${U.parts.root}"
         data-content="${this.content}"
         ?disabled="${this.disabled}"
         ?invalid="${this._invalid}"
@@ -22590,7 +22720,7 @@ let D = class extends v {
         ${this.content === "group" ? d`
               <rtg-field-content
                 id="${this.contentId}"
-                part="${D.parts.content}"
+                part="${U.parts.content}"
               >
                 ${this._renderLabel()} ${this._renderDescription()}
               </rtg-field-content>
@@ -22598,7 +22728,7 @@ let D = class extends v {
 
         <rtg-input
           id="${this.inputId}"
-          part="${D.parts.input}"
+          part="${U.parts.input}"
           type="tel"
           name="${this.name}"
           placeholder="${this.placeholder ?? g}"
@@ -22613,84 +22743,84 @@ let D = class extends v {
     `;
   }
 };
-D._ROOT = "phone-field";
-D._CONTENT = "content";
-D._LABEL = "label";
-D._MARK = "mark";
-D._DESCRIPTION = "description";
-D._INPUT = "input";
-D._ERROR = "error";
-D.TAG = `sb-${D._ROOT}`;
-D._PATTERN = /^\+?(\d[\d-.() ]+)?(\([\d-.() ]+\))?[\d-.() ]+\d$/;
+U._ROOT = "phone-field";
+U._CONTENT = "content";
+U._LABEL = "label";
+U._MARK = "mark";
+U._DESCRIPTION = "description";
+U._INPUT = "input";
+U._ERROR = "error";
+U.TAG = `sb-${U._ROOT}`;
+U._PATTERN = /^\+?(\d[\d-.() ]+)?(\([\d-.() ]+\))?[\d-.() ]+\d$/;
 Ot([
   a({ type: String })
-], D.prototype, "seed", 2);
+], U.prototype, "seed", 2);
 Ot([
   a({ attribute: "child-id", type: String })
-], D.prototype, "childId", 2);
+], U.prototype, "childId", 2);
 Ot([
   a({ attribute: "field-id", type: String })
-], D.prototype, "fieldId", 2);
+], U.prototype, "fieldId", 2);
 Ot([
   a({ type: String })
-], D.prototype, "name", 2);
+], U.prototype, "name", 2);
 Ot([
   a({ type: String })
-], D.prototype, "content", 2);
+], U.prototype, "content", 2);
 Ot([
   a({ type: String })
-], D.prototype, "label", 2);
+], U.prototype, "label", 2);
 Ot([
   a({ type: String })
-], D.prototype, "placeholder", 2);
+], U.prototype, "placeholder", 2);
 Ot([
   a({ type: String })
-], D.prototype, "description", 2);
+], U.prototype, "description", 2);
 Ot([
   a({ type: String })
-], D.prototype, "mark", 2);
+], U.prototype, "mark", 2);
 Ot([
   a({ type: Boolean })
-], D.prototype, "caret", 2);
+], U.prototype, "caret", 2);
 Ot([
   a({ type: Boolean })
-], D.prototype, "disabled", 2);
+], U.prototype, "disabled", 2);
 Ot([
   a({ type: Boolean })
-], D.prototype, "required", 2);
+], U.prototype, "required", 2);
 Ot([
   a({ attribute: "required-error", type: String })
-], D.prototype, "requiredError", 2);
+], U.prototype, "requiredError", 2);
 Ot([
   a({ attribute: "format-error", type: String })
-], D.prototype, "formatError", 2);
+], U.prototype, "formatError", 2);
 Ot([
   x()
-], D.prototype, "_invalid", 2);
+], U.prototype, "_invalid", 2);
 Ot([
   x()
-], D.prototype, "_error", 2);
+], U.prototype, "_error", 2);
 Ot([
   x()
-], D.prototype, "_value", 2);
-D = Ot([
+], U.prototype, "_value", 2);
+U = Ot([
   u("sb-phone-field")
-], D);
-var Im = Object.defineProperty, Am = Object.getOwnPropertyDescriptor, ht = (t, e, r, i) => {
+], U);
+var Im = Object.defineProperty, Am = Object.getOwnPropertyDescriptor, pt = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? Am(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && Im(e, r, s), s;
 };
-let P = class extends v {
+let N = class extends v {
   constructor() {
     super(...arguments), this.seed = Nt(), this.name = "username", this.content = "split", this.label = "Username", this.requiredError = "Username is a required field.", this.formatError = "Enter a valid username.", this._invalid = !1, this._error = "", this._value = "", this._form = null, this._handleInput = (t) => {
       const e = t.target;
-      e.matches(`[part="${P.parts.input}"]>input`) && (this._value = e.value);
+      e.matches(`[part="${N.parts.input}"]>input`) && (this._value = e.value);
     }, this._handleFormSubmit = (t) => {
       this._validate() || t.preventDefault();
     }, this._handleFormReset = () => {
       const t = this.querySelector(
-        `rtg-input[part="${P.parts.input}"]`
+        `rtg-input[part="${N.parts.input}"]`
       );
       t && (t.value = ""), this._value = "", this._invalid = !1, this._error = "";
     };
@@ -22719,49 +22849,49 @@ let P = class extends v {
    * derived from the component's part name and `seed`.
    */
   get rootId() {
-    return this.childId ?? `sb-${P.parts.root}-${this.seed}`;
+    return this.childId ?? `sb-${N.parts.root}-${this.seed}`;
   }
   /**
    * The `id` of the field content element, derived from `rootId` with the
    * content part name appended.
    */
   get contentId() {
-    return `${this.rootId}-${P._CONTENT}`;
+    return `${this.rootId}-${N._CONTENT}`;
   }
   /**
    * The `id` of the field label element, derived from `rootId` with the label
    * part name appended.
    */
   get labelId() {
-    return `${this.rootId}-${P._LABEL}`;
+    return `${this.rootId}-${N._LABEL}`;
   }
   /**
    * The `id` of the field description element, derived from `rootId` with the
    * description part name appended.
    */
   get descriptionId() {
-    return `${this.rootId}-${P._DESCRIPTION}`;
+    return `${this.rootId}-${N._DESCRIPTION}`;
   }
   /**
    * The `id` of the mark element, derived from `rootId` with the mark part name
    * appended.
    */
   get markId() {
-    return `${this.rootId}-${P._MARK}`;
+    return `${this.rootId}-${N._MARK}`;
   }
   /**
    * The `id` of the input element, equal to `fieldId` when provided, otherwise
    * derived from `rootId` with the input part name appended.
    */
   get inputId() {
-    return this.fieldId ?? `${this.rootId}-${P._INPUT}`;
+    return this.fieldId ?? `${this.rootId}-${N._INPUT}`;
   }
   /**
    * The `id` of the field error element, derived from `rootId` with the error
    * part name appended.
    */
   get errorId() {
-    return `${this.rootId}-${P._ERROR}`;
+    return `${this.rootId}-${N._ERROR}`;
   }
   /**
    * Returns a the normalized value of `_value` by trimming whitespace and
@@ -22787,7 +22917,7 @@ let P = class extends v {
    * `pattern` prop when provided, otherwise falling back to `_PATTERN`.
    */
   get _pattern() {
-    return this.pattern ? new RegExp(this.pattern) : P._PATTERN;
+    return this.pattern ? new RegExp(this.pattern) : N._PATTERN;
   }
   /**
    * Adds the input, form submit, and form reset event listeners.
@@ -22814,7 +22944,7 @@ let P = class extends v {
    * Defines and dispatches the validate event.
    */
   _dispatchValidate(t, e, r, i) {
-    const s = this.inputId, o = this.rootId, n = this.name, h = new CustomEvent(P.validateEventName, {
+    const s = this.inputId, o = this.rootId, n = this.name, h = new CustomEvent(N.validateEventName, {
       detail: { id: s, parentId: o, name: n, value: r, valid: t, type: e, message: i },
       bubbles: !0,
       composed: !0
@@ -22889,7 +23019,7 @@ let P = class extends v {
     return !this.mark && (!this.caret || !this.required) ? g : d`
       <span
         id="${this.markId}"
-        part="${P.parts.mark}"
+        part="${N.parts.mark}"
         data-content="${this.mark ? "text" : "caret"}"
       >
         ${this.mark ? this.mark : d`&ast;`}
@@ -22903,7 +23033,7 @@ let P = class extends v {
     return d`
       <rtg-field-label
         id="${this.labelId}"
-        part="${P.parts.label}"
+        part="${N.parts.label}"
         for="${this.inputId}"
       >
         ${this.label} ${this._renderMark()}
@@ -22917,7 +23047,7 @@ let P = class extends v {
     return this.description ? d`
       <rtg-field-description
         id="${this.descriptionId}"
-        part="${P.parts.description}"
+        part="${N.parts.description}"
       >
         ${this.description}
       </rtg-field-description>
@@ -22931,7 +23061,7 @@ let P = class extends v {
     return this._invalid ? d`
       <rtg-field-error
         id="${this.errorId}"
-        part="${P.parts.error}"
+        part="${N.parts.error}"
         .errors=${[{ message: this._error }]}
       ></rtg-field-error>
     ` : g;
@@ -22941,7 +23071,7 @@ let P = class extends v {
     return d`
       <rtg-field
         id="${this.rootId}"
-        part="${P.parts.root}"
+        part="${N.parts.root}"
         data-content="${this.content}"
         ?disabled="${this.disabled}"
         ?invalid="${this._invalid}"
@@ -22949,7 +23079,7 @@ let P = class extends v {
         ${this.content === "group" ? d`
               <rtg-field-content
                 id="${this.contentId}"
-                part="${P.parts.content}"
+                part="${N.parts.content}"
               >
                 ${this._renderLabel()} ${this._renderDescription()}
               </rtg-field-content>
@@ -22957,7 +23087,7 @@ let P = class extends v {
 
         <rtg-input
           id="${this.inputId}"
-          part="${P.parts.input}"
+          part="${N.parts.input}"
           type="text"
           name="${this.name}"
           placeholder="${this.placeholder ?? g}"
@@ -22975,84 +23105,84 @@ let P = class extends v {
     `;
   }
 };
-P._ROOT = "username-field";
-P._CONTENT = "content";
-P._LABEL = "label";
-P._MARK = "mark";
-P._DESCRIPTION = "description";
-P._INPUT = "input";
-P._ERROR = "error";
-P.TAG = `sb-${P._ROOT}`;
-P._PATTERN = /^[a-z0-9_]*$/;
-ht([
+N._ROOT = "username-field";
+N._CONTENT = "content";
+N._LABEL = "label";
+N._MARK = "mark";
+N._DESCRIPTION = "description";
+N._INPUT = "input";
+N._ERROR = "error";
+N.TAG = `sb-${N._ROOT}`;
+N._PATTERN = /^[a-z0-9_]*$/;
+pt([
   a({ type: String })
-], P.prototype, "seed", 2);
-ht([
+], N.prototype, "seed", 2);
+pt([
   a({ attribute: "child-id", type: String })
-], P.prototype, "childId", 2);
-ht([
+], N.prototype, "childId", 2);
+pt([
   a({ attribute: "field-id", type: String })
-], P.prototype, "fieldId", 2);
-ht([
+], N.prototype, "fieldId", 2);
+pt([
   a({ type: String })
-], P.prototype, "name", 2);
-ht([
+], N.prototype, "name", 2);
+pt([
   a({ type: String })
-], P.prototype, "content", 2);
-ht([
+], N.prototype, "content", 2);
+pt([
   a({ type: String })
-], P.prototype, "label", 2);
-ht([
+], N.prototype, "label", 2);
+pt([
   a({ type: String })
-], P.prototype, "placeholder", 2);
-ht([
+], N.prototype, "placeholder", 2);
+pt([
   a({ type: String })
-], P.prototype, "description", 2);
-ht([
+], N.prototype, "description", 2);
+pt([
   a({ type: String })
-], P.prototype, "mark", 2);
-ht([
+], N.prototype, "mark", 2);
+pt([
   a({ type: Boolean })
-], P.prototype, "caret", 2);
-ht([
+], N.prototype, "caret", 2);
+pt([
   a({ type: Boolean })
-], P.prototype, "disabled", 2);
-ht([
+], N.prototype, "disabled", 2);
+pt([
   a({ type: Boolean })
-], P.prototype, "required", 2);
-ht([
+], N.prototype, "required", 2);
+pt([
   a({ type: Number })
-], P.prototype, "minlength", 2);
-ht([
+], N.prototype, "minlength", 2);
+pt([
   a({ type: Number })
-], P.prototype, "maxlength", 2);
-ht([
+], N.prototype, "maxlength", 2);
+pt([
   a({ type: String })
-], P.prototype, "pattern", 2);
-ht([
+], N.prototype, "pattern", 2);
+pt([
   a({ attribute: "required-error", type: String })
-], P.prototype, "requiredError", 2);
-ht([
+], N.prototype, "requiredError", 2);
+pt([
   a({ attribute: "minlength-error", type: String })
-], P.prototype, "minlengthError", 2);
-ht([
+], N.prototype, "minlengthError", 2);
+pt([
   a({ attribute: "maxlength-error", type: String })
-], P.prototype, "maxlengthError", 2);
-ht([
+], N.prototype, "maxlengthError", 2);
+pt([
   a({ attribute: "format-error", type: String })
-], P.prototype, "formatError", 2);
-ht([
+], N.prototype, "formatError", 2);
+pt([
   x()
-], P.prototype, "_invalid", 2);
-ht([
+], N.prototype, "_invalid", 2);
+pt([
   x()
-], P.prototype, "_error", 2);
-ht([
+], N.prototype, "_error", 2);
+pt([
   x()
-], P.prototype, "_value", 2);
-P = ht([
+], N.prototype, "_value", 2);
+N = pt([
   u("sb-username-field")
-], P);
+], N);
 var Tm = Object.defineProperty, Lm = Object.getOwnPropertyDescriptor, ve = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? Lm(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
@@ -23189,12 +23319,13 @@ at = ve([
   u("sb-form-submit")
 ], at);
 const ph = [
-  j,
   D,
-  P,
   U,
+  N,
+  M,
+  P,
   A,
-  z
+  j
 ], Pm = ph.map((t) => t.TAG).join(", "), uc = ph.map((t) => t.validateEventName);
 var Nm = Object.defineProperty, zm = Object.getOwnPropertyDescriptor, cs = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? zm(e, r) : e, o = t.length - 1, n; o >= 0; o--)
@@ -23417,8 +23548,8 @@ Io([
 ir = Io([
   u("sb-form-separator")
 ], ir);
-var Um = Object.defineProperty, Fm = Object.getOwnPropertyDescriptor, le = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? Fm(e, r) : e, o = t.length - 1, n; o >= 0; o--)
+var Um = Object.defineProperty, Mm = Object.getOwnPropertyDescriptor, le = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? Mm(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
   return i && s && Um(e, r, s), s;
 };
@@ -23582,10 +23713,10 @@ le([
 Z = le([
   u("sb-form-switch")
 ], Z);
-var Mm = Object.defineProperty, Bm = Object.getOwnPropertyDescriptor, ye = (t, e, r, i) => {
+var Fm = Object.defineProperty, Bm = Object.getOwnPropertyDescriptor, ye = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? Bm(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
-  return i && s && Mm(e, r, s), s;
+  return i && s && Fm(e, r, s), s;
 };
 let ct = class extends v {
   constructor() {
@@ -24756,7 +24887,7 @@ function vb() {
     </svg>
 `;
 }
-const No = "sb-w-full sb-flex sb-justify-between sb-border-b sb-px-4 sb-py-2", zo = "sb-flex sb-items-center sb-text-[18px] sb-font-medium sb-gap-2 sb-text-muted-foreground !sb-min-w-9 !sb-min-h-9", jo = "sb-w-full sb-basis-36 sb-shrink-0 sb-text-sm sb-text-foreground sb-font-medium sb-truncate sb-overflow-hidden sb-text-ellipsis", Do = "sb-w-full sb-border-none !sb-shadow-none !sb-px-0 disabled:!sb-opacity-100", Uo = "!sb-rounded-2xl !sb-p-0 !sb-bg-base-background", Fo = "!sb-rounded-2xl !sb-p-0 sb-mb-4", Mo = "!sb-bg-background", Bo = "sb-w-full md:sb-w-[120px]", qo = "sb-w-full md:sb-w-[120px]", za = "sb-text-muted-foreground sb-text-sm sb-mr-2 sb-flex sb-items-center sb-gap-1";
+const No = "sb-w-full sb-flex sb-justify-between sb-border-b sb-px-4 sb-py-2", zo = "sb-flex sb-items-center sb-text-[18px] sb-font-medium sb-gap-2 sb-text-muted-foreground !sb-min-w-9 !sb-min-h-9", jo = "sb-w-full sb-basis-36 sb-shrink-0 sb-text-sm sb-text-foreground sb-font-medium sb-truncate sb-overflow-hidden sb-text-ellipsis", Do = "sb-w-full sb-border-none !sb-shadow-none !sb-px-0 disabled:!sb-opacity-100", Uo = "!sb-rounded-2xl !sb-p-0 !sb-bg-base-background", Mo = "!sb-rounded-2xl !sb-p-0 sb-mb-4", Fo = "!sb-bg-background", Bo = "sb-w-full md:sb-w-[120px]", qo = "sb-w-full md:sb-w-[120px]", za = "sb-text-muted-foreground sb-text-sm sb-mr-2 sb-flex sb-items-center sb-gap-1";
 var yb = Object.defineProperty, wb = Object.getOwnPropertyDescriptor, zt = (t, e, r, i) => {
   for (var s = i > 1 ? void 0 : i ? wb(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
@@ -24810,7 +24941,7 @@ let At = class extends v {
   }
   getInputStyles(t = !1) {
     var r, i, s;
-    const e = t ? Mo : ot(Do);
+    const e = t ? Fo : ot(Do);
     return O(
       e,
       {},
@@ -24832,7 +24963,7 @@ let At = class extends v {
   getContainerStyles(t) {
     var e, r, i, s, o, n, h, p;
     return O(
-      t ? Uo : Fo,
+      t ? Uo : Mo,
       {},
       t ? (s = (i = (r = (e = this.customizations) == null ? void 0 : e.byType) == null ? void 0 : r.userProfile) == null ? void 0 : i.userProfileCard) == null ? void 0 : s.editForm : (p = (h = (n = (o = this.customizations) == null ? void 0 : o.byType) == null ? void 0 : n.userProfile) == null ? void 0 : h.userProfileCard) == null ? void 0 : p.container,
       t ? F.USER_PROFILE_EDIT_FORM : F.USER_PROFILE_CARD_CONTAINER,
@@ -25207,7 +25338,7 @@ let sr = class extends v {
   }
   getInputStyles(t = !1) {
     var r, i, s;
-    const e = t ? Mo : ot(Do);
+    const e = t ? Fo : ot(Do);
     return O(
       e,
       {},
@@ -25233,7 +25364,7 @@ let sr = class extends v {
     var e, r, i, s, o, n, h, p;
     return O(
       ot(
-        t ? Uo + " sb-mb-4" : Fo
+        t ? Uo + " sb-mb-4" : Mo
       ),
       {},
       t ? (s = (i = (r = (e = this.customizations) == null ? void 0 : e.byType) == null ? void 0 : r.userProfile) == null ? void 0 : i.userProfileCard) == null ? void 0 : s.editForm : (p = (h = (n = (o = this.customizations) == null ? void 0 : o.byType) == null ? void 0 : n.userProfile) == null ? void 0 : h.userProfileCard) == null ? void 0 : p.container,
@@ -25278,7 +25409,7 @@ let sr = class extends v {
     `;
   }
   render() {
-    var y, w, E, C, S, k, T, I, N, J, Y, nt, gt, jt;
+    var y, w, E, C, S, k, T, I, z, J, Y, nt, gt, jt;
     const t = [
       { label: "Username", value: this.personal.username },
       { label: "First name", value: this.personal.first },
@@ -25296,7 +25427,7 @@ let sr = class extends v {
     ), h = O(
       zo,
       {},
-      (J = (N = (I = (T = (k = this.customizations) == null ? void 0 : k.byType) == null ? void 0 : T.userProfile) == null ? void 0 : I.userProfileCard) == null ? void 0 : N.header) == null ? void 0 : J.title,
+      (J = (z = (I = (T = (k = this.customizations) == null ? void 0 : k.byType) == null ? void 0 : T.userProfile) == null ? void 0 : I.userProfileCard) == null ? void 0 : z.header) == null ? void 0 : J.title,
       F.USER_PROFILE_CARD_HEADER_CONTAINER,
       this.customizations
     ), p = this.getLabelStyles(), b = this.isEditing ? r : e;
@@ -25338,15 +25469,15 @@ let sr = class extends v {
         <rtg-card-content>
           <div class="sb-flex sb-flex-col sb-gap-3 sb-p-4">
             ${t.map(
-      (H) => d`
+      (G) => d`
                 <div
                   class="sb-flex ${this.layout === Gt.ROW ? "sb-flex-row sb-items-center sb-gap-2" : "sb-flex-col sb-gap-1"}"
                 >
                   <div class=${p.class} style=${R(p.style)}>
-                    ${H.label}
+                    ${G.label}
                   </div>
                   <div class="sb-flex-1 sb-min-w-0 sb-mr-4">
-                    ${this.renderInput(H.value)}
+                    ${this.renderInput(G.value)}
                   </div>
                 </div>
               `
@@ -25427,7 +25558,7 @@ let or = class extends v {
   }
   getInputStyles(t = !1) {
     var r, i, s;
-    const e = t ? Mo : ot(Do);
+    const e = t ? Fo : ot(Do);
     return O(
       e,
       {},
@@ -25453,7 +25584,7 @@ let or = class extends v {
     var e, r, i, s, o, n, h, p;
     return O(
       ot(
-        t ? Uo + " sb-mb-4" : Fo
+        t ? Uo + " sb-mb-4" : Mo
       ),
       {},
       t ? (s = (i = (r = (e = this.customizations) == null ? void 0 : e.byType) == null ? void 0 : r.userProfile) == null ? void 0 : i.userProfileCard) == null ? void 0 : s.editForm : (p = (h = (n = (o = this.customizations) == null ? void 0 : o.byType) == null ? void 0 : n.userProfile) == null ? void 0 : h.userProfileCard) == null ? void 0 : p.container,
@@ -25498,7 +25629,7 @@ let or = class extends v {
     `;
   }
   render() {
-    var y, w, E, C, S, k, T, I, N, J, Y, nt;
+    var y, w, E, C, S, k, T, I, z, J, Y, nt;
     const t = [
       { label: "Location", value: this.locationInfo.location },
       { label: "Zone Info", value: this.locationInfo.zoneInfo }
@@ -25511,7 +25642,7 @@ let or = class extends v {
     ), h = O(
       zo,
       {},
-      (J = (N = (I = (T = (k = this.customizations) == null ? void 0 : k.byType) == null ? void 0 : T.userProfile) == null ? void 0 : I.userProfileCard) == null ? void 0 : N.header) == null ? void 0 : J.title,
+      (J = (z = (I = (T = (k = this.customizations) == null ? void 0 : k.byType) == null ? void 0 : T.userProfile) == null ? void 0 : I.userProfileCard) == null ? void 0 : z.header) == null ? void 0 : J.title,
       F.USER_PROFILE_CARD_HEADER_CONTAINER,
       this.customizations
     ), p = this.getLabelStyles(), b = this.isEditing ? r : e;
@@ -25642,7 +25773,7 @@ let nr = class extends v {
   }
   getInputStyles(t = !1) {
     var r, i, s;
-    const e = t ? Mo : ot(Do);
+    const e = t ? Fo : ot(Do);
     return O(
       e,
       {},
@@ -25668,7 +25799,7 @@ let nr = class extends v {
     var e, r, i, s, o, n, h, p;
     return O(
       ot(
-        t ? Uo : Fo,
+        t ? Uo : Mo,
         "!sb-mb-0"
       ),
       {},
@@ -25714,7 +25845,7 @@ let nr = class extends v {
     `;
   }
   render() {
-    var y, w, E, C, S, k, T, I, N, J, Y, nt;
+    var y, w, E, C, S, k, T, I, z, J, Y, nt;
     const t = [{ label: "Website", value: this.URLsInfo.website }], e = this.getContainerStyles(!1), r = this.getContainerStyles(!0), { defaultMapped: i, outlineMapped: s, ghostMapped: o } = this.getButtonStyles(), n = O(
       No,
       {},
@@ -25724,7 +25855,7 @@ let nr = class extends v {
     ), h = O(
       zo,
       {},
-      (J = (N = (I = (T = (k = this.customizations) == null ? void 0 : k.byType) == null ? void 0 : T.userProfile) == null ? void 0 : I.userProfileCard) == null ? void 0 : N.header) == null ? void 0 : J.title,
+      (J = (z = (I = (T = (k = this.customizations) == null ? void 0 : k.byType) == null ? void 0 : T.userProfile) == null ? void 0 : I.userProfileCard) == null ? void 0 : z.header) == null ? void 0 : J.title,
       F.USER_PROFILE_CARD_HEADER_CONTAINER,
       this.customizations
     ), p = this.getLabelStyles(), b = this.isEditing ? r : e;
@@ -26340,10 +26471,10 @@ Vo([
 ss = Vo([
   u("sb-preview")
 ], ss);
-var Fb = Object.defineProperty, Mb = Object.getOwnPropertyDescriptor, Ho = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? Mb(e, r) : e, o = t.length - 1, n; o >= 0; o--)
+var Mb = Object.defineProperty, Fb = Object.getOwnPropertyDescriptor, Ho = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? Fb(e, r) : e, o = t.length - 1, n; o >= 0; o--)
     (n = t[o]) && (s = (i ? n(e, r, s) : n(s)) || s);
-  return i && s && Fb(e, r, s), s;
+  return i && s && Mb(e, r, s), s;
 };
 let os = class extends v {
   constructor() {
@@ -27002,13 +27133,13 @@ export {
   as as SbAuthenticated,
   Zi as SbButtonRenderer,
   oo as SbCheckboxRenderer,
-  z as SbConfirmField,
+  j as SbConfirmField,
   vi as SbContainer,
   uo as SbContainerRenderer,
   Wr as SbCountdown,
   Ji as SbCountdownRenderer,
   so as SbDividerRenderer,
-  j as SbEmailField,
+  D as SbEmailField,
   $t as SbError,
   lo as SbErrorRenderer,
   yt as SbForm,
@@ -27020,20 +27151,20 @@ export {
   fo as SbHeader,
   ta as SbHint,
   co as SbHtmlRenderer,
-  U as SbIdentifierField,
+  M as SbIdentifierField,
   Qi as SbImage,
   mo as SbInputRenderer,
   bo as SbLabelRenderer,
   or as SbLocationInfo,
   rs as SbLogo,
   ts as SbLogoRenderer,
-  G as SbNameField,
+  P as SbNameField,
   be as SbOtp,
   ao as SbOtpRenderer,
   ct as SbPasskeyButton,
   A as SbPasswordField,
   sr as SbPersonalInfo,
-  D as SbPhoneField,
+  U as SbPhoneField,
   lr as SbProvider,
   dt as SbProviderButton,
   wt as SbProviderField,
@@ -27046,7 +27177,7 @@ export {
   yo as SbTitle,
   nr as SbUrlsInfo,
   we as SbUserProfile,
-  P as SbUsernameField,
+  N as SbUsernameField,
   qt as SbWatermark,
   go as SbWatermarkRenderer,
   ia as SignedIn,