@photonix/basic 4.0.0 → 4.1.0

package/dist/index.mjs

@@ -6476,7 +6476,7 @@ var Switch = React233.forwardRef(
 Switch.displayName = "Switch";
 
 // ../ultimate/src/components/text-field/TextField.tsx
-import * as React239 from "react";
+import * as React240 from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // ../ultimate/src/components/divider/Divider.tsx
@@ -6517,14 +6517,616 @@ var Divider = React234.forwardRef(
 );
 Divider.displayName = "Divider";
 
+// ../ultimate/src/hooks/useNumberSuggestions.ts
+import * as React235 from "react";
+
+// ../ultimate/src/utils/format.utils.ts
+var formatCurrency = (value, separator = ",", allowDecimal = true, maxDecimals = 2) => {
+  if (!value) return "";
+  const decimalChar = separator === "," ? "." : ",";
+  let cleaned = value.replace(new RegExp(`[^\\d\\${decimalChar}-]`, "g"), "");
+  const isNegative = cleaned.startsWith("-");
+  cleaned = cleaned.replace(/-/g, "");
+  const parts = cleaned.split(decimalChar);
+  let integerPart = parts[0] ?? "";
+  const decimalPart = parts[1];
+  integerPart = integerPart.replace(/^0+(?=\d)/, "");
+  if (integerPart === "") integerPart = "0";
+  integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+  let result = integerPart;
+  if (allowDecimal && decimalPart !== void 0) {
+    result += decimalChar + decimalPart.slice(0, maxDecimals);
+  }
+  if (isNegative && result !== "0") {
+    result = "-" + result;
+  }
+  return result;
+};
+var VN_CALLING_CODE = "84";
+var E164_MAX_DIGITS = 15;
+var chunkDigits = (digits, sizes) => {
+  const groups = [];
+  let index = 0;
+  for (const size of sizes) {
+    if (index >= digits.length) break;
+    groups.push(digits.slice(index, index + size));
+    index += size;
+  }
+  return groups;
+};
+var genericPhoneGroups = (length) => {
+  if (length <= 5) return [length];
+  const threes = Math.floor(length / 3);
+  switch (length % 3) {
+    case 0:
+      return Array(threes).fill(3);
+    case 1:
+      return [...Array(threes - 1).fill(3), 4];
+    default:
+      return [...Array(threes - 2).fill(3), 4, 4];
+  }
+};
+var groupNationalNumber = (nsn, callingCode) => {
+  if (callingCode === VN_CALLING_CODE) {
+    if (/^[35789]/.test(nsn)) return chunkDigits(nsn.slice(0, 9), [3, 3, 3]);
+    if (/^2[48]/.test(nsn)) return chunkDigits(nsn.slice(0, 10), [2, 4, 4]);
+    if (nsn.startsWith("2")) return chunkDigits(nsn.slice(0, 10), [3, 3, 4]);
+  }
+  const capped = nsn.slice(0, E164_MAX_DIGITS - callingCode.length);
+  return chunkDigits(capped, genericPhoneGroups(capped.length));
+};
+var parsePhone = (value, options = {}) => {
+  const trimmed = value.trim();
+  let digits = trimmed.replace(/\D/g, "");
+  let hasPlus = trimmed.startsWith("+");
+  if (!hasPlus && digits.startsWith("00")) {
+    hasPlus = true;
+    digits = digits.slice(2);
+  }
+  const fixedCode = options.countryCode?.replace(/\D/g, "");
+  if (fixedCode) {
+    if (hasPlus && digits.startsWith(fixedCode)) digits = digits.slice(fixedCode.length);
+    return { kind: "national", callingCode: fixedCode, nsn: digits.replace(/^0/, "") };
+  }
+  if (hasPlus) {
+    if (!digits.startsWith(VN_CALLING_CODE)) return { kind: "unknown", digits: digits.slice(0, E164_MAX_DIGITS) };
+    return { kind: "international", callingCode: VN_CALLING_CODE, nsn: digits.slice(2).replace(/^0/, "") };
+  }
+  if (/^1[89]00/.test(digits)) return { kind: "service", digits: digits.slice(0, 10) };
+  if (digits.startsWith("0")) return { kind: "trunk", callingCode: VN_CALLING_CODE, nsn: digits.slice(1) };
+  return { kind: "national", callingCode: VN_CALLING_CODE, nsn: digits };
+};
+var formatPhone = (value, options) => {
+  if (!value) return "";
+  const parsed = parsePhone(value, options);
+  switch (parsed.kind) {
+    case "unknown":
+      return `+${parsed.digits}`;
+    case "service":
+      return chunkDigits(parsed.digits, parsed.digits.length <= 8 ? [4, 4] : [4, 3, 3]).join(" ");
+    case "international":
+      return [`+${parsed.callingCode}`, ...groupNationalNumber(parsed.nsn, parsed.callingCode)].join(" ");
+    case "trunk": {
+      const groups = groupNationalNumber(parsed.nsn, parsed.callingCode);
+      return groups.length ? `0${groups.join(" ")}` : "0";
+    }
+    case "national":
+      return groupNationalNumber(parsed.nsn, parsed.callingCode).join(" ");
+  }
+};
+var normalizePhone = (value, options) => {
+  if (!value) return "";
+  const parsed = parsePhone(value, options);
+  switch (parsed.kind) {
+    case "unknown":
+      return parsed.digits ? `+${parsed.digits}` : "";
+    case "service":
+      return parsed.digits;
+    default: {
+      const nsn = groupNationalNumber(parsed.nsn, parsed.callingCode).join("");
+      return nsn ? `+${parsed.callingCode}${nsn}` : "";
+    }
+  }
+};
+var BANK_ACCOUNT_MAX_DIGITS = 19;
+var formatBankAccount = (value) => {
+  if (!value) return "";
+  const digits = value.replace(/\D/g, "").slice(0, BANK_ACCOUNT_MAX_DIGITS);
+  const groups = digits.match(/\d{1,4}/g) ?? [];
+  if (groups.length > 1 && groups[groups.length - 1].length === 1) {
+    const last = groups.pop();
+    groups[groups.length - 1] += last;
+  }
+  return groups.join(" ");
+};
+var formatCardNumber = (value) => {
+  if (!value) return "";
+  const digits = value.replace(/[^0-9]/g, "").slice(0, 16);
+  return digits.replace(/(\d{4})(?=\d)/g, "$1 ").trim();
+};
+var calculateCursorPosition = (prevValue, nextValue, prevCursorPos) => {
+  if (prevCursorPos <= 0) return 0;
+  const rawBefore = prevValue.slice(0, prevCursorPos).replace(/[^0-9]/g, "");
+  const rawDigitCount = rawBefore.length;
+  let digitsSeen = 0;
+  for (let i = 0; i < nextValue.length; i++) {
+    if (/\d/.test(nextValue[i])) {
+      digitsSeen++;
+    }
+    if (digitsSeen === rawDigitCount) {
+      return i + 1;
+    }
+  }
+  return nextValue.length;
+};
+
+// ../ultimate/src/utils/number-detect.utils.ts
+var NUMBER_SUGGESTION_THRESHOLD = 0.4;
+var CONFIDENT_SCORE = 0.7;
+var FALLBACK_CUTOFF = 0.5;
+var ACCOUNT_LABELS = [
+  "stk",
+  "so tk",
+  "so tai khoan",
+  "tai khoan",
+  "tk",
+  "tknh",
+  "account",
+  "acct",
+  "acc",
+  "a/c",
+  "ck",
+  "chuyen khoan",
+  "chuyen tien",
+  "chuyen vao",
+  "nhan tien",
+  "thu huong"
+];
+var BANK_NAMES = [
+  "vietcombank",
+  "vcb",
+  "techcombank",
+  "tcb",
+  "mbbank",
+  "mb bank",
+  "mb",
+  "bidv",
+  "vietinbank",
+  "vietin",
+  "ctg",
+  "agribank",
+  "acb",
+  "vpbank",
+  "vpb",
+  "tpbank",
+  "tpb",
+  "sacombank",
+  "stb",
+  "hdbank",
+  "hdb",
+  "vib",
+  "shb",
+  "msb",
+  "ocb",
+  "seabank",
+  "eximbank",
+  "eib",
+  "lpbank",
+  "lienvietpostbank",
+  "namabank",
+  "nam a bank",
+  "abbank",
+  "pvcombank",
+  "baovietbank",
+  "bac a bank",
+  "bacabank",
+  "kienlongbank",
+  "vietbank",
+  "vietabank",
+  "saigonbank",
+  "scb",
+  "pgbank",
+  "ncb",
+  "gpbank",
+  "oceanbank",
+  "cbbank",
+  "uob",
+  "hsbc",
+  "shinhan",
+  "woori",
+  "citibank",
+  "cake",
+  "timo",
+  "ubank",
+  "ngan hang",
+  "bank"
+];
+var PHONE_LABELS = [
+  "sdt",
+  "so dt",
+  "so dien thoai",
+  "dien thoai",
+  "dt",
+  "dd",
+  "di dong",
+  "phone",
+  "tel",
+  "mobile",
+  "hotline",
+  "zalo",
+  "viber",
+  "whatsapp",
+  "telegram",
+  "sms",
+  "lien he",
+  "lh",
+  "call",
+  "nhan tin"
+];
+var MONEY_MARKERS = [
+  "d",
+  "vnd",
+  "dong",
+  "k",
+  "tr",
+  "trieu",
+  "ty",
+  "nghin",
+  "ngan",
+  "usd",
+  "dola",
+  "xu",
+  "%"
+];
+var isDigit = (c) => c !== void 0 && c >= "0" && c <= "9";
+var isLetter = (c) => c !== void 0 && /\p{L}/u.test(c);
+var isAlnum = (c) => isDigit(c) || isLetter(c);
+var isGapChar = (c) => c === " " || c === "." || c === "-" || c === "\xA0" || c === "(" || c === ")";
+var foldChar = (c) => {
+  if (c === "\u0111" || c === "\u0110" || c === "\u20AB") return "d";
+  const base = c.normalize("NFD")[0] ?? c;
+  return base.toLowerCase();
+};
+var fold = (text) => {
+  let out = "";
+  for (let i = 0; i < text.length; i++) out += foldChar(text[i]);
+  return out;
+};
+var readRuns = (text) => {
+  const runs = [];
+  let i = 0;
+  while (i < text.length) {
+    let j = i;
+    if (text[j] === "(") j++;
+    const plus = text[j] === "+";
+    if (plus) j++;
+    if (!isDigit(text[j]) || j === i && !isDigit(text[i])) {
+      i++;
+      continue;
+    }
+    const start = i;
+    const glued = isAlnum(text[start - 1]) || text[start - 1] === "+";
+    const groups = [];
+    let gap = "";
+    let k = j;
+    for (; ; ) {
+      const groupStart = k;
+      while (isDigit(text[k])) k++;
+      groups.push({ digits: text.slice(groupStart, k), start: groupStart, end: k, gap });
+      let g = k;
+      while (g < text.length && g - k < 2 && isGapChar(text[g])) g++;
+      if (g > k && isDigit(text[g])) {
+        gap = text.slice(k, g);
+        k = g;
+        continue;
+      }
+      break;
+    }
+    i = k;
+    if (glued || isLetter(text[k])) continue;
+    runs.push({ plus, start, groups });
+  }
+  return runs;
+};
+var phoneShape = (digits, plus) => {
+  let international = plus;
+  let d = digits;
+  if (!plus && d.startsWith("0084")) {
+    international = true;
+    d = d.slice(2);
+  }
+  if (international) {
+    if (d.startsWith("84")) {
+      const nsn = d.slice(2).replace(/^0/, "");
+      return /^[35789]\d{8}$/.test(nsn) || /^2\d{9}$/.test(nsn) ? "strong" : null;
+    }
+    return d.length >= 8 && d.length <= 15 ? "weak" : null;
+  }
+  if (/^0[35789]\d{8}$/.test(d) || /^02\d{9}$/.test(d) || /^1[89]00(\d{4}|\d{6})$/.test(d)) return "strong";
+  if (/^84[35789]\d{8}$/.test(d)) return "weak";
+  return null;
+};
+var isCompletePhone = (digits, plus) => plus ? /^84[35789]\d{8}$/.test(digits) : /^0[35789]\d{8}$/.test(digits) || /^02\d{9}$/.test(digits);
+var ACCOUNT_MAX_DIGITS = 19;
+var E164_MAX_DIGITS2 = 15;
+var splitRun = (run) => {
+  const segments = [];
+  let current = [run.groups[0]];
+  let plus = run.plus;
+  let start = run.start;
+  const close = () => {
+    segments.push({
+      plus,
+      start,
+      end: current[current.length - 1].end,
+      groups: current,
+      digits: current.map((g) => g.digits).join("")
+    });
+  };
+  for (const group of run.groups.slice(1)) {
+    const digits = current.map((g) => g.digits).join("");
+    const max = plus ? E164_MAX_DIGITS2 : ACCOUNT_MAX_DIGITS;
+    const breaks = digits.length >= 8 && group.digits.length >= 6 || isCompletePhone(digits, plus) && group.digits.startsWith("0") || digits.length + group.digits.length > max;
+    if (breaks) {
+      close();
+      current = [group];
+      plus = false;
+      start = group.gap.endsWith("(") ? group.start - 1 : group.start;
+    } else {
+      current.push(group);
+    }
+  }
+  close();
+  return segments;
+};
+var looksLikeAmount = (segment) => {
+  const [first, ...rest] = segment.groups;
+  if (!first || rest.length === 0) return false;
+  if (first.digits.length > 3 || first.digits.startsWith("0")) return false;
+  return rest.every((g) => g.digits.length === 3 && g.gap === ".");
+};
+var startsWithWord = (folded, at, words) => words.some((w) => folded.startsWith(w, at) && !isAlnum(folded[at + w.length]));
+var isMoney = (text, folded, segment) => {
+  if (looksLikeAmount(segment)) return true;
+  if (segment.plus || segment.digits.startsWith("0")) return false;
+  let before = segment.start - 1;
+  while (before >= 0 && folded[before] === " ") before--;
+  if (folded[before] === "$") return true;
+  let after = segment.end;
+  if ((folded[after] === "," || folded[after] === ".") && isDigit(folded[after + 1])) {
+    after++;
+    while (isDigit(folded[after])) after++;
+  }
+  while (after < folded.length && folded[after] === " ") after++;
+  if (text[after] === "$") return true;
+  return startsWithWord(folded, after, MONEY_MARKERS);
+};
+var BEFORE_WINDOW = 40;
+var AFTER_WINDOW = 28;
+var lastWordEnd = (folded, from, to, words) => {
+  let best = -1;
+  for (const w of words) {
+    let at = folded.indexOf(w, from);
+    while (at !== -1 && at + w.length <= to) {
+      const end = at + w.length;
+      if (!isAlnum(folded[at - 1]) && !isAlnum(folded[end]) && end > best) best = end;
+      at = folded.indexOf(w, at + 1);
+    }
+  }
+  return best;
+};
+var firstWordStart = (folded, from, to, words) => {
+  let best = -1;
+  for (const w of words) {
+    const at = folded.indexOf(w, from);
+    if (at === -1 || at + w.length > to) continue;
+    if (!isAlnum(folded[at - 1]) && !isAlnum(folded[at + w.length]) && (best === -1 || at < best)) best = at;
+  }
+  return best;
+};
+var readContext = (folded, segment, prevEnd, nextStart) => {
+  let lineStart = folded.lastIndexOf("\n", segment.start - 1) + 1;
+  if (folded.slice(lineStart, segment.start).trim() === "" && lineStart >= 2) {
+    lineStart = folded.lastIndexOf("\n", lineStart - 2) + 1;
+  }
+  const from = Math.max(lineStart, prevEnd, segment.start - BEFORE_WINDOW);
+  const accountEnd = Math.max(
+    lastWordEnd(folded, from, segment.start, ACCOUNT_LABELS),
+    lastWordEnd(folded, from, segment.start, BANK_NAMES)
+  );
+  const phoneEnd = lastWordEnd(folded, from, segment.start, PHONE_LABELS);
+  if (accountEnd !== -1 || phoneEnd !== -1) return accountEnd > phoneEnd ? "bankAccount" : "phone";
+  let lineEnd = folded.indexOf("\n", segment.end);
+  if (lineEnd === -1) lineEnd = folded.length;
+  const to = Math.min(lineEnd, nextStart, segment.end + AFTER_WINDOW);
+  return firstWordStart(folded, segment.end, to, BANK_NAMES) !== -1 ? "bankAccount" : null;
+};
+var scoreSegment = (segment, context) => {
+  const { digits, plus } = segment;
+  const shape = phoneShape(digits, plus);
+  const scores = {};
+  if (shape) {
+    if (context === "phone") scores.phone = 1;
+    else if (context === null) scores.phone = shape === "strong" ? 0.8 : 0.5;
+  } else if (context === "phone" && digits.length >= 8 && digits.length <= E164_MAX_DIGITS2) {
+    scores.phone = 0.6;
+  }
+  const international = plus || shape !== null && digits.startsWith("0084");
+  const minAccount = context === "bankAccount" ? 6 : 8;
+  if (!international && digits.length >= minAccount && digits.length <= ACCOUNT_MAX_DIGITS) {
+    if (context === "bankAccount") scores.bankAccount = 1;
+    else if (context === null) scores.bankAccount = shape ? 0.4 : 0.7;
+  }
+  return scores;
+};
+var detectNumbers = (input) => {
+  if (!input) return [];
+  const text = input.normalize("NFC");
+  const folded = fold(text);
+  const segments = readRuns(text).flatMap(splitRun);
+  const result = [];
+  segments.forEach((segment, index) => {
+    if (isMoney(text, folded, segment)) return;
+    const prevEnd = index > 0 ? segments[index - 1].end : 0;
+    const nextStart = index < segments.length - 1 ? segments[index + 1].start : text.length;
+    const scores = scoreSegment(segment, readContext(folded, segment, prevEnd, nextStart));
+    if (scores.phone === void 0 && scores.bankAccount === void 0) return;
+    const value = (segment.plus ? "+" : "") + segment.digits;
+    const best = (scores.phone ?? 0) >= (scores.bankAccount ?? 0) ? "phone" : "bankAccount";
+    result.push({
+      value,
+      formatted: best === "phone" ? formatPhone(value) : formatBankAccount(value),
+      text: text.slice(segment.start, segment.end),
+      start: segment.start,
+      end: segment.end,
+      scores
+    });
+  });
+  return result;
+};
+var numberKey = (value, kind) => kind === "phone" ? normalizePhone(value) || value.replace(/\D/g, "") : value.replace(/\D/g, "");
+var suggestNumbers = (text, kind, options = {}) => {
+  const seen = /* @__PURE__ */ new Map();
+  for (const detected of detectNumbers(text)) {
+    const found = { ...detected, formatted: kind === "phone" ? formatPhone(detected.value) : formatBankAccount(detected.value) };
+    const score = found.scores[kind];
+    if (score === void 0 || score < NUMBER_SUGGESTION_THRESHOLD) continue;
+    const key = numberKey(found.value, kind);
+    const known = seen.get(key);
+    if (!known) seen.set(key, found);
+    else if ((known.scores[kind] ?? 0) < score) seen.set(key, { ...found, start: known.start, end: known.end });
+  }
+  let ranked = [...seen.values()].sort(
+    (a, b) => (b.scores[kind] ?? 0) - (a.scores[kind] ?? 0) || a.start - b.start
+  );
+  if ((ranked[0]?.scores[kind] ?? 0) >= CONFIDENT_SCORE) {
+    ranked = ranked.filter((found) => (found.scores[kind] ?? 0) >= FALLBACK_CUTOFF);
+  }
+  return options.limit === void 0 ? ranked : ranked.slice(0, options.limit);
+};
+var isTextWithNumbers = (text) => {
+  if (!text || !/\d/.test(text)) return false;
+  if (/[\p{L}\n]/u.test(text)) return true;
+  return detectNumbers(text).length > 1;
+};
+
+// ../ultimate/src/hooks/useNumberSuggestions.ts
+var source = "";
+var listeners = /* @__PURE__ */ new Set();
+var emit = () => listeners.forEach((listener) => listener());
+var setNumberSuggestionSource = (text) => {
+  if (text === source) return;
+  source = text;
+  emit();
+};
+var copyListenerCount = 0;
+var handleCopy = (event) => {
+  const target = event.target;
+  let text = "";
+  if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+    text = target.value.slice(target.selectionStart ?? 0, target.selectionEnd ?? 0);
+  } else {
+    text = window.getSelection()?.toString() ?? "";
+  }
+  if (/\d/.test(text) && suggestNumbersAny(text)) setNumberSuggestionSource(text);
+};
+var suggestNumbersAny = (text) => suggestNumbers(text, "phone", { limit: 1 }).length > 0 || suggestNumbers(text, "bankAccount", { limit: 1 }).length > 0;
+var subscribe = (listener) => {
+  listeners.add(listener);
+  if (typeof document !== "undefined" && copyListenerCount++ === 0) {
+    document.addEventListener("copy", handleCopy, true);
+  }
+  return () => {
+    listeners.delete(listener);
+    if (typeof document !== "undefined" && --copyListenerCount === 0) {
+      document.removeEventListener("copy", handleCopy, true);
+    }
+  };
+};
+var getSnapshot = () => source;
+var getServerSnapshot = () => "";
+var clipboardAccess = async () => {
+  if (typeof navigator === "undefined" || !navigator.clipboard?.readText) return "none";
+  try {
+    const status = await navigator.permissions?.query({ name: "clipboard-read" });
+    if (status?.state === "granted") return "granted";
+    if (status?.state === "denied") return "none";
+  } catch {
+  }
+  return "ask";
+};
+var readClipboard = async () => {
+  try {
+    return await navigator.clipboard.readText() ?? "";
+  } catch {
+    return "";
+  }
+};
+var useNumberSuggestions = ({
+  kind,
+  value,
+  onSelect,
+  enabled = true,
+  clipboard = true,
+  limit = 5
+}) => {
+  const text = React235.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const [canPasteFromClipboard, setCanPasteFromClipboard] = React235.useState(false);
+  const onSelectRef = React235.useRef(onSelect);
+  onSelectRef.current = onSelect;
+  const suggestions = React235.useMemo(() => {
+    if (!enabled || !text || limit <= 0) return [];
+    const current = value ? numberKey(value, kind) : "";
+    return suggestNumbers(text, kind).filter((found) => numberKey(found.value, kind) !== current).slice(0, limit);
+  }, [enabled, text, value, kind, limit]);
+  const take = React235.useCallback(
+    (incoming, fill) => {
+      setNumberSuggestionSource(incoming);
+      const [best] = suggestNumbers(incoming, kind, { limit: 1 });
+      if (fill && best) onSelectRef.current(best.value);
+    },
+    [kind]
+  );
+  const onPaste = React235.useCallback(
+    (event) => {
+      if (!enabled) return;
+      const pasted = event.clipboardData.getData("text");
+      if (!isTextWithNumbers(pasted)) return;
+      event.preventDefault();
+      take(pasted, true);
+    },
+    [enabled, take]
+  );
+  const onFocus = React235.useCallback(() => {
+    if (!enabled || !clipboard) return;
+    void clipboardAccess().then(async (access) => {
+      if (access === "granted") {
+        const read = await readClipboard();
+        if (read && read !== source && isTextWithNumbers(read)) take(read, false);
+        setCanPasteFromClipboard(false);
+      } else {
+        setCanPasteFromClipboard(access === "ask");
+      }
+    });
+  }, [enabled, clipboard, take]);
+  const pasteFromClipboard = React235.useCallback(async () => {
+    const read = await readClipboard();
+    setCanPasteFromClipboard(false);
+    if (!read) return;
+    if (isTextWithNumbers(read)) take(read, !value);
+    else if (/\d/.test(read)) onSelectRef.current(read.trim());
+  }, [take, value]);
+  return { suggestions, onPaste, onFocus, canPasteFromClipboard, pasteFromClipboard };
+};
+
 // ../ultimate/src/components/dropdown-list/DropdownList.tsx
