@ansh-ui/react 0.2.0

package/dist/chunk-QO3E7TJS.js

@@ -0,0 +1,2940 @@
+import { useAnchoredPosition, useDismiss, Portal } from './chunk-XEP6P7E6.js';
+import { useControllableState } from './chunk-LXCIXR5T.js';
+import { useMergedRef } from './chunk-IBXLC5IE.js';
+import { cx } from './chunk-H34OXXJU.js';
+import { createContext, forwardRef, useRef, useState, useEffect, useCallback, useId, useContext, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { tryParseColor, parseColor, rgbToHsv, hsvToRgb, toHex, toOklchString, contrastRatio } from '@ansh-ui/core';
+
+var FieldContext = createContext(null);
+function useFieldControl() {
+  const field = useContext(FieldContext);
+  if (!field) return {};
+  return {
+    id: field.id,
+    ...field.describedBy ? { "aria-describedby": field.describedBy } : null,
+    ...field.invalid ? { "aria-invalid": true } : null,
+    ...field.required ? { "aria-required": true } : null,
+    ...field.disabled ? { disabled: true } : null
+  };
+}
+function useFieldContext() {
+  return useContext(FieldContext);
+}
+function Field({
+  label,
+  description,
+  error,
+  required = false,
+  disabled = false,
+  orientation = "vertical",
+  className,
+  children
+}) {
+  const id = useId();
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const describedBy = [error ? errorId : null, description ? descriptionId : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsx(FieldContext.Provider, { value: { id, describedBy, invalid: Boolean(error), required, disabled }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "ansh-field",
+        `ansh-field--${orientation}`,
+        disabled && "ansh-field--disabled",
+        className
+      ),
+      children: [
+        label ? /* @__PURE__ */ jsxs("label", { className: "ansh-field__label", htmlFor: id, children: [
+          label,
+          required ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ansh-field__required", children: "*" }),
+            /* @__PURE__ */ jsx("span", { className: "ansh-visually-hidden", children: " (required)" })
+          ] }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { className: "ansh-field__control", children }),
+        description ? /* @__PURE__ */ jsx("p", { className: "ansh-field__description", id: descriptionId, children: description }) : null,
+        error ? (
+          // `role="alert"` announces the message when it appears after a failed submit, which is
+          // the moment it matters. `aria-describedby` alone would only be read on re-focus.
+          /* @__PURE__ */ jsx("p", { className: "ansh-field__error", id: errorId, role: "alert", children: error })
+        ) : null
+      ]
+    }
+  ) });
+}
+function Fieldset({ legend, description, className, children }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: cx("ansh-fieldset", className),
+      ...description ? { "aria-describedby": id } : null,
+      children: [
+        /* @__PURE__ */ jsx("legend", { className: "ansh-fieldset__legend", children: legend }),
+        description ? /* @__PURE__ */ jsx("p", { className: "ansh-fieldset__description", id, children: description }) : null,
+        children
+      ]
+    }
+  );
+}
+function VisuallyHidden({
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("span", { className: "ansh-visually-hidden", ...rest, children });
+}
+var Input = forwardRef(function Input2({
+  size = "md",
+  prefix,
+  suffix,
+  clearable = false,
+  onClear,
+  invalid,
+  className,
+  wrapperClassName,
+  disabled,
+  ...rest
+}, forwardedRef) {
+  const fieldProps = useFieldControl();
+  const localRef = useRef(null);
+  const ref = useMergedRef(localRef, forwardedRef);
+  const [hasValue, setHasValue] = useState(
+    () => String(rest.value ?? rest.defaultValue ?? "").length > 0
+  );
+  useEffect(() => {
+    if (rest.value !== void 0) setHasValue(String(rest.value).length > 0);
+  }, [rest.value]);
+  const showClear = clearable && hasValue && !disabled && !rest.readOnly;
+  const grouped = Boolean(prefix || suffix || clearable);
+  const control = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      className: cx("ansh-input", `ansh-input--${size}`, !grouped && className),
+      disabled,
+      ...fieldProps,
+      ...rest,
+      ...invalid ? { "aria-invalid": true } : null,
+      onChange: (event) => {
+        setHasValue(event.target.value.length > 0);
+        rest.onChange?.(event);
+      }
+    }
+  );
+  if (!grouped) return control;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "ansh-input-group",
+        `ansh-input-group--${size}`,
+        disabled && "ansh-input-group--disabled",
+        (invalid || fieldProps["aria-invalid"]) && "ansh-input-group--invalid",
+        wrapperClassName,
+        className
+      ),
+      onMouseDown: (event) => {
+        if (event.target === event.currentTarget) {
+          event.preventDefault();
+          localRef.current?.focus();
+        }
+      },
+      children: [
+        prefix ? /* @__PURE__ */ jsx("span", { className: "ansh-input-group__affix", "aria-hidden": "true", children: prefix }) : null,
+        control,
+        showClear ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ansh-input-group__clear ansh-focusable",
+            "aria-label": "Clear",
+            onClick: () => {
+              const node = localRef.current;
+              if (node) {
+                const setter = Object.getOwnPropertyDescriptor(
+                  window.HTMLInputElement.prototype,
+                  "value"
+                )?.set;
+                setter?.call(node, "");
+                node.dispatchEvent(new Event("input", { bubbles: true }));
+                node.focus();
+              }
+              setHasValue(false);
+              onClear?.();
+            },
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M4 4l8 8M12 4l-8 8",
+                stroke: "currentColor",
+                strokeWidth: "1.75",
+                strokeLinecap: "round",
+                fill: "none"
+              }
+            ) })
+          }
+        ) : null,
+        suffix ? /* @__PURE__ */ jsx("span", { className: "ansh-input-group__affix", children: suffix }) : null
+      ]
+    }
+  );
+});
+var Textarea = forwardRef(function Textarea2({
+  autoResize = false,
+  maxRows = 12,
+  showCount = false,
+  invalid,
+  className,
+  ...rest
+}, forwardedRef) {
+  const fieldProps = useFieldControl();
+  const localRef = useRef(null);
+  const ref = useMergedRef(localRef, forwardedRef);
+  const [count, setCount] = useState(() => String(rest.value ?? rest.defaultValue ?? "").length);
+  const resize = useCallback(() => {
+    const node = localRef.current;
+    if (!node || !autoResize) return;
+    node.style.height = "auto";
+    const lineHeight = Number.parseFloat(getComputedStyle(node).lineHeight) || 20;
+    const max = lineHeight * maxRows;
+    node.style.height = `${Math.min(node.scrollHeight, max)}px`;
+    node.style.overflowY = node.scrollHeight > max ? "auto" : "hidden";
+  }, [autoResize, maxRows]);
+  useEffect(resize, [resize, rest.value]);
+  return /* @__PURE__ */ jsxs("div", { className: cx("ansh-textarea-wrap", className), children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        className: cx("ansh-input", "ansh-textarea", autoResize && "ansh-textarea--auto"),
+        ...fieldProps,
+        ...rest,
+        ...invalid ? { "aria-invalid": true } : null,
+        onChange: (event) => {
+          setCount(event.target.value.length);
+          resize();
+          rest.onChange?.(event);
+        }
+      }
+    ),
+    showCount ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cx(
+          "ansh-textarea__count",
+          rest.maxLength !== void 0 && count > rest.maxLength * 0.9 && "ansh-textarea__count--near"
+        ),
+        "aria-live": "polite",
+        children: rest.maxLength !== void 0 ? `${count} / ${rest.maxLength}` : count
+      }
+    ) : null
+  ] });
+});
+var NumberInput = forwardRef(function NumberInput2({
+  value,
+  defaultValue = 0,
+  onChange,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  step = 1,
+  precision,
+  size = "md",
+  unit,
+  steppers = true,
+  className,
+  disabled,
+  ...rest
+}, forwardedRef) {
+  const fieldProps = useFieldControl();
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const decimals = precision ?? (String(step).includes(".") ? String(step).split(".")[1].length : 0);
+  const [text, setText] = useState(() => current.toFixed(decimals));
+  const [editing, setEditing] = useState(false);
+  useEffect(() => {
+    if (!editing) setText(current.toFixed(decimals));
+  }, [current, decimals, editing]);
+  const clamp = (n) => Math.min(Math.max(n, min), max);
+  const nudge = (direction, multiplier = 1) => {
+    const next = clamp(current + step * direction * multiplier);
+    setCurrent(Number(next.toFixed(decimals)));
+  };
+  const commit = (raw) => {
+    const parsed = Number.parseFloat(raw);
+    const next = Number.isFinite(parsed) ? clamp(parsed) : current;
+    setCurrent(Number(next.toFixed(decimals)));
+    setText(next.toFixed(decimals));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "ansh-number",
+        `ansh-number--${size}`,
+        disabled && "ansh-number--disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: forwardedRef,
+            type: "text",
+            inputMode: "decimal",
+            className: "ansh-input ansh-number__input",
+            value: text,
+            disabled,
+            role: "spinbutton",
+            "aria-valuenow": current,
+            ...Number.isFinite(min) ? { "aria-valuemin": min } : null,
+            ...Number.isFinite(max) ? { "aria-valuemax": max } : null,
+            ...fieldProps,
+            ...rest,
+            onFocus: (event) => {
+              setEditing(true);
+              rest.onFocus?.(event);
+            },
+            onChange: (event) => setText(event.target.value),
+            onBlur: (event) => {
+              setEditing(false);
+              commit(event.target.value);
+              rest.onBlur?.(event);
+            },
+            onKeyDown: (event) => {
+              if (event.key === "ArrowUp") {
+                event.preventDefault();
+                nudge(1, event.shiftKey ? 10 : 1);
+              } else if (event.key === "ArrowDown") {
+                event.preventDefault();
+                nudge(-1, event.shiftKey ? 10 : 1);
+              } else if (event.key === "PageUp") {
+                event.preventDefault();
+                nudge(1, 10);
+              } else if (event.key === "PageDown") {
+                event.preventDefault();
+                nudge(-1, 10);
+              } else if (event.key === "Home" && Number.isFinite(min)) {
+                event.preventDefault();
+                setCurrent(min);
+              } else if (event.key === "End" && Number.isFinite(max)) {
+                event.preventDefault();
+                setCurrent(max);
+              } else if (event.key === "Enter") {
+                commit(event.target.value);
+              }
+              rest.onKeyDown?.(event);
+            }
+          }
+        ),
+        unit ? /* @__PURE__ */ jsx("span", { className: "ansh-number__unit", children: unit }) : null,
+        steppers ? (
+          // `tabIndex={-1}` and `aria-hidden`: the input is already a spinbutton with arrow-key
+          // support, so these buttons would be redundant tab stops announcing nothing new.
+          /* @__PURE__ */ jsxs("span", { className: "ansh-number__steppers", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                className: "ansh-number__step",
+                disabled: disabled || current >= max,
+                onClick: () => nudge(1),
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10 6", width: "10", height: "6", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M1 5l4-4 4 4",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    fill: "none",
+                    strokeLinecap: "round"
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                className: "ansh-number__step",
+                disabled: disabled || current <= min,
+                onClick: () => nudge(-1),
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10 6", width: "10", height: "6", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M1 1l4 4 4-4",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    fill: "none",
+                    strokeLinecap: "round"
+                  }
+                ) })
+              }
+            )
+          ] })
+        ) : null
+      ]
+    }
+  );
+});
+var Checkbox = forwardRef(function Checkbox2({
+  checked,
+  defaultChecked = false,
+  onChange,
+  indeterminate = false,
+  label,
+  description,
+  size = "md",
+  invalid,
+  className,
+  disabled,
+  ...rest
+}, forwardedRef) {
+  const fieldProps = useFieldControl();
+  const localRef = useRef(null);
+  const ref = useMergedRef(localRef, forwardedRef);
+  const generatedId = useId();
+  const id = rest.id ?? fieldProps.id ?? generatedId;
+  const descriptionId = `${id}-hint`;
+  const [isChecked, setChecked] = useControllableState({
+    value: checked,
+    defaultValue: defaultChecked,
+    onChange
+  });
+  useEffect(() => {
+    if (localRef.current) localRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "ansh-choice",
+        `ansh-choice--${size}`,
+        disabled && "ansh-choice--disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "ansh-choice__box", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "checkbox",
+              className: "ansh-choice__input",
+              checked: isChecked,
+              disabled: disabled ?? fieldProps.disabled,
+              onChange: (event) => setChecked(event.target.checked),
+              ...indeterminate ? { "aria-checked": "mixed" } : null,
+              ...invalid ? { "aria-invalid": true } : null,
+              ...description ? { "aria-describedby": descriptionId } : null,
+              ...rest,
+              id
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "ansh-choice__indicator ansh-choice__indicator--check", "aria-hidden": "true", children: indeterminate ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", width: "10", height: "10", children: /* @__PURE__ */ jsx("path", { d: "M3 7h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", width: "10", height: "10", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M2.5 7.5l3 3 6-6.5",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              fill: "none"
+            }
+          ) }) })
+        ] }),
+        label || description ? /* @__PURE__ */ jsxs("span", { className: "ansh-choice__text", children: [
+          label ? /* @__PURE__ */ jsx("label", { className: "ansh-choice__label", htmlFor: id, children: label }) : null,
+          description ? /* @__PURE__ */ jsx("span", { className: "ansh-choice__description", id: descriptionId, children: description }) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+var Switch = forwardRef(function Switch2({
+  checked,
+  defaultChecked = false,
+  onChange,
+  label,
+  description,
+  labelPosition = "end",
+  size = "md",
+  className,
+  disabled,
+  ...rest
+}, forwardedRef) {
+  const fieldProps = useFieldControl();
+  const generatedId = useId();
+  const id = rest.id ?? fieldProps.id ?? generatedId;
+  const descriptionId = `${id}-hint`;
+  const [isChecked, setChecked] = useControllableState({
+    value: checked,
+    defaultValue: defaultChecked,
+    onChange
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "ansh-switch-row",
+        `ansh-switch-row--${labelPosition}`,
+        disabled && "ansh-choice--disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "ansh-switch", "data-size": size, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: forwardedRef,
+              type: "checkbox",
+              role: "switch",
+              className: "ansh-choice__input",
+              checked: isChecked,
+              disabled: disabled ?? fieldProps.disabled,
+              onChange: (event) => setChecked(event.target.checked),
+              ...description ? { "aria-describedby": descriptionId } : null,
+              ...rest,
+              id
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "ansh-switch__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "ansh-switch__thumb" }) })
+        ] }),
+        label || description ? /* @__PURE__ */ jsxs("span", { className: "ansh-choice__text", children: [
+          label ? /* @__PURE__ */ jsx("label", { className: "ansh-choice__label", htmlFor: id, children: label }) : null,
+          description ? /* @__PURE__ */ jsx("span", { className: "ansh-choice__description", id: descriptionId, children: description }) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+var RadioGroupContext = createContext(null);
+function RadioGroup({
+  value,
+  defaultValue,
+  onChange,
+  name,
+  label,
+  orientation = "vertical",
+  disabled = false,
+  className,
+  children
+}) {
+  const generatedName = useId();
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  return /* @__PURE__ */ jsx(
+    RadioGroupContext.Provider,
+    {
+      value: {
+        name: name ?? generatedName,
+        value: current,
+        setValue: setCurrent,
+        disabled
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "radiogroup",
+          ...label && typeof label === "string" ? { "aria-label": label } : null,
+          className: cx("ansh-radio-group", `ansh-radio-group--${orientation}`, className),
+          children
+        }
+      )
+    }
+  );
+}
+var Radio = forwardRef(function Radio2({ value, label, description, size = "md", className, disabled, ...rest }, forwardedRef) {
+  const group = useContext(RadioGroupContext);
+  const generatedId = useId();
+  const id = rest.id ?? generatedId;
+  const descriptionId = `${id}-hint`;
+  const isDisabled = disabled || group?.disabled;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "ansh-choice",
+        `ansh-choice--${size}`,
+        isDisabled && "ansh-choice--disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "ansh-choice__box", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: forwardedRef,
+              type: "radio",
+              className: "ansh-choice__input",
+              name: group?.name,
+              value,
+              checked: group ? group.value === value : void 0,
+              disabled: isDisabled,
+              onChange: () => group?.setValue(value),
+              ...description ? { "aria-describedby": descriptionId } : null,
+              ...rest,
+              id
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "ansh-choice__indicator ansh-choice__indicator--dot", "aria-hidden": "true" })
+        ] }),
+        label || description ? /* @__PURE__ */ jsxs("span", { className: "ansh-choice__text", children: [
+          label ? /* @__PURE__ */ jsx("label", { className: "ansh-choice__label", htmlFor: id, children: label }) : null,
+          description ? /* @__PURE__ */ jsx("span", { className: "ansh-choice__description", id: descriptionId, children: description }) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+var ChoiceCard = forwardRef(function ChoiceCard2({ icon, label, description, value, className, ...rest }, forwardedRef) {
+  const group = useContext(RadioGroupContext);
+  const selected = group?.value === value;
+  return /* @__PURE__ */ jsxs("label", { className: cx("ansh-choice-card", selected && "ansh-choice-card--selected", className), children: [
+    /* @__PURE__ */ jsx(Radio, { ref: forwardedRef, value, className: "ansh-choice-card__radio", ...rest }),
+    icon ? /* @__PURE__ */ jsx("span", { className: "ansh-choice-card__icon", children: icon }) : null,
+    /* @__PURE__ */ jsxs("span", { className: "ansh-choice-card__body", children: [
+      /* @__PURE__ */ jsx("span", { className: "ansh-choice-card__label", children: label }),
+      description ? /* @__PURE__ */ jsx("span", { className: "ansh-choice-card__description", children: description }) : null
+    ] })
+  ] });
+});
+function stepActive(options, active, delta, loop = true) {
+  if (options.length === 0) return -1;
+  let index = active;
+  for (let attempts = 0; attempts < options.length; attempts++) {
+    index += delta;
+    if (index < 0) {
+      if (!loop) return active;
+      index = options.length - 1;
+    }
+    if (index >= options.length) {
+      if (!loop) return active;
+      index = 0;
+    }
+    if (!options[index]?.disabled) return index;
+  }
+  return active;
+}
+function firstEnabled(options, from = 0) {
+  for (let i = from; i < options.length; i++) {
+    if (!options[i]?.disabled) return i;
+  }
+  return -1;
+}
+function useTypeahead(options, onMatch, timeout = 600) {
+  const bufferRef = useRef("");
+  const timerRef = useRef(void 0);
+  return useCallback(
+    (key) => {
+      if (key.length !== 1 || key === " ") return false;
+      clearTimeout(timerRef.current);
+      bufferRef.current += key.toLowerCase();
+      timerRef.current = setTimeout(() => {
+        bufferRef.current = "";
+      }, timeout);
+      const buffer = bufferRef.current;
+      const index = options.findIndex(
+        (option) => !option.disabled && option.label.toLowerCase().startsWith(buffer)
+      );
+      if (index >= 0) {
+        onMatch(index);
+        return true;
+      }
+      return false;
+    },
+    [options, onMatch, timeout]
+  );
+}
+function scoreOption(query, option) {
+  if (query.trim() === "") return 0;
+  const q = query.toLowerCase();
+  const haystacks = [option.label, option.keywords ?? "", option.description ?? ""];
+  let best = -1;
+  for (let h = 0; h < haystacks.length; h++) {
+    const text = haystacks[h].toLowerCase();
+    let queryIndex = 0;
+    let total = 0;
+    let run = 0;
+    for (let i = 0; i < text.length && queryIndex < q.length; i++) {
+      if (text[i] === q[queryIndex]) {
+        run++;
+        total += run * 2 + (i === 0 ? 8 : 0);
+        queryIndex++;
+      } else {
+        run = 0;
+      }
+    }
+    if (queryIndex === q.length) best = Math.max(best, total - h * 4);
+  }
+  return best;
+}
+function filterOptions(options, query) {
+  if (query.trim() === "") return options;
+  return options.map((option) => ({ option, score: scoreOption(query, option) })).filter((entry) => entry.score >= 0).sort((a, b) => b.score - a.score).map((entry) => entry.option);
+}
+function OptionList({
+  options,
+  active,
+  selected,
+  listId,
+  multiple = false,
+  emptyMessage = "No results",
+  onSelect,
+  onActiveChange,
+  query
+}) {
+  const selectedSet = useMemo(() => new Set(selected), [selected]);
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "ansh-listbox__empty", children: emptyMessage });
+  }
+  let lastGroup;
+  return /* @__PURE__ */ jsx(Fragment, { children: options.map((option, index) => {
+    const heading = option.group && option.group !== lastGroup ? option.group : null;
+    lastGroup = option.group;
+    const isSelected = selectedSet.has(option.value);
+    return /* @__PURE__ */ jsxs("div", { role: "presentation", children: [
+      heading ? /* @__PURE__ */ jsx("div", { className: "ansh-listbox__group", role: "presentation", children: heading }) : null,
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          id: `${listId}-option-${index}`,
+          role: "option",
+          "aria-selected": isSelected,
+          "aria-disabled": option.disabled || void 0,
+          className: cx(
+            "ansh-listbox__option",
+            index === active && "ansh-listbox__option--active",
+            isSelected && "ansh-listbox__option--selected",
+            option.disabled && "ansh-listbox__option--disabled"
+          ),
+          onMouseDown: (event) => event.preventDefault(),
+          onMouseEnter: () => !option.disabled && onActiveChange(index),
+          onClick: () => !option.disabled && onSelect(option),
+          children: [
+            multiple ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cx("ansh-listbox__check", isSelected && "ansh-listbox__check--on"),
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", width: "10", height: "10", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M2.5 7.5l3 3 6-6.5",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    fill: "none"
+                  }
+                ) })
+              }
+            ) : null,
+            option.icon ? /* @__PURE__ */ jsx("span", { className: "ansh-listbox__icon", children: option.icon }) : null,
+            /* @__PURE__ */ jsxs("span", { className: "ansh-listbox__text", children: [
+              /* @__PURE__ */ jsx("span", { className: "ansh-listbox__label", children: query ? /* @__PURE__ */ jsx(Highlight, { text: option.label, query }) : option.label }),
+              option.description ? /* @__PURE__ */ jsx("span", { className: "ansh-listbox__description", children: option.description }) : null
+            ] }),
+            !multiple && isSelected ? /* @__PURE__ */ jsx("span", { className: "ansh-listbox__tick", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", width: "12", height: "12", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M2.5 7.5l3 3 6-6.5",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                fill: "none"
+              }
+            ) }) }) : null
+          ]
+        }
+      )
+    ] }, option.value);
+  }) });
+}
+function Highlight({ text, query }) {
+  const q = query.toLowerCase();
+  const lower = text.toLowerCase();
+  const parts = [];
+  let queryIndex = 0;
+  let plain = "";
+  for (let i = 0; i < text.length; i++) {
+    if (queryIndex < q.length && lower[i] === q[queryIndex]) {
+      if (plain) {
+        parts.push(plain);
+        plain = "";
+      }
+      parts.push(
+        /* @__PURE__ */ jsx("mark", { className: "ansh-listbox__mark", children: text[i] }, i)
+      );
+      queryIndex++;
+    } else {
+      plain += text[i];
+    }
+  }
+  if (plain) parts.push(plain);
+  return /* @__PURE__ */ jsx(Fragment, { children: parts });
+}
+function Select({
+  options,
+  value,
+  defaultValue = null,
+  onChange,
+  placeholder = "Select\u2026",
+  disabled = false,
+  invalid = false,
+  size = "md",
+  clearable = false,
+  label,
+  className,
+  name,
+  maxHeight = "18rem",
+  emptyMessage
+}) {
+  const fieldProps = useFieldControl();
+  const [open, setOpen] = useState(false);
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const triggerRef = useRef(null);
+  const listRef = useRef(null);
+  const listId = useId();
+  const selectedIndex = useMemo(
+    () => options.findIndex((option) => option.value === current),
+    [options, current]
+  );
+  const selected = selectedIndex >= 0 ? options[selectedIndex] : void 0;
+  const [active, setActive] = useState(0);
+  const position = useAnchoredPosition(triggerRef, listRef, open, {
+    placement: "bottom-start",
+    offset: 6,
+    matchWidth: true
+  });
+  useDismiss(listRef, open, () => setOpen(false), { ignore: [triggerRef] });
+  const openList = useCallback(() => {
+    if (disabled) return;
+    setActive(selectedIndex >= 0 ? selectedIndex : firstEnabled(options));
+    setOpen(true);
+  }, [disabled, selectedIndex, options]);
+  const commit = useCallback(
+    (option) => {
+      setCurrent(option.value);
+      setOpen(false);
+      triggerRef.current?.focus();
+    },
+    [setCurrent]
+  );
+  const typeahead = useTypeahead(options, (index) => {
+    setActive(index);
+    if (!open) setCurrent(options[index].value);
+  });
+  const onTriggerKeyDown = (event) => {
+    if (["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
+      event.preventDefault();
+      openList();
+      return;
+    }
+    if (typeahead(event.key)) event.preventDefault();
+  };
+  const onListKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setActive((i) => stepActive(options, i, 1));
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setActive((i) => stepActive(options, i, -1));
+        break;
+      case "Home":
+        event.preventDefault();
+        setActive(firstEnabled(options));
+        break;
+      case "End":
+        event.preventDefault();
+        setActive(stepActive(options, options.length, -1, false));
+        break;
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        const option = options[active];
+        if (option && !option.disabled) commit(option);
+        break;
+      }
+      case "Escape":
+        event.preventDefault();
+        setOpen(false);
+        triggerRef.current?.focus();
+        break;
+      case "Tab":
+        event.preventDefault();
+        setOpen(false);
+        triggerRef.current?.focus();
+        break;
+      default:
+        if (typeahead(event.key)) event.preventDefault();
+    }
+  };
+  const attachList = useCallback((node) => {
+    listRef.current = node;
+    node?.focus({ preventScroll: true });
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    document.getElementById(`${listId}-option-${active}`)?.scrollIntoView?.({ block: "nearest" });
+  }, [active, listId, open]);
+  return /* @__PURE__ */ jsxs("div", { className: cx("ansh-select", `ansh-select--${size}`, className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: cx(
+          "ansh-select__trigger",
+          "ansh-focusable",
+          open && "ansh-select__trigger--open",
+          (invalid || fieldProps["aria-invalid"]) && "ansh-select__trigger--invalid",
+          !selected && "ansh-select__trigger--placeholder"
+        ),
+        disabled: disabled || fieldProps.disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? listId : void 0,
+        ...label ? { "aria-label": label } : null,
+        ...fieldProps,
+        onClick: () => open ? setOpen(false) : openList(),
+        onKeyDown: onTriggerKeyDown,
+        children: [
+          selected?.icon ? /* @__PURE__ */ jsx("span", { className: "ansh-select__icon", children: selected.icon }) : null,
+          /* @__PURE__ */ jsx("span", { className: "ansh-select__value", children: selected?.label ?? placeholder }),
+          clearable && selected && !disabled ? (
+            // A `<span role="button">` rather than a nested `<button>`: nesting interactive
+            // elements is invalid HTML and browsers resolve it by dropping the inner one.
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "button",
+                tabIndex: -1,
+                "aria-label": "Clear selection",
+                className: "ansh-select__clear",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  setCurrent(null);
+                },
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M4 4l8 8M12 4l-8 8",
+                    stroke: "currentColor",
+                    strokeWidth: "1.75",
+                    strokeLinecap: "round",
+                    fill: "none"
+                  }
+                ) })
+              }
+            )
+          ) : null,
+          /* @__PURE__ */ jsx("span", { className: "ansh-select__arrow", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: "12", height: "12", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M3 4.5L6 7.5l3-3",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              fill: "none",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) }) })
+        ]
+      }
+    ),
+    name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current ?? "" }) : null,
+    open ? /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: attachList,
+        id: listId,
+        role: "listbox",
+        tabIndex: -1,
+        "aria-activedescendant": options[active] ? `${listId}-option-${active}` : void 0,
+        ...label ? { "aria-label": label } : null,
+        className: "ansh-listbox",
+        style: { ...position.style, maxHeight },
+        "data-side": position.side,
+        onKeyDown: onListKeyDown,
+        children: /* @__PURE__ */ jsx(
+          OptionList,
+          {
+            options,
+            active,
+            selected: current ? [current] : [],
+            listId,
+            onSelect: commit,
+            onActiveChange: setActive,
+            ...emptyMessage !== void 0 ? { emptyMessage } : null
+          }
+        )
+      }
+    ) }) : null
+  ] });
+}
+function Combobox({
+  options,
+  value,
+  defaultValue = [],
+  onChange,
+  multiple = false,
+  placeholder = "Search\u2026",
+  disabled = false,
+  invalid = false,
+  size = "md",
+  label,
+  className,
+  maxHeight = "18rem",
+  emptyMessage,
+  onCreate,
+  createLabel = (query) => `Create \u201C${query}\u201D`,
+  onSearch,
+  filter = true,
+  maxVisibleChips = Number.POSITIVE_INFINITY
+}) {
+  const fieldProps = useFieldControl();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const [selected, setSelected] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const inputRef = useRef(null);
+  const wrapRef = useRef(null);
+  const listRef = useRef(null);
+  const listId = useId();
+  const visible = useMemo(
+    () => filter ? filterOptions(options, query) : options,
+    [options, query, filter]
+  );
+  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
+  const canCreate = Boolean(onCreate) && query.trim().length > 0 && !options.some((option) => option.label.toLowerCase() === query.trim().toLowerCase());
+  const CREATE_VALUE = "__au_create__";
+  const rows = useMemo(
+    () => canCreate ? [...visible, { value: CREATE_VALUE, label: createLabel(query.trim()) }] : visible,
+    [visible, canCreate, createLabel, query]
+  );
+  const position = useAnchoredPosition(wrapRef, listRef, open, {
+    placement: "bottom-start",
+    offset: 6,
+    matchWidth: true
+  });
+  useDismiss(listRef, open, () => setOpen(false), { ignore: [wrapRef] });
+  useEffect(() => setActive(firstEnabled(rows)), [rows]);
+  const toggle = useCallback(
+    (option) => {
+      let optionValue = option.value;
+      if (optionValue === CREATE_VALUE && onCreate) {
+        optionValue = onCreate(query.trim());
+      }
+      if (multiple) {
+        const next = selected.includes(optionValue) ? selected.filter((v) => v !== optionValue) : [...selected, optionValue];
+        setSelected(next);
+        setQuery("");
+        inputRef.current?.focus();
+      } else {
+        setSelected([optionValue]);
+        setQuery("");
+        setOpen(false);
+      }
+    },
+    [multiple, onCreate, query, selected, setSelected]
+  );
+  const remove = useCallback(
+    (optionValue) => setSelected(selected.filter((v) => v !== optionValue)),
+    [selected, setSelected]
+  );
+  const onKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        setActive((i) => stepActive(rows, i, 1));
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        setActive((i) => stepActive(rows, i, -1));
+        break;
+      case "Home":
+        if (!open) return;
+        event.preventDefault();
+        setActive(firstEnabled(rows));
+        break;
+      case "End":
+        if (!open) return;
+        event.preventDefault();
+        setActive(stepActive(rows, rows.length, -1, false));
+        break;
+      case "Enter": {
+        if (!open) return;
+        const option = rows[active];
+        if (option && !option.disabled) {
+          event.preventDefault();
+          toggle(option);
+        }
+        break;
+      }
+      case "Escape":
+        if (!open) return;
+        event.preventDefault();
+        setOpen(false);
+        break;
+      case "Backspace":
+        if (multiple && query === "" && selected.length > 0) {
+          remove(selected[selected.length - 1]);
+        }
+        break;
+    }
+  };
+  useEffect(() => {
+    if (!open) return;
+    document.getElementById(`${listId}-option-${active}`)?.scrollIntoView?.({ block: "nearest" });
+  }, [active, listId, open]);
+  const chips = multiple ? selected : [];
+  const overflow = Math.max(0, chips.length - maxVisibleChips);
+  const shownChips = overflow > 0 ? chips.slice(0, maxVisibleChips) : chips;
+  const singleLabel = !multiple && selected[0] ? byValue.get(selected[0])?.label ?? "" : "";
+  const inputValue = open || multiple ? query : singleLabel;
+  return /* @__PURE__ */ jsxs("div", { className: cx("ansh-combobox", `ansh-combobox--${size}`, className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: wrapRef,
+        className: cx(
+          "ansh-combobox__control",
+          "ansh-focusable-within",
+          open && "ansh-combobox__control--open",
+          (invalid || fieldProps["aria-invalid"]) && "ansh-combobox__control--invalid",
+          disabled && "ansh-combobox__control--disabled"
+        ),
+        onMouseDown: (event) => {
+          if (event.target === event.currentTarget) {
+            event.preventDefault();
+            inputRef.current?.focus();
+            setOpen(true);
+          }
+        },
+        children: [
+          shownChips.map((chipValue) => {
+            const option = byValue.get(chipValue);
+            return /* @__PURE__ */ jsxs("span", { className: "ansh-chip", children: [
+              option?.icon ? /* @__PURE__ */ jsx("span", { className: "ansh-chip__icon", children: option.icon }) : null,
+              /* @__PURE__ */ jsx("span", { className: "ansh-chip__label", children: option?.label ?? chipValue }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ansh-chip__remove",
+                  "aria-label": `Remove ${option?.label ?? chipValue}`,
+                  disabled,
+                  onClick: () => remove(chipValue),
+                  children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "10", height: "10", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M4 4l8 8M12 4l-8 8",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      fill: "none"
+                    }
+                  ) })
+                }
+              )
+            ] }, chipValue);
+          }),
+          overflow > 0 ? /* @__PURE__ */ jsxs("span", { className: "ansh-chip ansh-chip--count", children: [
+            "+",
+            overflow
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              role: "combobox",
+              className: "ansh-combobox__input",
+              value: inputValue,
+              placeholder: chips.length > 0 ? "" : placeholder,
+              disabled: disabled || fieldProps.disabled,
+              autoComplete: "off",
+              spellCheck: false,
+              "aria-expanded": open,
+              "aria-controls": open ? listId : void 0,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": open && rows[active] ? `${listId}-option-${active}` : void 0,
+              ...label ? { "aria-label": label } : null,
+              ...fieldProps,
+              onChange: (event) => {
+                setQuery(event.target.value);
+                setOpen(true);
+                onSearch?.(event.target.value);
+              },
+              onFocus: () => setOpen(true),
+              onKeyDown
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "ansh-select__arrow", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: "12", height: "12", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M3 4.5L6 7.5l3-3",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              fill: "none",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "ansh-visually-hidden", "aria-live": "polite", children: open ? `${visible.length} result${visible.length === 1 ? "" : "s"} available` : "" }),
+    open ? /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: listRef,
+        id: listId,
+        role: "listbox",
+        "aria-multiselectable": multiple || void 0,
+        ...label ? { "aria-label": label } : null,
+        className: "ansh-listbox",
+        style: { ...position.style, maxHeight },
+        "data-side": position.side,
+        children: /* @__PURE__ */ jsx(
+          OptionList,
+          {
+            options: rows,
+            active,
+            selected,
+            listId,
+            multiple,
+            query,
+            onSelect: toggle,
+            onActiveChange: setActive,
+            ...emptyMessage !== void 0 ? { emptyMessage } : null
+          }
+        )
+      }
+    ) }) : null
+  ] });
+}
+function snap(value, min, max, step) {
+  if (step <= 0) return Math.min(Math.max(value, min), max);
+  const stepped = Math.round((value - min) / step) * step + min;
+  const decimals = String(step).includes(".") ? String(step).split(".")[1].length : 0;
+  return Number(Math.min(Math.max(stepped, min), max).toFixed(decimals));
+}
+function Slider({
+  value,
+  defaultValue = 0,
+  onChange,
+  onCommit,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  orientation = "horizontal",
+  marks,
+  showValue = false,
+  formatValue = String,
+  label,
+  className,
+  name
+}) {
+  const fieldProps = useFieldControl();
+  const [current, setCurrent] = useControllableState({ value, defaultValue, onChange });
+  const trackRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const id = useId();
+  const percent = (current - min) / (max - min) * 100;
+  const valueFromPointer = useCallback(
+    (event) => {
+      const track = trackRef.current;
+      if (!track) return current;
+      const rect = track.getBoundingClientRect();
+      const fraction = orientation === "horizontal" ? (event.clientX - rect.left) / rect.width : (
+        // Inverted: in a vertical slider, up is more.
+        1 - (event.clientY - rect.top) / rect.height
+      );
+      return snap(min + fraction * (max - min), min, max, step);
+    },
+    [current, min, max, step, orientation]
+  );
+  const onPointerDown = (event) => {
+    if (disabled) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+    let latest = valueFromPointer(event);
+    setCurrent(latest);
+    const onMove = (moveEvent) => {
+      latest = valueFromPointer(moveEvent);
+      setCurrent(latest);
+    };
+    const onUp = () => {
+      setDragging(false);
+      onCommit?.(latest);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+  };
+  const onKeyDown = (event) => {
+    if (disabled) return;
+    const large = (max - min) / 10;
+    let next = null;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = current + step;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = current - step;
+        break;
+      case "PageUp":
+        next = current + large;
+        break;
+      case "PageDown":
+        next = current - large;
+        break;
+      case "Home":
+        next = min;
+        break;
+      case "End":
+        next = max;
+        break;
+    }
+    if (next === null) return;
+    event.preventDefault();
+    const snapped = snap(next, min, max, step);
+    setCurrent(snapped);
+    onCommit?.(snapped);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "ansh-slider",
+        `ansh-slider--${orientation}`,
+        disabled && "ansh-slider--disabled",
+        dragging && "ansh-slider--dragging",
+        className
+      ),
+      style: { ["--ansh-slider-percent"]: `${percent}%` },
+      children: [
+        /* @__PURE__ */ jsxs("div", { ref: trackRef, className: "ansh-slider__track", onPointerDown, children: [
+          /* @__PURE__ */ jsx("div", { className: "ansh-slider__fill" }),
+          marks?.map((mark) => {
+            const markPercent = (mark.value - min) / (max - min) * 100;
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cx(
+                  "ansh-slider__mark",
+                  current >= mark.value && "ansh-slider__mark--passed"
+                ),
+                style: { ["--ansh-mark"]: `${markPercent}%` },
+                children: mark.label ? /* @__PURE__ */ jsx("span", { className: "ansh-slider__mark-label", children: mark.label }) : null
+              },
+              mark.value
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "slider",
+              tabIndex: disabled ? -1 : 0,
+              className: "ansh-slider__thumb ansh-focusable",
+              "aria-valuenow": current,
+              "aria-valuemin": min,
+              "aria-valuemax": max,
+              ...formatValue(current) !== String(current) ? { "aria-valuetext": formatValue(current) } : null,
+              "aria-orientation": orientation,
+              "aria-disabled": disabled || void 0,
+              ...label ? { "aria-label": label } : null,
+              ...fieldProps.id ? { "aria-labelledby": void 0, id: fieldProps.id } : null,
+              ...fieldProps["aria-describedby"] ? { "aria-describedby": fieldProps["aria-describedby"] } : null,
+              onPointerDown,
+              onKeyDown,
+              children: showValue === "always" || showValue && dragging ? /* @__PURE__ */ jsx("span", { className: "ansh-slider__bubble", "aria-hidden": "true", children: formatValue(current) }) : null
+            }
+          )
+        ] }),
+        name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current, id: `${id}-hidden` }) : null
+      ]
+    }
+  );
+}
+function RangeSlider({
+  value,
+  defaultValue = [0, 100],
+  onChange,
+  onCommit,
+  min = 0,
+  max = 100,
+  step = 1,
+  minDistance = 0,
+  disabled = false,
+  marks,
+  showValue = false,
+  formatValue = String,
+  label,
+  className
+}) {
+  const [range, setRange] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const trackRef = useRef(null);
+  const [dragging, setDragging] = useState(null);
+  const [low, high] = range;
+  const lowPercent = (low - min) / (max - min) * 100;
+  const highPercent = (high - min) / (max - min) * 100;
+  const valueFromPointer = (event) => {
+    const track = trackRef.current;
+    if (!track) return low;
+    const rect = track.getBoundingClientRect();
+    return snap(min + (event.clientX - rect.left) / rect.width * (max - min), min, max, step);
+  };
+  const apply = (thumb2, next) => {
+    if (thumb2 === 0) {
+      return next > high - minDistance ? [high - minDistance, high] : [next, high];
+    }
+    return next < low + minDistance ? [low, low + minDistance] : [low, next];
+  };
+  const startDrag = (thumb2) => (event) => {
+    if (disabled) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(thumb2);
+    let latest = range;
+    const onMove = (moveEvent) => {
+      latest = apply(thumb2, valueFromPointer(moveEvent));
+      setRange(latest);
+    };
+    const onUp = () => {
+      setDragging(null);
+      onCommit?.(latest);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+  const keyHandler = (thumb2) => (event) => {
+    if (disabled) return;
+    const currentValue = range[thumb2];
+    const large = (max - min) / 10;
+    let next = null;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = currentValue + step;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = currentValue - step;
+        break;
+      case "PageUp":
+        next = currentValue + large;
+        break;
+      case "PageDown":
+        next = currentValue - large;
+        break;
+      case "Home":
+        next = min;
+        break;
+      case "End":
+        next = max;
+        break;
+    }
+    if (next === null) return;
+    event.preventDefault();
+    const applied = apply(thumb2, snap(next, min, max, step));
+    setRange(applied);
+    onCommit?.(applied);
+  };
+  const thumb = (index, thumbLabel) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "slider",
+      tabIndex: disabled ? -1 : 0,
+      className: "ansh-slider__thumb ansh-focusable",
+      style: { ["--ansh-thumb"]: `${index === 0 ? lowPercent : highPercent}%` },
+      "aria-label": label ? `${label} ${thumbLabel}` : thumbLabel,
+      "aria-valuenow": range[index],
+      "aria-valuemin": index === 0 ? min : low + minDistance,
+      "aria-valuemax": index === 0 ? high - minDistance : max,
+      ...formatValue(range[index]) !== String(range[index]) ? { "aria-valuetext": formatValue(range[index]) } : null,
+      "aria-disabled": disabled || void 0,
+      onPointerDown: startDrag(index),
+      onKeyDown: keyHandler(index),
+      children: showValue === "always" || showValue && dragging === index ? /* @__PURE__ */ jsx("span", { className: "ansh-slider__bubble", "aria-hidden": "true", children: formatValue(range[index]) }) : null
+    },
+    index
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        "ansh-slider",
+        "ansh-slider--horizontal",
+        "ansh-slider--range",
+        disabled && "ansh-slider--disabled",
+        className
+      ),
+      style: {
+        ["--ansh-range-start"]: `${lowPercent}%`,
+        ["--ansh-range-end"]: `${highPercent}%`
+      },
+      children: /* @__PURE__ */ jsxs("div", { ref: trackRef, className: "ansh-slider__track", children: [
+        /* @__PURE__ */ jsx("div", { className: "ansh-slider__fill ansh-slider__fill--range" }),
+        marks?.map((mark) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cx(
+              "ansh-slider__mark",
+              mark.value >= low && mark.value <= high && "ansh-slider__mark--passed"
+            ),
+            style: { ["--ansh-mark"]: `${(mark.value - min) / (max - min) * 100}%` },
+            children: mark.label ? /* @__PURE__ */ jsx("span", { className: "ansh-slider__mark-label", children: mark.label }) : null
+          },
+          mark.value
+        )),
+        thumb(0, "minimum"),
+        thumb(1, "maximum")
+      ] })
+    }
+  );
+}
+function PinInput({
+  length = 6,
+  value,
+  defaultValue = "",
+  onChange,
+  onComplete,
+  type = "numeric",
+  mask = false,
+  disabled = false,
+  invalid = false,
+  autoFocus = false,
+  label = "Verification code",
+  className
+}) {
+  const [code, setCode] = useControllableState({ value, defaultValue, onChange });
+  const inputsRef = useRef([]);
+  const id = useId();
+  const pattern = type === "numeric" ? /[^0-9]/g : /[^a-zA-Z0-9]/g;
+  const completedRef = useRef(false);
+  useEffect(() => {
+    if (code.length === length && !completedRef.current) {
+      completedRef.current = true;
+      onComplete?.(code);
+    } else if (code.length < length) {
+      completedRef.current = false;
+    }
+  }, [code, length, onComplete]);
+  const setCharAt = (index, char) => {
+    const chars = code.padEnd(length, " ").split("");
+    chars[index] = char;
+    setCode(chars.join("").trimEnd());
+  };
+  const focusCell = (index) => {
+    const target = inputsRef.current[Math.min(Math.max(index, 0), length - 1)];
+    target?.focus();
+    target?.select();
+  };
+  const onCellChange = (index, raw) => {
+    const cleaned = raw.replace(pattern, "");
+    if (cleaned === "") {
+      setCharAt(index, " ");
+      return;
+    }
+    if (cleaned.length > 1) {
+      const chars = code.padEnd(length, " ").split("");
+      for (let i = 0; i < cleaned.length && index + i < length; i++) {
+        chars[index + i] = cleaned[i];
+      }
+      setCode(chars.join("").trimEnd());
+      focusCell(index + cleaned.length);
+      return;
+    }
+    setCharAt(index, cleaned);
+    focusCell(index + 1);
+  };
+  const onKeyDown = (index) => (event) => {
+    switch (event.key) {
+      case "Backspace": {
+        event.preventDefault();
+        if ((code[index] ?? " ").trim() === "") {
+          setCharAt(index - 1, " ");
+          focusCell(index - 1);
+        } else {
+          setCharAt(index, " ");
+        }
+        break;
+      }
+      case "Delete":
+        event.preventDefault();
+        setCharAt(index, " ");
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        focusCell(index - 1);
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        focusCell(index + 1);
+        break;
+      case "Home":
+        event.preventDefault();
+        focusCell(0);
+        break;
+      case "End":
+        event.preventDefault();
+        focusCell(length - 1);
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "ansh-pin",
+        invalid && "ansh-pin--invalid",
+        disabled && "ansh-pin--disabled",
+        className
+      ),
+      role: "group",
+      "aria-label": label,
+      "aria-describedby": `${id}-status`,
+      children: [
+        Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: (node) => {
+              inputsRef.current[index] = node;
+            },
+            className: "ansh-pin__cell ansh-focusable",
+            type: mask ? "password" : "text",
+            inputMode: type === "numeric" ? "numeric" : "text",
+            autoComplete: index === 0 ? "one-time-code" : "off",
+            autoFocus: autoFocus && index === 0,
+            maxLength: length,
+            disabled,
+            "aria-label": `Digit ${index + 1} of ${length}`,
+            "aria-invalid": invalid || void 0,
+            value: (code[index] ?? "").trim(),
+            onChange: (event) => onCellChange(index, event.target.value),
+            onKeyDown: onKeyDown(index),
+            onFocus: (event) => event.target.select()
+          },
+          index
+        )),
+        /* @__PURE__ */ jsx("span", { className: "ansh-visually-hidden", id: `${id}-status`, "aria-live": "polite", children: code.trim().length === length ? "Code complete" : `${code.trim().length} of ${length} digits entered` })
+      ]
+    }
+  );
+}
+function TagsInput({
+  value,
+  defaultValue = [],
+  onChange,
+  placeholder = "Add and press Enter",
+  max = Number.POSITIVE_INFINITY,
+  delimiters = ["Enter", "Tab", ","],
+  validate,
+  dedupe = true,
+  disabled = false,
+  invalid = false,
+  label = "Tags",
+  className
+}) {
+  const fieldProps = useFieldControl();
+  const [tags, setTags] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const [draft, setDraft] = useState("");
+  const [error, setError] = useState(null);
+  const inputRef = useRef(null);
+  const tagRefs = useRef([]);
+  const commit = (raw) => {
+    const text = raw.trim();
+    if (text === "") return false;
+    if (tags.length >= max) {
+      setError(`Up to ${max} allowed`);
+      return false;
+    }
+    if (dedupe && tags.includes(text)) {
+      setDraft("");
+      return true;
+    }
+    const failure = validate?.(text);
+    if (failure) {
+      setError(failure);
+      return false;
+    }
+    setTags([...tags, text]);
+    setDraft("");
+    setError(null);
+    return true;
+  };
+  const removeAt = (index) => {
+    setTags(tags.filter((_, i) => i !== index));
+    setError(null);
+    queueMicrotask(() => {
+      const next = tagRefs.current[index] ?? tagRefs.current[index - 1];
+      if (next?.isConnected) next.focus();
+      else inputRef.current?.focus();
+    });
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Tab" && draft.trim() === "") return;
+    if (delimiters.includes(event.key)) {
+      event.preventDefault();
+      commit(draft);
+      return;
+    }
+    if (event.key === "Backspace" && draft === "" && tags.length > 0) {
+      event.preventDefault();
+      removeAt(tags.length - 1);
+    }
+  };
+  const atLimit = tags.length >= max;
+  return /* @__PURE__ */ jsxs("div", { className: cx("ansh-tags", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(
+          "ansh-tags__control",
+          "ansh-focusable-within",
+          (invalid || error) && "ansh-tags__control--invalid",
+          disabled && "ansh-tags__control--disabled"
+        ),
+        onMouseDown: (event) => {
+          if (event.target === event.currentTarget) {
+            event.preventDefault();
+            inputRef.current?.focus();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("ul", { className: "ansh-tags__list", "aria-label": `${label}: selected`, children: tags.map((tag, index) => /* @__PURE__ */ jsxs("li", { className: "ansh-chip", children: [
+            /* @__PURE__ */ jsx("span", { className: "ansh-chip__label", children: tag }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: (node) => {
+                  tagRefs.current[index] = node;
+                },
+                type: "button",
+                className: "ansh-chip__remove",
+                "aria-label": `Remove ${tag}`,
+                disabled,
+                onClick: () => removeAt(index),
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "10", height: "10", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M4 4l8 8M12 4l-8 8",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    fill: "none"
+                  }
+                ) })
+              }
+            )
+          ] }, `${tag}-${index}`)) }),
+          !atLimit ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              className: "ansh-tags__input",
+              value: draft,
+              placeholder: tags.length === 0 ? placeholder : "",
+              disabled,
+              "aria-label": label,
+              "aria-invalid": invalid || Boolean(error) || void 0,
+              ...fieldProps,
+              onChange: (event) => {
+                setDraft(event.target.value);
+                setError(null);
+              },
+              onKeyDown,
+              onBlur: () => commit(draft),
+              onPaste: (event) => {
+                const text = event.clipboardData.getData("text");
+                if (!/[,\n\t]/.test(text)) return;
+                event.preventDefault();
+                for (const part of text.split(/[,\n\t]+/)) commit(part);
+              }
+            }
+          ) : null
+        ]
+      }
+    ),
+    error ? /* @__PURE__ */ jsx("p", { className: "ansh-field__error", role: "alert", children: error }) : null
+  ] });
+}
+function Rating({
+  value,
+  defaultValue = 0,
+  onChange,
+  max = 5,
+  allowHalf = false,
+  readOnly = false,
+  disabled = false,
+  size = "md",
+  icon,
+  label = "Rating",
+  className,
+  name
+}) {
+  const [current, setCurrent] = useControllableState({ value, defaultValue, onChange });
+  const [preview, setPreview] = useState(null);
+  const groupName = useId();
+  const shown = preview ?? current;
+  const symbol = icon ?? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", className: "ansh-rating__glyph", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z",
+      fill: "currentColor"
+    }
+  ) });
+  if (readOnly) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cx("ansh-rating", `ansh-rating--${size}`, "ansh-rating--readonly", className),
+        role: "img",
+        "aria-label": `${current} out of ${max}`,
+        children: Array.from({ length: max }, (_, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "ansh-rating__item",
+            style: {
+              ["--ansh-fill"]: `${Math.min(Math.max(current - index, 0), 1) * 100}%`
+            },
+            children: symbol
+          },
+          index
+        ))
+      }
+    );
+  }
+  const steps = allowHalf ? max * 2 : max;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      className: cx(
+        "ansh-rating",
+        `ansh-rating--${size}`,
+        disabled && "ansh-rating--disabled",
+        className
+      ),
+      onMouseLeave: () => setPreview(null),
+      children: Array.from({ length: steps }, (_, step) => {
+        const stepValue = allowHalf ? (step + 1) / 2 : step + 1;
+        const index = Math.ceil(stepValue) - 1;
+        const isHalf = allowHalf && stepValue % 1 !== 0;
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: cx("ansh-rating__hit", isHalf && "ansh-rating__hit--half"),
+            onMouseEnter: () => !disabled && setPreview(stepValue),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  className: "ansh-visually-hidden",
+                  name: name ?? groupName,
+                  value: stepValue,
+                  checked: current === stepValue,
+                  disabled,
+                  "aria-label": `${stepValue} ${stepValue === 1 ? "star" : "stars"}`,
+                  onChange: () => setCurrent(stepValue)
+                }
+              ),
+              !isHalf ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ansh-rating__item",
+                  style: {
+                    ["--ansh-fill"]: `${Math.min(Math.max(shown - index, 0), 1) * 100}%`
+                  },
+                  children: symbol
+                }
+              ) : null
+            ]
+          },
+          stepValue
+        );
+      })
+    }
+  );
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let size = bytes / 1024;
+  let unit = 0;
+  while (size >= 1024 && unit < units.length - 1) {
+    size /= 1024;
+    unit++;
+  }
+  return `${size.toFixed(size >= 10 ? 0 : 1)} ${units[unit]}`;
+}
+function Dropzone({
+  onFiles,
+  accept,
+  multiple = false,
+  maxSize,
+  maxFiles = Number.POSITIVE_INFINITY,
+  disabled = false,
+  previews = true,
+  label = "Drop files here, or browse",
+  hint,
+  className,
+  children
+}) {
+  const [files, setFiles] = useState([]);
+  const [dragging, setDragging] = useState(false);
+  const depthRef = useRef(0);
+  const inputRef = useRef(null);
+  const id = useId();
+  const validate = useCallback(
+    (file) => {
+      if (maxSize !== void 0 && file.size > maxSize) {
+        return `Larger than ${formatBytes(maxSize)}`;
+      }
+      if (accept) {
+        const patterns = accept.split(",").map((part) => part.trim().toLowerCase());
+        const name = file.name.toLowerCase();
+        const type = file.type.toLowerCase();
+        const ok = patterns.some((pattern) => {
+          if (pattern.startsWith(".")) return name.endsWith(pattern);
+          if (pattern.endsWith("/*")) return type.startsWith(pattern.slice(0, -1));
+          return type === pattern;
+        });
+        if (!ok) return "Unsupported file type";
+      }
+      return void 0;
+    },
+    [accept, maxSize]
+  );
+  const add = useCallback(
+    (incoming) => {
+      if (!incoming || disabled) return;
+      const accepted = [];
+      const room = maxFiles - files.length;
+      for (const file of Array.from(incoming).slice(0, multiple ? room : 1)) {
+        const error = validate(file);
+        accepted.push({
+          file,
+          id: `${file.name}-${file.size}-${file.lastModified}`,
+          ...previews && file.type.startsWith("image/") && !error ? { preview: URL.createObjectURL(file) } : null,
+          ...error ? { error } : null
+        });
+      }
+      const next = multiple ? [...files, ...accepted] : accepted;
+      if (!multiple)
+        for (const previous of files) {
+          if (previous.preview) URL.revokeObjectURL(previous.preview);
+        }
+      setFiles(next);
+      onFiles?.(next);
+    },
+    [disabled, files, maxFiles, multiple, onFiles, previews, validate]
+  );
+  const remove = (fileId) => {
+    const target = files.find((entry) => entry.id === fileId);
+    if (target?.preview) URL.revokeObjectURL(target.preview);
+    const next = files.filter((entry) => entry.id !== fileId);
+    setFiles(next);
+    onFiles?.(next);
+    if (inputRef.current) inputRef.current.value = "";
+  };
+  const rejected = files.filter((entry) => entry.error);
+  return /* @__PURE__ */ jsxs("div", { className: cx("ansh-dropzone-wrap", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(
+          "ansh-dropzone",
+          dragging && "ansh-dropzone--active",
+          disabled && "ansh-dropzone--disabled"
+        ),
+        onDragEnter: (event) => {
+          event.preventDefault();
+          depthRef.current++;
+          if (!disabled) setDragging(true);
+        },
+        onDragOver: (event) => {
+          event.preventDefault();
+          event.dataTransfer.dropEffect = disabled ? "none" : "copy";
+        },
+        onDragLeave: (event) => {
+          event.preventDefault();
+          depthRef.current--;
+          if (depthRef.current <= 0) {
+            depthRef.current = 0;
+            setDragging(false);
+          }
+        },
+        onDrop: (event) => {
+          event.preventDefault();
+          depthRef.current = 0;
+          setDragging(false);
+          add(event.dataTransfer.files);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id,
+              type: "file",
+              className: "ansh-dropzone__input",
+              accept,
+              multiple,
+              disabled,
+              onChange: (event) => add(event.target.files)
+            }
+          ),
+          /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "ansh-dropzone__label", children: [
+            /* @__PURE__ */ jsx("span", { className: "ansh-dropzone__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                width: "28",
+                height: "28",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M12 16V4m0 0L8 8m4-4l4 4", strokeLinecap: "round", strokeLinejoin: "round" }),
+                  /* @__PURE__ */ jsx("path", { d: "M3 15v3a3 3 0 003 3h12a3 3 0 003-3v-3", strokeLinecap: "round" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx("span", { className: "ansh-dropzone__text", children: label }),
+            hint ? /* @__PURE__ */ jsx("span", { className: "ansh-dropzone__hint", children: hint }) : null
+          ] }),
+          children
+        ]
+      }
+    ),
+    files.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "ansh-dropzone__files", children: files.map((entry) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: cx("ansh-dropzone__file", entry.error && "ansh-dropzone__file--error"),
+        children: [
+          entry.preview ? (
+            // Decorative: the file name beside it is the accessible content.
+            /* @__PURE__ */ jsx("img", { src: entry.preview, alt: "", className: "ansh-dropzone__thumb" })
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ansh-dropzone__thumb ansh-dropzone__thumb--generic",
+              "aria-hidden": "true",
+              children: entry.file.name.split(".").pop()?.slice(0, 4).toUpperCase()
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "ansh-dropzone__meta", children: [
+            /* @__PURE__ */ jsx("span", { className: "ansh-dropzone__name", children: entry.file.name }),
+            /* @__PURE__ */ jsx("span", { className: "ansh-dropzone__size", children: entry.error ?? formatBytes(entry.file.size) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ansh-dropzone__remove ansh-focusable",
+              "aria-label": `Remove ${entry.file.name}`,
+              onClick: () => remove(entry.id),
+              children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M4 4l8 8M12 4l-8 8",
+                  stroke: "currentColor",
+                  strokeWidth: "1.75",
+                  strokeLinecap: "round",
+                  fill: "none"
+                }
+              ) })
+            }
+          )
+        ]
+      },
+      entry.id
+    )) }) : null,
+    /* @__PURE__ */ jsx("span", { className: "ansh-visually-hidden", role: "status", "aria-live": "polite", children: rejected.length > 0 ? `${rejected.length} file${rejected.length === 1 ? "" : "s"} rejected` : files.length > 0 ? `${files.length} file${files.length === 1 ? "" : "s"} ready` : "" })
+  ] });
+}
+function ColorPicker({
+  value,
+  defaultValue = "#0275f4",
+  onChange,
+  format = "hex",
+  alpha = false,
+  presets,
+  contrastAgainst,
+  disabled = false,
+  label = "Colour",
+  className
+}) {
+  const [current, setCurrent] = useControllableState({ value, defaultValue, onChange });
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const planeRef = useRef(null);
+  const id = useId();
+  const parsed = useMemo(() => {
+    const rgb = tryParseColor(current) ?? parseColor(defaultValue);
+    return rgbToHsv(rgb);
+  }, [current, defaultValue]);
+  const hueRef = useRef(parsed.h);
+  if (parsed.s > 1e-3 && parsed.v > 1e-3) hueRef.current = parsed.h;
+  const hsv = {
+    ...parsed,
+    h: parsed.s < 1e-3 || parsed.v < 1e-3 ? hueRef.current : parsed.h
+  };
+  const emit = useCallback(
+    (next) => {
+      const rgb = hsvToRgb(next);
+      switch (format) {
+        case "rgb":
+          setCurrent(
+            next.a < 1 ? `rgba(${Math.round(rgb.r * 255)}, ${Math.round(rgb.g * 255)}, ${Math.round(rgb.b * 255)}, ${Number(next.a.toFixed(2))})` : `rgb(${Math.round(rgb.r * 255)}, ${Math.round(rgb.g * 255)}, ${Math.round(rgb.b * 255)})`
+          );
+          break;
+        case "hsl":
+          setCurrent(
+            `hsl(${Math.round(next.h)} ${Math.round(next.s * 100)}% ${Math.round(next.v * (1 - next.s / 2) * 100)}%${next.a < 1 ? ` / ${Number(next.a.toFixed(2))}` : ""})`
+          );
+          break;
+        case "oklch":
+          setCurrent(toOklchString(rgb));
+          break;
+        default:
+          setCurrent(toHex(rgb, next.a < 1));
+      }
+    },
+    [format, setCurrent]
+  );
+  const position = useAnchoredPosition(triggerRef, panelRef, open, {
+    placement: "bottom-start",
+    offset: 8
+  });
+  useDismiss(panelRef, open, () => setOpen(false), { ignore: [triggerRef] });
+  const dragPlane = (event) => {
+    if (disabled) return;
+    const plane = planeRef.current;
+    if (!plane) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const apply = (clientX, clientY) => {
+      const rect = plane.getBoundingClientRect();
+      const s = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);
+      const v = 1 - Math.min(Math.max((clientY - rect.top) / rect.height, 0), 1);
+      emit({ ...hsv, s, v });
+    };
+    apply(event.clientX, event.clientY);
+    const onMove = (moveEvent) => apply(moveEvent.clientX, moveEvent.clientY);
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+  const onPlaneKeyDown = (event) => {
+    const step = event.shiftKey ? 0.1 : 0.02;
+    let { s, v } = hsv;
+    switch (event.key) {
+      case "ArrowRight":
+        s = Math.min(1, s + step);
+        break;
+      case "ArrowLeft":
+        s = Math.max(0, s - step);
+        break;
+      case "ArrowUp":
+        v = Math.min(1, v + step);
+        break;
+      case "ArrowDown":
+        v = Math.max(0, v - step);
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    emit({ ...hsv, s, v });
+  };
+  const swatch = toHex(hsvToRgb(hsv), hsv.a < 1);
+  const pureHue = toHex(hsvToRgb({ h: hsv.h, s: 1, v: 1, a: 1 }));
+  const contrast = contrastAgainst ? contrastRatio(hsvToRgb(hsv), parseColor(contrastAgainst)) : null;
+  return /* @__PURE__ */ jsxs("div", { className: cx("ansh-colorpicker", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: "ansh-colorpicker__trigger ansh-focusable",
+        disabled,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-label": `${label}: ${swatch}`,
+        onClick: () => setOpen((v) => !v),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ansh-colorpicker__swatch",
+              style: { background: swatch },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "ansh-colorpicker__value", children: current })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-label": label,
+        className: "ansh-colorpicker__panel",
+        style: position.style,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: planeRef,
+              className: "ansh-colorpicker__plane",
+              style: { ["--ansh-hue"]: pureHue },
+              onPointerDown: dragPlane,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "slider",
+                  tabIndex: 0,
+                  className: "ansh-colorpicker__knob ansh-focusable",
+                  style: {
+                    left: `${hsv.s * 100}%`,
+                    top: `${(1 - hsv.v) * 100}%`,
+                    background: swatch
+                  },
+                  "aria-label": "Saturation and brightness",
+                  "aria-valuetext": `Saturation ${Math.round(hsv.s * 100)}%, brightness ${Math.round(hsv.v * 100)}%`,
+                  "aria-valuenow": Math.round(hsv.s * 100),
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  onKeyDown: onPlaneKeyDown
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "ansh-colorpicker__rails", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "ansh-colorpicker__preview",
+                style: { background: swatch },
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "ansh-colorpicker__rail-group", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  className: "ansh-colorpicker__rail ansh-colorpicker__rail--hue ansh-focusable",
+                  min: 0,
+                  max: 360,
+                  step: 1,
+                  value: Math.round(hsv.h),
+                  "aria-label": "Hue",
+                  "aria-valuetext": `${Math.round(hsv.h)} degrees`,
+                  onChange: (event) => emit({ ...hsv, h: Number(event.target.value) })
+                }
+              ),
+              alpha ? /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  className: "ansh-colorpicker__rail ansh-colorpicker__rail--alpha ansh-focusable",
+                  style: { ["--ansh-solid"]: toHex(hsvToRgb({ ...hsv, a: 1 })) },
+                  min: 0,
+                  max: 100,
+                  step: 1,
+                  value: Math.round(hsv.a * 100),
+                  "aria-label": "Opacity",
+                  "aria-valuetext": `${Math.round(hsv.a * 100)} percent`,
+                  onChange: (event) => emit({ ...hsv, a: Number(event.target.value) / 100 })
+                }
+              ) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ansh-colorpicker__row", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              className: "ansh-input ansh-input--sm ansh-colorpicker__text",
+              value: current,
+              "aria-label": `${label} value`,
+              spellCheck: false,
+              onChange: (event) => {
+                const text = event.target.value;
+                setCurrent(text);
+                const rgb = tryParseColor(text);
+                if (rgb) hueRef.current = rgbToHsv(rgb).h;
+              }
+            }
+          ) }),
+          contrast !== null ? /* @__PURE__ */ jsxs(
+            "p",
+            {
+              className: cx(
+                "ansh-colorpicker__contrast",
+                contrast >= 4.5 && "ansh-colorpicker__contrast--pass",
+                contrast < 3 && "ansh-colorpicker__contrast--fail"
+              ),
+              "aria-live": "polite",
+              children: [
+                contrast.toFixed(2),
+                ":1 against ",
+                contrastAgainst,
+                " \u2014",
+                " ",
+                contrast >= 7 ? "AAA" : contrast >= 4.5 ? "AA" : contrast >= 3 ? "AA large only" : "fails"
+              ]
+            }
+          ) : null,
+          presets && presets.length > 0 ? /* @__PURE__ */ jsx("div", { className: "ansh-colorpicker__presets", role: "group", "aria-label": "Preset colours", children: presets.map((preset) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cx(
+                "ansh-colorpicker__preset",
+                preset.toLowerCase() === swatch.toLowerCase() && "ansh-colorpicker__preset--on"
+              ),
+              style: { background: preset },
+              "aria-label": preset,
+              "aria-pressed": preset.toLowerCase() === swatch.toLowerCase(),
+              onClick: () => {
+                const rgb = tryParseColor(preset);
+                if (rgb) {
+                  hueRef.current = rgbToHsv(rgb).h;
+                  setCurrent(preset);
+                }
+              }
+            },
+            preset
+          )) }) : null,
+          /* @__PURE__ */ jsx("span", { className: "ansh-visually-hidden", "aria-live": "polite", id: `${id}-live`, children: swatch })
+        ]
+      }
+    ) }) : null
+  ] });
+}
+function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function addDays(date, days) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+}
+function addMonths(date, months) {
+  const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
+  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), lastDay));
+}
+function isSameDay(a, b) {
+  if (!a || !b) return false;
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function defaultWeekStart(locale) {
+  const region = (locale ?? (typeof navigator !== "undefined" ? navigator.language : "en-GB")).split("-")[1]?.toUpperCase();
+  return region && ["US", "CA", "JP", "IL", "BR", "MX", "PH", "KR"].includes(region) ? 0 : 1;
+}
+function isoWeek(date) {
+  const target = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  target.setDate(target.getDate() + 3 - (target.getDay() + 6) % 7);
+  const firstThursday = new Date(target.getFullYear(), 0, 4);
+  firstThursday.setDate(firstThursday.getDate() + 3 - (firstThursday.getDay() + 6) % 7);
+  return 1 + Math.round((target.getTime() - firstThursday.getTime()) / (7 * 864e5));
+}
+function Calendar({
+  mode = "single",
+  value,
+  defaultValue,
+  onChange,
+  min,
+  max,
+  isDateDisabled,
+  weekStartsOn,
+  locale,
+  months = 1,
+  showWeekNumbers = false,
+  className
+}) {
+  const [selection, setSelection] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? (mode === "range" ? { start: null, end: null } : null),
+    onChange
+  });
+  const single = mode === "single" ? selection : null;
+  const range = mode === "range" ? selection : { start: null, end: null };
+  const today = useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [viewMonth, setViewMonth] = useState(() => startOfDay(single ?? range.start ?? /* @__PURE__ */ new Date()));
+  const [cursor, setCursor] = useState(() => startOfDay(single ?? range.start ?? /* @__PURE__ */ new Date()));
+  const [hovered, setHovered] = useState(null);
+  const gridRef = useRef(null);
+  const shouldFocusRef = useRef(false);
+  const firstWeekday = weekStartsOn ?? defaultWeekStart(locale);
+  const dayNames = useMemo(() => {
+    const formatter = new Intl.DateTimeFormat(locale, { weekday: "short" });
+    const longFormatter = new Intl.DateTimeFormat(locale, { weekday: "long" });
+    return Array.from({ length: 7 }, (_, i) => {
+      const date = new Date(2024, 0, 7 + (firstWeekday + i) % 7);
+      return { short: formatter.format(date), long: longFormatter.format(date) };
+    });
+  }, [locale, firstWeekday]);
+  const monthLabel = useMemo(
+    () => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }),
+    [locale]
+  );
+  const fullDate = useMemo(
+    () => new Intl.DateTimeFormat(locale, {
+      weekday: "long",
+      day: "numeric",
+      month: "long",
+      year: "numeric"
+    }),
+    [locale]
+  );
+  const disabled = (date) => {
+    if (min && date < startOfDay(min)) return true;
+    if (max && date > startOfDay(max)) return true;
+    return isDateDisabled?.(date) ?? false;
+  };
+  const moveCursor = (next) => {
+    shouldFocusRef.current = true;
+    setCursor(next);
+    const firstVisible = new Date(viewMonth.getFullYear(), viewMonth.getMonth(), 1);
+    const lastVisible = new Date(viewMonth.getFullYear(), viewMonth.getMonth() + months, 0);
+    if (next < firstVisible || next > lastVisible) setViewMonth(next);
+  };
+  useEffect(() => {
+    if (!shouldFocusRef.current) return;
+    shouldFocusRef.current = false;
+    gridRef.current?.querySelector('[data-ansh-day][tabindex="0"]')?.focus({ preventScroll: true });
+  }, [cursor, viewMonth]);
+  const commit = (date) => {
+    if (disabled(date)) return;
+    if (mode === "single") {
+      setSelection(date);
+      return;
+    }
+    if (!range.start || range.end || date < range.start) {
+      setSelection({ start: date, end: null });
+    } else {
+      setSelection({ start: range.start, end: date });
+    }
+  };
+  const onKeyDown = (event) => {
+    let next = null;
+    switch (event.key) {
+      case "ArrowLeft":
+        next = addDays(cursor, -1);
+        break;
+      case "ArrowRight":
+        next = addDays(cursor, 1);
+        break;
+      case "ArrowUp":
+        next = addDays(cursor, -7);
+        break;
+      case "ArrowDown":
+        next = addDays(cursor, 7);
+        break;
+      case "Home":
+        next = addDays(cursor, -((cursor.getDay() - firstWeekday + 7) % 7));
+        break;
+      case "End":
+        next = addDays(cursor, 6 - (cursor.getDay() - firstWeekday + 7) % 7);
+        break;
+      case "PageUp":
+        next = addMonths(cursor, event.shiftKey ? -12 : -1);
+        break;
+      case "PageDown":
+        next = addMonths(cursor, event.shiftKey ? 12 : 1);
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        commit(cursor);
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    moveCursor(next);
+  };
+  const inRange = (date) => {
+    if (mode !== "range" || !range.start) return false;
+    const end = range.end ?? hovered;
+    if (!end) return false;
+    const [low, high] = range.start <= end ? [range.start, end] : [end, range.start];
+    return date > low && date < high;
+  };
+  const renderMonth = (offset) => {
+    const monthDate = new Date(viewMonth.getFullYear(), viewMonth.getMonth() + offset, 1);
+    const firstOfMonth = new Date(monthDate.getFullYear(), monthDate.getMonth(), 1);
+    const leading = (firstOfMonth.getDay() - firstWeekday + 7) % 7;
+    const gridStart = addDays(firstOfMonth, -leading);
+    const days = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+    const weeks = Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7));
+    return /* @__PURE__ */ jsxs("div", { className: "ansh-calendar__month", children: [
+      /* @__PURE__ */ jsx("div", { className: "ansh-calendar__caption", "aria-hidden": "true", children: monthLabel.format(monthDate) }),
+      /* @__PURE__ */ jsxs(
+        "table",
+        {
+          className: "ansh-calendar__grid",
+          role: "grid",
+          "aria-label": monthLabel.format(monthDate),
+          children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              showWeekNumbers ? /* @__PURE__ */ jsx("th", { scope: "col", className: "ansh-calendar__weekno-head", children: /* @__PURE__ */ jsx("span", { className: "ansh-visually-hidden", children: "Week" }) }) : null,
+              dayNames.map((day) => /* @__PURE__ */ jsxs("th", { scope: "col", className: "ansh-calendar__weekday", abbr: day.long, children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: day.short }),
+                /* @__PURE__ */ jsx("span", { className: "ansh-visually-hidden", children: day.long })
+              ] }, day.long))
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: weeks.map((week) => /* @__PURE__ */ jsxs("tr", { children: [
+              showWeekNumbers ? /* @__PURE__ */ jsx("td", { className: "ansh-calendar__weekno", children: isoWeek(week[0]) }) : null,
+              week.map((date) => {
+                const outside = date.getMonth() !== monthDate.getMonth();
+                const isDisabled = disabled(date);
+                const isSelected = mode === "single" ? isSameDay(date, single) : isSameDay(date, range.start) || isSameDay(date, range.end);
+                const isCursor = isSameDay(date, cursor);
+                return /* @__PURE__ */ jsx("td", { className: "ansh-calendar__cell", role: "gridcell", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-ansh-day": "",
+                    className: cx(
+                      "ansh-calendar__day",
+                      outside && "ansh-calendar__day--outside",
+                      isSelected && "ansh-calendar__day--selected",
+                      inRange(date) && "ansh-calendar__day--in-range",
+                      isSameDay(date, today) && "ansh-calendar__day--today"
+                    ),
+                    tabIndex: isCursor ? 0 : -1,
+                    disabled: isDisabled,
+                    "aria-selected": isSelected,
+                    "aria-current": isSameDay(date, today) ? "date" : void 0,
+                    "aria-label": fullDate.format(date),
+                    onClick: () => {
+                      setCursor(date);
+                      commit(date);
+                    },
+                    onMouseEnter: () => mode === "range" && setHovered(date),
+                    onFocus: () => setCursor(date),
+                    children: date.getDate()
+                  }
+                ) }, date.toISOString());
+              })
+            ] }, week[0].toISOString())) })
+          ]
+        }
+      )
+    ] }, offset);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("ansh-calendar", months > 1 && "ansh-calendar--multi", className),
+      onKeyDown,
+      onMouseLeave: () => setHovered(null),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "ansh-calendar__header", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ansh-calendar__nav ansh-focusable",
+              "aria-label": "Previous month",
+              onClick: () => setViewMonth(addMonths(viewMonth, -1)),
+              children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M7.5 2.5L4 6l3.5 3.5",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  fill: "none",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "ansh-calendar__title", "aria-live": "polite", children: months > 1 ? `${monthLabel.format(viewMonth)} \u2013 ${monthLabel.format(new Date(viewMonth.getFullYear(), viewMonth.getMonth() + months - 1, 1))}` : monthLabel.format(viewMonth) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ansh-calendar__nav ansh-focusable",
+              "aria-label": "Next month",
+              onClick: () => setViewMonth(addMonths(viewMonth, 1)),
+              children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M4.5 2.5L8 6l-3.5 3.5",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  fill: "none",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ansh-calendar__months", ref: gridRef, children: Array.from({ length: months }, (_, index) => renderMonth(index)) })
+      ]
+    }
+  );
+}
+function DatePicker({
+  value,
+  defaultValue = null,
+  onChange,
+  placeholder,
+  disabled = false,
+  invalid = false,
+  clearable = true,
+  format,
+  label = "Date",
+  className,
+  name,
+  locale,
+  ...calendarProps
+}) {
+  const fieldProps = useFieldControl();
+  const [selected, setSelected] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const [open, setOpen] = useState(false);
+  const [text, setText] = useState("");
+  const [editing, setEditing] = useState(false);
+  const anchorRef = useRef(null);
+  const panelRef = useRef(null);
+  const inputRef = useRef(null);
+  const formatter = useMemo(
+    () => new Intl.DateTimeFormat(locale, { day: "2-digit", month: "2-digit", year: "numeric" }),
+    [locale]
+  );
+  const order = useMemo(() => {
+    const parts = formatter.formatToParts(new Date(2026, 2, 14));
+    return parts.filter((p) => ["day", "month", "year"].includes(p.type)).map((p) => p.type);
+  }, [formatter]);
+  const display = format ? selected ? format(selected) : "" : selected ? formatter.format(selected) : "";
+  const parse = (raw) => {
+    const numbers = raw.split(/\D+/).filter(Boolean).map(Number);
+    if (numbers.length < 3) return null;
+    const parts = {};
+    order.forEach((type, index) => {
+      parts[type] = numbers[index];
+    });
+    const { month = 0, day = 0 } = parts;
+    let { year = 0 } = parts;
+    if (year < 100) year += year < 70 ? 2e3 : 1900;
+    const date = new Date(year, month - 1, day);
+    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+      return null;
+    }
+    return startOfDay(date);
+  };
+  const commitText = () => {
+    setEditing(false);
+    if (text.trim() === "") {
+      setSelected(null);
+      return;
+    }
+    const parsed = parse(text);
+    if (parsed) setSelected(parsed);
+    setText("");
+  };
+  const position = useAnchoredPosition(anchorRef, panelRef, open, {
+    placement: "bottom-start",
+    offset: 6
+  });
+  useDismiss(panelRef, open, () => setOpen(false), { ignore: [anchorRef] });
+  const placeholderText = placeholder ?? order.map((type) => type === "year" ? "yyyy" : type === "month" ? "mm" : "dd").join("/");
+  return /* @__PURE__ */ jsxs("div", { className: cx("ansh-datepicker", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: anchorRef,
+        className: cx(
+          "ansh-input-group",
+          "ansh-focusable-within",
+          (invalid || fieldProps["aria-invalid"]) && "ansh-input-group--invalid",
+          disabled && "ansh-input-group--disabled"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              inputMode: "numeric",
+              className: "ansh-input",
+              value: editing ? text : display,
+              placeholder: placeholderText,
+              disabled: disabled || fieldProps.disabled,
+              "aria-label": label,
+              "aria-invalid": invalid || void 0,
+              autoComplete: "off",
+              ...fieldProps,
+              onChange: (event) => {
+                setEditing(true);
+                setText(event.target.value);
+              },
+              onBlur: commitText,
+              onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  commitText();
+                  setOpen(false);
+                } else if (event.key === "ArrowDown" && !open) {
+                  event.preventDefault();
+                  setOpen(true);
+                } else if (event.key === "Escape" && open) {
+                  event.preventDefault();
+                  setOpen(false);
+                }
+              }
+            }
+          ),
+          clearable && selected && !disabled ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ansh-input-group__clear ansh-focusable",
+              "aria-label": "Clear date",
+              onClick: () => {
+                setSelected(null);
+                setText("");
+                inputRef.current?.focus();
+              },
+              children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M4 4l8 8M12 4l-8 8",
+                  stroke: "currentColor",
+                  strokeWidth: "1.75",
+                  strokeLinecap: "round",
+                  fill: "none"
+                }
+              ) })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ansh-input-group__button ansh-focusable",
+              "aria-label": "Open calendar",
+              "aria-haspopup": "dialog",
+              "aria-expanded": open,
+              disabled,
+              onClick: () => setOpen((v) => !v),
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  viewBox: "0 0 20 20",
+                  width: "16",
+                  height: "16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx("rect", { x: "3", y: "4.5", width: "14", height: "13", rx: "2.5" }),
+                    /* @__PURE__ */ jsx("path", { d: "M3 8.5h14M7 2.5v3M13 2.5v3", strokeLinecap: "round" })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    name ? (
+      // ISO in the hidden field. A server parsing "14/03/2026" has to guess the locale; an ISO
+      // date is unambiguous everywhere.
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "hidden",
+          name,
+          value: selected ? `${selected.getFullYear()}-${String(selected.getMonth() + 1).padStart(2, "0")}-${String(selected.getDate()).padStart(2, "0")}` : ""
+        }
+      )
+    ) : null,
+    open ? /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-label": label,
+        className: "ansh-datepicker__panel",
+        style: position.style,
+        children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "single",
+            value: selected,
+            onChange: (next) => {
+              setSelected(next);
+              setOpen(false);
+              inputRef.current?.focus();
+            },
+            ...locale ? { locale } : null,
+            ...calendarProps
+          }
+        )
+      }
+    ) }) : null
+  ] });
+}
+function DateRangePicker({
+  value,
+  defaultValue = { start: null, end: null },
+  onChange,
+  disabled = false,
+  invalid = false,
+  label = "Date range",
+  className,
+  months = 2,
+  locale,
+  ...calendarProps
+}) {
+  const [range, setRange] = useControllableState({ value, defaultValue, onChange });
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+  const panelRef = useRef(null);
+  const formatter = useMemo(
+    () => new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric" }),
+    [locale]
+  );
+  const position = useAnchoredPosition(anchorRef, panelRef, open, {
+    placement: "bottom-start",
+    offset: 6
+  });
+  useDismiss(panelRef, open, () => setOpen(false), { ignore: [anchorRef] });
+  const summary = range.start && range.end ? `${formatter.format(range.start)} \u2013 ${formatter.format(range.end)}` : range.start ? `${formatter.format(range.start)} \u2013 \u2026` : "Select dates";
+  return /* @__PURE__ */ jsxs("div", { className: cx("ansh-datepicker", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: anchorRef,
+        type: "button",
+        className: cx(
+          "ansh-select__trigger",
+          "ansh-focusable",
+          open && "ansh-select__trigger--open",
+          invalid && "ansh-select__trigger--invalid",
+          !range.start && "ansh-select__trigger--placeholder"
+        ),
+        disabled,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-label": `${label}: ${summary}`,
+        onClick: () => setOpen((v) => !v),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 20 20",
+              width: "16",
+              height: "16",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "4.5", width: "14", height: "13", rx: "2.5" }),
+                /* @__PURE__ */ jsx("path", { d: "M3 8.5h14M7 2.5v3M13 2.5v3", strokeLinecap: "round" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "ansh-select__value", children: summary })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-label": label,
+        className: "ansh-datepicker__panel",
+        style: position.style,
+        children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "range",
+            months,
+            value: range,
+            onChange: (next) => {
+              const nextRange = next;
+              setRange(nextRange);
+              if (nextRange.start && nextRange.end) setOpen(false);
+            },
+            ...locale ? { locale } : null,
+            ...calendarProps
+          }
+        )
+      }
+    ) }) : null
+  ] });
+}
+
+export { Calendar, Checkbox, ChoiceCard, ColorPicker, Combobox, DatePicker, DateRangePicker, Dropzone, Field, Fieldset, Input, NumberInput, OptionList, PinInput, Radio, RadioGroup, RangeSlider, Rating, Select, Slider, Switch, TagsInput, Textarea, VisuallyHidden, addDays, addMonths, filterOptions, firstEnabled, isSameDay, scoreOption, startOfDay, stepActive, useFieldContext, useFieldControl, useTypeahead };
+//# sourceMappingURL=chunk-QO3E7TJS.js.map
+//# sourceMappingURL=chunk-QO3E7TJS.js.map