@xcv-ui/ui 0.0.0-stage → 1.0.1

package/dist/index.js

@@ -0,0 +1,1559 @@
+// src/layout/Box.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var XcvBox = forwardRef(function XcvBox2({
+  display = "block",
+  direction,
+  align,
+  justify,
+  gap,
+  wrap,
+  className,
+  ...props
+}, ref) {
+  const isFlex = display === "flex" || display === "inline-flex";
+  const supportsLayout = isFlex || display === "grid";
+  const classes = [
+    "xcv-box",
+    `xcv-box--${display}`,
+    supportsLayout && align && `xcv-box--align-${align}`,
+    supportsLayout && justify && `xcv-box--justify-${justify}`,
+    supportsLayout && gap && `xcv-box--gap-${gap}`,
+    isFlex && direction && `xcv-box--direction-${direction}`,
+    isFlex && wrap !== void 0 && (wrap ? "xcv-box--wrap" : "xcv-box--nowrap"),
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ref, className: classes, ...props });
+});
+
+// src/layout/Stack.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var XcvStack = forwardRef2(function XcvStack2({ gap = "md", align = "stretch", justify = "start", className, ...props }, ref) {
+  const classes = ["xcv-stack", `xcv-stack--gap-${gap}`, `xcv-stack--align-${align}`, `xcv-stack--justify-${justify}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2("div", { ref, className: classes, ...props });
+});
+
+// src/layout/Inline.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var XcvInline = forwardRef3(function XcvInline2({ gap = "sm", align = "center", justify = "start", wrap = true, className, ...props }, ref) {
+  const classes = ["xcv-inline", `xcv-inline--gap-${gap}`, `xcv-inline--align-${align}`, `xcv-inline--justify-${justify}`, wrap ? "xcv-inline--wrap" : "xcv-inline--nowrap", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx3("div", { ref, className: classes, ...props });
+});
+
+// src/layout/Container.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var XcvContainer = forwardRef4(function XcvContainer2({ size = "lg", centered = true, className, ...props }, ref) {
+  const classes = ["xcv-container", `xcv-container--${size}`, centered && "xcv-container--centered", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx4("div", { ref, className: classes, ...props });
+});
+
+// src/layout/Divider.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var XcvDivider = forwardRef5(function XcvDivider2({ orientation = "horizontal", spacing = "md", className, ...props }, ref) {
+  const classes = ["xcv-divider", `xcv-divider--${orientation}`, `xcv-divider--spacing-${spacing}`, className].filter(Boolean).join(" ");
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx5("span", { ...props, ref, role: "separator", "aria-orientation": "vertical", className: classes });
+  }
+  return /* @__PURE__ */ jsx5("hr", { ...props, ref, role: "separator", "aria-orientation": "horizontal", className: classes });
+});
+
+// src/layout/Surface.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var XcvSurface = forwardRef6(function XcvSurface2({ variant = "default", padding = "md", radius = "subtle", className, children, ...props }, ref) {
+  const classes = ["xcv-surface", `xcv-surface--${variant}`, `xcv-surface--padding-${padding}`, `xcv-surface--radius-${radius}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx6("div", { ref, className: classes, "data-xcv-radius": radius, ...props, children });
+});
+
+// src/layout/Card.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function getCardClasses(variant, padding, radius, className) {
+  return [
+    "xcv-card",
+    `xcv-card--${variant}`,
+    `xcv-card--padding-${padding}`,
+    `xcv-card--radius-${radius}`,
+    className
+  ].filter(Boolean).join(" ");
+}
+var CardRoot = forwardRef7(function CardRoot2({
+  variant = "default",
+  padding = "md",
+  radius = "subtle",
+  interactive = false,
+  accented = false,
+  className,
+  children,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref,
+      className: getCardClasses(variant, padding, radius, className),
+      "data-xcv-radius": radius,
+      "data-xcv-interactive": interactive ? "on" : "off",
+      "data-xcv-accented": accented ? "on" : "off",
+      ...props,
+      children
+    }
+  );
+});
+var CardContent = forwardRef7(function CardContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx7("div", { ref, className: ["xcv-card__content", className].filter(Boolean).join(" "), ...props });
+});
+var CardFooter = forwardRef7(function CardFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx7("div", { ref, className: ["xcv-card__footer", className].filter(Boolean).join(" "), ...props });
+});
+var XcvCard = Object.assign(CardRoot, { Content: CardContent, Footer: CardFooter });
+
+// src/layout/Media.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ratios = { square: "1 / 1", video: "16 / 9", portrait: "3 / 4", landscape: "4 / 3", wide: "21 / 9" };
+var XcvMedia = forwardRef8(function XcvMedia2({
+  aspectRatio,
+  radius = "subtle",
+  fit = "cover",
+  position = "center",
+  className,
+  style,
+  children,
+  ...props
+}, ref) {
+  const ratio = aspectRatio ? ratios[aspectRatio] ?? aspectRatio : void 0;
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref,
+      className: ["xcv-media", ratio ? "xcv-media--ratio" : "xcv-media--intrinsic", className].filter(Boolean).join(" "),
+      "data-xcv-radius": radius,
+      style: { ...style, ...ratio !== void 0 ? { aspectRatio: ratio } : {}, "--xcv-media-fit": fit, "--xcv-media-position": position },
+      ...props,
+      children
+    }
+  );
+});
+
+// src/layout/List.tsx
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx9, jsxs } from "react/jsx-runtime";
+var XcvList = forwardRef9(function XcvList2({ as = "ul", variant = "plain", gap = "md", marker, className, ...props }, ref) {
+  const Component = as;
+  const resolvedMarker = marker ?? (as === "ol" ? "decimal" : "none");
+  const classes = [
+    "xcv-list",
+    `xcv-list--${variant}`,
+    `xcv-list--gap-${gap}`,
+    `xcv-list--marker-${resolvedMarker}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx9(Component, { ref, className: classes, ...props });
+});
+var XcvListItem = forwardRef9(function XcvListItem2({ leading, trailing, align = "center", className, children, ...props }, ref) {
+  const classes = ["xcv-list-item", `xcv-list-item--align-${align}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx9("li", { ref, className: classes, ...props, children: /* @__PURE__ */ jsxs("div", { className: "xcv-list-item__layout", children: [
+    leading != null ? /* @__PURE__ */ jsx9("div", { className: "xcv-list-item__leading", children: leading }) : null,
+    /* @__PURE__ */ jsx9("div", { className: "xcv-list-item__content", children }),
+    trailing != null ? /* @__PURE__ */ jsx9("div", { className: "xcv-list-item__trailing", children: trailing }) : null
+  ] }) });
+});
+
+// src/typography/Text.tsx
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var XcvText = forwardRef10(function XcvText2({ as: Component = "p", variant = "body", weight = "normal", color = "primary", className, ...props }, ref) {
+  const classes = ["xcv-text", `xcv-text--${variant}`, `xcv-text--weight-${weight}`, `xcv-text--color-${color}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx10(Component, { ref, className: classes, ...props });
+});
+
+// src/typography/Title.tsx
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var XcvTitle = forwardRef11(function XcvTitle2({ as: Component = "h2", size = "xl", weight = "semibold", className, ...props }, ref) {
+  const classes = ["xcv-title", `xcv-title--${size}`, `xcv-title--weight-${weight}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx11(Component, { ref, className: classes, ...props });
+});
+
+// src/typography/Label.tsx
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
+var XcvLabel = forwardRef12(function XcvLabel2({ required, children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs2("label", { ref, className: ["xcv-label", className].filter(Boolean).join(" "), ...props, children: [
+    children,
+    required && /* @__PURE__ */ jsx12("span", { className: "xcv-label__required", "aria-hidden": "true", children: " *" })
+  ] });
+});
+
+// src/actions/Button.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+var XcvButton = forwardRef13(function XcvButton2({
+  variant = "primary",
+  size = "md",
+  radius = "subtle",
+  loading = false,
+  fullWidth = false,
+  iconOnly = false,
+  disabled,
+  className,
+  children,
+  type = "button",
+  "aria-busy": ariaBusy,
+  ...props
+}, ref) {
+  const classes = [
+    "xcv-button",
+    `xcv-button--${variant}`,
+    `xcv-button--${size}`,
+    fullWidth && "xcv-button--full-width",
+    iconOnly && "xcv-button--icon-only",
+    loading && "xcv-button--loading",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      ref,
+      type,
+      className: classes,
+      disabled: disabled || loading,
+      "data-xcv-radius": radius,
+      "aria-busy": loading ? true : ariaBusy,
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ jsx13("span", { className: "xcv-button__spinner", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx13("span", { className: "xcv-button__content", children })
+      ]
+    }
+  );
+});
+
+// src/actions/Link.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var XcvLink = forwardRef14(function XcvLink2({ variant = "default", className, ...props }, ref) {
+  const classes = ["xcv-link", `xcv-link--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx14("a", { ref, className: classes, ...props });
+});
+
+// src/forms/TextInput.tsx
+import { forwardRef as forwardRef15 } from "react";
+
+// src/forms/FieldContext.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var XcvFieldContext = createContext(null);
+function XcvFieldProvider({ value, children }) {
+  return /* @__PURE__ */ jsx15(XcvFieldContext.Provider, { value, children });
+}
+function useXcvFieldControlProps(props) {
+  const context = useContext(XcvFieldContext);
+  const describedBy = [context?.describedBy, props["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+  const result = {};
+  const id = context?.controlId ?? props.id;
+  const required = context?.required || props.required;
+  const invalid = context?.invalid ? true : props["aria-invalid"];
+  if (id !== void 0) result.id = id;
+  if (required !== void 0) result.required = required;
+  if (describedBy !== void 0) result["aria-describedby"] = describedBy;
+  if (invalid !== void 0) result["aria-invalid"] = invalid;
+  return result;
+}
+
+// src/forms/TextInput.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var XcvTextInput = forwardRef15(function XcvTextInput2({ fieldState = "default", radius = "subtle", inputSize = "md", className, id, required, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }, ref) {
+  const fieldProps = useXcvFieldControlProps({ id, required, "aria-describedby": describedBy, "aria-invalid": fieldState === "error" ? true : invalid });
+  const classes = ["xcv-field-control", "xcv-text-input", `xcv-field-control--${fieldState}`, `xcv-field-control--${inputSize}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx16("input", { ref, className: classes, ...fieldProps, ...props, "data-xcv-radius": radius });
+});
+
+// src/forms/TextArea.tsx
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var XcvTextArea = forwardRef16(function XcvTextArea2({ fieldState = "default", radius = "subtle", className, id, required, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }, ref) {
+  const fieldProps = useXcvFieldControlProps({ id, required, "aria-describedby": describedBy, "aria-invalid": fieldState === "error" ? true : invalid });
+  const classes = ["xcv-field-control", "xcv-text-area", `xcv-field-control--${fieldState}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx17("textarea", { ref, className: classes, ...fieldProps, ...props, "data-xcv-radius": radius });
+});
+
+// src/forms/Select.tsx
+import {
+  forwardRef as forwardRef17,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx18, jsxs as jsxs4 } from "react/jsx-runtime";
+var XcvSelect = forwardRef17(function XcvSelect2({
+  options,
+  fieldState = "default",
+  radius = "subtle",
+  placeholder,
+  selectSize = "md",
+  className,
+  id,
+  required,
+  disabled = false,
+  value,
+  defaultValue,
+  name,
+  onChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  onClick,
+  autoFocus,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  ...nativeProps
+}, forwardedRef) {
+  const fieldProps = useXcvFieldControlProps({
+    id,
+    required,
+    "aria-describedby": describedBy,
+    "aria-invalid": fieldState === "error" ? true : invalid
+  });
+  const generatedId = useId();
+  const controlId = fieldProps.id ?? id ?? `xcv-select-${generatedId}`;
+  const isRequired = fieldProps.required ?? required;
+  const listboxId = `${controlId}-listbox`;
+  const selectedId = `${controlId}-option`;
+  const isControlled = value !== void 0;
+  const initialValue = defaultValue !== void 0 ? String(defaultValue) : placeholder !== void 0 ? "" : options[0]?.value ?? "";
+  const [internalValue, setInternalValue] = useState(initialValue);
+  const selectedValue = isControlled ? String(value) : internalValue;
+  const selectedValueRef = useRef(selectedValue);
+  selectedValueRef.current = selectedValue;
+  const selectedOption = options.find((option) => option.value === selectedValue);
+  const [open, setOpen] = useState(false);
+  const [activeValue, setActiveValue] = useState(selectedValue);
+  const [listboxPosition, setListboxPosition] = useState(null);
+  const [portalTheme, setPortalTheme] = useState({});
+  const listboxRef = useRef(null);
+  const selectRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const triggerRef = useRef(null);
+  const typeaheadRef = useRef("");
+  const typeaheadTimerRef = useRef(null);
+  useEffect(() => {
+    if (disabled) setOpen(false);
+  }, [disabled]);
+  useEffect(() => {
+    if (!open) {
+      setPortalTheme({});
+      return;
+    }
+    const syncTheme = () => {
+      const wrapper = wrapperRef.current;
+      const readScope = (attribute) => wrapper?.closest(`[${attribute}]`)?.getAttribute(attribute) ?? void 0;
+      const brand = readScope("data-xcv-brand");
+      const mode = readScope("data-xcv-mode");
+      const theme = readScope("data-xcv-theme");
+      setPortalTheme({
+        ...brand === void 0 ? {} : { brand },
+        ...mode === void 0 ? {} : { mode },
+        ...theme === void 0 ? {} : { theme }
+      });
+    };
+    syncTheme();
+    const observer = new MutationObserver(syncTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      subtree: true,
+      attributeFilter: ["data-xcv-brand", "data-xcv-mode", "data-xcv-theme"]
+    });
+    return () => observer.disconnect();
+  }, [open]);
+  useEffect(() => {
+    if (!open) {
+      setListboxPosition(null);
+      return;
+    }
+    const updatePosition = () => {
+      const trigger = triggerRef.current;
+      const panel = listboxRef.current;
+      if (!trigger || !panel) return;
+      const rect = trigger.getBoundingClientRect();
+      const viewport = window.visualViewport;
+      const viewportTop = viewport?.offsetTop ?? 0;
+      const viewportLeft = viewport?.offsetLeft ?? 0;
+      const viewportHeight = viewport?.height ?? window.innerHeight;
+      const viewportWidth = viewport?.width ?? window.innerWidth;
+      const gap = 8;
+      const panelHeight = Math.min(panel.scrollHeight, 288);
+      const viewportBottom = viewportTop + viewportHeight;
+      const viewportRight = viewportLeft + viewportWidth;
+      const below = viewportBottom - rect.bottom - gap;
+      const above = rect.top - viewportTop - gap;
+      const placeAbove = below < Math.min(panelHeight, 180) && above > below;
+      const available = Math.max(0, placeAbove ? above : below);
+      const width = Math.min(rect.width, viewportWidth - 16);
+      const left = Math.min(Math.max(viewportLeft + 8, rect.left), viewportRight - width - 8);
+      setListboxPosition({ position: "fixed", left, width, top: placeAbove ? void 0 : rect.bottom + gap, bottom: placeAbove ? viewportBottom - rect.top + gap : void 0, maxHeight: Math.min(288, available), visibility: "visible" });
+    };
+    setListboxPosition({ position: "fixed", visibility: "hidden" });
+    updatePosition();
+    const visualViewport = window.visualViewport;
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    visualViewport?.addEventListener("resize", updatePosition);
+    visualViewport?.addEventListener("scroll", updatePosition);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+      visualViewport?.removeEventListener("resize", updatePosition);
+      visualViewport?.removeEventListener("scroll", updatePosition);
+    };
+  }, [open, options.length]);
+  useEffect(() => {
+    if (!open) return;
+    function closeOnOutsidePointerDown(event) {
+      if (event.target instanceof Node && !wrapperRef.current?.contains(event.target) && !listboxRef.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("pointerdown", closeOnOutsidePointerDown);
+    return () => document.removeEventListener("pointerdown", closeOnOutsidePointerDown);
+  }, [open]);
+  useEffect(() => {
+    if (selectRef.current && isControlled) selectRef.current.value = selectedValue;
+  }, [isControlled, selectedValue]);
+  useEffect(() => {
+    const form = selectRef.current?.form;
+    if (!form || isControlled) return;
+    function resetValue() {
+      setInternalValue(initialValue);
+    }
+    form.addEventListener("reset", resetValue);
+    return () => form.removeEventListener("reset", resetValue);
+  }, [initialValue, isControlled]);
+  useEffect(() => () => {
+    if (typeaheadTimerRef.current !== null) clearTimeout(typeaheadTimerRef.current);
+  }, []);
+  function enabledOptions() {
+    return options.filter((option) => !option.disabled);
+  }
+  function openAt(valueToActivate) {
+    const enabled = enabledOptions();
+    const current = enabled.find((option) => option.value === (valueToActivate ?? selectedValue));
+    setActiveValue(current?.value ?? enabled[0]?.value ?? "");
+    setOpen(true);
+  }
+  function choose(option) {
+    if (disabled || option.disabled) return;
+    const nativeSelect = selectRef.current;
+    if (!nativeSelect) return;
+    const previousValue = selectedValue;
+    if (option.value !== previousValue) {
+      if (!isControlled) setInternalValue(option.value);
+      nativeSelect.value = option.value;
+      const EventConstructor = nativeSelect.ownerDocument.defaultView?.Event;
+      if (EventConstructor) nativeSelect.dispatchEvent(new EventConstructor("change", { bubbles: true }));
+      if (isControlled) {
+        queueMicrotask(() => {
+          if (selectRef.current && selectRef.current.value !== selectedValueRef.current) {
+            selectRef.current.value = selectedValueRef.current;
+          }
+        });
+      }
+    }
+    setOpen(false);
+    triggerRef.current?.focus();
+  }
+  function moveActive(direction) {
+    const enabled = enabledOptions();
+    if (!enabled.length) return;
+    const index = enabled.findIndex((option) => option.value === activeValue);
+    const next = index < 0 ? direction > 0 ? 0 : enabled.length - 1 : (index + direction + enabled.length) % enabled.length;
+    setActiveValue(enabled[next].value);
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!open) openAt(event.key === "ArrowDown" ? selectedValue : enabledOptions()[enabledOptions().length - 1]?.value);
+      else moveActive(event.key === "ArrowDown" ? 1 : -1);
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      if (!open) return;
+      event.preventDefault();
+      const enabled = enabledOptions();
+      setActiveValue(event.key === "Home" ? enabled[0]?.value ?? "" : enabled[enabled.length - 1]?.value ?? "");
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (!open) openAt();
+      else {
+        const option = options.find((item) => item.value === activeValue);
+        if (option) choose(option);
+      }
+      return;
+    }
+    if (event.key === "Escape" && open) {
+      event.preventDefault();
+      setOpen(false);
+      triggerRef.current?.focus();
+      return;
+    }
+    if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      const nextQuery = typeaheadRef.current + event.key.toLocaleLowerCase();
+      typeaheadRef.current = nextQuery;
+      if (typeaheadTimerRef.current !== null) clearTimeout(typeaheadTimerRef.current);
+      typeaheadTimerRef.current = setTimeout(() => {
+        typeaheadRef.current = "";
+      }, 600);
+      const start = enabledOptions();
+      const match = start.find((option) => option.label.toLocaleLowerCase().startsWith(nextQuery));
+      if (match) {
+        event.preventDefault();
+        if (open) setActiveValue(match.value);
+        else choose(match);
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxs4("span", { ref: wrapperRef, id: `${controlId}-root`, className: "xcv-select-wrapper", "data-xcv-radius": radius, "data-open": open ? "true" : void 0, children: [
+    /* @__PURE__ */ jsxs4(
+      "select",
+      {
+        ...nativeProps,
+        ref: (node) => {
+          selectRef.current = node;
+          if (typeof forwardedRef === "function") forwardedRef(node);
+          else if (forwardedRef) forwardedRef.current = node;
+        },
+        className: "xcv-select__native",
+        name,
+        value: selectedValue,
+        disabled,
+        required: isRequired,
+        tabIndex: -1,
+        "aria-hidden": "true",
+        onChange,
+        children: [
+          placeholder !== void 0 && /* @__PURE__ */ jsx18("option", { value: "", disabled: true, children: placeholder }),
+          options.map((option) => /* @__PURE__ */ jsx18("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        ...fieldProps,
+        ref: triggerRef,
+        id: controlId,
+        type: "button",
+        role: "combobox",
+        className: ["xcv-field-control", "xcv-select__trigger", `xcv-field-control--${fieldState}`, `xcv-field-control--${selectSize}`, className].filter(Boolean).join(" "),
+        "data-xcv-radius": radius,
+        disabled,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": fieldProps["aria-describedby"],
+        "aria-invalid": fieldProps["aria-invalid"],
+        "aria-required": isRequired || void 0,
+        autoFocus,
+        "aria-haspopup": "listbox",
+        "aria-autocomplete": "none",
+        "aria-expanded": open,
+        "aria-controls": open ? listboxId : void 0,
+        "aria-activedescendant": open && activeValue ? `${selectedId}-${options.findIndex((option) => option.value === activeValue)}` : void 0,
+        onFocus,
+        onBlur: (event) => {
+          onBlur?.(event);
+          if (!event.currentTarget.parentElement?.contains(event.relatedTarget) && !listboxRef.current?.contains(event.relatedTarget)) setOpen(false);
+        },
+        onKeyDown: handleKeyDown,
+        onClick: (event) => {
+          onClick?.(event);
+          if (event.defaultPrevented) return;
+          if (open) setOpen(false);
+          else openAt();
+        },
+        children: [
+          /* @__PURE__ */ jsx18("span", { className: selectedOption ? "xcv-select__value" : "xcv-select__value xcv-select__value--placeholder", children: selectedOption?.label ?? placeholder ?? "" }),
+          /* @__PURE__ */ jsx18("span", { className: "xcv-select__chevron", "aria-hidden": "true" })
+        ]
+      }
+    ),
+    open && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx18("div", { ref: listboxRef, id: listboxId, role: "listbox", "aria-labelledby": ariaLabelledBy ?? controlId, "aria-describedby": fieldProps["aria-describedby"], className: "xcv-select__listbox", "data-xcv-radius": radius, "data-xcv-brand": portalTheme.brand, "data-xcv-mode": portalTheme.mode, "data-xcv-theme": portalTheme.theme, style: listboxPosition ?? { position: "fixed", visibility: "hidden" }, children: options.length === 0 ? /* @__PURE__ */ jsx18("div", { className: "xcv-select__empty", role: "presentation", children: "No options available" }) : options.map((option, index) => /* @__PURE__ */ jsxs4("div", { id: selectedId + "-" + index, role: "option", "aria-selected": option.value === selectedValue, "aria-disabled": option.disabled || void 0, "data-active": option.value === activeValue ? "true" : void 0, className: "xcv-select__option", onPointerMove: () => {
+        if (!option.disabled) setActiveValue(option.value);
+      }, onClick: () => choose(option), children: [
+        /* @__PURE__ */ jsx18("span", { children: option.label }),
+        option.value === selectedValue && /* @__PURE__ */ jsx18("span", { className: "xcv-select__check", "aria-hidden": "true", children: "\u2713" })
+      ] }, option.value)) }),
+      document.body
+    )
+  ] });
+});
+
+// src/forms/Checkbox.tsx
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var XcvCheckbox = forwardRef18(function XcvCheckbox2({ fieldState = "default", className, id, required, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }, ref) {
+  const fieldProps = useXcvFieldControlProps({ id, required, "aria-describedby": describedBy, "aria-invalid": fieldState === "error" ? true : invalid });
+  const classes = ["xcv-checkable", "xcv-checkbox", `xcv-field-control--${fieldState}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx19("input", { ref, type: "checkbox", className: classes, ...fieldProps, ...props });
+});
+
+// src/forms/Radio.tsx
+import { forwardRef as forwardRef19 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var XcvRadio = forwardRef19(function XcvRadio2({ fieldState = "default", className, id, required, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }, ref) {
+  const fieldProps = useXcvFieldControlProps({ id, required, "aria-describedby": describedBy, "aria-invalid": fieldState === "error" ? true : invalid });
+  const classes = ["xcv-checkable", "xcv-radio", `xcv-field-control--${fieldState}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx20("input", { ref, type: "radio", className: classes, ...fieldProps, ...props });
+});
+
+// src/forms/Toggle.tsx
+import { forwardRef as forwardRef20 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var XcvToggle = forwardRef20(function XcvToggle2({ fieldState = "default", className, id, required, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }, ref) {
+  const fieldProps = useXcvFieldControlProps({ id, required, "aria-describedby": describedBy, "aria-invalid": fieldState === "error" ? true : invalid });
+  const classes = ["xcv-checkable", "xcv-toggle", `xcv-field-control--${fieldState}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx21("input", { ref, type: "checkbox", role: "switch", className: classes, ...fieldProps, ...props });
+});
+
+// src/forms/FormField.tsx
+import { forwardRef as forwardRef21, useId as useId2 } from "react";
+import { jsx as jsx22, jsxs as jsxs5 } from "react/jsx-runtime";
+var XcvFormField = forwardRef21(function XcvFormField2({
+  label,
+  children,
+  id,
+  description,
+  error,
+  required = false,
+  className,
+  ...props
+}, ref) {
+  const generatedId = useId2();
+  const controlId = id ?? `xcv-field-${generatedId}`;
+  const hasDescription = description !== void 0 && description !== null && description !== false && description !== true;
+  const hasError = error !== void 0 && error !== null && error !== false && error !== true;
+  const descriptionId = hasDescription ? `${controlId}-description` : void 0;
+  const errorId = hasError ? `${controlId}-error` : void 0;
+  const describedBy = [descriptionId, errorId].filter(Boolean).join(" ") || void 0;
+  const value = { controlId, invalid: hasError, required };
+  if (describedBy) value.describedBy = describedBy;
+  return /* @__PURE__ */ jsxs5("div", { ref, className: ["xcv-form-field", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ jsxs5("label", { className: "xcv-form-field__label", htmlFor: controlId, children: [
+      label,
+      required && /* @__PURE__ */ jsx22("span", { className: "xcv-label__required", "aria-hidden": "true", children: " *" })
+    ] }),
+    /* @__PURE__ */ jsx22(XcvFieldProvider, { value, children }),
+    hasDescription && /* @__PURE__ */ jsx22("div", { className: "xcv-form-field__description", id: descriptionId, children: description }),
+    hasError && /* @__PURE__ */ jsx22("div", { className: "xcv-form-field__error", id: errorId, "aria-live": "polite", children: error })
+  ] });
+});
+
+// src/feedback/Notice.tsx
+import { forwardRef as forwardRef22 } from "react";
+import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
+var XcvNotice = forwardRef22(function XcvNotice2({
+  tone = "info",
+  radius = "subtle",
+  title,
+  icon,
+  announce = false,
+  className,
+  children,
+  ...props
+}, ref) {
+  const classes = ["xcv-notice", `xcv-notice--${tone}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs6("div", { ref, ...props, className: classes, "data-xcv-radius": radius, "aria-live": announce || void 0, children: [
+    icon != null && /* @__PURE__ */ jsx23("span", { className: "xcv-notice__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs6("div", { className: "xcv-notice__body", children: [
+      title != null && /* @__PURE__ */ jsx23("div", { className: "xcv-notice__title", children: title }),
+      children != null && /* @__PURE__ */ jsx23("div", { className: "xcv-notice__content", children })
+    ] })
+  ] });
+});
+
+// src/feedback/Badge.tsx
+import { forwardRef as forwardRef23 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var XcvBadge = forwardRef23(function XcvBadge2({ tone = "neutral", radius = "subtle", className, ...props }, ref) {
+  const classes = ["xcv-badge", `xcv-badge--${tone}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx24("span", { ref, className: classes, "data-xcv-radius": radius, ...props });
+});
+
+// src/feedback/Loader.tsx
+import { forwardRef as forwardRef24 } from "react";
+import { jsx as jsx25, jsxs as jsxs7 } from "react/jsx-runtime";
+var XcvLoader = forwardRef24(function XcvLoader2({ variant = "orbit", size = "md", label = "Loading", showLabel = false, className, ...props }, ref) {
+  const classes = ["xcv-loader", `xcv-loader--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs7("span", { ref, ...props, className: classes, "data-variant": variant, role: "status", "aria-live": "polite", "aria-label": label, children: [
+    /* @__PURE__ */ jsx25("span", { className: "xcv-loader__visual", "aria-hidden": "true", children: Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx25("span", { className: "xcv-loader__shape" }, index)) }),
+    showLabel && /* @__PURE__ */ jsx25("span", { className: "xcv-loader__label", "aria-hidden": "true", children: label })
+  ] });
+});
+
+// src/navigation/Accordion.tsx
+import {
+  Children,
+  Fragment,
+  createContext as createContext2,
+  forwardRef as forwardRef25,
+  isValidElement,
+  useContext as useContext2,
+  useId as useId3,
+  useState as useState2
+} from "react";
+import { jsx as jsx26, jsxs as jsxs8 } from "react/jsx-runtime";
+var AccordionContext = createContext2(null);
+var AccordionItemContext = createContext2(null);
+function normalizeValue(value, mode) {
+  if (value === void 0) return [];
+  const values = typeof value === "string" ? [value] : [...new Set(value)];
+  return mode === "single" ? values.slice(0, 1) : values;
+}
+function useAccordionContext() {
+  const context = useContext2(AccordionContext);
+  if (!context) throw new Error("XcvAccordion compound components must be used inside XcvAccordion.");
+  return context;
+}
+function useAccordionItemContext() {
+  const context = useContext2(AccordionItemContext);
+  if (!context) throw new Error("XcvAccordion.Trigger and XcvAccordion.Content must be used inside XcvAccordion.Item.");
+  return context;
+}
+var XcvAccordionRoot = forwardRef25(function XcvAccordionRoot2({
+  mode = "single",
+  value,
+  defaultValue,
+  onValueChange,
+  radius = "subtle",
+  className,
+  children,
+  ...props
+}, ref) {
+  const [internalValue, setInternalValue] = useState2(() => normalizeValue(defaultValue, mode));
+  const openValues = normalizeValue(value === void 0 ? internalValue : value, mode);
+  const itemValues = collectAccordionItemValues(children);
+  if (new Set(itemValues).size !== itemValues.length) throw new Error("XcvAccordion item values must be unique.");
+  function toggle(itemValue) {
+    let next;
+    if (mode === "multiple") next = openValues.includes(itemValue) ? openValues.filter((current) => current !== itemValue) : [...openValues, itemValue];
+    else next = openValues.includes(itemValue) ? [] : [itemValue];
+    if (value === void 0) setInternalValue(next);
+    onValueChange?.(mode === "multiple" ? next : next[0]);
+  }
+  return /* @__PURE__ */ jsx26(AccordionContext.Provider, { value: { openValues, toggle }, children: /* @__PURE__ */ jsx26("div", { ref, "data-xcv-radius": radius, className: ["xcv-accordion", className].filter(Boolean).join(" "), ...props, children }) });
+});
+function XcvAccordionItem({ value, disabled = false, className, children, ...props }) {
+  const { openValues } = useAccordionContext();
+  const triggerCount = countAccordionSlots(children, XcvAccordionTrigger);
+  const contentCount = countAccordionSlots(children, XcvAccordionContent);
+  if (triggerCount !== 1 || contentCount !== 1) {
+    throw new Error("Each XcvAccordion.Item must contain exactly one XcvAccordion.Trigger and one XcvAccordion.Content.");
+  }
+  const id = useId3();
+  const context = { itemValue: value, triggerId: `xcv-accordion-trigger-${id}`, panelId: `xcv-accordion-panel-${id}`, open: openValues.includes(value), disabled };
+  return /* @__PURE__ */ jsx26(AccordionItemContext.Provider, { value: context, children: /* @__PURE__ */ jsx26("div", { className: ["xcv-accordion__item", context.open && "xcv-accordion__item--open", disabled && "xcv-accordion__item--disabled", className].filter(Boolean).join(" "), ...props, children }) });
+}
+function XcvAccordionTrigger({ className, children, type = "button", disabled, ...props }) {
+  const { toggle } = useAccordionContext();
+  const item = useAccordionItemContext();
+  return /* @__PURE__ */ jsxs8(
+    "button",
+    {
+      ...props,
+      id: item.triggerId,
+      type,
+      role: "button",
+      className: ["xcv-accordion__trigger", className].filter(Boolean).join(" "),
+      "aria-expanded": item.open,
+      "aria-controls": item.panelId,
+      disabled: disabled || item.disabled,
+      onClick: (event) => {
+        props.onClick?.(event);
+        if (!event.defaultPrevented && !disabled && !item.disabled) toggle(item.itemValue);
+      },
+      children: [
+        /* @__PURE__ */ jsx26("span", { className: "xcv-accordion__trigger-content", children }),
+        /* @__PURE__ */ jsx26("span", { className: "xcv-accordion__indicator xcv-chevron", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+function XcvAccordionContent({ className, children, ...props }) {
+  const item = useAccordionItemContext();
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      ...props,
+      id: item.panelId,
+      role: "region",
+      "aria-labelledby": item.triggerId,
+      hidden: !item.open,
+      className: ["xcv-accordion__content", className].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+function countAccordionSlots(children, slotType) {
+  let count = 0;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === slotType) {
+      count += 1;
+      return;
+    }
+    if (child.type === Fragment) count += countAccordionSlots(child.props.children, slotType);
+  });
+  return count;
+}
+function collectAccordionItemValues(children) {
+  const values = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === XcvAccordionItem) {
+      if (typeof child.props.value === "string") values.push(child.props.value);
+      return;
+    }
+    if (child.type === Fragment) values.push(...collectAccordionItemValues(child.props.children));
+  });
+  return values;
+}
+var XcvAccordion = Object.assign(XcvAccordionRoot, { Item: XcvAccordionItem, Trigger: XcvAccordionTrigger, Content: XcvAccordionContent });
+
+// src/navigation/ActionsMenu.tsx
+import { Children as Children2, Fragment as Fragment2, createContext as createContext3, forwardRef as forwardRef26, isValidElement as isValidElement2, useContext as useContext3, useId as useId4, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var MenuContext = createContext3(null);
+function useMenu() {
+  const value = useContext3(MenuContext);
+  if (!value) throw new Error("XcvActionsMenu parts must be used inside XcvActionsMenu.");
+  return value;
+}
+var XcvActionsMenuRoot = forwardRef26(function XcvActionsMenuRoot2({ radius = "subtle", defaultOpen = false, open, onOpenChange, className, children, onBlur, ...props }, ref) {
+  const [internalOpen, setInternalOpen] = useState3(defaultOpen);
+  const isOpen = open ?? internalOpen;
+  const id = useId4();
+  const triggerRef = useRef2(null);
+  const contentRef = useRef2(null);
+  const rootRef = useRef2(null);
+  const focusLast = useRef2(false);
+  const restoreFocus = useRef2(false);
+  useEffect2(() => {
+    if (!isOpen) return;
+    function closeOnOutsidePointerDown(event) {
+      if (event.target instanceof Node && !rootRef.current?.contains(event.target) && !contentRef.current?.contains(event.target)) {
+        restoreFocus.current = false;
+        if (open === void 0) setInternalOpen(false);
+        onOpenChange?.(false);
+      }
+    }
+    document.addEventListener("pointerdown", closeOnOutsidePointerDown);
+    return () => document.removeEventListener("pointerdown", closeOnOutsidePointerDown);
+  }, [isOpen, open, onOpenChange]);
+  const triggerCount = countMenuSlots(children, XcvActionsMenuTrigger);
+  const contentCount = countMenuSlots(children, XcvActionsMenuContent);
+  if (triggerCount !== 1 || contentCount !== 1) {
+    throw new Error("XcvActionsMenu requires exactly one Trigger and one Content.");
+  }
+  if (hasMenuPartsOutsideContent(children)) {
+    throw new Error("XcvActionsMenu Item and Separator slots must be inside Content.");
+  }
+  const setOpen = (next) => {
+    if (open === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsx27(MenuContext.Provider, { value: { open: isOpen, setOpen, menuId: `xcv-actions-menu-${id}`, radius, triggerRef, contentRef, focusLast, restoreFocus }, children: /* @__PURE__ */ jsx27("div", { ref: (node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, ...props, "data-xcv-radius": radius, className: ["xcv-actions-menu", className].filter(Boolean).join(" "), onBlur: (event) => {
+    onBlur?.(event);
+    if (!event.defaultPrevented && !event.currentTarget.contains(event.relatedTarget) && !contentRef.current?.contains(event.relatedTarget)) {
+      restoreFocus.current = false;
+      setOpen(false);
+    }
+  }, children }) });
+});
+function XcvActionsMenuTrigger({ className, children, type = "button", onClick, onKeyDown, ...props }) {
+  const menu = useMenu();
+  return /* @__PURE__ */ jsx27(
+    "button",
+    {
+      ...props,
+      ref: menu.triggerRef,
+      type,
+      className: ["xcv-actions-menu__trigger", className].filter(Boolean).join(" "),
+      "aria-haspopup": "menu",
+      "aria-expanded": menu.open,
+      "aria-controls": menu.open ? menu.menuId : void 0,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          if (!menu.open) {
+            menu.focusLast.current = false;
+            menu.restoreFocus.current = false;
+          }
+          menu.setOpen(!menu.open);
+        }
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          menu.focusLast.current = event.key === "ArrowUp";
+          menu.restoreFocus.current = false;
+          menu.setOpen(true);
+        }
+      },
+      children
+    }
+  );
+}
+function XcvActionsMenuContent({ label, className, children, onKeyDown, ...props }) {
+  const menu = useMenu();
+  const [position, setPosition] = useState3(null);
+  const wasOpen = useRef2(menu.open);
+  const typeahead = useRef2("");
+  const typeaheadTimer = useRef2(null);
+  useEffect2(() => () => {
+    if (typeaheadTimer.current !== null) clearTimeout(typeaheadTimer.current);
+  }, []);
+  useEffect2(() => {
+    if (!menu.open) {
+      setPosition(null);
+      menu.focusLast.current = false;
+      if (wasOpen.current && menu.restoreFocus.current) {
+        menu.restoreFocus.current = false;
+        menu.triggerRef.current?.focus();
+      }
+      wasOpen.current = false;
+      return;
+    }
+    wasOpen.current = true;
+    const updatePosition = () => {
+      const trigger = menu.triggerRef.current;
+      const panel = menu.contentRef.current;
+      if (!trigger || !panel) return;
+      const rect = trigger.getBoundingClientRect();
+      const panelRect = panel.getBoundingClientRect();
+      const viewport = window.visualViewport;
+      const viewportTop = viewport?.offsetTop ?? 0;
+      const viewportLeft = viewport?.offsetLeft ?? 0;
+      const viewportHeight = viewport?.height ?? window.innerHeight;
+      const viewportWidth = viewport?.width ?? window.innerWidth;
+      const viewportBottom = viewportTop + viewportHeight;
+      const viewportRight = viewportLeft + viewportWidth;
+      const gap = 8;
+      const below = viewportBottom - rect.bottom - gap;
+      const above = rect.top - viewportTop - gap;
+      const placeAbove = below < Math.min(panelRect.height, 180) && above > below;
+      const width = Math.min(Math.max(panelRect.width, rect.width), viewportWidth - 16);
+      const left = Math.min(Math.max(viewportLeft + 8, rect.left), viewportRight - width - 8);
+      setPosition({ position: "fixed", left, width, minWidth: Math.min(rect.width, viewportWidth - 16), maxWidth: "calc(100vw - 16px)", top: placeAbove ? void 0 : rect.bottom + gap, bottom: placeAbove ? viewportBottom - rect.top + gap : void 0, maxHeight: Math.max(0, placeAbove ? above : below), visibility: "visible" });
+    };
+    setPosition({ position: "fixed", visibility: "hidden" });
+    updatePosition();
+    const visualViewport = window.visualViewport;
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    visualViewport?.addEventListener("resize", updatePosition);
+    visualViewport?.addEventListener("scroll", updatePosition);
+    const items = menu.contentRef.current?.querySelectorAll('[role="menuitem"]');
+    const target = menu.focusLast.current ? items?.[items.length - 1] : items?.[0];
+    target?.focus();
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+      visualViewport?.removeEventListener("resize", updatePosition);
+      visualViewport?.removeEventListener("scroll", updatePosition);
+    };
+  }, [menu.open]);
+  function moveFocus(current, direction) {
+    const items = Array.from(menu.contentRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
+    if (!items.length) return;
+    const currentItem = current.closest('[role="menuitem"]');
+    const index = currentItem ? items.indexOf(currentItem) : -1;
+    if (index < 0) return;
+    items[(index + direction + items.length) % items.length]?.focus();
+  }
+  return menu.open && typeof document !== "undefined" ? createPortal2(
+    /* @__PURE__ */ jsx27(
+      "div",
+      {
+        ...props,
+        ref: menu.contentRef,
+        id: menu.menuId,
+        role: "menu",
+        "aria-label": label,
+        "data-xcv-radius": menu.radius,
+        style: position ?? { position: "fixed", visibility: "hidden" },
+        className: ["xcv-actions-menu__content", className].filter(Boolean).join(" "),
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (event.defaultPrevented) return;
+          const target = event.target;
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            moveFocus(target, 1);
+          } else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            moveFocus(target, -1);
+          } else if (event.key === "Home" || event.key === "End") {
+            event.preventDefault();
+            const items = menu.contentRef.current?.querySelectorAll('[role="menuitem"]');
+            (event.key === "Home" ? items?.[0] : items?.[items.length - 1])?.focus();
+          } else if (event.key === "Escape") {
+            event.preventDefault();
+            menu.restoreFocus.current = true;
+            menu.setOpen(false);
+          } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            const character = event.key.toLocaleLowerCase();
+            const previous = typeahead.current;
+            const query = previous && [...previous].every((letter) => letter === character) ? character : previous + character;
+            typeahead.current = query;
+            if (typeaheadTimer.current !== null) clearTimeout(typeaheadTimer.current);
+            typeaheadTimer.current = setTimeout(() => {
+              typeahead.current = "";
+            }, 600);
+            const items = Array.from(menu.contentRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
+            const active = items.indexOf(document.activeElement);
+            for (let offset = 1; offset <= items.length; offset += 1) {
+              const candidate = items[(active + offset + items.length) % items.length];
+              if (candidate?.textContent?.trim().toLocaleLowerCase().startsWith(query)) {
+                event.preventDefault();
+                candidate.focus();
+                break;
+              }
+            }
+          }
+        },
+        children
+      }
+    ),
+    document.body
+  ) : null;
+}
+function XcvActionsMenuItem({ className, disabled = false, onSelect, onClick, children, ...props }) {
+  const menu = useMenu();
+  return /* @__PURE__ */ jsx27(
+    "button",
+    {
+      ...props,
+      type: "button",
+      role: "menuitem",
+      tabIndex: -1,
+      "aria-disabled": disabled || void 0,
+      className: ["xcv-actions-menu__item", className].filter(Boolean).join(" "),
+      onClick: (event) => {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        onSelect?.();
+        menu.restoreFocus.current = true;
+        menu.setOpen(false);
+      },
+      children
+    }
+  );
+}
+function XcvActionsMenuSeparator() {
+  return /* @__PURE__ */ jsx27("div", { className: "xcv-actions-menu__separator", role: "separator" });
+}
+function hasMenuPartsOutsideContent(children, insideContent = false) {
+  let invalid = false;
+  Children2.forEach(children, (child) => {
+    if (invalid || !isValidElement2(child)) return;
+    if (child.type === Fragment2) {
+      invalid = hasMenuPartsOutsideContent(child.props.children, insideContent);
+      return;
+    }
+    if (child.type === XcvActionsMenuContent) {
+      invalid = insideContent || hasMenuPartsOutsideContent(child.props.children, true);
+      return;
+    }
+    if (child.type === XcvActionsMenuItem || child.type === XcvActionsMenuSeparator) {
+      invalid = !insideContent;
+    }
+  });
+  return invalid;
+}
+function countMenuSlots(children, slotType) {
+  let count = 0;
+  Children2.forEach(children, (child) => {
+    if (!isValidElement2(child)) return;
+    if (child.type === slotType) {
+      count += 1;
+      return;
+    }
+    if (child.type === Fragment2) count += countMenuSlots(child.props.children, slotType);
+  });
+  return count;
+}
+var XcvActionsMenu = Object.assign(XcvActionsMenuRoot, { Trigger: XcvActionsMenuTrigger, Content: XcvActionsMenuContent, Item: XcvActionsMenuItem, Separator: XcvActionsMenuSeparator });
+
+// src/navigation/Tabs.tsx
+import { Children as Children3, Fragment as Fragment3, createContext as createContext4, forwardRef as forwardRef27, isValidElement as isValidElement3, useContext as useContext4, useId as useId5, useState as useState4 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+function getTabId(baseId, kind, value) {
+  return `${baseId}-${kind}-${encodeURIComponent(value)}`;
+}
+var TabsContext = createContext4(null);
+function useTabs() {
+  const value = useContext4(TabsContext);
+  if (!value) throw new Error("XcvTabs parts must be used inside XcvTabs.");
+  return value;
+}
+var XcvTabsRoot = forwardRef27(function XcvTabsRoot2({ value, defaultValue, onValueChange, radius = "subtle", orientation = "horizontal", className, children, ...props }, ref) {
+  const [internalValue, setInternalValue] = useState4(defaultValue);
+  const selected = value ?? internalValue;
+  if (selected === void 0) throw new Error("XcvTabs requires a valid value or defaultValue so one tab is selected initially.");
+  const tabListCount = countCompoundComponents(children, XcvTabsList);
+  if (tabListCount !== 1) throw new Error("XcvTabs requires exactly one XcvTabs.List.");
+  const tabValues = collectCompoundValues(children, XcvTabsTab, [XcvTabsList]);
+  const panelValues = collectCompoundValues(children, XcvTabsPanel, []);
+  if (new Set(tabValues).size !== tabValues.length) throw new Error("XcvTabs tab values must be unique.");
+  if (new Set(panelValues).size !== panelValues.length) throw new Error("XcvTabs panel values must be unique.");
+  if (tabValues.length !== panelValues.length || tabValues.some((tabValue) => !panelValues.includes(tabValue))) {
+    throw new Error("Every XcvTabs.Tab must have exactly one XcvTabs.Panel with the same value.");
+  }
+  if (!tabValues.includes(selected)) throw new Error("XcvTabs selected value must match an available tab.");
+  if (isCompoundTabDisabled(children, selected, [XcvTabsList])) throw new Error("XcvTabs selected tab must not be disabled.");
+  const baseId = useId5();
+  const select = (next) => {
+    if (value === void 0) setInternalValue(next);
+    onValueChange?.(next);
+  };
+  return /* @__PURE__ */ jsx28(TabsContext.Provider, { value: { value: selected, select, baseId, orientation }, children: /* @__PURE__ */ jsx28("div", { ref, ...props, "data-xcv-radius": radius, className: ["xcv-tabs", `xcv-tabs--${orientation}`, className].filter(Boolean).join(" "), children }) });
+});
+function XcvTabsList({ label, className, children, onKeyDown, ...props }) {
+  const tabs = useTabs();
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const directionElement = event.currentTarget.closest("[dir]");
+    const inheritedDirection = directionElement?.getAttribute("dir")?.toLowerCase();
+    const computedDirection = getComputedStyle(event.currentTarget).direction;
+    const isRtl = tabs.orientation === "horizontal" && (inheritedDirection === "rtl" || inheritedDirection !== "ltr" && computedDirection === "rtl");
+    const forward = tabs.orientation === "horizontal" ? isRtl ? "ArrowLeft" : "ArrowRight" : "ArrowDown";
+    const backward = tabs.orientation === "horizontal" ? isRtl ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
+    if (![forward, backward, "Home", "End"].includes(event.key)) return;
+    const buttons = Array.from(event.currentTarget.querySelectorAll('[role="tab"]:not(:disabled)'));
+    if (!buttons.length) return;
+    event.preventDefault();
+    const currentTab = event.target.closest('[role="tab"]');
+    const index = currentTab ? buttons.indexOf(currentTab) : -1;
+    if (index < 0) return;
+    const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : (index + (event.key === forward ? 1 : -1) + buttons.length) % buttons.length;
+    const nextButton = buttons[next];
+    if (!nextButton) return;
+    nextButton.focus();
+    const nextValue = nextButton.dataset.value;
+    if (nextValue !== void 0) tabs.select(nextValue);
+  }
+  return /* @__PURE__ */ jsx28("div", { ...props, role: "tablist", "aria-label": label, "aria-orientation": tabs.orientation, className: ["xcv-tabs__list", className].filter(Boolean).join(" "), onKeyDown: handleKeyDown, children });
+}
+function XcvTabsTab({ value, className, children, disabled, ...props }) {
+  const tabs = useTabs();
+  const selected = tabs.value === value;
+  const id = getTabId(tabs.baseId, "tab", value);
+  const panelId = getTabId(tabs.baseId, "panel", value);
+  return /* @__PURE__ */ jsx28(
+    "button",
+    {
+      ...props,
+      type: "button",
+      role: "tab",
+      id,
+      "data-value": value,
+      "aria-selected": selected,
+      "aria-controls": panelId,
+      tabIndex: selected ? 0 : -1,
+      disabled,
+      className: ["xcv-tabs__tab", selected && "xcv-tabs__tab--selected", className].filter(Boolean).join(" "),
+      onClick: (event) => {
+        props.onClick?.(event);
+        if (!event.defaultPrevented && !disabled) tabs.select(value);
+      },
+      children
+    }
+  );
+}
+function XcvTabsPanel({ value, className, children, ...props }) {
+  const tabs = useTabs();
+  const selected = tabs.value === value;
+  return /* @__PURE__ */ jsx28(
+    "div",
+    {
+      ...props,
+      id: getTabId(tabs.baseId, "panel", value),
+      role: "tabpanel",
+      "aria-labelledby": getTabId(tabs.baseId, "tab", value),
+      hidden: !selected,
+      tabIndex: 0,
+      className: ["xcv-tabs__panel", className].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+function countCompoundComponents(children, targetType) {
+  let count = 0;
+  Children3.forEach(children, (child) => {
+    if (!isValidElement3(child)) return;
+    if (child.type === targetType) {
+      count += 1;
+      return;
+    }
+    if (child.type === Fragment3) count += countCompoundComponents(child.props.children, targetType);
+  });
+  return count;
+}
+function collectCompoundValues(children, targetType, traversableTypes) {
+  const values = [];
+  Children3.forEach(children, (child) => {
+    if (!isValidElement3(child)) return;
+    if (child.type === targetType) {
+      if (typeof child.props.value === "string") values.push(child.props.value);
+      return;
+    }
+    if (child.type === Fragment3 || traversableTypes.includes(child.type)) {
+      values.push(...collectCompoundValues(child.props.children, targetType, traversableTypes));
+    }
+  });
+  return values;
+}
+function isCompoundTabDisabled(children, selectedValue, traversableTypes) {
+  let disabled = false;
+  Children3.forEach(children, (child) => {
+    if (!isValidElement3(child)) return;
+    if (child.type === XcvTabsTab) {
+      if (child.props.value === selectedValue && child.props.disabled === true) disabled = true;
+      return;
+    }
+    if (child.type === Fragment3 || traversableTypes.includes(child.type)) {
+      if (isCompoundTabDisabled(child.props.children, selectedValue, traversableTypes)) disabled = true;
+    }
+  });
+  return disabled;
+}
+var XcvTabs = Object.assign(XcvTabsRoot, { List: XcvTabsList, Tab: XcvTabsTab, Panel: XcvTabsPanel });
+
+// src/navigation/Stepper.tsx
+import { forwardRef as forwardRef28 } from "react";
+import { jsx as jsx29, jsxs as jsxs9 } from "react/jsx-runtime";
+var XcvStepper = forwardRef28(function XcvStepper2({ steps, columns = 4, label = "Workflow steps", radius = "subtle", className, ...props }, ref) {
+  const stepIds = /* @__PURE__ */ new Set();
+  for (const step of steps) {
+    if (stepIds.has(step.id)) {
+      throw new Error(`XcvStepper step ids must be unique. Duplicate id: "${step.id}".`);
+    }
+    stepIds.add(step.id);
+  }
+  return /* @__PURE__ */ jsx29(
+    "nav",
+    {
+      ref,
+      ...props,
+      "aria-label": label,
+      "data-xcv-radius": radius,
+      className: ["xcv-stepper", `xcv-stepper--columns-${columns}`, className].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsx29("ol", { className: "xcv-stepper__list", children: steps.map((step, index) => /* @__PURE__ */ jsx29("li", { className: "xcv-stepper__item", children: /* @__PURE__ */ jsxs9("a", { className: "xcv-stepper__link", href: step.href, children: [
+        /* @__PURE__ */ jsx29("span", { className: "xcv-stepper__number", "aria-hidden": "true", children: String(index + 1).padStart(2, "0") }),
+        /* @__PURE__ */ jsx29("span", { className: "xcv-stepper__label", children: step.label })
+      ] }) }, step.id)) })
+    }
+  );
+});
+
+// src/navigation/Pagination.tsx
+import { forwardRef as forwardRef29 } from "react";
+import { jsx as jsx30, jsxs as jsxs10 } from "react/jsx-runtime";
+var XcvPagination = forwardRef29(function XcvPagination2({
+  page,
+  pageCount,
+  onPageChange,
+  siblingCount: _siblingCount,
+  label = "Pagination",
+  firstLabel = "First page",
+  previousLabel = "Previous page",
+  nextLabel = "Next page",
+  lastLabel = "Last page",
+  pageLabel = (number) => `Page ${number}`,
+  radius = "subtle",
+  className,
+  ...props
+}, ref) {
+  if (!Number.isSafeInteger(page) || !Number.isSafeInteger(pageCount) || pageCount < 0 || page < 1 || (pageCount === 0 ? page !== 1 : page > pageCount)) {
+    throw new RangeError("XcvPagination expects a valid 1-based page within pageCount.");
+  }
+  void _siblingCount;
+  if (pageCount <= 1) return null;
+  const firstVisiblePage = pageCount >= 3 ? Math.min(Math.max(1, page - 1), pageCount - 2) : 1;
+  const visiblePages = Array.from({ length: 3 }, (_, index) => {
+    const number = firstVisiblePage + index;
+    return number <= pageCount ? number : null;
+  });
+  return /* @__PURE__ */ jsxs10(
+    "nav",
+    {
+      ref,
+      ...props,
+      "data-xcv-radius": radius,
+      "aria-label": label,
+      className: ["xcv-pagination", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx30(
+          "button",
+          {
+            type: "button",
+            className: "xcv-pagination__control",
+            "aria-label": firstLabel,
+            disabled: page <= 1,
+            onClick: () => onPageChange(1),
+            children: "\xAB"
+          }
+        ),
+        /* @__PURE__ */ jsx30(
+          "button",
+          {
+            type: "button",
+            className: "xcv-pagination__control",
+            "aria-label": previousLabel,
+            disabled: page <= 1,
+            onClick: () => onPageChange(page - 1),
+            children: "\u2039"
+          }
+        ),
+        visiblePages.map((number, index) => number === null ? /* @__PURE__ */ jsx30("span", { className: "xcv-pagination__page-slot xcv-pagination__page-slot--empty", "aria-hidden": "true" }, `placeholder-${index}`) : /* @__PURE__ */ jsx30(
+          "button",
+          {
+            type: "button",
+            className: ["xcv-pagination__page-slot", "xcv-pagination__page", number === page && "xcv-pagination__page--current"].filter(Boolean).join(" "),
+            "aria-label": pageLabel(number),
+            "aria-current": number === page ? "page" : void 0,
+            onClick: () => onPageChange(number),
+            children: number
+          },
+          number
+        )),
+        /* @__PURE__ */ jsx30(
+          "button",
+          {
+            type: "button",
+            className: "xcv-pagination__control",
+            "aria-label": nextLabel,
+            disabled: page >= pageCount,
+            onClick: () => onPageChange(page + 1),
+            children: "\u203A"
+          }
+        ),
+        /* @__PURE__ */ jsx30(
+          "button",
+          {
+            type: "button",
+            className: "xcv-pagination__control",
+            "aria-label": lastLabel,
+            disabled: page >= pageCount,
+            onClick: () => onPageChange(pageCount),
+            children: "\xBB"
+          }
+        )
+      ]
+    }
+  );
+});
+
+// src/navigation/FilterGroup.tsx
+import { forwardRef as forwardRef30, useState as useState5 } from "react";
+import { jsx as jsx31, jsxs as jsxs11 } from "react/jsx-runtime";
+var XcvFilterGroup = forwardRef30(function XcvFilterGroup2({
+  label,
+  name,
+  options,
+  values,
+  defaultValues = [],
+  onValuesChange,
+  orientation = "vertical",
+  className,
+  ...props
+}, ref) {
+  const [internalValues, setInternalValues] = useState5([...defaultValues]);
+  const selected = [...new Set(values ?? internalValues)];
+  const optionValues = /* @__PURE__ */ new Set();
+  for (const option of options) {
+    if (optionValues.has(option.value)) throw new Error(`XcvFilterGroup option values must be unique. Duplicate value: "${option.value}".`);
+    optionValues.add(option.value);
+  }
+  function toggle(value, checked) {
+    const option = options.find((item) => item.value === value);
+    if (!option || option.disabled) return;
+    const next = checked ? [...selected, value] : selected.filter((item) => item !== value);
+    if (values === void 0) setInternalValues(next);
+    onValuesChange?.(next);
+  }
+  return /* @__PURE__ */ jsxs11("fieldset", { ref, ...props, className: ["xcv-filter-group", `xcv-filter-group--${orientation}`, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx31("legend", { className: "xcv-filter-group__legend", children: label }),
+    /* @__PURE__ */ jsx31("div", { className: "xcv-filter-group__options", children: options.map((option) => /* @__PURE__ */ jsxs11("label", { className: `xcv-filter-group__option${option.disabled ? " xcv-filter-group__option--disabled" : ""}`, children: [
+      /* @__PURE__ */ jsx31("input", { type: "checkbox", className: "xcv-checkable xcv-checkbox", name, value: option.value, checked: selected.includes(option.value), disabled: option.disabled, onChange: (event) => toggle(option.value, event.currentTarget.checked) }),
+      /* @__PURE__ */ jsx31("span", { children: option.label })
+    ] }, option.value)) })
+  ] });
+});
+
+// src/data/StatCard.tsx
+import { forwardRef as forwardRef31 } from "react";
+import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
+var XcvStatCard = forwardRef31(function XcvStatCard2({ label, value, description, detail, detailTone = "neutral", icon, radius = "subtle", className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs12("div", { ref, ...props, className: ["xcv-stat-card", "xcv-card", className].filter(Boolean).join(" "), "data-xcv-radius": radius, children: [
+    /* @__PURE__ */ jsxs12("div", { className: "xcv-stat-card__header", children: [
+      /* @__PURE__ */ jsx32("div", { className: "xcv-stat-card__label", children: label }),
+      icon != null && /* @__PURE__ */ jsx32("span", { className: "xcv-stat-card__icon", "aria-hidden": "true", children: icon })
+    ] }),
+    /* @__PURE__ */ jsx32("div", { className: "xcv-stat-card__value", children: value }),
+    description != null && /* @__PURE__ */ jsx32("div", { className: "xcv-stat-card__description", children: description }),
+    detail != null && /* @__PURE__ */ jsx32("div", { className: ["xcv-stat-card__detail", `xcv-stat-card__detail--${detailTone}`].join(" "), children: detail })
+  ] });
+});
+
+// src/data/Table.tsx
+import { forwardRef as forwardRef32 } from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var XcvTableRoot = forwardRef32(function XcvTable({ density = "comfortable", radius = "large", wrapperClassName, wrapperLabel = "Scrollable table", className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx33("div", { className: ["xcv-table__viewport", wrapperClassName].filter(Boolean).join(" "), "data-xcv-radius": radius, role: "region", "aria-label": wrapperLabel, tabIndex: 0, children: /* @__PURE__ */ jsx33("table", { ...props, ref, className: ["xcv-table", `xcv-table--${density}`, className].filter(Boolean).join(" "), children }) });
+});
+function XcvTableCaption({ className, ...props }) {
+  return /* @__PURE__ */ jsx33("caption", { ...props, className: ["xcv-table__caption", className].filter(Boolean).join(" ") });
+}
+function XcvTableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx33("thead", { ...props, className: ["xcv-table__head", className].filter(Boolean).join(" ") });
+}
+function XcvTableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx33("tbody", { ...props, className: ["xcv-table__body", className].filter(Boolean).join(" ") });
+}
+function XcvTableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx33("tr", { ...props, className: ["xcv-table__row", className].filter(Boolean).join(" ") });
+}
+function XcvTableHeaderCell({ scope = "col", className, ...props }) {
+  return /* @__PURE__ */ jsx33("th", { ...props, scope, className: ["xcv-table__header-cell", className].filter(Boolean).join(" ") });
+}
+function XcvTableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx33("td", { ...props, className: ["xcv-table__cell", className].filter(Boolean).join(" ") });
+}
+var XcvTable2 = Object.assign(XcvTableRoot, {
+  Caption: XcvTableCaption,
+  Head: XcvTableHead,
+  Body: XcvTableBody,
+  Row: XcvTableRow,
+  HeaderCell: XcvTableHeaderCell,
+  Cell: XcvTableCell
+});
+
+// src/data/SearchBox.tsx
+import { forwardRef as forwardRef33, useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
+import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
+var XcvSearchBox = forwardRef33(function XcvSearchBox2({ label, radius = "subtle", value, defaultValue = "", onValueChange, onSearch, debounceMs, loading = false, clearable = true, clearLabel = "Clear search", submitLabel = "Search", disabled, className, ...inputProps }, ref) {
+  const [internalValue, setInternalValue] = useState6(defaultValue);
+  const currentValue = value ?? internalValue;
+  const onSearchRef = useRef3(onSearch);
+  const debounceTimer = useRef3(void 0);
+  const previousValue = useRef3(currentValue);
+  onSearchRef.current = onSearch;
+  useEffect3(() => {
+    if (previousValue.current === currentValue) return;
+    previousValue.current = currentValue;
+    if (disabled || loading || debounceMs === void 0 || !Number.isFinite(debounceMs) || debounceMs < 0) return;
+    debounceTimer.current = setTimeout(() => {
+      debounceTimer.current = void 0;
+      onSearchRef.current(currentValue);
+    }, debounceMs);
+    return () => {
+      if (debounceTimer.current !== void 0) clearTimeout(debounceTimer.current);
+      debounceTimer.current = void 0;
+    };
+  }, [currentValue, debounceMs, disabled, loading]);
+  function updateValue(next) {
+    if (value === void 0) setInternalValue(next);
+    onValueChange?.(next);
+  }
+  function submit(event) {
+    event.preventDefault();
+    if (disabled || loading || currentValue.trim().length === 0) return;
+    if (debounceTimer.current !== void 0) clearTimeout(debounceTimer.current);
+    debounceTimer.current = void 0;
+    onSearch(currentValue);
+  }
+  return /* @__PURE__ */ jsxs13("form", { "data-xcv-radius": radius, className: ["xcv-search-box", className].filter(Boolean).join(" "), role: "search", "aria-label": label, "aria-busy": loading || void 0, onSubmit: submit, children: [
+    /* @__PURE__ */ jsxs13("label", { className: "xcv-search-box__label", children: [
+      label,
+      /* @__PURE__ */ jsx34(XcvTextInput, { ...inputProps, ref, type: "search", className: "xcv-search-box__input", inputSize: "md", radius, value: currentValue, disabled: disabled || loading, onChange: (event) => updateValue(event.currentTarget.value) })
+    ] }),
+    clearable && currentValue.length > 0 && /* @__PURE__ */ jsx34(
+      XcvButton,
+      {
+        type: "button",
+        variant: "secondary",
+        size: "md",
+        radius,
+        iconOnly: true,
+        "aria-label": clearLabel,
+        className: "xcv-search-box__clear",
+        disabled: disabled || loading,
+        onClick: () => updateValue(""),
+        children: /* @__PURE__ */ jsx34("span", { "aria-hidden": "true", children: "\xD7" })
+      }
+    ),
+    /* @__PURE__ */ jsx34(XcvButton, { type: "submit", size: "md", radius, loading, disabled: disabled || currentValue.trim().length === 0, children: submitLabel })
+  ] });
+});
+export {
+  XcvAccordion,
+  XcvActionsMenu,
+  XcvBadge,
+  XcvBox,
+  XcvButton,
+  XcvCard,
+  XcvCheckbox,
+  XcvContainer,
+  XcvDivider,
+  XcvFilterGroup,
+  XcvFormField,
+  XcvInline,
+  XcvLabel,
+  XcvLink,
+  XcvList,
+  XcvListItem,
+  XcvLoader,
+  XcvMedia,
+  XcvNotice,
+  XcvPagination,
+  XcvRadio,
+  XcvSearchBox,
+  XcvSelect,
+  XcvStack,
+  XcvStatCard,
+  XcvStepper,
+  XcvSurface,
+  XcvTable2 as XcvTable,
+  XcvTabs,
+  XcvText,
+  XcvTextArea,
+  XcvTextInput,
+  XcvTitle,
+  XcvToggle
+};