@photonix/basic 3.0.0 → 3.1.0

package/dist/index.js

@@ -80,6 +80,8 @@ __export(index_exports, {
   CheckSmallFilled: () => CheckSmallFilled,
   CheckSmallOutline: () => CheckSmallOutline,
   Checkbox: () => Checkbox,
+  CheckboxGroup: () => CheckboxGroup,
+  CheckboxGroupContext: () => CheckboxGroupContext,
   ChevronDownFilled: () => ChevronDownFilled,
   ChevronDownOutline: () => ChevronDownOutline,
   ChevronDownSmallFilled: () => ChevronDownSmallFilled,
@@ -123,6 +125,7 @@ __export(index_exports, {
   CreditCardFilled: () => CreditCardFilled,
   CreditCardOutline: () => CreditCardOutline,
   CustomScrollbar: () => CustomScrollbar,
+  DataList: () => DataList,
   DayFilled: () => DayFilled,
   DayOutline: () => DayOutline,
   Divider: () => Divider,
@@ -134,6 +137,7 @@ __export(index_exports, {
   DraftOutline: () => DraftOutline,
   DuplicateFilled: () => DuplicateFilled,
   DuplicateOutline: () => DuplicateOutline,
+  Empty: () => Empty,
   ExitFilled: () => ExitFilled,
   ExitOutline: () => ExitOutline,
   EyeDropperFilled: () => EyeDropperFilled,
@@ -142,6 +146,7 @@ __export(index_exports, {
   EyeOffFilled: () => EyeOffFilled,
   EyeOffOutline: () => EyeOffOutline,
   EyeOutline: () => EyeOutline,
+  Fieldset: () => Fieldset,
   Flex: () => Flex,
   FolderFilled: () => FolderFilled,
   FolderOutline: () => FolderOutline,
@@ -183,10 +188,13 @@ __export(index_exports, {
   MoreVerticalOutline: () => MoreVerticalOutline,
   MusicNoteFilled: () => MusicNoteFilled,
   MusicNoteOutline: () => MusicNoteOutline,
+  NumberField: () => NumberField,
+  OTP: () => OTP,
   OpenWithFilled: () => OpenWithFilled,
   OpenWithOutline: () => OpenWithOutline,
   OptionFilled: () => OptionFilled,
   OptionOutline: () => OptionOutline,
+  PIN: () => PIN,
   PenFilled: () => PenFilled,
   PenOutline: () => PenOutline,
   PersonalBookFilled: () => PersonalBookFilled,
@@ -198,11 +206,14 @@ __export(index_exports, {
   Portal: () => Portal,
   Radio: () => Radio,
   RadioFilled: () => RadioFilled,
+  RadioGroup: () => RadioGroup,
   RadioOutline: () => RadioOutline,
   RainFilled: () => RainFilled,
   RainOutline: () => RainOutline,
+  Rating: () => Rating,
   RectangleFilled: () => RectangleFilled,
   RectangleOutline: () => RectangleOutline,
+  Result: () => Result,
   RouterFilled: () => RouterFilled,
   RouterOutline: () => RouterOutline,
   ScheduleFilled: () => ScheduleFilled,
@@ -5134,11 +5145,16 @@ var Text_default = {};
 
 // ../ultimate/src/components/text/Text.tsx
 var import_jsx_runtime201 = require("react/jsx-runtime");
-var getVariantVars = (value) => {
+var getVariantVars = (value, weight) => {
   if (!value) return {};
   const vars = {};
   const breakpoints = ["base", "sm", "md", "lg", "xl", "2xl"];
-  const getWeightToken = (variant) => variant.startsWith("title-") || variant.startsWith("label-") ? `var(--${variant}-weight-emphasize)` : `var(--${variant}-weight)`;
+  const getWeightToken = (variant) => {
+    if (weight === "regular") return `var(--${variant}-weight, var(--body-md-weight))`;
+    if (weight === "medium") return `var(--${variant}-weight-emphasize, var(--label-md-weight-emphasize))`;
+    if (weight === "bold") return "var(--display-lg-weight)";
+    return variant.startsWith("title-") || variant.startsWith("label-") ? `var(--${variant}-weight-emphasize)` : `var(--${variant}-weight)`;
+  };
   if (typeof value === "object" && value !== null) {
     breakpoints.forEach((bp) => {
       const v = value[bp];
@@ -5208,7 +5224,7 @@ var Text = React202.forwardRef(
     ].filter(Boolean).join(" ");
     const inlineStyles = {
       ...style,
-      ...getVariantVars(variant),
+      ...getVariantVars(variant, weight),
       ...getAlignVars(align),
       ...typeof truncate === "number" && {
         "--line-clamp": truncate
@@ -5297,6 +5313,10 @@ function getElementRef(element) {
 }
 function mergeProps(slotProps, childProps) {
   const mergedProps = { ...childProps, ...slotProps };
+  if (childProps.disabled === true) mergedProps.disabled = true;
+  if (childProps["aria-disabled"] === true || childProps["aria-disabled"] === "true") {
+    mergedProps["aria-disabled"] = childProps["aria-disabled"];
+  }
   Object.keys(childProps).forEach((propName) => {
     const childPropValue = childProps[propName];
     const slotPropValue = slotProps[propName];
@@ -5304,7 +5324,7 @@ function mergeProps(slotProps, childProps) {
     if (isEventHandler && typeof childPropValue === "function" && typeof slotPropValue === "function") {
       mergedProps[propName] = (...args) => {
         childPropValue(...args);
-        slotPropValue(...args);
+        if (!args[0]?.defaultPrevented) slotPropValue(...args);
       };
     } else if (propName === "className") {
       mergedProps[propName] = [childPropValue, slotPropValue].filter(Boolean).join(" ");
@@ -5325,6 +5345,20 @@ var Slot = React204.forwardRef(
     }
     const childRef = getElementRef(child);
     const props = mergeProps(slotProps, child.props);
+    if (props.disabled || props["aria-disabled"] === true || props["aria-disabled"] === "true") {
+      const block = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      };
+      const onKeyDown = props.onKeyDown;
+      props.onClick = block;
+      props.onAuxClick = block;
+      props.onKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") block(event);
+        else onKeyDown?.(event);
+      };
+      props.tabIndex = -1;
+    }
     if (childRef || forwardedRef) {
       props.ref = composeRefs(childRef, forwardedRef);
     }
@@ -5496,6 +5530,7 @@ var Button = React207.forwardRef(
         {
           className: buttonClasses,
           ref,
+          disabled: disabled || isLoading,
           "aria-disabled": isLoading || disabled || void 0,
           "data-loading": isLoading || void 0,
           ...rest,
@@ -5532,7 +5567,7 @@ var Button = React207.forwardRef(
       {
         className: buttonClasses,
         ref,
-        disabled,
+        disabled: disabled || isLoading,
         "aria-disabled": isLoading || disabled || void 0,
         "data-loading": isLoading || void 0,
         ...rest,
@@ -5602,7 +5637,7 @@ var IconButton = React208.forwardRef(
         {
           className: buttonClasses,
           ref,
-          disabled,
+          disabled: disabled || isLoading,
           "aria-disabled": isLoading || disabled || void 0,
           "data-loading": isLoading || void 0,
           ...rest,
@@ -5615,7 +5650,7 @@ var IconButton = React208.forwardRef(
       {
         className: buttonClasses,
         ref,
-        disabled,
+        disabled: disabled || isLoading,
         "aria-disabled": isLoading || disabled || void 0,
         "data-loading": isLoading || void 0,
         ...rest,
@@ -5627,14 +5662,276 @@ var IconButton = React208.forwardRef(
 IconButton.displayName = "IconButton";
 
 // ../ultimate/src/components/checkbox/Checkbox.tsx
+var React214 = __toESM(require("react"));
+
+// ../ultimate/src/internal/form/NativeSelectionInput.tsx
 var React209 = __toESM(require("react"));
 
+// ../ultimate/src/hooks/useCallbackRef.ts
+var import_react2 = require("react");
+function useCallbackRef(callback) {
+  const callbackRef = (0, import_react2.useRef)(callback);
+  (0, import_react2.useEffect)(() => {
+    callbackRef.current = callback;
+  });
+  return (0, import_react2.useMemo)(() => ((...args) => callbackRef.current?.(...args)), []);
+}
+
+// ../ultimate/src/internal/form/NativeSelectionInput.tsx
+var import_jsx_runtime207 = require("react/jsx-runtime");
+var visuallyHiddenInputStyle = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clipPath: "inset(50%)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function NativeSelectionInput({
+  checked,
+  defaultChecked,
+  controlled,
+  onReset,
+  controlRef,
+  ...props
+}) {
+  const inputRef = React209.useRef(null);
+  const reset = useCallbackRef((event) => {
+    queueMicrotask(() => {
+      if (event.defaultPrevented || !inputRef.current) return;
+      const next = controlled ? checked : defaultChecked;
+      inputRef.current.checked = next;
+      if (!controlled) onReset(next);
+    });
+  });
+  React209.useEffect(() => {
+    const form = inputRef.current?.form;
+    form?.addEventListener("reset", reset);
+    return () => form?.removeEventListener("reset", reset);
+  }, [props.form, reset]);
+  return /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
+    "input",
+    {
+      ...props,
+      ref: inputRef,
+      checked,
+      onChange: () => {
+      },
+      tabIndex: -1,
+      "aria-hidden": "true",
+      style: visuallyHiddenInputStyle,
+      onInvalid: (event) => {
+        event.preventDefault();
+        controlRef.current?.focus();
+      }
+    }
+  );
+}
+
+// ../ultimate/src/components/checkbox-group/CheckboxGroup.tsx
+var React213 = __toESM(require("react"));
+
+// ../ultimate/src/hooks/useControllableState.ts
+var React210 = __toESM(require("react"));
+function useControllableState({
+  value: valueProp,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React210.useState(() => typeof defaultValue === "function" ? defaultValue() : defaultValue);
+  const isControlledRef = React210.useRef(valueProp !== void 0);
+  const isControlled = isControlledRef.current;
+  const value = isControlled ? valueProp : uncontrolledValue;
+  const handleChange = useCallbackRef(onChange);
+  const previousUncontrolledValueRef = React210.useRef(uncontrolledValue);
+  React210.useEffect(() => {
+    if (isControlled) return;
+    if (previousUncontrolledValueRef.current === uncontrolledValue) return;
+    previousUncontrolledValueRef.current = uncontrolledValue;
+    handleChange(uncontrolledValue);
+  }, [isControlled, uncontrolledValue, handleChange]);
+  const setValue = React210.useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        const setter = nextValue;
+        const valueToEmit = typeof nextValue === "function" ? setter(valueProp) : nextValue;
+        handleChange(valueToEmit);
+      } else {
+        setUncontrolledValue((prev) => {
+          const setter = nextValue;
+          return typeof nextValue === "function" ? setter(prev) : nextValue;
+        });
+      }
+    },
+    [isControlled, valueProp, handleChange]
+  );
+  const reset = React210.useCallback(() => {
+    if (isControlled) return;
+    const next = typeof defaultValue === "function" ? defaultValue() : defaultValue;
+    previousUncontrolledValueRef.current = next;
+    setUncontrolledValue(next);
+  }, [isControlled, defaultValue]);
+  return [value, setValue, reset];
+}
+
+// ../ultimate/src/internal/form/SelectionGroup.tsx
+var React212 = __toESM(require("react"));
+
+// ../ultimate/src/components/fieldset/Fieldset.tsx
+var React211 = __toESM(require("react"));
+
+// ../ultimate/src/utils/aria.utils.ts
+function mergeAriaIds(...values) {
+  const ids = values.filter((value) => Boolean(value)).flatMap((value) => value.split(/\s+/));
+  return [...new Set(ids)].join(" ") || void 0;
+}
+
+// ../ultimate/src/components/fieldset/Fieldset.tsx
+var import_jsx_runtime208 = require("react/jsx-runtime");
+var Fieldset = React211.forwardRef(
+  ({ legend, description, error, children, className, ...props }, ref) => {
+    const id = React211.useId();
+    return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(
+      Box,
+      {
+        as: "fieldset",
+        border: "none",
+        p: "none",
+        m: "none",
+        minW: 0,
+        ...props,
+        ref,
+        className,
+        "aria-describedby": mergeAriaIds(
+          props["aria-describedby"],
+          description ? `${id}-description` : void 0,
+          error ? `${id}-error` : void 0
+        ),
+        "aria-invalid": error ? true : props["aria-invalid"],
+        children: [
+          legend != null && /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Box, { as: "legend", p: "none", mb: "2xs", children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Text, { as: "span", variant: "title-md", children: legend }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(VStack, { gap: "2xs", children: [
+            description && /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+              Text,
+              {
+                as: "div",
+                variant: "body-md",
+                color: "secondary",
+                id: `${id}-description`,
+                children: description
+              }
+            ),
+            children,
+            error && /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Text, { as: "div", variant: "body-md", color: "red", id: `${id}-error`, children: error })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Fieldset.displayName = "Fieldset";
+
+// ../ultimate/src/internal/form/SelectionGroup.tsx
+var import_jsx_runtime209 = require("react/jsx-runtime");
+var SelectionGroupFrame = React212.forwardRef(({ label, description, error, orientation = "vertical", disabled, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Fieldset, { ref, legend: label, description, error, disabled, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Stack, { direction: orientation === "horizontal" ? "row" : "column", gap: "2xs", wrap: true, children }) }));
+SelectionGroupFrame.displayName = "SelectionGroupFrame";
+function useGroupFormReset(rootRef, form, reset) {
+  const onReset = useCallbackRef((event) => {
+    queueMicrotask(() => {
+      if (!event.defaultPrevented) reset();
+    });
+  });
+  React212.useEffect(() => {
+    const owner = form ? document.getElementById(form) : rootRef.current?.closest("form");
+    owner?.addEventListener("reset", onReset);
+    return () => owner?.removeEventListener("reset", onReset);
+  }, [form, rootRef, onReset]);
+}
+function assignRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+
+// ../ultimate/src/components/checkbox-group/CheckboxGroup.tsx
+var import_jsx_runtime210 = require("react/jsx-runtime");
+var CheckboxGroupContext = React213.createContext(null);
+var EMPTY = [];
+var CheckboxGroup = React213.forwardRef(({
+  value,
+  defaultValue = EMPTY,
+  onChange,
+  name,
+  form,
+  disabled,
+  required,
+  requiredMessage = "Select at least one option.",
+  children,
+  ...props
+}, forwardedRef) => {
+  const [selected = EMPTY, setSelected, reset] = useControllableState({ value, defaultValue, onChange });
+  const rootRef = React213.useRef(null);
+  const validationRef = React213.useRef(null);
+  useGroupFormReset(rootRef, form, reset);
+  const missing = Boolean(required) && selected.length === 0;
+  React213.useLayoutEffect(() => {
+    const input = validationRef.current;
+    input.checked = !missing;
+    input.setCustomValidity(missing ? requiredMessage : "");
+  }, [missing, requiredMessage]);
+  const context = React213.useMemo(() => ({
+    value: selected,
+    name,
+    form,
+    disabled,
+    toggle: (option, checked) => setSelected(
+      checked ? [...selected.filter((item) => item !== option), option] : selected.filter((item) => item !== option)
+    )
+  }), [selected, name, form, disabled, setSelected]);
+  return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(CheckboxGroupContext.Provider, { value: context, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
+      SelectionGroupFrame,
+      {
+        ...props,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(forwardedRef, node);
+        },
+        disabled,
+        "aria-required": required || void 0,
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
+      "input",
+      {
+        ref: validationRef,
+        type: "checkbox",
+        form,
+        required,
+        defaultChecked: !missing,
+        disabled,
+        tabIndex: -1,
+        "aria-hidden": "true",
+        style: visuallyHiddenInputStyle,
+        onInvalid: (event) => {
+          event.preventDefault();
+          rootRef.current?.querySelector('[role="checkbox"]:not(:disabled)')?.focus();
+        }
+      }
+    )
+  ] });
+});
+CheckboxGroup.displayName = "CheckboxGroup";
+
 // ../ultimate/src/components/checkbox/Checkbox.module.css
 var Checkbox_default = {};
 
 // ../ultimate/src/components/checkbox/Checkbox.tsx
-var import_jsx_runtime207 = require("react/jsx-runtime");
-var Checkbox = React209.forwardRef(
+var import_jsx_runtime211 = require("react/jsx-runtime");
+var Checkbox = React214.forwardRef(
   ({
     className,
     style,
@@ -5646,18 +5943,33 @@ var Checkbox = React209.forwardRef(
     disabled,
     onChange,
     onClick,
+    name,
+    value,
+    form,
+    required,
     ...rest
   }, ref) => {
+    const group = React214.useContext(CheckboxGroupContext);
+    const inGroup = Boolean(group) && value !== void 0;
+    const optionValue = String(value);
+    if (inGroup) {
+      controlledChecked = group.value.includes(optionValue);
+      name = group.name ?? name;
+      form = group.form ?? form;
+      disabled = disabled || group.disabled;
+    }
     const isControlled = controlledChecked !== void 0;
-    const [internalChecked, setInternalChecked] = React209.useState(defaultChecked);
-    const [rippleActive, setRippleActive] = React209.useState(false);
-    const rippleTimeoutRef = React209.useRef(null);
-    const checked = isControlled ? controlledChecked : internalChecked;
+    const [internalChecked, setInternalChecked] = React214.useState(defaultChecked);
+    const [rippleActive, setRippleActive] = React214.useState(false);
+    const rippleTimeoutRef = React214.useRef(null);
+    const checked = isControlled ? Boolean(controlledChecked) : internalChecked;
+    const controlRef = React214.useRef(null);
     const isIndeterminate = indeterminate;
     const isChecked = !indeterminate && checked;
     const isUnchecked = !indeterminate && !checked;
     const iconSize = size === "small" ? 20 : 24;
     const handleClick = (e) => {
+      e.preventDefault();
       if (disabled) return;
       if (rippleTimeoutRef.current) {
         clearTimeout(rippleTimeoutRef.current);
@@ -5670,6 +5982,7 @@ var Checkbox = React209.forwardRef(
       if (!isControlled) {
         setInternalChecked(nextChecked);
       }
+      if (inGroup) group.toggle(optionValue, nextChecked);
       if (onChange) {
         onChange(nextChecked);
       }
@@ -5677,7 +5990,7 @@ var Checkbox = React209.forwardRef(
         onClick(e);
       }
     };
-    React209.useEffect(() => {
+    React214.useEffect(() => {
       return () => {
         if (rippleTimeoutRef.current) {
           clearTimeout(rippleTimeoutRef.current);
@@ -5697,11 +6010,18 @@ var Checkbox = React209.forwardRef(
       disabled && Checkbox_default.disabled,
       label && className
     ].filter(Boolean).join(" ");
-    const checkboxContent = /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
+    const checkboxContent = /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
       "button",
       {
-        ref,
+        ref: (node) => {
+          controlRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
         type: "button",
+        form,
+        value,
+        "aria-required": required || void 0,
         role: "checkbox",
         "aria-checked": indeterminate ? "mixed" : checked,
         className: checkboxClasses,
@@ -5709,35 +6029,137 @@ var Checkbox = React209.forwardRef(
         onClick: handleClick,
         style: !label ? style : void 0,
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("span", { className: Checkbox_default.checkboxIcon, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("span", { className: Checkbox_default.checkboxBase, children: isUnchecked ? /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(RectangleOutline, { size: iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(RectangleFilled, { size: iconSize }) }),
-          (isChecked || isIndeterminate) && /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("span", { className: Checkbox_default.checkboxOverlay, children: [
-            isChecked && /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(CheckSmallOutline, { size: iconSize }),
-            isIndeterminate && /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(IndeterminateSmallOutline, { size: iconSize })
+        children: /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)("span", { className: Checkbox_default.checkboxIcon, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("span", { className: Checkbox_default.checkboxBase, children: isUnchecked ? /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(RectangleOutline, { size: iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(RectangleFilled, { size: iconSize }) }),
+          (isChecked || isIndeterminate) && /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)("span", { className: Checkbox_default.checkboxOverlay, children: [
+            isChecked && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(CheckSmallOutline, { size: iconSize }),
+            isIndeterminate && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(IndeterminateSmallOutline, { size: iconSize })
           ] })
         ] })
       }
     );
+    const formInput = /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+      NativeSelectionInput,
+      {
+        type: "checkbox",
+        name,
+        value,
+        form,
+        required,
+        disabled,
+        checked,
+        defaultChecked,
+        controlled: isControlled,
+        controlRef,
+        onReset: setInternalChecked
+      }
+    );
     if (label) {
-      return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)("label", { className: containerClasses, style, children: [
-        checkboxContent,
-        /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("span", { className: Checkbox_default.checkboxLabel, children: label })
+      return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(import_jsx_runtime211.Fragment, { children: [
+        formInput,
+        /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)("label", { className: containerClasses, style, children: [
+          checkboxContent,
+          /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("span", { className: Checkbox_default.checkboxLabel, children: label })
+        ] })
       ] });
     }
-    return checkboxContent;
+    return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(import_jsx_runtime211.Fragment, { children: [
+      formInput,
+      checkboxContent
+    ] });
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // ../ultimate/src/components/radio/Radio.tsx
-var React210 = __toESM(require("react"));
+var React216 = __toESM(require("react"));
+
+// ../ultimate/src/components/radio/RadioGroup.tsx
+var React215 = __toESM(require("react"));
+var import_jsx_runtime212 = require("react/jsx-runtime");
+var RadioGroupContext = React215.createContext(null);
+var NAVIGATION_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
+var RadioGroup = React215.forwardRef(
+  ({
+    value,
+    defaultValue,
+    onChange,
+    name,
+    form,
+    disabled,
+    required,
+    onKeyDown,
+    children,
+    ...props
+  }, forwardedRef) => {
+    const generatedName = React215.useId();
+    const [currentValue, setValue, reset] = useControllableState({
+      value,
+      defaultValue,
+      onChange
+    });
+    const rootRef = React215.useRef(null);
+    useGroupFormReset(rootRef, form, reset);
+    const ownRadios = (root) => Array.from(root.querySelectorAll('[role="radio"]:not(:disabled)')).filter(
+      (item) => item.closest('[role="radiogroup"]') === root
+    );
+    React215.useLayoutEffect(() => {
+      if (!rootRef.current) return;
+      const items = ownRadios(rootRef.current);
+      const selected = items.find((item) => item.getAttribute("aria-checked") === "true") ?? items[0];
+      items.forEach((item) => {
+        item.tabIndex = item === selected ? 0 : -1;
+      });
+    }, [currentValue, children, disabled]);
+    const context = React215.useMemo(
+      () => ({
+        value: currentValue,
+        name: name ?? generatedName,
+        form,
+        disabled,
+        required,
+        onChange: (next) => setValue(next)
+      }),
+      [currentValue, name, generatedName, form, disabled, required, setValue]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
+      SelectionGroupFrame,
+      {
+        ...props,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(forwardedRef, node);
+        },
+        disabled,
+        role: "radiogroup",
+        "aria-required": required || void 0,
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (event.defaultPrevented || event.nativeEvent.isComposing || disabled || !NAVIGATION_KEYS.includes(event.key))
+            return;
+          const items = ownRadios(event.currentTarget);
+          const index = items.indexOf(event.target);
+          if (index < 0) return;
+          event.preventDefault();
+          const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+          const previous = event.key === "ArrowUp" || event.key === (rtl ? "ArrowRight" : "ArrowLeft");
+          const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : (index + (previous ? -1 : 1) + items.length) % items.length;
+          items[next]?.focus();
+          items[next]?.click();
+        },
+        children
+      }
+    ) });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
 
 // ../ultimate/src/components/radio/Radio.module.css
 var Radio_default = {};
 
 // ../ultimate/src/components/radio/Radio.tsx
-var import_jsx_runtime208 = require("react/jsx-runtime");
-var Radio = React210.forwardRef(
+var import_jsx_runtime213 = require("react/jsx-runtime");
+var Radio = React216.forwardRef(
   ({
     className,
     style,
@@ -5748,16 +6170,35 @@ var Radio = React210.forwardRef(
     disabled,
     onChange,
     onClick,
+    name,
+    value,
+    form,
+    required,
     ...rest
   }, ref) => {
-    const isControlled = controlledChecked !== void 0;
-    const [internalChecked, setInternalChecked] = React210.useState(defaultChecked);
-    const [pressed, setPressed] = React210.useState(false);
-    const timeoutRef = React210.useRef(null);
-    const checked = isControlled ? controlledChecked : internalChecked;
+    const group = React216.useContext(RadioGroupContext);
+    const optionValue = value === void 0 ? "on" : String(value);
+    const effectiveChecked = group ? group.value === optionValue : controlledChecked;
+    const isControlled = effectiveChecked !== void 0 || Boolean(group);
+    disabled = disabled || group?.disabled;
+    name = group?.name ?? name;
+    form = group?.form ?? form;
+    required = required || group?.required;
+    const [internalChecked, setInternalChecked] = React216.useState(defaultChecked);
+    const [pressed, setPressed] = React216.useState(false);
+    const timeoutRef = React216.useRef(null);
+    const checked = isControlled ? Boolean(effectiveChecked) : internalChecked;
+    const controlRef = React216.useRef(null);
     const iconSize = size === "small" ? 20 : 24;
     const handleClick = (e) => {
+      e.preventDefault();
       if (disabled) return;
+      if (name && !checked) {
+        controlRef.current?.dispatchEvent(new CustomEvent("photonix-radio-select", {
+          bubbles: true,
+          detail: { name, form: controlRef.current.form }
+        }));
+      }
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
       setPressed(true);
       timeoutRef.current = setTimeout(() => setPressed(false), 350);
@@ -5765,6 +6206,7 @@ var Radio = React210.forwardRef(
         if (!isControlled) {
           setInternalChecked(true);
         }
+        group?.onChange(optionValue);
         if (onChange) {
           onChange(true);
         }
@@ -5773,11 +6215,22 @@ var Radio = React210.forwardRef(
         onClick(e);
       }
     };
-    React210.useEffect(() => {
+    React216.useEffect(() => {
       return () => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
       };
     }, []);
+    React216.useEffect(() => {
+      if (isControlled || !name) return;
+      const clearSibling = (event) => {
+        const selection = event;
+        if (selection.target !== controlRef.current && selection.detail.name === name && selection.detail.form === controlRef.current?.form) {
+          setInternalChecked(false);
+        }
+      };
+      document.addEventListener("photonix-radio-select", clearSibling);
+      return () => document.removeEventListener("photonix-radio-select", clearSibling);
+    }, [isControlled, name]);
     const radioClasses = [
       "phx-radio",
       Radio_default.radioRoot,
@@ -5791,41 +6244,71 @@ var Radio = React210.forwardRef(
       disabled && Radio_default.disabled,
       label && className
     ].filter(Boolean).join(" ");
-    const radioContent = /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+    const radioContent = /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
       "button",
       {
-        ref,
+        ref: (node) => {
+          controlRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
         type: "button",
+        form,
+        value,
+        "aria-required": required || void 0,
         role: "radio",
         "aria-checked": checked,
         className: radioClasses,
         disabled,
         onClick: handleClick,
         style: !label ? style : void 0,
+        tabIndex: group ? checked || group.value === void 0 ? 0 : -1 : void 0,
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("span", { className: Radio_default.radioIcon, children: checked ? /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(RadioOutline, { size: iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(CircleOutline, { size: iconSize }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("span", { className: Radio_default.radioIcon, children: checked ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(RadioOutline, { size: iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(CircleOutline, { size: iconSize }) })
+      }
+    );
+    const formInput = /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+      NativeSelectionInput,
+      {
+        type: "radio",
+        name,
+        value,
+        form,
+        required,
+        disabled,
+        checked,
+        defaultChecked,
+        controlled: isControlled,
+        controlRef,
+        onReset: setInternalChecked
       }
     );
     if (label) {
-      return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)("label", { className: containerClasses, style, children: [
-        radioContent,
-        /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("span", { className: Radio_default.radioLabel, children: label })
+      return /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(import_jsx_runtime213.Fragment, { children: [
+        formInput,
+        /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)("label", { className: containerClasses, style, children: [
+          radioContent,
+          /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("span", { className: Radio_default.radioLabel, children: label })
+        ] })
       ] });
     }
-    return radioContent;
+    return /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(import_jsx_runtime213.Fragment, { children: [
+      formInput,
+      radioContent
+    ] });
   }
 );
 Radio.displayName = "Radio";
 
 // ../ultimate/src/components/switch/Switch.tsx
-var React211 = __toESM(require("react"));
+var React217 = __toESM(require("react"));
 
 // ../ultimate/src/components/switch/Switch.module.css
 var Switch_default = {};
 
 // ../ultimate/src/components/switch/Switch.tsx
-var import_jsx_runtime209 = require("react/jsx-runtime");
-var Switch = React211.forwardRef(
+var import_jsx_runtime214 = require("react/jsx-runtime");
+var Switch = React217.forwardRef(
   ({
     className,
     checked: controlledChecked,
@@ -5835,14 +6318,19 @@ var Switch = React211.forwardRef(
     disabled,
     onChange,
     onClick,
+    name,
+    value,
+    form,
+    required,
     ...rest
   }, ref) => {
     const isControlled = controlledChecked !== void 0;
-    const [internalChecked, setInternalChecked] = React211.useState(defaultChecked);
-    const [pressed, setPressed] = React211.useState(false);
-    const timeoutRef = React211.useRef(null);
+    const [internalChecked, setInternalChecked] = React217.useState(defaultChecked);
+    const [pressed, setPressed] = React217.useState(false);
+    const timeoutRef = React217.useRef(null);
     const checked = isControlled ? controlledChecked : internalChecked;
     const handleClick = (e) => {
+      e.preventDefault();
       if (disabled) return;
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
       setPressed(true);
@@ -5858,7 +6346,7 @@ var Switch = React211.forwardRef(
         onClick(e);
       }
     };
-    React211.useEffect(() => {
+    React217.useEffect(() => {
       return () => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
       };
@@ -5876,45 +6364,75 @@ var Switch = React211.forwardRef(
       Switch_default[size],
       disabled && Switch_default.disabled
     ].filter(Boolean).join(" ");
+    const controlRef = React217.useRef(null);
     const iconSize = size === "small" ? 16 : 24;
-    const switchContent = /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+    const switchContent = /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
       "button",
       {
-        ref,
+        ref: (node) => {
+          controlRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
         type: "button",
+        form,
+        value,
+        "aria-required": required || void 0,
         role: "switch",
         "aria-checked": checked,
         className: switchClasses,
         disabled,
         onClick: handleClick,
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("span", { className: Switch_default.switchTrack, children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("span", { className: Switch_default.switchThumb, children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("span", { className: Switch_default.switchThumbInner, children: checked && /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("span", { className: Switch_default.switchIcon, children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(CheckSmallOutline, { size: iconSize }) }) }) }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("span", { className: Switch_default.switchTrack, children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("span", { className: Switch_default.switchThumb, children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("span", { className: Switch_default.switchThumbInner, children: checked && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("span", { className: Switch_default.switchIcon, children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(CheckSmallOutline, { size: iconSize }) }) }) }) })
+      }
+    );
+    const formInput = /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+      NativeSelectionInput,
+      {
+        type: "checkbox",
+        name,
+        value,
+        form,
+        required,
+        disabled,
+        checked,
+        defaultChecked,
+        controlled: isControlled,
+        controlRef,
+        onReset: setInternalChecked
       }
     );
     if (label) {
-      return /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("label", { className: containerClasses, children: [
-        switchContent,
-        /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("span", { className: Switch_default.switchLabel, children: label })
+      return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(import_jsx_runtime214.Fragment, { children: [
+        formInput,
+        /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("label", { className: containerClasses, children: [
+          switchContent,
+          /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("span", { className: Switch_default.switchLabel, children: label })
+        ] })
       ] });
     }
-    return switchContent;
+    return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(import_jsx_runtime214.Fragment, { children: [
+      formInput,
+      switchContent
+    ] });
   }
 );
 Switch.displayName = "Switch";
 
 // ../ultimate/src/components/text-field/TextField.tsx
-var React221 = __toESM(require("react"));
+var React228 = __toESM(require("react"));
 var import_react_dom2 = require("react-dom");
 
 // ../ultimate/src/components/divider/Divider.tsx
-var React212 = __toESM(require("react"));
+var React218 = __toESM(require("react"));
 
 // ../ultimate/src/components/divider/Divider.module.css
 var Divider_default = {};
 
 // ../ultimate/src/components/divider/Divider.tsx
-var import_jsx_runtime210 = require("react/jsx-runtime");
-var Divider = React212.forwardRef(
+var import_jsx_runtime215 = require("react/jsx-runtime");
+var Divider = React218.forwardRef(
   ({
     orientation = "horizontal",
     variant = "solid",
@@ -5930,7 +6448,7 @@ var Divider = React212.forwardRef(
       Divider_default[`divider${variant.charAt(0).toUpperCase() + variant.slice(1)}${thicknessKey}`],
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
       "hr",
       {
         ref,
@@ -5945,23 +6463,13 @@ var Divider = React212.forwardRef(
 Divider.displayName = "Divider";
 
 // ../ultimate/src/components/dropdown-list/DropdownList.tsx
-var React220 = __toESM(require("react"));
+var React226 = __toESM(require("react"));
 
 // ../ultimate/src/components/search-field/SearchField.tsx
-var React219 = __toESM(require("react"));
+var React225 = __toESM(require("react"));
 
 // ../ultimate/src/hooks/useComposedRefs.ts
-var import_react2 = require("react");
-
-// ../ultimate/src/hooks/useCallbackRef.ts
 var import_react3 = require("react");
-function useCallbackRef(callback) {
-  const callbackRef = (0, import_react3.useRef)(callback);
-  (0, import_react3.useEffect)(() => {
-    callbackRef.current = callback;
-  });
-  return (0, import_react3.useMemo)(() => ((...args) => callbackRef.current?.(...args)), []);
-}
 
 // ../ultimate/src/hooks/useIsomorphicLayoutEffect.ts
 var import_react4 = require("react");
@@ -5994,69 +6502,56 @@ function useClickOutside(ref, handler, enabled = true, ignoredRefs = []) {
 }
 
 // ../ultimate/src/hooks/useBottomNavElevation.ts
-var React213 = __toESM(require("react"));
-
-// ../ultimate/src/hooks/useControllableState.ts
-var React214 = __toESM(require("react"));
-function useControllableState({
-  value: valueProp,
-  defaultValue,
-  onChange
-}) {
-  const [uncontrolledValue, setUncontrolledValue] = React214.useState(() => typeof defaultValue === "function" ? defaultValue() : defaultValue);
-  const isControlledRef = React214.useRef(valueProp !== void 0);
-  const isControlled = isControlledRef.current;
-  const value = isControlled ? valueProp : uncontrolledValue;
-  const handleChange = useCallbackRef(onChange);
-  const previousUncontrolledValueRef = React214.useRef(uncontrolledValue);
-  React214.useEffect(() => {
-    if (isControlled) return;
-    if (previousUncontrolledValueRef.current === uncontrolledValue) return;
-    previousUncontrolledValueRef.current = uncontrolledValue;
-    handleChange(uncontrolledValue);
-  }, [isControlled, uncontrolledValue, handleChange]);
-  const setValue = React214.useCallback(
-    (nextValue) => {
-      if (isControlled) {
-        const setter = nextValue;
-        const valueToEmit = typeof nextValue === "function" ? setter(valueProp) : nextValue;
-        handleChange(valueToEmit);
-      } else {
-        setUncontrolledValue((prev) => {
-          const setter = nextValue;
-          return typeof nextValue === "function" ? setter(prev) : nextValue;
-        });
-      }
-    },
-    [isControlled, valueProp, handleChange]
-  );
-  return [value, setValue];
-}
+var React219 = __toESM(require("react"));
 
 // ../ultimate/src/hooks/useEscapeKeydown.ts
 var import_react6 = require("react");
+
+// ../ultimate/src/internal/overlay/OverlayScope.tsx
+var React220 = __toESM(require("react"));
+var import_jsx_runtime216 = require("react/jsx-runtime");
+var OverlayDepthContext = React220.createContext(0);
+
+// ../ultimate/src/hooks/useEscapeKeydown.ts
+var layersByDocument = /* @__PURE__ */ new WeakMap();
 function useEscapeKeydown(handler, enabled = true) {
   const handleEscape = useCallbackRef(handler);
+  const depth = (0, import_react6.useContext)(OverlayDepthContext);
   (0, import_react6.useEffect)(() => {
     if (!enabled) return;
+    const owner = document;
+    let layers = layersByDocument.get(owner);
+    if (!layers) {
+      layers = [];
+      layersByDocument.set(owner, layers);
+    }
+    const layer = { depth, handler: handleEscape };
+    layers.push(layer);
     const onKeydown = (event) => {
-      if (event.key === "Escape") {
-        handleEscape(event);
-      }
+      if (event.key !== "Escape" || event.isComposing || event.defaultPrevented) return;
+      const top = layers.reduce((candidate, item) => !candidate || item.depth >= candidate.depth ? item : candidate, void 0);
+      if (top !== layer) return;
+      event.preventDefault();
+      event.stopPropagation();
+      layer.handler(event);
     };
-    document.addEventListener("keydown", onKeydown);
-    return () => document.removeEventListener("keydown", onKeydown);
-  }, [enabled, handleEscape]);
+    owner.addEventListener("keydown", onKeydown);
+    return () => {
+      const index = layers.indexOf(layer);
+      if (index >= 0) layers.splice(index, 1);
+      owner.removeEventListener("keydown", onKeydown);
+    };
+  }, [enabled, handleEscape, depth]);
 }
 
 // ../ultimate/src/hooks/useFocusTrap.ts
-var React215 = __toESM(require("react"));
+var React221 = __toESM(require("react"));
 
 // ../ultimate/src/hooks/useId.ts
-var React216 = __toESM(require("react"));
+var React222 = __toESM(require("react"));
 
 // ../ultimate/src/hooks/useMediaQuery.ts
-var React217 = __toESM(require("react"));
+var React223 = __toESM(require("react"));
 
 // ../ultimate/src/hooks/usePopoverPosition.ts
 var import_react7 = require("react");
@@ -6213,7 +6708,7 @@ var import_react10 = require("react");
 var import_react11 = require("react");
 
 // ../ultimate/src/hooks/useSubHeaderStickyState.ts
-var React218 = __toESM(require("react"));
+var React224 = __toESM(require("react"));
 
 // ../ultimate/src/hooks/useVirtualList.ts
 var import_react12 = require("react");
@@ -6272,18 +6767,18 @@ var FOCUSABLE_SELECTOR = [
 ].join(", ");
 var isFocusable = (element) => {
   if (element.hasAttribute("disabled")) return false;
-  if (element.getAttribute("aria-hidden") === "true") return false;
+  if (element.closest('[aria-hidden="true"], [inert], [hidden]')) return false;
   if (element.tabIndex < 0) return false;
   const style = window.getComputedStyle(element);
   if (style.display === "none" || style.visibility === "hidden") return false;
   return true;
 };
-var focusNextElement = (currentElement) => {
+var focusNextElement = (currentElement, backwards = false) => {
   if (typeof document === "undefined") return;
   const focusableElements = Array.from(document.querySelectorAll(FOCUSABLE_SELECTOR)).filter(isFocusable);
   const currentIndex = focusableElements.indexOf(currentElement);
   if (currentIndex === -1) return;
-  const nextElement = focusableElements[currentIndex + 1];
+  const nextElement = focusableElements[currentIndex + (backwards ? -1 : 1)];
   nextElement?.focus();
 };
 
@@ -6291,8 +6786,8 @@ var focusNextElement = (currentElement) => {
 var SearchField_default = {};
 
 // ../ultimate/src/components/search-field/SearchField.tsx
-var import_jsx_runtime211 = require("react/jsx-runtime");
-var SearchField = React219.forwardRef(
+var import_jsx_runtime217 = require("react/jsx-runtime");
+var SearchField = React225.forwardRef(
   ({
     placeholder = "Search",
     variant = "default",
@@ -6301,6 +6796,7 @@ var SearchField = React219.forwardRef(
     showClear = true,
     onClear,
     disabled,
+    readOnly,
     className,
     style,
     onFocus,
@@ -6313,17 +6809,17 @@ var SearchField = React219.forwardRef(
     width,
     ...props
   }, ref) => {
-    const [focused, setFocused] = React219.useState(false);
+    const [focused, setFocused] = React225.useState(false);
     const [valueState, setValueState] = useControllableState({
       value,
       defaultValue: defaultValue || "",
       onChange
     });
-    const inputRef = React219.useRef(null);
-    React219.useEffect(() => {
+    const inputRef = React225.useRef(null);
+    React225.useEffect(() => {
       if (!shortcutHint || disabled) return;
       const handleGlobalKeyDown = (e) => {
-        if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        if (!e.isComposing && !e.defaultPrevented && (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
           e.preventDefault();
           inputRef.current?.focus();
         }
@@ -6331,7 +6827,7 @@ var SearchField = React219.forwardRef(
       window.addEventListener("keydown", handleGlobalKeyDown);
       return () => window.removeEventListener("keydown", handleGlobalKeyDown);
     }, [shortcutHint, disabled]);
-    React219.useImperativeHandle(ref, () => inputRef.current);
+    React225.useImperativeHandle(ref, () => inputRef.current);
     const currentValue = valueState;
     const handleFocus = (e) => {
       setFocused(true);
@@ -6342,6 +6838,7 @@ var SearchField = React219.forwardRef(
       onBlur?.(e);
     };
     const handleChange = (e) => {
+      if (disabled || readOnly) return;
       setValueState(e.target.value);
     };
     const handleDoubleClick = (e) => {
@@ -6351,6 +6848,7 @@ var SearchField = React219.forwardRef(
       }
     };
     const handleClear = (e) => {
+      if (disabled || readOnly) return;
       e.preventDefault();
       e.stopPropagation();
       setValueState("");
@@ -6358,12 +6856,13 @@ var SearchField = React219.forwardRef(
       inputRef.current?.focus();
     };
     const handleKeyDown = (e) => {
+      if (disabled || e.nativeEvent.isComposing) return;
       if (e.key === "Enter") {
         e.preventDefault();
         focusNextElement(e.currentTarget);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
       "div",
       {
         className: [
@@ -6379,13 +6878,14 @@ var SearchField = React219.forwardRef(
         style: { ...style, width },
         onClick: () => !disabled && inputRef.current?.focus(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("span", { className: SearchField_default.searchFieldIcon, children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(SearchOutline, { size: size === "large" ? 24 : 20 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("span", { className: SearchField_default.searchFieldIcon, children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(SearchOutline, { size: size === "large" ? 24 : 20 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
             "input",
             {
               ref: inputRef,
               className: SearchField_default.searchFieldInput,
               disabled,
+              readOnly,
               onFocus: handleFocus,
               onBlur: handleBlur,
               onDoubleClick: handleDoubleClick,
@@ -6397,8 +6897,8 @@ var SearchField = React219.forwardRef(
               ...props
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)("div", { className: SearchField_default.searchFieldTrailingGroup, children: [
-            shortcutHint && (!focused || !currentValue) && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { className: SearchField_default.searchFieldTrailingGroup, children: [
+            shortcutHint && (!focused || !currentValue) && /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
               Badge,
               {
                 variant: "secondary",
@@ -6407,12 +6907,12 @@ var SearchField = React219.forwardRef(
                 label: shortcutHint
               }
             ),
-            showClear && focused && currentValue && !disabled && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+            showClear && focused && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
               IconButton,
               {
                 variant: "primary",
                 shape: "pill",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(CloseSmallOutline, {}),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(CloseSmallOutline, {}),
                 onMouseDown: (e) => e.preventDefault(),
                 onClick: handleClear,
                 tabIndex: -1,
@@ -6431,11 +6931,21 @@ SearchField.displayName = "SearchField";
 // ../ultimate/src/components/dropdown-list/DropdownList.module.css
 var DropdownList_default = {};
 
+// ../ultimate/src/internal/collection/getItemId.ts
+function getItemId(collectionId, part, key) {
+  const escaped = key.replace(/[^A-Za-z0-9-]/g, (char) => `_${char.charCodeAt(0).toString(16)}_`);
+  return `${collectionId}-${part}-${escaped}`;
+}
+
 // ../ultimate/src/components/dropdown-list/DropdownList.tsx
-var import_jsx_runtime212 = require("react/jsx-runtime");
-var DropdownList = React220.forwardRef(
+var import_jsx_runtime218 = require("react/jsx-runtime");
+var DropdownList = React226.forwardRef(
   ({
     items,
+    role = "listbox",
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
     value = [],
     size = "md",
     mode = "single",
@@ -6447,29 +6957,32 @@ var DropdownList = React220.forwardRef(
     className,
     style
   }, ref) => {
-    const [searchQuery, setSearchQuery] = React220.useState("");
-    const showSearch = items.length >= 10;
-    const selectedValues = React220.useMemo(() => {
+    const typeaheadRef = React226.useRef({ text: "", time: 0 });
+    const [searchQuery, setSearchQuery] = React226.useState("");
+    const showSearch = role === "listbox" && items.length >= 10;
+    const instanceId = React226.useId();
+    const itemId = (value2) => value2 === void 0 ? void 0 : getItemId(instanceId, "item", value2);
+    const selectedValues = React226.useMemo(() => {
       if (Array.isArray(value)) return value;
       return value ? [value] : [];
     }, [value]);
-    const filteredItems = React220.useMemo(() => {
+    const filteredItems = React226.useMemo(() => {
       if (!searchQuery.trim()) return items;
       const query = searchQuery.toLowerCase();
       return items.filter(
         (item) => item.label.toLowerCase().includes(query)
       );
     }, [items, searchQuery]);
-    const selectableFilteredValues = React220.useMemo(() => filteredItems.filter((item) => !item.disabled).map((item) => item.value), [filteredItems]);
+    const selectableFilteredValues = React226.useMemo(() => filteredItems.filter((item) => !item.disabled).map((item) => item.value), [filteredItems]);
     const showSelectAll = mode === "multi" && Boolean(selectAllLabel) && selectableFilteredValues.length > 0;
     const allFilteredSelected = showSelectAll && selectableFilteredValues.every((itemValue) => selectedValues.includes(itemValue));
     const someFilteredSelected = showSelectAll && !allFilteredSelected && selectableFilteredValues.some((itemValue) => selectedValues.includes(itemValue));
-    const handleSelectAllClick = React220.useCallback(() => {
+    const handleSelectAllClick = React226.useCallback(() => {
       if (!showSelectAll) return;
       const nextValues = allFilteredSelected ? selectedValues.filter((itemValue) => !selectableFilteredValues.includes(itemValue)) : Array.from(/* @__PURE__ */ new Set([...selectedValues, ...selectableFilteredValues]));
       onChange?.(nextValues);
     }, [allFilteredSelected, onChange, selectableFilteredValues, selectedValues, showSelectAll]);
-    const displayItems = React220.useMemo(() => {
+    const displayItems = React226.useMemo(() => {
       if (!showSelectAll || !selectAllLabel) return filteredItems;
       return [
         { value: "__phx_select_all__", label: selectAllLabel, __selectAll: true },
@@ -6492,10 +7005,10 @@ var DropdownList = React220.forwardRef(
     const isSelected = (itemValue) => {
       return selectedValues.includes(itemValue);
     };
-    const [showTopGradient, setShowTopGradient] = React220.useState(false);
-    const [showBottomGradient, setShowBottomGradient] = React220.useState(false);
-    const listRef = React220.useRef(null);
-    const handleScroll = React220.useCallback(() => {
+    const [showTopGradient, setShowTopGradient] = React226.useState(false);
+    const [showBottomGradient, setShowBottomGradient] = React226.useState(false);
+    const listRef = React226.useRef(null);
+    const handleScroll = React226.useCallback(() => {
       const el = listRef.current;
       if (!el) return;
       const scrollTop = el.scrollTop;
@@ -6504,7 +7017,7 @@ var DropdownList = React220.forwardRef(
       setShowTopGradient(scrollTop > 10);
       setShowBottomGradient(scrollTop + clientHeight < scrollHeight - 10);
     }, []);
-    React220.useEffect(() => {
+    React226.useEffect(() => {
       handleScroll();
     }, [displayItems, handleScroll]);
     const ITEM_HEIGHT = size === "sm" ? 32 : 48;
@@ -6514,9 +7027,9 @@ var DropdownList = React220.forwardRef(
       itemHeight: ITEM_HEIGHT,
       containerHeight: parsedMaxHeight
     });
-    const [focusedIndex, setFocusedIndex] = React220.useState(-1);
-    const [isKeyboardMode, setIsKeyboardMode] = React220.useState(false);
-    React220.useEffect(() => {
+    const [focusedIndex, setFocusedIndex] = React226.useState(-1);
+    const [isKeyboardMode, setIsKeyboardMode] = React226.useState(false);
+    React226.useEffect(() => {
       if (displayItems.length === 0) {
         setFocusedIndex(-1);
         return;
@@ -6533,7 +7046,7 @@ var DropdownList = React220.forwardRef(
         return prev;
       });
     }, [displayItems, value, mode]);
-    React220.useEffect(() => {
+    React226.useEffect(() => {
       if (focusedIndex !== -1 && listRef.current) {
         const itemTop = focusedIndex * ITEM_HEIGHT;
         const itemBottom = itemTop + ITEM_HEIGHT;
@@ -6547,22 +7060,34 @@ var DropdownList = React220.forwardRef(
         }
       }
     }, [focusedIndex, ITEM_HEIGHT]);
-    const handleListScroll = React220.useCallback((e) => {
+    const handleListScroll = React226.useCallback((e) => {
       handleScroll();
       if (isVirtual) onVirtualScroll(e);
     }, [handleScroll, isVirtual, onVirtualScroll]);
     const handleKeyDown = (e) => {
-      if (displayItems.length === 0) return;
+      if (e.nativeEvent.isComposing || e.defaultPrevented || displayItems.length === 0) return;
       if (["ArrowDown", "ArrowUp", "Home", "End", "Enter", " "].includes(e.key)) {
         setIsKeyboardMode(true);
       }
       const isSearchFocus = e.target.tagName === "INPUT";
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setFocusedIndex((prev) => Math.min(prev + 1, displayItems.length - 1));
+        setFocusedIndex((prev) => {
+          for (let offset = 1; offset <= displayItems.length; offset++) {
+            const next = (prev + offset + displayItems.length) % displayItems.length;
+            if (displayItems[next] && !displayItems[next].disabled) return next;
+          }
+          return -1;
+        });
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        setFocusedIndex((prev) => prev <= 0 ? displayItems.length - 1 : prev - 1);
+        setFocusedIndex((prev) => {
+          for (let offset = 1; offset <= displayItems.length; offset++) {
+            const next = ((prev < 0 ? 0 : prev) - offset + displayItems.length) % displayItems.length;
+            if (displayItems[next] && !displayItems[next].disabled) return next;
+          }
+          return -1;
+        });
       } else if (e.key === "Enter") {
         e.preventDefault();
         if (focusedIndex !== -1) {
@@ -6584,16 +7109,32 @@ var DropdownList = React220.forwardRef(
       } else if (e.key === "Home") {
         if (!isSearchFocus) {
           e.preventDefault();
-          setFocusedIndex(0);
+          setFocusedIndex(displayItems.findIndex((item) => !item.disabled));
         }
       } else if (e.key === "End") {
         if (!isSearchFocus) {
           e.preventDefault();
-          setFocusedIndex(displayItems.length - 1);
+          setFocusedIndex(displayItems.map((item) => !item.disabled).lastIndexOf(true));
+        }
+      } else if (!isSearchFocus && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        const now = Date.now();
+        const previous = typeaheadRef.current;
+        const text = `${now - previous.time < 600 ? previous.text : ""}${e.key.toLocaleLowerCase()}`;
+        typeaheadRef.current = { text, time: now };
+        const query = [...text].every((character) => character === text[0]) ? text[0] : text;
+        for (let offset = 1; offset <= displayItems.length; offset++) {
+          const next = (focusedIndex + offset + displayItems.length) % displayItems.length;
+          const item = displayItems[next];
+          if (item && !item.disabled && item.label.toLocaleLowerCase().startsWith(query)) {
+            e.preventDefault();
+            setIsKeyboardMode(true);
+            setFocusedIndex(next);
+            break;
+          }
         }
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
       "div",
       {
         ref,
@@ -6602,38 +7143,43 @@ var DropdownList = React220.forwardRef(
         onKeyDown: handleKeyDown,
         onMouseMove: () => setIsKeyboardMode(false),
         children: [
-          showSearch && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { className: DropdownList_default.dropdownListSearchWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
+          showSearch && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { className: DropdownList_default.dropdownListSearchWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
             SearchField,
             {
               placeholder: searchPlaceholder,
               value: searchQuery,
               onChange: setSearchQuery,
-              shortcutHint: "Ctrl + /"
+              shortcutHint: "Ctrl + /",
+              onKeyDown: () => {
+              }
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)("div", { className: DropdownList_default.dropdownListItemsListContainer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { className: [
+          /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("div", { className: DropdownList_default.dropdownListItemsListContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { className: [
               DropdownList_default.dropdownListGradient,
               DropdownList_default.dropdownListGradientTop,
               showTopGradient && DropdownList_default.dropdownListGradientVisible
             ].filter(Boolean).join(" ") }),
-            /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
               "div",
               {
                 ref: listRef,
                 className: `${DropdownList_default.dropdownListItemsList} scrollbarSm`,
                 style: { maxHeight },
-                role: "listbox",
+                role,
+                id,
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
                 tabIndex: 0,
-                "aria-multiselectable": mode === "multi" ? true : void 0,
-                "aria-activedescendant": focusedIndex !== -1 ? `dropdown-item-${displayItems[focusedIndex]?.value}` : void 0,
+                "aria-multiselectable": role === "listbox" && mode === "multi" ? true : void 0,
+                "aria-activedescendant": focusedIndex !== -1 ? itemId(displayItems[focusedIndex]?.value) : void 0,
                 onScroll: handleListScroll,
-                children: displayItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { className: DropdownList_default.dropdownListEmptyState, children: "No results found" }) : isVirtual ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { style: { height: totalHeight, position: "relative" }, children: virtualItems.map(({ index, style: style2 }) => {
+                children: displayItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { className: DropdownList_default.dropdownListEmptyState, children: "No results found" }) : isVirtual ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { style: { height: totalHeight, position: "relative" }, children: virtualItems.map(({ index, style: style2 }) => {
                   const item = displayItems[index];
                   if (!item) return null;
                   const isFocused = index === focusedIndex;
                   const isSelectAllItem = Boolean(item.__selectAll);
-                  return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { style: style2, children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { style: style2, children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
                     "div",
                     {
                       className: [
@@ -6641,10 +7187,10 @@ var DropdownList = React220.forwardRef(
                         showDividers && DropdownList_default.dropdownListItemWrapperWithDivider,
                         item.divider && DropdownList_default.dropdownListItemWrapperWithBottomDivider
                       ].filter(Boolean).join(" "),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
                         "div",
                         {
-                          id: `dropdown-item-${item.value}`,
+                          id: itemId(item.value),
                           className: [
                             DropdownList_default.dropdownListItem,
                             size === "sm" && DropdownList_default.dropdownListItemSm,
@@ -6653,11 +7199,11 @@ var DropdownList = React220.forwardRef(
                             item.disabled && DropdownList_default.dropdownListItemDisabled
                           ].filter(Boolean).join(" "),
                           onClick: () => handleItemClick(item.value, item.disabled, isSelectAllItem),
-                          role: "option",
-                          "aria-selected": isSelectAllItem ? allFilteredSelected : isSelected(item.value),
+                          role: role === "menu" ? "menuitem" : "option",
+                          "aria-selected": role === "listbox" ? isSelectAllItem ? allFilteredSelected : isSelected(item.value) : void 0,
                           "aria-disabled": item.disabled,
                           children: [
-                            mode === "multi" && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
+                            mode === "multi" && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
                               Checkbox,
                               {
                                 checked: isSelectAllItem ? allFilteredSelected : isSelected(item.value),
@@ -6669,9 +7215,9 @@ var DropdownList = React220.forwardRef(
                                 tabIndex: -1
                               }
                             ),
-                            item.icon && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("span", { className: DropdownList_default.dropdownListItemIcon, children: React220.isValidElement(item.icon) ? React220.cloneElement(item.icon, { size: size === "sm" ? 20 : 24 }) : item.icon }),
-                            /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("span", { className: DropdownList_default.dropdownListItemLabel, children: item.label }),
-                            mode === "single" && isSelected(item.value) && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("span", { className: DropdownList_default.dropdownListCheckmark, children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(CheckSmallOutline, { size: size === "sm" ? 20 : 24 }) })
+                            item.icon && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("span", { className: DropdownList_default.dropdownListItemIcon, children: React226.isValidElement(item.icon) ? React226.cloneElement(item.icon, { size: size === "sm" ? 20 : 24 }) : item.icon }),
+                            /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("span", { className: DropdownList_default.dropdownListItemLabel, children: item.label }),
+                            mode === "single" && isSelected(item.value) && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("span", { className: DropdownList_default.dropdownListCheckmark, children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(CheckSmallOutline, { size: size === "sm" ? 20 : 24 }) })
                           ]
                         }
                       )
@@ -6680,7 +7226,7 @@ var DropdownList = React220.forwardRef(
                 }) }) : displayItems.map((item, index) => {
                   const isFocused = index === focusedIndex;
                   const isSelectAllItem = Boolean(item.__selectAll);
-                  return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
                     "div",
                     {
                       className: [
@@ -6688,10 +7234,10 @@ var DropdownList = React220.forwardRef(
                         showDividers && DropdownList_default.dropdownListItemWrapperWithDivider,
                         item.divider && DropdownList_default.dropdownListItemWrapperWithBottomDivider
                       ].filter(Boolean).join(" "),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
                         "div",
                         {
-                          id: `dropdown-item-${item.value}`,
+                          id: itemId(item.value),
                           className: [
                             DropdownList_default.dropdownListItem,
                             size === "sm" && DropdownList_default.dropdownListItemSm,
@@ -6700,11 +7246,11 @@ var DropdownList = React220.forwardRef(
                             item.disabled && DropdownList_default.dropdownListItemDisabled
                           ].filter(Boolean).join(" "),
                           onClick: () => handleItemClick(item.value, item.disabled, isSelectAllItem),
-                          role: "option",
-                          "aria-selected": isSelectAllItem ? allFilteredSelected : isSelected(item.value),
+                          role: role === "menu" ? "menuitem" : "option",
+                          "aria-selected": role === "listbox" ? isSelectAllItem ? allFilteredSelected : isSelected(item.value) : void 0,
                           "aria-disabled": item.disabled,
                           children: [
-                            mode === "multi" && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
+                            mode === "multi" && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
                               Checkbox,
                               {
                                 checked: isSelectAllItem ? allFilteredSelected : isSelected(item.value),
@@ -6716,9 +7262,9 @@ var DropdownList = React220.forwardRef(
                                 tabIndex: -1
                               }
                             ),
-                            item.icon && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("span", { className: DropdownList_default.dropdownListItemIcon, children: React220.isValidElement(item.icon) ? React220.cloneElement(item.icon, { size: size === "sm" ? 20 : 24 }) : item.icon }),
-                            /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("span", { className: DropdownList_default.dropdownListItemLabel, children: item.label }),
-                            mode === "single" && isSelected(item.value) && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("span", { className: DropdownList_default.dropdownListCheckmark, children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(CheckSmallOutline, { size: size === "sm" ? 20 : 24 }) })
+                            item.icon && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("span", { className: DropdownList_default.dropdownListItemIcon, children: React226.isValidElement(item.icon) ? React226.cloneElement(item.icon, { size: size === "sm" ? 20 : 24 }) : item.icon }),
+                            /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("span", { className: DropdownList_default.dropdownListItemLabel, children: item.label }),
+                            mode === "single" && isSelected(item.value) && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("span", { className: DropdownList_default.dropdownListCheckmark, children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(CheckSmallOutline, { size: size === "sm" ? 20 : 24 }) })
                           ]
                         }
                       )
@@ -6728,7 +7274,7 @@ var DropdownList = React220.forwardRef(
                 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("div", { className: [
+            /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { className: [
               DropdownList_default.dropdownListGradient,
               DropdownList_default.dropdownListGradientBottom,
               showBottomGradient && DropdownList_default.dropdownListGradientVisible
@@ -6801,9 +7347,26 @@ var calculateCursorPosition = (prevValue, nextValue, prevCursorPos) => {
 // ../ultimate/src/components/text-field/TextField.module.css
 var TextField_default = {};
 
+// ../ultimate/src/internal/form/useNativeFieldReset.ts
+var React227 = __toESM(require("react"));
+function useNativeFieldReset(ref, resetState, resetValue, formId) {
+  const reset = useCallbackRef((event) => {
+    queueMicrotask(() => {
+      if (event.defaultPrevented || !ref.current) return;
+      resetState();
+      ref.current.value = resetValue;
+    });
+  });
+  React227.useEffect(() => {
+    const form = ref.current?.form;
+    form?.addEventListener("reset", reset);
+    return () => form?.removeEventListener("reset", reset);
+  }, [formId, ref, reset]);
+}
+
 // ../ultimate/src/components/text-field/TextField.tsx
-var import_jsx_runtime213 = require("react/jsx-runtime");
-var TextField = React221.forwardRef(
+var import_jsx_runtime219 = require("react/jsx-runtime");
+var TextField = React228.forwardRef(
   ({
     label,
     labelStyle = "outside",
@@ -6830,6 +7393,7 @@ var TextField = React221.forwardRef(
     readOnly,
     className,
     style,
+    inputStyle,
     onFocus,
     onBlur,
     onChange,
@@ -6844,23 +7408,32 @@ var TextField = React221.forwardRef(
     selectOnFocus = false,
     ...props
   }, ref) => {
-    const [focused, setFocused] = React221.useState(false);
-    const [isDropdownOpen, setIsDropdownOpen] = React221.useState(false);
-    const [passwordVisible, setPasswordVisible] = React221.useState(false);
-    const inputRef = React221.useRef(null);
-    const [valueState, setValueState] = useControllableState({
+    const generatedId = React228.useId();
+    const inputId = props.id ?? generatedId;
+    const helperId = `${inputId}-help`;
+    const [focused, setFocused] = React228.useState(false);
+    const [isDropdownOpen, setIsDropdownOpen] = React228.useState(false);
+    const [passwordVisible, setPasswordVisible] = React228.useState(false);
+    const inputRef = React228.useRef(null);
+    const [valueState, setValueState, resetValueState] = useControllableState({
       value,
       defaultValue: defaultValue || "",
       onChange
     });
     const currentValue = valueState;
+    useNativeFieldReset(
+      inputRef,
+      resetValueState,
+      String(value === void 0 ? defaultValue ?? "" : currentValue ?? ""),
+      props.form
+    );
     const [dropdownValueState, setDropdownValueState] = useControllableState({
       value: trailingDropdownValue,
       defaultValue: defaultTrailingDropdownValue || "",
       onChange: onTrailingDropdownChange
     });
-    const triggerWrapperRef = React221.useRef(null);
-    const popoverRef = React221.useRef(null);
+    const triggerWrapperRef = React228.useRef(null);
+    const popoverRef = React228.useRef(null);
     const { style: popoverStyle } = usePopoverPosition(triggerWrapperRef, popoverRef, isDropdownOpen, {
       margin: 8,
       strategy: portal ? "fixed" : "absolute",
@@ -6873,7 +7446,7 @@ var TextField = React221.forwardRef(
       [triggerWrapperRef]
     );
     useEscapeKeydown(() => setIsDropdownOpen(false), isDropdownOpen);
-    const keepSelectionOnMouseUpRef = React221.useRef(false);
+    const keepSelectionOnMouseUpRef = React228.useRef(false);
     const handleFocus = (e) => {
       setFocused(true);
       if (selectOnFocus) e.currentTarget.select();
@@ -6890,7 +7463,7 @@ var TextField = React221.forwardRef(
       }
       props.onMouseUp?.(e);
     };
-    const isPhoneFormat = React221.useMemo(() => {
+    const isPhoneFormat = React228.useMemo(() => {
       if (inputFormat) return false;
       if (!leadingText) return false;
       return (leadingText.startsWith("+") || /^\d+$/.test(leadingText.replace(/[\s()]/g, ""))) && !leadingText.includes("://");
@@ -6900,7 +7473,7 @@ var TextField = React221.forwardRef(
     const separator = formatOptions?.separator ?? ",";
     const allowDecimal = formatOptions?.allowDecimal ?? true;
     const maxDigits = formatOptions?.maxDigits;
-    const applyFormat = React221.useCallback((raw) => {
+    const applyFormat = React228.useCallback((raw) => {
       switch (activeFormat) {
         case "currency": {
           let cleaned = raw;
@@ -6936,7 +7509,7 @@ var TextField = React221.forwardRef(
       }
       onBlur?.(e);
     };
-    React221.useEffect(() => {
+    React228.useEffect(() => {
       if (activeFormat && currentValue) {
         const formatted = applyFormat(String(currentValue));
         if (currentValue !== formatted) {
@@ -7035,7 +7608,7 @@ var TextField = React221.forwardRef(
         displayedDropdownLabel = selectedOption.label;
       }
     }
-    const dropdownMenu = isDropdownOpen && dropdownListItems && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+    const dropdownMenu = isDropdownOpen && dropdownListItems && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
       "div",
       {
         ref: popoverRef,
@@ -7044,7 +7617,7 @@ var TextField = React221.forwardRef(
           ...popoverStyle,
           minWidth: triggerWrapperRef.current?.offsetWidth || 120
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
           DropdownList,
           {
             items: dropdownListItems,
@@ -7057,7 +7630,7 @@ var TextField = React221.forwardRef(
         )
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
       "div",
       {
         className: [
@@ -7069,16 +7642,16 @@ var TextField = React221.forwardRef(
         ].filter(Boolean).join(" "),
         style: { ...style, width },
         children: [
-          shouldShowLabelOutside && /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)("label", { className: [
+          shouldShowLabelOutside && /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("label", { htmlFor: inputId, className: [
             TextField_default.textFieldLabel,
             TextField_default.outsideLabel,
             size === "medium" && TextField_default.outsideLabelMedium,
             size === "small" && TextField_default.outsideLabelSmall
           ].filter(Boolean).join(" "), children: [
             label,
-            required && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("span", { className: TextField_default.textFieldRequiredIndicator, children: " *" })
+            required && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("span", { "aria-hidden": "true", className: TextField_default.textFieldRequiredIndicator, children: " *" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
             "div",
             {
               className: [
@@ -7094,26 +7667,32 @@ var TextField = React221.forwardRef(
               ].filter(Boolean).join(" "),
               onClick: () => !disabled && !readOnly && !focused && inputRef.current?.focus(),
               children: [
-                !shouldShowLabelInside && leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("span", { className: TextField_default.textFieldLeadingIcon, children: leadingIcon }),
-                !shouldShowLabelInside && leadingText && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("span", { className: TextField_default.textFieldLeadingText, children: leadingText }),
-                /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)("div", { className: TextField_default.textFieldInputWrapper, children: [
-                  shouldShowLabelInside && /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
-                    "span",
+                !shouldShowLabelInside && leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("span", { className: TextField_default.textFieldLeadingIcon, children: leadingIcon }),
+                !shouldShowLabelInside && leadingText && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("span", { className: TextField_default.textFieldLeadingText, children: leadingText }),
+                /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { className: TextField_default.textFieldInputWrapper, children: [
+                  shouldShowLabelInside && /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
+                    "label",
                     {
+                      htmlFor: inputId,
                       className: [
                         TextField_default.textFieldInlineLabel,
                         (focused || currentValue) && TextField_default.shrunk
                       ].filter(Boolean).join(" "),
                       children: [
                         label,
-                        required && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("span", { className: TextField_default.textFieldRequiredIndicator, children: " *" })
+                        required && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("span", { "aria-hidden": "true", className: TextField_default.textFieldRequiredIndicator, children: " *" })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
                     "input",
                     {
+                      style: inputStyle,
                       ...props,
+                      id: inputId,
+                      required,
+                      "aria-invalid": error || props["aria-invalid"],
+                      "aria-describedby": mergeAriaIds(props["aria-describedby"], helperText ? helperId : void 0),
                       ref: (node) => {
                         inputRef.current = node;
                         if (typeof ref === "function") ref(node);
@@ -7144,8 +7723,8 @@ var TextField = React221.forwardRef(
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)("div", { className: TextField_default.textFieldTrailingGroup, children: [
-                  shortcutHint && !focused && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { className: TextField_default.textFieldTrailingGroup, children: [
+                  shortcutHint && !focused && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
                     Badge,
                     {
                       variant: "secondary",
@@ -7154,12 +7733,12 @@ var TextField = React221.forwardRef(
                       label: shortcutHint
                     }
                   ),
-                  showClear && focused && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+                  showClear && focused && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
                     IconButton,
                     {
                       variant: "primary",
                       shape: "pill",
-                      icon: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(CloseSmallOutline, {}),
+                      icon: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(CloseSmallOutline, {}),
                       onMouseDown: (e) => e.preventDefault(),
                       onClick: handleClear,
                       tabIndex: -1,
@@ -7167,13 +7746,13 @@ var TextField = React221.forwardRef(
                       className: TextField_default.textFieldClearButton
                     }
                   ),
-                  (trailingDropdownLabel || trailingDropdownOptions) && /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
+                  (trailingDropdownLabel || trailingDropdownOptions) && /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
                     "div",
                     {
                       ref: triggerWrapperRef,
                       className: TextField_default.textFieldTrailingDropdownWrapper,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
                           "div",
                           {
                             className: [
@@ -7182,12 +7761,12 @@ var TextField = React221.forwardRef(
                             ].filter(Boolean).join(" "),
                             onClick: handleDropdownClick,
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(Divider, { orientation: "vertical", className: TextField_default.textFieldSuffixDivider }),
-                              /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("span", { children: displayedDropdownLabel }),
-                              /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("span", { className: [
+                              /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Divider, { orientation: "vertical", className: TextField_default.textFieldSuffixDivider }),
+                              /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("span", { children: displayedDropdownLabel }),
+                              /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("span", { className: [
                                 TextField_default.textFieldChevronIcon,
                                 isDropdownOpen && TextField_default.rotated
-                              ].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(ChevronDownSmallOutline, { size: 20 }) })
+                              ].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(ChevronDownSmallOutline, { size: 20 }) })
                             ]
                           }
                         ),
@@ -7195,7 +7774,7 @@ var TextField = React221.forwardRef(
                       ]
                     }
                   ),
-                  activeFormat === "password" && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+                  activeFormat === "password" && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
                     "div",
                     {
                       className: [TextField_default.textFieldTrailingIconWrapper, TextField_default.textFieldPasswordToggleButton].join(" "),
@@ -7206,12 +7785,20 @@ var TextField = React221.forwardRef(
                         }
                       },
                       role: "button",
-                      tabIndex: -1,
+                      tabIndex: disabled ? -1 : 0,
+                      "aria-disabled": disabled || void 0,
+                      onKeyDown: (e) => {
+                        if (!disabled && (e.key === "Enter" || e.key === " ")) {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          togglePasswordVisibility(e);
+                        }
+                      },
                       "aria-label": passwordVisible ? "Hide password" : "Show password",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("span", { className: TextField_default.textFieldPasswordToggle, children: passwordVisible ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(EyeOffOutline, {}) : /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(EyeOutline, {}) })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("span", { className: TextField_default.textFieldPasswordToggle, children: passwordVisible ? /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(EyeOffOutline, {}) : /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(EyeOutline, {}) })
                     }
                   ),
-                  trailingIcon && activeFormat !== "password" && /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
+                  trailingIcon && activeFormat !== "password" && /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
                     "div",
                     {
                       className: TextField_default.textFieldTrailingIconWrapper,
@@ -7222,7 +7809,7 @@ var TextField = React221.forwardRef(
                         }
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(Divider, { orientation: "vertical", className: TextField_default.textFieldSuffixDivider }),
+                        /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Divider, { orientation: "vertical", className: TextField_default.textFieldSuffixDivider }),
                         trailingIcon
                       ]
                     }
@@ -7231,12 +7818,12 @@ var TextField = React221.forwardRef(
               ]
             }
           ),
-          (helperText || showCharacterCount && maxLength) && /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)("div", { className: TextField_default.textFieldFooter, children: [
-            helperText && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("span", { className: [
+          (helperText || showCharacterCount && maxLength) && /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("div", { className: TextField_default.textFieldFooter, children: [
+            helperText && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("span", { id: helperId, className: [
               TextField_default.textFieldHelperText,
               error && TextField_default.errorText
             ].filter(Boolean).join(" "), children: helperText }),
-            showCharacterCount && maxLength && /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)("span", { className: TextField_default.textFieldCharacterCount, children: [
+            showCharacterCount && maxLength && /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)("span", { className: TextField_default.textFieldCharacterCount, children: [
               String(currentValue || "").length,
               "/",
               maxLength
@@ -7250,14 +7837,14 @@ var TextField = React221.forwardRef(
 TextField.displayName = "TextField";
 
 // ../ultimate/src/components/text-area/TextArea.tsx
-var React222 = __toESM(require("react"));
+var React229 = __toESM(require("react"));
 
 // ../ultimate/src/components/text-area/TextArea.module.css
 var TextArea_default = {};
 
 // ../ultimate/src/components/text-area/TextArea.tsx
-var import_jsx_runtime214 = require("react/jsx-runtime");
-var TextArea = React222.forwardRef(
+var import_jsx_runtime220 = require("react/jsx-runtime");
+var TextArea = React229.forwardRef(
   ({
     label,
     labelStyle = "outside",
@@ -7283,13 +7870,20 @@ var TextArea = React222.forwardRef(
     fullWidth = true,
     ...props
   }, ref) => {
-    const [focused, setFocused] = React222.useState(false);
-    const [valueState, setValueState] = useControllableState({
+    const [focused, setFocused] = React229.useState(false);
+    const textareaRef = React229.useRef(null);
+    const [valueState, setValueState, resetValueState] = useControllableState({
       value,
       defaultValue: defaultValue || "",
       onChange
     });
     const currentValue = valueState;
+    useNativeFieldReset(
+      textareaRef,
+      resetValueState,
+      String(value === void 0 ? defaultValue ?? "" : currentValue ?? ""),
+      props.form
+    );
     const charCount = currentValue?.length || 0;
     const shouldShowCount = showCount ?? maxLength !== void 0;
     const handleFocus = (e) => {
@@ -7307,11 +7901,12 @@ var TextArea = React222.forwardRef(
       }
       setValueState(newValue);
     };
-    const generatedId = React222.useId();
+    const generatedId = React229.useId();
     const shouldShowLabelOutside = label && labelStyle === "outside";
     const shouldShowLabelInside = label && labelStyle === "inside";
     const textareaId = id ?? generatedId;
-    return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(
+    const helperId = `${textareaId}-help`;
+    return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(
       "div",
       {
         className: [
@@ -7323,12 +7918,12 @@ var TextArea = React222.forwardRef(
         ].filter(Boolean).join(" "),
         style: { ...style, width },
         children: [
-          shouldShowLabelOutside && /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("label", { className: TextArea_default.textAreaOutsideLabel, children: [
+          shouldShowLabelOutside && /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("label", { htmlFor: textareaId, className: TextArea_default.textAreaOutsideLabel, children: [
             label,
-            required && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("span", { className: TextArea_default.textAreaRequiredIndicator, children: " *" })
+            required && /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("span", { "aria-hidden": "true", className: TextArea_default.textAreaRequiredIndicator, children: " *" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("div", { className: TextArea_default.textAreaInputWrapper, children: [
-            shouldShowLabelInside && /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("div", { className: TextArea_default.textAreaInputWrapper, children: [
+            shouldShowLabelInside && /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(
               "label",
               {
                 className: [
@@ -7338,14 +7933,18 @@ var TextArea = React222.forwardRef(
                 htmlFor: textareaId,
                 children: [
                   label,
-                  required && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("span", { className: TextArea_default.textAreaRequiredIndicator, children: " *" })
+                  required && /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("span", { "aria-hidden": "true", className: TextArea_default.textAreaRequiredIndicator, children: " *" })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
               "textarea",
               {
-                ref,
+                ref: (node) => {
+                  textareaRef.current = node;
+                  if (typeof ref === "function") ref(node);
+                  else if (ref) ref.current = node;
+                },
                 id: textareaId,
                 className: [
                   TextArea_default.textAreaInput,
@@ -7365,16 +7964,19 @@ var TextArea = React222.forwardRef(
                 rows,
                 style: { resize },
                 maxLength: maxLength ?? void 0,
-                ...props
+                ...props,
+                required,
+                "aria-invalid": error || props["aria-invalid"],
+                "aria-describedby": mergeAriaIds(props["aria-describedby"], helperText ? helperId : void 0)
               }
             )
           ] }),
-          (helperText || shouldShowCount) && /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("div", { className: TextArea_default.textAreaFooter, children: [
-            helperText && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)("span", { className: [
+          (helperText || shouldShowCount) && /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("div", { className: TextArea_default.textAreaFooter, children: [
+            helperText && /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("span", { id: helperId, className: [
               TextArea_default.textAreaHelperText,
               error && TextArea_default.textAreaErrorText
             ].filter(Boolean).join(" "), children: helperText }),
-            shouldShowCount && /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)("span", { className: TextArea_default.textAreaCharCount, children: [
+            shouldShowCount && /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("span", { className: TextArea_default.textAreaCharCount, children: [
               charCount,
               maxLength !== void 0 ? `/${maxLength}` : ""
             ] })
@@ -7387,16 +7989,16 @@ var TextArea = React222.forwardRef(
 TextArea.displayName = "TextArea";
 
 // ../ultimate/src/components/avatar/Avatar.tsx
-var React223 = __toESM(require("react"));
+var React230 = __toESM(require("react"));
 
 // ../ultimate/src/components/avatar/Avatar.module.css
 var Avatar_default = {};
 
 // ../ultimate/src/components/avatar/Avatar.tsx
-var import_jsx_runtime215 = require("react/jsx-runtime");
-var Avatar = React223.forwardRef(
+var import_jsx_runtime221 = require("react/jsx-runtime");
+var Avatar = React230.forwardRef(
   ({ src, alt, name, icon, size = "40", status, stroke, className, onClick, ...rest }, ref) => {
-    const [hasError, setHasError] = React223.useState(false);
+    const [hasError, setHasError] = React230.useState(false);
     const isInteractive = !!onClick;
     const Component = isInteractive ? "button" : "div";
     const getInitials = (userName) => {
@@ -7405,7 +8007,7 @@ var Avatar = React223.forwardRef(
     };
     const renderContent = () => {
       if (src && !hasError) {
-        return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
           "img",
           {
             src,
@@ -7416,9 +8018,9 @@ var Avatar = React223.forwardRef(
         );
       }
       if (name) {
-        return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("span", { className: Avatar_default.avatarInitials, children: getInitials(name) });
+        return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("span", { className: Avatar_default.avatarInitials, children: getInitials(name) });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("span", { className: Avatar_default.avatarIcon, children: icon || /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(UserOutline, {}) });
+      return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("span", { className: Avatar_default.avatarIcon, children: icon || /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(UserOutline, {}) });
     };
     const avatarClasses = [
       "phx-avatar",
@@ -7428,7 +8030,7 @@ var Avatar = React223.forwardRef(
       isInteractive && Avatar_default.interactive,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
       Component,
       {
         ref,
@@ -7437,8 +8039,8 @@ var Avatar = React223.forwardRef(
         ...isInteractive ? { type: "button" } : {},
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { className: Avatar_default.avatarContent, children: renderContent() }),
-          status && /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { className: Avatar_default.avatarContent, children: renderContent() }),
+          status && /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
             Badge,
             {
               className: ["phx-avatar-status", Avatar_default.avatarStatus].filter(Boolean).join(" "),
@@ -7454,16 +8056,16 @@ var Avatar = React223.forwardRef(
 Avatar.displayName = "Avatar";
 
 // ../ultimate/src/components/avatar/AvatarGroup.tsx
-var React224 = __toESM(require("react"));
+var React231 = __toESM(require("react"));
 
 // ../ultimate/src/components/avatar/AvatarGroup.module.css
 var AvatarGroup_default = {};
 
 // ../ultimate/src/components/avatar/AvatarGroup.tsx
-var import_jsx_runtime216 = require("react/jsx-runtime");
-var AvatarGroup = React224.forwardRef(
+var import_jsx_runtime222 = require("react/jsx-runtime");
+var AvatarGroup = React231.forwardRef(
   ({ children, size = "40", max = 5, showStatus = false, className, ...rest }, ref) => {
-    const childrenArray = React224.Children.toArray(children);
+    const childrenArray = React231.Children.toArray(children);
     const hasOverflow = childrenArray.length > max;
     const visibleCount = hasOverflow ? max - 1 : childrenArray.length;
     const visibleChildren = childrenArray.slice(0, visibleCount);
@@ -7474,10 +8076,10 @@ var AvatarGroup = React224.forwardRef(
       AvatarGroup_default[`size${size}`],
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)("div", { ref, className: groupClasses, ...rest, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { ref, className: groupClasses, ...rest, children: [
       visibleChildren.map((child, index) => {
-        if (React224.isValidElement(child)) {
-          return React224.cloneElement(child, {
+        if (React231.isValidElement(child)) {
+          return React231.cloneElement(child, {
             size,
             stroke: true,
             key: index,
@@ -7491,7 +8093,7 @@ var AvatarGroup = React224.forwardRef(
         }
         return child;
       }),
-      hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
+      hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
         Avatar,
         {
           size,
@@ -7507,7 +8109,7 @@ var AvatarGroup = React224.forwardRef(
 AvatarGroup.displayName = "AvatarGroup";
 
 // ../ultimate/src/components/avatar/AvatarTemplate.tsx
-var React225 = __toESM(require("react"));
+var React232 = __toESM(require("react"));
 
 // ../ultimate/src/img/Image=1.png
 var Image_1_default = "./Image=1-LTDZFXMH.png";
@@ -7528,7 +8130,7 @@ var Image_5_default = "./Image=5-7WFTKF52.png";
 var Image_6_default = "./Image=6-U5HZ7K2N.png";
 
 // ../ultimate/src/components/avatar/AvatarTemplate.tsx
-var import_jsx_runtime217 = require("react/jsx-runtime");
+var import_jsx_runtime223 = require("react/jsx-runtime");
 var toImageSrc = (image) => {
   if (typeof image === "string") {
     return image;
@@ -7539,10 +8141,10 @@ var toImageSrc = (image) => {
   return image.default;
 };
 var AVATAR_IMAGES = [Image_1_default, Image_2_default, Image_3_default, Image_4_default, Image_5_default, Image_6_default].map(toImageSrc);
-var AvatarTemplate = React225.forwardRef(
+var AvatarTemplate = React232.forwardRef(
   ({ templateId = 1, ...rest }, ref) => {
     const src = AVATAR_IMAGES[templateId - 1];
-    return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Avatar, { ref, src, className: ["phx-avatar-template", rest.className].filter(Boolean).join(" "), ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Avatar, { ref, src, className: ["phx-avatar-template", rest.className].filter(Boolean).join(" "), ...rest });
   }
 );
 AvatarTemplate.displayName = "AvatarTemplate";
@@ -7551,7 +8153,7 @@ AvatarTemplate.displayName = "AvatarTemplate";
 var Image_default = {};
 
 // ../ultimate/src/components/image/Image.tsx
-var import_jsx_runtime218 = require("react/jsx-runtime");
+var import_jsx_runtime224 = require("react/jsx-runtime");
 var Image = ({
   src,
   alt,
@@ -7561,7 +8163,7 @@ var Image = ({
   style
 }) => {
   const ratioClass = aspectRatio.replace(":", "");
-  return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
     "div",
     {
       className: [
@@ -7571,7 +8173,7 @@ var Image = ({
         className
       ].filter(Boolean).join(" "),
       style,
-      children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
         "img",
         {
           src,
@@ -7585,14 +8187,14 @@ var Image = ({
 };
 
 // ../ultimate/src/components/skeleton/Skeleton.tsx
-var React226 = __toESM(require("react"));
+var React233 = __toESM(require("react"));
 
 // ../ultimate/src/components/skeleton/Skeleton.module.css
 var Skeleton_default = {};
 
 // ../ultimate/src/components/skeleton/Skeleton.tsx
-var import_jsx_runtime219 = require("react/jsx-runtime");
-var Skeleton = React226.forwardRef(
+var import_jsx_runtime225 = require("react/jsx-runtime");
+var Skeleton = React233.forwardRef(
   ({ variant = "text", width, height, rounded, className, style, ...rest }, ref) => {
     const skeletonClasses = [
       "phx-skeleton",
@@ -7606,7 +8208,7 @@ var Skeleton = React226.forwardRef(
       ...height !== void 0 && { height: typeof height === "number" ? `${height}px` : height },
       ...style
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
       "div",
       {
         ref,
@@ -7622,14 +8224,14 @@ var Skeleton = React226.forwardRef(
 Skeleton.displayName = "Skeleton";
 
 // ../ultimate/src/components/chip/Chip.tsx
-var React227 = __toESM(require("react"));
+var React234 = __toESM(require("react"));
 
 // ../ultimate/src/components/chip/Chip.module.css
 var Chip_default = {};
 
 // ../ultimate/src/components/chip/Chip.tsx
-var import_jsx_runtime220 = require("react/jsx-runtime");
-var Chip = React227.forwardRef(
+var import_jsx_runtime226 = require("react/jsx-runtime");
+var Chip = React234.forwardRef(
   ({
     label,
     icon,
@@ -7637,9 +8239,12 @@ var Chip = React227.forwardRef(
     badge,
     variant = "outline",
     size = "large",
+    shape = "pill",
     disabled,
     hasDropdown,
     onClear,
+    onRemove,
+    removeLabel,
     actionIcon,
     onAction,
     actionLabel,
@@ -7655,6 +8260,7 @@ var Chip = React227.forwardRef(
       Chip_default.chipRoot,
       Chip_default[variant],
       Chip_default[size],
+      shape === "rounded" && Chip_default.rounded,
       disabled && Chip_default.disabled,
       isClickable && Chip_default.clickable,
       avatar && Chip_default.hasAvatar,
@@ -7663,28 +8269,30 @@ var Chip = React227.forwardRef(
     ].filter(Boolean).join(" ");
     const badgeColor = variant === "filled" ? "white" : "black";
     const trailingIconSize = size === "large" ? 20 : 16;
+    const renderCloseButton = (onPress, ariaLabel) => /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+      "button",
+      {
+        type: "button",
+        className: Chip_default.chipDelete,
+        onClick: (e) => {
+          e.stopPropagation();
+          if (!disabled) onPress?.(e);
+        },
+        disabled,
+        "aria-label": ariaLabel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(CancelFilled, { size: trailingIconSize })
+      }
+    );
     const renderTrailing = () => {
+      if (onRemove) return renderCloseButton(onRemove, removeLabel ?? `Remove ${label}`);
       const hasAction = Boolean(actionIcon && onAction);
       if (!hasDropdown && !hasAction) return null;
       if (variant === "filled" && hasDropdown && !hasAction) {
-        return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
-          "button",
-          {
-            type: "button",
-            className: Chip_default.chipDelete,
-            onClick: (e) => {
-              e.stopPropagation();
-              if (!disabled && onClear) onClear(e);
-            },
-            disabled,
-            "aria-label": `Clear ${label}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(CancelFilled, { size: trailingIconSize })
-          }
-        );
+        return renderCloseButton(onClear, `Clear ${label}`);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("span", { className: Chip_default.chipTrailing, children: [
-        hasDropdown && /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("span", { className: Chip_default.chipTrailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(ChevronDownSmallOutline, { size: trailingIconSize }) }),
-        hasAction && /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("span", { className: Chip_default.chipTrailing, children: [
+        hasDropdown && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("span", { className: Chip_default.chipTrailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(ChevronDownSmallOutline, { size: trailingIconSize }) }),
+        hasAction && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
           "button",
           {
             type: "button",
@@ -7700,7 +8308,7 @@ var Chip = React227.forwardRef(
         )
       ] });
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
       "div",
       {
         ref,
@@ -7709,15 +8317,22 @@ var Chip = React227.forwardRef(
         role: isClickable ? "button" : void 0,
         tabIndex: isClickable ? 0 : void 0,
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("div", { className: Chip_default.chipContainer, children: [
-          avatar && /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { className: Chip_default.chipAvatar, children: React227.isValidElement(avatar) ? React227.cloneElement(avatar, {
+        onKeyDown: (event) => {
+          rest.onKeyDown?.(event);
+          if (!event.defaultPrevented && event.target === event.currentTarget && isClickable && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            event.currentTarget.click();
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { className: Chip_default.chipContainer, children: [
+          avatar && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { className: Chip_default.chipAvatar, children: React234.isValidElement(avatar) ? React234.cloneElement(avatar, {
             size: size === "large" ? "32" : "24",
             stroke: variant === "filled" || avatar.props.stroke
           }) : avatar }),
-          !avatar && icon && /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("span", { className: Chip_default.chipIcon, children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)("span", { className: Chip_default.chipContent, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("span", { className: Chip_default.chipLabel, children: label }),
-            shouldShowBadge && /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+          !avatar && icon && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("span", { className: Chip_default.chipIcon, children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("span", { className: Chip_default.chipContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("span", { className: Chip_default.chipLabel, children: label }),
+            shouldShowBadge && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
               Badge,
               {
                 count: typeof badge === "number" ? badge : void 0,
@@ -7737,16 +8352,16 @@ var Chip = React227.forwardRef(
 Chip.displayName = "Chip";
 
 // ../ultimate/src/components/chip-bar/ChipBar.tsx
-var React228 = __toESM(require("react"));
+var React235 = __toESM(require("react"));
 
 // ../ultimate/src/components/chip-bar/ChipBar.module.css
 var ChipBar_default = {};
 
 // ../ultimate/src/components/chip-bar/ChipBar.tsx
-var import_jsx_runtime221 = require("react/jsx-runtime");
+var import_jsx_runtime227 = require("react/jsx-runtime");
 var OVERFLOW_BUTTON_SIZE = 32;
 var MASK_FADE_SIZE = 44;
-var ChipBar = React228.forwardRef(
+var ChipBar = React235.forwardRef(
   ({
     leading,
     children,
@@ -7758,13 +8373,13 @@ var ChipBar = React228.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [showLeftGradient, setShowLeftGradient] = React228.useState(false);
-    const [showRightGradient, setShowRightGradient] = React228.useState(false);
-    const [internalIsStuck, setInternalIsStuck] = React228.useState(false);
+    const [showLeftGradient, setShowLeftGradient] = React235.useState(false);
+    const [showRightGradient, setShowRightGradient] = React235.useState(false);
+    const [internalIsStuck, setInternalIsStuck] = React235.useState(false);
     const isStuck = stuck !== void 0 ? stuck : internalIsStuck;
-    const listRef = React228.useRef(null);
-    const containerRef = React228.useRef(null);
-    const updateScrollGradients = React228.useCallback(() => {
+    const listRef = React235.useRef(null);
+    const containerRef = React235.useRef(null);
+    const updateScrollGradients = React235.useCallback(() => {
       const el = listRef.current;
       if (el) {
         const { scrollLeft, scrollWidth, clientWidth } = el;
@@ -7772,7 +8387,7 @@ var ChipBar = React228.forwardRef(
         setShowRightGradient(Math.ceil(scrollLeft + clientWidth) < scrollWidth);
       }
     }, []);
-    React228.useEffect(() => {
+    React235.useEffect(() => {
       const el = listRef.current;
       if (el) {
         updateScrollGradients();
@@ -7799,7 +8414,7 @@ var ChipBar = React228.forwardRef(
         });
       }
     };
-    React228.useEffect(() => {
+    React235.useEffect(() => {
       if (!sticky) return;
       const container = containerRef.current;
       if (!container) return;
@@ -7831,7 +8446,7 @@ var ChipBar = React228.forwardRef(
         window.removeEventListener("resize", checkStuck);
       };
     }, [sticky]);
-    const setRefs = React228.useCallback((node) => {
+    const setRefs = React235.useCallback((node) => {
       containerRef.current = node;
       if (typeof ref === "function") {
         ref(node);
@@ -7845,7 +8460,7 @@ var ChipBar = React228.forwardRef(
       "--chip-bar-left-button-offset": showLeftGradient ? `${OVERFLOW_BUTTON_SIZE}px` : "0px",
       "--chip-bar-right-button-offset": showRightGradient ? `${OVERFLOW_BUTTON_SIZE}px` : "0px"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(
       "div",
       {
         ref: setRefs,
@@ -7864,14 +8479,14 @@ var ChipBar = React228.forwardRef(
         },
         ...rest,
         children: [
-          leading && /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("div", { className: ChipBar_default.chipBarLeading, children: [
-            React228.isValidElement(leading) ? React228.cloneElement(leading, {
+          leading && /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)("div", { className: ChipBar_default.chipBarLeading, children: [
+            React235.isValidElement(leading) ? React235.cloneElement(leading, {
               size: size === "large" ? "large" : "medium"
             }) : leading,
-            showDivider && /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { className: ChipBar_default.chipBarDivider })
+            showDivider && /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { className: ChipBar_default.chipBarDivider })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("div", { className: ChipBar_default.chipBarScrollOuter, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)("div", { className: ChipBar_default.chipBarScrollOuter, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
               "div",
               {
                 className: [
@@ -7880,7 +8495,7 @@ var ChipBar = React228.forwardRef(
                   showLeftGradient && ChipBar_default.chipBarGradientVisible,
                   "phx-nav-slot-left"
                 ].filter(Boolean).join(" "),
-                children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
                   IconButton,
                   {
                     type: "button",
@@ -7890,12 +8505,12 @@ var ChipBar = React228.forwardRef(
                     className: ChipBar_default.chipBarNavButton,
                     onClick: () => handleScrollAction("left"),
                     "aria-label": "Scroll left",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(ChevronLeftOutline, {})
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(ChevronLeftOutline, {})
                   }
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { className: ChipBar_default.chipBarScrollArea, style: chipBarMaskStyle, children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { className: ChipBar_default.chipBarMaskWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { className: ChipBar_default.chipBarScrollArea, style: chipBarMaskStyle, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { className: ChipBar_default.chipBarMaskWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
               "div",
               {
                 ref: listRef,
@@ -7905,9 +8520,9 @@ var ChipBar = React228.forwardRef(
                   "scrollbarHidden",
                   "phx-chip-bar-list"
                 ].filter(Boolean).join(" "),
-                children: React228.Children.map(children, (child) => {
-                  if (React228.isValidElement(child)) {
-                    return React228.cloneElement(child, {
+                children: React235.Children.map(children, (child) => {
+                  if (React235.isValidElement(child)) {
+                    return React235.cloneElement(child, {
                       size: size === "large" ? "large" : "medium"
                     });
                   }
@@ -7915,7 +8530,7 @@ var ChipBar = React228.forwardRef(
                 })
               }
             ) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
               "div",
               {
                 className: [
@@ -7924,7 +8539,7 @@ var ChipBar = React228.forwardRef(
                   showRightGradient && ChipBar_default.chipBarGradientVisible,
                   "phx-nav-slot-right"
                 ].filter(Boolean).join(" "),
-                children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
                   IconButton,
                   {
                     type: "button",
@@ -7934,7 +8549,7 @@ var ChipBar = React228.forwardRef(
                     className: ChipBar_default.chipBarNavButton,
                     onClick: () => handleScrollAction("right"),
                     "aria-label": "Scroll right",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(ChevronRightOutline, {})
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(ChevronRightOutline, {})
                   }
                 )
               }
@@ -7948,12 +8563,12 @@ var ChipBar = React228.forwardRef(
 ChipBar.displayName = "ChipBar";
 
 // ../ultimate/src/components/visually-hidden/VisuallyHidden.tsx
-var React229 = __toESM(require("react"));
-var import_jsx_runtime222 = require("react/jsx-runtime");
-var VisuallyHidden = React229.forwardRef(
+var React236 = __toESM(require("react"));
+var import_jsx_runtime228 = require("react/jsx-runtime");
+var VisuallyHidden = React236.forwardRef(
   ({ as, children, className, style, ...props }, ref) => {
     const Component = as || "span";
-    return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
       Component,
       {
         ref,
@@ -7980,21 +8595,923 @@ var VisuallyHidden = React229.forwardRef(
 VisuallyHidden.displayName = "VisuallyHidden";
 
 // ../ultimate/src/components/layout-context/LayoutContext.tsx
-var React230 = __toESM(require("react"));
-var import_jsx_runtime223 = require("react/jsx-runtime");
-var LayoutContext = React230.createContext(null);
+var React237 = __toESM(require("react"));
+var import_jsx_runtime229 = require("react/jsx-runtime");
+var LayoutContext = React237.createContext(null);
 var LayoutProvider = ({ children }) => {
-  const [drawerCount, setDrawerCount] = React230.useState(0);
-  const value = React230.useMemo(() => ({
+  const [drawerCount, setDrawerCount] = React237.useState(0);
+  const registerDrawer = React237.useCallback(() => setDrawerCount((count) => count + 1), []);
+  const unregisterDrawer = React237.useCallback(() => setDrawerCount((count) => Math.max(0, count - 1)), []);
+  const value = React237.useMemo(() => ({
     hasDrawer: drawerCount > 0,
-    registerDrawer: () => setDrawerCount((c) => c + 1),
-    unregisterDrawer: () => setDrawerCount((c) => Math.max(0, c - 1))
-  }), [drawerCount]);
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(LayoutContext.Provider, { value, children });
+    registerDrawer,
+    unregisterDrawer
+  }), [drawerCount, registerDrawer, unregisterDrawer]);
+  return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(LayoutContext.Provider, { value, children });
 };
 var useLayout = () => {
-  return React230.useContext(LayoutContext);
+  return React237.useContext(LayoutContext);
+};
+
+// ../ultimate/src/components/number-field/NumberField.tsx
+var React238 = __toESM(require("react"));
+var import_jsx_runtime230 = require("react/jsx-runtime");
+var parseNumber = (text) => {
+  const normalized = text.trim().replace(",", ".");
+  if (normalized === "") return null;
+  if (!/^-?\d*\.?\d*$/.test(normalized) || !/\d/.test(normalized)) return void 0;
+  return Number(normalized);
+};
+function NumberField({
+  label,
+  size = "large",
+  inputWidth = 64,
+  value,
+  defaultValue = null,
+  onChange,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  error,
+  description,
+  disabled,
+  readOnly,
+  name,
+  decreaseLabel = `Decrease ${label}`,
+  increaseLabel = `Increase ${label}`,
+  ...props
+}) {
+  const [current, setCurrent, reset] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const ref = React238.useRef(null);
+  const [draft, setDraft] = React238.useState(null);
+  const display = draft ?? (current == null ? "" : String(current));
+  const resetValue = String((value !== void 0 ? current : defaultValue) ?? "");
+  useNativeFieldReset(
+    ref,
+    () => {
+      reset();
+      setDraft(null);
+    },
+    resetValue,
+    props.form
+  );
+  const bounded = (number) => Math.min(Math.max(min, max), Math.max(min, number));
+  const stepSize = Math.abs(step || 1);
+  const editable = !disabled && !readOnly;
+  const commit = (next) => {
+    setDraft(null);
+    if (next !== current) setCurrent(next);
+  };
+  const increment = (direction) => {
+    if (!editable) return;
+    const base = parseNumber(display) ?? current;
+    commit(
+      bounded(
+        Number(
+          ((base ?? (Number.isFinite(min) ? min : 0)) + direction * stepSize).toFixed(10)
+        )
+      )
+    );
+  };
+  const generatedId = React238.useId();
+  const inputId = props.id ?? generatedId;
+  const descriptionId = description ? `${inputId}-description` : void 0;
+  const errorId = error ? `${inputId}-error` : void 0;
+  const buttonSize = size === "large" ? "medium" : "small";
+  const allowNegative = min < 0;
+  const integerOnly = Number.isInteger(stepSize) && (!Number.isFinite(min) || Number.isInteger(min));
+  return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Box, { w: "fit-content", maxW: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(VStack, { gap: "5xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(Text, { as: "label", variant: "title-md", htmlFor: inputId, children: [
+      label,
+      props.required && /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("span", { "aria-hidden": "true", children: " *" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(HStack, { gap: "2xs", align: "center", wrap: false, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+        IconButton,
+        {
+          variant: "secondary",
+          size: buttonSize,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(IndeterminateSmallOutline, {}),
+          "aria-label": decreaseLabel,
+          "aria-controls": inputId,
+          disabled: disabled || readOnly || current != null && current <= min,
+          onClick: () => increment(-1)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+        TextField,
+        {
+          ...props,
+          id: inputId,
+          showClear: false,
+          size,
+          width: inputWidth,
+          fullWidth: false,
+          ref,
+          type: "text",
+          role: "spinbutton",
+          inputMode: integerOnly && !allowNegative ? "numeric" : "decimal",
+          autoComplete: "off",
+          "aria-valuenow": current ?? void 0,
+          "aria-valuemin": Number.isFinite(min) ? min : void 0,
+          "aria-valuemax": Number.isFinite(max) ? max : void 0,
+          disabled,
+          error: !!error,
+          "aria-describedby": mergeAriaIds(props["aria-describedby"], descriptionId, errorId),
+          inputStyle: {
+            textAlign: "center",
+            fontVariantNumeric: "tabular-nums"
+          },
+          value: display,
+          readOnly,
+          onChange: (next) => {
+            const text = next.trim();
+            if (!/^-?\d*[.,]?\d*$/.test(text)) return;
+            setDraft(text);
+            const parsed = parseNumber(text);
+            if (parsed !== void 0 && parsed !== current) setCurrent(parsed);
+          },
+          onKeyDown: (event) => {
+            props.onKeyDown?.(event);
+            if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+            let direction = 0;
+            if (event.key === "ArrowUp") direction = 1;
+            else if (event.key === "ArrowDown") direction = -1;
+            else if (event.key === "PageUp") direction = 10;
+            else if (event.key === "PageDown") direction = -10;
+            if (direction) {
+              event.preventDefault();
+              increment(direction);
+            } else if (event.key === "Home" && Number.isFinite(min)) {
+              event.preventDefault();
+              if (editable) commit(min);
+            } else if (event.key === "End" && Number.isFinite(max)) {
+              event.preventDefault();
+              if (editable) commit(max);
+            }
+          },
+          onBlur: (event) => {
+            if (editable) {
+              const parsed = parseNumber(display);
+              commit(parsed === void 0 ? current ?? null : parsed === null ? null : bounded(parsed));
+            }
+            props.onBlur?.(event);
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+        IconButton,
+        {
+          variant: "secondary",
+          size: buttonSize,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(AddOutline, {}),
+          "aria-label": increaseLabel,
+          "aria-controls": inputId,
+          disabled: disabled || readOnly || current != null && current >= max,
+          onClick: () => increment(1)
+        }
+      )
+    ] }),
+    name && /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+      "input",
+      {
+        type: "hidden",
+        name,
+        form: props.form,
+        value: current == null ? "" : String(current),
+        disabled
+      }
+    ),
+    description && /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Text, { as: "div", variant: "body-md", color: "secondary", id: descriptionId, children: description }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Text, { as: "div", variant: "body-md", color: "red", id: errorId, children: error })
+  ] }) });
+}
+
+// ../ultimate/src/components/rating/Rating.tsx
+var React240 = __toESM(require("react"));
+
+// ../ultimate/src/components/star/Star.tsx
+var React239 = __toESM(require("react"));
+
+// ../ultimate/src/components/star/Star.module.css
+var Star_default = {};
+
+// ../ultimate/src/components/star/Star.tsx
+var import_jsx_runtime231 = require("react/jsx-runtime");
+var Star = React239.forwardRef(
+  ({
+    className,
+    checked = false,
+    size = "medium",
+    variant = "default",
+    disabled,
+    onChange,
+    onClick,
+    ...rest
+  }, ref) => {
+    const [pressed, setPressed] = React239.useState(false);
+    const timeoutRef = React239.useRef(null);
+    const iconSize = size === "small" ? 20 : 24;
+    const handleClick = (e) => {
+      if (disabled) return;
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      setPressed(true);
+      timeoutRef.current = setTimeout(() => setPressed(false), 350);
+      if (onChange) {
+        onChange(!checked);
+      }
+      if (onClick) {
+        onClick(e);
+      }
+    };
+    React239.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      };
+    }, []);
+    const starClasses = [
+      "phx-star",
+      Star_default.starRoot,
+      Star_default[`starSize${size.charAt(0).toUpperCase() + size.slice(1)}`],
+      Star_default[`starVariant${variant.charAt(0).toUpperCase() + variant.slice(1)}`],
+      checked && Star_default.starStateChecked,
+      pressed && Star_default.starStatePressed,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: starClasses,
+        disabled,
+        onClick: handleClick,
+        "aria-pressed": checked,
+        "aria-label": "Favorite",
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)("span", { className: Star_default.starIconWrapper, children: checked ? /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(StarFilled, { size: iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(StarOutline, { size: iconSize }) })
+      }
+    );
+  }
+);
+Star.displayName = "Star";
+
+// ../ultimate/src/components/rating/Rating.tsx
+var import_jsx_runtime232 = require("react/jsx-runtime");
+function Rating({
+  label,
+  value,
+  defaultValue = 0,
+  max = 5,
+  onChange,
+  disabled,
+  readOnly,
+  name,
+  form,
+  clearable = false,
+  clearText = "Clear",
+  clearLabel = `Clear ${label}`,
+  getStarLabel = (star, total) => `${star} of ${total} stars`
+}) {
+  const count = Math.max(1, Math.min(100, Math.floor(max) || 5));
+  const [current = 0, setCurrent, reset] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const hidden = React240.useRef(null);
+  const normalize = (rating) => Number.isFinite(rating) ? Math.max(0, Math.min(count, Math.round(rating))) : 0;
+  const selected = normalize(current);
+  useNativeFieldReset(
+    hidden,
+    reset,
+    String(value !== void 0 ? selected : normalize(defaultValue)),
+    form
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(HStack, { gap: "2xs", align: "center", wrap: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
+      HStack,
+      {
+        gap: "none",
+        align: "center",
+        role: "radiogroup",
+        "aria-label": label,
+        "aria-readonly": readOnly || void 0,
+        onKeyDown: (event) => {
+          if (disabled || readOnly || event.nativeEvent.isComposing) return;
+          const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+          const forward = rtl ? "ArrowLeft" : "ArrowRight";
+          const backward = rtl ? "ArrowRight" : "ArrowLeft";
+          let next;
+          if (event.key === forward || event.key === "ArrowUp")
+            next = selected >= count ? 1 : selected + 1;
+          else if (event.key === backward || event.key === "ArrowDown")
+            next = selected <= 1 ? count : selected - 1;
+          else if (event.key === "Home") next = 1;
+          else if (event.key === "End") next = count;
+          else return;
+          event.preventDefault();
+          setCurrent(next);
+          event.currentTarget.querySelectorAll('[role="radio"]')[next - 1]?.focus();
+        },
+        children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
+          Star,
+          {
+            checked: index < selected,
+            "aria-pressed": void 0,
+            type: "button",
+            role: "radio",
+            "aria-label": getStarLabel(index + 1, count),
+            "aria-checked": selected === index + 1,
+            disabled,
+            tabIndex: selected === index + 1 || !selected && index === 0 ? 0 : -1,
+            onClick: () => {
+              if (!disabled && !readOnly) setCurrent(index + 1);
+            }
+          },
+          index
+        ))
+      }
+    ),
+    clearable && /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
+      Button,
+      {
+        variant: "secondary",
+        size: "small",
+        type: "button",
+        "aria-label": clearLabel,
+        disabled: disabled || readOnly || !selected,
+        onClick: () => setCurrent(0),
+        children: clearText
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
+      "input",
+      {
+        ref: hidden,
+        type: "hidden",
+        name,
+        form,
+        value: selected,
+        disabled
+      }
+    )
+  ] });
+}
+
+// ../ultimate/src/components/otp/OTP.tsx
+var React241 = __toESM(require("react"));
+var import_react_dom3 = require("react-dom");
+
+// ../ultimate/src/components/otp/OTP.module.css
+var OTP_default = {};
+
+// ../ultimate/src/components/otp/OTP.tsx
+var import_jsx_runtime233 = require("react/jsx-runtime");
+function OTP({
+  label,
+  length = 6,
+  groupSize,
+  masked = false,
+  hideLabel = false,
+  dotFields = false,
+  size = "large",
+  value,
+  defaultValue = "",
+  onChange,
+  onComplete,
+  disabled,
+  readOnly,
+  required,
+  name,
+  form,
+  helperText,
+  error,
+  getCellLabel = (name2, position, total) => `${name2}, digit ${position} of ${total}`,
+  sequential = false,
+  autoFocus = false
+}) {
+  const count = Number.isFinite(length) ? Math.max(1, Math.min(32, Math.floor(length))) : 6;
+  const normalize = (text) => text.replace(/\D/g, "").slice(0, count);
+  const split = (text) => Array.from({ length: count }, (_, index) => normalize(text)[index] ?? "");
+  const [code = "", setCode, reset] = useControllableState({
+    value,
+    defaultValue: normalize(defaultValue),
+    onChange
+  });
+  const [local, setLocal] = React241.useState(() => split(value ?? defaultValue));
+  const pending = React241.useRef(null);
+  const digits = value === void 0 ? Array.from({ length: count }, (_, index) => local[index] ?? "") : pending.current?.code === normalize(code) ? Array.from(
+    { length: count },
+    (_, index) => pending.current.digits[index] ?? ""
+  ) : split(code);
+  const currentDigits = React241.useRef(digits);
+  currentDigits.current = digits;
+  const composing = React241.useRef(null);
+  const inputs = React241.useRef([]);
+  const first = React241.useRef(null);
+  const previousReadOnly = React241.useRef(readOnly);
+  React241.useEffect(() => {
+    if (readOnly && !previousReadOnly.current) {
+      const active = inputs.current.find((input) => input === document.activeElement);
+      active?.blur();
+    }
+    previousReadOnly.current = readOnly;
+  }, [readOnly]);
+  const id = React241.useId();
+  const supportingText = error || helperText;
+  const supportingId = error ? `${id}-error` : helperText ? `${id}-helper` : void 0;
+  const focus = (index) => inputs.current[index]?.focus({ preventScroll: true });
+  const nextCell = (from) => {
+    const empty = from.findIndex((digit) => !digit);
+    return empty === -1 ? count - 1 : empty;
+  };
+  const commit = (next) => {
+    const nextCode = next.join("");
+    pending.current = { code: nextCode, digits: next };
+    currentDigits.current = next;
+    setLocal(next);
+    setCode(nextCode);
+    if (next.every(Boolean) && nextCode !== normalize(code))
+      onComplete?.(nextCode);
+  };
+  const enter = (cell, raw) => {
+    if (disabled || readOnly) return;
+    if (sequential && raw && currentDigits.current.every(Boolean)) return;
+    const index = sequential ? nextCell(currentDigits.current) : cell;
+    const text = normalize(raw);
+    if (raw && !text) return;
+    const start = text.length === count ? 0 : index;
+    const next = [...currentDigits.current];
+    if (!text) next[index] = "";
+    else
+      [...text].forEach((digit, offset) => {
+        if (start + offset < count) next[start + offset] = digit;
+      });
+    (0, import_react_dom3.flushSync)(() => commit(next));
+    const nextIndex = sequential ? nextCell(next) : Math.min(count - 1, start + text.length);
+    if (text && !inputs.current[nextIndex]?.readOnly) focus(nextIndex);
+  };
+  React241.useEffect(() => {
+    if (autoFocus && !disabled && !readOnly) focus(sequential ? nextCell(currentDigits.current) : 0);
+  }, []);
+  React241.useEffect(() => {
+    const cleanups = inputs.current.slice(0, count).map((input, index) => {
+      if (!input) return () => {
+      };
+      const beforeInput = (event) => {
+        if (disabled || readOnly || !event.cancelable || !event.data) return;
+        if (!event.inputType.startsWith("insert") || !/^[0-9]+$/.test(event.data)) return;
+        event.preventDefault();
+        composing.current = null;
+        enter(index, event.data);
+      };
+      input.addEventListener("beforeinput", beforeInput);
+      return () => input.removeEventListener("beforeinput", beforeInput);
+    });
+    return () => cleanups.forEach((cleanup) => cleanup());
+  });
+  const resetCode = value === void 0 ? normalize(defaultValue) : normalize(code);
+  useNativeFieldReset(
+    first,
+    () => {
+      reset();
+      const next = split(resetCode);
+      pending.current = { code: resetCode, digits: next };
+      setLocal(next);
+      composing.current = null;
+      inputs.current.forEach((input, index) => {
+        if (input) input.value = next[index] ?? "";
+      });
+    },
+    resetCode[0] ?? "",
+    form
+  );
+  const columns = Math.min(count, 6);
+  const cellWidth = dotFields ? 16 : size === "large" ? 44 : size === "medium" ? 36 : 28;
+  const grouping = groupSize !== void 0 && Number.isFinite(groupSize) && groupSize >= 1 ? Math.floor(groupSize) : 0;
+  const separates = (index) => grouping > 0 && index > 0 && index % grouping === 0 && index % columns !== 0;
+  const tracks = Array.from(
+    { length: columns },
+    (_, index) => `${separates(index) ? "var(--dimensions-12) " : ""}minmax(0, 1fr)`
+  ).join(" ");
+  const separatorCount = Array.from({ length: columns }, (_, index) => separates(index)).filter(Boolean).length;
+  return /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(VStack, { gap: "5xs", align: "start", maxW: "100%", children: [
+    !hideLabel && /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(Text, { as: "span", id: `${id}-label`, variant: size === "large" ? "title-md" : size === "medium" ? "title-sm" : "label-md", children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("span", { "aria-hidden": "true", children: " *" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+      Grid,
+      {
+        role: "group",
+        dir: "ltr",
+        "aria-labelledby": hideLabel ? void 0 : `${id}-label`,
+        "aria-label": hideLabel ? label : void 0,
+        "aria-describedby": supportingId,
+        templateColumns: tracks,
+        gap: dotFields ? "md" : "4xs",
+        maxW: "100%",
+        w: `calc(${columns} * ${cellWidth}px + ${columns - 1 + separatorCount} * var(${dotFields ? "--space-md" : "--space-4xs"}) + ${separatorCount} * var(--dimensions-12))`,
+        children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(React241.Fragment, { children: [
+          separates(index % columns) && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Text, { as: "span", "aria-hidden": "true", className: OTP_default.separator, children: "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(Text, { as: "span", className: `${OTP_default.cellSlot} ${OTP_default[size]} ${dotFields ? OTP_default.dotField : ""}`, variant: size === "large" ? "headline-sm" : size === "medium" ? "title-lg" : "title-md", weight: "medium", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+              "input",
+              {
+                id: `${id}-${index}`,
+                className: `${OTP_default.cell} ${masked ? OTP_default.masked : ""} ${dotFields ? OTP_default.dotFieldInput : ""}`,
+                "data-filled": dotFields ? !!digits[index] : void 0,
+                ref: (node) => {
+                  inputs.current[index] = node;
+                  if (index === 0) first.current = node;
+                },
+                "aria-label": getCellLabel(label, index + 1, count),
+                "aria-describedby": supportingId,
+                "aria-invalid": error ? true : void 0,
+                type: masked ? "password" : "text",
+                inputMode: "numeric",
+                autoComplete: masked ? "off" : index === 0 ? "one-time-code" : "off",
+                pattern: "[0-9]",
+                maxLength: 1,
+                required: required || digits.some(Boolean),
+                disabled,
+                readOnly,
+                form,
+                value: digits[index] ?? "",
+                tabIndex: sequential && index !== nextCell(digits) ? -1 : void 0,
+                onMouseDown: (event) => {
+                  if (!sequential || disabled || readOnly) return;
+                  event.preventDefault();
+                  focus(nextCell(currentDigits.current));
+                },
+                onFocus: (event) => {
+                  const target = nextCell(currentDigits.current);
+                  if (sequential && index !== target && !readOnly) {
+                    focus(target);
+                    return;
+                  }
+                  event.currentTarget.setSelectionRange(0, event.currentTarget.value.length);
+                },
+                onCopy: (event) => {
+                  if (masked) {
+                    event.preventDefault();
+                    return;
+                  }
+                  if (!readOnly) return;
+                  event.preventDefault();
+                  event.clipboardData.setData("text/plain", normalize(code));
+                },
+                onChange: () => {
+                },
+                onInput: (event) => {
+                  if (disabled || readOnly) return;
+                  const next = event.currentTarget.value;
+                  event.currentTarget.value = normalize(next).slice(0, 1) || (digits[index] ?? "");
+                  if (composing.current === index && next && !/^[0-9]+$/.test(next)) return;
+                  composing.current = null;
+                  enter(index, next);
+                },
+                onPaste: (event) => {
+                  event.preventDefault();
+                  enter(index, event.clipboardData.getData("text"));
+                },
+                onCompositionStart: () => {
+                  if (disabled || readOnly) return;
+                  composing.current = index;
+                },
+                onCompositionEnd: (event) => {
+                  if (disabled || readOnly) return;
+                  const text = event.data || event.currentTarget.value;
+                  event.currentTarget.value = currentDigits.current[index] ?? "";
+                  if (composing.current !== index) return;
+                  composing.current = null;
+                  enter(index, text);
+                },
+                onKeyDown: (event) => {
+                  if (event.nativeEvent.isComposing || composing.current !== null || disabled)
+                    return;
+                  if (event.key === "Backspace" || event.key === "Delete") {
+                    event.preventDefault();
+                    if (readOnly) return;
+                    if (sequential) {
+                      const next2 = [...currentDigits.current];
+                      const last = next2.map(Boolean).lastIndexOf(true);
+                      if (last >= 0) next2[last] = "";
+                      (0, import_react_dom3.flushSync)(() => commit(next2));
+                      focus(nextCell(next2));
+                      return;
+                    }
+                    const target = event.key === "Backspace" && !digits[index] ? Math.max(0, index - 1) : index;
+                    const next = [...currentDigits.current];
+                    next[target] = "";
+                    commit(next);
+                    focus(target);
+                  } else if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
+                    event.preventDefault();
+                    if (sequential) return;
+                    focus(
+                      event.key === "Home" ? 0 : event.key === "End" ? count - 1 : Math.max(
+                        0,
+                        Math.min(
+                          count - 1,
+                          index + (event.key === "ArrowRight" ? 1 : -1)
+                        )
+                      )
+                    );
+                  }
+                }
+              }
+            ),
+            masked && !dotFields && digits[index] && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("span", { className: OTP_default.dot, "aria-hidden": "true" })
+          ] })
+        ] }, index))
+      }
+    ),
+    name && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+      "input",
+      {
+        type: "hidden",
+        name,
+        form,
+        value: normalize(code),
+        disabled
+      }
+    ),
+    supportingText && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Text, { as: "div", id: supportingId, variant: "body-md", color: error ? "red" : "secondary", role: error ? "alert" : void 0, children: supportingText })
+  ] });
+}
+
+// ../ultimate/src/components/pin/PIN.tsx
+var import_jsx_runtime234 = require("react/jsx-runtime");
+function PIN({ length = 4, "aria-label": accessibleLabel = "PIN", autoFocus = true, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(OTP, { ...props, label: accessibleLabel, length, size: "large", masked: true, hideLabel: true, dotFields: true, readOnly: false, sequential: true, autoFocus });
+}
+
+// ../ultimate/src/components/empty/Empty.tsx
+var React242 = __toESM(require("react"));
+var import_jsx_runtime235 = require("react/jsx-runtime");
+function Empty({
+  title = "No results",
+  description,
+  icon,
+  action
+}) {
+  const titleId = React242.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(
+    VStack,
+    {
+      as: "section",
+      gap: "sm",
+      p: "xl",
+      align: "center",
+      textAlign: "center",
+      "aria-labelledby": titleId,
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime235.jsx)("span", { "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(VStack, { gap: "4xs", align: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(Heading, { as: "h3", size: "title-lg", id: titleId, children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(Text, { as: "div", color: "secondary", children: description })
+        ] }),
+        action
+      ]
+    }
+  );
+}
+
+// ../ultimate/src/components/result/Result.tsx
+var React243 = __toESM(require("react"));
+var import_illustrations = require("@photonix/illustrations");
+var import_jsx_runtime236 = require("react/jsx-runtime");
+var STATUS_ILLUSTRATION = {
+  success: import_illustrations.CheckCircle,
+  error: import_illustrations.Cancel,
+  warning: import_illustrations.Warning,
+  info: import_illustrations.Information
 };
+function Result({ status, title, description, action }) {
+  const titleId = React243.useId();
+  const StatusIllustration = STATUS_ILLUSTRATION[status];
+  return /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(
+    VStack,
+    {
+      as: "section",
+      gap: "sm",
+      p: "xl",
+      align: "center",
+      textAlign: "center",
+      "aria-labelledby": titleId,
+      "data-status": status,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime236.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(StatusIllustration, { tone: "accent" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(
+          VStack,
+          {
+            gap: "4xs",
+            align: "center",
+            role: status === "error" ? "alert" : "status",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Heading, { as: "h3", size: "title-lg", id: titleId, children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Text, { as: "div", color: "secondary", children: description })
+            ]
+          }
+        ),
+        action
+      ]
+    }
+  );
+}
+
+// ../ultimate/src/components/data-list/DataList.tsx
+var import_jsx_runtime237 = require("react/jsx-runtime");
+var DOTS = [0, 1, 2, 3, 4, 5];
+function Action({ children, slot }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
+    Box,
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      h: slot ? "var(--body-lg-line-height)" : void 0,
+      w: slot ? "var(--dimensions-20)" : void 0,
+      children
+    }
+  );
+}
+function DataList({
+  items,
+  label = "Details",
+  layout,
+  labelSize,
+  orientation = "horizontal"
+}) {
+  const resolvedLayout = layout ?? (orientation === "vertical" ? "stack" : "inline");
+  const resolvedLabelSize = labelSize ?? (resolvedLayout === "stack" ? "sm" : "lg");
+  return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(VStack, { as: "dl", "aria-label": label, gap: "md", m: "none", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
+    DataListRow,
+    {
+      item,
+      layout: resolvedLayout,
+      labelSize: resolvedLabelSize
+    },
+    item.id
+  )) });
+}
+function DataListRow({
+  item,
+  layout,
+  labelSize
+}) {
+  const variant = item.variant ?? "normal";
+  const isStack = layout === "stack";
+  const isInline = layout === "inline";
+  const isTotal = variant === "total";
+  const isHero = isStack && variant === "hero";
+  const isComplex = isStack && variant === "complex";
+  const isFlexible = !isStack && variant === "flexible";
+  const emphasizeValue = variant === "emphasize" || isTotal || isStack && variant === "normal";
+  const labelEmphasized = item.labelEmphasized ?? isTotal;
+  const labelVariant = labelSize === "lg" ? "title-md" : "title-sm";
+  const labelWeight = labelEmphasized ? "medium" : "regular";
+  const badgeBelow = item.badgePlacement === "below";
+  const description = isHero ? void 0 : item.description;
+  const term = /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(Box, { as: "dt", display: "flex", alignItems: "baseline", gap: "4xs", minW: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(Box, { display: "flex", alignItems: "center", gap: "4xs", flex: "1 1 0", minW: 0, children: [
+      item.labelIcon && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Box, { display: "flex", flexShrink: 0, children: item.labelIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
+        Text,
+        {
+          as: "div",
+          variant: labelVariant,
+          color: item.labelLead || !labelEmphasized ? "secondary" : "primary",
+          weight: labelWeight,
+          children: [
+            item.labelLead && /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(Text, { as: "span", variant: labelVariant, color: "primary", weight: labelWeight, children: [
+              item.labelLead,
+              " "
+            ] }),
+            item.label
+          ]
+        }
+      )
+    ] }),
+    item.labelTrailing && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Box, { flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Text, { as: "div", variant: "body-md", color: "secondary", align: "right", children: item.labelTrailing }) })
+  ] });
+  const figure = isHero && item.masked ? /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
+    Box,
+    {
+      display: "flex",
+      alignItems: "center",
+      gap: "2xs",
+      h: "var(--headline-lg-line-height)",
+      role: "img",
+      "aria-label": "Hidden",
+      children: DOTS.map((dot) => /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
+        Box,
+        {
+          w: "10px",
+          h: "10px",
+          borderRadius: "full",
+          flexShrink: 0,
+          style: { backgroundColor: "var(--foreground-neutral-primary)" }
+        },
+        dot
+      ))
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
+    Text,
+    {
+      as: "div",
+      variant: isHero ? "headline-lg" : "body-lg",
+      weight: emphasizeValue && !isHero ? "medium" : void 0,
+      align: isInline ? "right" : void 0,
+      children: item.value
+    }
+  );
+  const valueRow = isComplex ? /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(Box, { display: "flex", alignItems: "center", gap: "xs", w: "100%", minW: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Box, { flex: "1 1 0", minW: 0, children: item.value }),
+    item.action && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Action, { slot: false, children: item.action })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
+    Box,
+    {
+      display: "flex",
+      alignItems: "center",
+      gap: "4xs",
+      minW: 0,
+      justifyContent: isInline ? "end" : void 0,
+      children: [
+        item.icon && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Box, { display: "flex", flexShrink: 0, children: item.icon }),
+        item.valuePrefix && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Box, { alignSelf: "baseline", flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Text, { as: "span", variant: isHero ? "headline-lg" : "body-lg", color: "secondary", children: item.valuePrefix }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Box, { alignSelf: "baseline", minW: 0, children: figure }),
+        item.action && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Action, { slot: !isHero, children: item.action })
+      ]
+    }
+  );
+  const badge = item.badge ? /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Box, { display: "flex", flexShrink: 0, children: item.badge }) : null;
+  const firstLine = badge && !badgeBelow ? /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
+    Box,
+    {
+      display: "flex",
+      alignItems: "center",
+      gap: "2xs",
+      w: "100%",
+      minW: 0,
+      justifyContent: isInline ? "end" : void 0,
+      children: [
+        valueRow,
+        badge
+      ]
+    }
+  ) : valueRow;
+  const definition = /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
+    Box,
+    {
+      as: "dd",
+      m: "none",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: isInline ? "end" : "stretch",
+      gap: badge && badgeBelow && !description ? "4xs" : "5xs",
+      minW: 0,
+      children: [
+        firstLine,
+        description && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Text, { as: "div", variant: "body-md", color: "secondary", align: isInline ? "right" : void 0, children: description }),
+        badgeBelow && badge
+      ]
+    }
+  );
+  if (isStack) {
+    return /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(VStack, { gap: "4xs", align: "stretch", children: [
+      term,
+      definition,
+      isHero && item.description && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Text, { as: "div", variant: "body-md", color: "secondary", children: item.description })
+    ] });
+  }
+  if (layout === "column") {
+    return /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
+      Grid,
+      {
+        columns: isFlexible ? void 0 : 5,
+        templateColumns: isFlexible ? "auto minmax(0, 1fr)" : void 0,
+        columnGap: "2xs",
+        alignItems: "baseline",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(GridItem, { colSpan: isFlexible ? void 0 : 2, minW: 0, children: term }),
+          /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(GridItem, { colSpan: isFlexible ? void 0 : 3, minW: 0, children: definition })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(HStack, { gap: "2xs", align: "baseline", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Box, { flex: isFlexible ? "0 1 auto" : "1 1 0", minW: 0, children: term }),
+    /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Box, { flex: "1 1 0", minW: 0, children: definition })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AVATAR_IMAGES,
@@ -8047,6 +9564,8 @@ var useLayout = () => {
   CheckSmallFilled,
   CheckSmallOutline,
   Checkbox,
+  CheckboxGroup,
+  CheckboxGroupContext,
   ChevronDownFilled,
   ChevronDownOutline,
   ChevronDownSmallFilled,
@@ -8090,6 +9609,7 @@ var useLayout = () => {
   CreditCardFilled,
   CreditCardOutline,
   CustomScrollbar,
+  DataList,
   DayFilled,
   DayOutline,
   Divider,
@@ -8101,6 +9621,7 @@ var useLayout = () => {
   DraftOutline,
   DuplicateFilled,
   DuplicateOutline,
+  Empty,
   ExitFilled,
   ExitOutline,
   EyeDropperFilled,
@@ -8109,6 +9630,7 @@ var useLayout = () => {
   EyeOffFilled,
   EyeOffOutline,
   EyeOutline,
+  Fieldset,
   Flex,
   FolderFilled,
   FolderOutline,
@@ -8150,10 +9672,13 @@ var useLayout = () => {
   MoreVerticalOutline,
   MusicNoteFilled,
   MusicNoteOutline,
+  NumberField,
+  OTP,
   OpenWithFilled,
   OpenWithOutline,
   OptionFilled,
   OptionOutline,
+  PIN,
   PenFilled,
   PenOutline,
   PersonalBookFilled,
@@ -8165,11 +9690,14 @@ var useLayout = () => {
   Portal,
   Radio,
   RadioFilled,
+  RadioGroup,
   RadioOutline,
   RainFilled,
   RainOutline,
+  Rating,
   RectangleFilled,
   RectangleOutline,
+  Result,
   RouterFilled,
   RouterOutline,
   ScheduleFilled,