@titan-design/react-ui 0.0.1

package/dist/index.mjs

@@ -0,0 +1,4412 @@
+import { semanticColorsDark, getHoverColors, getValidatedElevation, getBaseSurfaceColor, getElevationSurface, getElevationShadow, neumorphicShadows } from './chunk-NA3EES23.mjs';
+export { buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors } from './chunk-NA3EES23.mjs';
+import { Pressable, ActivityIndicator, Text, View, TextInput, StyleSheet, Platform, Image, Modal as Modal$1, ScrollView } from 'react-native';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React24, { forwardRef, useState, createContext, useMemo, useContext, useRef, useCallback, useEffect, useSyncExternalStore } from 'react';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var statusColors = {
+  success: {
+    subtle: "bg-status-success-subtle",
+    outline: "border-2 border-status-success bg-transparent",
+    solid: "bg-status-success",
+    icon: "text-status-success",
+    text: "text-status-success"
+  },
+  info: {
+    subtle: "bg-status-info-subtle",
+    outline: "border-2 border-status-info bg-transparent",
+    solid: "bg-status-info",
+    icon: "text-status-info",
+    text: "text-status-info"
+  },
+  warning: {
+    subtle: "bg-status-warning-subtle",
+    outline: "border-2 border-status-warning bg-transparent",
+    solid: "bg-status-warning",
+    icon: "text-status-warning",
+    text: "text-status-warning"
+  },
+  error: {
+    subtle: "bg-status-error-subtle",
+    outline: "border-2 border-status-error bg-transparent",
+    solid: "bg-status-error",
+    icon: "text-status-error",
+    text: "text-status-error"
+  }
+};
+var defaultIcons = {
+  success: "\u2713",
+  info: "\u2139",
+  warning: "\u26A0",
+  error: "\u2715"
+};
+function Alert({
+  status = "info",
+  variant = "subtle",
+  icon,
+  showIcon = true,
+  onClose,
+  className,
+  children,
+  ...props
+}) {
+  const colors = statusColors[status];
+  const isSolid = variant === "solid";
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "alert",
+      className: cn(
+        "flex-row items-start p-4 rounded-lg",
+        colors[variant],
+        className
+      ),
+      ...props,
+      children: [
+        showIcon && /* @__PURE__ */ jsx(View, { className: "mr-3 mt-0.5", children: icon || /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: cn(
+              "text-lg font-bold",
+              isSolid ? "text-white" : colors.icon
+            ),
+            children: defaultIcons[status]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(View, { className: "flex-1", children }),
+        onClose && /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            onPress: onClose,
+            accessibilityRole: "button",
+            accessibilityLabel: "Close alert",
+            className: "ml-2 p-1 rounded web:hover:bg-black/10 active:bg-black/20",
+            children: /* @__PURE__ */ jsx(Text, { className: cn("text-lg", isSolid ? "text-white/70" : "text-text-secondary"), children: "\xD7" })
+          }
+        )
+      ]
+    }
+  );
+}
+function AlertTitle({ children, className }) {
+  return /* @__PURE__ */ jsx(Text, { className: cn("font-semibold text-text-primary mb-1", className), children });
+}
+function AlertDescription({ children, className }) {
+  return /* @__PURE__ */ jsx(Text, { className: cn("text-sm text-text-secondary", className), children });
+}
+var variantStyles = {
+  solid: {
+    primary: "bg-brand-primary active:bg-brand-primary-dark active:scale-[0.98] web:hover:bg-brand-primary-dark web:active:scale-[0.98]",
+    secondary: "bg-brand-secondary active:bg-brand-secondary-dark active:scale-[0.98] web:hover:bg-brand-secondary-dark web:active:scale-[0.98]",
+    success: "bg-status-success active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]",
+    error: "bg-status-error active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]",
+    warning: "bg-status-warning active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]",
+    info: "bg-status-info active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]"
+  },
+  outline: {
+    primary: "border-2 border-brand-primary bg-transparent active:bg-brand-primary-subtle active:scale-[0.98] web:hover:bg-brand-primary-subtle web:active:scale-[0.98]",
+    secondary: "border-2 border-brand-secondary bg-transparent active:bg-brand-secondary-subtle active:scale-[0.98] web:hover:bg-brand-secondary-subtle web:active:scale-[0.98]",
+    success: "border-2 border-status-success bg-transparent active:bg-status-success-subtle active:scale-[0.98] web:hover:bg-status-success-subtle web:active:scale-[0.98]",
+    error: "border-2 border-status-error bg-transparent active:bg-status-error-subtle active:scale-[0.98] web:hover:bg-status-error-subtle web:active:scale-[0.98]",
+    warning: "border-2 border-status-warning bg-transparent active:bg-status-warning-subtle active:scale-[0.98] web:hover:bg-status-warning-subtle web:active:scale-[0.98]",
+    info: "border-2 border-status-info bg-transparent active:bg-status-info-subtle active:scale-[0.98] web:hover:bg-status-info-subtle web:active:scale-[0.98]"
+  },
+  ghost: {
+    primary: "bg-transparent active:bg-brand-primary-subtle active:scale-[0.98] web:hover:bg-brand-primary-subtle web:active:scale-[0.98]",
+    secondary: "bg-transparent active:bg-brand-secondary-subtle active:scale-[0.98] web:hover:bg-brand-secondary-subtle web:active:scale-[0.98]",
+    success: "bg-transparent active:bg-status-success-subtle active:scale-[0.98] web:hover:bg-status-success-subtle web:active:scale-[0.98]",
+    error: "bg-transparent active:bg-status-error-subtle active:scale-[0.98] web:hover:bg-status-error-subtle web:active:scale-[0.98]",
+    warning: "bg-transparent active:bg-status-warning-subtle active:scale-[0.98] web:hover:bg-status-warning-subtle web:active:scale-[0.98]",
+    info: "bg-transparent active:bg-status-info-subtle active:scale-[0.98] web:hover:bg-status-info-subtle web:active:scale-[0.98]"
+  },
+  link: {
+    primary: "bg-transparent",
+    secondary: "bg-transparent",
+    success: "bg-transparent",
+    error: "bg-transparent",
+    warning: "bg-transparent",
+    info: "bg-transparent"
+  }
+};
+var textStyles = {
+  solid: {
+    primary: "text-white",
+    secondary: "text-white",
+    success: "text-white",
+    error: "text-white",
+    warning: "text-white",
+    info: "text-white"
+  },
+  outline: {
+    primary: "text-brand-primary",
+    secondary: "text-brand-secondary",
+    success: "text-status-success",
+    error: "text-status-error",
+    warning: "text-status-warning",
+    info: "text-status-info"
+  },
+  ghost: {
+    primary: "text-brand-primary",
+    secondary: "text-brand-secondary",
+    success: "text-status-success",
+    error: "text-status-error",
+    warning: "text-status-warning",
+    info: "text-status-info"
+  },
+  link: {
+    primary: "text-brand-primary web:hover:underline",
+    secondary: "text-brand-secondary web:hover:underline",
+    success: "text-status-success web:hover:underline",
+    error: "text-status-error web:hover:underline",
+    warning: "text-status-warning web:hover:underline",
+    info: "text-status-info web:hover:underline"
+  }
+};
+var sizeStyles = {
+  sm: "px-4 py-1.5 min-h-[32px]",
+  md: "px-5 py-2 min-h-[40px]",
+  lg: "px-6 py-2.5 min-h-[48px]"
+};
+var iconButtonSizeStyles = {
+  sm: "w-8 h-8 p-0",
+  md: "w-10 h-10 p-0",
+  lg: "w-12 h-12 p-0"
+};
+var textSizeStyles = {
+  sm: "text-sm",
+  md: "text-sm",
+  lg: "text-base"
+};
+var Button = forwardRef(function Button2({
+  variant = "solid",
+  size = "md",
+  color = "primary",
+  isIconButton = false,
+  isDisabled = false,
+  isLoading = false,
+  loadingText,
+  fullWidth = false,
+  className,
+  children,
+  ...props
+}, ref) {
+  const disabled = isDisabled || isLoading;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      ref,
+      disabled,
+      accessibilityRole: "button",
+      accessibilityState: { disabled },
+      className: cn(
+        // Base styles
+        "flex-row items-center justify-center rounded-md transition-all duration-150",
+        // Variant + color styles
+        variantStyles[variant][color],
+        // Size styles (icon button vs regular)
+        isIconButton ? iconButtonSizeStyles[size] : sizeStyles[size],
+        // Full width
+        fullWidth && "w-full",
+        // Disabled styles - more refined
+        disabled && "opacity-40 cursor-not-allowed active:scale-100 web:active:scale-100",
+        // Link variant has no padding
+        variant === "link" && "px-0 py-0 min-h-0",
+        className
+      ),
+      ...props,
+      children: [
+        isLoading && /* @__PURE__ */ jsx(
+          ActivityIndicator,
+          {
+            size: "small",
+            color: variant === "solid" ? semanticColorsDark["on-brand-primary"] : void 0,
+            className: "mr-2"
+          }
+        ),
+        isLoading && loadingText ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: cn(
+              "font-semibold",
+              textSizeStyles[size],
+              textStyles[variant][color]
+            ),
+            children: loadingText
+          }
+        ) : children
+      ]
+    }
+  );
+});
+function ButtonText({ children, className }) {
+  return /* @__PURE__ */ jsx(Text, { className: cn("font-semibold text-inherit", className), children });
+}
+function ButtonIcon({ as: Icon, size = 16, className }) {
+  return /* @__PURE__ */ jsx(Icon, { size, className: cn("text-inherit", className) });
+}
+function ButtonSpinner({ className }) {
+  return /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", className: cn("text-inherit", className) });
+}
+var sizeStyles2 = {
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-4 text-base",
+  lg: "h-12 px-4 text-lg"
+};
+var multilineSizeStyles = {
+  sm: "min-h-[80px] px-3 py-2 text-sm",
+  md: "min-h-[100px] px-4 py-3 text-base",
+  lg: "min-h-[120px] px-4 py-3 text-lg"
+};
+var variantStyles2 = {
+  outline: {
+    base: "border border-border-input rounded-md bg-transparent",
+    hover: "web:hover:border-border-input-hover",
+    focus: "border-border-input-focus",
+    error: "border-border-input-error"
+  },
+  filled: {
+    base: "border border-transparent rounded-md bg-surface-input",
+    hover: "web:hover:border-border-input-hover",
+    focus: "border-border-input-focus bg-transparent",
+    error: "border-border-input-error"
+  },
+  underline: {
+    base: "border-b border-border-input rounded-none bg-transparent",
+    hover: "web:hover:border-border-input-hover",
+    focus: "border-border-input-focus",
+    error: "border-border-input-error"
+  }
+};
+var Input = forwardRef(function Input2({
+  size = "md",
+  variant = "outline",
+  isDisabled = false,
+  isInvalid = false,
+  isReadOnly = false,
+  isRequired = false,
+  multiline = false,
+  numberOfLines = 4,
+  label,
+  helperText,
+  errorMessage,
+  leftElement,
+  rightElement,
+  className,
+  inputClassName,
+  onFocus,
+  onBlur,
+  ...props
+}, ref) {
+  const [isFocused, setIsFocused] = useState(false);
+  const handleFocus = (e) => {
+    setIsFocused(true);
+    onFocus?.(e);
+  };
+  const handleBlur = (e) => {
+    setIsFocused(false);
+    onBlur?.(e);
+  };
+  const showError = isInvalid && errorMessage;
+  const showHelper = !showError && helperText;
+  return /* @__PURE__ */ jsxs(View, { className: cn("w-full", className), children: [
+    label && /* @__PURE__ */ jsxs(Text, { className: "mb-1.5 text-sm font-medium text-text-primary", children: [
+      label,
+      isRequired && /* @__PURE__ */ jsx(Text, { className: "text-status-error ml-0.5", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        className: cn(
+          "flex-row transition-colors duration-150",
+          multiline ? "items-start" : "items-center",
+          variantStyles2[variant].base,
+          !isDisabled && !isInvalid && variantStyles2[variant].hover,
+          isFocused && variantStyles2[variant].focus,
+          isInvalid && variantStyles2[variant].error,
+          isDisabled && "opacity-40 cursor-not-allowed"
+        ),
+        children: [
+          leftElement && /* @__PURE__ */ jsx(View, { className: cn("pl-3 pr-1", multiline && "pt-3"), children: leftElement }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              ref,
+              editable: !isDisabled && !isReadOnly,
+              accessibilityLabel: label,
+              accessibilityState: {
+                disabled: isDisabled
+              },
+              multiline,
+              numberOfLines: multiline ? numberOfLines : 1,
+              textAlignVertical: multiline ? "top" : "center",
+              placeholderTextColor: "var(--color-text-tertiary)",
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              className: cn(
+                "flex-1 text-text-primary",
+                multiline ? multilineSizeStyles[size] : sizeStyles2[size],
+                leftElement && "pl-1",
+                rightElement && "pr-1",
+                inputClassName
+              ),
+              ...props
+            }
+          ),
+          rightElement && /* @__PURE__ */ jsx(View, { className: cn("pl-1 pr-3", multiline && "pt-3"), children: rightElement })
+        ]
+      }
+    ),
+    showHelper && /* @__PURE__ */ jsx(Text, { className: "mt-1.5 text-xs text-text-secondary", children: helperText }),
+    showError && /* @__PURE__ */ jsx(Text, { className: "mt-1.5 text-xs text-status-error", children: errorMessage })
+  ] });
+});
+function InputGroup({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("flex-col gap-4", className), children });
+}
+var PasswordInput = forwardRef(function PasswordInput2({ showIcon, hideIcon, ...props }, ref) {
+  const [isVisible, setIsVisible] = useState(false);
+  const toggleVisibility = () => setIsVisible(!isVisible);
+  const defaultShowIcon = /* @__PURE__ */ jsxs(View, { className: "w-5 h-5 items-center justify-center", children: [
+    /* @__PURE__ */ jsx(View, { className: "w-3 h-3 rounded-full border-2 border-text-secondary" }),
+    /* @__PURE__ */ jsx(View, { className: "absolute w-1.5 h-1.5 rounded-full bg-text-secondary" })
+  ] });
+  const defaultHideIcon = /* @__PURE__ */ jsxs(View, { className: "w-5 h-5 items-center justify-center", children: [
+    /* @__PURE__ */ jsx(View, { className: "w-3 h-3 rounded-full border-2 border-text-secondary" }),
+    /* @__PURE__ */ jsx(View, { className: "absolute w-1.5 h-1.5 rounded-full bg-text-secondary" }),
+    /* @__PURE__ */ jsx(View, { className: "absolute w-5 h-0.5 bg-text-secondary rotate-45" })
+  ] });
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref,
+      secureTextEntry: !isVisible,
+      rightElement: /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          onPress: toggleVisibility,
+          accessibilityRole: "button",
+          accessibilityLabel: isVisible ? "Hide password" : "Show password",
+          className: "p-1 rounded active:opacity-70",
+          children: isVisible ? hideIcon || defaultHideIcon : showIcon || defaultShowIcon
+        }
+      ),
+      ...props
+    }
+  );
+});
+function getTheme() {
+  if (typeof document === "undefined") return "dark";
+  return document.documentElement.classList.contains("light") ? "light" : "dark";
+}
+var listeners = [];
+function subscribe(listener) {
+  listeners = [...listeners, listener];
+  if (typeof document !== "undefined" && listeners.length === 1) {
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+          listeners.forEach((l) => l());
+        }
+      }
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    subscribe._observer = observer;
+  }
+  return () => {
+    listeners = listeners.filter((l) => l !== listener);
+    if (listeners.length === 0 && subscribe._observer) {
+      subscribe._observer.disconnect();
+      subscribe._observer = null;
+    }
+  };
+}
+function getSnapshot() {
+  return getTheme();
+}
+function getServerSnapshot() {
+  return "dark";
+}
+function useTheme() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+var variantStyles3 = {
+  elevated: "",
+  // Will be set dynamically via elevation system
+  outline: "border-2 border-border-strong",
+  // Thicker border with stronger contrast
+  filled: ""
+  // Will be set dynamically via elevation system
+};
+function Card({
+  variant = "elevated",
+  elevation = 2,
+  isInteractive = false,
+  isLoading = false,
+  onPress,
+  borderColor,
+  bgColor,
+  className,
+  children,
+  style,
+  skeletonHasHeader = true,
+  skeletonHasFooter = false,
+  skeletonContentLines = 3,
+  ...props
+}) {
+  const isClickable = isInteractive || !!onPress;
+  const [isHovered, setIsHovered] = useState(false);
+  const theme = useTheme();
+  const elevationLevel = useMemo(() => {
+    const validated = getValidatedElevation("card", elevation);
+    if (variant === "outline") {
+      return 1;
+    }
+    return validated;
+  }, [variant, elevation]);
+  const baseColor = useMemo(() => getBaseSurfaceColor(theme), [theme]);
+  const surfaceColor = useMemo(() => {
+    if (variant === "outline" && theme === "light") {
+      return "#FAFAFA";
+    }
+    return getElevationSurface(baseColor, elevationLevel, theme);
+  }, [baseColor, elevationLevel, theme, variant]);
+  const shadowStyle = useMemo(() => {
+    const shouldHover = isHovered && isClickable;
+    return getElevationShadow(baseColor, elevationLevel, theme, shouldHover);
+  }, [baseColor, elevationLevel, theme, isHovered, isClickable]);
+  const cardContent = isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    skeletonHasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
+      /* @__PURE__ */ jsx(View, { className: "mt-2 h-4 w-2/3 bg-interactive-disabled rounded" })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: Array.from({ length: skeletonContentLines }).map((_, i) => /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "h-4 bg-interactive-disabled rounded",
+          i < skeletonContentLines - 1 ? "mb-2 w-full" : "w-4/5"
+        )
+      },
+      i
+    )) }),
+    skeletonHasFooter && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
+  ] }) : children;
+  const baseClassName = cn(
+    "rounded-lg overflow-hidden relative",
+    // Apply variant styles, but only use default border color if no custom borderColor
+    variant === "outline" ? borderColor ? "border-2" : variantStyles3[variant] : variantStyles3[variant],
+    // Remove Tailwind shadow classes - we're using elevation shadows via style prop
+    isClickable && "web:cursor-pointer web:transition-all web:duration-150",
+    isClickable && "web:hover:-translate-y-0.5 active:scale-[0.99]",
+    isLoading && "pointer-events-none animate-pulse",
+    className
+  );
+  const mergedStyle = useMemo(() => {
+    const elevationStyle = {
+      backgroundColor: bgColor || surfaceColor,
+      ...shadowStyle
+    };
+    if (borderColor) {
+      elevationStyle.borderColor = borderColor;
+    }
+    if (!style) return elevationStyle;
+    return [style, elevationStyle];
+  }, [style, surfaceColor, shadowStyle, borderColor, bgColor]);
+  if (isClickable) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        onHoverIn: () => setIsHovered(true),
+        onHoverOut: () => setIsHovered(false),
+        accessibilityRole: "button",
+        className: baseClassName,
+        style: mergedStyle,
+        ...props,
+        children: cardContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { className: baseClassName, style: mergedStyle, ...props, children: cardContent });
+}
+function CardHeader({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-6", className), children });
+}
+function CardTitle({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      accessibilityRole: "header",
+      className: cn("text-lg font-semibold text-text-primary font-heading", className),
+      children
+    }
+  );
+}
+function CardDescription({ children, className }) {
+  return /* @__PURE__ */ jsx(Text, { className: cn("mt-1.5 text-sm text-text-secondary", className), children });
+}
+function CardContent({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-4", className), children });
+}
+function CardFooter({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
+}
+function CardSkeleton({
+  hasHeader = true,
+  hasFooter = false,
+  contentLines = 3,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(Card, { variant: "elevated", elevation: 2, className: cn("animate-pulse", className), children: [
+    hasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
+      /* @__PURE__ */ jsx(View, { className: "mt-2 h-4 w-2/3 bg-interactive-disabled rounded" })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: Array.from({ length: contentLines }).map((_, i) => /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "h-4 bg-interactive-disabled rounded",
+          i < contentLines - 1 ? "mb-2 w-full" : "w-4/5"
+        )
+      },
+      i
+    )) }),
+    hasFooter && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
+  ] });
+}
+var variantColorStyles = {
+  solid: {
+    default: "bg-border-strong text-text-inverse",
+    primary: "bg-brand-primary text-text-inverse",
+    secondary: "bg-brand-secondary text-text-inverse",
+    success: "bg-status-success text-text-inverse",
+    error: "bg-status-error text-text-inverse",
+    warning: "bg-status-warning text-text-inverse",
+    info: "bg-status-info text-text-inverse"
+  },
+  subtle: {
+    default: "bg-surface-raised text-text-secondary",
+    primary: "bg-brand-primary-subtle text-brand-primary",
+    secondary: "bg-brand-secondary-subtle text-brand-secondary",
+    success: "bg-status-success-subtle text-status-success",
+    error: "bg-status-error-subtle text-status-error",
+    warning: "bg-status-warning-subtle text-status-warning",
+    info: "bg-status-info-subtle text-status-info"
+  },
+  outline: {
+    default: "border border-border-strong text-text-secondary",
+    primary: "border border-brand-primary text-brand-primary",
+    secondary: "border border-brand-secondary text-brand-secondary",
+    success: "border border-status-success text-status-success",
+    error: "border border-status-error text-status-error",
+    warning: "border border-status-warning text-status-warning",
+    info: "border border-status-info text-status-info"
+  }
+};
+var sizeStyles3 = {
+  sm: "px-1.5 py-0.5 text-xs",
+  md: "px-2 py-0.5 text-xs",
+  lg: "px-2.5 py-1 text-sm"
+};
+function Badge({
+  variant = "subtle",
+  color = "default",
+  size = "md",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        "inline-flex items-center justify-center rounded-full font-medium",
+        variantColorStyles[variant][color],
+        sizeStyles3[size],
+        className
+      ),
+      ...props,
+      children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, { className: "text-inherit font-medium", children }) : children
+    }
+  );
+}
+function BadgeText({ children, className }) {
+  return /* @__PURE__ */ jsx(Text, { className: cn("text-inherit font-medium", className), children });
+}
+var sizeMap = {
+  sm: "small",
+  md: "small",
+  lg: "large",
+  xl: "large"
+};
+var colorMap = {
+  primary: "#5048E5",
+  secondary: "#10B981",
+  white: "#FFFFFF",
+  default: "#6B7280"
+};
+var containerSizes = {
+  sm: "w-4 h-4",
+  md: "w-6 h-6",
+  lg: "w-8 h-8",
+  xl: "w-12 h-12"
+};
+function Spinner({
+  size = "md",
+  color = "primary",
+  label = "Loading",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "progressbar",
+      accessibilityLabel: label,
+      className: cn("items-center justify-center", containerSizes[size], className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ActivityIndicator,
+        {
+          size: sizeMap[size],
+          color: colorMap[color]
+        }
+      )
+    }
+  );
+}
+var sizeStyles4 = {
+  xs: { container: "w-6 h-6", text: "text-xs", image: "w-6 h-6" },
+  sm: { container: "w-8 h-8", text: "text-xs", image: "w-8 h-8" },
+  md: { container: "w-10 h-10", text: "text-sm", image: "w-10 h-10" },
+  lg: { container: "w-12 h-12", text: "text-base", image: "w-12 h-12" },
+  xl: { container: "w-16 h-16", text: "text-lg", image: "w-16 h-16" },
+  "2xl": { container: "w-20 h-20", text: "text-xl", image: "w-20 h-20" }
+};
+function Avatar({
+  size = "md",
+  source,
+  fallback,
+  alt,
+  className,
+  ...props
+}) {
+  const styles2 = sizeStyles4[size];
+  const hasImage = source !== void 0;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel: alt || fallback || "Avatar",
+      className: cn(
+        "items-center justify-center rounded-full overflow-hidden",
+        "bg-border-strong",
+        styles2.container,
+        className
+      ),
+      ...props,
+      children: hasImage ? /* @__PURE__ */ jsx(
+        Image,
+        {
+          source,
+          className: cn("rounded-full", styles2.image),
+          accessibilityLabel: alt
+        }
+      ) : fallback ? /* @__PURE__ */ jsx(Text, { className: cn("font-semibold text-text-primary", styles2.text), children: fallback }) : /* @__PURE__ */ jsx(View, { className: "w-full h-full bg-surface-raised" })
+    }
+  );
+}
+var badgeColors = {
+  success: "bg-status-success",
+  error: "bg-status-error",
+  warning: "bg-status-warning",
+  default: "bg-border-strong"
+};
+function AvatarBadge({ color = "success", className }) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        "absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-surface-base",
+        badgeColors[color],
+        className
+      )
+    }
+  );
+}
+function AvatarGroup({
+  children,
+  max,
+  size = "md",
+  className
+}) {
+  const childArray = React24.Children.toArray(children);
+  const visibleChildren = max ? childArray.slice(0, max) : childArray;
+  const remainingCount = max ? Math.max(0, childArray.length - max) : 0;
+  return /* @__PURE__ */ jsxs(View, { className: cn("flex-row", className), children: [
+    visibleChildren.map((child, index) => /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "border-2 border-surface-base rounded-full",
+          index > 0 && "-ml-2"
+        ),
+        children: React24.isValidElement(child) ? React24.cloneElement(child, { size }) : child
+      },
+      index
+    )),
+    remainingCount > 0 && /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "border-2 border-surface-base rounded-full -ml-2",
+          "items-center justify-center bg-surface-raised",
+          sizeStyles4[size].container
+        ),
+        children: /* @__PURE__ */ jsxs(Text, { className: cn("font-semibold text-text-secondary", sizeStyles4[size].text), children: [
+          "+",
+          remainingCount
+        ] })
+      }
+    )
+  ] });
+}
+function Divider({
+  orientation = "horizontal",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "none",
+      className: cn(
+        "bg-divider",
+        orientation === "horizontal" ? "h-px w-full" : "w-px h-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var sizeStyles5 = {
+  sm: { box: "w-4 h-4", icon: "w-2.5 h-2.5", label: "text-sm" },
+  md: { box: "w-5 h-5", icon: "w-3 h-3", label: "text-base" },
+  lg: { box: "w-6 h-6", icon: "w-3.5 h-3.5", label: "text-lg" }
+};
+var Checkbox = forwardRef(function Checkbox2({
+  isChecked = false,
+  isIndeterminate = false,
+  isDisabled = false,
+  isInvalid = false,
+  size = "md",
+  label,
+  helperText,
+  value,
+  onCheckedChange,
+  className,
+  ...props
+}, ref) {
+  const styles2 = sizeStyles5[size];
+  const handlePress = () => {
+    if (!isDisabled) {
+      onCheckedChange?.(!isChecked);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      ref,
+      disabled: isDisabled,
+      onPress: handlePress,
+      accessibilityRole: "checkbox",
+      accessibilityState: {
+        checked: isIndeterminate ? "mixed" : isChecked,
+        disabled: isDisabled
+      },
+      accessibilityLabel: label,
+      className: cn(
+        "flex-row items-start gap-2",
+        isDisabled && "opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            className: cn(
+              "items-center justify-center rounded border-2 transition-colors",
+              styles2.box,
+              isChecked || isIndeterminate ? "bg-brand-primary border-brand-primary" : "bg-transparent border-border-default",
+              isInvalid && "border-status-error",
+              !isDisabled && "web:hover:border-brand-primary"
+            ),
+            children: [
+              isChecked && !isIndeterminate && /* @__PURE__ */ jsx(View, { className: cn("bg-white rounded-sm", styles2.icon), children: /* @__PURE__ */ jsx(Text, { className: "text-brand-primary font-bold text-center leading-none", children: "\u2713" }) }),
+              isIndeterminate && /* @__PURE__ */ jsx(View, { className: cn("bg-white h-0.5 w-2/3 rounded") })
+            ]
+          }
+        ),
+        (label || helperText) && /* @__PURE__ */ jsxs(View, { className: "flex-1", children: [
+          label && /* @__PURE__ */ jsx(Text, { className: cn("text-text-primary font-medium", styles2.label), children: label }),
+          helperText && /* @__PURE__ */ jsx(Text, { className: "text-xs text-text-secondary mt-0.5", children: helperText })
+        ] })
+      ]
+    }
+  );
+});
+function CheckboxGroup({
+  children,
+  label,
+  orientation = "vertical",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(View, { className: cn("gap-1", className), children: [
+    label && /* @__PURE__ */ jsx(Text, { className: "text-sm font-medium text-text-primary mb-2", children: label }),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          orientation === "vertical" ? "flex-col gap-2" : "flex-row gap-4"
+        ),
+        children
+      }
+    )
+  ] });
+}
+var sizeStyles6 = {
+  sm: { track: "w-8 h-4", thumb: "w-3 h-3", translate: "translate-x-4" },
+  md: { track: "w-10 h-5", thumb: "w-4 h-4", translate: "translate-x-5" },
+  lg: { track: "w-12 h-6", thumb: "w-5 h-5", translate: "translate-x-6" }
+};
+var Switch = forwardRef(function Switch2({
+  isChecked = false,
+  isDisabled = false,
+  size = "md",
+  label,
+  labelPosition = "right",
+  onCheckedChange,
+  className,
+  ...props
+}, ref) {
+  const styles2 = sizeStyles6[size];
+  const handlePress = () => {
+    if (!isDisabled) {
+      onCheckedChange?.(!isChecked);
+    }
+  };
+  const switchElement = /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        "rounded-full p-0.5 transition-colors",
+        styles2.track,
+        isChecked ? "bg-brand-primary" : "bg-border-strong"
+      ),
+      children: /* @__PURE__ */ jsx(
+        View,
+        {
+          className: cn(
+            "rounded-full bg-white shadow-sm transition-transform",
+            styles2.thumb,
+            isChecked && styles2.translate
+          )
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      ref,
+      disabled: isDisabled,
+      onPress: handlePress,
+      accessibilityRole: "switch",
+      accessibilityState: { checked: isChecked, disabled: isDisabled },
+      accessibilityLabel: label,
+      className: cn(
+        "flex-row items-center gap-2",
+        isDisabled && "opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        label && labelPosition === "left" && /* @__PURE__ */ jsx(Text, { className: "text-text-primary font-medium", children: label }),
+        switchElement,
+        label && labelPosition === "right" && /* @__PURE__ */ jsx(Text, { className: "text-text-primary font-medium", children: label })
+      ]
+    }
+  );
+});
+var ModalContext = createContext({ size: "md", scrollBehavior: "outside" });
+var sizeStyles7 = {
+  xs: "max-w-xs",
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  full: "max-w-full m-4"
+};
+function Modal({
+  isOpen,
+  onClose,
+  size = "md",
+  scrollBehavior = "outside",
+  closeOnOverlayClick = true,
+  backdropBlur = false,
+  backdropClassName,
+  animationType = "fade",
+  children,
+  ...props
+}) {
+  const handleBackdropPress = () => {
+    if (closeOnOverlayClick && onClose) {
+      onClose();
+    }
+  };
+  const backdropContent = /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress: handleBackdropPress,
+      className: cn(
+        "flex-1 items-center justify-center",
+        backdropBlur ? "bg-black/30 web:backdrop-blur-sm" : "bg-black/50",
+        backdropClassName
+      ),
+      children
+    }
+  );
+  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: { onClose, size, scrollBehavior }, children: /* @__PURE__ */ jsx(
+    Modal$1,
+    {
+      visible: isOpen,
+      transparent: true,
+      animationType,
+      onRequestClose: onClose,
+      ...props,
+      children: scrollBehavior === "outside" ? /* @__PURE__ */ jsx(
+        ScrollView,
+        {
+          contentContainerStyle: { flexGrow: 1 },
+          keyboardShouldPersistTaps: "handled",
+          children: backdropContent
+        }
+      ) : backdropContent
+    }
+  ) });
+}
+function ModalContent({ children, className }) {
+  const { size } = useContext(ModalContext);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsx(
+        View,
+        {
+          className: cn(
+            "bg-surface-elevated rounded-lg shadow-xl w-full",
+            sizeStyles7[size],
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function ModalHeader({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("flex-row items-center justify-between px-6 py-4 border-b border-divider", className), children });
+}
+function ModalTitle({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      accessibilityRole: "header",
+      className: cn("text-lg font-semibold text-text-primary font-heading", className),
+      children
+    }
+  );
+}
+function ModalCloseButton({ className }) {
+  const { onClose } = useContext(ModalContext);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress: onClose,
+      accessibilityRole: "button",
+      accessibilityLabel: "Close modal",
+      className: cn(
+        "p-1 rounded-md web:hover:bg-interactive-hover active:bg-interactive-active",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(Text, { className: "text-text-secondary text-xl leading-none", children: "\xD7" })
+    }
+  );
+}
+function ModalBody({ children, maxHeight, className }) {
+  const { scrollBehavior } = useContext(ModalContext);
+  if (scrollBehavior === "inside") {
+    return /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        className: cn("px-6 py-4", className),
+        style: maxHeight ? { maxHeight } : void 0,
+        showsVerticalScrollIndicator: true,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-4", className), children });
+}
+function ModalFooter({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("flex-row items-center justify-end gap-2 px-6 py-4 border-t border-divider", className), children });
+}
+function Skeleton({
+  variant = "text",
+  animation = "pulse",
+  width,
+  height,
+  borderRadius,
+  className,
+  style,
+  ...props
+}) {
+  const variantStyles5 = {
+    text: "h-4 rounded",
+    circle: "rounded-full",
+    rect: "",
+    rounded: "rounded-lg"
+  };
+  const animationStyles = {
+    pulse: "animate-pulse",
+    shimmer: "animate-shimmer",
+    // Note: requires custom animation in Tailwind config
+    none: ""
+  };
+  let finalWidth = width;
+  let finalHeight = height;
+  if (variant === "circle") {
+    if (width && !height) finalHeight = width;
+    if (height && !width) finalWidth = height;
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "none",
+      accessibilityLabel: "Loading...",
+      className: cn(
+        "bg-interactive-disabled",
+        variantStyles5[variant],
+        animationStyles[animation],
+        className
+      ),
+      style: [
+        {
+          ...finalWidth !== void 0 && { width: finalWidth },
+          ...finalHeight !== void 0 && { height: finalHeight },
+          ...borderRadius !== void 0 && { borderRadius }
+        },
+        style
+      ],
+      ...props
+    }
+  );
+}
+function SkeletonText({
+  lines = 3,
+  lastLineWidth = "60%",
+  gap = 8,
+  animation = "pulse",
+  className
+}) {
+  return /* @__PURE__ */ jsx(View, { className: cn("gap-2", className), style: { gap }, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      variant: "text",
+      animation,
+      width: i === lines - 1 ? lastLineWidth : "100%"
+    },
+    i
+  )) });
+}
+function SkeletonCircle({
+  size = 40,
+  animation = "pulse",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      variant: "circle",
+      width: size,
+      height: size,
+      animation,
+      className
+    }
+  );
+}
+function SkeletonCard({
+  hasImage = true,
+  imageHeight = 160,
+  lines = 3,
+  animation = "pulse",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(View, { className: cn("rounded-lg overflow-hidden bg-surface-elevated", className), children: [
+    hasImage && /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rect",
+        width: "100%",
+        height: imageHeight,
+        animation
+      }
+    ),
+    /* @__PURE__ */ jsxs(View, { className: "p-4 gap-3", children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "70%", animation }),
+      /* @__PURE__ */ jsx(SkeletonText, { lines, animation })
+    ] })
+  ] });
+}
+function SkeletonListItem({
+  hasAvatar = true,
+  avatarSize = 40,
+  lines = 2,
+  animation = "pulse",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(View, { className: cn("flex-row items-center gap-3 p-3", className), children: [
+    hasAvatar && /* @__PURE__ */ jsx(SkeletonCircle, { size: avatarSize, animation }),
+    /* @__PURE__ */ jsx(View, { className: "flex-1", children: /* @__PURE__ */ jsx(SkeletonText, { lines, animation }) })
+  ] });
+}
+var TabsContext = createContext({
+  activeIndex: 0,
+  setActiveIndex: () => {
+  },
+  variant: "line",
+  orientation: "horizontal"
+});
+function Tabs({
+  defaultIndex = 0,
+  index,
+  onChange,
+  variant = "line",
+  orientation = "horizontal",
+  className,
+  children,
+  ...props
+}) {
+  const [internalIndex, setInternalIndex] = useState(defaultIndex);
+  const activeIndex = index ?? internalIndex;
+  const setActiveIndex = (newIndex) => {
+    if (index === void 0) {
+      setInternalIndex(newIndex);
+    }
+    onChange?.(newIndex);
+  };
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeIndex, setActiveIndex, variant, orientation }, children: /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        orientation === "vertical" ? "flex-row" : "flex-col",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function TabList({ children, className }) {
+  const { variant, orientation } = useContext(TabsContext);
+  const variantStyles5 = {
+    line: orientation === "horizontal" ? "border-b border-border-default" : "border-r border-border-default",
+    enclosed: "bg-surface-raised rounded-lg p-1",
+    "soft-rounded": "bg-surface-raised rounded-full p-1"
+  };
+  const content = /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        orientation === "horizontal" ? "flex-row" : "flex-col",
+        variantStyles5[variant],
+        className
+      ),
+      children: React24.Children.map(children, (child, index) => {
+        if (React24.isValidElement(child)) {
+          return React24.cloneElement(child, { index });
+        }
+        return child;
+      })
+    }
+  );
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: { flexGrow: 1 },
+        children: content
+      }
+    );
+  }
+  return content;
+}
+function Tab({
+  index = 0,
+  isDisabled = false,
+  className,
+  children
+}) {
+  const { activeIndex, setActiveIndex, variant, orientation } = useContext(TabsContext);
+  const isActive = activeIndex === index;
+  const baseStyles = "font-medium text-sm transition-colors";
+  const variantStyles5 = {
+    line: cn(
+      "px-4 py-2",
+      orientation === "horizontal" ? "-mb-px border-b-2" : "-mr-px border-r-2",
+      isActive ? "border-brand-primary text-brand-primary" : "border-transparent text-text-secondary web:hover:text-text-primary"
+    ),
+    enclosed: cn(
+      "px-4 py-2 rounded-md",
+      isActive ? "bg-surface-elevated text-text-primary shadow-sm" : "text-text-secondary web:hover:text-text-primary"
+    ),
+    "soft-rounded": cn(
+      "px-4 py-2 rounded-full",
+      isActive ? "bg-brand-primary text-white" : "text-text-secondary web:hover:text-text-primary"
+    )
+  };
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "tab",
+      accessibilityState: { selected: isActive, disabled: isDisabled },
+      disabled: isDisabled,
+      onPress: () => setActiveIndex(index),
+      className: cn(
+        baseStyles,
+        variantStyles5[variant],
+        isDisabled && "opacity-50 cursor-not-allowed",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          className: cn(
+            "font-medium",
+            isActive ? variant === "soft-rounded" ? "text-white" : "text-text-primary" : "text-text-secondary"
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function TabPanels({ children, className }) {
+  const { activeIndex } = useContext(TabsContext);
+  return /* @__PURE__ */ jsx(View, { className: cn("flex-1", className), children: React24.Children.map(children, (child, index) => {
+    if (React24.isValidElement(child) && index === activeIndex) {
+      return child;
+    }
+    return null;
+  }) });
+}
+function TabPanel({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("py-4", className), children });
+}
+var colorStyles = {
+  default: {
+    solid: "bg-neutral-600 text-white",
+    subtle: "bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200",
+    outline: "border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-200"
+  },
+  primary: {
+    solid: "bg-brand-primary text-white",
+    subtle: "bg-brand-primary-subtle text-brand-primary",
+    outline: "border border-brand-primary text-brand-primary"
+  },
+  secondary: {
+    solid: "bg-brand-secondary text-white",
+    subtle: "bg-brand-secondary-subtle text-brand-secondary",
+    outline: "border border-brand-secondary text-brand-secondary"
+  },
+  success: {
+    solid: "bg-status-success text-white",
+    subtle: "bg-status-success-subtle text-status-success",
+    outline: "border border-status-success text-status-success"
+  },
+  error: {
+    solid: "bg-status-error text-white",
+    subtle: "bg-status-error-subtle text-status-error",
+    outline: "border border-status-error text-status-error"
+  },
+  warning: {
+    solid: "bg-status-warning text-white",
+    subtle: "bg-status-warning-subtle text-status-warning",
+    outline: "border border-status-warning text-status-warning"
+  },
+  info: {
+    solid: "bg-status-info text-white",
+    subtle: "bg-status-info-subtle text-status-info",
+    outline: "border border-status-info text-status-info"
+  }
+};
+var sizeStyles8 = {
+  sm: { container: "px-2 py-0.5 rounded", text: "text-xs", deleteButton: "ml-1 -mr-0.5" },
+  md: { container: "px-3 py-1 rounded-md", text: "text-sm", deleteButton: "ml-1.5 -mr-1" },
+  lg: { container: "px-4 py-1.5 rounded-md", text: "text-base", deleteButton: "ml-2 -mr-1" }
+};
+function Chip({
+  variant = "subtle",
+  color = "default",
+  size = "md",
+  leftElement,
+  onDelete,
+  onPress,
+  isDisabled = false,
+  className,
+  children,
+  ...props
+}) {
+  const sizes = sizeStyles8[size];
+  const isClickable = !!onPress;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leftElement && /* @__PURE__ */ jsx(View, { className: "mr-1.5", children: leftElement }),
+    /* @__PURE__ */ jsx(Text, { className: cn("font-medium", sizes.text), children }),
+    onDelete && /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: (e) => {
+          e.stopPropagation?.();
+          onDelete();
+        },
+        accessibilityRole: "button",
+        accessibilityLabel: "Remove",
+        disabled: isDisabled,
+        className: cn(
+          sizes.deleteButton,
+          "rounded-full p-0.5 web:hover:bg-black/10 active:bg-black/20"
+        ),
+        children: /* @__PURE__ */ jsx(Text, { className: "text-xs leading-none", children: "\xD7" })
+      }
+    )
+  ] });
+  const baseClassName = cn(
+    "flex-row items-center",
+    sizes.container,
+    colorStyles[color][variant],
+    isClickable && "web:cursor-pointer web:hover:opacity-80 active:opacity-70",
+    isDisabled && "opacity-50 cursor-not-allowed",
+    className
+  );
+  if (isClickable) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        disabled: isDisabled,
+        accessibilityRole: "button",
+        className: baseClassName,
+        ...props,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { className: baseClassName, ...props, children: content });
+}
+var colorStyles2 = {
+  default: "text-text-link",
+  primary: "text-brand-primary",
+  secondary: "text-brand-secondary",
+  inherit: ""
+};
+var underlineStyles = {
+  always: "underline",
+  hover: "no-underline web:hover:underline",
+  none: "no-underline"
+};
+function Link({
+  href,
+  underline = "hover",
+  color = "default",
+  isExternal = false,
+  onPress,
+  isDisabled = false,
+  className,
+  children,
+  ...props
+}) {
+  const handlePress = () => {
+    if (isDisabled) return;
+    onPress?.();
+  };
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress: handlePress,
+      disabled: isDisabled,
+      accessibilityRole: "link",
+      accessibilityHint: isExternal ? "Opens in new window" : void 0,
+      children: /* @__PURE__ */ jsxs(
+        Text,
+        {
+          className: cn(
+            "font-medium",
+            colorStyles2[color],
+            underlineStyles[underline],
+            isDisabled && "opacity-50 cursor-not-allowed",
+            "web:cursor-pointer active:opacity-70",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            isExternal && " \u2197"
+          ]
+        }
+      )
+    }
+  );
+}
+function Tooltip({
+  label,
+  children,
+  placement = "top",
+  openDelay = 0,
+  closeDelay = 0,
+  hasArrow = true,
+  isDisabled = false,
+  className,
+  ...props
+}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const openTimeoutRef = useRef(null);
+  const closeTimeoutRef = useRef(null);
+  const clearTimeouts = () => {
+    if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);
+    if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+  };
+  const show = () => {
+    if (isDisabled) return;
+    clearTimeouts();
+    if (openDelay > 0) {
+      openTimeoutRef.current = setTimeout(() => setIsVisible(true), openDelay);
+    } else {
+      setIsVisible(true);
+    }
+  };
+  const hide = () => {
+    clearTimeouts();
+    if (closeDelay > 0) {
+      closeTimeoutRef.current = setTimeout(() => setIsVisible(false), closeDelay);
+    } else {
+      setIsVisible(false);
+    }
+  };
+  const arrowStyles2 = {
+    top: "bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-l-transparent border-r-transparent border-b-transparent border-t-neutral-800",
+    "top-start": "bottom-0 left-4 translate-y-full border-l-transparent border-r-transparent border-b-transparent border-t-neutral-800",
+    "top-end": "bottom-0 right-4 translate-y-full border-l-transparent border-r-transparent border-b-transparent border-t-neutral-800",
+    bottom: "top-0 left-1/2 -translate-x-1/2 -translate-y-full border-l-transparent border-r-transparent border-t-transparent border-b-neutral-800",
+    "bottom-start": "top-0 left-4 -translate-y-full border-l-transparent border-r-transparent border-t-transparent border-b-neutral-800",
+    "bottom-end": "top-0 right-4 -translate-y-full border-l-transparent border-r-transparent border-t-transparent border-b-neutral-800",
+    left: "right-0 top-1/2 translate-x-full -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent border-l-neutral-800",
+    right: "left-0 top-1/2 -translate-x-full -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent border-r-neutral-800"
+  };
+  const tooltipPositionStyles = {
+    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+    "top-start": "bottom-full left-0 mb-2",
+    "top-end": "bottom-full right-0 mb-2",
+    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+    "bottom-start": "top-full left-0 mt-2",
+    "bottom-end": "top-full right-0 mt-2",
+    left: "right-full top-1/2 -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 -translate-y-1/2 ml-2"
+  };
+  return /* @__PURE__ */ jsxs(View, { className: "relative", ...props, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onHoverIn: show,
+        onHoverOut: hide,
+        onLongPress: show,
+        onPressOut: hide,
+        delayLongPress: 500,
+        children
+      }
+    ),
+    isVisible && /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "absolute z-50",
+          tooltipPositionStyles[placement],
+          className
+        ),
+        pointerEvents: "none",
+        children: /* @__PURE__ */ jsxs(View, { className: "bg-neutral-800 px-3 py-2 rounded-md shadow-lg max-w-xs", children: [
+          /* @__PURE__ */ jsx(Text, { className: "text-white text-sm", children: label }),
+          hasArrow && /* @__PURE__ */ jsx(
+            View,
+            {
+              className: cn(
+                "absolute w-0 h-0 border-4",
+                arrowStyles2[placement]
+              )
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+var CollapseContext = createContext({
+  isOpen: false,
+  toggle: () => {
+  }
+});
+function Collapse({
+  defaultIsOpen = false,
+  isOpen: controlledIsOpen,
+  onToggle,
+  className,
+  children,
+  ...props
+}) {
+  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);
+  const isOpen = controlledIsOpen ?? internalIsOpen;
+  const toggle = () => {
+    const newState = !isOpen;
+    if (controlledIsOpen === void 0) {
+      setInternalIsOpen(newState);
+    }
+    onToggle?.(newState);
+  };
+  return /* @__PURE__ */ jsx(CollapseContext.Provider, { value: { isOpen, toggle }, children: /* @__PURE__ */ jsx(View, { className: cn("w-full", className), ...props, children }) });
+}
+function CollapseButton({ children, className }) {
+  const { isOpen, toggle } = useContext(CollapseContext);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      onPress: toggle,
+      accessibilityRole: "button",
+      accessibilityState: { expanded: isOpen },
+      className: cn(
+        "flex-row items-center justify-between py-3 px-4",
+        "web:hover:bg-interactive-hover active:bg-interactive-active rounded-lg",
+        className
+      ),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Text, { className: cn("text-text-secondary transition-transform", isOpen && "rotate-180"), children: "\u25BC" })
+      ]
+    }
+  );
+}
+function CollapseContent({ children, className }) {
+  const { isOpen } = useContext(CollapseContext);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(View, { className: cn("overflow-hidden", className), children });
+}
+var AccordionContext = createContext({
+  openIndices: /* @__PURE__ */ new Set(),
+  toggleIndex: () => {
+  },
+  allowMultiple: false
+});
+function Accordion({
+  allowMultiple = false,
+  defaultIndex = [],
+  className,
+  children,
+  ...props
+}) {
+  const [openIndices, setOpenIndices] = useState(new Set(defaultIndex));
+  const toggleIndex = (index) => {
+    setOpenIndices((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(index)) {
+        newSet.delete(index);
+      } else {
+        if (!allowMultiple) {
+          newSet.clear();
+        }
+        newSet.add(index);
+      }
+      return newSet;
+    });
+  };
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openIndices, toggleIndex, allowMultiple }, children: /* @__PURE__ */ jsx(View, { className: cn("w-full divide-y divide-border-default", className), ...props, children: React24.Children.map(children, (child, index) => {
+    if (React24.isValidElement(child)) {
+      return React24.cloneElement(child, { index });
+    }
+    return child;
+  }) }) });
+}
+function AccordionItem({ index = 0, children, className }) {
+  const { openIndices, toggleIndex } = useContext(AccordionContext);
+  const isOpen = openIndices.has(index);
+  return /* @__PURE__ */ jsx(View, { className, children: React24.Children.map(children, (child) => {
+    if (React24.isValidElement(child)) {
+      return React24.cloneElement(child, {
+        isOpen,
+        onToggle: () => toggleIndex(index)
+      });
+    }
+    return child;
+  }) });
+}
+function AccordionButton({
+  isOpen = false,
+  onToggle,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      onPress: onToggle,
+      accessibilityRole: "button",
+      accessibilityState: { expanded: isOpen },
+      className: cn(
+        "flex-row items-center justify-between py-4 px-1",
+        "web:hover:bg-interactive-hover active:bg-interactive-active",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Text, { className: "text-text-primary font-medium", children }),
+        /* @__PURE__ */ jsx(Text, { className: cn("text-text-secondary transition-transform", isOpen && "rotate-180"), children: "\u25BC" })
+      ]
+    }
+  );
+}
+function AccordionPanel({ isOpen = false, children, className }) {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(View, { className: cn("pb-4 px-1", className), children });
+}
+function Breadcrumbs({
+  separator = "/",
+  maxItems,
+  className,
+  children,
+  ...props
+}) {
+  const items = React24.Children.toArray(children);
+  let displayItems = items;
+  if (maxItems && items.length > maxItems) {
+    const firstItem = items[0];
+    const lastItems = items.slice(-Math.floor(maxItems / 2));
+    displayItems = [
+      firstItem,
+      /* @__PURE__ */ jsx(BreadcrumbEllipsis, {}, "ellipsis"),
+      ...lastItems
+    ];
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "none",
+      className: cn("flex-row items-center flex-wrap", className),
+      ...props,
+      children: displayItems.map((child, index) => /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", children: [
+        child,
+        index < displayItems.length - 1 && /* @__PURE__ */ jsx(Text, { className: "mx-2 text-text-tertiary text-sm", children: separator })
+      ] }, index))
+    }
+  );
+}
+function BreadcrumbItem({
+  href,
+  isCurrentPage = false,
+  onPress,
+  className,
+  children
+}) {
+  if (isCurrentPage) {
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        accessibilityRole: "text",
+        "aria-current": "page",
+        className: cn("text-sm font-medium text-text-primary", className),
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress,
+      accessibilityRole: "link",
+      accessibilityHint: href,
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          className: cn(
+            "text-sm text-text-secondary",
+            "web:hover:text-text-primary web:hover:underline",
+            "active:opacity-70",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function BreadcrumbEllipsis() {
+  return /* @__PURE__ */ jsx(Text, { className: "text-sm text-text-tertiary", children: "..." });
+}
+var PopoverContext = createContext({
+  isOpen: false,
+  setIsOpen: () => {
+  },
+  placement: "bottom"
+});
+function Popover({
+  placement = "bottom",
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  closeOnClickOutside = true,
+  className,
+  children,
+  ...props
+}) {
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const isOpen = controlledIsOpen ?? internalIsOpen;
+  const setIsOpen = (open) => {
+    if (controlledIsOpen === void 0) {
+      setInternalIsOpen(open);
+    }
+    onOpenChange?.(open);
+  };
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: { isOpen, setIsOpen, placement }, children: /* @__PURE__ */ jsx(View, { className: cn("relative", className), ...props, children }) });
+}
+function PopoverTrigger({ children, className }) {
+  const { isOpen, setIsOpen } = useContext(PopoverContext);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress: () => setIsOpen(!isOpen),
+      accessibilityRole: "button",
+      accessibilityState: { expanded: isOpen },
+      className,
+      children
+    }
+  );
+}
+function PopoverContent({ children, className }) {
+  const { isOpen, setIsOpen, placement } = useContext(PopoverContext);
+  if (!isOpen) return null;
+  const placementStyles3 = {
+    top: "bottom-full left-0 mb-2",
+    bottom: "top-full left-0 mt-2",
+    left: "right-full top-0 mr-2",
+    right: "left-full top-0 ml-2"
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: () => setIsOpen(false),
+        className: "fixed inset-0 z-40",
+        style: { position: "absolute" }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "absolute z-50 min-w-[200px]",
+          "bg-surface-elevated rounded-lg shadow-lg border border-border-default",
+          "p-4",
+          placementStyles3[placement],
+          className
+        ),
+        children
+      }
+    )
+  ] });
+}
+function PopoverCloseButton({ children, className }) {
+  const { setIsOpen } = useContext(PopoverContext);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress: () => setIsOpen(false),
+      accessibilityRole: "button",
+      accessibilityLabel: "Close popover",
+      className: cn("p-1", className),
+      children
+    }
+  );
+}
+var MenuContext = createContext({
+  isOpen: false,
+  setIsOpen: () => {
+  },
+  closeMenu: () => {
+  }
+});
+function Menu({
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  className,
+  children,
+  ...props
+}) {
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const isOpen = controlledIsOpen ?? internalIsOpen;
+  const setIsOpen = (open) => {
+    if (controlledIsOpen === void 0) {
+      setInternalIsOpen(open);
+    }
+    onOpenChange?.(open);
+  };
+  const closeMenu = () => setIsOpen(false);
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: { isOpen, setIsOpen, closeMenu }, children: /* @__PURE__ */ jsx(View, { className: cn("relative", className), ...props, children }) });
+}
+function MenuTrigger({ children, className }) {
+  const { isOpen, setIsOpen } = useContext(MenuContext);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress: () => setIsOpen(!isOpen),
+      accessibilityRole: "button",
+      accessibilityState: { expanded: isOpen },
+      className,
+      children
+    }
+  );
+}
+function MenuList({ children, className }) {
+  const { isOpen, setIsOpen } = useContext(MenuContext);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: () => setIsOpen(false),
+        className: "fixed inset-0 z-40",
+        style: { position: "absolute" }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "absolute z-50 top-full left-0 mt-1 min-w-[160px]",
+          "bg-surface-elevated rounded-lg shadow-lg border border-border-default",
+          "py-1 overflow-hidden",
+          className
+        ),
+        accessibilityRole: "menu",
+        children
+      }
+    )
+  ] });
+}
+function MenuItem({
+  onPress,
+  isDisabled = false,
+  isDestructive = false,
+  icon,
+  className,
+  children
+}) {
+  const { closeMenu } = useContext(MenuContext);
+  const handlePress = () => {
+    if (isDisabled) return;
+    onPress?.();
+    closeMenu();
+  };
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      onPress: handlePress,
+      disabled: isDisabled,
+      accessibilityRole: "menuitem",
+      accessibilityState: { disabled: isDisabled },
+      className: cn(
+        "flex-row items-center px-4 py-2",
+        "web:hover:bg-interactive-hover active:bg-interactive-active",
+        isDisabled && "opacity-50 cursor-not-allowed",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx(View, { className: "mr-3", children: icon }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: cn(
+              "text-sm",
+              isDestructive ? "text-status-error" : "text-text-primary"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function MenuDivider({ className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("h-px bg-border-default my-1", className) });
+}
+function MenuGroup({ label, children, className }) {
+  return /* @__PURE__ */ jsxs(View, { className, children: [
+    label && /* @__PURE__ */ jsx(Text, { className: "px-4 py-2 text-xs font-semibold text-text-secondary uppercase", children: label }),
+    children
+  ] });
+}
+var SelectContext = createContext({
+  value: null,
+  isMulti: false,
+  isOpen: false,
+  setIsOpen: () => {
+  },
+  selectValue: () => {
+  },
+  isSelected: () => false
+});
+function Select({
+  value,
+  values = [],
+  onChange,
+  onChangeMulti,
+  isMulti = false,
+  placeholder = "Select...",
+  isDisabled = false,
+  isInvalid = false,
+  options,
+  className,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const selectValue = (val) => {
+    if (isMulti) {
+      const newValues = values.includes(val) ? values.filter((v) => v !== val) : [...values, val];
+      onChangeMulti?.(newValues);
+    } else {
+      onChange?.(val);
+      setIsOpen(false);
+    }
+  };
+  const isSelected = (val) => {
+    if (isMulti) {
+      return values.includes(val);
+    }
+    return value === val;
+  };
+  const getDisplayValue = () => {
+    if (isMulti) {
+      if (values.length === 0) return placeholder;
+      if (values.length === 1) {
+        return options.find((o) => o.value === values[0])?.label || placeholder;
+      }
+      return `${values.length} selected`;
+    }
+    if (value === null || value === void 0) return placeholder;
+    return options.find((o) => o.value === value)?.label || placeholder;
+  };
+  const clearValue = () => {
+    if (isMulti) {
+      onChangeMulti?.([]);
+    } else {
+      onChange?.(null);
+    }
+  };
+  const hasValue = isMulti ? values.length > 0 : value !== null && value !== void 0;
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { value, isMulti, isOpen, setIsOpen, selectValue, isSelected }, children: /* @__PURE__ */ jsxs(View, { className: cn("relative w-full", className), ...props, children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        onPress: () => !isDisabled && setIsOpen(!isOpen),
+        disabled: isDisabled,
+        accessibilityRole: "combobox",
+        accessibilityState: { expanded: isOpen, disabled: isDisabled },
+        className: cn(
+          "flex-row items-center justify-between px-4 py-2.5 rounded-md border",
+          "bg-surface-base",
+          isInvalid ? "border-border-input-error" : "border-border-input",
+          !isDisabled && !isInvalid && "web:hover:border-border-input-hover",
+          isOpen && "border-border-input-focus",
+          isDisabled && "opacity-50 cursor-not-allowed"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: cn(
+                "flex-1",
+                hasValue ? "text-text-primary" : "text-text-tertiary"
+              ),
+              children: getDisplayValue()
+            }
+          ),
+          /* @__PURE__ */ jsxs(View, { className: "flex-row items-center gap-2", children: [
+            hasValue && /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: (e) => {
+                  e.stopPropagation?.();
+                  clearValue();
+                },
+                className: "p-1",
+                children: /* @__PURE__ */ jsx(Text, { className: "text-text-secondary text-xs", children: "\xD7" })
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { className: cn("text-text-secondary", isOpen && "rotate-180"), children: "\u25BC" })
+          ] })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          onPress: () => setIsOpen(false),
+          className: "fixed inset-0 z-40",
+          style: { position: "absolute" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          className: cn(
+            "absolute z-50 top-full left-0 right-0 mt-1",
+            "bg-surface-elevated rounded-md shadow-lg border border-border-default",
+            "max-h-60 overflow-hidden"
+          ),
+          children: /* @__PURE__ */ jsx(ScrollView, { className: "py-1", children: options.map((option) => /* @__PURE__ */ jsx(SelectOption, { option }, option.value)) })
+        }
+      )
+    ] })
+  ] }) });
+}
+function SelectOption({ option }) {
+  const { selectValue, isSelected, isMulti } = useContext(SelectContext);
+  const selected = isSelected(option.value);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      onPress: () => !option.isDisabled && selectValue(option.value),
+      disabled: option.isDisabled,
+      accessibilityRole: isMulti ? "checkbox" : "option",
+      accessibilityState: { selected, disabled: option.isDisabled },
+      className: cn(
+        "flex-row items-center px-4 py-2",
+        "web:hover:bg-interactive-hover active:bg-interactive-active",
+        selected && "bg-interactive-selected",
+        option.isDisabled && "opacity-50 cursor-not-allowed"
+      ),
+      children: [
+        isMulti && /* @__PURE__ */ jsx(
+          View,
+          {
+            className: cn(
+              "w-4 h-4 mr-3 rounded border",
+              selected ? "bg-brand-primary border-brand-primary" : "border-border-strong"
+            ),
+            children: selected && /* @__PURE__ */ jsx(Text, { className: "text-white text-xs text-center", children: "\u2713" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { className: cn("text-sm", selected && !isMulti ? "text-brand-primary font-medium" : "text-text-primary"), children: option.label })
+      ]
+    }
+  );
+}
+var ToolbarButtonContext = createContext({
+  isOpen: false,
+  setIsOpen: () => {
+  }
+});
+var BUTTON_BG = "#3C3C3C";
+var MENU_BG = "#2C2C2C";
+var hoverColors = getHoverColors(BUTTON_BG, "medium");
+var sizeStyles9 = {
+  sm: "px-2 py-1 min-h-[26px]",
+  md: "px-2.5 py-1 min-h-[30px]",
+  lg: "px-3 py-1.5 min-h-[36px]"
+};
+var textSizeStyles2 = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+function ToolbarButton({
+  label,
+  icon,
+  isActive,
+  isDisabled = false,
+  size = "md",
+  variant = "neumorphic",
+  tooltip,
+  showLabel = true,
+  onPress,
+  menuContent,
+  className,
+  children,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const handlePress = useCallback(() => {
+    if (isDisabled) return;
+    if (menuContent) {
+      setIsOpen((prev) => !prev);
+    }
+    onPress?.();
+  }, [isDisabled, menuContent, onPress]);
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const selected = isActive === void 0 ? isOpen : isActive;
+  const showActive = isActive !== false;
+  const getIconColor = () => {
+    if (isActive === true) return "#FF7900";
+    return showActive ? "#FFFFFF" : "#D1D1D1";
+  };
+  const getNeumorphicStyle = () => {
+    if (isDisabled) {
+      return styles.disabledBg;
+    }
+    const shadows = neumorphicShadows.charcoal;
+    if (showActive) {
+      return {
+        backgroundColor: isHovered ? hoverColors.pressed : BUTTON_BG,
+        ...isHovered ? shadows.pressedHover.subtle : shadows.pressed.subtle
+      };
+    } else {
+      return {
+        backgroundColor: isHovered ? hoverColors.raised : BUTTON_BG,
+        ...isHovered ? shadows.raisedHover.subtle : shadows.raised.subtle
+      };
+    }
+  };
+  return /* @__PURE__ */ jsx(ToolbarButtonContext.Provider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsxs(View, { className: "relative", ...props, children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        onPress: handlePress,
+        onHoverIn: () => setIsHovered(true),
+        onHoverOut: () => setIsHovered(false),
+        disabled: isDisabled,
+        accessibilityRole: "button",
+        accessibilityState: { selected, disabled: isDisabled },
+        accessibilityLabel: label,
+        accessibilityHint: tooltip,
+        className: cn(
+          // Base styles
+          "flex-row items-center justify-center rounded",
+          "web:transition-all web:duration-150 web:cursor-pointer",
+          // Size
+          sizeStyles9[size],
+          // Disabled
+          isDisabled && "opacity-40 web:cursor-default web:pointer-events-none",
+          className
+        ),
+        style: [
+          variant === "neumorphic" && getNeumorphicStyle(),
+          variant === "default" && {
+            backgroundColor: showActive ? BUTTON_BG : "#6E6E6E"
+          }
+        ],
+        children: [
+          icon && /* @__PURE__ */ jsx(View, { className: "w-5 h-5 items-center justify-center", children: React24.isValidElement(icon) ? React24.cloneElement(icon, {
+            size: 20,
+            width: 20,
+            height: 20,
+            color: getIconColor(),
+            style: {
+              color: getIconColor(),
+              width: 20,
+              height: 20
+            }
+          }) : icon }),
+          showLabel && /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: cn(
+                "font-bold",
+                textSizeStyles2[size],
+                icon && "ml-2",
+                showActive ? "text-white" : "text-[#D1D1D1]"
+              ),
+              numberOfLines: 1,
+              children: label
+            }
+          )
+        ]
+      }
+    ),
+    menuContent && isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          onPress: handleClose,
+          style: StyleSheet.absoluteFill,
+          className: "z-40"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          className: cn(
+            "absolute z-50 top-full left-0 mt-1",
+            "rounded-lg shadow-lg border border-border-default",
+            "min-w-[150px] overflow-hidden",
+            `bg-[${MENU_BG}]`
+          ),
+          children: menuContent
+        }
+      )
+    ] })
+  ] }) });
+}
+var styles = StyleSheet.create({
+  // Disabled - flat gray background, no shadows
+  disabledBg: {
+    backgroundColor: "rgba(255, 255, 255, 0.12)",
+    ...Platform.select({
+      web: { boxShadow: "none" },
+      default: { shadowOpacity: 0, elevation: 0 }
+    })
+  }
+});
+var gapStyles = {
+  none: "gap-0",
+  sm: "gap-1",
+  md: "gap-2"
+};
+function ToolbarButtonGroup({
+  orientation = "horizontal",
+  gap = "sm",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        orientation === "horizontal" ? "flex-row" : "flex-col",
+        gapStyles[gap],
+        "items-center",
+        className
+      ),
+      accessibilityRole: "toolbar",
+      ...props,
+      children
+    }
+  );
+}
+function useToolbarButton() {
+  return useContext(ToolbarButtonContext);
+}
+var RadioGroupContext = createContext(null);
+var gapStyles2 = {
+  sm: "gap-2",
+  md: "gap-3",
+  lg: "gap-4"
+};
+function RadioGroup({
+  value,
+  onChange,
+  name,
+  isDisabled = false,
+  size = "md",
+  color = "primary",
+  orientation = "vertical",
+  gap = "md",
+  label,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { value, onChange, name, isDisabled, size, color }, children: /* @__PURE__ */ jsxs(
+    View,
+    {
+      className: cn(className),
+      accessibilityRole: "radiogroup",
+      accessibilityLabel: label,
+      ...props,
+      children: [
+        label && /* @__PURE__ */ jsx(Text, { className: "text-sm font-medium text-text-primary mb-2", children: label }),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            className: cn(
+              orientation === "horizontal" ? "flex-row flex-wrap" : "flex-col",
+              gapStyles2[gap]
+            ),
+            children
+          }
+        )
+      ]
+    }
+  ) });
+}
+var sizeConfig = {
+  sm: { outer: "w-4 h-4", inner: "w-2 h-2", text: "text-sm" },
+  md: { outer: "w-5 h-5", inner: "w-2.5 h-2.5", text: "text-base" },
+  lg: { outer: "w-6 h-6", inner: "w-3 h-3", text: "text-lg" }
+};
+var colorStyles3 = {
+  primary: { checked: "border-brand-primary bg-brand-primary", unchecked: "border-border-strong" },
+  secondary: { checked: "border-brand-secondary bg-brand-secondary", unchecked: "border-border-strong" },
+  success: { checked: "border-status-success bg-status-success", unchecked: "border-border-strong" },
+  error: { checked: "border-status-error bg-status-error", unchecked: "border-border-strong" }
+};
+function Radio({
+  value,
+  isDisabled: radioDisabled,
+  size: radioSize,
+  color: radioColor,
+  className,
+  children,
+  ...props
+}) {
+  const context = useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error("Radio must be used within a RadioGroup");
+  }
+  const { value: selectedValue, onChange, isDisabled: groupDisabled, size: groupSize, color: groupColor } = context;
+  const isDisabled = radioDisabled ?? groupDisabled ?? false;
+  const size = radioSize ?? groupSize ?? "md";
+  const color = radioColor ?? groupColor ?? "primary";
+  const isChecked = selectedValue === value;
+  const { outer, inner, text } = sizeConfig[size];
+  const { checked, unchecked } = colorStyles3[color];
+  const handlePress = () => {
+    if (!isDisabled) {
+      onChange(value);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      onPress: handlePress,
+      disabled: isDisabled,
+      accessibilityRole: "radio",
+      accessibilityState: { checked: isChecked, disabled: isDisabled },
+      className: cn(
+        "flex-row items-center",
+        isDisabled && "opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            className: cn(
+              "rounded-full border-2 items-center justify-center",
+              "transition-colors duration-150",
+              outer,
+              isChecked ? checked : unchecked,
+              !isDisabled && !isChecked && "web:hover:border-brand-primary"
+            ),
+            children: isChecked && /* @__PURE__ */ jsx(View, { className: cn("rounded-full bg-white", inner) })
+          }
+        ),
+        children && /* @__PURE__ */ jsx(Text, { className: cn("ml-2 text-text-primary", text), children })
+      ]
+    }
+  );
+}
+var sizeStyles10 = {
+  left: {
+    sm: "w-64",
+    md: "w-80",
+    lg: "w-96",
+    xl: "w-[480px]",
+    full: "w-full"
+  },
+  right: {
+    sm: "w-64",
+    md: "w-80",
+    lg: "w-96",
+    xl: "w-[480px]",
+    full: "w-full"
+  },
+  top: {
+    sm: "h-32",
+    md: "h-48",
+    lg: "h-64",
+    xl: "h-96",
+    full: "h-full"
+  },
+  bottom: {
+    sm: "h-32",
+    md: "h-48",
+    lg: "h-64",
+    xl: "h-96",
+    full: "h-full"
+  }
+};
+var placementStyles = {
+  left: "left-0 top-0 bottom-0 h-full",
+  right: "right-0 top-0 bottom-0 h-full",
+  top: "top-0 left-0 right-0 w-full",
+  bottom: "bottom-0 left-0 right-0 w-full"
+};
+function Drawer({
+  isOpen,
+  onClose,
+  placement = "right",
+  size = "md",
+  closeOnOverlayClick = true,
+  showCloseButton = true,
+  title,
+  className,
+  children,
+  ...props
+}) {
+  if (!isOpen) return null;
+  const handleOverlayPress = () => {
+    if (closeOnOverlayClick) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Modal$1,
+    {
+      visible: isOpen,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsxs(View, { className: "flex-1", children: [
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            onPress: handleOverlayPress,
+            className: "absolute inset-0 bg-black/50"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            className: cn(
+              "absolute bg-surface-elevated shadow-2xl",
+              placementStyles[placement],
+              sizeStyles10[placement][size],
+              className
+            ),
+            accessibilityRole: "dialog",
+            ...props,
+            children: [
+              (title || showCloseButton) && /* @__PURE__ */ jsxs(View, { className: "flex-row items-center justify-between px-4 py-3 border-b border-border-default", children: [
+                title && /* @__PURE__ */ jsx(Text, { className: "text-lg font-semibold text-text-primary", children: title }),
+                showCloseButton && /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    onPress: onClose,
+                    className: "p-2 -m-2 rounded-full web:hover:bg-interactive-hover",
+                    accessibilityLabel: "Close drawer",
+                    children: /* @__PURE__ */ jsx(Text, { className: "text-text-secondary text-xl", children: "\xD7" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(View, { className: "flex-1", children })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function DrawerHeader({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn("px-4 py-3 border-b border-border-default", className),
+      ...props,
+      children
+    }
+  );
+}
+function DrawerBody({ scrollable = true, className, children, ...props }) {
+  if (scrollable) {
+    return /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        className: cn("flex-1 p-4", className),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { className: cn("flex-1 p-4", className), ...props, children });
+}
+function DrawerFooter({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        "flex-row items-center justify-end gap-3",
+        "px-4 py-3 border-t border-border-default",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var colorVarMap = {
+  primary: "var(--color-brand-primary)",
+  secondary: "var(--color-brand-secondary)",
+  success: "var(--color-status-success)",
+  error: "var(--color-status-error)",
+  warning: "var(--color-status-warning)",
+  info: "var(--color-status-info)"
+};
+var sizeStyles11 = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3"
+};
+var colorStyles4 = {
+  primary: "bg-brand-primary",
+  secondary: "bg-brand-secondary",
+  success: "bg-status-success",
+  error: "bg-status-error",
+  warning: "bg-status-warning",
+  info: "bg-status-info"
+};
+var trackColorStyles = {
+  primary: "bg-brand-primary/20",
+  secondary: "bg-brand-secondary/20",
+  success: "bg-status-success/20",
+  error: "bg-status-error/20",
+  warning: "bg-status-warning/20",
+  info: "bg-status-info/20"
+};
+function Progress({
+  value = 0,
+  max = 100,
+  isIndeterminate = false,
+  size = "md",
+  color = "primary",
+  showValue = false,
+  formatValue = (v, m) => `${Math.round(v / m * 100)}%`,
+  label,
+  className,
+  ...props
+}) {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  return /* @__PURE__ */ jsxs(View, { className: cn("w-full", className), ...props, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs(View, { className: "flex-row justify-between items-center mb-1", children: [
+      label && /* @__PURE__ */ jsx(Text, { className: "text-sm text-text-secondary", children: label }),
+      showValue && !isIndeterminate && /* @__PURE__ */ jsx(Text, { className: "text-sm font-medium text-text-primary", children: formatValue(value, max) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "w-full rounded-full overflow-hidden",
+          trackColorStyles[color],
+          sizeStyles11[size]
+        ),
+        accessibilityRole: "progressbar",
+        accessibilityValue: {
+          min: 0,
+          max,
+          now: isIndeterminate ? void 0 : value
+        },
+        children: /* @__PURE__ */ jsx(
+          View,
+          {
+            className: cn(
+              "h-full rounded-full",
+              colorStyles4[color],
+              isIndeterminate && "animate-pulse w-1/3"
+            ),
+            style: isIndeterminate ? void 0 : { width: `${percentage}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+function CircularProgress({
+  value = 0,
+  max = 100,
+  isIndeterminate = false,
+  size = 48,
+  strokeWidth = 4,
+  color = "primary",
+  showValue = false,
+  formatValue = (v, m) => `${Math.round(v / m * 100)}%`,
+  className,
+  ...props
+}) {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      className: cn("items-center justify-center", className),
+      style: { width: size, height: size },
+      accessibilityRole: "progressbar",
+      accessibilityValue: {
+        min: 0,
+        max,
+        now: isIndeterminate ? void 0 : value
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            className: cn(
+              "absolute rounded-full border-4",
+              "border-border-default"
+            ),
+            style: {
+              width: size,
+              height: size,
+              borderWidth: strokeWidth
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            className: cn(
+              "absolute rounded-full",
+              colorStyles4[color],
+              isIndeterminate && "animate-spin"
+            ),
+            style: {
+              width: size,
+              height: size,
+              borderWidth: strokeWidth,
+              borderColor: "transparent",
+              borderTopColor: colorVarMap[color],
+              borderRightColor: percentage > 25 ? colorVarMap[color] : "transparent",
+              borderBottomColor: percentage > 50 ? colorVarMap[color] : "transparent",
+              borderLeftColor: percentage > 75 ? colorVarMap[color] : "transparent"
+            }
+          }
+        ),
+        showValue && !isIndeterminate && /* @__PURE__ */ jsx(Text, { className: "text-xs font-semibold text-text-primary", children: formatValue(value, max) })
+      ]
+    }
+  );
+}
+var stepSizeStyles = {
+  sm: { dot: "w-2 h-2", connector: "h-0.5" },
+  md: { dot: "w-3 h-3", connector: "h-1" },
+  lg: { dot: "w-4 h-4", connector: "h-1.5" }
+};
+function ProgressSteps({
+  currentStep,
+  totalSteps,
+  color = "primary",
+  size = "md",
+  labels,
+  className,
+  ...props
+}) {
+  const { dot, connector } = stepSizeStyles[size];
+  return /* @__PURE__ */ jsxs(View, { className: cn("w-full", className), ...props, children: [
+    /* @__PURE__ */ jsx(View, { className: "flex-row items-center", children: Array.from({ length: totalSteps }).map((_, index) => /* @__PURE__ */ jsxs(React24.Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          className: cn(
+            "rounded-full",
+            dot,
+            index <= currentStep ? colorStyles4[color] : "bg-border-strong"
+          )
+        }
+      ),
+      index < totalSteps - 1 && /* @__PURE__ */ jsx(
+        View,
+        {
+          className: cn(
+            "flex-1 mx-1",
+            connector,
+            index < currentStep ? colorStyles4[color] : "bg-border-strong"
+          )
+        }
+      )
+    ] }, index)) }),
+    labels && labels.length > 0 && /* @__PURE__ */ jsx(View, { className: "flex-row mt-2", children: labels.map((label, index) => /* @__PURE__ */ jsx(
+      Text,
+      {
+        className: cn(
+          "flex-1 text-xs text-center",
+          index <= currentStep ? "text-text-primary font-medium" : "text-text-tertiary"
+        ),
+        children: label
+      },
+      index
+    )) })
+  ] });
+}
+var ToastContext = createContext(null);
+var toastIdCounter = 0;
+var positionStyles = {
+  "top": "top-4 left-1/2 -translate-x-1/2",
+  "top-right": "top-4 right-4",
+  "top-left": "top-4 left-4",
+  "bottom": "bottom-4 left-1/2 -translate-x-1/2",
+  "bottom-right": "bottom-4 right-4",
+  "bottom-left": "bottom-4 left-4"
+};
+function ToastProvider({
+  position = "top-right",
+  defaultDuration = 5e3,
+  maxToasts = 5,
+  children
+}) {
+  const [toasts, setToasts] = useState([]);
+  const addToast = useCallback((config) => {
+    const id = `toast-${++toastIdCounter}`;
+    const newToast = {
+      id,
+      duration: defaultDuration,
+      isClosable: true,
+      status: "info",
+      ...config
+    };
+    setToasts((prev) => {
+      const updated = [newToast, ...prev];
+      return updated.slice(0, maxToasts);
+    });
+    return id;
+  }, [defaultDuration, maxToasts]);
+  const removeToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const removeAllToasts = useCallback(() => {
+    setToasts([]);
+  }, []);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toasts, addToast, removeToast, removeAllToasts }, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "fixed z-[9999] flex flex-col gap-2",
+          positionStyles[position]
+        ),
+        pointerEvents: "box-none",
+        children: toasts.map((toast) => /* @__PURE__ */ jsx(
+          ToastItem,
+          {
+            ...toast,
+            onClose: () => {
+              removeToast(toast.id);
+              toast.onClose?.();
+            }
+          },
+          toast.id
+        ))
+      }
+    )
+  ] });
+}
+function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}
+var statusStyles = {
+  success: {
+    bg: "bg-status-success/10",
+    border: "border-status-success",
+    icon: "\u2713"
+  },
+  error: {
+    bg: "bg-status-error/10",
+    border: "border-status-error",
+    icon: "\u2715"
+  },
+  warning: {
+    bg: "bg-status-warning/10",
+    border: "border-status-warning",
+    icon: "\u26A0"
+  },
+  info: {
+    bg: "bg-status-info/10",
+    border: "border-status-info",
+    icon: "\u2139"
+  }
+};
+var iconColors = {
+  success: "text-status-success",
+  error: "text-status-error",
+  warning: "text-status-warning",
+  info: "text-status-info"
+};
+function ToastItem({
+  id,
+  title,
+  description,
+  status = "info",
+  duration = 5e3,
+  isClosable = true,
+  onClose
+}) {
+  const { bg, border, icon } = statusStyles[status];
+  useEffect(() => {
+    if (duration > 0) {
+      const timer = setTimeout(onClose, duration);
+      return () => clearTimeout(timer);
+    }
+  }, [duration, onClose]);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        "min-w-[280px] max-w-[400px] rounded-lg border-l-4 shadow-lg",
+        "bg-surface-elevated",
+        border
+      ),
+      accessibilityRole: "alert",
+      children: /* @__PURE__ */ jsxs(View, { className: cn("flex-row items-start p-3", bg), children: [
+        /* @__PURE__ */ jsx(View, { className: cn("w-6 h-6 items-center justify-center mr-3"), children: /* @__PURE__ */ jsx(Text, { className: cn("text-lg", iconColors[status]), children: icon }) }),
+        /* @__PURE__ */ jsxs(View, { className: "flex-1", children: [
+          /* @__PURE__ */ jsx(Text, { className: "text-sm font-semibold text-text-primary", children: title }),
+          description && /* @__PURE__ */ jsx(Text, { className: "text-sm text-text-secondary mt-0.5", children: description })
+        ] }),
+        isClosable && /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            onPress: onClose,
+            className: "p-1 -m-1 rounded web:hover:bg-interactive-hover",
+            accessibilityLabel: "Close toast",
+            children: /* @__PURE__ */ jsx(Text, { className: "text-text-tertiary text-lg", children: "\xD7" })
+          }
+        )
+      ] })
+    }
+  );
+}
+function Toast({
+  title,
+  description,
+  status = "info",
+  showIcon = true,
+  isClosable = false,
+  onClose,
+  className,
+  ...props
+}) {
+  const { bg, border, icon } = statusStyles[status];
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        "min-w-[280px] max-w-[400px] rounded-lg border-l-4 shadow-lg",
+        "bg-surface-elevated",
+        border,
+        className
+      ),
+      accessibilityRole: "alert",
+      ...props,
+      children: /* @__PURE__ */ jsxs(View, { className: cn("flex-row items-start p-3", bg), children: [
+        showIcon && /* @__PURE__ */ jsx(View, { className: "w-6 h-6 items-center justify-center mr-3", children: /* @__PURE__ */ jsx(Text, { className: cn("text-lg", iconColors[status]), children: icon }) }),
+        /* @__PURE__ */ jsxs(View, { className: "flex-1", children: [
+          /* @__PURE__ */ jsx(Text, { className: "text-sm font-semibold text-text-primary", children: title }),
+          description && /* @__PURE__ */ jsx(Text, { className: "text-sm text-text-secondary mt-0.5", children: description })
+        ] }),
+        isClosable && onClose && /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            onPress: onClose,
+            className: "p-1 -m-1 rounded web:hover:bg-interactive-hover",
+            accessibilityLabel: "Close toast",
+            children: /* @__PURE__ */ jsx(Text, { className: "text-text-tertiary text-lg", children: "\xD7" })
+          }
+        )
+      ] })
+    }
+  );
+}
+var defaultFilterFn = (option, inputValue) => {
+  const searchLower = inputValue.toLowerCase();
+  return option.label.toLowerCase().includes(searchLower) || (option.description?.toLowerCase().includes(searchLower) ?? false);
+};
+function Autocomplete({
+  options,
+  value,
+  onChange,
+  onInputChange,
+  minChars = 0,
+  placeholder = "Search...",
+  label,
+  helperText,
+  errorMessage,
+  isRequired = false,
+  isDisabled = false,
+  isLoading = false,
+  isClearable = true,
+  filterFn = defaultFilterFn,
+  renderOption,
+  noOptionsText = "No options found",
+  loadingText = "Loading...",
+  minCharsText,
+  className,
+  inputProps,
+  ...props
+}) {
+  const [inputValue, setInputValue] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const selectedOption = useMemo(
+    () => options.find((o) => o.value === value),
+    [options, value]
+  );
+  const filteredOptions = useMemo(() => {
+    if (inputValue.length < minChars) return [];
+    return options.filter((option) => filterFn(option, inputValue));
+  }, [options, inputValue, minChars, filterFn]);
+  const handleInputChange = useCallback(
+    (text) => {
+      setInputValue(text);
+      setIsOpen(true);
+      setHighlightedIndex(-1);
+      onInputChange?.(text);
+    },
+    [onInputChange]
+  );
+  const handleSelectOption = useCallback(
+    (option) => {
+      if (option.isDisabled) return;
+      onChange?.(option.value);
+      setInputValue(option.label);
+      setIsOpen(false);
+    },
+    [onChange]
+  );
+  const handleClear = useCallback(() => {
+    onChange?.(null);
+    setInputValue("");
+    setIsOpen(false);
+  }, [onChange]);
+  const handleFocus = useCallback(() => {
+    setIsOpen(true);
+    if (selectedOption && !inputValue) {
+      setInputValue(selectedOption.label);
+    }
+  }, [selectedOption, inputValue]);
+  const handleBlur = useCallback(() => {
+    setTimeout(() => {
+      setIsOpen(false);
+      if (selectedOption) {
+        setInputValue(selectedOption.label);
+      } else {
+        setInputValue("");
+      }
+    }, 200);
+  }, [selectedOption]);
+  const isInvalid = !!errorMessage;
+  const showMinCharsMessage = inputValue.length > 0 && inputValue.length < minChars;
+  const showNoResults = !isLoading && inputValue.length >= minChars && filteredOptions.length === 0;
+  const showOptions = isOpen && !showMinCharsMessage && filteredOptions.length > 0;
+  return /* @__PURE__ */ jsxs(View, { className: cn("w-full", className), ...props, children: [
+    label && /* @__PURE__ */ jsxs(Text, { className: "text-sm font-medium text-text-primary mb-1", children: [
+      label,
+      isRequired && /* @__PURE__ */ jsx(Text, { className: "text-status-error ml-0.5", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { className: "relative", children: [
+      /* @__PURE__ */ jsxs(
+        View,
+        {
+          className: cn(
+            "flex-row items-center border rounded-md",
+            "bg-surface-input",
+            isInvalid ? "border-border-input-error" : "border-border-input",
+            !isDisabled && !isInvalid && "focus-within:border-border-input-focus",
+            isDisabled && "opacity-50"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: inputValue,
+                onChangeText: handleInputChange,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                placeholder,
+                editable: !isDisabled,
+                className: cn(
+                  "flex-1 px-3 py-2 text-text-primary",
+                  "placeholder:text-text-tertiary"
+                ),
+                accessibilityLabel: label,
+                ...inputProps
+              }
+            ),
+            isClearable && value && !isDisabled && /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: handleClear,
+                className: "p-2",
+                accessibilityLabel: "Clear selection",
+                children: /* @__PURE__ */ jsx(Text, { className: "text-text-tertiary", children: "\xD7" })
+              }
+            ),
+            isLoading && /* @__PURE__ */ jsx(View, { className: "p-2", children: /* @__PURE__ */ jsx(Text, { className: "text-text-tertiary animate-spin", children: "\u27F3" }) })
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx(
+        View,
+        {
+          className: cn(
+            "absolute z-50 top-full left-0 right-0 mt-1",
+            "bg-surface-elevated rounded-md shadow-lg border border-border-default",
+            "max-h-60 overflow-hidden"
+          ),
+          children: /* @__PURE__ */ jsxs(ScrollView, { className: "py-1", children: [
+            showMinCharsMessage && /* @__PURE__ */ jsx(Text, { className: "px-3 py-2 text-sm text-text-tertiary", children: minCharsText || `Type at least ${minChars} characters` }),
+            isLoading && /* @__PURE__ */ jsx(Text, { className: "px-3 py-2 text-sm text-text-tertiary", children: loadingText }),
+            showNoResults && /* @__PURE__ */ jsx(Text, { className: "px-3 py-2 text-sm text-text-tertiary", children: noOptionsText }),
+            showOptions && filteredOptions.map((option, index) => {
+              const isHighlighted = index === highlightedIndex;
+              const isSelected = option.value === value;
+              if (renderOption) {
+                return /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    onPress: () => handleSelectOption(option),
+                    disabled: option.isDisabled,
+                    children: renderOption(option, isHighlighted)
+                  },
+                  String(option.value)
+                );
+              }
+              return /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  onPress: () => handleSelectOption(option),
+                  disabled: option.isDisabled,
+                  className: cn(
+                    "px-3 py-2",
+                    isHighlighted && "bg-interactive-hover",
+                    isSelected && "bg-interactive-selected",
+                    option.isDisabled && "opacity-50",
+                    !option.isDisabled && "web:hover:bg-interactive-hover"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        className: cn(
+                          "text-sm",
+                          isSelected ? "text-brand-primary font-medium" : "text-text-primary"
+                        ),
+                        children: option.label
+                      }
+                    ),
+                    option.description && /* @__PURE__ */ jsx(Text, { className: "text-xs text-text-tertiary mt-0.5", children: option.description })
+                  ]
+                },
+                String(option.value)
+              );
+            })
+          ] })
+        }
+      )
+    ] }),
+    (helperText || errorMessage) && /* @__PURE__ */ jsx(
+      Text,
+      {
+        className: cn(
+          "text-xs mt-1",
+          isInvalid ? "text-status-error" : "text-text-tertiary"
+        ),
+        children: errorMessage || helperText
+      }
+    )
+  ] });
+}
+var sizeStyles12 = {
+  sm: { icon: "w-3.5 h-3.5 text-xs", text: "text-xs" },
+  md: { icon: "w-4 h-4 text-sm", text: "text-sm" },
+  lg: { icon: "w-5 h-5 text-base", text: "text-base" }
+};
+var colorStyles5 = {
+  default: "text-text-tertiary",
+  primary: "text-brand-primary",
+  secondary: "text-text-secondary",
+  muted: "text-text-tertiary opacity-60"
+};
+var iconMap = {
+  help: "?",
+  info: "\u2139",
+  warning: "\u26A0"
+};
+var placementStyles2 = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+  left: "right-full top-1/2 -translate-y-1/2 mr-2",
+  right: "left-full top-1/2 -translate-y-1/2 ml-2"
+};
+var arrowStyles = {
+  top: "bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-t-surface-elevated border-x-transparent border-b-transparent",
+  bottom: "top-0 left-1/2 -translate-x-1/2 -translate-y-full border-b-surface-elevated border-x-transparent border-t-transparent",
+  left: "right-0 top-1/2 -translate-y-1/2 translate-x-full border-l-surface-elevated border-y-transparent border-r-transparent",
+  right: "left-0 top-1/2 -translate-y-1/2 -translate-x-full border-r-surface-elevated border-y-transparent border-l-transparent"
+};
+function HelpTip({
+  content,
+  size = "md",
+  placement = "top",
+  icon = "help",
+  color = "default",
+  isOpen: controlledIsOpen,
+  hasArrow = true,
+  maxWidth = 250,
+  iconClassName,
+  tooltipClassName,
+  className,
+  ...props
+}) {
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const isOpen = controlledIsOpen ?? internalIsOpen;
+  const { icon: iconSize, text: textSize } = sizeStyles12[size];
+  const handlePress = () => {
+    if (controlledIsOpen === void 0) {
+      setInternalIsOpen((prev) => !prev);
+    }
+  };
+  const handleHoverIn = () => {
+    if (controlledIsOpen === void 0) {
+      setInternalIsOpen(true);
+    }
+  };
+  const handleHoverOut = () => {
+    if (controlledIsOpen === void 0) {
+      setInternalIsOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(View, { className: cn("relative inline-flex", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: handlePress,
+        onHoverIn: handleHoverIn,
+        onHoverOut: handleHoverOut,
+        accessibilityRole: "button",
+        accessibilityLabel: "Show help information",
+        accessibilityHint: typeof content === "string" ? content : void 0,
+        className: cn(
+          "items-center justify-center rounded-full",
+          "border border-current",
+          colorStyles5[color],
+          iconSize,
+          "web:hover:opacity-80 web:cursor-help",
+          iconClassName
+        ),
+        children: /* @__PURE__ */ jsx(Text, { className: cn("font-semibold", iconSize, colorStyles5[color]), children: iconMap[icon] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs(
+      View,
+      {
+        className: cn(
+          "absolute z-50",
+          "bg-surface-elevated rounded-lg shadow-lg",
+          "border border-border-default",
+          "px-3 py-2",
+          placementStyles2[placement],
+          tooltipClassName
+        ),
+        style: { maxWidth },
+        children: [
+          typeof content === "string" ? /* @__PURE__ */ jsx(Text, { className: cn("text-text-primary", textSize), children: content }) : content,
+          hasArrow && /* @__PURE__ */ jsx(
+            View,
+            {
+              className: cn(
+                "absolute w-0 h-0",
+                "border-4",
+                arrowStyles[placement]
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function LabelWithHelp({
+  label,
+  helpContent,
+  isRequired = false,
+  helpSize = "sm",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(View, { className: cn("flex-row items-center gap-1", className), ...props, children: [
+    /* @__PURE__ */ jsxs(Text, { className: "text-sm font-medium text-text-primary", children: [
+      label,
+      isRequired && /* @__PURE__ */ jsx(Text, { className: "text-status-error ml-0.5", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx(HelpTip, { content: helpContent, size: helpSize })
+  ] });
+}
+var labelSizeStyles = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+function FormField({
+  label,
+  isRequired = false,
+  helperText,
+  errorMessage,
+  isDisabled = false,
+  isReadOnly = false,
+  helpContent,
+  labelSize = "sm",
+  orientation = "vertical",
+  labelWidth,
+  className,
+  children,
+  ...props
+}) {
+  const isInvalid = !!errorMessage;
+  const isHorizontal = orientation === "horizontal";
+  const fieldId = React24.useId();
+  const helperId = `${fieldId}-helper`;
+  const errorId = `${fieldId}-error`;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      className: cn(
+        "w-full",
+        isHorizontal && "flex-row items-start",
+        isDisabled && "opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        label && /* @__PURE__ */ jsxs(
+          View,
+          {
+            className: cn(
+              "flex-row items-center",
+              isHorizontal ? "pt-2" : "mb-1.5"
+            ),
+            style: isHorizontal && labelWidth ? { width: labelWidth } : void 0,
+            children: [
+              /* @__PURE__ */ jsxs(
+                Text,
+                {
+                  className: cn(
+                    "font-medium text-text-primary",
+                    labelSizeStyles[labelSize]
+                  ),
+                  children: [
+                    label,
+                    isRequired && /* @__PURE__ */ jsx(Text, { className: "text-status-error ml-0.5", children: "*" })
+                  ]
+                }
+              ),
+              helpContent && /* @__PURE__ */ jsx(View, { className: "ml-1", children: /* @__PURE__ */ jsx(Text, { className: "text-text-tertiary text-xs", children: "\u2139" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { className: cn(isHorizontal && "flex-1"), children: [
+          React24.Children.map(children, (child) => {
+            if (React24.isValidElement(child)) {
+              const childProps = child.props;
+              return React24.cloneElement(child, {
+                accessibilityHint: errorMessage || helperText || childProps.accessibilityHint,
+                accessibilityState: {
+                  ...childProps.accessibilityState,
+                  disabled: isDisabled || childProps.accessibilityState?.disabled,
+                  ...isInvalid ? { invalid: true } : {}
+                },
+                isDisabled: isDisabled || childProps.isDisabled,
+                isReadOnly: isReadOnly || childProps.isReadOnly,
+                isInvalid: isInvalid || childProps.isInvalid
+              });
+            }
+            return child;
+          }),
+          (helperText || errorMessage) && /* @__PURE__ */ jsx(
+            Text,
+            {
+              id: isInvalid ? errorId : helperId,
+              className: cn(
+                "text-xs mt-1.5",
+                isInvalid ? "text-status-error" : "text-text-tertiary"
+              ),
+              children: errorMessage || helperText
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function FormSection({
+  title,
+  description,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      className: cn("w-full", className),
+      accessibilityRole: "group",
+      accessibilityLabel: title,
+      ...props,
+      children: [
+        (title || description) && /* @__PURE__ */ jsxs(View, { className: "mb-4", children: [
+          title && /* @__PURE__ */ jsx(Text, { className: "text-lg font-semibold text-text-primary", children: title }),
+          description && /* @__PURE__ */ jsx(Text, { className: "text-sm text-text-secondary mt-1", children: description })
+        ] }),
+        /* @__PURE__ */ jsx(View, { className: "gap-4", children })
+      ]
+    }
+  );
+}
+var alignStyles = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end",
+  between: "justify-between"
+};
+function FormActions({
+  align = "right",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        "flex-row items-center gap-3 pt-4",
+        "border-t border-border-default mt-4",
+        alignStyles[align],
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var gapStyles3 = {
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6"
+};
+function FormRow({
+  gap = "md",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn("flex-row items-start", gapStyles3[gap], className),
+      ...props,
+      children
+    }
+  );
+}
+var variantStyles4 = {
+  h1: "font-heading text-5xl font-bold leading-tight",
+  h2: "font-heading text-4xl font-bold leading-tight",
+  h3: "font-heading text-3xl font-bold leading-tight",
+  h4: "font-heading text-2xl font-bold leading-tight",
+  h5: "font-heading text-xl font-semibold leading-tight",
+  h6: "font-heading text-lg font-semibold leading-tight",
+  body1: "font-body text-base font-normal leading-normal",
+  body2: "font-body text-sm font-normal leading-normal",
+  subtitle1: "font-body text-base font-medium leading-relaxed",
+  subtitle2: "font-body text-sm font-medium leading-normal",
+  caption: "font-body text-xs font-normal leading-loose",
+  overline: "font-body text-xs font-semibold uppercase tracking-widest leading-relaxed",
+  button: "font-sans text-sm font-semibold leading-relaxed"
+};
+var colorStyles6 = {
+  primary: "text-text-primary",
+  secondary: "text-text-secondary",
+  tertiary: "text-text-tertiary",
+  disabled: "text-text-disabled",
+  inverse: "text-text-inverse",
+  success: "text-status-success",
+  error: "text-status-error",
+  warning: "text-status-warning",
+  info: "text-status-info",
+  inherit: ""
+  // No color class, inherit from parent
+};
+var alignStyles2 = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+  justify: "text-justify"
+};
+var headingVariants = ["h1", "h2", "h3", "h4", "h5", "h6"];
+var marginBottomStyles = {
+  none: "",
+  sm: "mb-1",
+  md: "mb-2",
+  lg: "mb-4"
+};
+function Typography({
+  variant = "body1",
+  color = "primary",
+  align,
+  truncate = false,
+  noWrap = false,
+  // deprecated, kept for backward compatibility
+  marginBottom,
+  gutterBottom = false,
+  // deprecated, kept for backward compatibility
+  maxLines,
+  className,
+  children,
+  ...props
+}) {
+  const isHeading = headingVariants.includes(variant);
+  const shouldTruncate = truncate || noWrap;
+  const mb = marginBottom || (gutterBottom ? "md" : "none");
+  let numLines;
+  if (maxLines) {
+    numLines = maxLines;
+  } else if (shouldTruncate) {
+    numLines = 1;
+  }
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      accessibilityRole: isHeading ? "header" : "text",
+      numberOfLines: numLines,
+      className: cn(
+        variantStyles4[variant],
+        color !== "inherit" && colorStyles6[color],
+        align && alignStyles2[align],
+        shouldTruncate && "truncate",
+        marginBottomStyles[mb],
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function Heading({ level = 1, ...props }) {
+  const variant = `h${level}`;
+  return /* @__PURE__ */ jsx(Typography, { variant, ...props });
+}
+function Paragraph({ small = false, ...props }) {
+  return /* @__PURE__ */ jsx(Typography, { variant: small ? "body2" : "body1", ...props });
+}
+function Caption(props) {
+  return /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", ...props });
+}
+function Label(props) {
+  return /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", ...props });
+}
+function Overline(props) {
+  return /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "secondary", ...props });
+}
+var SidebarContext = createContext({
+  isCollapsed: false
+});
+function Sidebar({
+  isCollapsed = false,
+  activeItem,
+  onItemSelect,
+  width = 256,
+  collapsedWidth = 64,
+  className,
+  children,
+  ...props
+}) {
+  const currentWidth = isCollapsed ? collapsedWidth : width;
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { isCollapsed, activeItem, onItemSelect }, children: /* @__PURE__ */ jsx(
+    View,
+    {
+      style: { width: currentWidth },
+      className: cn(
+        "h-full flex-col bg-surface-base border-r border-border-default transition-all duration-200",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function SidebarHeader({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("px-4 py-4 border-b border-border-subtle", className), children });
+}
+function SidebarContent({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      className: cn("flex-1", className),
+      showsVerticalScrollIndicator: false,
+      children
+    }
+  );
+}
+function SidebarFooter({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("px-2 py-4 border-t border-border-subtle", className), children });
+}
+function SidebarSection({ title, children, className }) {
+  const { isCollapsed } = useContext(SidebarContext);
+  return /* @__PURE__ */ jsxs(View, { className: cn("px-2 py-2", className), children: [
+    title && !isCollapsed && /* @__PURE__ */ jsx(Text, { className: "px-3 py-2 text-xs font-semibold uppercase tracking-wider text-text-tertiary", children: title }),
+    /* @__PURE__ */ jsx(View, { className: "gap-0.5", children })
+  ] });
+}
+function SidebarItem({
+  id,
+  icon: Icon,
+  label,
+  badge,
+  hasChildren,
+  isExpanded,
+  className,
+  onPress,
+  ...props
+}) {
+  const { isCollapsed, activeItem, onItemSelect } = useContext(SidebarContext);
+  const isActive = activeItem === id;
+  const handlePress = (e) => {
+    onItemSelect?.(id);
+    onPress?.(e);
+  };
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityState: { selected: isActive },
+      accessibilityLabel: label,
+      onPress: handlePress,
+      className: cn(
+        "flex-row items-center gap-3 px-3 py-2.5 rounded-md transition-colors",
+        isActive ? "bg-brand-primary-subtle text-brand-primary" : "text-text-secondary web:hover:bg-interactive-hover active:bg-interactive-active",
+        isCollapsed && "justify-center px-2",
+        className
+      ),
+      ...props,
+      children: [
+        Icon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: 20,
+            className: cn(
+              isActive ? "text-brand-primary" : "text-text-secondary"
+            )
+          }
+        ),
+        !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              numberOfLines: 1,
+              className: cn(
+                "flex-1 text-sm font-medium",
+                isActive ? "text-brand-primary" : "text-text-primary"
+              ),
+              children: label
+            }
+          ),
+          badge && /* @__PURE__ */ jsx(View, { className: "ml-auto", children: badge }),
+          hasChildren && /* @__PURE__ */ jsx(Text, { className: "text-text-tertiary ml-1", children: isExpanded ? "\u25BC" : "\u25B6" })
+        ] })
+      ]
+    }
+  );
+}
+function SidebarDivider({ className }) {
+  return /* @__PURE__ */ jsx(View, { className: cn("h-px mx-4 my-2 bg-border-subtle", className) });
+}
+var TableContext = createContext({
+  sortDirection: null,
+  selectedRows: /* @__PURE__ */ new Set(),
+  selectable: false,
+  allRowIds: []
+});
+function Table({
+  sortColumn,
+  sortDirection = null,
+  onSort,
+  selectedRows = /* @__PURE__ */ new Set(),
+  onSelectRow,
+  onSelectAll,
+  selectable = false,
+  rowIds = [],
+  isLoading = false,
+  loadingRowCount = 5,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TableContext.Provider,
+    {
+      value: {
+        sortColumn,
+        sortDirection,
+        onSort,
+        selectedRows,
+        onSelectRow,
+        onSelectAll,
+        selectable,
+        allRowIds: rowIds
+      },
+      children: /* @__PURE__ */ jsx(View, { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsx(View, { className: "w-full min-w-full", children: isLoading ? /* @__PURE__ */ jsx(TableLoadingSkeleton, { rowCount: loadingRowCount }) : children }) }) })
+    }
+  );
+}
+function TableHeader({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "none",
+      className: cn("bg-background-subtle rounded-t-lg", className),
+      children
+    }
+  );
+}
+function TableBody({ children, className }) {
+  return /* @__PURE__ */ jsx(View, { accessibilityRole: "none", className, children });
+}
+function TableRow({
+  isSelected = false,
+  isHoverable = true,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "none",
+      className: cn(
+        "flex-row border-b border-divider",
+        isHoverable && "web:hover:bg-interactive-hover",
+        isSelected && "bg-interactive-selected",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function TableHeaderCell({
+  sortKey,
+  align = "left",
+  width,
+  className,
+  children,
+  onPress,
+  ...props
+}) {
+  const { sortColumn, sortDirection, onSort } = useContext(TableContext);
+  const isSorted = sortKey && sortColumn === sortKey;
+  const isSortable = !!sortKey && !!onSort;
+  const handlePress = (e) => {
+    if (isSortable && sortKey) {
+      onSort(sortKey);
+    }
+    onPress?.(e);
+  };
+  const alignStyles3 = {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end"
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        className: cn(
+          "text-xs font-semibold uppercase tracking-wider text-text-secondary",
+          isSorted && "text-text-primary"
+        ),
+        children
+      }
+    ),
+    isSortable && /* @__PURE__ */ jsx(Text, { className: cn("ml-1 text-xs", isSorted ? "text-text-primary" : "text-text-tertiary"), children: isSorted ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u2195" })
+  ] });
+  if (isSortable) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: `Sort by ${children}`,
+        onPress: handlePress,
+        style: width ? { width } : { flex: 1 },
+        className: cn(
+          "flex-row items-center px-4 py-3",
+          alignStyles3[align],
+          "web:hover:bg-interactive-hover active:bg-interactive-active",
+          className
+        ),
+        ...props,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: width ? { width } : { flex: 1 },
+      className: cn(
+        "flex-row items-center px-4 py-3",
+        alignStyles3[align],
+        className
+      ),
+      children: content
+    }
+  );
+}
+function TableCell({
+  align = "left",
+  width,
+  className,
+  children,
+  ...props
+}) {
+  const alignStyles3 = {
+    left: "items-start",
+    center: "items-center",
+    right: "items-end"
+  };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: width ? { width } : { flex: 1 },
+      className: cn(
+        "justify-center px-4 py-3.5",
+        alignStyles3[align],
+        className
+      ),
+      ...props,
+      children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, { className: "text-sm text-text-primary", children }) : children
+    }
+  );
+}
+function TablePagination({
+  page,
+  pageSize,
+  totalItems,
+  pageSizeOptions = [10, 25, 50, 100],
+  onPageChange,
+  onPageSizeChange,
+  className
+}) {
+  const totalPages = Math.ceil(totalItems / pageSize);
+  const startItem = page * pageSize + 1;
+  const endItem = Math.min((page + 1) * pageSize, totalItems);
+  const canGoPrevious = page > 0;
+  const canGoNext = page < totalPages - 1;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      className: cn(
+        "flex-row items-center justify-between px-4 py-3 border-t border-divider",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(View, { className: "flex-row items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Text, { className: "text-sm text-text-secondary", children: "Rows per page:" }),
+          /* @__PURE__ */ jsx(View, { className: "flex-row gap-1", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              onPress: () => onPageSizeChange?.(size),
+              className: cn(
+                "px-2 py-1 rounded",
+                pageSize === size ? "bg-brand-primary-subtle text-brand-primary" : "text-text-secondary web:hover:bg-interactive-hover"
+              ),
+              children: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  className: cn(
+                    "text-sm font-medium",
+                    pageSize === size ? "text-brand-primary" : "text-text-secondary"
+                  ),
+                  children: size
+                }
+              )
+            },
+            size
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs(View, { className: "flex-row items-center gap-4", children: [
+          /* @__PURE__ */ jsxs(Text, { className: "text-sm text-text-secondary", children: [
+            startItem,
+            "-",
+            endItem,
+            " of ",
+            totalItems
+          ] }),
+          /* @__PURE__ */ jsxs(View, { className: "flex-row gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                disabled: !canGoPrevious,
+                onPress: () => onPageChange(page - 1),
+                accessibilityLabel: "Previous page",
+                className: cn(
+                  "p-2 rounded",
+                  canGoPrevious ? "web:hover:bg-interactive-hover active:bg-interactive-active" : "opacity-50"
+                ),
+                children: /* @__PURE__ */ jsx(Text, { className: "text-text-secondary", children: "\u2190" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                disabled: !canGoNext,
+                onPress: () => onPageChange(page + 1),
+                accessibilityLabel: "Next page",
+                className: cn(
+                  "p-2 rounded",
+                  canGoNext ? "web:hover:bg-interactive-hover active:bg-interactive-active" : "opacity-50"
+                ),
+                children: /* @__PURE__ */ jsx(Text, { className: "text-text-secondary", children: "\u2192" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function useTable({
+  data,
+  defaultPageSize = 10,
+  defaultSortColumn,
+  defaultSortDirection = null
+}) {
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(defaultPageSize);
+  const [sortColumn, setSortColumn] = useState(defaultSortColumn);
+  const [sortDirection, setSortDirection] = useState(defaultSortDirection);
+  const sortedData = useMemo(() => {
+    if (!sortColumn || !sortDirection) return data;
+    return [...data].sort((a, b) => {
+      const aVal = a[sortColumn];
+      const bVal = b[sortColumn];
+      if (aVal === bVal) return 0;
+      if (aVal === null || aVal === void 0) return 1;
+      if (bVal === null || bVal === void 0) return -1;
+      const comparison = aVal < bVal ? -1 : 1;
+      return sortDirection === "asc" ? comparison : -comparison;
+    });
+  }, [data, sortColumn, sortDirection]);
+  const paginatedData = useMemo(() => {
+    const start = page * pageSize;
+    return sortedData.slice(start, start + pageSize);
+  }, [sortedData, page, pageSize]);
+  const handleSort = (column) => {
+    if (sortColumn === column) {
+      setSortDirection(
+        (prev) => prev === "asc" ? "desc" : prev === "desc" ? null : "asc"
+      );
+    } else {
+      setSortColumn(column);
+      setSortDirection("asc");
+    }
+    setPage(0);
+  };
+  const handlePageSizeChange = (newSize) => {
+    setPageSize(newSize);
+    setPage(0);
+  };
+  return {
+    sortedData,
+    paginatedData,
+    page,
+    pageSize,
+    totalItems: data.length,
+    sortColumn,
+    sortDirection,
+    setPage,
+    setPageSize: handlePageSizeChange,
+    handleSort
+  };
+}
+function TableLoadingSkeleton({ rowCount }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { isHoverable: false, children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx(View, { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx(View, { className: "h-4 w-20 bg-interactive-disabled rounded animate-pulse" }) }, i)) }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, { isHoverable: false, children: [1, 2, 3, 4].map((colIndex) => /* @__PURE__ */ jsx(View, { className: "flex-1 px-4 py-3.5", children: /* @__PURE__ */ jsx(
+      View,
+      {
+        className: "h-4 bg-interactive-disabled rounded animate-pulse",
+        style: { width: `${50 + Math.random() * 40}%` }
+      }
+    ) }, colIndex)) }, rowIndex)) })
+  ] });
+}
+function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      className: cn(
+        "items-center justify-center py-12 px-6",
+        className
+      ),
+      ...props,
+      children: [
+        Icon && /* @__PURE__ */ jsx(View, { className: "mb-4 p-4 rounded-full bg-background-subtle", children: /* @__PURE__ */ jsx(Icon, { size: 32, className: "text-text-tertiary" }) }),
+        /* @__PURE__ */ jsx(Text, { className: "text-lg font-semibold text-text-primary text-center mb-2", children: title }),
+        description && /* @__PURE__ */ jsx(Text, { className: "text-sm text-text-secondary text-center max-w-xs mb-6", children: description }),
+        action && /* @__PURE__ */ jsx(View, { className: "mt-2", children: action })
+      ]
+    }
+  );
+}
+var StepperContext = createContext({
+  activeStep: 0,
+  orientation: "horizontal"
+});
+function Stepper({
+  activeStep,
+  orientation = "horizontal",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(StepperContext.Provider, { value: { activeStep, orientation }, children: /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        orientation === "horizontal" ? "flex-row items-center" : "flex-col",
+        className
+      ),
+      ...props,
+      children: React24.Children.map(children, (child, index) => {
+        if (React24.isValidElement(child)) {
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            React24.cloneElement(child, { index }),
+            index < React24.Children.count(children) - 1 && /* @__PURE__ */ jsx(StepConnector, { index })
+          ] });
+        }
+        return child;
+      })
+    }
+  ) });
+}
+function StepConnector({ index }) {
+  const { activeStep, orientation } = useContext(StepperContext);
+  const isCompleted = index < activeStep;
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "flex-1 h-0.5 mx-2",
+          isCompleted ? "bg-brand-primary" : "bg-border-default"
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        "w-0.5 h-8 ml-4 my-1",
+        isCompleted ? "bg-brand-primary" : "bg-border-default"
+      )
+    }
+  );
+}
+function Step({ index = 0, status, className, children }) {
+  const { activeStep, orientation } = useContext(StepperContext);
+  const derivedStatus = status || (index < activeStep ? "completed" : index === activeStep ? "active" : "upcoming");
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        orientation === "horizontal" ? "items-center" : "flex-row items-start",
+        className
+      ),
+      children: React24.Children.map(children, (child) => {
+        if (React24.isValidElement(child)) {
+          return React24.cloneElement(child, {
+            status: derivedStatus,
+            index
+          });
+        }
+        return child;
+      })
+    }
+  );
+}
+function StepIndicator({
+  status = "upcoming",
+  index = 0,
+  icon,
+  className
+}) {
+  const statusStyles2 = {
+    completed: "bg-brand-primary border-brand-primary",
+    active: "bg-brand-primary border-brand-primary",
+    upcoming: "bg-surface-base border-border-strong",
+    error: "bg-status-error border-status-error"
+  };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn(
+        "w-8 h-8 rounded-full border-2 items-center justify-center",
+        statusStyles2[status],
+        className
+      ),
+      children: icon || /* @__PURE__ */ jsx(
+        Text,
+        {
+          className: cn(
+            "text-sm font-semibold",
+            status === "upcoming" ? "text-text-secondary" : "text-white"
+          ),
+          children: status === "completed" ? "\u2713" : index + 1
+        }
+      )
+    }
+  );
+}
+function StepLabel({ status = "upcoming", className, children }) {
+  const { orientation } = useContext(StepperContext);
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      className: cn(
+        "text-sm font-medium",
+        orientation === "horizontal" ? "mt-2" : "ml-3",
+        status === "active" ? "text-text-primary" : status === "completed" ? "text-brand-primary" : status === "error" ? "text-status-error" : "text-text-secondary",
+        className
+      ),
+      children
+    }
+  );
+}
+function StepContent({ status = "upcoming", className, children }) {
+  if (status !== "active") return null;
+  return /* @__PURE__ */ jsx(View, { className: cn("ml-11 mt-2 pb-4", className), children });
+}
+var colorStyles7 = {
+  primary: "text-text-primary",
+  secondary: "text-text-secondary",
+  tertiary: "text-text-tertiary",
+  inherit: ""
+};
+function formatDate(value, format, isUTC) {
+  const date = value instanceof Date ? value : new Date(value);
+  if (isNaN(date.getTime())) {
+    return "Invalid Date";
+  }
+  if (format === "relative") {
+    return getRelativeTime(date);
+  }
+  const options = {};
+  switch (format) {
+    case "date":
+      options.year = "numeric";
+      options.month = "2-digit";
+      options.day = "2-digit";
+      break;
+    case "time":
+      options.hour = "2-digit";
+      options.minute = "2-digit";
+      break;
+    case "datetime":
+      options.year = "numeric";
+      options.month = "2-digit";
+      options.day = "2-digit";
+      options.hour = "2-digit";
+      options.minute = "2-digit";
+      break;
+    case "short":
+      options.month = "short";
+      options.day = "numeric";
+      break;
+    case "medium":
+      options.month = "short";
+      options.day = "numeric";
+      options.year = "numeric";
+      break;
+    case "long":
+      options.month = "long";
+      options.day = "numeric";
+      options.year = "numeric";
+      break;
+    case "full":
+      options.weekday = "long";
+      options.month = "long";
+      options.day = "numeric";
+      options.year = "numeric";
+      break;
+  }
+  if (isUTC) {
+    options.timeZone = "UTC";
+  }
+  return new Intl.DateTimeFormat(void 0, options).format(date);
+}
+function getRelativeTime(date) {
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = date.getTime() - now.getTime();
+  const diffSecs = Math.round(diffMs / 1e3);
+  const diffMins = Math.round(diffSecs / 60);
+  const diffHours = Math.round(diffMins / 60);
+  const diffDays = Math.round(diffHours / 24);
+  const diffWeeks = Math.round(diffDays / 7);
+  const diffMonths = Math.round(diffDays / 30);
+  const diffYears = Math.round(diffDays / 365);
+  if (typeof Intl !== "undefined" && Intl.RelativeTimeFormat) {
+    const rtf = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+    if (Math.abs(diffSecs) < 60) {
+      return rtf.format(diffSecs, "second");
+    }
+    if (Math.abs(diffMins) < 60) {
+      return rtf.format(diffMins, "minute");
+    }
+    if (Math.abs(diffHours) < 24) {
+      return rtf.format(diffHours, "hour");
+    }
+    if (Math.abs(diffDays) < 7) {
+      return rtf.format(diffDays, "day");
+    }
+    if (Math.abs(diffWeeks) < 4) {
+      return rtf.format(diffWeeks, "week");
+    }
+    if (Math.abs(diffMonths) < 12) {
+      return rtf.format(diffMonths, "month");
+    }
+    return rtf.format(diffYears, "year");
+  }
+  const absSeconds = Math.abs(diffSecs);
+  const isFuture = diffMs > 0;
+  const prefix = isFuture ? "in " : "";
+  const suffix = isFuture ? "" : " ago";
+  if (absSeconds < 60) {
+    return "just now";
+  }
+  if (Math.abs(diffMins) < 60) {
+    const mins = Math.abs(diffMins);
+    return `${prefix}${mins} minute${mins === 1 ? "" : "s"}${suffix}`;
+  }
+  if (Math.abs(diffHours) < 24) {
+    const hours = Math.abs(diffHours);
+    return `${prefix}${hours} hour${hours === 1 ? "" : "s"}${suffix}`;
+  }
+  if (Math.abs(diffDays) < 7) {
+    const days = Math.abs(diffDays);
+    return `${prefix}${days} day${days === 1 ? "" : "s"}${suffix}`;
+  }
+  if (Math.abs(diffWeeks) < 4) {
+    const weeks = Math.abs(diffWeeks);
+    return `${prefix}${weeks} week${weeks === 1 ? "" : "s"}${suffix}`;
+  }
+  if (Math.abs(diffMonths) < 12) {
+    const months = Math.abs(diffMonths);
+    return `${prefix}${months} month${months === 1 ? "" : "s"}${suffix}`;
+  }
+  const years = Math.abs(diffYears);
+  return `${prefix}${years} year${years === 1 ? "" : "s"}${suffix}`;
+}
+function DateTime({
+  value,
+  format = "datetime",
+  customFormat,
+  isUTC = false,
+  fallback = "-",
+  color = "inherit",
+  className,
+  ...props
+}) {
+  if (value === null || value === void 0) {
+    return /* @__PURE__ */ jsx(Text, { className: cn(colorStyles7[color], className), ...props, children: fallback });
+  }
+  const formattedDate = formatDate(value, format, isUTC);
+  return /* @__PURE__ */ jsx(Text, { className: cn(colorStyles7[color], className), ...props, children: formattedDate });
+}
+function formatDateTime(value, format = "datetime", isUTC = false, fallback = "-") {
+  if (value === null || value === void 0) {
+    return fallback;
+  }
+  return formatDate(value, format, isUTC);
+}
+
+// src/utils/colors.ts
+function getStatusColor(status) {
+  return `var(--color-status-${status})`;
+}
+function getResultColor(result) {
+  return `var(--color-result-${result})`;
+}
+function alpha(color, opacity) {
+  const clampedOpacity = Math.max(0, Math.min(1, opacity));
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    let r, g, b;
+    if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else if (hex.length === 6) {
+      r = parseInt(hex.slice(0, 2), 16);
+      g = parseInt(hex.slice(2, 4), 16);
+      b = parseInt(hex.slice(4, 6), 16);
+    } else {
+      return color;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (rgbMatch) {
+    const [, r, g, b] = rgbMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/);
+  if (rgbaMatch) {
+    const [, r, g, b] = rgbaMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  return color;
+}
+function getLuminance(color) {
+  if (!color.startsWith("#")) return "dark";
+  const hex = color.slice(1);
+  let r, g, b;
+  if (hex.length === 3) {
+    r = parseInt(hex[0] + hex[0], 16);
+    g = parseInt(hex[1] + hex[1], 16);
+    b = parseInt(hex[2] + hex[2], 16);
+  } else if (hex.length === 6) {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+  } else {
+    return "dark";
+  }
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? "light" : "dark";
+}
+function getContrastText(backgroundColor) {
+  return getLuminance(backgroundColor) === "light" ? "#000000" : "#FFFFFF";
+}
+
+// src/utils/form.ts
+function getFieldValidationProps(state) {
+  return {
+    isInvalid: state.touched && state.hasError,
+    errorMessage: state.touched && state.hasError ? state.errorMessage : void 0
+  };
+}
+function createFieldId(label) {
+  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+}
+function getFieldAriaProps(props) {
+  const describedBy = [];
+  if (props.helperText) {
+    describedBy.push(`${props.id}-helper`);
+  }
+  if (props.isInvalid && props.errorMessage) {
+    describedBy.push(`${props.id}-error`);
+  }
+  return {
+    "aria-invalid": props.isInvalid || void 0,
+    "aria-required": props.isRequired || void 0,
+    "aria-describedby": describedBy.length > 0 ? describedBy.join(" ") : void 0
+  };
+}
+function isValidEmail(email) {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+}
+function hasMinLength(value, minLength) {
+  return value.length >= minLength;
+}
+function hasMaxLength(value, maxLength) {
+  return value.length <= maxLength;
+}
+function isEmpty(value) {
+  if (value === null || value === void 0) return true;
+  if (typeof value === "string") return value.trim() === "";
+  if (Array.isArray(value)) return value.length === 0;
+  return false;
+}
+var validationRules = {
+  required: (value) => {
+    if (isEmpty(value)) {
+      return "This field is required";
+    }
+    return void 0;
+  },
+  email: (value) => {
+    if (value && !isValidEmail(value)) {
+      return "Please enter a valid email address";
+    }
+    return void 0;
+  },
+  minLength: (min) => (value) => {
+    if (value && !hasMinLength(value, min)) {
+      return `Must be at least ${min} characters`;
+    }
+    return void 0;
+  },
+  maxLength: (max) => (value) => {
+    if (value && !hasMaxLength(value, max)) {
+      return `Must be no more than ${max} characters`;
+    }
+    return void 0;
+  },
+  pattern: (regex, message) => (value) => {
+    if (value && !regex.test(value)) {
+      return message;
+    }
+    return void 0;
+  },
+  match: (otherValue, fieldName) => (value) => {
+    if (value !== otherValue) {
+      return `Must match ${fieldName}`;
+    }
+    return void 0;
+  }
+};
+function composeValidators(...validators) {
+  return (value) => {
+    for (const validator of validators) {
+      const error = validator(value);
+      if (error) return error;
+    }
+    return void 0;
+  };
+}
+
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertDescription, AlertTitle, Autocomplete, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeText, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircularProgress, Collapse, CollapseButton, CollapseContent, DateTime, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, EmptyState, FormActions, FormField, FormRow, FormSection, Heading, HelpTip, Input, InputGroup, Label, LabelWithHelp, Link, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, Overline, Paragraph, PasswordInput, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, Progress, ProgressSteps, Radio, RadioGroup, Select, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Spinner, Step, StepContent, StepIndicator, StepLabel, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, Typography, alpha, cn, composeValidators, createFieldId, formatDateTime, getContrastText, getFieldAriaProps, getFieldValidationProps, getLuminance, getResultColor, getStatusColor, hasMaxLength, hasMinLength, isEmpty, isValidEmail, useTable, useToast, useToolbarButton, validationRules };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map