-import * as React237 from "react";
+import * as React238 from "react";
 
 // ../ultimate/src/components/search-field/SearchField.tsx
-import * as React236 from "react";
+import * as React237 from "react";
 
 // ../ultimate/src/hooks/useComposedRefs.ts
-import { useCallback as useCallback3 } from "react";
+import { useCallback as useCallback4 } from "react";
 function setRef(ref, value) {
   if (typeof ref === "function") {
     ref(value);
@@ -6533,7 +7135,7 @@ function setRef(ref, value) {
   }
 }
 function useComposedRefs(...refs) {
-  return useCallback3((node) => {
+  return useCallback4((node) => {
     refs.forEach((ref) => setRef(ref, node));
   }, refs);
 }
@@ -6573,9 +7175,9 @@ function useClickOutside(ref, handler, enabled = true, ignoredRefs = []) {
 import { useContext as useContext4, useEffect as useEffect12 } from "react";
 
 // ../ultimate/src/internal/overlay/OverlayScope.tsx
-import * as React235 from "react";
+import * as React236 from "react";
 import { jsx as jsx232 } from "react/jsx-runtime";
-var OverlayDepthContext = React235.createContext(0);
+var OverlayDepthContext = React236.createContext(0);
 
 // ../ultimate/src/hooks/useEscapeKeydown.ts
 var layersByDocument = /* @__PURE__ */ new WeakMap();
@@ -6610,7 +7212,7 @@ function useEscapeKeydown(handler, enabled = true) {
 }
 
 // ../ultimate/src/hooks/usePopoverPosition.ts
-import { useState as useState7, useLayoutEffect as useLayoutEffect4, useRef as useRef10 } from "react";
+import { useState as useState8, useLayoutEffect as useLayoutEffect4, useRef as useRef11 } from "react";
 var MOBILE_VIEWPORT_MARGIN = 16;
 var POPOVER_SURFACE_SELECTOR = "[data-popover-surface]";
 var resolvePopoverBoundary = (triggerEl, viewportWidth, viewportHeight, desktopMargin) => {
@@ -6638,11 +7240,11 @@ var resolvePopoverBoundary = (triggerEl, viewportWidth, viewportHeight, desktopM
 };
 function usePopoverPosition(triggerRef, popoverRef, isOpen, options = {}) {
   const { minHeight = 300, margin = 32, gap = 4, strategy = "absolute", matchTriggerWidth = false, onClose } = options;
-  const [position, setPosition] = useState7("bottom");
-  const [align, setAlign] = useState7("left");
-  const onCloseRef = useRef10(onClose);
+  const [position, setPosition] = useState8("bottom");
+  const [align, setAlign] = useState8("left");
+  const onCloseRef = useRef11(onClose);
   onCloseRef.current = onClose;
-  const [coords, setCoords] = useState7({});
+  const [coords, setCoords] = useState8({});
   useLayoutEffect4(() => {
     if (isOpen && triggerRef.current) {
       const updatePosition = () => {
@@ -6752,20 +7354,20 @@ function usePopoverPosition(triggerRef, popoverRef, isOpen, options = {}) {
 }
 
 // ../ultimate/src/hooks/useVirtualList.ts
-import { useState as useState8, useMemo as useMemo4 } from "react";
+import { useState as useState9, useMemo as useMemo5 } from "react";
 function useVirtualList({
   itemCount,
   itemHeight,
   containerHeight,
   overscan = 3
 }) {
-  const [scrollTop, setScrollTop] = useState8(0);
+  const [scrollTop, setScrollTop] = useState9(0);
   const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
   const endIndex = Math.min(
     itemCount - 1,
     Math.floor((scrollTop + containerHeight) / itemHeight) + overscan
   );
-  const virtualItems = useMemo4(() => {
+  const virtualItems = useMemo5(() => {
     const items = [];
     for (let i = startIndex; i <= endIndex; i++) {
       items.push({
@@ -6828,7 +7430,7 @@ var SearchField_default = {};
 
 // ../ultimate/src/components/search-field/SearchField.tsx
 import { jsx as jsx233, jsxs as jsxs12 } from "react/jsx-runtime";
-var SearchField = React236.forwardRef(
+var SearchField = React237.forwardRef(
   ({
     placeholder = "Search",
     variant = "default",
@@ -6848,16 +7450,19 @@ var SearchField = React236.forwardRef(
     defaultValue,
     fullWidth = true,
     width,
+    bare = false,
+    loading = false,
+    onKeyDown,
     ...props
   }, ref) => {
-    const [focused, setFocused] = React236.useState(false);
+    const [focused, setFocused] = React237.useState(false);
     const [valueState, setValueState] = useControllableState({
       value,
       defaultValue: defaultValue || "",
       onChange
     });
-    const inputRef = React236.useRef(null);
-    React236.useEffect(() => {
+    const inputRef = React237.useRef(null);
+    React237.useEffect(() => {
       if (!shortcutHint || disabled) return;
       const handleGlobalKeyDown = (e) => {
         if (!e.isComposing && !e.defaultPrevented && (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
@@ -6868,7 +7473,7 @@ var SearchField = React236.forwardRef(
       window.addEventListener("keydown", handleGlobalKeyDown);
       return () => window.removeEventListener("keydown", handleGlobalKeyDown);
     }, [shortcutHint, disabled]);
-    React236.useImperativeHandle(ref, () => inputRef.current);
+    React237.useImperativeHandle(ref, () => inputRef.current);
     const currentValue = valueState;
     const handleFocus = (e) => {
       setFocused(true);
@@ -6897,7 +7502,8 @@ var SearchField = React236.forwardRef(
       inputRef.current?.focus();
     };
     const handleKeyDown = (e) => {
-      if (disabled || e.nativeEvent.isComposing) return;
+      onKeyDown?.(e);
+      if (e.defaultPrevented || disabled || e.nativeEvent.isComposing) return;
       if (e.key === "Enter") {
         e.preventDefault();
         focusNextElement(e.currentTarget);
@@ -6912,6 +7518,7 @@ var SearchField = React236.forwardRef(
           SearchField_default[size],
           !fullWidth && !width && SearchField_default.widthAuto,
           variant === "rounded" && SearchField_default.searchFieldRounded,
+          bare && SearchField_default.bare,
           focused && SearchField_default.searchFieldFocused,
           disabled && SearchField_default.searchFieldDisabled,
           className
@@ -6919,7 +7526,7 @@ var SearchField = React236.forwardRef(
         style: { ...style, width },
         onClick: () => !disabled && inputRef.current?.focus(),
         children: [
-          /* @__PURE__ */ jsx233("span", { className: SearchField_default.searchFieldIcon, children: /* @__PURE__ */ jsx233(SearchOutline, { size: size === "large" ? 24 : 20 }) }),
+          /* @__PURE__ */ jsx233("span", { className: SearchField_default.searchFieldIcon, children: loading ? /* @__PURE__ */ jsx233(Spinner2, { size: "small" }) : /* @__PURE__ */ jsx233(SearchOutline, { size: size === "large" ? 24 : 20 }) }),
           /* @__PURE__ */ jsx233(
             "input",
             {
@@ -6935,6 +7542,7 @@ var SearchField = React236.forwardRef(
               value: currentValue,
               placeholder,
               type: "search",
+              "aria-busy": loading || void 0,
               ...props
             }
           ),
@@ -6980,7 +7588,7 @@ function getItemId(collectionId, part, key) {
 
 // ../ultimate/src/components/dropdown-list/DropdownList.tsx
 import { jsx as jsx234, jsxs as jsxs13 } from "react/jsx-runtime";
-var DropdownList = React237.forwardRef(
+var DropdownList = React238.forwardRef(
   ({
     items,
     role = "listbox",
@@ -6998,32 +7606,32 @@ var DropdownList = React237.forwardRef(
     className,
     style
   }, ref) => {
-    const typeaheadRef = React237.useRef({ text: "", time: 0 });
-    const [searchQuery, setSearchQuery] = React237.useState("");
+    const typeaheadRef = React238.useRef({ text: "", time: 0 });
+    const [searchQuery, setSearchQuery] = React238.useState("");
     const showSearch = role === "listbox" && items.length >= 10;
-    const instanceId = React237.useId();
+    const instanceId = React238.useId();
     const itemId = (value2) => value2 === void 0 ? void 0 : getItemId(instanceId, "item", value2);
-    const selectedValues = React237.useMemo(() => {
+    const selectedValues = React238.useMemo(() => {
       if (Array.isArray(value)) return value;
       return value ? [value] : [];
     }, [value]);
-    const filteredItems = React237.useMemo(() => {
+    const filteredItems = React238.useMemo(() => {
       if (!searchQuery.trim()) return items;
       const query = searchQuery.toLowerCase();
       return items.filter(
         (item) => item.label.toLowerCase().includes(query)
       );
     }, [items, searchQuery]);
-    const selectableFilteredValues = React237.useMemo(() => filteredItems.filter((item) => !item.disabled).map((item) => item.value), [filteredItems]);
+    const selectableFilteredValues = React238.useMemo(() => filteredItems.filter((item) => !item.disabled).map((item) => item.value), [filteredItems]);
     const showSelectAll = mode === "multi" && Boolean(selectAllLabel) && selectableFilteredValues.length > 0;
     const allFilteredSelected = showSelectAll && selectableFilteredValues.every((itemValue) => selectedValues.includes(itemValue));
     const someFilteredSelected = showSelectAll && !allFilteredSelected && selectableFilteredValues.some((itemValue) => selectedValues.includes(itemValue));
-    const handleSelectAllClick = React237.useCallback(() => {
+    const handleSelectAllClick = React238.useCallback(() => {
       if (!showSelectAll) return;
       const nextValues = allFilteredSelected ? selectedValues.filter((itemValue) => !selectableFilteredValues.includes(itemValue)) : Array.from(/* @__PURE__ */ new Set([...selectedValues, ...selectableFilteredValues]));
       onChange?.(nextValues);
     }, [allFilteredSelected, onChange, selectableFilteredValues, selectedValues, showSelectAll]);
-    const displayItems = React237.useMemo(() => {
+    const displayItems = React238.useMemo(() => {
       if (!showSelectAll || !selectAllLabel) return filteredItems;
       return [
         { value: "__phx_select_all__", label: selectAllLabel, __selectAll: true },
@@ -7046,10 +7654,10 @@ var DropdownList = React237.forwardRef(
     const isSelected = (itemValue) => {
       return selectedValues.includes(itemValue);
     };
-    const [showTopGradient, setShowTopGradient] = React237.useState(false);
-    const [showBottomGradient, setShowBottomGradient] = React237.useState(false);
-    const listRef = React237.useRef(null);
-    const handleScroll = React237.useCallback(() => {
+    const [showTopGradient, setShowTopGradient] = React238.useState(false);
+    const [showBottomGradient, setShowBottomGradient] = React238.useState(false);
+    const listRef = React238.useRef(null);
+    const handleScroll = React238.useCallback(() => {
       const el = listRef.current;
       if (!el) return;
       const scrollTop = el.scrollTop;
@@ -7058,7 +7666,7 @@ var DropdownList = React237.forwardRef(
       setShowTopGradient(scrollTop > 10);
       setShowBottomGradient(scrollTop + clientHeight < scrollHeight - 10);
     }, []);
-    React237.useEffect(() => {
+    React238.useEffect(() => {
       handleScroll();
     }, [displayItems, handleScroll]);
     const ITEM_HEIGHT = size === "sm" ? 32 : 48;
@@ -7068,9 +7676,9 @@ var DropdownList = React237.forwardRef(
       itemHeight: ITEM_HEIGHT,
       containerHeight: parsedMaxHeight
     });
-    const [focusedIndex, setFocusedIndex] = React237.useState(-1);
-    const [isKeyboardMode, setIsKeyboardMode] = React237.useState(false);
-    React237.useEffect(() => {
+    const [focusedIndex, setFocusedIndex] = React238.useState(-1);
+    const [isKeyboardMode, setIsKeyboardMode] = React238.useState(false);
+    React238.useEffect(() => {
       if (displayItems.length === 0) {
         setFocusedIndex(-1);
         return;
@@ -7087,7 +7695,7 @@ var DropdownList = React237.forwardRef(
         return prev;
       });
     }, [displayItems, value, mode]);
-    React237.useEffect(() => {
+    React238.useEffect(() => {
       if (focusedIndex !== -1 && listRef.current) {
         const itemTop = focusedIndex * ITEM_HEIGHT;
         const itemBottom = itemTop + ITEM_HEIGHT;
@@ -7101,7 +7709,7 @@ var DropdownList = React237.forwardRef(
         }
       }
     }, [focusedIndex, ITEM_HEIGHT]);
-    const handleListScroll = React237.useCallback((e) => {
+    const handleListScroll = React238.useCallback((e) => {
       handleScroll();
       if (isVirtual) onVirtualScroll(e);
     }, [handleScroll, isVirtual, onVirtualScroll]);
@@ -7257,7 +7865,7 @@ var DropdownList = React237.forwardRef(
                                 tabIndex: -1
                               }
                             ),
-                            item.icon && /* @__PURE__ */ jsx234("span", { className: DropdownList_default.dropdownListItemIcon, children: React237.isValidElement(item.icon) ? React237.cloneElement(item.icon, { size: size === "sm" ? 20 : 24 }) : item.icon }),
+                            item.icon && /* @__PURE__ */ jsx234("span", { className: DropdownList_default.dropdownListItemIcon, children: React238.isValidElement(item.icon) ? React238.cloneElement(item.icon, { size: size === "sm" ? 20 : 24 }) : item.icon }),
                             /* @__PURE__ */ jsx234("span", { className: DropdownList_default.dropdownListItemLabel, children: item.label }),
                             mode === "single" && isSelected(item.value) && /* @__PURE__ */ jsx234("span", { className: DropdownList_default.dropdownListCheckmark, children: /* @__PURE__ */ jsx234(CheckSmallOutline, { size: size === "sm" ? 20 : 24 }) })
                           ]
@@ -7304,7 +7912,7 @@ var DropdownList = React237.forwardRef(
                                 tabIndex: -1
                               }
                             ),
-                            item.icon && /* @__PURE__ */ jsx234("span", { className: DropdownList_default.dropdownListItemIcon, children: React237.isValidElement(item.icon) ? React237.cloneElement(item.icon, { size: size === "sm" ? 20 : 24 }) : item.icon }),
+                            item.icon && /* @__PURE__ */ jsx234("span", { className: DropdownList_default.dropdownListItemIcon, children: React238.isValidElement(item.icon) ? React238.cloneElement(item.icon, { size: size === "sm" ? 20 : 24 }) : item.icon }),
                             /* @__PURE__ */ jsx234("span", { className: DropdownList_default.dropdownListItemLabel, children: item.label }),
                             mode === "single" && isSelected(item.value) && /* @__PURE__ */ jsx234("span", { className: DropdownList_default.dropdownListCheckmark, children: /* @__PURE__ */ jsx234(CheckSmallOutline, { size: size === "sm" ? 20 : 24 }) })
                           ]
@@ -7329,137 +7937,11 @@ var DropdownList = React237.forwardRef(
 );
 DropdownList.displayName = "DropdownList";
 
-// ../ultimate/src/utils/format.utils.ts
-var formatCurrency = (value, separator = ",", allowDecimal = true, maxDecimals = 2) => {
-  if (!value) return "";
-  const decimalChar = separator === "," ? "." : ",";
-  let cleaned = value.replace(new RegExp(`[^\\d\\${decimalChar}-]`, "g"), "");
-  const isNegative = cleaned.startsWith("-");
-  cleaned = cleaned.replace(/-/g, "");
-  const parts = cleaned.split(decimalChar);
-  let integerPart = parts[0] ?? "";
-  const decimalPart = parts[1];
-  integerPart = integerPart.replace(/^0+(?=\d)/, "");
-  if (integerPart === "") integerPart = "0";
-  integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
-  let result = integerPart;
-  if (allowDecimal && decimalPart !== void 0) {
-    result += decimalChar + decimalPart.slice(0, maxDecimals);
-  }
-  if (isNegative && result !== "0") {
-    result = "-" + result;
-  }
-  return result;
-};
-var VN_CALLING_CODE = "84";
-var E164_MAX_DIGITS = 15;
-var chunkDigits = (digits, sizes) => {
-  const groups = [];
-  let index = 0;
-  for (const size of sizes) {
-    if (index >= digits.length) break;
-    groups.push(digits.slice(index, index + size));
-    index += size;
-  }
-  return groups;
-};
-var genericPhoneGroups = (length) => {
-  if (length <= 5) return [length];
-  const threes = Math.floor(length / 3);
-  switch (length % 3) {
-    case 0:
-      return Array(threes).fill(3);
-    case 1:
-      return [...Array(threes - 1).fill(3), 4];
-    default:
-      return [...Array(threes - 2).fill(3), 4, 4];
-  }
-};
-var groupNationalNumber = (nsn, callingCode) => {
-  if (callingCode === VN_CALLING_CODE) {
-    if (/^[35789]/.test(nsn)) return chunkDigits(nsn.slice(0, 9), [3, 3, 3]);
-    if (/^2[48]/.test(nsn)) return chunkDigits(nsn.slice(0, 10), [2, 4, 4]);
-    if (nsn.startsWith("2")) return chunkDigits(nsn.slice(0, 10), [3, 3, 4]);
-  }
-  const capped = nsn.slice(0, E164_MAX_DIGITS - callingCode.length);
-  return chunkDigits(capped, genericPhoneGroups(capped.length));
-};
-var parsePhone = (value, options = {}) => {
-  const trimmed = value.trim();
-  let digits = trimmed.replace(/\D/g, "");
-  let hasPlus = trimmed.startsWith("+");
-  if (!hasPlus && digits.startsWith("00")) {
-    hasPlus = true;
-    digits = digits.slice(2);
-  }
-  const fixedCode = options.countryCode?.replace(/\D/g, "");
-  if (fixedCode) {
-    if (hasPlus && digits.startsWith(fixedCode)) digits = digits.slice(fixedCode.length);
-    return { kind: "national", callingCode: fixedCode, nsn: digits.replace(/^0/, "") };
-  }
-  if (hasPlus) {
-    if (!digits.startsWith(VN_CALLING_CODE)) return { kind: "unknown", digits: digits.slice(0, E164_MAX_DIGITS) };
-    return { kind: "international", callingCode: VN_CALLING_CODE, nsn: digits.slice(2).replace(/^0/, "") };
-  }
-  if (/^1[89]00/.test(digits)) return { kind: "service", digits: digits.slice(0, 10) };
-  if (digits.startsWith("0")) return { kind: "trunk", callingCode: VN_CALLING_CODE, nsn: digits.slice(1) };
-  return { kind: "national", callingCode: VN_CALLING_CODE, nsn: digits };
-};
-var formatPhone = (value, options) => {
-  if (!value) return "";
-  const parsed = parsePhone(value, options);
-  switch (parsed.kind) {
-    case "unknown":
-      return `+${parsed.digits}`;
-    case "service":
-      return chunkDigits(parsed.digits, parsed.digits.length <= 8 ? [4, 4] : [4, 3, 3]).join(" ");
-    case "international":
-      return [`+${parsed.callingCode}`, ...groupNationalNumber(parsed.nsn, parsed.callingCode)].join(" ");
-    case "trunk": {
-      const groups = groupNationalNumber(parsed.nsn, parsed.callingCode);
-      return groups.length ? `0${groups.join(" ")}` : "0";
-    }
-    case "national":
-      return groupNationalNumber(parsed.nsn, parsed.callingCode).join(" ");
-  }
-};
-var BANK_ACCOUNT_MAX_DIGITS = 19;
-var formatBankAccount = (value) => {
-  if (!value) return "";
-  const digits = value.replace(/\D/g, "").slice(0, BANK_ACCOUNT_MAX_DIGITS);
-  const groups = digits.match(/\d{1,4}/g) ?? [];
-  if (groups.length > 1 && groups[groups.length - 1].length === 1) {
-    const last = groups.pop();
-    groups[groups.length - 1] += last;
-  }
-  return groups.join(" ");
-};
-var formatCardNumber = (value) => {
-  if (!value) return "";
-  const digits = value.replace(/[^0-9]/g, "").slice(0, 16);
-  return digits.replace(/(\d{4})(?=\d)/g, "$1 ").trim();
-};
-var calculateCursorPosition = (prevValue, nextValue, prevCursorPos) => {
-  if (prevCursorPos <= 0) return 0;
-  const rawBefore = prevValue.slice(0, prevCursorPos).replace(/[^0-9]/g, "");
-  const rawDigitCount = rawBefore.length;
-  let digitsSeen = 0;
-  for (let i = 0; i < nextValue.length; i++) {
-    if (/\d/.test(nextValue[i])) {
-      digitsSeen++;
-    }
-    if (digitsSeen === rawDigitCount) {
-      return i + 1;
-    }
-  }
-  return nextValue.length;
-};
-
 // ../ultimate/src/components/text-field/TextField.module.css
 var TextField_default = {};
 
 // ../ultimate/src/internal/form/useNativeFieldReset.ts
-import * as React238 from "react";
+import * as React239 from "react";
 function useNativeFieldReset(ref, resetState, resetValue, formId) {
   const reset = useCallbackRef((event) => {
     queueMicrotask(() => {
@@ -7468,7 +7950,7 @@ function useNativeFieldReset(ref, resetState, resetValue, formId) {
       ref.current.value = resetValue;
     });
   });
-  React238.useEffect(() => {
+  React239.useEffect(() => {
     const form = ref.current?.form;
     form?.addEventListener("reset", reset);
     return () => form?.removeEventListener("reset", reset);
@@ -7477,7 +7959,7 @@ function useNativeFieldReset(ref, resetState, resetValue, formId) {
 
 // ../ultimate/src/components/text-field/TextField.tsx
 import { jsx as jsx235, jsxs as jsxs14 } from "react/jsx-runtime";
-var TextField = React239.forwardRef(
+var TextField = React240.forwardRef(
   ({
     label,
     labelStyle = "outside",
@@ -7517,15 +7999,16 @@ var TextField = React239.forwardRef(
     maxLength,
     portal = true,
     selectOnFocus = false,
+    smartPaste = true,
     ...props
   }, ref) => {
-    const generatedId = React239.useId();
+    const generatedId = React240.useId();
     const inputId = props.id ?? generatedId;
     const helperId = `${inputId}-help`;
-    const [focused, setFocused] = React239.useState(false);
-    const [isDropdownOpen, setIsDropdownOpen] = React239.useState(false);
-    const [passwordVisible, setPasswordVisible] = React239.useState(false);
-    const inputRef = React239.useRef(null);
+    const [focused, setFocused] = React240.useState(false);
+    const [isDropdownOpen, setIsDropdownOpen] = React240.useState(false);
+    const [passwordVisible, setPasswordVisible] = React240.useState(false);
+    const inputRef = React240.useRef(null);
     const [valueState, setValueState, resetValueState] = useControllableState({
       value,
       defaultValue: defaultValue || "",
@@ -7543,8 +8026,8 @@ var TextField = React239.forwardRef(
       defaultValue: defaultTrailingDropdownValue || "",
       onChange: onTrailingDropdownChange
     });
-    const triggerWrapperRef = React239.useRef(null);
-    const popoverRef = React239.useRef(null);
+    const triggerWrapperRef = React240.useRef(null);
+    const popoverRef = React240.useRef(null);
     const { style: popoverStyle } = usePopoverPosition(triggerWrapperRef, popoverRef, isDropdownOpen, {
       margin: 8,
       strategy: portal ? "fixed" : "absolute",
@@ -7557,7 +8040,7 @@ var TextField = React239.forwardRef(
       [triggerWrapperRef]
     );
     useEscapeKeydown(() => setIsDropdownOpen(false), isDropdownOpen);
-    const keepSelectionOnMouseUpRef = React239.useRef(false);
+    const keepSelectionOnMouseUpRef = React240.useRef(false);
     const handleFocus = (e) => {
       setFocused(true);
       if (selectOnFocus) e.currentTarget.select();
@@ -7574,14 +8057,14 @@ var TextField = React239.forwardRef(
       }
       props.onMouseUp?.(e);
     };
-    const isPhoneFormat = React239.useMemo(() => {
+    const isPhoneFormat = React240.useMemo(() => {
       if (inputFormat) return false;
       if (!leadingText) return false;
       return (leadingText.startsWith("+") || /^\d+$/.test(leadingText.replace(/[\s()]/g, ""))) && !leadingText.includes("://");
     }, [leadingText, inputFormat]);
     const activeFormat = inputFormat || (isPhoneFormat ? "phone" : void 0);
     const isNumericFormat = activeFormat === "currency" || activeFormat === "phone" || activeFormat === "bankAccount" || activeFormat === "cardNumber";
-    const phoneCountryCode = React239.useMemo(() => {
+    const phoneCountryCode = React240.useMemo(() => {
       if (activeFormat !== "phone") return void 0;
       if (formatOptions?.countryCode) return formatOptions.countryCode;
       const code = leadingText?.replace(/[\s()]/g, "");
@@ -7591,7 +8074,7 @@ var TextField = React239.forwardRef(
     const allowDecimal = formatOptions?.allowDecimal ?? true;
     const maxDigits = formatOptions?.maxDigits;
     const maxDecimals = formatOptions?.maxDecimals ?? 2;
-    const applyFormat = React239.useCallback((raw) => {
+    const applyFormat = React240.useCallback((raw) => {
       switch (activeFormat) {
         case "currency": {
           let cleaned = raw;
@@ -7617,6 +8100,15 @@ var TextField = React239.forwardRef(
           return raw;
       }
     }, [activeFormat, separator, allowDecimal, maxDigits, maxDecimals, phoneCountryCode]);
+    const suggestionKind = activeFormat === "phone" || activeFormat === "bankAccount" ? activeFormat : void 0;
+    const numberSuggestions = useNumberSuggestions({
+      kind: suggestionKind ?? "phone",
+      value: String(currentValue ?? ""),
+      enabled: Boolean(suggestionKind) && smartPaste && !disabled && !readOnly,
+      clipboard: false,
+      limit: 0,
+      onSelect: (raw) => setValueState(applyFormat(raw))
+    });
     const handleBlur = (e) => {
       setFocused(false);
       if (activeFormat && currentValue) {
@@ -7627,7 +8119,7 @@ var TextField = React239.forwardRef(
       }
       onBlur?.(e);
     };
-    React239.useEffect(() => {
+    React240.useEffect(() => {
       if (activeFormat && currentValue) {
         const formatted = applyFormat(String(currentValue));
         if (currentValue !== formatted) {
@@ -7828,6 +8320,10 @@ var TextField = React239.forwardRef(
                       onMouseDown: handleMouseDown,
                       onMouseUp: handleMouseUp,
                       onChange: handleChange,
+                      onPaste: (e) => {
+                        props.onPaste?.(e);
+                        if (!e.defaultPrevented) numberSuggestions.onPaste(e);
+                      },
                       onKeyDown: handleKeyDown,
                       value: currentValue,
                       placeholder: shouldShowLabelInside ? "" : placeholder,
@@ -7956,14 +8452,14 @@ var TextField = React239.forwardRef(
 TextField.displayName = "TextField";
 
 // ../ultimate/src/components/text-area/TextArea.tsx
-import * as React240 from "react";
+import * as React241 from "react";
 
 // ../ultimate/src/components/text-area/TextArea.module.css
 var TextArea_default = {};
 
 // ../ultimate/src/components/text-area/TextArea.tsx
 import { jsx as jsx236, jsxs as jsxs15 } from "react/jsx-runtime";
-var TextArea = React240.forwardRef(
+var TextArea = React241.forwardRef(
   ({
     label,
     labelStyle = "outside",
@@ -7989,8 +8485,8 @@ var TextArea = React240.forwardRef(
     fullWidth = true,
     ...props
   }, ref) => {
-    const [focused, setFocused] = React240.useState(false);
-    const textareaRef = React240.useRef(null);
+    const [focused, setFocused] = React241.useState(false);
+    const textareaRef = React241.useRef(null);
     const [valueState, setValueState, resetValueState] = useControllableState({
       value,
       defaultValue: defaultValue || "",
@@ -8020,7 +8516,7 @@ var TextArea = React240.forwardRef(
       }
       setValueState(newValue);
     };
-    const generatedId = React240.useId();
+    const generatedId = React241.useId();
     const shouldShowLabelOutside = label && labelStyle === "outside";
     const shouldShowLabelInside = label && labelStyle === "inside";
     const textareaId = id ?? generatedId;
@@ -8108,16 +8604,16 @@ var TextArea = React240.forwardRef(
 TextArea.displayName = "TextArea";
 
 // ../ultimate/src/components/avatar/Avatar.tsx
-import * as React241 from "react";
+import * as React242 from "react";
 
 // ../ultimate/src/components/avatar/Avatar.module.css
 var Avatar_default = {};
 
 // ../ultimate/src/components/avatar/Avatar.tsx
 import { jsx as jsx237, jsxs as jsxs16 } from "react/jsx-runtime";
-var Avatar = React241.forwardRef(
+var Avatar = React242.forwardRef(
   ({ src, alt, name, icon, size = "40", status, stroke, className, onClick, ...rest }, ref) => {
-    const [hasError, setHasError] = React241.useState(false);
+    const [hasError, setHasError] = React242.useState(false);
     const isInteractive = !!onClick;
     const Component = isInteractive ? "button" : "div";
     const getInitials = (userName) => {
@@ -8175,16 +8671,16 @@ var Avatar = React241.forwardRef(
 Avatar.displayName = "Avatar";
 
 // ../ultimate/src/components/avatar/AvatarGroup.tsx
-import * as React242 from "react";
+import * as React243 from "react";
 
 // ../ultimate/src/components/avatar/AvatarGroup.module.css
 var AvatarGroup_default = {};
 
 // ../ultimate/src/components/avatar/AvatarGroup.tsx
 import { jsx as jsx238, jsxs as jsxs17 } from "react/jsx-runtime";
-var AvatarGroup = React242.forwardRef(
+var AvatarGroup = React243.forwardRef(
   ({ children, size = "40", max = 5, showStatus = false, className, ...rest }, ref) => {
-    const childrenArray = React242.Children.toArray(children);
+    const childrenArray = React243.Children.toArray(children);
     const hasOverflow = childrenArray.length > max;
     const visibleCount = hasOverflow ? max - 1 : childrenArray.length;
     const visibleChildren = childrenArray.slice(0, visibleCount);
@@ -8197,8 +8693,8 @@ var AvatarGroup = React242.forwardRef(
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs17("div", { ref, className: groupClasses, ...rest, children: [
       visibleChildren.map((child, index) => {
-        if (React242.isValidElement(child)) {
-          return React242.cloneElement(child, {
+        if (React243.isValidElement(child)) {
+          return React243.cloneElement(child, {
             size,
             stroke: true,
             key: index,
@@ -8228,7 +8724,7 @@ var AvatarGroup = React242.forwardRef(
 AvatarGroup.displayName = "AvatarGroup";
 
 // ../ultimate/src/components/avatar/AvatarTemplate.tsx
-import * as React243 from "react";
+import * as React244 from "react";
 
 // ../ultimate/src/img/Image=1.png
 var Image_1_default = "./Image=1-LTDZFXMH.png";
@@ -8260,7 +8756,7 @@ var toImageSrc = (image) => {
   return image.default;
 };
 var AVATAR_IMAGES = [Image_1_default, Image_2_default, Image_3_default, Image_4_default, Image_5_default, Image_6_default].map(toImageSrc);
-var AvatarTemplate = React243.forwardRef(
+var AvatarTemplate = React244.forwardRef(
   ({ templateId = 1, ...rest }, ref) => {
     const src = AVATAR_IMAGES[templateId - 1];
     return /* @__PURE__ */ jsx239(Avatar, { ref, src, className: ["phx-avatar-template", rest.className].filter(Boolean).join(" "), ...rest });
@@ -8306,14 +8802,14 @@ var Image = ({
 };
 
 // ../ultimate/src/components/skeleton/Skeleton.tsx
-import * as React244 from "react";
+import * as React245 from "react";
 
 // ../ultimate/src/components/skeleton/Skeleton.module.css
 var Skeleton_default = {};
 
 // ../ultimate/src/components/skeleton/Skeleton.tsx
 import { jsx as jsx241 } from "react/jsx-runtime";
-var Skeleton = React244.forwardRef(
+var Skeleton = React245.forwardRef(
   ({ variant = "text", width, height, rounded, className, style, ...rest }, ref) => {
     const skeletonClasses = [
       "phx-skeleton",
@@ -8343,17 +8839,18 @@ var Skeleton = React244.forwardRef(
 Skeleton.displayName = "Skeleton";
 
 // ../ultimate/src/components/chip/Chip.tsx
-import * as React245 from "react";
+import * as React246 from "react";
 
 // ../ultimate/src/components/chip/Chip.module.css
 var Chip_default = {};
 
 // ../ultimate/src/components/chip/Chip.tsx
 import { jsx as jsx242, jsxs as jsxs18 } from "react/jsx-runtime";
-var Chip = React245.forwardRef(
+var Chip = React246.forwardRef(
   ({
     label,
     icon,
+    iconOnly,
     avatar,
     badge,
     variant = "outline",
@@ -8374,6 +8871,8 @@ var Chip = React245.forwardRef(
     const isClickable = !disabled;
     const hasBadgeValue = badge !== void 0 && String(badge).trim() !== "";
     const shouldShowBadge = !disabled && hasBadgeValue;
+    const showsIconOnly = Boolean(iconOnly && icon && !avatar);
+    const isIconSquare = showsIconOnly && !shouldShowBadge && !onRemove && !hasDropdown && !(actionIcon && onAction);
     const chipClasses = [
       "phx-chip",
       Chip_default.chipRoot,
@@ -8384,6 +8883,7 @@ var Chip = React245.forwardRef(
       isClickable && Chip_default.clickable,
       avatar && Chip_default.hasAvatar,
       shouldShowBadge && Chip_default.hasBadge,
+      isIconSquare && Chip_default.iconSquare,
       className
     ].filter(Boolean).join(" ");
     const badgeColor = variant === "filled" ? "white" : "black";
@@ -8433,8 +8933,9 @@ var Chip = React245.forwardRef(
         ref,
         className: chipClasses,
         onClick: isClickable ? onClick : void 0,
-        role: isClickable ? "button" : void 0,
+        role: isClickable ? "button" : showsIconOnly ? "img" : void 0,
         tabIndex: isClickable ? 0 : void 0,
+        "aria-label": showsIconOnly ? label : void 0,
         ...rest,
         onKeyDown: (event) => {
           rest.onKeyDown?.(event);
@@ -8444,13 +8945,13 @@ var Chip = React245.forwardRef(
           }
         },
         children: /* @__PURE__ */ jsxs18("div", { className: Chip_default.chipContainer, children: [
-          avatar && /* @__PURE__ */ jsx242("div", { className: Chip_default.chipAvatar, children: React245.isValidElement(avatar) ? React245.cloneElement(avatar, {
+          avatar && /* @__PURE__ */ jsx242("div", { className: Chip_default.chipAvatar, children: React246.isValidElement(avatar) ? React246.cloneElement(avatar, {
             size: size === "large" ? "32" : "24",
             stroke: variant === "filled" || avatar.props.stroke
           }) : avatar }),
           !avatar && icon && /* @__PURE__ */ jsx242("span", { className: Chip_default.chipIcon, children: icon }),
-          /* @__PURE__ */ jsxs18("span", { className: Chip_default.chipContent, children: [
-            /* @__PURE__ */ jsx242("span", { className: Chip_default.chipLabel, children: label }),
+          (!showsIconOnly || shouldShowBadge) && /* @__PURE__ */ jsxs18("span", { className: Chip_default.chipContent, children: [
+            !showsIconOnly && /* @__PURE__ */ jsx242("span", { className: Chip_default.chipLabel, children: label }),
             shouldShowBadge && /* @__PURE__ */ jsx242(
               Badge,
               {
@@ -8471,23 +8972,23 @@ var Chip = React245.forwardRef(
 Chip.displayName = "Chip";
 
 // ../ultimate/src/components/chip-bar/ChipBar.tsx
-import * as React247 from "react";
+import * as React248 from "react";
 
 // ../ultimate/src/components/sticky-stack/StickyStack.tsx
-import * as React246 from "react";
+import * as React247 from "react";
 
 // ../ultimate/src/components/sticky-stack/StickyStack.module.css
 var StickyStack_default = {};
 
 // ../ultimate/src/components/sticky-stack/StickyStack.tsx
 import { jsx as jsx243 } from "react/jsx-runtime";
-var BarSurfaceContext = React246.createContext(void 0);
-var StickyStackItemContext = React246.createContext(false);
+var BarSurfaceContext = React247.createContext(void 0);
+var StickyStackItemContext = React247.createContext(false);
 function useInStickyStackItem() {
-  return React246.useContext(StickyStackItemContext);
+  return React247.useContext(StickyStackItemContext);
 }
 function useBarSurface(surface) {
-  const inherited = React246.useContext(BarSurfaceContext);
+  const inherited = React247.useContext(BarSurfaceContext);
   return surface ?? inherited;
 }
 function resolveStackSurfaces(entries) {
@@ -8498,26 +8999,26 @@ function resolveStackSurfaces(entries) {
     return covered ? "merged" : "elevated";
   });
 }
-var StickyStackContext = React246.createContext(null);
+var StickyStackContext = React247.createContext(null);
 var findScrollParent = (element) => {
   for (let parent = element.parentElement; parent; parent = parent.parentElement) {
     if (/(auto|scroll|overlay)/.test(getComputedStyle(parent).overflowY)) return parent;
   }
   return null;
 };
-var StickyStackItem = React246.forwardRef(
+var StickyStackItem = React247.forwardRef(
   ({ retracted = false, paint = true, onStuckChange, className, children, ...rest }, forwardedRef) => {
-    const id = React246.useId();
-    const stack = React246.useContext(StickyStackContext);
+    const id = React247.useId();
+    const stack = React247.useContext(StickyStackContext);
     const report = stack?.report;
     const stackSurface = stack?.surfaces.get(id);
-    const elementRef = React246.useRef(null);
+    const elementRef = React247.useRef(null);
     const ref = useComposedRefs(forwardedRef, elementRef);
-    const [stuck, setStuck] = React246.useState(false);
-    const checkRef = React246.useRef(() => {
+    const [stuck, setStuck] = React247.useState(false);
+    const checkRef = React247.useRef(() => {
     });
     const notifyStuck = useCallbackRef(onStuckChange);
-    React246.useEffect(() => {
+    React247.useEffect(() => {
       const element = elementRef.current;
       if (!element) return;
       const check = () => {
@@ -8540,8 +9041,8 @@ var StickyStackItem = React246.forwardRef(
         window.removeEventListener("resize", check);
       };
     }, []);
-    React246.useEffect(() => checkRef.current());
-    React246.useEffect(() => {
+    React247.useEffect(() => checkRef.current());
+    React247.useEffect(() => {
       notifyStuck(stuck);
     }, [stuck, notifyStuck]);
     useIsomorphicLayoutEffect(() => {
@@ -8583,7 +9084,7 @@ var ChipBar_default = {};
 import { jsx as jsx244, jsxs as jsxs19 } from "react/jsx-runtime";
 var OVERFLOW_BUTTON_SIZE = 32;
 var MASK_FADE_SIZE = 44;
-var ChipBar = React247.forwardRef(
+var ChipBar = React248.forwardRef(
   ({
     leading,
     children,
@@ -8598,13 +9099,13 @@ var ChipBar = React247.forwardRef(
   }, ref) => {
     const surface = useBarSurface(surfaceProp);
     const sticky = useInStickyStackItem() ? false : stickyProp;
-    const [showLeftGradient, setShowLeftGradient] = React247.useState(false);
-    const [showRightGradient, setShowRightGradient] = React247.useState(false);
-    const [internalIsStuck, setInternalIsStuck] = React247.useState(false);
+    const [showLeftGradient, setShowLeftGradient] = React248.useState(false);
+    const [showRightGradient, setShowRightGradient] = React248.useState(false);
+    const [internalIsStuck, setInternalIsStuck] = React248.useState(false);
     const isStuck = stuck !== void 0 ? stuck : internalIsStuck;
-    const listRef = React247.useRef(null);
-    const containerRef = React247.useRef(null);
-    const updateScrollGradients = React247.useCallback(() => {
+    const listRef = React248.useRef(null);
+    const containerRef = React248.useRef(null);
+    const updateScrollGradients = React248.useCallback(() => {
       const el = listRef.current;
       if (el) {
         const { scrollLeft, scrollWidth, clientWidth } = el;
@@ -8612,7 +9113,7 @@ var ChipBar = React247.forwardRef(
         setShowRightGradient(Math.ceil(scrollLeft + clientWidth) < scrollWidth);
       }
     }, []);
-    React247.useEffect(() => {
+    React248.useEffect(() => {
       const el = listRef.current;
       if (el) {
         updateScrollGradients();
@@ -8639,7 +9140,7 @@ var ChipBar = React247.forwardRef(
         });
       }
     };
-    React247.useEffect(() => {
+    React248.useEffect(() => {
       if (!sticky || surface !== void 0) return;
       const container = containerRef.current;
       if (!container) return;
@@ -8671,7 +9172,7 @@ var ChipBar = React247.forwardRef(
         window.removeEventListener("resize", checkStuck);
       };
     }, [sticky, surface]);
-    const setRefs = React247.useCallback((node) => {
+    const setRefs = React248.useCallback((node) => {
       containerRef.current = node;
       if (typeof ref === "function") {
         ref(node);
@@ -8707,7 +9208,7 @@ var ChipBar = React247.forwardRef(
         ...rest,
         children: [
           leading && /* @__PURE__ */ jsxs19("div", { className: ChipBar_default.chipBarLeading, children: [
-            React247.isValidElement(leading) ? React247.cloneElement(leading, {
+            React248.isValidElement(leading) ? React248.cloneElement(leading, {
               size: size === "large" ? "large" : "medium"
             }) : leading,
             showDivider && /* @__PURE__ */ jsx244("div", { className: ChipBar_default.chipBarDivider })
@@ -8747,9 +9248,9 @@ var ChipBar = React247.forwardRef(
                   "scrollbarHidden",
                   "phx-chip-bar-list"
                 ].filter(Boolean).join(" "),
-                children: React247.Children.map(children, (child) => {
-                  if (React247.isValidElement(child)) {
-                    return React247.cloneElement(child, {
+                children: React248.Children.map(children, (child) => {
+                  if (React248.isValidElement(child)) {
+                    return React248.cloneElement(child, {
                       size: size === "large" ? "large" : "medium"
                     });
                   }
@@ -8790,9 +9291,9 @@ var ChipBar = React247.forwardRef(
 ChipBar.displayName = "ChipBar";
 
 // ../ultimate/src/components/visually-hidden/VisuallyHidden.tsx
-import * as React248 from "react";
+import * as React249 from "react";
 import { jsx as jsx245 } from "react/jsx-runtime";
-var VisuallyHidden = React248.forwardRef(
+var VisuallyHidden = React249.forwardRef(
   ({ as, children, className, style, ...props }, ref) => {
     const Component = as || "span";
     return /* @__PURE__ */ jsx245(
@@ -8822,26 +9323,150 @@ var VisuallyHidden = React248.forwardRef(
 VisuallyHidden.displayName = "VisuallyHidden";
 
 // ../ultimate/src/components/layout-context/LayoutContext.tsx
-import * as React249 from "react";
+import * as React251 from "react";
+
+// ../ultimate/src/components/layout-context/shell.ts
+import * as React250 from "react";
+var ShellStore = class {
+  state = {
+    drawerFloating: false,
+    drawerCount: 0,
+    open: false,
+    parentId: null,
+    selectedRailId: null,
+    noDrawer: /* @__PURE__ */ new Set()
+  };
+  listeners = /* @__PURE__ */ new Set();
+  railClicks = /* @__PURE__ */ new Map();
+  closeTimer;
+  floatingDrawers = 0;
+  /** Delay (ms) before the card closes, so the pointer can cross from the rail item to it. */
+  closeDelay = 200;
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  getSnapshot = () => this.state;
+  set(patch) {
+    this.state = { ...this.state, ...patch };
+    this.listeners.forEach((listener) => listener());
+  }
+  reconcileQueued = false;
+  /**
+   * After a commit (rail items and drawers report in effects, in tree order), note whether the
+   * selected item's page has a drawer.
+   */
+  reconcile() {
+    if (this.reconcileQueued) return;
+    this.reconcileQueued = true;
+    queueMicrotask(() => {
+      this.reconcileQueued = false;
+      const { selectedRailId: id, drawerCount, noDrawer } = this.state;
+      if (!id) return;
+      const without = drawerCount === 0;
+      if (without === noDrawer.has(id)) return;
+      const next = new Set(noDrawer);
+      if (without) next.add(id);
+      else next.delete(id);
+      this.set({ noDrawer: next });
+    });
+  }
+  /** A drawer joins (`+1`) or leaves (`-1`) the layout. */
+  drawerMounted(delta) {
+    this.set({ drawerCount: Math.max(0, this.state.drawerCount + delta) });
+    this.reconcile();
+    if (this.state.drawerCount === 0) this.close();
+  }
+  /** A drawer starts (`true`) or stops floating. */
+  drawerFloats(floating) {
+    this.floatingDrawers = Math.max(0, this.floatingDrawers + (floating ? 1 : -1));
+    const drawerFloating = this.floatingDrawers > 0;
+    if (drawerFloating !== this.state.drawerFloating) this.set({ drawerFloating });
+    if (!drawerFloating) this.close();
+  }
+  /** A rail item reports its click handler; the selected one also marks itself. */
+  railItem(id, selected, onClick) {
+    if (onClick) this.railClicks.set(id, onClick);
+    else this.railClicks.delete(id);
+    if (selected && this.state.selectedRailId !== id) this.set({ selectedRailId: id });
+    if (selected) this.reconcile();
+    return () => {
+      if (this.railClicks.get(id) === onClick) this.railClicks.delete(id);
+    };
+  }
+  /**
+   * Whether a rail item reveals the floating drawer: any item, while a drawer floats in the
+   * shell, except one whose page turned out to have none. `hint` (NavItem `hasDrawer`) decides
+   * outright when given.
+   */
+  isParent(id, hint) {
+    const { drawerFloating, drawerCount, noDrawer } = this.state;
+    if (!drawerFloating || drawerCount === 0) return false;
+    return hint ?? !noDrawer.has(id);
+  }
+  /** Opens at once; closing waits `closeDelay` and any open on the way cancels it. */
+  setOpen = (open) => {
+    clearTimeout(this.closeTimer);
+    if (open) {
+      if (!this.state.open) this.set({ open: true });
+    } else {
+      this.closeTimer = setTimeout(() => {
+        if (this.state.open) this.set({ open: false });
+      }, this.closeDelay);
+    }
+  };
+  /** Pointer or focus entering / leaving a parent rail item. */
+  hoverParent(id, hovering) {
+    if (hovering && this.state.parentId !== id) this.set({ parentId: id });
+    this.setOpen(hovering);
+  }
+  /** The app's own drawer toggle, while floating: show the card for the selected item, or hide it. */
+  toggleForSelected() {
+    if (this.state.open) {
+      this.close();
+      return;
+    }
+    clearTimeout(this.closeTimer);
+    this.set({ open: true, parentId: this.state.selectedRailId });
+  }
+  close = () => {
+    clearTimeout(this.closeTimer);
+    if (this.state.open) this.set({ open: false });
+  };
+  /** An item was chosen in the floating card: go to the page it was opened from, then close. */
+  choose() {
+    const { parentId, selectedRailId, open } = this.state;
+    if (!open) return;
+    if (parentId && parentId !== selectedRailId) this.railClicks.get(parentId)?.(parentId);
+    this.close();
+  }
+};
+var defaultShellStore = new ShellStore();
+
+// ../ultimate/src/components/layout-context/LayoutContext.tsx
 import { jsx as jsx246 } from "react/jsx-runtime";
-var LayoutContext = React249.createContext(null);
+var LayoutContext = React251.createContext(null);
 var LayoutProvider = ({ children }) => {
-  const [drawerCount, setDrawerCount] = React249.useState(0);
-  const registerDrawer = React249.useCallback(() => setDrawerCount((count) => count + 1), []);
-  const unregisterDrawer = React249.useCallback(() => setDrawerCount((count) => Math.max(0, count - 1)), []);
-  const value = React249.useMemo(() => ({
+  const [drawerCount, setDrawerCount] = React251.useState(0);
+  const [shell] = React251.useState(() => new ShellStore());
+  const registerDrawer = React251.useCallback(() => setDrawerCount((count) => count + 1), []);
+  const unregisterDrawer = React251.useCallback(() => setDrawerCount((count) => Math.max(0, count - 1)), []);
+  const value = React251.useMemo(() => ({
     hasDrawer: drawerCount > 0,
     registerDrawer,
-    unregisterDrawer
-  }), [drawerCount, registerDrawer, unregisterDrawer]);
+    unregisterDrawer,
+    shell
+  }), [drawerCount, registerDrawer, unregisterDrawer, shell]);
   return /* @__PURE__ */ jsx246(LayoutContext.Provider, { value, children });
 };
 var useLayout = () => {
-  return React249.useContext(LayoutContext);
+  return React251.useContext(LayoutContext);
 };
 
 // ../ultimate/src/components/number-field/NumberField.tsx
-import * as React250 from "react";
+import * as React252 from "react";
 import { jsx as jsx247, jsxs as jsxs20 } from "react/jsx-runtime";
 var parseNumber = (text) => {
   const normalized = text.trim().replace(",", ".");
@@ -8873,8 +9498,8 @@ function NumberField({
     defaultValue,
     onChange
   });
-  const ref = React250.useRef(null);
-  const [draft, setDraft] = React250.useState(null);
+  const ref = React252.useRef(null);
+  const [draft, setDraft] = React252.useState(null);
   const display = draft ?? (current == null ? "" : String(current));
   const resetValue = String((value !== void 0 ? current : defaultValue) ?? "");
   useNativeFieldReset(
@@ -8904,7 +9529,7 @@ function NumberField({
       )
     );
   };
-  const generatedId = React250.useId();
+  const generatedId = React252.useId();
   const inputId = props.id ?? generatedId;
   const descriptionId = description ? `${inputId}-description` : void 0;
   const errorId = error ? `${inputId}-error` : void 0;
@@ -9022,17 +9647,17 @@ function NumberField({
 }
 
 // ../ultimate/src/components/rating/Rating.tsx
-import * as React252 from "react";
+import * as React254 from "react";
 
 // ../ultimate/src/components/star/Star.tsx
-import * as React251 from "react";
+import * as React253 from "react";
 
 // ../ultimate/src/components/star/Star.module.css
 var Star_default = {};
 
 // ../ultimate/src/components/star/Star.tsx
 import { jsx as jsx248 } from "react/jsx-runtime";
-var Star = React251.forwardRef(
+var Star = React253.forwardRef(
   ({
     className,
     checked = false,
@@ -9043,8 +9668,8 @@ var Star = React251.forwardRef(
     onClick,
     ...rest
   }, ref) => {
-    const [pressed, setPressed] = React251.useState(false);
-    const timeoutRef = React251.useRef(null);
+    const [pressed, setPressed] = React253.useState(false);
+    const timeoutRef = React253.useRef(null);
     const iconSize = size === "small" ? 20 : 24;
     const handleClick = (e) => {
       if (disabled) return;
@@ -9058,7 +9683,7 @@ var Star = React251.forwardRef(
         onClick(e);
       }
     };
-    React251.useEffect(() => {
+    React253.useEffect(() => {
       return () => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
       };
@@ -9113,7 +9738,7 @@ function Rating({
     defaultValue,
     onChange
   });
-  const hidden = React252.useRef(null);
+  const hidden = React254.useRef(null);
   const normalize = (rating) => Number.isFinite(rating) ? Math.max(0, Math.min(count, Math.round(rating))) : 0;
   const selected = normalize(current);
   useNativeFieldReset(
@@ -9194,7 +9819,7 @@ function Rating({
 }
 
 // ../ultimate/src/components/otp/OTP.tsx
-import * as React253 from "react";
+import * as React255 from "react";
 import { flushSync } from "react-dom";
 
 // ../ultimate/src/components/otp/OTP.module.css
@@ -9233,27 +9858,27 @@ function OTP({
     defaultValue: normalize(defaultValue),
     onChange
   });
-  const [local, setLocal] = React253.useState(() => split(value ?? defaultValue));
-  const pending = React253.useRef(null);
+  const [local, setLocal] = React255.useState(() => split(value ?? defaultValue));
+  const pending = React255.useRef(null);
   const digits = value === void 0 ? Array.from({ length: count }, (_, index) => local[index] ?? "") : pending.current?.code === normalize(code) ? Array.from(
     { length: count },
     (_, index) => pending.current.digits[index] ?? ""
   ) : split(code);
-  const currentDigits = React253.useRef(digits);
+  const currentDigits = React255.useRef(digits);
   currentDigits.current = digits;
-  const composing = React253.useRef(null);
-  const picked = React253.useRef(false);
-  const inputs = React253.useRef([]);
-  const first = React253.useRef(null);
-  const previousReadOnly = React253.useRef(readOnly);
-  React253.useEffect(() => {
+  const composing = React255.useRef(null);
+  const picked = React255.useRef(false);
+  const inputs = React255.useRef([]);
+  const first = React255.useRef(null);
+  const previousReadOnly = React255.useRef(readOnly);
+  React255.useEffect(() => {
     if (readOnly && !previousReadOnly.current) {
       const active = inputs.current.find((input) => input === document.activeElement);
       active?.blur();
     }
     previousReadOnly.current = readOnly;
   }, [readOnly]);
-  const id = React253.useId();
+  const id = React255.useId();
   const supportingText = error || helperText;
   const supportingId = error ? `${id}-error` : helperText ? `${id}-helper` : void 0;
   const focus = (index) => inputs.current[index]?.focus({ preventScroll: true });
@@ -9290,10 +9915,10 @@ function OTP({
     const nextIndex = sequential ? nextCell(next) : Math.min(count - 1, start + text.length);
     if (text && !inputs.current[nextIndex]?.readOnly) focus(nextIndex);
   };
-  React253.useEffect(() => {
+  React255.useEffect(() => {
     if (autoFocus && !disabled && !readOnly) focus(sequential ? nextCell(currentDigits.current) : 0);
   }, []);
-  React253.useEffect(() => {
+  React255.useEffect(() => {
     const cleanups = inputs.current.slice(0, count).map((input, index) => {
       if (!input) return () => {
       };
@@ -9351,7 +9976,7 @@ function OTP({
         gap: dotFields ? "md" : "4xs",
         maxW: "100%",
         w: `calc(${columns} * ${cellWidth}px + ${columns - 1 + separatorCount} * var(${dotFields ? "--space-md" : "--space-4xs"}) + ${separatorCount} * var(--dimensions-12))`,
-        children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsxs22(React253.Fragment, { children: [
+        children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsxs22(React255.Fragment, { children: [
           separates(index % columns) && /* @__PURE__ */ jsx250(Text, { as: "span", "aria-hidden": "true", className: OTP_default.separator, children: "-" }),
           /* @__PURE__ */ jsxs22(Text, { as: "span", className: `${OTP_default.cellSlot} ${OTP_default[size]} ${dotFields ? OTP_default.dotField : ""}`, variant: size === "large" ? "headline-sm" : size === "medium" ? "title-lg" : "title-md", weight: "medium", children: [
             /* @__PURE__ */ jsx250(
@@ -9490,7 +10115,7 @@ function PIN({ length = 4, "aria-label": accessibleLabel = "PIN", autoFocus = tr
 }
 
 // ../ultimate/src/components/empty/Empty.tsx
-import * as React254 from "react";
+import * as React256 from "react";
 import { jsx as jsx252, jsxs as jsxs23 } from "react/jsx-runtime";
 function Empty({
   title = "No results",
@@ -9498,7 +10123,7 @@ function Empty({
   icon,
   action
 }) {
-  const titleId = React254.useId();
+  const titleId = React256.useId();
   return /* @__PURE__ */ jsxs23(
     VStack,
     {
@@ -9521,7 +10146,7 @@ function Empty({
 }
 
 // ../ultimate/src/components/result/Result.tsx
-import * as React255 from "react";
+import * as React257 from "react";
 import { CheckCircle, Cancel, Warning, Information } from "@photonix/illustrations";
 import { jsx as jsx253, jsxs as jsxs24 } from "react/jsx-runtime";
 var STATUS_ILLUSTRATION = {
@@ -9531,7 +10156,7 @@ var STATUS_ILLUSTRATION = {
   info: Information
 };
 function Result({ status, title, description, action }) {
-  const titleId = React255.useId();
+  const titleId = React257.useId();
   const StatusIllustration = STATUS_ILLUSTRATION[status];
   return /* @__PURE__ */ jsxs24(
     VStack,