@scattered-light/loomiere-base-ui 0.6.1 → 0.7.1

package/dist/chunk-JUUPOOQQ.js

@@ -0,0 +1,3723 @@
+import { cnState, styledPart, buttonPart, cn, Button, Combobox, Select, useUnderWidth, balanceOf, formatMoney, minorToDecimal } from './chunk-M7KJASGK.js';
+import * as React10 from 'react';
+import { Field as Field$1 } from '@base-ui/react/field';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { NumberField as NumberField$1 } from '@base-ui/react/number-field';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import { Drawer as Drawer$1 } from '@base-ui/react/drawer';
+import { useFieldRootContext } from '@base-ui/react/internals/field-root-context';
+import { useLabelableContext } from '@base-ui/react/internals/labelable-provider';
+import { createPortal } from 'react-dom';
+
+var Root = React10.forwardRef(
+  function FieldRoot({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Field$1.Root,
+      {
+        ref,
+        ...props,
+        className: (state) => cnState("FieldRoot", className, state)
+      }
+    );
+  }
+);
+var Label = React10.forwardRef(
+  function FieldLabel({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Field$1.Label,
+      {
+        ref,
+        ...props,
+        className: (state) => cnState("FieldLabel", className, state)
+      }
+    );
+  }
+);
+var Description = React10.forwardRef(function FieldDescription({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Field$1.Description,
+    {
+      ref,
+      ...props,
+      className: (state) => cnState("FieldDescription", className, state)
+    }
+  );
+});
+var Error2 = React10.forwardRef(
+  function FieldError({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Field$1.Error,
+      {
+        ref,
+        ...props,
+        className: (state) => cnState("FieldError", className, state)
+      }
+    );
+  }
+);
+var Control = React10.forwardRef(
+  function FieldControl({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Field$1.Control,
+      {
+        ref,
+        ...props,
+        className: (state) => cnState("FieldControl", className, state)
+      }
+    );
+  }
+);
+var Validity = Field$1.Validity;
+var Item = React10.forwardRef(
+  function FieldItem({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Field$1.Item,
+      {
+        ref,
+        ...props,
+        className: (state) => cnState("", className, state)
+      }
+    );
+  }
+);
+var Field = {
+  Root,
+  Label,
+  Description,
+  Error: Error2,
+  Control,
+  Validity,
+  Item
+};
+var Root2 = styledPart(
+  NumberField$1.Root,
+  "NumberFieldRoot",
+  "NumberFieldRoot"
+);
+var Group = styledPart(
+  NumberField$1.Group,
+  "NumberFieldGroup",
+  "NumberFieldGroup"
+);
+var Input = styledPart(
+  NumberField$1.Input,
+  "NumberFieldInput",
+  "NumberFieldInput"
+);
+var Increment = styledPart(
+  NumberField$1.Increment,
+  "NumberFieldIncrement",
+  "NumberFieldIncrement"
+);
+var Decrement = styledPart(
+  NumberField$1.Decrement,
+  "NumberFieldDecrement",
+  "NumberFieldDecrement"
+);
+var ScrubArea = styledPart(
+  NumberField$1.ScrubArea,
+  "NumberFieldScrubArea",
+  "NumberFieldScrubArea"
+);
+function NumberFieldLabel({ className, htmlFor, ...props }) {
+  return /* @__PURE__ */ jsx("label", { htmlFor, className: cn("NumberFieldLabel", className), ...props });
+}
+var NumberField = {
+  Root: Root2,
+  Group,
+  Input,
+  Increment,
+  Decrement,
+  ScrubArea,
+  ScrubAreaCursor: NumberField$1.ScrubAreaCursor,
+  Label: NumberFieldLabel
+};
+var Trigger = buttonPart(
+  Popover$1.Trigger,
+  "PopoverTrigger",
+  { partClass: "PopoverTrigger", optIn: true }
+);
+var Backdrop = styledPart(
+  Popover$1.Backdrop,
+  "PopoverBackdrop",
+  "PopoverBackdrop"
+);
+var Positioner = styledPart(
+  Popover$1.Positioner,
+  "PopoverPositioner",
+  "PopoverPositioner"
+);
+var Popup = styledPart(
+  Popover$1.Popup,
+  "PopoverPopup",
+  "PopoverPopup"
+);
+var Title = styledPart(
+  Popover$1.Title,
+  "PopoverTitle",
+  "PopoverTitle"
+);
+var Description2 = styledPart(
+  Popover$1.Description,
+  "PopoverDescription",
+  "PopoverDescription"
+);
+var Close = styledPart(
+  Popover$1.Close,
+  "PopoverClose",
+  "PopoverClose"
+);
+var Arrow = styledPart(
+  Popover$1.Arrow,
+  "PopoverArrow",
+  "PopoverArrow"
+);
+var Popover = {
+  Root: Popover$1.Root,
+  Trigger,
+  Portal: Popover$1.Portal,
+  Backdrop,
+  Positioner,
+  Popup,
+  Title,
+  Description: Description2,
+  Close,
+  Arrow,
+  Viewport: Popover$1.Viewport,
+  Handle: Popover$1.Handle,
+  createHandle: Popover$1.createHandle
+};
+var Trigger2 = buttonPart(
+  Drawer$1.Trigger,
+  "DrawerTrigger"
+);
+var Backdrop2 = styledPart(
+  Drawer$1.Backdrop,
+  "DrawerBackdrop",
+  "DrawerBackdrop"
+);
+var Viewport = styledPart(
+  Drawer$1.Viewport,
+  "DrawerViewport",
+  "DrawerViewport"
+);
+var Popup2 = styledPart(
+  Drawer$1.Popup,
+  "DrawerPopup",
+  "DrawerPopup"
+);
+var Title2 = styledPart(
+  Drawer$1.Title,
+  "DrawerTitle",
+  "DrawerTitle"
+);
+var Description3 = styledPart(
+  Drawer$1.Description,
+  "DrawerDescription",
+  "DrawerDescription"
+);
+var Content = styledPart(
+  Drawer$1.Content,
+  "DrawerContent",
+  "DrawerContent"
+);
+var Close2 = buttonPart(
+  Drawer$1.Close,
+  "DrawerClose"
+);
+var Drawer = {
+  Root: Drawer$1.Root,
+  Trigger: Trigger2,
+  Portal: Drawer$1.Portal,
+  Backdrop: Backdrop2,
+  Viewport,
+  Popup: Popup2,
+  Title: Title2,
+  Description: Description3,
+  Content,
+  Close: Close2,
+  Indent: Drawer$1.Indent,
+  IndentBackground: Drawer$1.IndentBackground,
+  SwipeArea: Drawer$1.SwipeArea,
+  Provider: Drawer$1.Provider,
+  VirtualKeyboardProvider: Drawer$1.VirtualKeyboardProvider,
+  Handle: Drawer$1.Handle,
+  createHandle: Drawer$1.createHandle
+};
+var Badge = React10.forwardRef(function Badge2({ className, emphasis, status, palette, size, dot, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "data-emphasis": emphasis,
+      "data-status": status,
+      "data-color": palette,
+      "data-size": size,
+      "data-dot": dot ? "" : void 0,
+      className: cn("Badge", className),
+      ...props,
+      children
+    }
+  );
+});
+
+// src/custom/money-field/money-utils.ts
+var digitCache = /* @__PURE__ */ new Map();
+var CURRENCY_MARKS = [
+  "$",
+  "\u20AC",
+  "\xA3",
+  "\xA5",
+  "\uFFE5",
+  "\u20A9",
+  "\u20B9",
+  "\u20BD",
+  "\u20BA",
+  "\u20B4",
+  "\u20A6",
+  "\u0E3F",
+  "\u20AB",
+  "\u20B1",
+  "\u20AA",
+  "\u20A1",
+  "\u20B2",
+  "\u20B8",
+  "\u20BC",
+  "\u20BE",
+  "\xA2",
+  "\xA4"
+];
+var MAX_MINOR_UNITS = Number(10n ** 15n - 1n);
+var ASCII_DIGITS = {};
+for (const [start, base] of [
+  [1632, 0],
+  [1776, 0],
+  [65296, 0]
+]) {
+  for (let i = 0; i < 10; i += 1) ASCII_DIGITS[String.fromCharCode(start + i)] = String(base + i);
+}
+function normalizeDigits(text) {
+  return Array.from(text, (char) => ASCII_DIGITS[char] ?? char).join("");
+}
+function isValidCurrency(code) {
+  if (!/^[A-Za-z]{3}$/.test(code)) return false;
+  const upper = code.toUpperCase();
+  const intlWithSupport = Intl;
+  const supported = typeof intlWithSupport.supportedValuesOf === "function" ? intlWithSupport.supportedValuesOf("currency") : null;
+  if (supported?.includes(upper)) return true;
+  try {
+    const format = new Intl.NumberFormat("en", { style: "currency", currency: upper });
+    const digits = format.resolvedOptions().maximumFractionDigits;
+    const symbol = format.formatToParts(1).find((part) => part.type === "currency")?.value;
+    if (supported && symbol === upper && digits === 2) return false;
+    return true;
+  } catch {
+    return false;
+  }
+}
+function getCurrencyDigits(currency, override) {
+  if (override != null) {
+    if (!Number.isInteger(override) || override < 0 || override > 20) {
+      throw new Error(`fractionDigits must be an integer from 0 to 20, got ${override}`);
+    }
+    return override;
+  }
+  const code = currency.toUpperCase();
+  const cached = digitCache.get(code);
+  if (cached != null) return cached;
+  if (!isValidCurrency(code)) {
+    throw new Error(`Unknown currency "${currency}". Expected an ISO 4217 code Intl recognizes.`);
+  }
+  const digits = new Intl.NumberFormat("en", { style: "currency", currency: code }).resolvedOptions().maximumFractionDigits;
+  const resolved = digits ?? 0;
+  digitCache.set(code, resolved);
+  return resolved;
+}
+function numberToDecimal(value) {
+  if (!Number.isFinite(value)) {
+    throw new Error(`Amount must be a finite number, got ${value}`);
+  }
+  const negative = value < 0;
+  const text = Math.abs(value).toString().toLowerCase();
+  const expanded = text.includes("e") ? expandExponential(text) : text;
+  return negative ? `-${expanded}` : expanded;
+}
+function expandExponential(text) {
+  const [coeff, expStr] = text.split("e");
+  const exp = Number(expStr);
+  const [head, tail = ""] = coeff.split(".");
+  const digits = `${head}${tail}`.replace(/^0+/, "") || "0";
+  const point = head.length + exp;
+  if (point <= 0) return `0.${"0".repeat(-point)}${digits}`;
+  if (point >= digits.length) return digits + "0".repeat(point - digits.length);
+  return `${digits.slice(0, point)}.${digits.slice(point)}`;
+}
+function roundHalfExpand(unsigned, digits) {
+  if (!/^\d+(\.\d+)?$/.test(unsigned)) {
+    throw new Error(`Not a decimal amount: ${unsigned}`);
+  }
+  const [wholeRaw, frac = ""] = unsigned.split(".");
+  const whole = wholeRaw.replace(/^0+(?=\d)/, "") || "0";
+  if (frac.length <= digits) {
+    if (digits === 0) return whole;
+    return `${whole}.${frac.padEnd(digits, "0")}`;
+  }
+  const keep = frac.slice(0, digits);
+  const roundUp = frac.charCodeAt(digits) - 48 >= 5;
+  if (!roundUp) {
+    if (digits === 0) return whole;
+    return `${whole}.${keep}`;
+  }
+  const body = `${whole}${keep}`.replace(/^0+(?=\d)/, "") || "0";
+  const bumped = (BigInt(body) + 1n).toString();
+  if (digits === 0) return bumped;
+  const padded = bumped.padStart(digits + 1, "0");
+  return `${padded.slice(0, -digits)}.${padded.slice(-digits)}`;
+}
+function minorFromRounded(rounded, negative) {
+  const digits = rounded.replace(".", "").replace(/^0+(?=\d)/, "") || "0";
+  if (BigInt(digits) > BigInt(Number.MAX_SAFE_INTEGER)) {
+    throw new Error(
+      `Amount exceeds Number.MAX_SAFE_INTEGER minor units (${Number.MAX_SAFE_INTEGER})`
+    );
+  }
+  const minor = Number(digits);
+  return negative ? -minor : minor;
+}
+function signedParts(decimal) {
+  const trimmed = decimal.trim();
+  if (!/^[+-]?\d+(\.\d+)?$/.test(trimmed)) {
+    throw new Error(`Not a decimal amount: ${decimal}`);
+  }
+  return { negative: trimmed.startsWith("-"), unsigned: trimmed.replace(/^[+-]/, "") };
+}
+function toMinorUnits(major, currency, override) {
+  const digits = getCurrencyDigits(currency, override);
+  const text = numberToDecimal(major);
+  const { negative, unsigned } = signedParts(text);
+  return minorFromRounded(roundHalfExpand(unsigned, digits), negative);
+}
+function toDecimalString(minor, currency, override) {
+  if (!Number.isSafeInteger(minor)) {
+    throw new Error(`Minor units must be a safe integer, got ${minor}`);
+  }
+  const digits = getCurrencyDigits(currency, override);
+  const negative = minor < 0;
+  const abs = Math.abs(minor).toString();
+  if (digits === 0) return `${negative ? "-" : ""}${abs}`;
+  const padded = abs.padStart(digits + 1, "0");
+  return `${negative ? "-" : ""}${padded.slice(0, -digits)}.${padded.slice(-digits)}`;
+}
+function parseDecimalString(decimal, currency, override) {
+  const digits = getCurrencyDigits(currency, override);
+  const { negative, unsigned } = signedParts(decimal);
+  return minorFromRounded(roundHalfExpand(unsigned, digits), negative);
+}
+function fromMinorUnits(minor, currency, override) {
+  return Number(toDecimalString(minor, currency, override));
+}
+function formatMoney2(minor, currency, options) {
+  const digits = getCurrencyDigits(currency, options?.fractionDigits);
+  const decimal = toDecimalString(minor, currency, options?.fractionDigits);
+  const display = options?.display ?? "narrowSymbol";
+  const format = display === "none" ? new Intl.NumberFormat(options?.locale, {
+    style: "decimal",
+    useGrouping: true,
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits
+  }) : new Intl.NumberFormat(options?.locale, {
+    style: "currency",
+    currency: currency.toUpperCase(),
+    currencyDisplay: display,
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits
+  });
+  return formatExact(format, decimal);
+}
+function formatExact(format, decimal) {
+  return format.format(decimal);
+}
+function affixSide(locale, currency) {
+  const parts = new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency: currency.toUpperCase()
+  }).formatToParts(1);
+  const currencyIndex = parts.findIndex((part) => part.type === "currency");
+  const integerIndex = parts.findIndex((part) => part.type === "integer");
+  return currencyIndex < integerIndex ? "start" : "end";
+}
+function currencySymbol(locale, currency, display) {
+  if (display === "none") return "";
+  if (display === "code") return currency.toUpperCase();
+  const part = new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency: currency.toUpperCase(),
+    currencyDisplay: display
+  }).formatToParts(1).find((item) => item.type === "currency");
+  return part?.value ?? currency.toUpperCase();
+}
+function currencyName(locale, currency) {
+  try {
+    return new Intl.DisplayNames(locale, { type: "currency" }).of(currency.toUpperCase()) ?? currency.toUpperCase();
+  } catch {
+    return currency.toUpperCase();
+  }
+}
+function groupSeparator(locale) {
+  return new Intl.NumberFormat(locale, { useGrouping: true }).formatToParts(11111).find((part) => part.type === "group")?.value ?? "";
+}
+function symbolsFor(locale, currency) {
+  if (!isValidCurrency(currency)) return [];
+  const found = [];
+  for (const display of ["symbol", "narrowSymbol"]) {
+    const part = new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: currency.toUpperCase(),
+      currencyDisplay: display
+    }).formatToParts(1).find((item) => item.type === "currency")?.value;
+    if (part) found.push(part);
+  }
+  return found;
+}
+function normalizePaste(raw, locale, currency, options) {
+  let text = raw.trim();
+  let negative = false;
+  if (/^\(.*\)$/.test(text)) {
+    if (!options?.allowNegative) return { text: null, currency: null };
+    text = text.slice(1, -1).trim();
+    negative = true;
+  }
+  text = stripLettersBesideMarks(text);
+  const allowed = new Set((options?.currencies ?? []).map((code) => code.toUpperCase()));
+  let named = null;
+  for (const match of text.matchAll(/\b([A-Za-z]{3})\b/g)) {
+    const code = match[1].toUpperCase();
+    if (!isValidCurrency(code)) continue;
+    if (!named && allowed.has(code) && code !== currency.toUpperCase()) named = code;
+    text = text.replace(match[0], " ");
+  }
+  const symbols = new Set(CURRENCY_MARKS);
+  for (const code of [currency, named, ...options?.currencies ?? []]) {
+    if (code) symbolsFor(locale, code).forEach((symbol) => symbols.add(symbol));
+  }
+  const ordered = [...symbols].filter(Boolean).sort((a, b) => b.length - a.length);
+  for (const symbol of ordered) text = text.split(symbol).join("");
+  const group = groupSeparator(locale);
+  text = Array.from(text).filter((char) => {
+    if (!/\s/u.test(char)) return true;
+    return group !== "" && group.includes(char);
+  }).join("").trim();
+  if (/[eE]/.test(text) || !/[\d٠-٩۰-۹０-９]/.test(text)) {
+    return { text: null, currency: named };
+  }
+  if (negative && !text.startsWith("-")) text = `-${text}`;
+  return { text, currency: named };
+}
+var MARK_CLASS = CURRENCY_MARKS.map((mark) => mark.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("");
+function stripLettersBesideMarks(text) {
+  const beside = new RegExp(`[A-Za-z]+(?=\\s*[${MARK_CLASS}])|(?<=[${MARK_CLASS}]\\s*)[A-Za-z]+`, "gu");
+  return text.replace(beside, "");
+}
+function roundingChangesValue(raw, locale, digits) {
+  const decimal = new Intl.NumberFormat(locale).formatToParts(1.1).find((part) => part.type === "decimal")?.value ?? ".";
+  const group = groupSeparator(locale);
+  let text = normalizeDigits(raw.trim()).replace(/^[+-]/, "");
+  if (group) text = text.split(group).join("");
+  if (decimal !== ".") text = text.replace(decimal, ".");
+  if (!/^\d+(\.\d+)?$/.test(text)) return false;
+  const fraction = text.split(".")[1] ?? "";
+  if (fraction.length <= digits) return false;
+  const [whole, frac = ""] = text.split(".");
+  const cut = digits === 0 ? whole : `${whole}.${frac.slice(0, digits)}`;
+  return roundHalfExpand(text, digits) !== roundHalfExpand(cut, digits);
+}
+var MoneyFieldContext = React10.createContext(null);
+function useMoneyField() {
+  const value = React10.useContext(MoneyFieldContext);
+  if (!value) throw new Error("MoneyField parts must be rendered inside MoneyField.Root");
+  return value;
+}
+var CURRENCY_SEARCH_THRESHOLD = 12;
+function CurrencyItemLabel({ code, locale }) {
+  return /* @__PURE__ */ jsxs("span", { className: "MoneyFieldCurrencyItem", children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      code,
+      " \xB7 ",
+      currencyName(locale, code)
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "MoneyFieldCurrencySymbol", children: currencySymbol(locale, code, "narrowSymbol") })
+  ] });
+}
+function Chevron() {
+  return /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined MoneyFieldCurrencyIcon", children: "expand_more" });
+}
+function CurrencySelect() {
+  const {
+    currency,
+    currencies,
+    locale,
+    currencyLabel,
+    disabled,
+    readOnly,
+    searchable,
+    onCurrencyChange
+  } = useMoneyField();
+  const codes = currencies ?? [];
+  const locked = disabled || readOnly;
+  const search = searchable === true || searchable !== false && codes.length > CURRENCY_SEARCH_THRESHOLD;
+  const triggerName = `${currencyLabel}, ${currency}`;
+  if (search) {
+    return /* @__PURE__ */ jsx(Field.Root, { className: "MoneyFieldCurrencyField", children: /* @__PURE__ */ jsxs(
+      Combobox.Root,
+      {
+        items: codes,
+        value: currency,
+        onValueChange: (next) => {
+          if (typeof next === "string") onCurrencyChange(next);
+        },
+        itemToStringLabel: (code) => `${code} ${currencyName(locale, code)}`,
+        disabled: locked,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "MoneyFieldCurrency", children: /* @__PURE__ */ jsxs(Combobox.Trigger, { className: "MoneyFieldCurrencyTrigger", "aria-label": triggerName, disabled: locked, children: [
+            /* @__PURE__ */ jsx("span", { className: "MoneyFieldCurrencyCode", children: currency }),
+            /* @__PURE__ */ jsx(Chevron, {})
+          ] }) }),
+          /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { sideOffset: 4, align: "start", children: /* @__PURE__ */ jsxs(Combobox.Popup, { className: "MoneyFieldCurrencyPopup", children: [
+            /* @__PURE__ */ jsx(Combobox.Input, { "aria-label": `Filter ${currencyLabel}`, placeholder: "Code or name" }),
+            /* @__PURE__ */ jsx(Combobox.Empty, { children: "No currencies" }),
+            /* @__PURE__ */ jsx(Combobox.List, { children: (code) => /* @__PURE__ */ jsx(Combobox.Item, { value: code, children: /* @__PURE__ */ jsx(CurrencyItemLabel, { code, locale }) }, code) })
+          ] }) }) })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Field.Root, { className: "MoneyFieldCurrencyField", children: /* @__PURE__ */ jsxs(
+    Select.Root,
+    {
+      items: codes.map((code) => ({ value: code, label: code })),
+      value: currency,
+      onValueChange: (next) => {
+        if (next) onCurrencyChange(next);
+      },
+      disabled: locked,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "MoneyFieldCurrency", children: /* @__PURE__ */ jsxs(Select.Trigger, { className: "MoneyFieldCurrencyTrigger", "aria-label": triggerName, disabled: locked, children: [
+          /* @__PURE__ */ jsx(Select.Value, { className: "MoneyFieldCurrencyCode" }),
+          /* @__PURE__ */ jsx(Select.Icon, { children: /* @__PURE__ */ jsx(Chevron, {}) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { sideOffset: 4, align: "start", children: /* @__PURE__ */ jsx(Select.Popup, { className: "MoneyFieldCurrencyPopup", children: /* @__PURE__ */ jsx(Select.List, { children: codes.map((code) => /* @__PURE__ */ jsx(Select.Item, { value: code, children: /* @__PURE__ */ jsx(Select.ItemText, { children: /* @__PURE__ */ jsx(CurrencyItemLabel, { code, locale }) }) }, code)) }) }) }) })
+      ]
+    }
+  ) });
+}
+function documentLocale() {
+  if (typeof document !== "undefined" && document.documentElement.lang) return document.documentElement.lang;
+  if (typeof navigator !== "undefined" && navigator.language) return navigator.language;
+  return "en";
+}
+function spokenAmount(minor, currency, fractionDigits) {
+  return toDecimalString(minor, currency, fractionDigits).replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "");
+}
+function assignRef(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+function describedBy(existing, ...ids) {
+  const parts = /* @__PURE__ */ new Set();
+  for (const value of [existing, ...ids]) {
+    if (!value) continue;
+    for (const id of value.split(/\s+/)) if (id) parts.add(id);
+  }
+  return parts.size ? [...parts].join(" ") : void 0;
+}
+var MoneyFieldRoot = React10.forwardRef(function MoneyFieldRoot2({
+  value: valueProp,
+  defaultValue = null,
+  onValueChange,
+  onValueCommitted,
+  currency: currencyProp,
+  defaultCurrency,
+  currencies,
+  onCurrencyChange: onCurrencyChangeProp,
+  locale: localeProp,
+  fractionDigits,
+  trailingZeros = "always",
+  allowNegative = false,
+  min,
+  max,
+  steps,
+  symbolDisplay = "narrowSymbol",
+  align = "start",
+  name,
+  submitAs = "decimal",
+  currencyName: currencyNameProp,
+  currencyLabel = "Currency",
+  searchable = "auto",
+  size = "md",
+  allowWheelScrub = false,
+  className,
+  children,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  id,
+  ...rest
+}, ref) {
+  const locale = localeProp || documentLocale();
+  const fallback = currencyProp ?? defaultCurrency ?? currencies?.[0];
+  if (process.env.NODE_ENV !== "production") {
+    if (!fallback) {
+      throw new Error("MoneyField needs `currency`, `defaultCurrency`, or a non-empty `currencies` list.");
+    }
+    for (const code of [fallback, ...currencies ?? []]) {
+      if (!isValidCurrency(code)) {
+        throw new Error(`Unknown currency "${code}". Expected an ISO 4217 code Intl recognizes.`);
+      }
+    }
+  }
+  const [currencyState, setCurrencyState] = React10.useState(fallback ?? "USD");
+  const currency = (currencyProp ?? currencyState).toUpperCase();
+  const digits = getCurrencyDigits(currency, fractionDigits);
+  const [uncontrolled, setUncontrolled] = React10.useState(defaultValue);
+  const minor = valueProp !== void 0 ? valueProp : uncontrolled;
+  const major = minor == null ? null : fromMinorUnits(minor, currency, fractionDigits);
+  const currencyRef = React10.useRef(currency);
+  const minorRef = React10.useRef(minor);
+  const majorRef = React10.useRef(major);
+  if (currencyRef.current === currency) {
+    minorRef.current = minor;
+    majorRef.current = major;
+  }
+  const inputRef = React10.useRef(null);
+  const formattingRef = React10.useRef(false);
+  const rawRef = React10.useRef("");
+  const descriptionId = React10.useId();
+  const liveId = React10.useId();
+  const [live, setLive] = React10.useState("");
+  const [focused, setFocused] = React10.useState(false);
+  const [blurCount, setBlurCount] = React10.useState(0);
+  const [pendingSign, setPendingSign] = React10.useState(1);
+  const pendingSignRef = React10.useRef(pendingSign);
+  pendingSignRef.current = pendingSign;
+  const [draftMajor, setDraftMajor] = React10.useState(void 0);
+  const showPicker = (currencies?.length ?? 0) >= 2;
+  const symbol = currencySymbol(locale, currency, symbolDisplay);
+  const side = affixSide(locale, currency);
+  const showSymbol = symbolDisplay !== "none" && symbol !== "";
+  const minMinor = min ?? (allowNegative ? void 0 : 0);
+  const maxMinor = Math.min(max ?? MAX_MINOR_UNITS, MAX_MINOR_UNITS);
+  const minorPerMajor = 10 ** digits;
+  const stepMinor = steps?.step ?? minorPerMajor;
+  const smallMinor = steps?.small ?? 1;
+  const largeMinor = steps?.large ?? 100 * minorPerMajor;
+  const majorStep = fromMinorUnits(stepMinor, currency, fractionDigits);
+  const step = majorStep === 1 ? "any" : majorStep;
+  const publish = React10.useCallback(
+    (nextMinor, reason, commit) => {
+      const code = currencyRef.current;
+      const decimal = nextMinor == null ? null : toDecimalString(nextMinor, code, fractionDigits);
+      minorRef.current = nextMinor;
+      majorRef.current = nextMinor == null ? null : fromMinorUnits(nextMinor, code, fractionDigits);
+      if (valueProp === void 0) setUncontrolled(nextMinor);
+      onValueChange?.(nextMinor, { currency: code, decimal, reason });
+      if (commit) onValueCommitted?.(nextMinor, { currency: code, decimal });
+    },
+    [fractionDigits, onValueChange, onValueCommitted, valueProp]
+  );
+  const changeCurrency = React10.useCallback(
+    (next) => {
+      const code = next.toUpperCase();
+      if (code === currencyRef.current) return;
+      if (currencyProp === void 0) setCurrencyState(code);
+      onCurrencyChangeProp?.(code);
+    },
+    [currencyProp, onCurrencyChangeProp]
+  );
+  React10.useLayoutEffect(() => {
+    if (currencyRef.current === currency) return;
+    const previousMajor = majorRef.current;
+    const previousMinor = minorRef.current;
+    currencyRef.current = currency;
+    setDraftMajor(void 0);
+    const nameOf = currencyName(locale, currency);
+    if (valueProp !== void 0) {
+      minorRef.current = valueProp;
+      majorRef.current = valueProp == null ? null : fromMinorUnits(valueProp, currency, fractionDigits);
+      setLive(`Currency changed to ${nameOf}.`);
+      return;
+    }
+    if (previousMajor == null || previousMinor == null) {
+      setLive(`Currency changed to ${nameOf}.`);
+      return;
+    }
+    const nextMinor = toMinorUnits(previousMajor, currency, fractionDigits);
+    if (nextMinor !== previousMinor) {
+      publish(nextMinor, "none", true);
+      setLive(`Currency changed to ${nameOf}. Amount rounded to ${spokenAmount(nextMinor, currency, fractionDigits)}.`);
+    } else {
+      setLive(`Currency changed to ${nameOf}.`);
+    }
+  }, [currency, fractionDigits, locale, publish, valueProp]);
+  const onPasteCapture = React10.useCallback(
+    (event) => {
+      const input = event.target instanceof HTMLInputElement ? event.target : null;
+      if (!input || input.type === "number" || input.type === "hidden" || readOnly || disabled) return;
+      const raw = event.clipboardData?.getData("text/plain") ?? "";
+      const normalized = normalizePaste(raw, locale, currencyRef.current, { allowNegative, currencies });
+      if (normalized.currency) changeCurrency(normalized.currency);
+      if (normalized.text == null) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!allowNegative && /^\(.*\)$/.test(raw.trim())) {
+          setLive("Negative amounts aren't allowed here.");
+        }
+        return;
+      }
+      if (normalized.text === raw) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const start = input.selectionStart ?? input.value.length;
+      const end = input.selectionEnd ?? start;
+      const next = input.value.slice(0, start) + normalized.text + input.value.slice(end);
+      const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+      setter?.call(input, next);
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    },
+    [allowNegative, changeCurrency, currencies, disabled, locale, readOnly]
+  );
+  const onKeyDownCapture = React10.useCallback((event) => {
+    if (event.key === "e" || event.key === "E") {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, []);
+  const onInputCapture = React10.useCallback((event) => {
+    const input = event.target instanceof HTMLInputElement ? event.target : null;
+    if (!input || input.type === "number" || input.type === "hidden" || formattingRef.current) return;
+    rawRef.current = input.value;
+    setLive("");
+  }, []);
+  const onGroupBlur = React10.useCallback(
+    (event) => {
+      if (event.currentTarget.contains(event.relatedTarget)) return;
+      const raw = inputRef.current?.value || rawRef.current;
+      const code = currencyRef.current;
+      const current = minorRef.current;
+      const places = getCurrencyDigits(code, fractionDigits);
+      if (current != null && raw && roundingChangesValue(raw, locale, places)) {
+        setLive(`Rounded to ${formatMoney2(current, code, { locale, display: symbolDisplay, fractionDigits })}.`);
+      }
+      setBlurCount((n) => n + 1);
+    },
+    [fractionDigits, locale, symbolDisplay]
+  );
+  const whole = trailingZeros === "auto" && (minor == null || digits > 0 && minor % minorPerMajor === 0);
+  const amountFormat = new Intl.NumberFormat(locale, {
+    style: "decimal",
+    useGrouping: true,
+    minimumFractionDigits: whole || digits === 0 ? 0 : digits,
+    maximumFractionDigits: digits
+  });
+  const formattedAmount = minor == null ? "" : amountFormat.format(
+    toDecimalString(minor, currency, fractionDigits)
+  );
+  React10.useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (!input || input.ownerDocument.activeElement === input || input.value === formattedAmount) return;
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+    formattingRef.current = true;
+    setter?.call(input, formattedAmount);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    formattingRef.current = false;
+  }, [blurCount, formattedAmount]);
+  const messages = React10.useMemo(
+    () => ({
+      valueMissing: "Enter an amount",
+      rangeUnderflow: minMinor == null ? "Enter an amount" : `Enter an amount of at least ${formatMoney2(minMinor, currency, { locale, display: symbolDisplay, fractionDigits })}`,
+      rangeOverflow: `Enter an amount of ${formatMoney2(maxMinor, currency, { locale, display: symbolDisplay, fractionDigits })} or less`
+    }),
+    [currency, fractionDigits, locale, maxMinor, minMinor, symbolDisplay]
+  );
+  const context = React10.useMemo(
+    () => ({
+      currency,
+      currencies,
+      locale,
+      affix: side,
+      symbol,
+      symbolDisplay,
+      showPicker,
+      showSymbol,
+      digits,
+      currencyLabel,
+      disabled,
+      readOnly,
+      allowNegative,
+      minor,
+      searchable,
+      descriptionId,
+      liveId,
+      pendingSign,
+      messages,
+      inputRef,
+      onCurrencyChange: changeCurrency,
+      onToggleSign: () => {
+        if (disabled || readOnly) return;
+        if (minorRef.current == null) {
+          setPendingSign((sign) => sign < 0 ? 1 : -1);
+          return;
+        }
+        setPendingSign(1);
+        publish(-minorRef.current, "none", true);
+      },
+      onPasteCapture,
+      onKeyDownCapture,
+      onInputCapture,
+      onGroupBlur,
+      focusInput: () => inputRef.current?.focus()
+    }),
+    [
+      allowNegative,
+      changeCurrency,
+      currency,
+      currencies,
+      currencyLabel,
+      descriptionId,
+      digits,
+      liveId,
+      messages,
+      pendingSign,
+      disabled,
+      locale,
+      minor,
+      onGroupBlur,
+      onInputCapture,
+      onKeyDownCapture,
+      onPasteCapture,
+      publish,
+      readOnly,
+      searchable,
+      showPicker,
+      showSymbol,
+      side,
+      symbol,
+      symbolDisplay
+    ]
+  );
+  const submitted = minor == null ? "" : submitAs === "minor" ? String(minor) : toDecimalString(minor, currency, fractionDigits);
+  return /* @__PURE__ */ jsx(MoneyFieldContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    NumberField.Root,
+    {
+      ref,
+      id,
+      value: draftMajor !== void 0 ? draftMajor : major,
+      onValueChange: (next, details) => {
+        if (formattingRef.current) return;
+        const typing = details.reason === "input-change" || details.reason === "input-paste";
+        let parsed = next;
+        if (pendingSignRef.current < 0 && parsed != null && parsed > 0) parsed = -parsed;
+        if (typing) setDraftMajor(parsed);
+        else {
+          setDraftMajor(void 0);
+          if (pendingSignRef.current < 0) setPendingSign(1);
+        }
+        const nextMinor = parsed == null ? null : toMinorUnits(parsed, currencyRef.current, fractionDigits);
+        if (nextMinor === minorRef.current && details.reason !== "input-clear") return;
+        publish(nextMinor, details.reason, !typing);
+      },
+      locale,
+      format: {
+        style: "decimal",
+        useGrouping: true,
+        minimumFractionDigits: whole || digits === 0 ? 0 : digits,
+        maximumFractionDigits: digits
+      },
+      min: minMinor == null ? void 0 : fromMinorUnits(minMinor, currency, fractionDigits),
+      max: fromMinorUnits(maxMinor, currency, fractionDigits),
+      step,
+      smallStep: fromMinorUnits(smallMinor, currency, fractionDigits),
+      largeStep: fromMinorUnits(largeMinor, currency, fractionDigits),
+      ...rest,
+      allowOutOfRange: true,
+      allowWheelScrub,
+      disabled,
+      readOnly,
+      required,
+      "data-currency": currency,
+      "data-affix": showPicker || showSymbol ? side : void 0,
+      "data-affix-kind": showPicker ? "picker" : showSymbol ? "symbol" : void 0,
+      "data-negative": minor != null && minor < 0 ? "" : void 0,
+      "data-align": align,
+      "data-size": size,
+      "data-disabled": disabled ? "" : void 0,
+      "data-readonly": readOnly ? "" : void 0,
+      "data-focused": focused ? "" : void 0,
+      className: (state) => cn("MoneyField", typeof className === "function" ? className(state) : className),
+      onFocus: () => setFocused(true),
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Field.Description, { id: descriptionId, className: "visually-hidden", children: currencyName(locale, currency) }),
+        /* @__PURE__ */ jsx(Field.Description, { id: liveId, className: "visually-hidden", "aria-live": "polite", children: live }),
+        name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: submitted }) : null,
+        showPicker && currencyNameProp ? /* @__PURE__ */ jsx("input", { type: "hidden", name: currencyNameProp, value: currency }) : null
+      ]
+    }
+  ) });
+});
+var MoneyFieldGroup = React10.forwardRef(
+  function MoneyFieldGroup2({ className, onPasteCapture, onKeyDownCapture, onInputCapture, onBlur, ...props }, ref) {
+    const money = useMoneyField();
+    return /* @__PURE__ */ jsx(
+      NumberField.Group,
+      {
+        ref,
+        className: (state) => cn("MoneyFieldGroup", typeof className === "function" ? className(state) : className),
+        onPasteCapture: (event) => {
+          onPasteCapture?.(event);
+          if (!event.defaultPrevented) money.onPasteCapture(event);
+        },
+        onKeyDownCapture: (event) => {
+          onKeyDownCapture?.(event);
+          if (!event.defaultPrevented) money.onKeyDownCapture(event);
+        },
+        onInputCapture: (event) => {
+          onInputCapture?.(event);
+          money.onInputCapture(event);
+        },
+        onBlur: (event) => {
+          onBlur?.(event);
+          money.onGroupBlur(event);
+        },
+        ...props
+      }
+    );
+  }
+);
+var MoneyFieldInput = React10.forwardRef(
+  function MoneyFieldInput2({ className, ...props }, ref) {
+    const money = useMoneyField();
+    return /* @__PURE__ */ jsx(
+      NumberField.Input,
+      {
+        ref: (node) => {
+          money.inputRef.current = node;
+          assignRef(ref, node);
+        },
+        className: (state) => cn("MoneyFieldInput", typeof className === "function" ? className(state) : className),
+        inputMode: money.digits > 0 ? "decimal" : "numeric",
+        ...props,
+        "aria-describedby": describedBy(
+          typeof props["aria-describedby"] === "string" ? props["aria-describedby"] : void 0,
+          money.descriptionId,
+          money.liveId
+        )
+      }
+    );
+  }
+);
+var MoneyFieldAffix = React10.forwardRef(
+  function MoneyFieldAffix2({ className, ...props }, ref) {
+    const money = useMoneyField();
+    if (money.showPicker) return /* @__PURE__ */ jsx(CurrencySelect, {});
+    if (!money.showSymbol) return null;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn("MoneyFieldAffix", className),
+        "aria-hidden": "true",
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: money.focusInput,
+        ...props,
+        children: money.symbol
+      }
+    );
+  }
+);
+function SignToggle() {
+  const money = useMoneyField();
+  if (!money.allowNegative) return null;
+  const negative = money.minor != null ? money.minor < 0 : money.pendingSign < 0;
+  const label = money.minor == null && negative ? "The next amount will be negative" : negative ? "Make amount positive" : "Make amount negative";
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      emphasis: "quiet",
+      className: "MoneyFieldSign",
+      "aria-label": label,
+      disabled: money.disabled || money.readOnly,
+      onClick: money.onToggleSign,
+      children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: negative ? "remove" : "add" })
+    }
+  );
+}
+var MoneyFieldError = React10.forwardRef(
+  function MoneyFieldError2({ match, children, ...props }, ref) {
+    const money = useMoneyField();
+    const fallback = match === "valueMissing" ? money.messages.valueMissing : match === "rangeUnderflow" ? money.messages.rangeUnderflow : match === "rangeOverflow" ? money.messages.rangeOverflow : null;
+    return /* @__PURE__ */ jsx(Field.Error, { ref, match, ...props, children: children ?? fallback });
+  }
+);
+function ownsError(children, match) {
+  let found = false;
+  React10.Children.forEach(children, (child) => {
+    if (!React10.isValidElement(child) || child.type !== MoneyFieldError) return;
+    const childMatch = child.props.match;
+    if (childMatch == null || childMatch === true || childMatch === match) found = true;
+  });
+  return found;
+}
+var MoneyField = Object.assign(
+  React10.forwardRef(function MoneyField2({ placeholder, steppers = false, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(MoneyFieldRoot, { ref, "data-steppers": steppers ? "" : void 0, ...props, children: [
+      /* @__PURE__ */ jsxs(MoneyFieldGroup, { children: [
+        /* @__PURE__ */ jsx(AffixSlot, { side: "start" }),
+        /* @__PURE__ */ jsx(MoneyFieldInput, { placeholder }),
+        /* @__PURE__ */ jsx(SignToggle, {}),
+        steppers ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(NumberField.Increment, { "aria-label": "Increase", children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: "add" }) }),
+          /* @__PURE__ */ jsx(NumberField.Decrement, { "aria-label": "Decrease", children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: "remove" }) })
+        ] }) : null,
+        /* @__PURE__ */ jsx(AffixSlot, { side: "end" })
+      ] }),
+      children,
+      ownsError(children, "valueMissing") ? null : /* @__PURE__ */ jsx(MoneyFieldError, { match: "valueMissing" }),
+      ownsError(children, "rangeUnderflow") ? null : /* @__PURE__ */ jsx(MoneyFieldError, { match: "rangeUnderflow" }),
+      ownsError(children, "rangeOverflow") ? null : /* @__PURE__ */ jsx(MoneyFieldError, { match: "rangeOverflow" })
+    ] });
+  }),
+  {
+    Root: MoneyFieldRoot,
+    Group: MoneyFieldGroup,
+    Input: MoneyFieldInput,
+    Affix: MoneyFieldAffix,
+    CurrencySelect,
+    Increment: NumberField.Increment,
+    Decrement: NumberField.Decrement,
+    Error: MoneyFieldError
+  }
+);
+function AffixSlot({ side }) {
+  const money = useMoneyField();
+  if (money.affix !== side) return null;
+  if (!money.showPicker && !money.showSymbol) return null;
+  return /* @__PURE__ */ jsx(MoneyFieldAffix, {});
+}
+
+// src/custom/date-picker/date-utils.ts
+var ISO = /^(\d{4})-(\d{2})-(\d{2})$/;
+function parseDate(value) {
+  const match = ISO.exec(value);
+  if (!match) return null;
+  const y = Number(match[1]);
+  const m = Number(match[2]);
+  const d = Number(match[3]);
+  if (m < 1 || m > 12 || d < 1 || d > daysInMonth(y, m)) return null;
+  return { y, m, d };
+}
+function formatDate(y, m, d) {
+  return `${String(y).padStart(4, "0")}-${String(m).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+}
+function daysInMonth(year, month) {
+  return new Date(Date.UTC(year, month, 0)).getUTCDate();
+}
+function utc(value) {
+  const parts = parseDate(value);
+  if (!parts) throw new Error(`Not an ISO date: ${value}`);
+  return new Date(Date.UTC(parts.y, parts.m - 1, parts.d));
+}
+function fromUtc(date) {
+  return formatDate(date.getUTCFullYear(), date.getUTCMonth() + 1, date.getUTCDate());
+}
+function todayDate(now = /* @__PURE__ */ new Date()) {
+  return formatDate(now.getFullYear(), now.getMonth() + 1, now.getDate());
+}
+function compare(a, b) {
+  if (a === b) return 0;
+  return a < b ? -1 : 1;
+}
+function addDays(value, days) {
+  const date = utc(value);
+  date.setUTCDate(date.getUTCDate() + days);
+  return fromUtc(date);
+}
+function addMonths(value, months) {
+  const parts = parseDate(value);
+  if (!parts) throw new Error(`Not an ISO date: ${value}`);
+  const index = parts.y * 12 + (parts.m - 1) + months;
+  const y = Math.floor(index / 12);
+  const m = index - y * 12 + 1;
+  return formatDate(y, m, Math.min(parts.d, daysInMonth(y, m)));
+}
+function addYears(value, years) {
+  return addMonths(value, years * 12);
+}
+function startOfMonth(value) {
+  const parts = parseDate(value);
+  if (!parts) throw new Error(`Not an ISO date: ${value}`);
+  return formatDate(parts.y, parts.m, 1);
+}
+function endOfMonth(value) {
+  const parts = parseDate(value);
+  if (!parts) throw new Error(`Not an ISO date: ${value}`);
+  return formatDate(parts.y, parts.m, daysInMonth(parts.y, parts.m));
+}
+function startOfWeek(value, weekStartsOn) {
+  const day = utc(value).getUTCDay();
+  const delta = (day - weekStartsOn + 7) % 7;
+  return addDays(value, -delta);
+}
+function endOfWeek(value, weekStartsOn) {
+  return addDays(startOfWeek(value, weekStartsOn), 6);
+}
+function isoWeek(value) {
+  const date = utc(value);
+  const day = date.getUTCDay() || 7;
+  date.setUTCDate(date.getUTCDate() + 4 - day);
+  const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1));
+  return Math.ceil(((date.getTime() - yearStart.getTime()) / 864e5 + 1) / 7);
+}
+function clampDate(value, min, max) {
+  if (min && compare(value, min) < 0) return min;
+  if (max && compare(value, max) > 0) return max;
+  return value;
+}
+function isWithin(value, min, max) {
+  if (min && compare(value, min) < 0) return false;
+  if (max && compare(value, max) > 0) return false;
+  return true;
+}
+function inclusiveDays(start, end) {
+  const [a, b] = compare(start, end) <= 0 ? [start, end] : [end, start];
+  return Math.round((utc(b).getTime() - utc(a).getTime()) / 864e5) + 1;
+}
+function orderRange(a, b) {
+  return compare(a, b) <= 0 ? { start: a, end: b } : { start: b, end: a };
+}
+function lengthBlockReason(start, day, minLength, maxLength) {
+  const len = inclusiveDays(start, day);
+  if (maxLength != null && len > maxLength) return `Ranges can be up to ${maxLength} days`;
+  if (minLength != null && len < minLength) return `Ranges must be at least ${minLength} days`;
+  return null;
+}
+var SUNDAY_FIRST = /* @__PURE__ */ new Set(["US", "CA", "MX", "BR", "JP", "IL", "PH", "AU", "NZ", "IN", "KR", "TW", "TH", "ZA", "SA"]);
+function localeRegion(locale) {
+  const tag = locale.trim().replace(/_/g, "-");
+  if (!tag.includes("-")) return /^en$/i.test(tag) ? "US" : null;
+  try {
+    return new Intl.Locale(tag).region ?? null;
+  } catch {
+    const part = tag.split("-").find((piece) => /^[A-Za-z]{2}$/.test(piece));
+    return part ? part.toUpperCase() : null;
+  }
+}
+function defaultWeekStartsOn(locale) {
+  try {
+    const loc = new Intl.Locale(locale);
+    const info = typeof loc.getWeekInfo === "function" ? loc.getWeekInfo() : loc.weekInfo;
+    const first = info?.firstDay;
+    if (typeof first === "number" && first >= 1 && first <= 7) return first === 7 ? 0 : first;
+  } catch {
+  }
+  const region = localeRegion(locale);
+  return region != null && SUNDAY_FIRST.has(region) ? 0 : 1;
+}
+function monthCells(month, weekStartsOn) {
+  const first = startOfMonth(month);
+  const gridStart = startOfWeek(first, weekStartsOn);
+  const monthNumber = parseDate(first).m;
+  return Array.from({ length: 42 }, (_, i) => {
+    const date = addDays(gridStart, i);
+    return { date, outside: parseDate(date).m !== monthNumber };
+  });
+}
+function atNoon(value) {
+  const parts = parseDate(value);
+  if (!parts) throw new Error(`Not an ISO date: ${value}`);
+  return new Date(Date.UTC(parts.y, parts.m - 1, parts.d, 12));
+}
+function formatDay(value, locale) {
+  return new Intl.DateTimeFormat(locale, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    timeZone: "UTC"
+  }).format(atNoon(value));
+}
+function formatFull(value, locale) {
+  return new Intl.DateTimeFormat(locale, {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+    timeZone: "UTC"
+  }).format(atNoon(value));
+}
+function formatMonth(value, locale) {
+  return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(atNoon(value));
+}
+function formatMonthShort(value, locale) {
+  return new Intl.DateTimeFormat(locale, { month: "short", timeZone: "UTC" }).format(atNoon(value));
+}
+function formatRangeLabel(start, end, locale) {
+  const fmt = new Intl.DateTimeFormat(locale, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    timeZone: "UTC"
+  });
+  if (typeof fmt.formatRange === "function") return fmt.formatRange(atNoon(start), atNoon(end));
+  return `${formatDay(start, locale)} \u2013 ${formatDay(end, locale)}`;
+}
+function weekdayLabels(locale, weekStartsOn) {
+  const sunday = "2026-01-04";
+  return Array.from({ length: 7 }, (_, i) => {
+    const date = atNoon(addDays(sunday, (weekStartsOn + i) % 7));
+    return {
+      narrow: new Intl.DateTimeFormat(locale, { weekday: "narrow", timeZone: "UTC" }).format(date),
+      long: new Intl.DateTimeFormat(locale, { weekday: "long", timeZone: "UTC" }).format(date)
+    };
+  });
+}
+function weekRange(todayValue, weekStartsOn, offsetWeeks) {
+  const start = addDays(startOfWeek(todayValue, weekStartsOn), offsetWeeks * 7);
+  return { start, end: addDays(start, 6) };
+}
+function monthRange(todayValue, offset) {
+  const month = addMonths(startOfMonth(todayValue), offset);
+  return { start: month, end: endOfMonth(month) };
+}
+var today = { id: "today", label: "Today", value: (day) => day };
+var yesterday = { id: "yesterday", label: "Yesterday", value: (day) => addDays(day, -1) };
+var tomorrow = { id: "tomorrow", label: "Tomorrow", value: (day) => addDays(day, 1) };
+function thisWeek(weekStartsOn = 1) {
+  return { id: "thisWeek", label: "This week", value: (day) => weekRange(day, weekStartsOn, 0) };
+}
+function lastWeek(weekStartsOn = 1) {
+  return { id: "lastWeek", label: "Last week", value: (day) => weekRange(day, weekStartsOn, -1) };
+}
+function nextWeek(weekStartsOn = 1) {
+  return { id: "nextWeek", label: "Next week", value: (day) => weekRange(day, weekStartsOn, 1) };
+}
+var last7Days = { id: "last7Days", label: "Last 7 days", value: (day) => ({ start: addDays(day, -6), end: day }) };
+var last30Days = { id: "last30Days", label: "Last 30 days", value: (day) => ({ start: addDays(day, -29), end: day }) };
+var thisMonth = { id: "thisMonth", label: "This month", value: (day) => monthRange(day, 0) };
+var lastMonth = { id: "lastMonth", label: "Last month", value: (day) => monthRange(day, -1) };
+var nextMonth = { id: "nextMonth", label: "Next month", value: (day) => monthRange(day, 1) };
+var thisQuarter = {
+  id: "thisQuarter",
+  label: "This quarter",
+  value: (day) => {
+    const parts = parseDate(day);
+    const startMonth = Math.floor((parts.m - 1) / 3) * 3 + 1;
+    const start = formatDate(parts.y, startMonth, 1);
+    return { start, end: endOfMonth(addMonths(start, 2)) };
+  }
+};
+var yearToDate = {
+  id: "yearToDate",
+  label: "Year to date",
+  value: (day) => ({ start: formatDate(parseDate(day).y, 1, 1), end: day })
+};
+function builtinPresets(weekStartsOn) {
+  return [
+    today,
+    yesterday,
+    tomorrow,
+    thisWeek(weekStartsOn),
+    lastWeek(weekStartsOn),
+    nextWeek(weekStartsOn),
+    last7Days,
+    last30Days,
+    thisMonth,
+    lastMonth,
+    nextMonth,
+    thisQuarter,
+    yearToDate
+  ];
+}
+var SINGLE_PRESET_IDS = ["today", "yesterday", "tomorrow"];
+function defaultPresets(mode, weekStartsOn) {
+  const all = builtinPresets(weekStartsOn);
+  if (mode === "single") return all.filter((preset) => SINGLE_PRESET_IDS.includes(preset.id));
+  return all.filter((preset) => !SINGLE_PRESET_IDS.includes(preset.id) || preset.id === "today");
+}
+function resolvePreset(preset, todayValue) {
+  return typeof preset.value === "function" ? preset.value(todayValue) : preset.value;
+}
+function isRangeValue(value) {
+  return typeof value === "object" && value !== null && "start" in value;
+}
+function sameSelection(a, b) {
+  if (a == null || b == null) return a == null && b == null;
+  const left = isRangeValue(a) ? a : { start: a, end: a };
+  const right = isRangeValue(b) ? b : { start: b, end: b };
+  return left.start === right.start && left.end === right.end;
+}
+function presetInBounds(value, min, max, isDateDisabled) {
+  const dates = isRangeValue(value) ? value.start && value.end ? eachDay(value.start, value.end) : [] : [value];
+  if (!dates.length) return false;
+  return dates.every((date) => isWithin(date, min, max) && !isDateDisabled?.(date));
+}
+function eachDay(start, end) {
+  const ordered = orderRange(start, end);
+  const days = [];
+  for (let date = ordered.start; compare(date, ordered.end) <= 0; date = addDays(date, 1)) days.push(date);
+  return days;
+}
+function moveFocusDate(date, key, opts) {
+  const dir = opts.rtl ? -1 : 1;
+  switch (key) {
+    case "ArrowLeft":
+      return addDays(date, -dir);
+    case "ArrowRight":
+      return addDays(date, dir);
+    case "ArrowUp":
+      return addDays(date, -7);
+    case "ArrowDown":
+      return addDays(date, 7);
+    case "Home":
+      return startOfWeek(date, opts.weekStartsOn);
+    case "End":
+      return endOfWeek(date, opts.weekStartsOn);
+    case "PageUp":
+      return opts.shift ? addYears(date, -1) : addMonths(date, -1);
+    case "PageDown":
+      return opts.shift ? addYears(date, 1) : addMonths(date, 1);
+    default:
+      return null;
+  }
+}
+function documentLocale2() {
+  if (typeof document !== "undefined" && document.documentElement.lang) return document.documentElement.lang;
+  return "en-US";
+}
+function useCalendarGrid({
+  focused,
+  onFocusedChange,
+  month,
+  onMonthChange,
+  months,
+  weekStartsOn,
+  rtl,
+  min,
+  max,
+  onClear,
+  onPick
+}) {
+  const pendingFocus = React10.useRef(false);
+  const onDayKeyDown = (event) => {
+    if (!focused) return;
+    if (event.key === "Delete" || event.key === "Backspace") {
+      event.preventDefault();
+      onClear?.();
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onPick?.(focused);
+      return;
+    }
+    const raw = moveFocusDate(focused, event.key, { weekStartsOn, rtl, shift: event.shiftKey });
+    if (!raw) return;
+    event.preventDefault();
+    const next = clampDate(raw, min, max);
+    if (next === focused) return;
+    pendingFocus.current = true;
+    onFocusedChange(next);
+    const first = startOfMonth(month);
+    const last = endOfMonth(addMonths(first, months - 1));
+    if (compare(next, first) >= 0 && compare(next, last) <= 0) return;
+    const page = compare(next, last) > 0 ? startOfMonth(addMonths(next, -(months - 1))) : startOfMonth(next);
+    if (page !== first) onMonthChange(page);
+  };
+  return { onDayKeyDown, pendingFocus };
+}
+function useChooserGrid({ columns, count, index, onIndexChange, onPick, onBack, rtl }) {
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      onBack?.();
+      return;
+    }
+    const dir = rtl ? -1 : 1;
+    let next = index;
+    switch (event.key) {
+      case "ArrowRight":
+        next = index + dir;
+        break;
+      case "ArrowLeft":
+        next = index - dir;
+        break;
+      case "ArrowDown":
+        next = index + columns;
+        break;
+      case "ArrowUp":
+        next = index - columns;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = count - 1;
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (event.currentTarget.getAttribute("aria-disabled") === "true") return;
+        onPick(index);
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    if (next < 0 || next >= count) return;
+    onIndexChange(next);
+  };
+  return { onKeyDown };
+}
+function isRange(value) {
+  return typeof value === "object" && value !== null && "start" in value;
+}
+function emptyFor(mode) {
+  return mode === "range" ? { start: null, end: null } : null;
+}
+var Calendar = React10.forwardRef(function Calendar2({
+  mode = "single",
+  value,
+  defaultValue,
+  onValueChange,
+  month,
+  defaultMonth,
+  onMonthChange,
+  months = 1,
+  min,
+  max,
+  isDateDisabled,
+  minLength,
+  maxLength,
+  weekStartsOn,
+  locale,
+  showOutsideDays = true,
+  showWeekNumbers = false,
+  focusSelected = false,
+  chooserBackRef,
+  onAnnounce,
+  className
+}, ref) {
+  const rootId = React10.useId();
+  const localeName = locale || documentLocale2();
+  const weekStart = weekStartsOn ?? defaultWeekStartsOn(localeName);
+  const rootRef = React10.useRef(null);
+  React10.useImperativeHandle(ref, () => rootRef.current);
+  const [dir, setDir] = React10.useState(false);
+  React10.useEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const update = () => setDir(getComputedStyle(el).direction === "rtl");
+    update();
+  }, []);
+  const [uncontrolledValue, setUncontrolledValue] = React10.useState(defaultValue ?? emptyFor(mode));
+  const selected = value !== void 0 ? value : uncontrolledValue;
+  const range = isRange(selected) ? selected : null;
+  const single = !isRange(selected) ? selected : null;
+  const setSelected = (next) => {
+    if (value === void 0) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+  const todayValue = todayDate();
+  const selectedSeed = range?.start || single || null;
+  function clampMonth(seed) {
+    let first = startOfMonth(seed);
+    if (max && compare(first, max) > 0) first = startOfMonth(max);
+    if (min && compare(endOfMonth(addMonths(first, months - 1)), min) < 0) first = startOfMonth(min);
+    if (max && compare(first, max) > 0) first = startOfMonth(max);
+    return first;
+  }
+  function enabledOnOpen(date) {
+    return isWithin(date, min, max) && !isDateDisabled?.(date);
+  }
+  const initialMonth = month != null ? startOfMonth(month) : selectedSeed ? startOfMonth(selectedSeed) : clampMonth(startOfMonth(defaultMonth ?? todayValue));
+  const [uncontrolledMonth, setUncontrolledMonth] = React10.useState(startOfMonth(initialMonth));
+  const rawVisible = startOfMonth(month ?? uncontrolledMonth);
+  const visible = selectedSeed ? rawVisible : clampMonth(rawVisible);
+  const setVisible = (next) => {
+    const first = startOfMonth(next);
+    if (month === void 0) setUncontrolledMonth(first);
+    onMonthChange?.(first);
+    const count = months;
+    const names = Array.from({ length: count }, (_, i) => formatMonth(addMonths(first, i), localeName));
+    onAnnounce?.(names.join(", "));
+  };
+  const [focused, setFocused] = React10.useState(range?.start || single || null);
+  const [preview, setPreview] = React10.useState(null);
+  const [view, setView] = React10.useState("days");
+  const [yearCursor, setYearCursor] = React10.useState(() => parseDate(visible).y);
+  const [chooserMonth, setChooserMonth] = React10.useState(0);
+  const dayRefs = React10.useRef(/* @__PURE__ */ new Map());
+  const titleRefs = React10.useRef([]);
+  const titleIndex = React10.useRef(0);
+  const restoreTitle = React10.useRef(false);
+  const { onDayKeyDown, pendingFocus } = useCalendarGrid({
+    focused,
+    onFocusedChange: (date) => {
+      setFocused(date);
+      if (range?.start && !range.end) setPreview(date);
+    },
+    month: visible,
+    onMonthChange: setVisible,
+    months,
+    weekStartsOn: weekStart,
+    rtl: dir,
+    min,
+    max,
+    onPick: (date) => pick(date),
+    onClear: () => {
+      setPreview(null);
+      setSelected(emptyFor(mode));
+      onAnnounce?.("Selection cleared.");
+    }
+  });
+  const opened = React10.useRef(false);
+  const focusOnOpen = React10.useRef(null);
+  React10.useLayoutEffect(() => {
+    if (!focusSelected) {
+      opened.current = false;
+      return;
+    }
+    if (opened.current) return;
+    opened.current = true;
+    const target = selectedSeed ? selectedSeed : enabledOnOpen(todayValue) ? todayValue : firstEnabledDay(clampMonth(max && compare(todayValue, max) > 0 ? max : min ?? todayValue));
+    if (!target) return;
+    setFocused(target);
+    const first = startOfMonth(visible);
+    const last = endOfMonth(addMonths(first, months - 1));
+    if (compare(target, first) < 0 || compare(target, last) > 0) setVisible(startOfMonth(target));
+    focusOnOpen.current = target;
+  }, [focusSelected]);
+  React10.useLayoutEffect(() => {
+    const target = focusOnOpen.current;
+    if (!target) return;
+    const button = dayRefs.current.get(target);
+    if (!button) return;
+    focusOnOpen.current = null;
+    button.focus();
+  });
+  function firstEnabledDay(from) {
+    for (let i = 0; i < months; i++) {
+      for (const cell of monthCells(addMonths(from, i), weekStart)) {
+        if (!cell.outside && enabledOnOpen(cell.date)) return cell.date;
+      }
+    }
+    return null;
+  }
+  const backToDays = React10.useCallback(() => {
+    setView("days");
+    restoreTitle.current = true;
+  }, []);
+  React10.useEffect(() => {
+    if (!chooserBackRef) return;
+    chooserBackRef.current = view === "days" ? null : backToDays;
+    return () => {
+      chooserBackRef.current = null;
+    };
+  }, [view, chooserBackRef, backToDays]);
+  React10.useLayoutEffect(() => {
+    if (view !== "days" || !restoreTitle.current) return;
+    restoreTitle.current = false;
+    titleRefs.current[titleIndex.current]?.focus();
+  }, [view]);
+  React10.useEffect(() => {
+    if (!pendingFocus.current || !focused) return;
+    pendingFocus.current = false;
+    dayRefs.current.get(focused)?.focus();
+  }, [focused, visible, pendingFocus]);
+  const pendingStart = range?.start && !range.end ? range.start : null;
+  const pick = (date) => {
+    if (dayBlocked(date) && !(pendingStart && date === pendingStart && (minLength == null || minLength <= 1))) return;
+    if (mode === "single") {
+      setSelected(date);
+      setFocused(date);
+      onAnnounce?.(formatFull(date, localeName));
+      return;
+    }
+    if (!range?.start || range.end) {
+      setSelected({ start: date, end: null });
+      setPreview(null);
+      setFocused(date);
+      onAnnounce?.(`Start date ${formatFull(date, localeName)}. Pick an end date.`);
+      return;
+    }
+    if (date === range.start) {
+      setSelected({ start: date, end: date });
+      setPreview(null);
+      onAnnounce?.(`${formatFull(date, localeName)}, one day.`);
+      return;
+    }
+    const ordered = orderRange(range.start, date);
+    setSelected(ordered);
+    setPreview(null);
+    onAnnounce?.(`${formatFull(ordered.start, localeName)} to ${formatFull(ordered.end, localeName)}, ${inclusiveDays(ordered.start, ordered.end)} days.`);
+  };
+  function dayBlocked(date) {
+    if (!isWithin(date, min, max)) return true;
+    if (isDateDisabled?.(date)) return true;
+    if (pendingStart && lengthBlockReason(pendingStart, date, minLength, maxLength)) return true;
+    return false;
+  }
+  function blockReason(date) {
+    if (min && compare(date, min) < 0) return `Before ${formatFull(min, localeName)}`;
+    if (max && compare(date, max) > 0) return `After ${formatFull(max, localeName)}`;
+    if (isDateDisabled?.(date)) return "Unavailable";
+    if (pendingStart) return lengthBlockReason(pendingStart, date, minLength, maxLength);
+    return null;
+  }
+  const labels = weekdayLabels(localeName, weekStart);
+  const monthList = Array.from({ length: months }, (_, i) => addMonths(visible, i));
+  const shown = new Set(
+    monthList.flatMap((item) => monthCells(item, weekStart).filter((cell) => !cell.outside).map((cell) => cell.date))
+  );
+  const canPage = (delta) => {
+    const next = addMonths(visible, delta);
+    const edge = delta < 0 ? endOfMonth(next) : startOfMonth(addMonths(next, months - 1));
+    if (delta < 0 && min && compare(edge, min) < 0) return false;
+    if (delta > 0 && max && compare(startOfMonth(next), max) > 0) return false;
+    return true;
+  };
+  const pageBy = (delta) => {
+    if (!canPage(delta)) return;
+    setVisible(addMonths(visible, delta));
+    const base = focused ?? todayValue;
+    setFocused(clampDate(addMonths(base, delta), min, max));
+    pendingFocus.current = true;
+  };
+  const visibleDays = monthList.flatMap(
+    (item) => monthCells(item, weekStart).filter((cell) => !(cell.outside && !showOutsideDays || cell.outside && shown.has(cell.date))).map((cell) => cell.date)
+  );
+  const visibleSet = new Set(visibleDays);
+  const inView = (date) => Boolean(date && visibleSet.has(date));
+  const tabDate = (inView(focused) ? focused : null) || (inView(single) ? single : null) || (inView(range?.start) ? range.start : null) || (inView(range?.end) ? range.end : null) || (inView(todayValue) ? todayValue : null) || visibleDays.find((date) => !dayBlocked(date)) || visibleDays[0] || null;
+  const previewEnd = pendingStart && preview && preview !== pendingStart ? preview : null;
+  const band = previewEnd ? orderRange(pendingStart, previewEnd) : range?.start && range.end ? orderRange(range.start, range.end) : null;
+  const chevron = (which) => {
+    const back = which === "prev";
+    const pointLeft = dir ? !back : back;
+    return /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: pointLeft ? "chevron_left" : "chevron_right" });
+  };
+  return /* @__PURE__ */ jsx("div", { ref: rootRef, className: cn("Calendar", className), "data-months": months, children: view === "days" ? /* @__PURE__ */ jsxs("div", { className: "DatePickerMonths", children: [
+    /* @__PURE__ */ jsxs("div", { className: "DatePickerNav", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", emphasis: "quiet", "aria-label": "Previous month", disabled: !canPage(-1), onClick: () => pageBy(-1), children: chevron("prev") }),
+      monthList.map((item, index) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "DatePickerMonthTitle",
+          id: `${rootId}-month-${index}`,
+          "data-index": index,
+          ref: (node) => {
+            titleRefs.current[index] = node;
+          },
+          onClick: () => {
+            titleIndex.current = index;
+            setChooserMonth(parseDate(item).m - 1);
+            setYearCursor(parseDate(item).y);
+            setView("months");
+          },
+          children: formatMonth(item, localeName)
+        },
+        item
+      )),
+      /* @__PURE__ */ jsx(Button, { type: "button", emphasis: "quiet", "aria-label": "Next month", disabled: !canPage(1), onClick: () => pageBy(1), children: chevron("next") })
+    ] }),
+    monthList.map((item, index) => /* @__PURE__ */ jsx(
+      Month,
+      {
+        month: item,
+        titleId: `${rootId}-month-${index}`,
+        monthIndex: index,
+        localeName,
+        labels,
+        showWeekNumbers,
+        showOutsideDays,
+        shown,
+        weekStart,
+        mode,
+        focused,
+        tabDate,
+        single,
+        rangeStart: range?.start ?? null,
+        rangeEnd: range?.end ?? null,
+        band,
+        previewing: Boolean(previewEnd),
+        todayValue,
+        dayBlocked,
+        blockReason,
+        onPick: pick,
+        onFocusDay: setFocused,
+        onPreview: (date) => pendingStart && setPreview(date),
+        onPreviewEnd: () => setPreview(null),
+        onKeyDown: onDayKeyDown,
+        dayRefs
+      },
+      item
+    ))
+  ] }) : view === "months" ? /* @__PURE__ */ jsx(
+    MonthChooser,
+    {
+      year: yearCursor,
+      localeName,
+      min,
+      max,
+      rtl: dir,
+      onYear: (delta) => setYearCursor((y) => y + delta),
+      initialIndex: chooserMonth,
+      onPick: (monthIndex) => {
+        setVisible(formatDate(yearCursor, monthIndex + 1, 1));
+        backToDays();
+      },
+      onBack: backToDays,
+      onOpenYears: () => setView("years")
+    }
+  ) : /* @__PURE__ */ jsx(
+    YearChooser,
+    {
+      year: yearCursor,
+      min,
+      max,
+      rtl: dir,
+      onShift: (delta) => setYearCursor((y) => y + delta),
+      onPick: (y) => {
+        setYearCursor(y);
+        setView("months");
+      },
+      onBack: backToDays
+    }
+  ) });
+});
+function Month(props) {
+  const cells = monthCells(props.month, props.weekStart);
+  const weeks = [];
+  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
+  return /* @__PURE__ */ jsx("section", { className: "DatePickerMonth", "data-index": props.monthIndex, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "grid",
+      tabIndex: -1,
+      "aria-labelledby": props.titleId,
+      "aria-multiselectable": props.mode === "range" ? true : void 0,
+      className: "CalendarGrid",
+      onMouseLeave: props.onPreviewEnd,
+      children: [
+        /* @__PURE__ */ jsxs("div", { role: "row", className: "CalendarWeek", children: [
+          props.showWeekNumbers ? /* @__PURE__ */ jsx("span", { role: "columnheader", className: "CalendarWeekNumber" }) : null,
+          props.labels.map((label) => /* @__PURE__ */ jsx("span", { role: "columnheader", className: "CalendarWeekday", children: /* @__PURE__ */ jsx("abbr", { title: label.long, children: label.narrow }) }, label.long))
+        ] }),
+        weeks.map((week) => /* @__PURE__ */ jsxs("div", { role: "row", className: "CalendarWeek", children: [
+          props.showWeekNumbers ? /* @__PURE__ */ jsx("span", { role: "rowheader", className: "CalendarWeekNumber", children: isoWeek(week.find((cell) => !cell.outside)?.date ?? week[3].date) }) : null,
+          week.map((cell) => {
+            const hiddenDuplicate = cell.outside && props.shown.has(cell.date);
+            if (cell.outside && !props.showOutsideDays || hiddenDuplicate) {
+              return /* @__PURE__ */ jsx("span", { role: "gridcell", className: "CalendarDay CalendarDay--empty" }, cell.date);
+            }
+            const blocked = props.dayBlocked(cell.date);
+            const reason = blocked ? props.blockReason(cell.date) : null;
+            const selectedSingle = props.single === cell.date;
+            const isStart = props.rangeStart === cell.date;
+            const isEnd = props.rangeEnd === cell.date;
+            const inBand = props.band != null && compare(cell.date, props.band.start) > 0 && compare(cell.date, props.band.end) < 0;
+            const bandStart = props.band?.start === cell.date;
+            const bandEnd = props.band?.end === cell.date && props.band.start !== props.band.end;
+            const marked = selectedSingle || isStart || isEnd || bandStart || bandEnd;
+            const ariaSelected = selectedSingle || isStart || isEnd;
+            const parts = [
+              formatFull(cell.date, props.localeName),
+              cell.date === props.todayValue ? "today" : "",
+              selectedSingle ? "selected" : "",
+              isStart ? "range start" : "",
+              isEnd ? "range end" : "",
+              inBand ? "in range" : "",
+              reason ?? ""
+            ].filter(Boolean);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "gridcell",
+                ref: (node) => {
+                  if (node) props.dayRefs.current.set(cell.date, node);
+                  else props.dayRefs.current.delete(cell.date);
+                },
+                className: "CalendarDay",
+                tabIndex: cell.date === props.tabDate ? 0 : -1,
+                "aria-selected": ariaSelected || void 0,
+                "aria-current": cell.date === props.todayValue ? "date" : void 0,
+                "aria-disabled": blocked || void 0,
+                "aria-label": parts.join(", "),
+                "data-selected": marked || void 0,
+                "data-range-start": bandStart ? "" : void 0,
+                "data-range-end": bandEnd ? "" : void 0,
+                "data-in-range": inBand ? "" : void 0,
+                "data-preview": props.previewing && props.band && compare(cell.date, props.band.start) >= 0 && compare(cell.date, props.band.end) <= 0 ? "" : void 0,
+                "data-today": cell.date === props.todayValue ? "" : void 0,
+                "data-outside-month": cell.outside ? "" : void 0,
+                "data-disabled": blocked ? "" : void 0,
+                "data-focused": props.focused === cell.date ? "" : void 0,
+                onClick: () => props.onPick(cell.date),
+                onMouseEnter: () => props.onPreview(cell.date),
+                onFocus: () => {
+                  props.onFocusDay(cell.date);
+                  props.onPreview(cell.date);
+                },
+                onKeyDown: props.onKeyDown,
+                children: /* @__PURE__ */ jsx("span", { className: "CalendarDayNumber", children: parseDate(cell.date).d })
+              },
+              cell.date
+            );
+          })
+        ] }, week[0].date))
+      ]
+    }
+  ) });
+}
+function MonthChooser({
+  year,
+  localeName,
+  min,
+  max,
+  rtl,
+  initialIndex,
+  onYear,
+  onPick,
+  onBack,
+  onOpenYears
+}) {
+  const [index, setIndex] = React10.useState(initialIndex);
+  const cells = React10.useRef([]);
+  const { onKeyDown } = useChooserGrid({
+    columns: 3,
+    count: 12,
+    index,
+    onIndexChange: setIndex,
+    onPick,
+    onBack,
+    rtl
+  });
+  React10.useLayoutEffect(() => {
+    cells.current[index]?.focus();
+  }, [index]);
+  const minYear = min ? parseDate(min).y : null;
+  const maxYear = max ? parseDate(max).y : null;
+  return /* @__PURE__ */ jsxs("div", { className: "CalendarChooser", children: [
+    /* @__PURE__ */ jsxs("div", { className: "DatePickerMonthBar", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", emphasis: "quiet", "aria-label": "Previous year", disabled: minYear != null && year <= minYear, onClick: () => onYear(-1), children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: rtl ? "chevron_right" : "chevron_left" }) }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "DatePickerMonthTitle", onClick: onOpenYears, children: year }),
+      /* @__PURE__ */ jsx(Button, { type: "button", emphasis: "quiet", "aria-label": "Next year", disabled: maxYear != null && year >= maxYear, onClick: () => onYear(1), children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: rtl ? "chevron_left" : "chevron_right" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { role: "grid", tabIndex: -1, className: "CalendarChooserGrid", "aria-label": `${year} months`, children: Array.from({ length: 12 }, (_, i) => {
+      const date = formatDate(year, i + 1, 1);
+      const disabled = min != null && compare(endOfMonth(date), min) < 0 || max != null && compare(date, max) > 0;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "gridcell",
+          className: "CalendarChoice",
+          ref: (node) => {
+            cells.current[i] = node;
+          },
+          tabIndex: index === i ? 0 : -1,
+          "aria-disabled": disabled || void 0,
+          onClick: () => !disabled && onPick(i),
+          onKeyDown,
+          onFocus: () => setIndex(i),
+          children: formatMonthShort(date, localeName)
+        },
+        date
+      );
+    }) })
+  ] });
+}
+function YearChooser({
+  year,
+  min,
+  max,
+  rtl,
+  onShift,
+  onPick,
+  onBack
+}) {
+  const minYear = min ? parseDate(min).y : null;
+  const maxYear = max ? parseDate(max).y : null;
+  const pageStart = Math.floor(year / 12) * 12;
+  const pageEnd = pageStart + 11;
+  const from = minYear != null ? Math.max(pageStart, minYear) : pageStart;
+  const to = maxYear != null ? Math.min(pageEnd, maxYear) : pageEnd;
+  const years = to >= from ? Array.from({ length: to - from + 1 }, (_, i) => from + i) : [year];
+  const cells = React10.useRef([]);
+  const [index, setIndex] = React10.useState(Math.max(0, years.indexOf(year)));
+  React10.useLayoutEffect(() => {
+    cells.current[index]?.focus();
+  }, [index]);
+  const { onKeyDown } = useChooserGrid({
+    columns: 3,
+    count: years.length,
+    index,
+    onIndexChange: setIndex,
+    onPick: (i) => onPick(years[i]),
+    onBack,
+    rtl
+  });
+  const prevDisabled = minYear != null && pageStart <= minYear;
+  const nextDisabled = maxYear != null && pageEnd >= maxYear;
+  return /* @__PURE__ */ jsxs("div", { className: "CalendarChooser", children: [
+    /* @__PURE__ */ jsxs("div", { className: "DatePickerMonthBar", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", emphasis: "quiet", "aria-label": "Previous years", disabled: prevDisabled, onClick: () => !prevDisabled && onShift(-12), children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: rtl ? "chevron_right" : "chevron_left" }) }),
+      /* @__PURE__ */ jsxs("span", { className: "DatePickerMonthTitle", children: [
+        years[0],
+        " \u2013 ",
+        years[years.length - 1]
+      ] }),
+      /* @__PURE__ */ jsx(Button, { type: "button", emphasis: "quiet", "aria-label": "Next years", disabled: nextDisabled, onClick: () => !nextDisabled && onShift(12), children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: rtl ? "chevron_left" : "chevron_right" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { role: "grid", tabIndex: -1, className: "CalendarChooserGrid", "aria-label": "Years", children: years.map((y, i) => {
+      const disabled = minYear != null && y < minYear || maxYear != null && y > maxYear;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "gridcell",
+          className: "CalendarChoice",
+          ref: (node) => {
+            cells.current[i] = node;
+          },
+          tabIndex: index === i ? 0 : -1,
+          "aria-disabled": disabled || void 0,
+          onClick: () => !disabled && onPick(y),
+          onKeyDown,
+          onFocus: () => setIndex(i),
+          children: y
+        },
+        y
+      );
+    }) })
+  ] });
+}
+function DatePresets({
+  presets,
+  value,
+  onSelect,
+  min,
+  max,
+  isDateDisabled,
+  locale = "en-US",
+  layout = "column",
+  selectOnNavigate = false,
+  label = "Quick selections",
+  className
+}) {
+  const todayValue = todayDate();
+  const resolved = presets.map((preset) => ({ preset, value: resolvePreset(preset, todayValue) }));
+  const enabled = resolved.map((item) => presetInBounds(item.value, min, max, isDateDisabled));
+  const checked = resolved.findIndex((item, i) => enabled[i] && sameSelection(item.value, value));
+  const [cursor, setCursor] = React10.useState(checked >= 0 ? checked : enabled.findIndex(Boolean));
+  const buttons = React10.useRef([]);
+  React10.useEffect(() => {
+    if (checked >= 0) setCursor(checked);
+  }, [checked]);
+  const move = (next) => {
+    setCursor(next);
+    buttons.current[next]?.focus();
+    const item = resolved[next];
+    if (selectOnNavigate && item && enabled[next]) onSelect(item.preset, item.value);
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const item = resolved[cursor];
+      if (item && enabled[cursor]) onSelect(item.preset, item.value);
+      return;
+    }
+    const dir = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1 : event.key === "ArrowUp" || event.key === "ArrowLeft" ? -1 : 0;
+    if (!dir && event.key !== "Home" && event.key !== "End") return;
+    event.preventDefault();
+    const step = (from, delta) => {
+      for (let i = 1; i <= resolved.length; i++) {
+        const next2 = (from + delta * i + resolved.length) % resolved.length;
+        if (enabled[next2]) return next2;
+      }
+      return from;
+    };
+    const next = event.key === "Home" ? enabled.findIndex(Boolean) : event.key === "End" ? enabled.lastIndexOf(true) : step(cursor, dir);
+    if (next >= 0) move(next);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      tabIndex: -1,
+      "aria-label": label,
+      className: cn("DatePickerPresets", className),
+      "data-layout": layout,
+      onKeyDown,
+      children: resolved.map((item, index) => {
+        const hint = item.preset.hint ?? (isRangeValue(item.value) && item.value.start && item.value.end ? formatRangeLabel(item.value.start, item.value.end, locale) : void 0);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            className: "DatePickerPreset",
+            "aria-checked": index === checked,
+            "aria-disabled": !enabled[index] || void 0,
+            "data-checked": index === checked ? "" : void 0,
+            "data-disabled": !enabled[index] ? "" : void 0,
+            ref: (node) => {
+              buttons.current[index] = node;
+            },
+            tabIndex: index === cursor ? 0 : -1,
+            onClick: () => {
+              if (!enabled[index]) return;
+              setCursor(index);
+              onSelect(item.preset, item.value);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "DatePickerPresetLabel", children: item.preset.label }),
+              hint ? /* @__PURE__ */ jsx("span", { className: "DatePickerPresetHint", children: hint }) : null
+            ]
+          },
+          item.preset.id
+        );
+      })
+    }
+  );
+}
+var EMPTY_RANGE = { start: null, end: null };
+function useNarrowViewport() {
+  const [query, setQuery] = React10.useState("(max-width: 48em)");
+  const [narrow, setNarrow] = React10.useState(false);
+  React10.useEffect(() => {
+    const raw = getComputedStyle(document.documentElement).getPropertyValue("--sl-breakpoint-md").trim();
+    if (raw) setQuery(`(max-width: ${raw})`);
+  }, []);
+  React10.useEffect(() => {
+    const media = window.matchMedia(query);
+    const update = () => setNarrow(media.matches);
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, [query]);
+  return narrow;
+}
+function hasValue(mode, value) {
+  if (mode === "range") return Boolean(isRangeValue(value) && (value.start || value.end));
+  return Boolean(value);
+}
+function halfRange(value) {
+  return isRangeValue(value) && Boolean(value.start) && !value.end;
+}
+var TWO_MONTHS_REM = 40;
+var ONE_MONTH_REM = 32;
+var COARSE_ONE_REM = 48;
+function monthFor(value, count) {
+  const start = typeof value === "string" ? value : isRangeValue(value) ? value.start : null;
+  if (!start || !parseDate(start)) return null;
+  const end = isRangeValue(value) ? value.end : null;
+  const startMonth = startOfMonth(start);
+  if (!end || !parseDate(end)) return startMonth;
+  const endMonth = startOfMonth(end);
+  const startParts = parseDate(startMonth);
+  const endParts = parseDate(endMonth);
+  const span = (endParts.y - startParts.y) * 12 + (endParts.m - startParts.m);
+  if (span < count) return startMonth;
+  return addMonths(endMonth, -(count - 1));
+}
+function explicitBox(node) {
+  const root = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+  let current = node?.parentElement ?? null;
+  while (current && current !== document.documentElement) {
+    const raw = current.style.width || current.style.maxWidth || current.style.inlineSize || current.style.maxInlineSize;
+    if (raw.endsWith("px")) return parseFloat(raw);
+    if (raw.endsWith("rem")) return parseFloat(raw) * root;
+    current = current.parentElement;
+  }
+  return void 0;
+}
+var DatePicker = React10.forwardRef(function DatePicker2(props, ref) {
+  const {
+    mode = "single",
+    min,
+    max,
+    isDateDisabled,
+    minLength,
+    maxLength,
+    presets = true,
+    months = "auto",
+    weekStartsOn,
+    locale,
+    showOutsideDays,
+    showWeekNumbers,
+    commit,
+    clearable = true,
+    placeholder,
+    name,
+    nameStart,
+    nameEnd,
+    required,
+    disabled,
+    readOnly,
+    formatValue,
+    open,
+    defaultOpen,
+    onOpenChange,
+    popup = "auto",
+    defaultMonth,
+    label,
+    id,
+    className
+  } = props;
+  const localeName = locale || documentLocale2();
+  const weekStart = weekStartsOn ?? defaultWeekStartsOn(localeName);
+  const commitMode = commit ?? (mode === "range" ? "apply" : "immediate");
+  const narrow = useNarrowViewport();
+  const useDrawer = popup === "drawer" || popup === "auto" && narrow;
+  const fieldState = useFieldRootContext();
+  const { labelId } = useLabelableContext();
+  const invalid = fieldState.state.valid === false;
+  const controlled = props.value !== void 0;
+  const [uncontrolled, setUncontrolled] = React10.useState(
+    props.defaultValue ?? (mode === "range" ? EMPTY_RANGE : null)
+  );
+  const committed = (controlled ? props.value : uncontrolled) ?? (mode === "range" ? EMPTY_RANGE : null);
+  const [draft, setDraft] = React10.useState(committed);
+  const [uncontrolledOpen, setUncontrolledOpen] = React10.useState(defaultOpen ?? false);
+  const isOpen = open ?? uncontrolledOpen;
+  const [announcement, setAnnouncement] = React10.useState("");
+  const fieldRef = React10.useRef(null);
+  const panelRef = React10.useRef(null);
+  const chooserBack = React10.useRef(null);
+  const [panelWidth, setPanelWidth] = React10.useState(0);
+  const [rtl, setRtl] = React10.useState(false);
+  React10.useLayoutEffect(() => {
+    const el = fieldRef.current;
+    if (el) setRtl(getComputedStyle(el).direction === "rtl");
+  }, [isOpen]);
+  React10.useLayoutEffect(() => {
+    if (!isOpen) return;
+    let observer = null;
+    let frame = 0;
+    const attach = () => {
+      const node = panelRef.current;
+      if (!node) {
+        frame = requestAnimationFrame(attach);
+        return;
+      }
+      const read = () => setPanelWidth(node.clientWidth);
+      read();
+      observer = new ResizeObserver(read);
+      observer.observe(node);
+    };
+    attach();
+    return () => {
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+    };
+  }, [isOpen]);
+  const rootPx = typeof document !== "undefined" ? parseFloat(getComputedStyle(document.documentElement).fontSize) || 16 : 16;
+  const coarse = typeof window !== "undefined" && window.matchMedia("(pointer: coarse)").matches;
+  const requested = months === "auto" ? mode === "range" ? 2 : 1 : months;
+  let monthCount = requested;
+  if (useDrawer) monthCount = 1;
+  else if (panelWidth > 0) {
+    const one = panelWidth < ONE_MONTH_REM * rootPx || coarse && panelWidth < COARSE_ONE_REM * rootPx;
+    if (one) monthCount = 1;
+    else if (panelWidth < TWO_MONTHS_REM * rootPx) monthCount = requested === 1 ? 1 : 2;
+  }
+  if (monthCount > requested) monthCount = requested;
+  const rowLayout = useDrawer || panelWidth > 0 && panelWidth < TWO_MONTHS_REM * rootPx;
+  const compact = useDrawer || panelWidth > 0 && panelWidth < ONE_MONTH_REM * rootPx;
+  const touch = useDrawer || coarse || compact;
+  const boxCap = isOpen && typeof document !== "undefined" ? explicitBox(fieldRef.current) : void 0;
+  const [calendarMonth, setCalendarMonth] = React10.useState(
+    () => startOfMonth(monthFor(committed, months === "auto" ? mode === "range" ? 2 : 1 : months) ?? defaultMonth ?? todayDate())
+  );
+  const generatedId = React10.useId();
+  const triggerId = id ?? generatedId;
+  const setOpen = (next) => {
+    if (open === void 0) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  const write = (next) => {
+    if (!controlled) setUncontrolled(next);
+    if (mode === "range") props.onValueChange?.(isRangeValue(next) ? next : EMPTY_RANGE);
+    else props.onValueChange?.(typeof next === "string" ? next : null);
+  };
+  const display = formatValue ? formatValue(mode === "range" ? isRangeValue(committed) ? committed : EMPTY_RANGE : typeof committed === "string" ? committed : null, localeName) : labelFor(mode, committed, localeName, placeholder);
+  const presetList = presets === false ? [] : presets === true ? defaultPresets(mode, weekStart) : presets.filter((preset) => mode === "single" ? !isRangeValue(typeof preset.value === "function" ? preset.value(todayDate()) : preset.value) : true);
+  const committedKey = typeof committed === "string" ? committed : isRangeValue(committed) ? `${committed.start ?? ""}|${committed.end ?? ""}` : "";
+  React10.useEffect(() => {
+    if (!isOpen) return;
+    const next = monthFor(committed, monthCount);
+    if (next) setCalendarMonth(next);
+  }, [isOpen, committedKey, monthCount]);
+  const onDraft = (next) => {
+    setDraft(next);
+    if (commitMode === "immediate") {
+      write(next);
+      const done = mode === "single" ? typeof next === "string" : isRangeValue(next) && next.start && next.end;
+      if (done) setOpen(false);
+    }
+  };
+  const clearDraft = () => {
+    const empty = mode === "range" ? EMPTY_RANGE : null;
+    setDraft(empty);
+    setAnnouncement("Selection cleared.");
+  };
+  const clearCommitted = () => {
+    const empty = mode === "range" ? EMPTY_RANGE : null;
+    setDraft(empty);
+    write(empty);
+    setAnnouncement(mode === "range" ? "Dates cleared." : "Date cleared.");
+    document.getElementById(triggerId)?.focus();
+  };
+  const apply = () => {
+    write(draft);
+    setOpen(false);
+  };
+  const cancel = () => {
+    setDraft(committed);
+    setOpen(false);
+  };
+  const onPopupChange = (next, details) => {
+    if (next && readOnly) {
+      details?.cancel?.();
+      return;
+    }
+    if (!next && details?.reason === "escape-key" && chooserBack.current) {
+      details.cancel?.();
+      chooserBack.current();
+      return;
+    }
+    if (!next && halfRange(draft) && details?.reason === "escape-key") {
+      details.cancel?.();
+      clearDraft();
+      setAnnouncement("Start date cleared. Pick a start date, or press Escape to close.");
+      return;
+    }
+    if (!next) setDraft(committed);
+    if (next) setDraft(committed);
+    setOpen(next);
+  };
+  const reveal = (value) => {
+    const next = monthFor(value, monthCount);
+    if (next) setCalendarMonth(next);
+  };
+  const panel = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: panelRef,
+      className: "DatePickerPanel",
+      "data-months": monthCount,
+      "data-mode": mode,
+      "data-popup": useDrawer ? "drawer" : "popover",
+      "data-layout": rowLayout ? "row" : "column",
+      "data-compact": compact ? "" : void 0,
+      "data-touch": touch ? "" : void 0,
+      children: [
+        presetList.length ? /* @__PURE__ */ jsx(
+          DatePresets,
+          {
+            presets: presetList,
+            value: draft,
+            min,
+            max,
+            isDateDisabled,
+            locale: localeName,
+            layout: rowLayout ? "row" : "column",
+            selectOnNavigate: commitMode === "apply",
+            onSelect: (_preset, next) => {
+              const value = mode === "range" && typeof next === "string" ? { start: next, end: next } : next;
+              onDraft(value);
+              reveal(value);
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode,
+            value: draft,
+            onValueChange: onDraft,
+            month: calendarMonth,
+            defaultMonth,
+            onMonthChange: setCalendarMonth,
+            months: monthCount,
+            chooserBackRef: chooserBack,
+            min,
+            max,
+            isDateDisabled,
+            minLength,
+            maxLength,
+            weekStartsOn: weekStart,
+            locale: localeName,
+            showOutsideDays,
+            showWeekNumbers,
+            focusSelected: isOpen,
+            onAnnounce: setAnnouncement
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "DatePickerFooter", children: [
+          /* @__PURE__ */ jsx("p", { className: "DatePickerSummary", children: summary(mode, draft, localeName) }),
+          /* @__PURE__ */ jsxs("div", { className: "DatePickerActions", children: [
+            clearable ? /* @__PURE__ */ jsx(Button, { type: "button", emphasis: "quiet", onClick: clearDraft, children: "Clear" }) : null,
+            commitMode === "apply" ? /* @__PURE__ */ jsx(Button, { type: "button", emphasis: "standard", onClick: cancel, children: "Cancel" }) : null,
+            commitMode === "apply" ? /* @__PURE__ */ jsx(Button, { type: "button", emphasis: "bold", className: "DatePickerApply", onClick: apply, children: "Apply" }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "visually-hidden", "aria-live": "polite", children: announcement })
+      ]
+    }
+  );
+  const valueId = `${triggerId}-value`;
+  const named = labelId ? { "aria-labelledby": labelId } : label ? { "aria-label": label } : {};
+  const described = labelId || label ? { "aria-describedby": valueId } : {};
+  const popupName = labelId ? { "aria-labelledby": labelId } : { "aria-label": label || placeholder || (mode === "range" ? "Choose dates" : "Choose a date") };
+  const face = /* @__PURE__ */ jsx(TriggerFace, { id: valueId, display, placeholder, empty: !hasValue(mode, committed) });
+  const triggerA11y = {
+    "aria-haspopup": "dialog",
+    disabled,
+    "aria-invalid": invalid || void 0,
+    "aria-readonly": readOnly || void 0,
+    "data-invalid": invalid ? "" : void 0,
+    ...named,
+    ...described
+  };
+  const trigger = /* @__PURE__ */ jsxs("div", { ref: fieldRef, className: cn("DatePickerField", className), children: [
+    useDrawer ? /* @__PURE__ */ jsx(Drawer.Trigger, { id: triggerId, ref, className: "DatePickerTrigger", ...triggerA11y, children: face }) : /* @__PURE__ */ jsx(Popover.Trigger, { id: triggerId, ref, className: "DatePickerTrigger", ...triggerA11y, children: face }),
+    clearable && hasValue(mode, committed) && !disabled && !readOnly ? /* @__PURE__ */ jsx(Button, { type: "button", emphasis: "quiet", className: "DatePickerClear", "aria-label": mode === "range" ? "Clear dates" : "Clear date", onClick: clearCommitted, children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: "close" }) }) : null,
+    mode === "single" ? /* @__PURE__ */ jsx(HiddenValue, { name, value: typeof committed === "string" ? committed : "", required, triggerId }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(HiddenValue, { name: nameStart ?? (name ? `${name}[start]` : void 0), value: isRangeValue(committed) ? committed.start ?? "" : "", required, triggerId }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "visually-hidden",
+          name: nameEnd ?? (name ? `${name}[end]` : void 0),
+          value: isRangeValue(committed) ? committed.end ?? "" : "",
+          tabIndex: -1,
+          "aria-hidden": true,
+          autoComplete: "off",
+          onChange: () => {
+          },
+          onFocus: () => document.getElementById(triggerId)?.focus()
+        }
+      )
+    ] })
+  ] });
+  const popupStyle = boxCap ? { maxInlineSize: boxCap } : void 0;
+  if (useDrawer) {
+    return /* @__PURE__ */ jsxs(Drawer.Root, { swipeDirection: "down", open: isOpen, onOpenChange: onPopupChange, modal: true, children: [
+      trigger,
+      /* @__PURE__ */ jsxs(Drawer.Portal, { children: [
+        /* @__PURE__ */ jsx(Drawer.Backdrop, {}),
+        /* @__PURE__ */ jsx(Drawer.Viewport, { children: /* @__PURE__ */ jsx(Drawer.Popup, { ...popupName, "data-months": monthCount, dir: rtl ? "rtl" : "ltr", style: popupStyle, children: /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+          panel,
+          /* @__PURE__ */ jsx(Drawer.Close, { className: "visually-hidden", tabIndex: -1, children: "Close" })
+        ] }) }) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Popover.Root, { open: isOpen, onOpenChange: onPopupChange, modal: "trap-focus", children: [
+    trigger,
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { sideOffset: 8, children: /* @__PURE__ */ jsxs(Popover.Popup, { ...popupName, className: "DatePickerPopup", "data-months": monthCount, dir: rtl ? "rtl" : "ltr", initialFocus: false, style: popupStyle, children: [
+      panel,
+      /* @__PURE__ */ jsx(Popover.Close, { className: "visually-hidden", tabIndex: -1, children: "Close" })
+    ] }) }) })
+  ] });
+});
+function TriggerFace({ id, display, placeholder, empty }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined DatePickerIcon", "aria-hidden": "true", children: "calendar_today" }),
+    /* @__PURE__ */ jsx("span", { id, className: "DatePickerValue", "data-placeholder": empty ? "" : void 0, children: empty ? placeholder || display : display })
+  ] });
+}
+function HiddenValue({ name, value, required, triggerId }) {
+  return /* @__PURE__ */ jsx(
+    Field.Control,
+    {
+      className: "visually-hidden",
+      name,
+      value,
+      required,
+      tabIndex: -1,
+      "aria-hidden": true,
+      autoComplete: "off",
+      onFocus: () => {
+        document.getElementById(triggerId)?.focus();
+      }
+    }
+  );
+}
+function labelFor(mode, value, locale, placeholder) {
+  if (mode === "single") {
+    return typeof value === "string" ? formatDay(value, locale) : placeholder || "Choose a date";
+  }
+  if (isRangeValue(value) && value.start && value.end) return formatRangeLabel(value.start, value.end, locale);
+  if (isRangeValue(value) && value.start) return `${formatDay(value.start, locale)} \u2013`;
+  return placeholder || "Choose dates";
+}
+function summary(mode, value, locale) {
+  if (mode === "range" && isRangeValue(value) && value.start && value.end) {
+    return `${formatRangeLabel(value.start, value.end, locale)} \xB7 ${inclusiveDays(value.start, value.end)} days`;
+  }
+  if (mode === "range" && isRangeValue(value) && value.start) return `Start date ${formatDay(value.start, locale)}. Pick an end date.`;
+  if (mode === "single" && typeof value === "string") return formatDay(value, locale);
+  return "No date selected";
+}
+
+// src/custom/split/layout.ts
+var ZERO = { unit: "px", value: 0 };
+function parseSize(input) {
+  if (input == null || input === "") return null;
+  if (typeof input === "number") return Number.isFinite(input) ? { unit: "percent", value: input } : null;
+  const text = input.trim();
+  const px = /^(-?\d+(?:\.\d+)?)px$/.exec(text);
+  if (px) return { unit: "px", value: Number(px[1]) };
+  const percent = /^(-?\d+(?:\.\d+)?)%$/.exec(text);
+  if (percent) return { unit: "percent", value: Number(percent[1]) };
+  return null;
+}
+function serializeSize(size) {
+  const n = Math.round(size.value * 100) / 100;
+  const text = Object.is(n, -0) ? "0" : String(n);
+  return size.unit === "px" ? `${text}px` : `${text}%`;
+}
+function toPx(size, root) {
+  return size.unit === "px" ? size.value : size.value / 100 * root;
+}
+function fromPx(px, unit, root) {
+  const value = unit === "px" || root === 0 ? px : px / root * 100;
+  return { unit, value: Math.round(value * 100) / 100 };
+}
+function clamp(n, min, max) {
+  return Math.min(max, Math.max(min, n));
+}
+function copy(panel) {
+  return { ...panel, size: { ...panel.size }, defaultSize: { ...panel.defaultSize }, min: { ...panel.min }, max: panel.max ? { ...panel.max } : null, collapsedSize: { ...panel.collapsedSize }, restore: panel.restore ? { ...panel.restore } : null };
+}
+function createPanels(specs) {
+  if (specs.length < 2) throw new Error("Splitter needs at least two panels.");
+  const ids = /* @__PURE__ */ new Set();
+  for (const spec of specs) {
+    if (!spec.id) throw new Error("Splitter panel needs an id.");
+    if (ids.has(spec.id)) throw new Error(`Splitter panel id "${spec.id}" is used twice.`);
+    ids.add(spec.id);
+  }
+  const missing = specs.flatMap((spec, index) => spec.defaultSize == null ? [index] : []);
+  const fillAt = missing.length ? missing[missing.length - 1] : specs.length - 1;
+  return specs.map((spec, index) => {
+    const fill = index === fillAt;
+    const parsed = parseSize(spec.defaultSize) ?? { unit: "percent", value: Math.round(100 / specs.length) };
+    const size = fill && spec.defaultSize == null ? { unit: "percent", value: 0 } : parsed;
+    const collapsed = spec.defaultCollapsed ?? false;
+    return {
+      id: spec.id,
+      fill,
+      size,
+      defaultSize: { ...size },
+      min: parseSize(spec.minSize) ?? ZERO,
+      max: parseSize(spec.maxSize),
+      collapsible: spec.collapsible ?? false,
+      collapsedSize: parseSize(spec.collapsedSize) ?? ZERO,
+      collapsed,
+      restore: collapsed ? { ...size } : null,
+      autoCollapsed: false,
+      suspended: spec.suspended ?? false
+    };
+  });
+}
+function syncPanels(current, specs) {
+  const created = createPanels(specs);
+  let changed = created.length !== current.length;
+  const next = created.map((panel) => {
+    const prev = current.find((item) => item.id === panel.id);
+    if (!prev) {
+      changed = true;
+      return panel;
+    }
+    const size = within(prev.size, panel.min, panel.max) ? prev.size : panel.size;
+    const collapsed = panel.collapsible ? prev.collapsed : false;
+    const autoCollapsed = Boolean(collapsed && prev.autoCollapsed);
+    const restore = collapsed ? { ...prev.restore ?? size } : null;
+    const same = size.value === prev.size.value && size.unit === prev.size.unit && collapsed === prev.collapsed && autoCollapsed === prev.autoCollapsed && panel.suspended === prev.suspended && panel.collapsible === prev.collapsible && panel.min.value === prev.min.value && panel.min.unit === prev.min.unit && (panel.max?.value ?? null) === (prev.max?.value ?? null) && (panel.max?.unit ?? null) === (prev.max?.unit ?? null);
+    if (!same) changed = true;
+    return { ...panel, size: { ...size }, collapsed, autoCollapsed, restore };
+  });
+  return changed ? next : current;
+}
+function limits(panel, root) {
+  const min = toPx(panel.min, root);
+  const max = panel.max ? toPx(panel.max, root) : root;
+  return { min, max: Math.max(min, max) };
+}
+function taken(panel) {
+  return panel.collapsed || panel.suspended;
+}
+function measure(panels, root, handles = 0) {
+  const safeRoot = Math.max(0, root - (Number.isFinite(handles) ? handles : 0));
+  const fill = Math.max(0, panels.findIndex((panel) => panel.fill));
+  const px = panels.map((panel) => {
+    if (panel.fill && !taken(panel)) return 0;
+    if (taken(panel)) return toPx(panel.collapsedSize, safeRoot);
+    const { min, max } = limits(panel, safeRoot);
+    return clamp(toPx(panel.size, safeRoot), min, max);
+  });
+  const fillMin = toPx(panels[fill].min, safeRoot);
+  let used = px.reduce((sum2, value) => sum2 + value, 0);
+  if (safeRoot - used < fillMin) {
+    const deficit = fillMin - (safeRoot - used);
+    const flexible = panels.flatMap((panel, index) => {
+      if (panel.fill || taken(panel)) return [];
+      const room = px[index] - toPx(panel.min, safeRoot);
+      return room > 0 ? [{ index, room }] : [];
+    });
+    const roomSum = flexible.reduce((sum2, item) => sum2 + item.room, 0);
+    const take = Math.min(deficit, roomSum);
+    let left = take;
+    flexible.forEach((item, index) => {
+      const share = index === flexible.length - 1 ? left : item.room / roomSum * take;
+      px[item.index] -= share;
+      left -= share;
+    });
+    used = px.reduce((sum2, value) => sum2 + value, 0);
+  }
+  const rounded = px.map((value, index) => index === fill ? 0 : Math.round(value));
+  const sum = rounded.reduce((total, value) => total + value, 0);
+  const fillMax = panels[fill].max ? toPx(panels[fill].max, safeRoot) : safeRoot;
+  rounded[fill] = clamp(Math.round(safeRoot) - sum, 0, Math.round(fillMax));
+  return rounded;
+}
+function settle(panels, root) {
+  const next = panels.map(copy);
+  const overflow = () => {
+    const sum = next.reduce((total, panel) => {
+      if (taken(panel)) return total + toPx(panel.collapsedSize, root);
+      return total + toPx(panel.min, root);
+    }, 0);
+    return sum - root;
+  };
+  let changed = false;
+  if (overflow() > 0.5) {
+    for (let pass = 0; pass < 2 && overflow() > 0.5; pass += 1) {
+      for (let index = next.length - 1; index >= 0 && overflow() > 0.5; index -= 1) {
+        const panel = next[index];
+        if (pass === 0 && panel.fill) continue;
+        if (!panel.collapsible || panel.collapsed || panel.suspended) continue;
+        next[index] = { ...panel, collapsed: true, autoCollapsed: true, restore: { ...panel.size } };
+        changed = true;
+      }
+    }
+  } else {
+    for (let index = 0; index < next.length; index += 1) {
+      const panel = next[index];
+      if (!panel.autoCollapsed || !panel.collapsed || panel.suspended) continue;
+      const gain = toPx(panel.min, root) - toPx(panel.collapsedSize, root);
+      if (overflow() + gain > 0.5) continue;
+      next[index] = {
+        ...panel,
+        collapsed: false,
+        autoCollapsed: false,
+        size: { ...panel.restore ?? panel.defaultSize },
+        restore: null
+      };
+      changed = true;
+    }
+  }
+  return changed ? next : panels;
+}
+function handleTarget(panels, handleIndex) {
+  const left = handleIndex;
+  const right = handleIndex + 1;
+  if (!panels[left]?.fill) return left;
+  return right;
+}
+function resizeByDelta(panels, root, handleIndex, deltaPx) {
+  if (!Number.isFinite(root) || root <= 0) return panels;
+  const target = handleTarget(panels, handleIndex);
+  const fill = panels.findIndex((panel) => panel.fill);
+  if (target < 0 || fill < 0 || panels[target].fill) return panels;
+  const pixels = measure(panels, root);
+  const current = pixels[target];
+  const sign = target === handleIndex ? 1 : -1;
+  const { min, max } = limits(panels[target], root);
+  const fillMin = toPx(panels[fill].min, root);
+  const fillMax = panels[fill].max ? toPx(panels[fill].max, root) : root;
+  let delta = sign * deltaPx;
+  delta = clamp(delta, Math.max(min - current, pixels[fill] - fillMax), Math.min(max - current, pixels[fill] - fillMin));
+  const next = panels.map(copy);
+  next[target] = {
+    ...next[target],
+    collapsed: false,
+    autoCollapsed: false,
+    size: fromPx(current + delta, next[target].size.unit, root)
+  };
+  return next;
+}
+function toggleCollapsed(panels, handleIndex) {
+  const target = handleTarget(panels, handleIndex);
+  const panel = panels[target];
+  if (!panel || panel.fill || !panel.collapsible) return null;
+  const next = panels.map(copy);
+  if (panel.collapsed) {
+    next[target] = { ...next[target], collapsed: false, autoCollapsed: false, size: { ...panel.restore ?? panel.defaultSize }, restore: null };
+  } else {
+    next[target] = { ...next[target], collapsed: true, autoCollapsed: false, restore: { ...panel.size } };
+  }
+  return next;
+}
+function resetToDefault(panels, handleIndex) {
+  const target = handleTarget(panels, handleIndex);
+  const panel = panels[target];
+  if (!panel || panel.fill) return panels;
+  const next = panels.map(copy);
+  next[target] = { ...next[target], collapsed: false, autoCollapsed: false, size: { ...panel.defaultSize }, restore: null };
+  return next;
+}
+function applyKey(panels, root, handleIndex, key, options) {
+  if (key === "Enter") return toggleCollapsed(panels, handleIndex);
+  let axisKey = key;
+  if (options.rtl && options.orientation === "horizontal") {
+    if (key === "ArrowLeft") axisKey = "ArrowRight";
+    else if (key === "ArrowRight") axisKey = "ArrowLeft";
+  }
+  const horizontal = options.orientation === "horizontal";
+  const along = horizontal ? axisKey === "ArrowLeft" || axisKey === "ArrowRight" : axisKey === "ArrowUp" || axisKey === "ArrowDown";
+  const edge = axisKey === "Home" || axisKey === "End";
+  if (!along && !edge) return null;
+  const target = handleTarget(panels, handleIndex);
+  const panel = panels[target];
+  if (!panel || panel.fill) return null;
+  const sign = target === handleIndex ? 1 : -1;
+  const pixels = measure(panels, root);
+  const { min, max } = limits(panel, root);
+  if (edge) {
+    const goal = axisKey === "Home" ? min : max;
+    return resizeByDelta(panels, root, handleIndex, (goal - pixels[target]) / sign);
+  }
+  const step = (options.shift ? options.largeStep : options.step) / 100 * root;
+  const towardEnd = axisKey === "ArrowRight" || axisKey === "ArrowDown";
+  return resizeByDelta(panels, root, handleIndex, towardEnd ? step : -step);
+}
+function sameUnit(size, bound) {
+  return bound == null || bound.unit === size.unit;
+}
+function within(size, min, max) {
+  if (!sameUnit(size, min) || !sameUnit(size, max)) return false;
+  if (size.value < min.value) return false;
+  if (max && size.value > max.value) return false;
+  return true;
+}
+function applyStored(raw, panels, partial = "reject") {
+  if (!raw) return null;
+  let data;
+  try {
+    data = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  if (!data || typeof data !== "object" || Array.isArray(data)) return null;
+  const record = data;
+  const next = panels.map(copy);
+  for (const panel of next) {
+    if (panel.fill) continue;
+    const entry = record[panel.id];
+    if (entry == null) {
+      if (partial === "ignore") continue;
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`Splitter layout has no entry for panel "${panel.id}". Pass a size for every panel, or leave layout unset.`);
+      }
+      return null;
+    }
+    if (typeof entry !== "object" || Array.isArray(entry)) return null;
+    const sizeText2 = entry.size;
+    const collapsed = entry.collapsed;
+    if (typeof sizeText2 !== "string" || typeof collapsed !== "boolean") return null;
+    const size = parseSize(sizeText2);
+    if (!size || !within(size, panel.min, panel.max)) return null;
+    panel.size = size;
+    panel.collapsed = collapsed;
+    panel.autoCollapsed = false;
+    panel.restore = collapsed ? { ...size } : null;
+  }
+  return next;
+}
+function layoutOf(panels) {
+  const layout = {};
+  for (const panel of panels) {
+    layout[panel.id] = {
+      size: serializeSize(panel.size),
+      collapsed: panel.autoCollapsed ? false : panel.collapsed
+    };
+  }
+  return layout;
+}
+function sizeText(panel) {
+  return serializeSize(panel.size);
+}
+function cssSize(panel) {
+  const basis = taken(panel) ? panel.collapsedSize : panel.size;
+  if (panel.fill && !taken(panel)) return "auto";
+  const size = serializeSize(basis);
+  const max = panel.max;
+  const same = basis.unit === panel.min.unit && (max == null || max.unit === basis.unit);
+  if (!same) return size;
+  if (max) return `clamp(${serializeSize(panel.min)}, ${size}, ${serializeSize(max)})`;
+  if (panel.min.value > 0) return `max(${serializeSize(panel.min)}, ${size})`;
+  return size;
+}
+function ariaPercents(panel, pixels, root) {
+  const span = root <= 0 ? 1 : root;
+  const { min, max } = limits(panel, span);
+  return {
+    now: clamp(Math.round(pixels / span * 100), 0, 100),
+    min: clamp(Math.round(min / span * 100), 0, 100),
+    max: clamp(Math.round(max / span * 100), 0, 100)
+  };
+}
+function valueText(panel, pixels) {
+  if (panel.collapsed) return "Collapsed";
+  if (panel.size.unit === "px") return `${Math.round(pixels)} pixels`;
+  return `${serializeSize(panel.size).replace("%", "")} percent`;
+}
+var SplitterContext = React10.createContext(null);
+function useSplitter() {
+  const value = React10.useContext(SplitterContext);
+  if (!value) throw new Error("Splitter parts must be inside Splitter.Root.");
+  return value;
+}
+function flattenParts(children) {
+  const out = [];
+  const visit = (node) => {
+    React10.Children.forEach(node, (child) => {
+      if (child == null || typeof child === "boolean") return;
+      if (typeof child === "string" || typeof child === "number") {
+        if (String(child).trim() === "") return;
+        if (process.env.NODE_ENV !== "production") {
+          throw new Error("Splitter.Root only accepts Splitter.Panel and Splitter.Handle. Put text outside the splitter.");
+        }
+        return;
+      }
+      if (!React10.isValidElement(child)) return;
+      if (child.type === React10.Fragment) {
+        visit(child.props.children);
+        return;
+      }
+      if (child.type !== SplitterPanel && child.type !== SplitterHandle) {
+        if (process.env.NODE_ENV !== "production") {
+          throw new Error(
+            "Splitter.Root only accepts Splitter.Panel and Splitter.Handle as children. Render the panel directly, or return it from a Fragment. A wrapper component is not a panel."
+          );
+        }
+        return;
+      }
+      out.push(child);
+    });
+  };
+  visit(children);
+  return out;
+}
+function specsFrom(parts) {
+  const specs = [];
+  for (const child of parts) {
+    if (child.type !== SplitterPanel) continue;
+    const props = child.props;
+    specs.push({
+      id: props.id,
+      defaultSize: props.defaultSize,
+      minSize: props.minSize,
+      maxSize: props.maxSize,
+      collapsible: props.collapsible,
+      collapsedSize: props.collapsedSize,
+      defaultCollapsed: props.defaultCollapsed,
+      suspended: props.suspended
+    });
+  }
+  return specs;
+}
+function specKeyOf(specs) {
+  return specs.map(
+    (spec) => [spec.id, spec.defaultSize ?? "", spec.minSize ?? "", spec.maxSize ?? "", spec.collapsible ? "1" : "0", spec.collapsedSize ?? "", spec.defaultCollapsed ? "1" : "0", spec.suspended ? "1" : "0"].join("\0")
+  ).join("\n");
+}
+var KEYS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "Enter"]);
+function readStep(root) {
+  if (!root) return { step: 5, largeStep: 10 };
+  const style = getComputedStyle(root);
+  const step = parseFloat(style.getPropertyValue("--sl-splitter-key-step"));
+  const large = parseFloat(style.getPropertyValue("--sl-splitter-key-step-large"));
+  return {
+    step: Number.isFinite(step) ? step : 5,
+    largeStep: Number.isFinite(large) ? large : 10
+  };
+}
+var SplitterRoot = React10.forwardRef(function SplitterRoot2({ orientation = "horizontal", storageKey, layout, onLayoutChange, className, children, ...props }, ref) {
+  const uid = React10.useId();
+  const parts = flattenParts(children);
+  const specs = specsFrom(parts);
+  const specKey = specKeyOf(specs);
+  const [panels, setPanels] = React10.useState(() => createPanels(specs));
+  const [metrics, setMetrics] = React10.useState({ root: 0, handles: 0 });
+  const rootRef = React10.useRef(null);
+  const panelsRef = React10.useRef(panels);
+  const sizeRef = React10.useRef(0);
+  const dragging = React10.useRef(false);
+  const livePixels = React10.useRef(null);
+  const specsRef = React10.useRef(specs);
+  specsRef.current = specs;
+  const controlled = layout !== void 0;
+  React10.useLayoutEffect(() => {
+    setPanels((current) => syncPanels(current, specsRef.current));
+  }, [specKey]);
+  const contentSize = Math.max(0, metrics.root - metrics.handles);
+  const base = controlled ? applyStored(JSON.stringify(layout), panels) ?? panels : panels;
+  const shown = contentSize > 0 ? settle(base, contentSize) : base;
+  panelsRef.current = shown;
+  sizeRef.current = contentSize;
+  const commit = React10.useCallback(
+    (next) => {
+      const stored = layoutOf(next);
+      onLayoutChange?.(stored);
+      if (controlled) return;
+      setPanels(next);
+      if (!storageKey) return;
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(stored));
+      } catch {
+      }
+    },
+    [controlled, onLayoutChange, storageKey]
+  );
+  React10.useEffect(() => {
+    if (controlled || !storageKey) return;
+    try {
+      const next = applyStored(localStorage.getItem(storageKey), panelsRef.current, "ignore");
+      if (next) setPanels(next);
+    } catch {
+    }
+  }, [storageKey, controlled]);
+  React10.useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const apply = () => {
+      const bars = [...root.children].filter((node) => node.classList?.contains("SplitterHandle"));
+      const handleSum = bars.reduce((sum, bar) => sum + (orientation === "horizontal" ? bar.offsetWidth : bar.offsetHeight), 0);
+      const nextRoot = orientation === "horizontal" ? root.clientWidth : root.clientHeight;
+      setMetrics((current) => current.root === nextRoot && current.handles === handleSum ? current : { root: nextRoot, handles: handleSum });
+    };
+    apply();
+    const observer = new ResizeObserver(apply);
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [orientation]);
+  const pixels = measure(shown, metrics.root, metrics.handles);
+  const applyDom = React10.useCallback((next, size, handleSum) => {
+    const root = rootRef.current;
+    if (!root) return;
+    const nextPixels = measure(next, size, handleSum);
+    livePixels.current = nextPixels;
+    const elements = [...root.children].filter((node) => node.classList?.contains("SplitterPanel"));
+    elements.forEach((element, index) => {
+      element.style.setProperty("--sl-splitter-panel-size", `${nextPixels[index] ?? 0}px`);
+    });
+    const handles = [...root.children].filter((node) => node.classList?.contains("SplitterHandle"));
+    const content2 = Math.max(0, size - handleSum);
+    handles.forEach((handle, index) => {
+      const targetIndex = handleTarget(next, index);
+      const target = next[targetIndex];
+      if (!target) return;
+      const values = ariaPercents(target, nextPixels[targetIndex] ?? 0, content2);
+      handle.setAttribute("aria-valuenow", String(values.now));
+      handle.setAttribute("aria-valuetext", valueText(target, nextPixels[targetIndex] ?? 0));
+    });
+  }, []);
+  const onDragStart = React10.useCallback(
+    (index, event) => {
+      if (event.button !== 0) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const handle = event.currentTarget;
+      const root = rootRef.current;
+      const size = metrics.root;
+      if (!root || sizeRef.current <= 0) return;
+      try {
+        handle.setPointerCapture(event.pointerId);
+      } catch {
+      }
+      const start = orientation === "horizontal" ? event.clientX : event.clientY;
+      const startPanels = panelsRef.current;
+      const previousUserSelect = document.body.style.userSelect;
+      document.body.style.userSelect = "none";
+      root.setAttribute("data-dragging", "");
+      handle.setAttribute("data-dragging", "");
+      dragging.current = true;
+      let frame = 0;
+      let latest = startPanels;
+      let ended = false;
+      const move = (pointer) => {
+        const point = orientation === "horizontal" ? pointer.clientX : pointer.clientY;
+        const delta = point - start;
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(() => {
+          latest = resizeByDelta(startPanels, sizeRef.current, index, delta);
+          applyDom(latest, size, metrics.handles);
+        });
+      };
+      const finish = (restore) => {
+        if (ended) return;
+        ended = true;
+        cancelAnimationFrame(frame);
+        root.removeAttribute("data-dragging");
+        handle.removeAttribute("data-dragging");
+        document.body.style.userSelect = previousUserSelect;
+        handle.removeEventListener("pointermove", move);
+        handle.removeEventListener("pointerup", end);
+        handle.removeEventListener("pointercancel", end);
+        handle.removeEventListener("lostpointercapture", end);
+        window.removeEventListener("blur", end);
+        window.removeEventListener("keydown", onEscape, true);
+        dragging.current = false;
+        livePixels.current = null;
+        if (restore) {
+          applyDom(startPanels, size, metrics.handles);
+          return;
+        }
+        commit(latest);
+      };
+      const end = () => finish(false);
+      const onEscape = (key) => {
+        if (key.key !== "Escape") return;
+        key.preventDefault();
+        key.stopPropagation();
+        finish(true);
+      };
+      handle.addEventListener("pointermove", move);
+      handle.addEventListener("pointerup", end);
+      handle.addEventListener("pointercancel", end);
+      handle.addEventListener("lostpointercapture", end);
+      window.addEventListener("blur", end);
+      window.addEventListener("keydown", onEscape, true);
+    },
+    [applyDom, commit, metrics.handles, metrics.root, orientation]
+  );
+  const onKey = React10.useCallback(
+    (index, event) => {
+      if (!KEYS.has(event.key)) return;
+      const root = rootRef.current;
+      const rtl = root ? getComputedStyle(root).direction === "rtl" : false;
+      const next = applyKey(panelsRef.current, sizeRef.current, index, event.key, {
+        orientation,
+        shift: event.shiftKey,
+        rtl,
+        ...readStep(root)
+      });
+      if (!next) return;
+      event.preventDefault();
+      commit(next);
+    },
+    [commit, orientation]
+  );
+  const onReset = React10.useCallback(
+    (index) => {
+      commit(resetToDefault(panelsRef.current, index));
+    },
+    [commit]
+  );
+  let handleIndex = 0;
+  const content = parts.map((child) => {
+    if (child.type !== SplitterHandle) return child;
+    const index = handleIndex;
+    handleIndex += 1;
+    return React10.cloneElement(child, { index, key: child.key ?? `handle-${index}` });
+  });
+  const domId = React10.useCallback((id) => `${uid}-${id}`, [uid]);
+  const context = React10.useMemo(
+    () => ({ orientation, domId, panels: shown, pixels, contentSize, dragging, livePixels, onKey, onDragStart, onReset }),
+    [orientation, domId, shown, pixels, contentSize, onKey, onDragStart, onReset]
+  );
+  return /* @__PURE__ */ jsx(SplitterContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref: (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: cn("Splitter", className),
+      "data-orientation": orientation,
+      children: content
+    }
+  ) });
+});
+function withoutSize(props) {
+  const dom = { ...props };
+  delete dom.defaultSize;
+  delete dom.minSize;
+  delete dom.maxSize;
+  delete dom.collapsible;
+  delete dom.collapsedSize;
+  delete dom.defaultCollapsed;
+  delete dom.suspended;
+  return dom;
+}
+var SplitterPanel = React10.forwardRef(function SplitterPanel2({ id, className, style, ...props }, ref) {
+  const splitter = useSplitter();
+  const index = splitter.panels.findIndex((panel2) => panel2.id === id);
+  const panel = splitter.panels[index];
+  const measured = splitter.contentSize > 0;
+  const live = splitter.dragging.current ? splitter.livePixels.current : null;
+  const pixels = live?.[index] ?? splitter.pixels[index] ?? 0;
+  const collapsed = panel?.collapsed ?? false;
+  const suspended = panel?.suspended ?? false;
+  const hidden = (collapsed || suspended) && (measured ? pixels === 0 : (panel?.collapsedSize.value ?? 0) === 0);
+  const size = measured ? `${pixels}px` : panel ? cssSize(panel) : "auto";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...withoutSize(props),
+      ref,
+      id: splitter.domId(id),
+      className: cn("SplitterPanel", className),
+      "data-orientation": splitter.orientation,
+      "data-collapsed": collapsed ? "" : void 0,
+      "data-fill": panel?.fill ? "" : void 0,
+      hidden: hidden || void 0,
+      style: { ...style, ["--sl-splitter-panel-size"]: size }
+    }
+  );
+});
+var SplitterHandle = React10.forwardRef(function SplitterHandle2({ className, disabled, grip, index = 0, ...props }, ref) {
+  const splitter = useSplitter();
+  const targetIndex = handleTarget(splitter.panels, index);
+  const target = splitter.panels[targetIndex];
+  const live = splitter.dragging.current ? splitter.livePixels.current : null;
+  const pixels = live?.[targetIndex] ?? splitter.pixels[targetIndex] ?? 0;
+  const values = target ? ariaPercents(target, pixels, splitter.contentSize || 1) : { now: 0, min: 0, max: 100 };
+  const collapsed = target?.collapsed ?? false;
+  const bar = splitter.orientation === "horizontal" ? "vertical" : "horizontal";
+  return (
+    // The separator role does not list expanded. Collapsed still has to be announced
+    // when valuetext is not spoken. Only set it on a panel that can collapse.
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        ref,
+        className: cn("SplitterHandle", className),
+        role: "separator",
+        tabIndex: disabled ? -1 : 0,
+        "aria-orientation": bar,
+        "aria-controls": target ? splitter.domId(target.id) : void 0,
+        "aria-valuenow": values.now,
+        "aria-valuemin": values.min,
+        "aria-valuemax": values.max,
+        "aria-valuetext": target ? valueText(target, pixels) : void 0,
+        "aria-expanded": target?.collapsible ? !collapsed : void 0,
+        "aria-disabled": disabled || void 0,
+        "data-orientation": splitter.orientation,
+        "data-collapsed": collapsed ? "" : void 0,
+        "data-disabled": disabled ? "" : void 0,
+        "data-grip": grip ? "" : void 0,
+        onPointerDown: disabled ? void 0 : (event) => splitter.onDragStart(index, event),
+        onKeyDown: disabled ? void 0 : (event) => splitter.onKey(index, event),
+        onDoubleClick: disabled ? void 0 : () => splitter.onReset(index)
+      }
+    )
+  );
+});
+var Splitter = {
+  Root: SplitterRoot,
+  Panel: SplitterPanel,
+  Handle: SplitterHandle
+};
+var ListDetailContext = React10.createContext(null);
+function useListDetail() {
+  const value = React10.useContext(ListDetailContext);
+  if (!value) throw new Error("useListDetail must be inside ListDetail.Root.");
+  return { layout: value.layout, close: () => value.requestClose("close-button") };
+}
+var FALLBACK = { detail: "45%", min: "35%", max: "65%", minWidth: 720 };
+function cssSize2(element, name, fallback) {
+  const value = getComputedStyle(element).getPropertyValue(name).trim();
+  return value || fallback;
+}
+function cssPx(element, name, fallback) {
+  const value = parseFloat(getComputedStyle(element).getPropertyValue(name));
+  return Number.isFinite(value) ? value : fallback;
+}
+function inOpenPopup(target, root) {
+  if (!(target instanceof Element)) return false;
+  const dialog = target.closest('[role="dialog"]');
+  if (dialog && (!root || !root.contains(dialog))) return true;
+  const popup = target.closest("[data-open]");
+  if (!popup || popup === root) return false;
+  if (root?.contains(popup) && popup.classList.contains("ListDetailDetail")) return false;
+  return true;
+}
+var ListDetailRoot = React10.forwardRef(function ListDetailRoot2({
+  open,
+  onOpenChange,
+  narrow = "drawer",
+  splitMinWidth,
+  storageKey,
+  defaultDetailSize,
+  minDetailSize,
+  maxDetailSize,
+  handleLabel = "Resize details",
+  listLabel,
+  className,
+  children,
+  onKeyDown,
+  ...props
+}, ref) {
+  const rootRef = React10.useRef(null);
+  const listRef = React10.useRef(null);
+  const headingRef = React10.useRef(null);
+  const pendingFocus = React10.useRef(false);
+  const wasOpen = React10.useRef(false);
+  const previousFocus = React10.useRef(null);
+  const restoreFrame = React10.useRef(0);
+  const closeLocked = React10.useRef(false);
+  const layoutRef = React10.useRef(null);
+  const titleId = React10.useId();
+  const [wide, setWide] = React10.useState(null);
+  const [endSide, setEndSide] = React10.useState("right");
+  const [pointerLocked, setPointerLocked] = React10.useState(false);
+  const [header, setHeader] = React10.useState(null);
+  const [sizes, setSizes] = React10.useState(FALLBACK);
+  const [detailContainer, setDetailContainer] = React10.useState(null);
+  const [hosts, setHosts] = React10.useState({ split: null, drawer: null, page: null });
+  const measured = wide !== null;
+  const layout = wide === false ? narrow : "split";
+  const splitOpen = measured && wide === true && open;
+  let listChild = null;
+  let detailChild = null;
+  const visit = (node) => {
+    React10.Children.forEach(node, (child) => {
+      if (!React10.isValidElement(child)) return;
+      if (child.type === React10.Fragment) {
+        visit(child.props.children);
+        return;
+      }
+      if (child.type === ListDetailList) listChild = child;
+      else if (child.type === ListDetailDetail) detailChild = child;
+    });
+  };
+  visit(children);
+  const requestClose = React10.useCallback(
+    (reason) => {
+      if (!open || closeLocked.current) return;
+      onOpenChange?.(false, reason);
+    },
+    [onOpenChange, open]
+  );
+  React10.useEffect(() => {
+    const node = document.createElement("div");
+    node.className = "ListDetailSlot";
+    setDetailContainer(node);
+    return () => node.remove();
+  }, []);
+  React10.useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const apply = () => {
+      const min = splitMinWidth ?? cssPx(root, "--sl-list-detail-split-min-width", FALLBACK.minWidth);
+      setWide(root.clientWidth >= min);
+      setEndSide(getComputedStyle(root).direction === "rtl" ? "left" : "right");
+      const next = {
+        minWidth: min,
+        detail: defaultDetailSize ?? cssSize2(root, "--sl-list-detail-detail-default-size", FALLBACK.detail),
+        min: minDetailSize ?? cssSize2(root, "--sl-list-detail-detail-min-size", FALLBACK.min),
+        max: maxDetailSize ?? cssSize2(root, "--sl-list-detail-detail-max-size", FALLBACK.max)
+      };
+      setSizes((current) => current.detail === next.detail && current.min === next.min && current.max === next.max && current.minWidth === next.minWidth ? current : next);
+    };
+    apply();
+    const observer = new ResizeObserver(apply);
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [defaultDetailSize, maxDetailSize, minDetailSize, splitMinWidth]);
+  const placeSplit = React10.useCallback((node) => {
+    setHosts((current) => current.split === node ? current : { ...current, split: node });
+  }, []);
+  const placeDrawer = React10.useCallback((node) => {
+    setHosts((current) => current.drawer === node ? current : { ...current, drawer: node });
+  }, []);
+  const placePage = React10.useCallback((node) => {
+    setHosts((current) => current.page === node ? current : { ...current, page: node });
+  }, []);
+  React10.useLayoutEffect(() => {
+    if (!detailContainer) return;
+    const host = layout === "drawer" && open ? hosts.drawer : layout === "page" && open ? hosts.page : hosts.split;
+    if (host && detailContainer.parentNode !== host) host.appendChild(detailContainer);
+    const previous = layoutRef.current;
+    const changed = previous != null && previous !== layout;
+    layoutRef.current = measured ? layout : null;
+    if (!open || !changed || !measured) return;
+    const active = document.activeElement;
+    const inside = detailContainer.contains(active);
+    const onBody = active === document.body || active === document.documentElement;
+    if (!inside && !onBody) return;
+    if (layout === "drawer") {
+      pendingFocus.current = true;
+      return;
+    }
+    headingRef.current?.focus();
+  }, [detailContainer, hosts, layout, measured, open]);
+  React10.useEffect(() => {
+    if (open && !wasOpen.current) {
+      cancelAnimationFrame(restoreFrame.current);
+      previousFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      if (layout !== "drawer" && headingRef.current) {
+        headingRef.current.focus();
+        pendingFocus.current = false;
+      } else pendingFocus.current = true;
+    }
+    if (!open && wasOpen.current) {
+      const back = previousFocus.current;
+      const list = listRef.current;
+      cancelAnimationFrame(restoreFrame.current);
+      restoreFrame.current = requestAnimationFrame(() => {
+        if (back?.isConnected) back.focus();
+        else list?.focus();
+      });
+    }
+    wasOpen.current = open;
+  }, [layout, open]);
+  const context = React10.useMemo(
+    () => ({
+      open,
+      layout,
+      listLabel,
+      titleId,
+      detailContainer,
+      listRef,
+      headingRef,
+      pendingFocus,
+      closeLocked,
+      setPointerLocked,
+      setHeader,
+      requestClose
+    }),
+    [detailContainer, layout, listLabel, open, requestClose, titleId]
+  );
+  const pageShowing = measured && layout === "page" && open;
+  return /* @__PURE__ */ jsx(ListDetailContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref: (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: cn("ListDetail", className),
+      "data-layout": measured ? layout : void 0,
+      "data-open": open ? "" : void 0,
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.key !== "Escape" || event.defaultPrevented || !open || layout === "drawer") return;
+        if (inOpenPopup(event.target, rootRef.current)) return;
+        if (closeLocked.current) return;
+        event.preventDefault();
+        requestClose("escape");
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Splitter.Root,
+          {
+            className: "ListDetailSplit",
+            orientation: "horizontal",
+            storageKey,
+            hidden: pageShowing ? true : void 0,
+            children: [
+              /* @__PURE__ */ jsx(Splitter.Panel, { id: "list", className: "ListDetailListPanel", children: /* @__PURE__ */ jsx("div", { className: "ListDetailHost", children: listChild }) }),
+              splitOpen ? /* @__PURE__ */ jsx(Splitter.Handle, { "aria-label": handleLabel }) : null,
+              /* @__PURE__ */ jsx(
+                Splitter.Panel,
+                {
+                  id: "detail",
+                  className: "ListDetailDetailPanel",
+                  defaultSize: sizes.detail,
+                  minSize: sizes.min,
+                  maxSize: sizes.max,
+                  collapsedSize: "0px",
+                  suspended: !splitOpen,
+                  children: /* @__PURE__ */ jsx("div", { ref: placeSplit, className: "ListDetailHost" })
+                }
+              )
+            ]
+          }
+        ),
+        measured && layout === "drawer" ? /* @__PURE__ */ jsx(
+          Drawer.Root,
+          {
+            open,
+            modal: true,
+            swipeDirection: endSide,
+            disablePointerDismissal: pointerLocked,
+            onOpenChange: (next, details) => {
+              if (next) return;
+              if (closeLocked.current) {
+                details.cancel();
+                return;
+              }
+              requestClose(details.reason === "escape-key" ? "escape" : "close-button");
+            },
+            onOpenChangeComplete: (next) => {
+              if (!next || !pendingFocus.current) return;
+              headingRef.current?.focus();
+              pendingFocus.current = false;
+            },
+            children: /* @__PURE__ */ jsxs(Drawer.Portal, { children: [
+              /* @__PURE__ */ jsx(Drawer.Backdrop, {}),
+              /* @__PURE__ */ jsx(Drawer.Viewport, { children: /* @__PURE__ */ jsxs(Drawer.Popup, { children: [
+                header ? /* @__PURE__ */ jsxs("header", { className: "ListDetailHeader", children: [
+                  /* @__PURE__ */ jsx(
+                    Drawer.Title,
+                    {
+                      id: titleId,
+                      render: React10.createElement(`h${header.headingLevel}`),
+                      ref: (node) => {
+                        headingRef.current = node;
+                      },
+                      tabIndex: -1,
+                      children: header.title
+                    }
+                  ),
+                  header.actions ? /* @__PURE__ */ jsx("div", { className: "ListDetailActions", children: header.actions }) : null,
+                  /* @__PURE__ */ jsx(Drawer.Close, { "aria-label": header.closeLabel, disabled: header.closeDisabled, "data-emphasis": "quiet", children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "close" }) })
+                ] }) : null,
+                /* @__PURE__ */ jsx("div", { ref: placeDrawer, className: "ListDetailHost" })
+              ] }) })
+            ] })
+          }
+        ) : null,
+        pageShowing ? /* @__PURE__ */ jsx("div", { ref: placePage, className: "ListDetailHost ListDetailPage" }) : null,
+        detailChild
+      ]
+    }
+  ) });
+});
+var ListDetailList = React10.forwardRef(function ListDetailList2({ className, children, ...props }, ref) {
+  const detail = React10.useContext(ListDetailContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref: (node) => {
+        if (detail) detail.listRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: cn("ListDetailList", className),
+      role: detail?.listLabel ? "region" : void 0,
+      "aria-label": detail?.listLabel,
+      tabIndex: -1,
+      children
+    }
+  );
+});
+var ListDetailDetail = React10.forwardRef(function ListDetailDetail2({
+  title,
+  actions,
+  closeDisabled = false,
+  closeLabel = "Close",
+  backLabel = "Back",
+  headingLevel = 2,
+  className,
+  children,
+  ...props
+}, ref) {
+  const detail = React10.useContext(ListDetailContext);
+  const setLocked = detail?.setPointerLocked;
+  const setHeader = detail?.setHeader;
+  const closeLocked = detail?.closeLocked;
+  React10.useLayoutEffect(() => {
+    if (closeLocked) closeLocked.current = closeDisabled;
+    setLocked?.(closeDisabled);
+  }, [closeDisabled, closeLocked, setLocked]);
+  React10.useLayoutEffect(() => {
+    setHeader?.((current) => {
+      if (current && current.title === title && current.actions === actions && current.closeDisabled === closeDisabled && current.closeLabel === closeLabel && current.headingLevel === headingLevel) {
+        return current;
+      }
+      return { title, actions, closeDisabled, closeLabel, headingLevel };
+    });
+  }, [actions, closeDisabled, closeLabel, headingLevel, setHeader, title]);
+  React10.useLayoutEffect(() => {
+    if (!detail || detail.layout === "drawer" || !detail.pendingFocus.current || !detail.headingRef.current) return;
+    detail.headingRef.current.focus();
+    detail.pendingFocus.current = false;
+  });
+  if (!detail?.open || !detail.detailContainer) return null;
+  const Title3 = `h${headingLevel}`;
+  const { layout, titleId, headingRef, requestClose, detailContainer } = detail;
+  return createPortal(
+    /* @__PURE__ */ jsxs("section", { ...props, ref, className: cn("ListDetailDetail", className), "data-layout": layout, "aria-labelledby": titleId, children: [
+      layout === "drawer" ? null : /* @__PURE__ */ jsxs("header", { className: "ListDetailHeader", children: [
+        layout === "page" ? /* @__PURE__ */ jsxs(Button, { emphasis: "quiet", disabled: closeDisabled, onClick: () => requestClose("back"), children: [
+          /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "arrow_back" }),
+          backLabel
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          Title3,
+          {
+            id: titleId,
+            className: "ListDetailTitle",
+            ref: (node) => {
+              headingRef.current = node;
+            },
+            tabIndex: -1,
+            children: title
+          }
+        ),
+        actions ? /* @__PURE__ */ jsx("div", { className: "ListDetailActions", children: actions }) : null,
+        layout === "page" ? null : /* @__PURE__ */ jsx(Button, { emphasis: "quiet", "aria-label": closeLabel, disabled: closeDisabled, onClick: () => requestClose("close-button"), children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "close" }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ListDetailBody", children })
+    ] }),
+    detailContainer
+  );
+});
+var ListDetail = {
+  Root: ListDetailRoot,
+  List: ListDetailList,
+  Detail: ListDetailDetail
+};
+var EditableListContext = React10.createContext(null);
+function slug(value) {
+  return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "field";
+}
+function useEditable() {
+  const value = React10.useContext(EditableListContext);
+  if (!value) throw new Error("EditableList parts must be inside EditableList.Root");
+  return value;
+}
+function EditableListRoot({
+  value,
+  defaultValue,
+  onValueChange,
+  getRowId,
+  createRow,
+  minRows,
+  maxRows,
+  label,
+  itemLabel,
+  name,
+  fields,
+  locale,
+  rowError,
+  children,
+  className
+}) {
+  const prefix = React10.useId();
+  const fullId = `${prefix}-full`;
+  const errorId = `${prefix}-error`;
+  const [uncontrolled, setUncontrolled] = React10.useState(defaultValue ?? []);
+  const rows = value ?? uncontrolled;
+  const setRows = (next) => {
+    onValueChange?.(next);
+    if (value === void 0) setUncontrolled(next);
+  };
+  const rowName = itemLabel ?? label;
+  const [columns, setColumns] = React10.useState([]);
+  const [removed, setRemoved] = React10.useState("");
+  const [balanced, setBalanced] = React10.useState(false);
+  const [focusAt, setFocusAt] = React10.useState(null);
+  const stack = useUnderWidth("--sl-collection-editable-list-stack-width");
+  const updateRow = (index, patch) => {
+    setRows(rows.map((row, rowIndex) => rowIndex === index ? { ...row, ...patch } : row));
+  };
+  const removeRow = (index) => {
+    if (minRows != null && rows.length <= minRows) return;
+    const next = rows.filter((_, rowIndex) => rowIndex !== index);
+    setRemoved("");
+    setRows(next);
+    window.requestAnimationFrame(() => setRemoved(`${rowName} ${index + 1} removed`));
+    setFocusAt(next.length === 0 ? "add" : Math.min(index, next.length - 1));
+  };
+  const addRow = () => {
+    if (maxRows != null && rows.length >= maxRows) return;
+    setRows([...rows, createRow()]);
+    setFocusAt(rows.length);
+  };
+  const context = {
+    rows,
+    label,
+    getRowId,
+    itemLabel: rowName,
+    locale: locale || (typeof document === "undefined" ? "en" : document.documentElement.lang) || "en",
+    prefix,
+    fullId,
+    name,
+    minRows,
+    maxRows,
+    updateRow,
+    removeRow,
+    addRow,
+    columns,
+    setColumns,
+    errorId,
+    rowError,
+    balanced,
+    setBalanced,
+    focusAt,
+    clearFocus: () => setFocusAt(null)
+  };
+  return /* @__PURE__ */ jsx(EditableListContext.Provider, { value: context, children: /* @__PURE__ */ jsxs("div", { ref: stack.ref, className: cn("EditableList", className), "data-label": label, "data-balanced": balanced ? "" : void 0, "data-stacked": stack.under ? "" : void 0, children: [
+    /* @__PURE__ */ jsx("table", { className: "Table EditableListTable", "aria-describedby": `${fullId} ${errorId}`, children }),
+    /* @__PURE__ */ jsx("div", { className: "visually-hidden", "aria-live": "polite", children: removed }),
+    name ? rows.flatMap(
+      (row, index) => Object.entries(row).filter(([field, fieldValue]) => {
+        if (fields) return fields.includes(field);
+        if (field === "id") return false;
+        return fieldValue == null || ["string", "number", "boolean"].includes(typeof fieldValue);
+      }).map(([field, fieldValue]) => /* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}[${index}].${field}`, value: fieldValue == null ? "" : String(fieldValue) }, `${getRowId(row)}-${field}`))
+    ) : null,
+    /* @__PURE__ */ jsx(FocusBridge, {})
+  ] }) });
+}
+function FocusBridge() {
+  const list = useEditable();
+  const ref = React10.useRef(null);
+  React10.useLayoutEffect(() => {
+    if (list.focusAt == null) return;
+    const root = ref.current?.closest(".EditableList");
+    if (!root) return;
+    const target = list.focusAt === "add" ? root.querySelector(".EditableListAdd button") : root.querySelectorAll("tbody tr")[list.focusAt]?.querySelector("input, select, textarea, button");
+    target?.focus();
+    list.clearFocus();
+  });
+  return /* @__PURE__ */ jsx("div", { ref, hidden: true });
+}
+function EditableListHeader({ columns }) {
+  const list = useEditable();
+  React10.useEffect(() => {
+    list.setColumns(columns);
+  }, [columns.join("|")]);
+  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+    columns.map((column) => /* @__PURE__ */ jsx("th", { scope: "col", id: `${list.prefix}-${slug(column)}`, children: column }, column)),
+    /* @__PURE__ */ jsx("th", { scope: "col", children: /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: "Remove" }) })
+  ] }) });
+}
+function EditableListRows({ children }) {
+  const list = useEditable();
+  return /* @__PURE__ */ jsx("tbody", { children: list.rows.map((row, index) => /* @__PURE__ */ jsx(RowScope, { index, children: children(row, index, { index, update: (patch) => list.updateRow(index, patch), remove: () => list.removeRow(index) }) }, list.getRowId(row))) });
+}
+var RowIndex = React10.createContext(0);
+function RowScope({ index, children }) {
+  return /* @__PURE__ */ jsx(RowIndex.Provider, { value: index, children });
+}
+function EditableListRow({ children }) {
+  const list = useEditable();
+  const index = React10.useContext(RowIndex);
+  const message = list.rowError?.(list.rows[index]) ?? null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("tr", { "data-invalid": message ? "" : void 0, "data-row": index + 1, children }),
+    message ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: Math.max(list.columns.length, 1), children: /* @__PURE__ */ jsx(Field.Error, { id: `${list.prefix}-row-${index}-error`, children: message }) }) }) : null
+  ] });
+}
+function useEditableListField(column) {
+  const list = useEditable();
+  const index = React10.useContext(RowIndex);
+  const id = `${list.prefix}-${slug(column)}-${index}`;
+  return { id, "aria-labelledby": `${list.prefix}-${slug(column)} ${list.prefix}-row-${index}` };
+}
+function EditableListCell({ column, align, children }) {
+  const list = useEditable();
+  const index = React10.useContext(RowIndex);
+  const field = useEditableListField(column);
+  const first = list.columns[0] === column;
+  return /* @__PURE__ */ jsxs("td", { "data-align": align, children: [
+    first ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { className: "EditableListStackedTitle", children: [
+        list.itemLabel,
+        " ",
+        index + 1
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "visually-hidden", id: `${list.prefix}-row-${index}`, children: [
+        list.itemLabel,
+        " ",
+        index + 1
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx("label", { className: "EditableListFieldLabel", htmlFor: field.id, children: column }),
+    children
+  ] });
+}
+function EditableListRemoveButton() {
+  const list = useEditable();
+  const index = React10.useContext(RowIndex);
+  const hidden = list.minRows != null && list.rows.length <= list.minRows;
+  if (hidden) return /* @__PURE__ */ jsx("td", {});
+  return /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Button, { emphasis: "quiet", "data-icon-only": true, "aria-label": `Remove ${list.itemLabel} ${index + 1}`, onClick: () => list.removeRow(index), children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "close" }) }) });
+}
+function EditableListAddButton({ children }) {
+  const list = useEditable();
+  const atMax = list.maxRows != null && list.rows.length >= list.maxRows;
+  return /* @__PURE__ */ jsxs("div", { className: "EditableListAdd", children: [
+    /* @__PURE__ */ jsx(Button, { emphasis: "standard", disabled: atMax, focusableWhenDisabled: atMax, onClick: list.addRow, "aria-describedby": atMax ? list.fullId : void 0, children }),
+    atMax ? /* @__PURE__ */ jsx("p", { id: list.fullId, children: "The list is full." }) : null
+  ] });
+}
+function EditableListError({ children }) {
+  const list = useEditable();
+  return /* @__PURE__ */ jsx("p", { id: list.errorId, className: "EditableListError", role: "alert", children });
+}
+function EditableListBalance({ control, currency, sum }) {
+  const list = useEditable();
+  const math = balanceOf(sum(list.rows), control, currency);
+  const digits = math.digits;
+  const allocated = formatMoney(minorToDecimal(math.allocated, digits), { locale: list.locale, currency });
+  const target = formatMoney(minorToDecimal(math.control, digits), { locale: list.locale, currency });
+  const delta = formatMoney(minorToDecimal(math.delta < 0n ? -math.delta : math.delta, digits), { locale: list.locale, currency });
+  const word = math.tone === "balanced" ? "balanced" : math.tone === "under" ? `${delta} left` : `${delta} over`;
+  const [announced, setAnnounced] = React10.useState(word);
+  React10.useEffect(() => {
+    list.setBalanced(math.tone === "balanced");
+  }, [math.tone]);
+  React10.useEffect(() => {
+    const timer = window.setTimeout(() => setAnnounced(word), 200);
+    return () => window.clearTimeout(timer);
+  }, [word]);
+  return /* @__PURE__ */ jsxs("p", { className: "EditableListBalance", "data-color": math.tone === "balanced" ? "success" : math.tone === "over" ? "error" : "warning", "data-balanced": math.tone === "balanced" ? "" : void 0, children: [
+    "Allocated ",
+    allocated,
+    " of ",
+    target,
+    " \xB7 ",
+    word,
+    /* @__PURE__ */ jsx("span", { className: "visually-hidden", "aria-live": "polite", children: announced })
+  ] });
+}
+var EditableList = {
+  useField: useEditableListField,
+  Root: EditableListRoot,
+  Header: EditableListHeader,
+  Rows: EditableListRows,
+  Row: EditableListRow,
+  Cell: EditableListCell,
+  RemoveButton: EditableListRemoveButton,
+  AddButton: EditableListAddButton,
+  Error: EditableListError,
+  Balance: EditableListBalance
+};
+
+export { Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, Drawer, EditableList, Field, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, NumberField, Popover, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, addDays, addMonths, affixSide, applyKey, applyStored, ariaPercents, builtinPresets, clampDate, createPanels, cssSize, currencyName, currencySymbol, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatDay, formatFull, formatMoney2 as formatMoney, fromMinorUnits, getCurrencyDigits, handleTarget, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, layoutOf, lengthBlockReason, measure, monthCells, moveFocusDate, nextMonth, nextWeek, normalizePaste, orderRange, parseDate, parseDecimalString, parseSize, presetInBounds, resetToDefault, resizeByDelta, resolvePreset, roundHalfExpand, roundingChangesValue, sameSelection, serializeSize, settle, sizeText, startOfWeek, syncPanels, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, toggleCollapsed, tomorrow, useListDetail, valueText, yearToDate, yesterday };
+//# sourceMappingURL=chunk-JUUPOOQQ.js.map
+//# sourceMappingURL=chunk-JUUPOOQQ.js.map