@tachui/primitives 0.8.34 → 0.10.0

package/dist/{Picker-CV6BRZGk.js → Picker-BN1w3R0n.js}

@@ -1,8 +1,8 @@
-import { withModifiers as A, ComponentWithCSSClasses as q, createSignal as F, useLifecycle as J, createEffect as Y, isSignal as l, ColorAsset as $, h as a, text as d, ConcatenatedComponent as z, clonePropsPreservingReactivity as N, resetLifecycleState as U, createComputed as Q } from "@tachui/core";
-import { createComponentInstance as ee } from "@tachui/core/components";
+import { withModifiers as A, ComponentWithCSSClasses as J, createSignal as z, useLifecycle as Q, createEffect as X, isSignal as l, ColorAsset as $, h as a, text as d, ConcatenatedComponent as R, clonePropsPreservingReactivity as N, resetLifecycleState as U, createComputed as ee } from "@tachui/core";
+import { createComponentInstance as te } from "@tachui/core/components";
 import { T as W } from "./Text-DmpfnY1o.js";
-var te = Object.defineProperty, ie = (i, e, t) => e in i ? te(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, y = (i, e, t) => ie(i, typeof e != "symbol" ? e + "" : e, t);
-const se = {
+var ie = Object.defineProperty, se = (s, e, t) => e in s ? ie(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, m = (s, e, t) => se(s, typeof e != "symbol" ? e + "" : e, t);
+const ne = {
   colors: {
     primary: "#007AFF",
     secondary: "#5856D6",
@@ -31,17 +31,17 @@ const se = {
     large: { size: 18, weight: "600" }
   }
 };
-class I extends q {
-  constructor(e, t = se) {
-    super(), y(this, "props", e), y(this, "type", "component"), y(this, "id"), y(this, "mounted", !1), y(this, "cleanup", []), y(this, "stateSignal"), y(this, "setState"), y(this, "theme"), this.id = `button-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.theme = t;
-    const [s, o] = F("normal");
-    this.stateSignal = s, this.setState = o, this.setupDOMEventListeners();
+class F extends J {
+  constructor(e, t = ne) {
+    super(), m(this, "props", e), m(this, "type", "component"), m(this, "id"), m(this, "mounted", !1), m(this, "cleanup", []), m(this, "stateSignal"), m(this, "setState"), m(this, "theme"), this.id = `button-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.theme = t;
+    const [i, r] = z("normal");
+    this.stateSignal = i, this.setState = r, this.setupDOMEventListeners();
   }
   /**
    * Set up DOM event listeners for button interactions
    */
   setupDOMEventListeners() {
-    J(this, {
+    Q(this, {
       onDOMReady: (e, t) => {
         t instanceof HTMLButtonElement && this.setupReactiveStyles(t);
       }
@@ -51,12 +51,12 @@ class I extends q {
    * Set up reactive style updates based on state changes
    */
   setupReactiveStyles(e) {
-    const t = Y(() => {
+    const t = X(() => {
       this.stateSignal(), this.isEnabled(), this.isLoading();
-      const { tint: s, backgroundColor: o, foregroundColor: n } = this.props;
-      s && l(s) ? s() : s instanceof $ && s.resolve(), o && l(o) ? o() : o instanceof $ && o.resolve(), n && l(n) ? n() : n instanceof $ && n.resolve();
-      const r = this.getButtonStyles();
-      this.applyStylesToElement(e, r);
+      const { tint: i, backgroundColor: r, foregroundColor: n } = this.props;
+      i && l(i) ? i() : i instanceof $ && i.resolve(), r && l(r) ? r() : r instanceof $ && r.resolve(), n && l(n) ? n() : n instanceof $ && n.resolve();
+      const o = this.getButtonStyles();
+      this.applyStylesToElement(e, o);
     });
     this.cleanup.push(() => {
       t && typeof t.dispose == "function" && t.dispose();
@@ -66,11 +66,11 @@ class I extends q {
    * Apply computed styles to the button element, respecting modifier-applied styles
    */
   applyStylesToElement(e, t) {
-    Object.entries(t).forEach(([s, o]) => {
-      const n = this.camelToKebabCase(s);
-      if (typeof o == "string" || typeof o == "number") {
-        const r = e.style.getPropertyValue(n), c = r && r !== "" && r !== "inherit";
-        process.env.NODE_ENV === "development" && n === "font-family" && (console.log("[Button.applyButtonStyles] Font-family check:"), console.log("[Button.applyButtonStyles] property:", s, "cssProperty:", n), console.log("[Button.applyButtonStyles] currentValue:", r), console.log("[Button.applyButtonStyles] hasModifierValue:", c), console.log("[Button.applyButtonStyles] will set to:", o)), n === "transform" ? e.style.setProperty(n, String(o)) : c ? process.env.NODE_ENV === "development" && n === "font-family" && console.log("[Button.applyButtonStyles] Button SKIPPED font-family (has modifier value):", r) : (e.style.setProperty(n, String(o)), process.env.NODE_ENV === "development" && n === "font-family" && (console.log("[Button.applyButtonStyles] Button SET font-family to:", String(o)), console.log("[Button.applyButtonStyles] Element after set:", e.style.fontFamily)));
+    Object.entries(t).forEach(([i, r]) => {
+      const n = this.camelToKebabCase(i);
+      if (typeof r == "string" || typeof r == "number") {
+        const o = e.style.getPropertyValue(n), c = o && o !== "" && o !== "inherit";
+        process.env.NODE_ENV === "development" && n === "font-family" && (console.log("[Button.applyButtonStyles] Font-family check:"), console.log("[Button.applyButtonStyles] property:", i, "cssProperty:", n), console.log("[Button.applyButtonStyles] currentValue:", o), console.log("[Button.applyButtonStyles] hasModifierValue:", c), console.log("[Button.applyButtonStyles] will set to:", r)), n === "transform" ? e.style.setProperty(n, String(r)) : c ? process.env.NODE_ENV === "development" && n === "font-family" && console.log("[Button.applyButtonStyles] Button SKIPPED font-family (has modifier value):", o) : (e.style.setProperty(n, String(r)), process.env.NODE_ENV === "development" && n === "font-family" && (console.log("[Button.applyButtonStyles] Button SET font-family to:", String(r)), console.log("[Button.applyButtonStyles] Element after set:", e.style.fontFamily)));
       }
     });
   }
@@ -126,20 +126,20 @@ class I extends q {
         d(this.props.title || "")
       )
     );
-    const s = ["tachui-button"];
+    const i = ["tachui-button"];
     return [{
       type: "element",
       tag: "button",
       props: {
-        className: this.createClassString(this.props, s),
+        className: this.createClassString(this.props, i),
         type: "button",
         disabled: typeof e == "boolean" ? !e : !e(),
         // Invert enabled to disabled
         onClick: this.props.action ? () => {
           try {
             this.props.action?.();
-          } catch (r) {
-            console.error("Button action error:", r);
+          } catch (o) {
+            console.error("Button action error:", o);
           }
         } : void 0,
         // Pass through debug label for debug system
@@ -166,21 +166,21 @@ class I extends q {
    */
   hasColorModifiers() {
     let e = this.modifiers;
-    return !e && this.modifierBuilder && (e = this.modifierBuilder.modifiers), !e && this.modifiableComponent && (e = this.modifiableComponent.modifiers), !e || !Array.isArray(e) ? !1 : e.some((t) => t.type === "appearance" || t.constructor?.name === "AppearanceModifier" ? t.properties && (t.properties.foregroundColor !== void 0 || t.properties.color !== void 0) : t.properties ? ["foregroundColor", "color", "textColor"].some((o) => t.properties[o] !== void 0) : !1);
+    return !e && this.modifierBuilder && (e = this.modifierBuilder.modifiers), !e && this.modifiableComponent && (e = this.modifiableComponent.modifiers), !e || !Array.isArray(e) ? !1 : e.some((t) => t.type === "appearance" || t.constructor?.name === "AppearanceModifier" ? t.properties && (t.properties.foregroundColor !== void 0 || t.properties.color !== void 0) : t.properties ? ["foregroundColor", "color", "textColor"].some((r) => t.properties[r] !== void 0) : !1);
   }
   /**
    * Check if the button has typography-related modifiers applied
    */
   hasTypographyModifiers() {
     let e = this.modifiers;
-    return !e && this.modifierBuilder && (e = this.modifierBuilder.modifiers), !e && this.modifiableComponent && (e = this.modifiableComponent.modifiers), !e || !Array.isArray(e) ? !1 : e.some((s) => s.type === "typography" || s.constructor?.name === "TypographyModifier" ? s.properties && (s.properties.transform !== void 0 || s.properties.textTransform !== void 0) : !1);
+    return !e && this.modifierBuilder && (e = this.modifierBuilder.modifiers), !e && this.modifiableComponent && (e = this.modifiableComponent.modifiers), !e || !Array.isArray(e) ? !1 : e.some((i) => i.type === "typography" || i.constructor?.name === "TypographyModifier" ? i.properties && (i.properties.transform !== void 0 || i.properties.textTransform !== void 0) : !1);
   }
   /**
    * Check if the button has a shadow modifier applied
    */
   hasShadowModifier() {
     let e = this.modifiers;
-    return !e && this.modifierBuilder && (e = this.modifierBuilder.modifiers), !e && this.modifiableComponent && (e = this.modifiableComponent.modifiers), !e || !Array.isArray(e) ? !1 : e.some((s) => s.type === "appearance" || s.type === "shadow" || s.constructor?.name === "AppearanceModifier" || s.constructor?.name === "ShadowModifier" ? s.properties && s.properties.shadow !== void 0 : !1);
+    return !e && this.modifierBuilder && (e = this.modifierBuilder.modifiers), !e && this.modifiableComponent && (e = this.modifiableComponent.modifiers), !e || !Array.isArray(e) ? !1 : e.some((i) => i.type === "appearance" || i.type === "shadow" || i.constructor?.name === "AppearanceModifier" || i.constructor?.name === "ShadowModifier" ? i.properties && i.properties.shadow !== void 0 : !1);
   }
   /**
    * Get computed button styles based on variant, size, role, and state
@@ -190,17 +190,17 @@ class I extends q {
     const {
       variant: e,
       size: t,
-      role: s = "none",
-      tint: o,
+      role: i = "none",
+      tint: r,
       backgroundColor: n,
-      foregroundColor: r
-    } = this.props, c = this.stateSignal(), u = this.isLoading(), T = this.isEnabled(), m = this.hasColorModifiers(), w = this.hasTypographyModifiers(), C = {
+      foregroundColor: o
+    } = this.props, c = this.stateSignal(), h = this.isLoading(), T = this.isEnabled(), g = this.hasColorModifiers(), v = this.hasTypographyModifiers(), w = {
       // Only set color property if no modifiers will handle it
       // This prevents conflicts between Button styles and AppearanceModifier
-      ...!m && !r && !e && { color: "inherit" },
+      ...!g && !o && !e && { color: "inherit" },
       // Only set text-related properties if no typography modifiers will handle them
       // This prevents conflicts between Button styles and TypographyModifier
-      ...!w && {
+      ...!v && {
         fontStyle: "inherit",
         lineHeight: "inherit",
         textTransform: "inherit",
@@ -215,40 +215,40 @@ class I extends q {
       // Let modifiers control: fontFamily, fontSize, fontWeight, letterSpacing, textAlign
     };
     if (t) {
-      const L = this.theme.spacing[t] || this.theme.spacing.medium, Z = this.theme.borderRadius[t] || this.theme.borderRadius.medium, H = this.theme.typography[t] || this.theme.typography.medium, K = {
+      const k = this.theme.spacing[t] || this.theme.spacing.medium, K = this.theme.borderRadius[t] || this.theme.borderRadius.medium, H = this.theme.typography[t] || this.theme.typography.medium, q = {
         small: "32px",
         medium: "40px",
         large: "48px"
       };
-      C.padding = `${L}px ${L * 2}px`, C.borderRadius = `${Z}px`, C.fontSize = `${H.size}px`, C.fontWeight = H.weight, C.minHeight = K[t];
+      w.padding = `${k}px ${k * 2}px`, w.borderRadius = `${K}px`, w.fontSize = `${H.size}px`, w.fontWeight = H.weight, w.minHeight = q[t];
     }
-    let b = "transparent", v = "transparent", _ = "1px", k;
-    const X = this.resolveColorValue(o), D = this.resolveColorValue(n), E = this.resolveColorValue(r);
+    let f = "transparent", S = "transparent", _ = "1px", C;
+    const Z = this.resolveColorValue(r), D = this.resolveColorValue(n), E = this.resolveColorValue(o);
     if (e) {
-      const L = X || this.theme.colors.primary;
+      const k = Z || this.theme.colors.primary;
       switch (e) {
         case "filled":
-          s === "destructive" ? b = this.theme.colors.destructive : s === "cancel" ? b = this.theme.colors.secondary : b = L, k = this.theme.colors.onPrimary;
+          i === "destructive" ? f = this.theme.colors.destructive : i === "cancel" ? f = this.theme.colors.secondary : f = k, C = this.theme.colors.onPrimary;
           break;
         case "outlined":
-          v = s === "destructive" ? this.theme.colors.destructive : L, k = s === "destructive" ? this.theme.colors.destructive : L;
+          S = i === "destructive" ? this.theme.colors.destructive : k, C = i === "destructive" ? this.theme.colors.destructive : k;
           break;
         case "bordered":
-          b = this.theme.colors.background, v = this.theme.colors.border;
+          f = this.theme.colors.background, S = this.theme.colors.border;
           break;
         case "borderedProminent":
-          b = this.theme.colors.surface, v = this.theme.colors.primary, _ = "2px";
+          f = this.theme.colors.surface, S = this.theme.colors.primary, _ = "2px";
           break;
       }
     }
-    D && (b = D), E && (k = E);
-    let B = "1", O = "auto", M, V = "none";
-    T ? u ? (B = "0.6", O = "none") : c === "pressed" ? (b = this.darkenColor(b, 0.1), v = this.darkenColor(v, 0.1), M = "scale(0.95)") : c === "focused" && (V = "0 0 0 3px #007AFF40") : (b = this.theme.colors.disabled, v = this.theme.colors.disabled, k = this.theme.colors.disabled, B = "0.6", O = "none");
+    D && (f = D), E && (C = E);
+    let P = "1", I = "auto", B, V = "none";
+    T ? h ? (P = "0.6", I = "none") : c === "pressed" ? (f = this.darkenColor(f, 0.1), S = this.darkenColor(S, 0.1), B = "scale(0.95)") : c === "focused" && (V = "0 0 0 3px #007AFF40") : (f = this.theme.colors.disabled, S = this.theme.colors.disabled, C = this.theme.colors.disabled, P = "0.6", I = "none");
     const p = {
-      ...C
+      ...w
       // Size-based styles (only if size provided)
     };
-    return e && (p.backgroundColor = b, p.borderColor = v, p.borderWidth = _, k !== void 0 && (p.color = k)), D && (p.backgroundColor = D), E && (p.color = E), p.cursor = T ? "pointer" : "not-allowed", p.opacity = B, p.pointerEvents = O, p.transform = M !== void 0 ? M : "none", this.hasShadowModifier() || (p.boxShadow = V), p.transition = "all 0.2s ease", p;
+    return e && (p.backgroundColor = f, p.borderColor = S, p.borderWidth = _, C !== void 0 && (p.color = C)), D && (p.backgroundColor = D), E && (p.color = E), p.cursor = T ? "pointer" : "not-allowed", p.opacity = P, p.pointerEvents = I, p.transform = B !== void 0 ? B : "none", this.hasShadowModifier() || (p.boxShadow = V), p.transition = "all 0.2s ease", p;
   }
   /**
    * Handle button press with proper state management
@@ -279,8 +279,8 @@ class I extends q {
   darkenColor(e, t) {
     if (e === "transparent") return e;
     if (e.startsWith("#")) {
-      const s = e.slice(1), o = parseInt(s, 16), n = Math.max(0, Math.floor((o >> 16) * (1 - t))), r = Math.max(0, Math.floor((o >> 8 & 255) * (1 - t))), c = Math.max(0, Math.floor((o & 255) * (1 - t)));
-      return `#${(n << 16 | r << 8 | c).toString(16).padStart(6, "0")}`;
+      const i = e.slice(1), r = parseInt(i, 16), n = Math.max(0, Math.floor((r >> 16) * (1 - t))), o = Math.max(0, Math.floor((r >> 8 & 255) * (1 - t))), c = Math.max(0, Math.floor((r & 255) * (1 - t)));
+      return `#${(n << 16 | o << 8 | c).toString(16).padStart(6, "0")}`;
     }
     return e;
   }
@@ -291,16 +291,16 @@ class I extends q {
    * Concatenate this button with another concatenatable component
    */
   concat(e) {
-    const t = this.toSegment(), s = e.toSegment(), o = {
-      totalSegments: e instanceof z ? e.segments.length + 1 : 2,
-      accessibilityRole: e instanceof z ? this.mergeAccessibilityRoles(
+    const t = this.toSegment(), i = e.toSegment(), r = {
+      totalSegments: e instanceof R ? e.segments.length + 1 : 2,
+      accessibilityRole: e instanceof R ? this.mergeAccessibilityRoles(
         "composite",
         e.metadata.accessibilityRole
       ) : this.determineAccessibilityRole(e),
       semanticStructure: "inline"
       // Buttons are typically inline in concatenation
     };
-    return new z([t, s], o);
+    return new R([t, i], r);
   }
   /**
    * Convert this button to a segment for concatenation
@@ -352,13 +352,13 @@ class I extends q {
     return e.deep ? this.deepClone() : this.shallowClone();
   }
   shallowClone() {
-    const e = N(this.props), t = new I(e, this.theme);
+    const e = N(this.props), t = new F(e, this.theme);
     return this.syncStateToClone(t), U(t), t;
   }
   deepClone() {
     const e = N(this.props, {
       deep: !0
-    }), t = new I(e, this.theme);
+    }), t = new F(e, this.theme);
     return this.syncStateToClone(t), U(t), t;
   }
   syncStateToClone(e) {
@@ -370,53 +370,59 @@ class I extends q {
     }
   }
 }
-function h(i, e, t = {}) {
-  const s = typeof e == "function" ? e : void 0, n = {
+function G(s, e, t = {}) {
+  const i = typeof e == "function" ? e : void 0, n = {
     ...e != null && typeof e != "function" ? e : t,
-    title: i,
-    ...s && { action: s }
-  }, r = ee(I, n);
-  return A(r);
+    title: s,
+    ...i && { action: i }
+  }, o = te(F, n);
+  return A(o);
 }
-const ge = {
+function L(s) {
+  return (t, i, r = {}) => i == null || typeof i == "function" ? G(t, i, {
+    ...r,
+    ...s
+  }) : G(t, { ...i, ...s });
+}
+const me = {
   /**
    * Filled button (primary)
    */
-  Filled: (i, e, t = {}) => e == null || typeof e == "function" ? h(i, e, { ...t, variant: "filled" }) : h(i, { ...e ?? {}, variant: "filled" }),
+  Filled: L({ variant: "filled" }),
   /**
    * Outlined button
    */
-  Outlined: (i, e, t = {}) => e == null || typeof e == "function" ? h(i, e, { ...t, variant: "outlined" }) : h(i, { ...e ?? {}, variant: "outlined" }),
+  Outlined: L({ variant: "outlined" }),
   /**
    * Plain button (text only)
    */
-  Plain: (i, e, t = {}) => e == null || typeof e == "function" ? h(i, e, { ...t, variant: "plain" }) : h(i, { ...e ?? {}, variant: "plain" }),
+  Plain: L({ variant: "plain" }),
   /**
    * Bordered button
    */
-  Bordered: (i, e, t = {}) => e == null || typeof e == "function" ? h(i, e, { ...t, variant: "bordered" }) : h(i, { ...e ?? {}, variant: "bordered" }),
+  Bordered: L({ variant: "bordered" }),
   /**
    * Destructive button
    */
-  Destructive: (i, e, t = {}) => e == null || typeof e == "function" ? h(i, e, { ...t, role: "destructive" }) : h(i, { ...e ?? {}, role: "destructive" }),
+  Destructive: L({ role: "destructive" }),
   /**
    * Cancel button
    */
-  Cancel: (i, e, t = {}) => e == null || typeof e == "function" ? h(i, e, { ...t, role: "cancel" }) : h(i, { ...e ?? {}, role: "cancel" })
-}, ne = `
+  Cancel: L({ role: "cancel" })
+}, re = `
 @keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
 `;
 if (typeof document < "u") {
-  const i = document.createElement("style");
-  i.textContent = ne, document.head.appendChild(i);
+  const s = document.createElement("style");
+  s.textContent = re, document.head.appendChild(s);
 }
-var oe = Object.defineProperty, re = (i, e, t) => e in i ? oe(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, P = (i, e, t) => re(i, typeof e != "symbol" ? e + "" : e, t);
-class G {
+var oe = Object.defineProperty, ae = (s, e, t) => e in s ? oe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, M = (s, e, t) => ae(s, typeof e != "symbol" ? e + "" : e, t);
+class j {
   constructor(e) {
-    P(this, "type", "component"), P(this, "id"), P(this, "props"), this.props = e, this.id = `enhanced-link-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    M(this, "type", "component"), M(this, "id"), M(this, "props"), this.props = e, this.id = `enhanced-link-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   }
   resolveValue(e) {
     return l(e) ? e() : e;
@@ -429,14 +435,14 @@ class G {
     const e = this.resolveValue(this.props.target);
     if (e)
       return e;
-    const t = this.resolveValue(this.props.destination), s = t instanceof URL ? t.toString() : t;
-    return this.isExternalURL(s) ? "_blank" : "_self";
+    const t = this.resolveValue(this.props.destination), i = t instanceof URL ? t.toString() : t;
+    return this.isExternalURL(i) ? "_blank" : "_self";
   }
   getRoutingMode() {
     return this.resolveValue(this.props.routingMode) || "auto";
   }
   getRel() {
-    const e = this.resolveValue(this.props.rel), t = this.getTarget(), s = this.getDestination(), n = this.isExternalURL(s) && t === "_blank" ? "noopener noreferrer" : "";
+    const e = this.resolveValue(this.props.rel), t = this.getTarget(), i = this.getDestination(), n = this.isExternalURL(i) && t === "_blank" ? "noopener noreferrer" : "";
     return e && n ? `${e} ${n}`.trim() : e || n;
   }
   getDownload() {
@@ -482,7 +488,7 @@ class G {
       } catch (n) {
         throw console.error("Link onBeforeNavigation error:", n), n;
       }
-    const s = this.getTarget(), o = this.getRoutingMode();
+    const i = this.getTarget(), r = this.getRoutingMode();
     if (this.shouldUseInternalRouting(t)) {
       if (this.props.onInternalNavigation)
         try {
@@ -491,9 +497,9 @@ class G {
         } catch (n) {
           console.error("Link onInternalNavigation error:", n);
         }
-      o === "spa" ? this.handleSPANavigation(t) : s === "_blank" ? window.open(t, s) : window.location.href = t;
+      r === "spa" ? this.handleSPANavigation(t) : i === "_blank" ? window.open(t, i) : window.location.href = t;
     } else
-      s === "_blank" || s === "_top" || s === "_parent" ? window.open(t, s) : window.location.href = t;
+      i === "_blank" || i === "_top" || i === "_parent" ? window.open(t, i) : window.location.href = t;
   }
   handleSPANavigation(e) {
     typeof window < "u" && window.history && window.history.pushState ? (window.history.pushState(null, "", e), window.dispatchEvent(new PopStateEvent("popstate"))) : window.location.href = e;
@@ -513,9 +519,9 @@ class G {
     if (this.props.children)
       return this.renderChildren();
     let e;
-    this.props.text ? e = this.props.text : l(this.props.destination) ? e = Q(() => this.getDestination()) : e = this.getDestination();
-    const s = W(e).render();
-    return Array.isArray(s) ? s : [s];
+    this.props.text ? e = this.props.text : l(this.props.destination) ? e = ee(() => this.getDestination()) : e = this.getDestination();
+    const i = W(e).render();
+    return Array.isArray(i) ? i : [i];
   }
   renderChildren() {
     const { children: e } = this.props;
@@ -523,43 +529,43 @@ class G {
   }
   renderChild(e) {
     if (typeof e == "string") {
-      const s = W(e).render();
-      return Array.isArray(s) ? s : [s];
+      const i = W(e).render();
+      return Array.isArray(i) ? i : [i];
     } else {
       const t = e.render();
       return Array.isArray(t) ? t : [t];
     }
   }
   render() {
-    const e = this.renderContent(), t = this.isDisabled(), s = {
+    const e = this.renderContent(), t = this.isDisabled(), i = {
       id: this.id,
       "data-component": "enhanced-link"
     };
-    l(this.props.destination) ? s.href = () => this.getDestination() : s.href = this.getDestination(), this.props.target && (l(this.props.target) ? s.target = () => this.getTarget() : s.target = this.getTarget());
-    const o = this.getRel();
-    o && (l(this.props.rel) || l(this.props.target) ? s.rel = () => this.getRel() : s.rel = o);
+    l(this.props.destination) ? i.href = () => this.getDestination() : i.href = this.getDestination(), this.props.target && (l(this.props.target) ? i.target = () => this.getTarget() : i.target = this.getTarget());
+    const r = this.getRel();
+    r && (l(this.props.rel) || l(this.props.target) ? i.rel = () => this.getRel() : i.rel = r);
     const n = this.getDownload();
-    n !== void 0 && (l(this.props.download) ? s.download = () => this.getDownload() : n === !0 ? s.download = !0 : typeof n == "string" && (s.download = n));
-    const r = this.getAccessibilityLabel();
-    r && (l(this.props.accessibilityLabel) ? s["aria-label"] = () => this.getAccessibilityLabel() : s["aria-label"] = r);
+    n !== void 0 && (l(this.props.download) ? i.download = () => this.getDownload() : n === !0 ? i.download = !0 : typeof n == "string" && (i.download = n));
+    const o = this.getAccessibilityLabel();
+    o && (l(this.props.accessibilityLabel) ? i["aria-label"] = () => this.getAccessibilityLabel() : i["aria-label"] = o);
     const c = this.getAccessibilityHint();
-    c && (l(this.props.accessibilityHint) ? s["aria-describedby"] = () => this.getAccessibilityHint() : s["aria-describedby"] = c);
-    const u = this.getAccessibilityRole();
-    return u && (l(this.props.accessibilityRole) ? s.role = () => this.getAccessibilityRole() : s.role = u), t && (s["aria-disabled"] = "true", s.tabindex = "-1"), s.onclick = (m) => this.handleClick(m), s.style = {
+    c && (l(this.props.accessibilityHint) ? i["aria-describedby"] = () => this.getAccessibilityHint() : i["aria-describedby"] = c);
+    const h = this.getAccessibilityRole();
+    return h && (l(this.props.accessibilityRole) ? i.role = () => this.getAccessibilityRole() : i.role = h), t && (i["aria-disabled"] = "true", i.tabindex = "-1"), i.onclick = (g) => this.handleClick(g), i.style = {
       textDecoration: "none",
       color: "inherit",
       cursor: t ? "not-allowed" : "pointer",
       opacity: t ? 0.6 : 1
-    }, a("a", s, ...e);
+    }, a("a", i, ...e);
   }
   // Concatenation support
   concat(e) {
-    const t = this.toSegment(), s = e.toSegment(), o = {
+    const t = this.toSegment(), i = e.toSegment(), r = {
       totalSegments: 2,
       accessibilityRole: "composite",
       semanticStructure: "inline"
     };
-    return new z([t, s], o);
+    return new R([t, i], r);
   }
   toSegment() {
     return {
@@ -573,24 +579,24 @@ class G {
     return !0;
   }
 }
-function me(i, e) {
+function ye(s, e) {
   if (e !== void 0) {
-    const o = {
-      text: i,
+    const r = {
+      text: s,
       destination: e
-    }, n = new G(o);
+    }, n = new j(r);
     return A(n);
   }
-  const t = i, s = new G(t);
-  return A(s);
+  const t = s, i = new j(t);
+  return A(i);
 }
 const x = {
   /**
    * Create an external link that opens in a new tab
    */
-  external(i, e, t = {}) {
+  external(s, e, t = {}) {
     return {
-      destination: i,
+      destination: s,
       children: e,
       target: "_blank",
       routingMode: "external",
@@ -602,9 +608,9 @@ const x = {
   /**
    * Create an internal link for same-domain navigation
    */
-  internal(i, e, t = {}) {
+  internal(s, e, t = {}) {
     return {
-      destination: i,
+      destination: s,
       children: e,
       routingMode: "internal",
       target: "_self",
@@ -614,9 +620,9 @@ const x = {
   /**
    * Create a SPA link using History API
    */
-  spa(i, e, t = {}) {
+  spa(s, e, t = {}) {
     return {
-      destination: i,
+      destination: s,
       children: e,
       routingMode: "spa",
       target: "_self",
@@ -627,33 +633,33 @@ const x = {
   /**
    * Create an email link with optional subject and body
    */
-  email(i, e, t, s) {
-    let o = `mailto:${i}`;
+  email(s, e, t, i) {
+    let r = `mailto:${s}`;
     const n = new URLSearchParams();
-    return e && n.append("subject", e), t && n.append("body", t), n.toString() && (o += `?${n.toString()}`), {
-      destination: o,
-      children: s || i,
-      accessibilityLabel: `Send email to ${i}`,
+    return e && n.append("subject", e), t && n.append("body", t), n.toString() && (r += `?${n.toString()}`), {
+      destination: r,
+      children: i || s,
+      accessibilityLabel: `Send email to ${s}`,
       accessibilityHint: "Opens your email app"
     };
   },
   /**
    * Create a phone link with formatted display
    */
-  phone(i, e) {
+  phone(s, e) {
     return {
-      destination: `tel:${i.replace(/[^\d+]/g, "")}`,
-      children: e || i,
-      accessibilityLabel: `Call ${i}`,
+      destination: `tel:${s.replace(/[^\d+]/g, "")}`,
+      children: e || s,
+      accessibilityLabel: `Call ${s}`,
       accessibilityHint: "Opens your phone app"
     };
   },
   /**
    * Create a download link
    */
-  download(i, e, t) {
+  download(s, e, t) {
     return {
-      destination: i,
+      destination: s,
       children: t || `Download ${e || "file"}`,
       download: e || !0,
       accessibilityLabel: `Download ${e || "file"}`,
@@ -664,39 +670,39 @@ const x = {
    * Social media link utilities
    */
   social: {
-    twitter(i, e) {
+    twitter(s, e) {
       return x.external(
-        `https://twitter.com/${i}`,
-        e || `@${i}`,
-        { accessibilityLabel: `Visit ${i} on Twitter` }
+        `https://twitter.com/${s}`,
+        e || `@${s}`,
+        { accessibilityLabel: `Visit ${s} on Twitter` }
       );
     },
-    github(i, e) {
+    github(s, e) {
       return x.external(
-        `https://github.com/${i}`,
-        e || i,
-        { accessibilityLabel: `Visit ${i} on GitHub` }
+        `https://github.com/${s}`,
+        e || s,
+        { accessibilityLabel: `Visit ${s} on GitHub` }
       );
     },
-    linkedin(i, e) {
+    linkedin(s, e) {
       return x.external(
-        `https://linkedin.com/in/${i}`,
-        e || i,
-        { accessibilityLabel: `Visit ${i} on LinkedIn` }
+        `https://linkedin.com/in/${s}`,
+        e || s,
+        { accessibilityLabel: `Visit ${s} on LinkedIn` }
       );
     },
-    instagram(i, e) {
+    instagram(s, e) {
       return x.external(
-        `https://instagram.com/${i}`,
-        e || `@${i}`,
-        { accessibilityLabel: `Visit ${i} on Instagram` }
+        `https://instagram.com/${s}`,
+        e || `@${s}`,
+        { accessibilityLabel: `Visit ${s} on Instagram` }
       );
     },
-    facebook(i, e) {
+    facebook(s, e) {
       return x.external(
-        `https://facebook.com/${i}`,
-        e || i,
-        { accessibilityLabel: `Visit ${i} on Facebook` }
+        `https://facebook.com/${s}`,
+        e || s,
+        { accessibilityLabel: `Visit ${s} on Facebook` }
       );
     }
   },
@@ -704,9 +710,9 @@ const x = {
    * App store link utilities
    */
   appStore: {
-    ios(i, e) {
+    ios(s, e) {
       return x.external(
-        `https://apps.apple.com/app/id${i}`,
+        `https://apps.apple.com/app/id${s}`,
         e || "Download from App Store",
         {
           accessibilityLabel: "Download from the iOS App Store",
@@ -714,9 +720,9 @@ const x = {
         }
       );
     },
-    android(i, e) {
+    android(s, e) {
       return x.external(
-        `https://play.google.com/store/apps/details?id=${i}`,
+        `https://play.google.com/store/apps/details?id=${s}`,
         e || "Get it on Google Play",
         {
           accessibilityLabel: "Download from Google Play Store",
@@ -728,24 +734,24 @@ const x = {
   /**
    * Create a custom OpenURL action
    */
-  openURLAction(i) {
-    return (e) => i(e) ? "handled" : "systemAction";
+  openURLAction(s) {
+    return (e) => s(e) ? "handled" : "systemAction";
   }
 };
-var ae = Object.defineProperty, le = (i, e, t) => e in i ? ae(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, S = (i, e, t) => le(i, typeof e != "symbol" ? e + "" : e, t);
-class ce {
+var le = Object.defineProperty, ce = (s, e, t) => e in s ? le(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, y = (s, e, t) => ce(s, typeof e != "symbol" ? e + "" : e, t);
+class de {
   constructor(e) {
-    S(this, "props", e), S(this, "type", "component"), S(this, "id"), S(this, "mounted", !1), S(this, "cleanup", []), S(this, "toggleElement", null), S(this, "setIsAnimating"), S(this, "handleToggle", async (s) => {
-      if (s.preventDefault(), this.isDisabled()) return;
-      const o = !this.getIsOn();
+    y(this, "props", e), y(this, "type", "component"), y(this, "id"), y(this, "mounted", !1), y(this, "cleanup", []), y(this, "toggleElement", null), y(this, "setIsAnimating"), y(this, "handleToggle", async (i) => {
+      if (i.preventDefault(), this.isDisabled()) return;
+      const r = !this.getIsOn();
       this.props.animated !== !1 && (this.setIsAnimating(!0), setTimeout(() => {
         this.setIsAnimating(!1);
-      }, 200)), this.props.onToggle && this.props.onToggle(o);
+      }, 200)), this.props.onToggle && this.props.onToggle(r);
     }), this.id = `toggle-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const [, t] = F(!1);
-    this.setIsAnimating = t, Y(() => {
-      const s = this.getIsOn();
-      this.toggleElement && this.toggleElement.checked !== s && (this.toggleElement.checked = s);
+    const [, t] = z(!1);
+    this.setIsAnimating = t, X(() => {
+      const i = this.getIsOn();
+      this.toggleElement && this.toggleElement.checked !== i && (this.toggleElement.checked = i);
     });
   }
   /**
@@ -843,12 +849,12 @@ class ce {
    * Render switch variant
    */
   renderSwitch() {
-    const e = this.getIsOn(), t = this.isDisabled(), s = this.getSizeStyles(), {
-      color: o = "#007AFF",
+    const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), {
+      color: r = "#007AFF",
       offColor: n = "#e2e8f0",
-      thumbColor: r = "#ffffff",
+      thumbColor: o = "#ffffff",
       animated: c = !0
-    } = this.props, u = e ? o : n, T = e ? `translateX(${parseInt(s.width) - parseInt(s.thumbSize) - 2}px)` : "translateX(2px)", m = this.getInputAccessibilityProps();
+    } = this.props, h = e ? r : n, T = e ? `translateX(${parseInt(i.width) - parseInt(i.thumbSize) - 2}px)` : "translateX(2px)", g = this.getInputAccessibilityProps();
     return a(
       "div",
       {
@@ -859,13 +865,13 @@ class ce {
       },
       // Hidden input for form integration
       a("input", {
-        ref: (w) => {
-          this.toggleElement = w, w && !this.mounted && (w.addEventListener("change", this.handleToggle), this.cleanup.push(() => {
-            w.removeEventListener("change", this.handleToggle);
+        ref: (v) => {
+          this.toggleElement = v, v && !this.mounted && (v.addEventListener("change", this.handleToggle), this.cleanup.push(() => {
+            v.removeEventListener("change", this.handleToggle);
           }));
         },
         type: "checkbox",
-        id: m.id,
+        id: g.id,
         checked: e,
         disabled: t,
         style: {
@@ -876,19 +882,19 @@ class ce {
           margin: 0,
           cursor: t ? "not-allowed" : "pointer"
         },
-        "aria-label": m["aria-label"],
-        "aria-labelledby": m["aria-labelledby"],
-        "aria-describedby": m["aria-describedby"]
+        "aria-label": g["aria-label"],
+        "aria-labelledby": g["aria-labelledby"],
+        "aria-describedby": g["aria-describedby"]
       }),
       // Switch track
       a(
         "div",
         {
           style: {
-            width: s.width,
-            height: s.height,
-            backgroundColor: u,
-            borderRadius: s.height,
+            width: i.width,
+            height: i.height,
+            backgroundColor: h,
+            borderRadius: i.height,
             position: "relative",
             cursor: t ? "not-allowed" : "pointer",
             opacity: t ? 0.5 : 1,
@@ -900,9 +906,9 @@ class ce {
         // Switch thumb
         a("div", {
           style: {
-            width: s.thumbSize,
-            height: s.thumbSize,
-            backgroundColor: r,
+            width: i.thumbSize,
+            height: i.thumbSize,
+            backgroundColor: o,
             borderRadius: "50%",
             position: "absolute",
             top: "50%",
@@ -919,7 +925,7 @@ class ce {
    * Render checkbox variant
    */
   renderCheckbox() {
-    const e = this.getIsOn(), t = this.isDisabled(), s = this.getSizeStyles(), { color: o = "#007AFF" } = this.props, n = this.getInputAccessibilityProps();
+    const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), { color: r = "#007AFF" } = this.props, n = this.getInputAccessibilityProps();
     return a(
       "div",
       {
@@ -930,9 +936,9 @@ class ce {
       },
       // Hidden input
       a("input", {
-        ref: (r) => {
-          this.toggleElement = r, r && !this.mounted && (r.addEventListener("change", this.handleToggle), this.cleanup.push(() => {
-            r.removeEventListener("change", this.handleToggle);
+        ref: (o) => {
+          this.toggleElement = o, o && !this.mounted && (o.addEventListener("change", this.handleToggle), this.cleanup.push(() => {
+            o.removeEventListener("change", this.handleToggle);
           }));
         },
         type: "checkbox",
@@ -956,11 +962,11 @@ class ce {
         "div",
         {
           style: {
-            width: s.thumbSize,
-            height: s.thumbSize,
-            border: `2px solid ${e ? o : "#d1d5db"}`,
+            width: i.thumbSize,
+            height: i.thumbSize,
+            border: `2px solid ${e ? r : "#d1d5db"}`,
             borderRadius: "4px",
-            backgroundColor: e ? o : "#ffffff",
+            backgroundColor: e ? r : "#ffffff",
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
@@ -991,24 +997,24 @@ class ce {
    * Render button variant
    */
   renderButton() {
-    const e = this.getIsOn(), t = this.isDisabled(), s = this.getSizeStyles(), { color: o = "#007AFF", offColor: n = "#f3f4f6" } = this.props;
+    const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), { color: r = "#007AFF", offColor: n = "#f3f4f6" } = this.props;
     return a(
       "button",
       {
-        ref: (r) => {
-          r && !this.mounted && (r.addEventListener("click", this.handleToggle), this.cleanup.push(() => {
-            r.removeEventListener("click", this.handleToggle);
+        ref: (o) => {
+          o && !this.mounted && (o.addEventListener("click", this.handleToggle), this.cleanup.push(() => {
+            o.removeEventListener("click", this.handleToggle);
           }));
         },
         type: "button",
         disabled: t,
         style: {
           padding: "8px 16px",
-          backgroundColor: e ? o : n,
+          backgroundColor: e ? r : n,
           color: e ? "#ffffff" : "#374151",
-          border: `1px solid ${e ? o : "#d1d5db"}`,
+          border: `1px solid ${e ? r : "#d1d5db"}`,
           borderRadius: "6px",
-          fontSize: s.fontSize,
+          fontSize: i.fontSize,
           fontWeight: "500",
           cursor: t ? "not-allowed" : "pointer",
           opacity: t ? 0.5 : 1,
@@ -1041,13 +1047,13 @@ class ce {
   renderLabel(e = !1) {
     const t = this.resolveLabel();
     if (!t) return null;
-    const s = this.getSizeStyles();
+    const i = this.getSizeStyles();
     return a(
       "span",
       {
         id: this.getLabelId(),
         style: {
-          fontSize: s.fontSize,
+          fontSize: i.fontSize,
           color: this.isDisabled() ? "#9ca3af" : "#374151",
           cursor: this.isDisabled() ? "not-allowed" : "pointer"
         },
@@ -1060,15 +1066,15 @@ class ce {
     const {
       variant: e = "switch",
       labelPosition: t = "trailing",
-      spacing: s = 8,
-      accessibilityHint: o
-    } = this.props, n = this.renderLabel(e === "button"), r = this.renderToggleControl(), c = t === "leading" && n ? [n, r] : n ? [r, n] : [r], u = e === "button" ? a(
+      spacing: i = 8,
+      accessibilityHint: r
+    } = this.props, n = this.renderLabel(e === "button"), o = this.renderToggleControl(), c = t === "leading" && n ? [n, o] : n ? [o, n] : [o], h = e === "button" ? a(
       "div",
       {
         style: {
           display: "flex",
           alignItems: "center",
-          gap: n ? `${s}px` : "0",
+          gap: n ? `${i}px` : "0",
           cursor: this.isDisabled() ? "not-allowed" : "pointer"
         }
       },
@@ -1080,7 +1086,7 @@ class ce {
         style: {
           display: "flex",
           alignItems: "center",
-          gap: n ? `${s}px` : "0",
+          gap: n ? `${i}px` : "0",
           cursor: this.isDisabled() ? "not-allowed" : "pointer"
         }
       },
@@ -1089,10 +1095,10 @@ class ce {
     return a(
       "div",
       {
-        "aria-describedby": o ? `${this.id}-hint` : void 0
+        "aria-describedby": r ? `${this.id}-hint` : void 0
       },
-      u,
-      ...o ? [
+      h,
+      ...r ? [
         a(
           "div",
           {
@@ -1105,75 +1111,75 @@ class ce {
               width: "100%"
             }
           },
-          d(o)
+          d(r)
         )
       ] : []
     );
   }
 }
-function g(i, e = {}) {
-  const t = { ...e, isOn: i }, s = new ce(t);
-  return A(s);
+function b(s, e = {}) {
+  const t = { ...e, isOn: s }, i = new de(t);
+  return A(i);
 }
-function j(i, e, t = {}) {
-  return g(e, { ...t, label: i });
+function Y(s, e, t = {}) {
+  return b(e, { ...t, label: s });
 }
-const ye = {
+const Se = {
   /**
    * Switch toggle (default)
    */
-  Switch(i, e = {}) {
-    return g(i, { ...e, variant: "switch" });
+  Switch(s, e = {}) {
+    return b(s, { ...e, variant: "switch" });
   },
   /**
    * Checkbox toggle
    */
-  Checkbox(i, e = {}) {
-    return g(i, { ...e, variant: "checkbox" });
+  Checkbox(s, e = {}) {
+    return b(s, { ...e, variant: "checkbox" });
   },
   /**
    * Button toggle
    */
-  Button(i, e = {}) {
-    return g(i, { ...e, variant: "button" });
+  Button(s, e = {}) {
+    return b(s, { ...e, variant: "button" });
   },
   /**
    * Small toggle
    */
-  Small(i, e = {}) {
-    return g(i, { ...e, size: "small" });
+  Small(s, e = {}) {
+    return b(s, { ...e, size: "small" });
   },
   /**
    * Large toggle
    */
-  Large(i, e = {}) {
-    return g(i, { ...e, size: "large" });
+  Large(s, e = {}) {
+    return b(s, { ...e, size: "large" });
   },
   /**
    * Custom color toggle
    */
-  CustomColor(i, e, t = {}) {
-    return g(i, { ...t, color: e });
+  CustomColor(s, e, t = {}) {
+    return b(s, { ...t, color: e });
   },
   /**
    * Toggle with leading label
    */
-  WithLeadingLabel(i, e, t = {}) {
-    return g(e, { ...t, label: i, labelPosition: "leading" });
+  WithLeadingLabel(s, e, t = {}) {
+    return b(e, { ...t, label: s, labelPosition: "leading" });
   },
   /**
    * Toggle with trailing label (default)
    */
-  WithTrailingLabel(i, e, t = {}) {
-    return g(e, { ...t, label: i, labelPosition: "trailing" });
+  WithTrailingLabel(s, e, t = {}) {
+    return b(e, { ...t, label: s, labelPosition: "trailing" });
   }
-}, Se = {
+}, xe = {
   /**
    * Create a toggle group with multiple options
    */
-  createGroup(i, e = {}) {
-    return i.map(
-      (t) => j(t.label, t.isOn, {
+  createGroup(s, e = {}) {
+    return s.map(
+      (t) => Y(t.label, t.isOn, {
         ...e,
         onToggle: t.onToggle
       })
@@ -1182,13 +1188,13 @@ const ye = {
   /**
    * Create exclusive toggle group (radio-like behavior)
    */
-  createExclusiveGroup(i, e, t, s = {}) {
-    const o = () => l(e) ? e() : e;
-    return i.map(
-      (n) => j(n.label, o() === n.key, {
-        ...s,
-        onToggle: (r) => {
-          r && t && t(n.key);
+  createExclusiveGroup(s, e, t, i = {}) {
+    const r = () => l(e) ? e() : e;
+    return s.map(
+      (n) => Y(n.label, r() === n.key, {
+        ...i,
+        onToggle: (o) => {
+          o && t && t(n.key);
         }
       })
     );
@@ -1200,47 +1206,47 @@ const ye = {
     /**
      * Toggle all items in a group
      */
-    toggleAll(i, e) {
-      i.forEach((t) => {
+    toggleAll(s, e) {
+      s.forEach((t) => {
         t.onToggle && t.onToggle(e);
       });
     },
     /**
      * Get state of all toggles in a group
      */
-    getStates(i) {
-      return i.map((e) => l(e.isOn) ? e.isOn() : e.isOn);
+    getStates(s) {
+      return s.map((e) => l(e.isOn) ? e.isOn() : e.isOn);
     },
     /**
      * Check if all toggles are on
      */
-    allOn(i) {
-      return this.getStates(i).every((e) => e);
+    allOn(s) {
+      return this.getStates(s).every((e) => e);
     },
     /**
      * Check if any toggle is on
      */
-    anyOn(i) {
-      return this.getStates(i).some((e) => e);
+    anyOn(s) {
+      return this.getStates(s).some((e) => e);
     }
   }
 };
-var de = Object.defineProperty, pe = (i, e, t) => e in i ? de(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, f = (i, e, t) => pe(i, typeof e != "symbol" ? e + "" : e, t);
-class he {
+var pe = Object.defineProperty, he = (s, e, t) => e in s ? pe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, u = (s, e, t) => he(s, typeof e != "symbol" ? e + "" : e, t);
+class ue {
   constructor(e) {
-    f(this, "props", e), f(this, "type", "component"), f(this, "id"), f(this, "mounted", !1), f(this, "cleanup", []), f(this, "isOpen"), f(this, "setIsOpen"), f(this, "searchTerm"), f(this, "setSearchTerm"), f(this, "handleSelection", (r) => {
-      this.props.onSelectionChange && this.props.onSelectionChange(r), (this.props.variant === "dropdown" || this.props.variant === "menu") && this.setIsOpen(!1), this.setSearchTerm("");
-    }), f(this, "toggleOpen", () => {
+    u(this, "props", e), u(this, "type", "component"), u(this, "id"), u(this, "mounted", !1), u(this, "cleanup", []), u(this, "isOpen"), u(this, "setIsOpen"), u(this, "searchTerm"), u(this, "setSearchTerm"), u(this, "handleSelection", (o) => {
+      this.props.onSelectionChange && this.props.onSelectionChange(o), (this.props.variant === "dropdown" || this.props.variant === "menu") && this.setIsOpen(!1), this.setSearchTerm("");
+    }), u(this, "toggleOpen", () => {
       this.isDisabled() || this.setIsOpen(!this.isOpen());
     }), this.id = `picker-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const [t, s] = F(!1), [o, n] = F("");
-    if (this.isOpen = t, this.setIsOpen = s, this.searchTerm = o, this.setSearchTerm = n, typeof window < "u") {
-      const r = (c) => {
-        const u = document.getElementById(this.id);
-        u && !u.contains(c.target) && this.setIsOpen(!1);
+    const [t, i] = z(!1), [r, n] = z("");
+    if (this.isOpen = t, this.setIsOpen = i, this.searchTerm = r, this.setSearchTerm = n, typeof window < "u") {
+      const o = (c) => {
+        const h = document.getElementById(this.id);
+        h && !h.contains(c.target) && this.setIsOpen(!1);
       };
-      document.addEventListener("click", r), this.cleanup.push(() => {
-        document.removeEventListener("click", r);
+      document.addEventListener("click", o), this.cleanup.push(() => {
+        document.removeEventListener("click", o);
       });
     }
   }
@@ -1264,7 +1270,7 @@ class he {
   getFilteredOptions() {
     const e = this.getOptions(), t = this.searchTerm().toLowerCase();
     return !t || !this.props.searchable ? e : e.filter(
-      (s) => s.label.toLowerCase().includes(t) || s.description?.toLowerCase().includes(t)
+      (i) => i.label.toLowerCase().includes(t) || i.description?.toLowerCase().includes(t)
     );
   }
   /**
@@ -1279,7 +1285,7 @@ class he {
    */
   getSelectedOption() {
     const e = this.getSelection();
-    return this.getOptions().find((s) => s.value === e) || null;
+    return this.getOptions().find((i) => i.value === e) || null;
   }
   /**
    * Get picker size styles
@@ -1311,7 +1317,7 @@ class he {
    * Render dropdown variant
    */
   renderDropdown() {
-    const e = this.getSelectedOption(), t = this.getFilteredOptions(), s = this.getSizeStyles(), o = this.isOpen();
+    const e = this.getSelectedOption(), t = this.getFilteredOptions(), i = this.getSizeStyles(), r = this.isOpen();
     return a(
       "div",
       {
@@ -1330,7 +1336,7 @@ class he {
           onClick: this.toggleOpen,
           disabled: this.isDisabled(),
           style: {
-            ...s,
+            ...i,
             width: "100%",
             display: "flex",
             alignItems: "center",
@@ -1340,7 +1346,7 @@ class he {
             borderRadius: "6px",
             cursor: this.isDisabled() ? "not-allowed" : "pointer",
             opacity: this.isDisabled() ? 0.6 : 1,
-            ...o && {
+            ...r && {
               borderColor: this.props.tint || "#007AFF",
               boxShadow: `0 0 0 1px ${this.props.tint || "#007AFF"}`
             }
@@ -1363,14 +1369,14 @@ class he {
             style: {
               fontSize: "12px",
               color: "#6b7280",
-              transform: o ? "rotate(180deg)" : "rotate(0deg)",
+              transform: r ? "rotate(180deg)" : "rotate(0deg)",
               transition: "transform 0.2s"
             }
           },
           d("▼")
         )
       ),
-      ...o ? [
+      ...r ? [
         a(
           "div",
           {
@@ -1403,8 +1409,8 @@ class he {
                 placeholder: "Search options...",
                 value: this.searchTerm(),
                 onInput: (n) => {
-                  const r = n.target;
-                  this.setSearchTerm(r.value);
+                  const o = n.target;
+                  this.setSearchTerm(o.value);
                 },
                 style: {
                   width: "100%",
@@ -1490,7 +1496,7 @@ class he {
    * Render segmented variant
    */
   renderSegmented() {
-    const e = this.getOptions(), t = this.getSelection(), s = this.getSizeStyles();
+    const e = this.getOptions(), t = this.getSelection(), i = this.getSizeStyles();
     return a(
       "div",
       {
@@ -1504,33 +1510,33 @@ class he {
         "aria-label": this.props.accessibilityLabel
       },
       ...e.map(
-        (o, n) => a(
+        (r, n) => a(
           "button",
           {
             type: "button",
-            key: String(o.value),
-            onClick: () => this.handleSelection(o.value),
-            disabled: o.disabled || this.isDisabled(),
+            key: String(r.value),
+            onClick: () => this.handleSelection(r.value),
+            disabled: r.disabled || this.isDisabled(),
             role: "radio",
-            "aria-checked": o.value === t,
+            "aria-checked": r.value === t,
             style: {
-              ...s,
+              ...i,
               flex: 1,
               border: "none",
               borderRadius: "6px",
-              backgroundColor: o.value === t ? "#ffffff" : "transparent",
-              color: o.value === t ? "#1a1a1a" : "#6b7280",
-              fontWeight: o.value === t ? "600" : "400",
-              cursor: o.disabled || this.isDisabled() ? "not-allowed" : "pointer",
-              opacity: o.disabled || this.isDisabled() ? 0.5 : 1,
-              boxShadow: o.value === t ? "0 1px 2px rgba(0, 0, 0, 0.1)" : "none",
+              backgroundColor: r.value === t ? "#ffffff" : "transparent",
+              color: r.value === t ? "#1a1a1a" : "#6b7280",
+              fontWeight: r.value === t ? "600" : "400",
+              cursor: r.disabled || this.isDisabled() ? "not-allowed" : "pointer",
+              opacity: r.disabled || this.isDisabled() ? 0.5 : 1,
+              boxShadow: r.value === t ? "0 1px 2px rgba(0, 0, 0, 0.1)" : "none",
               transition: "all 0.2s",
               margin: "0",
               ...n === 0 && { marginRight: "1px" },
               ...n === e.length - 1 && { marginLeft: "1px" }
             }
           },
-          ...o.icon ? [
+          ...r.icon ? [
             a(
               "span",
               {
@@ -1539,10 +1545,10 @@ class he {
                   fontSize: "14px"
                 }
               },
-              d(o.icon)
+              d(r.icon)
             )
           ] : [],
-          d(o.label)
+          d(r.label)
         )
       )
     );
@@ -1556,9 +1562,9 @@ class he {
       "select",
       {
         value: String(t),
-        onChange: (s) => {
-          const o = s.target, n = e.find(
-            (r) => String(r.value) === o.value
+        onChange: (i) => {
+          const r = i.target, n = e.find(
+            (o) => String(o.value) === r.value
           );
           n && this.handleSelection(n.value);
         },
@@ -1574,14 +1580,14 @@ class he {
         }
       },
       ...e.map(
-        (s) => a(
+        (i) => a(
           "option",
           {
-            key: String(s.value),
-            value: String(s.value),
-            disabled: s.disabled
+            key: String(i.value),
+            value: String(i.value),
+            disabled: i.disabled
           },
-          d(s.label)
+          d(i.label)
         )
       )
     );
@@ -1590,10 +1596,10 @@ class he {
     const {
       variant: e = "dropdown",
       accessibilityLabel: t,
-      accessibilityHint: s
-    } = this.props, o = {
+      accessibilityHint: i
+    } = this.props, r = {
       "aria-label": t,
-      "aria-describedby": s ? `${this.id}-hint` : void 0
+      "aria-describedby": i ? `${this.id}-hint` : void 0
     };
     let n;
     switch (e) {
@@ -1609,9 +1615,9 @@ class he {
     }
     return a(
       "div",
-      o,
+      r,
       n,
-      ...s ? [
+      ...i ? [
         a(
           "div",
           {
@@ -1622,51 +1628,51 @@ class he {
               marginTop: "4px"
             }
           },
-          d(s)
+          d(i)
         )
       ] : []
     );
   }
 }
-function R(i, e, t = {}) {
-  const s = { ...t, selection: i, options: e }, o = new he(s);
-  return A(o);
+function O(s, e, t = {}) {
+  const i = { ...t, selection: s, options: e }, r = new ue(i);
+  return A(r);
 }
 const ve = {
   /**
    * Dropdown picker (default)
    */
   // biome-ignore lint/suspicious/noExplicitAny: Generic dropdown picker requires flexible type
-  Dropdown(i, e, t = {}) {
-    return R(i, e, { ...t, variant: "dropdown" });
+  Dropdown(s, e, t = {}) {
+    return O(s, e, { ...t, variant: "dropdown" });
   },
   /**
    * Segmented picker
    */
   // biome-ignore lint/suspicious/noExplicitAny: Generic segmented picker requires flexible type
-  Segmented(i, e, t = {}) {
-    return R(i, e, { ...t, variant: "segmented" });
+  Segmented(s, e, t = {}) {
+    return O(s, e, { ...t, variant: "segmented" });
   },
   /**
    * Wheel picker (native select)
    */
   // biome-ignore lint/suspicious/noExplicitAny: Generic wheel picker requires flexible type
-  Wheel(i, e, t = {}) {
-    return R(i, e, { ...t, variant: "wheel" });
+  Wheel(s, e, t = {}) {
+    return O(s, e, { ...t, variant: "wheel" });
   },
   /**
    * Menu picker
    */
   // biome-ignore lint/suspicious/noExplicitAny: Generic menu picker requires flexible type
-  Menu(i, e, t = {}) {
-    return R(i, e, { ...t, variant: "menu" });
+  Menu(s, e, t = {}) {
+    return O(s, e, { ...t, variant: "menu" });
   }
-}, xe = {
+}, we = {
   /**
    * Create options from simple array
    */
-  fromArray(i, e) {
-    return i.map((t) => ({
+  fromArray(s, e) {
+    return s.map((t) => ({
       value: t,
       label: String(e && typeof t == "object" && t !== null ? t[e] : t)
     }));
@@ -1674,8 +1680,8 @@ const ve = {
   /**
    * Create options from enum
    */
-  fromEnum(i) {
-    return Object.entries(i).map(([e, t]) => ({
+  fromEnum(s) {
+    return Object.entries(s).map(([e, t]) => ({
       value: t,
       label: e.replace(/([A-Z])/g, " $1").trim()
     }));
@@ -1683,30 +1689,30 @@ const ve = {
   /**
    * Group options by category
    */
-  grouped(i) {
-    return i.reduce(
+  grouped(s) {
+    return s.reduce(
       (e, t) => {
-        const s = t.category || "Other";
-        return e[s] || (e[s] = []), e[s].push(t), e;
+        const i = t.category || "Other";
+        return e[i] || (e[i] = []), e[i].push(t), e;
       },
       {}
     );
   }
 };
 export {
-  h as B,
-  I as E,
-  me as L,
-  R as P,
-  g as T,
-  ge as a,
-  he as b,
-  ce as c,
+  G as B,
+  F as E,
+  ye as L,
+  O as P,
+  b as T,
+  me as a,
+  ue as b,
+  de as c,
   x as d,
   ve as e,
-  xe as f,
-  ye as g,
-  Se as h,
-  j as i,
-  se as j
+  we as f,
+  Se as g,
+  xe as h,
+  Y as i,
+  ne as j
 };