@platform-blocks/ui 0.4.0 → 0.6.0

package/lib/cjs/index.js

@@ -1184,25 +1184,50 @@ function OverlayRenderer({ style } = {}) {
         }) }));
 }
 function OverlayContent({ overlay, isTopmost, onBackdropPress }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     useTheme();
     const DEBUG = overlay.debug === true;
     if (DEBUG) {
         console.log('Rendering overlay content:');
         console.log('- anchor:', overlay.anchor);
+        console.log('- placement:', overlay.placement);
         console.log('- strategy:', overlay.strategy);
         console.log('- zIndex:', overlay.zIndex);
     }
+    // Check if this is a top-positioned overlay
+    const isTopPlacement = (_a = overlay.placement) === null || _a === void 0 ? void 0 : _a.startsWith('top');
+    // For top placements, we need to anchor from the bottom of the overlay
+    // The anchor.y represents where the bottom of the overlay should be (top of the trigger minus offset)
+    // So we use the estimated height to calculate where the top of the overlay would be
     const overlayStyle = {
         // Use fixed positioning on web for viewport-anchored overlays
         position: (reactNative.Platform.OS === 'web' && overlay.strategy === 'fixed') ? 'fixed' : 'absolute',
-        top: ((_a = overlay.anchor) === null || _a === void 0 ? void 0 : _a.y) || 0,
         left: ((_b = overlay.anchor) === null || _b === void 0 ? void 0 : _b.x) || 0,
         zIndex: overlay.zIndex,
         width: overlay.width || (((_c = overlay.anchor) === null || _c === void 0 ? void 0 : _c.width) ? overlay.anchor.width : undefined),
         maxWidth: overlay.maxWidth,
         maxHeight: overlay.maxHeight,
     };
+    if (isTopPlacement && reactNative.Platform.OS === 'web') {
+        // For top placements, position from the bottom of the overlay
+        // anchor.y is where the top of the overlay should be, but we want to anchor from the bottom
+        // so the overlay can grow upward naturally
+        // The "bottom" of the anchor point is: viewport.height - (anchor.y + estimatedHeight)
+        // But since we don't know actual height, use bottom anchoring relative to the trigger
+        // Actually, anchor.y already accounts for the estimated height, so:
+        // anchor.y = trigger.y - estimatedHeight - offset
+        // We want the overlay's bottom edge to be at: trigger.y - offset
+        // Which means: bottom = viewport.height - (trigger.y - offset) = viewport.height - anchor.y - estimatedHeight
+        // Simpler: just set top and let it render, but the issue is the estimate is wrong
+        // Better approach: use the anchor.y + anchor.height as the "bottom anchor point"
+        // This is where the bottom of the overlay should be
+        const bottomAnchorPoint = (((_d = overlay.anchor) === null || _d === void 0 ? void 0 : _d.y) || 0) + (((_e = overlay.anchor) === null || _e === void 0 ? void 0 : _e.height) || 0);
+        overlayStyle.top = undefined;
+        overlayStyle.bottom = `calc(100vh - ${bottomAnchorPoint}px)`;
+    }
+    else {
+        overlayStyle.top = ((_f = overlay.anchor) === null || _f === void 0 ? void 0 : _f.y) || 0;
+    }
     if (DEBUG) {
         console.log('- overlayStyle:', overlayStyle);
     }
@@ -6173,31 +6198,29 @@ const Button = (allProps) => {
     const { getDuration } = useReducedMotion$1();
     const { announce } = useAnnouncer();
     const { ref: focusRef} = useFocus(`button-${title || 'button'}`);
+    // Track measured width for loading state preservation
+    const [measuredWidth, setMeasuredWidth] = React.useState(null);
+    const wasLoadingRef = React.useRef(loading);
+    // When loading starts, we want to preserve the current measured width
+    // When loading ends, clear the preserved width so it can resize naturally
+    React.useEffect(() => {
+        if (!loading && wasLoadingRef.current) {
+            // Loading just ended, allow width to be recalculated
+            setMeasuredWidth(null);
+        }
+        wasLoadingRef.current = loading;
+    }, [loading]);
+    const handleLayout = React.useCallback((event) => {
+        // Only update measured width when not loading, so we capture the natural content width
+        if (!loading) {
+            const { width } = event.nativeEvent.layout;
+            setMeasuredWidth(width);
+        }
+        // Call user's onLayout if provided
+        onLayout === null || onLayout === void 0 ? void 0 : onLayout(event);
+    }, [loading, onLayout]);
     // Determine button content - children takes precedence over title
     const buttonContent = children !== null && children !== void 0 ? children : title;
-    // Calculate minimum width for loading state based on content and size
-    const calculateMinWidth = () => {
-        if (!buttonContent || typeof buttonContent !== 'string')
-            return undefined;
-        // Base character width estimates based on size
-        const charWidthBySize = {
-            xs: 6,
-            sm: 7,
-            md: 8,
-            lg: 9,
-            xl: 10,
-            '2xl': 11,
-            '3xl': 12
-        };
-        const sizeKey = typeof size === 'string' ? size : 'md';
-        const charWidth = charWidthBySize[sizeKey] || 8;
-        const horizontalPadding = getSpacing(size) * 2; // Left + right padding
-        // Estimate content width: character count * average char width + padding
-        const contentWidth = buttonContent.length * charWidth + horizontalPadding;
-        // Add space for loader and gap when loading
-        const loaderWidth = getFontSize$1(size) + getSpacing(size) / 2; // Loader + margin
-        return Math.max(contentWidth, contentWidth + loaderWidth);
-    };
     // Determine what content to show based on loading state
     const displayContent = loading
         ? (loadingTitle !== undefined ? loadingTitle : '')
@@ -6236,12 +6259,12 @@ const Button = (allProps) => {
     const shadowStyles = getShadowStyles({ shadow: effectiveShadow }, theme, 'button');
     const spacingStyles = getSpacingStyles(spacingProps);
     const baseLayoutStyles = getLayoutStyles(layoutProps);
-    // Apply minimum width when loading to prevent size changes
-    const calculatedMinWidth = calculateMinWidth();
+    // Apply measured width when loading to prevent size changes
+    // Use the actual measured width instead of character-based estimates
     const layoutStyles = {
         ...baseLayoutStyles,
-        ...(loading && calculatedMinWidth && !layoutProps.width && !layoutProps.w && !layoutProps.fullWidth
-            ? { minWidth: calculatedMinWidth }
+        ...(loading && measuredWidth && !layoutProps.width && !layoutProps.w && !layoutProps.fullWidth
+            ? { width: measuredWidth, minWidth: measuredWidth }
             : {})
     };
     const iconSpacing = getSpacing(size) / 2;
@@ -6434,7 +6457,7 @@ const Button = (allProps) => {
                         ...(reactNative.Platform.OS !== 'web' ? { transform: [{ translateY: 1 }] } : {})
                     } : null,
                     style,
-                ], onPress: handleInternalPress, onLayout: onLayout, onPressIn: handlePressIn, onPressOut: handlePressOut, onHoverIn: onHoverIn, onHoverOut: onHoverOut, onLongPress: onLongPress, disabled: isInteractionDisabled, children: [variant === 'gradient' && hasLinearGradient$4 && (jsxRuntime.jsx(OptionalLinearGradient$6, { colors: resolvedCustomColor
+                ], onPress: handleInternalPress, onLayout: handleLayout, onPressIn: handlePressIn, onPressOut: handlePressOut, onHoverIn: onHoverIn, onHoverOut: onHoverOut, onLongPress: onLongPress, disabled: isInteractionDisabled, children: [variant === 'gradient' && hasLinearGradient$4 && (jsxRuntime.jsx(OptionalLinearGradient$6, { colors: resolvedCustomColor
                             ? [resolvedCustomColor, theme.colors.primary[7]]
                             : [theme.colors.primary[5], theme.colors.primary[7]], style: { position: 'absolute', zIndex: -1, top: 0, left: 0, right: 0, bottom: 0, borderRadius: radiusStyles.borderRadius }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 } })), loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Loader, { size: size, color: getLoaderColor(), style: !isIconButton ? { marginRight: iconSpacing } : undefined }), !isIconButton && renderButtonContent(displayContent)] })) : isIconButton ? (
                     // Icon-only button
@@ -9752,593 +9775,6 @@ function UniversalCSS() {
     return null;
 }
 
-/**
- * Core Ability class for managing permissions
- */
-class AbilityCore {
-    constructor(rules = []) {
-        this.rules = [];
-        this.cache = new Map();
-        this.rules = [...rules];
-    }
-    /**
-     * Check if action is allowed on subject
-     */
-    can(action, subject, field) {
-        return this.check(action, subject, field).allowed;
-    }
-    /**
-     * Check if action is forbidden on subject
-     */
-    cannot(action, subject, field) {
-        return !this.can(action, subject, field);
-    }
-    /**
-     * Get detailed permission check result
-     */
-    check(action, subject, field) {
-        const cacheKey = this.getCacheKey(action, subject, field);
-        if (this.cache.has(cacheKey)) {
-            return this.cache.get(cacheKey);
-        }
-        const result = this.performCheck(action, subject, field);
-        this.cache.set(cacheKey, result);
-        return result;
-    }
-    /**
-     * Update ability rules and clear cache
-     */
-    update(rules) {
-        this.rules = [...rules];
-        this.cache.clear();
-    }
-    /**
-     * Get all current rules
-     */
-    getRules() {
-        return [...this.rules];
-    }
-    /**
-     * Clear all rules and cache
-     */
-    clear() {
-        this.rules = [];
-        this.cache.clear();
-    }
-    /**
-     * Perform the actual permission check
-     */
-    performCheck(action, subject, field) {
-        // Start with denied by default
-        let result = {
-            allowed: false,
-            reason: 'No matching permission rule found'
-        };
-        // Check rules in order (later rules can override earlier ones)
-        for (const rule of this.rules) {
-            if (this.ruleMatches(rule, action, subject, field)) {
-                result = {
-                    allowed: !rule.inverted,
-                    reason: rule.reason || (rule.inverted ? 'Access denied by rule' : 'Access granted by rule'),
-                    rule
-                };
-            }
-        }
-        return result;
-    }
-    /**
-     * Check if a rule matches the current permission check
-     */
-    ruleMatches(rule, action, subject, field) {
-        // Check action match
-        const actions = Array.isArray(rule.action) ? rule.action : [rule.action];
-        if (!actions.includes(action) && !actions.includes('*')) {
-            return false;
-        }
-        // Check subject match
-        const subjects = Array.isArray(rule.subject) ? rule.subject : [rule.subject];
-        if (!this.subjectMatches(subjects, subject)) {
-            return false;
-        }
-        // Check field match (if specified)
-        if (field && rule.fields && !rule.fields.includes(field)) {
-            return false;
-        }
-        // Check conditions (if subject is an object)
-        if (rule.conditions && typeof subject === 'object' && subject !== null) {
-            return this.conditionsMatch(rule.conditions, subject);
-        }
-        return true;
-    }
-    /**
-     * Check if subject matches any of the rule subjects
-     */
-    subjectMatches(ruleSubjects, checkSubject) {
-        for (const ruleSubject of ruleSubjects) {
-            if (ruleSubject === '*')
-                return true;
-            if (ruleSubject === checkSubject)
-                return true;
-            // Handle class/constructor matching
-            if (typeof ruleSubject === 'function' && typeof checkSubject === 'object') {
-                if (checkSubject instanceof ruleSubject)
-                    return true;
-                if (checkSubject.constructor === ruleSubject)
-                    return true;
-            }
-            // Handle string matching for object types
-            if (typeof ruleSubject === 'string' && typeof checkSubject === 'object') {
-                if (checkSubject.__type === ruleSubject)
-                    return true;
-                if (checkSubject.type === ruleSubject)
-                    return true;
-                if (checkSubject.constructor.name === ruleSubject)
-                    return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * Check if conditions match the subject object
-     */
-    conditionsMatch(conditions, subject) {
-        for (const [key, expectedValue] of Object.entries(conditions)) {
-            const actualValue = subject[key];
-            if (!this.valuesMatch(actualValue, expectedValue)) {
-                return false;
-            }
-        }
-        return true;
-    }
-    /**
-     * Check if two values match (handles various comparison types)
-     */
-    valuesMatch(actual, expected) {
-        // Exact match
-        if (actual === expected)
-            return true;
-        // Array contains check
-        if (Array.isArray(expected) && expected.includes(actual))
-            return true;
-        if (Array.isArray(actual) && actual.includes(expected))
-            return true;
-        // Function/predicate check
-        if (typeof expected === 'function') {
-            return expected(actual);
-        }
-        // Regex match for strings
-        if (expected instanceof RegExp && typeof actual === 'string') {
-            return expected.test(actual);
-        }
-        // Object comparison (shallow)
-        if (typeof expected === 'object' && typeof actual === 'object' && expected !== null && actual !== null) {
-            return Object.keys(expected).every(key => this.valuesMatch(actual[key], expected[key]));
-        }
-        return false;
-    }
-    /**
-     * Generate cache key for permission check
-     */
-    getCacheKey(action, subject, field) {
-        const subjectKey = typeof subject === 'object'
-            ? JSON.stringify(subject)
-            : String(subject);
-        return `${action}:${subjectKey}:${field || ''}`;
-    }
-}
-/**
- * Create a new Ability instance
- */
-function createAbility(rules = []) {
-    return new AbilityCore(rules);
-}
-
-/**
- * Permission Context
- */
-const PermissionContext = React.createContext(null);
-/**
- * Permission Provider Component
- */
-const PermissionProvider = ({ rules = [], user, children, dev = {} }) => {
-    const [ability] = React.useState(() => createAbility(rules));
-    const [currentUser, setCurrentUser] = React.useState(user);
-    const updateAbility = React.useCallback((newRules) => {
-        ability.update(newRules);
-    }, [ability]);
-    const can = React.useCallback((action, subject, field) => {
-        const result = ability.can(action, subject, field);
-        if (dev.logChecks) {
-            console.log(`[Permissions] Can ${action} ${subject}${field ? `.${field}` : ''}:`, result);
-        }
-        return result;
-    }, [ability, dev.logChecks]);
-    const cannot = React.useCallback((action, subject, field) => {
-        const result = ability.cannot(action, subject, field);
-        if (dev.logChecks) {
-            console.log(`[Permissions] Cannot ${action} ${subject}${field ? `.${field}` : ''}:`, result);
-        }
-        return result;
-    }, [ability, dev.logChecks]);
-    const setUser = React.useCallback((newUser) => {
-        setCurrentUser(newUser);
-    }, []);
-    const contextValue = React.useMemo(() => ({
-        ability,
-        updateAbility,
-        can,
-        cannot,
-        user: currentUser,
-        setUser
-    }), [ability, updateAbility, can, cannot, currentUser, setUser]);
-    return React.createElement(PermissionContext.Provider, { value: contextValue }, children);
-};
-/**
- * Hook to access permission context
- */
-const usePermissions = (options = {}) => {
-    const context = React.useContext(PermissionContext);
-    if (!context) {
-        if (options.required) {
-            throw new Error('usePermissions must be used within a PermissionProvider');
-        }
-        if (options.debug) {
-            console.warn('[Permissions] usePermissions called outside of PermissionProvider');
-        }
-        // Return a fallback context that allows everything
-        return {
-            ability: createAbility([{ action: '*', subject: '*' }]),
-            updateAbility: () => { },
-            can: () => true,
-            cannot: () => false,
-            user: null,
-            setUser: () => { }
-        };
-    }
-    return context;
-};
-/**
- * Hook to get the current ability instance
- */
-const useAbility = () => {
-    const { ability } = usePermissions();
-    return ability;
-};
-
-/**
- * Can Component - Renders children if permission is granted
- */
-const Can = ({ I: action, a: subject, field, children, fallback = null, ability: customAbility, style, testID, passthrough = false }) => {
-    const { ability: contextAbility } = usePermissions();
-    const ability = customAbility || contextAbility;
-    // Development passthrough
-    if (passthrough && __DEV__) {
-        return React.createElement(reactNative.View, { style, testID }, children);
-    }
-    const hasPermission = subject
-        ? ability.can(action, subject, field)
-        : ability.can(action, '*', field);
-    if (hasPermission) {
-        return React.createElement(reactNative.View, { style, testID }, children);
-    }
-    return React.createElement(reactNative.View, { style, testID }, fallback);
-};
-/**
- * Can Component with conditions - For object-level permissions
- */
-const CanWithConditions = ({ I: action, this: subject, field, children, fallback = null, ability: customAbility, style, testID, passthrough = false }) => {
-    const { ability: contextAbility } = usePermissions();
-    const ability = customAbility || contextAbility;
-    // Development passthrough
-    if (passthrough && __DEV__) {
-        return React.createElement(reactNative.View, { style, testID }, children);
-    }
-    const hasPermission = ability.can(action, subject, field);
-    if (hasPermission) {
-        return React.createElement(reactNative.View, { style, testID }, children);
-    }
-    return React.createElement(reactNative.View, { style, testID }, fallback);
-};
-/**
- * Cannot Component - Renders children if permission is NOT granted
- */
-const Cannot = ({ I: action, a: subject, field, children, fallback = null, ability: customAbility, style, testID, passthrough = false }) => {
-    const { ability: contextAbility } = usePermissions();
-    const ability = customAbility || contextAbility;
-    // Development passthrough
-    if (passthrough && __DEV__) {
-        return React.createElement(reactNative.View, { style, testID }, fallback);
-    }
-    const hasPermission = subject
-        ? ability.can(action, subject, field)
-        : ability.can(action, '*', field);
-    if (!hasPermission) {
-        return React.createElement(reactNative.View, { style, testID }, children);
-    }
-    return React.createElement(reactNative.View, { style, testID }, fallback);
-};
-/**
- * Permission Gate - Requires ALL permissions to pass
- */
-const PermissionGate = ({ permissions, children, fallback = null, ability: customAbility, onUnauthorized }) => {
-    const { ability: contextAbility } = usePermissions();
-    const ability = customAbility || contextAbility;
-    const allPermissionsGranted = permissions.every(({ action, subject, field }) => ability.can(action, subject, field));
-    React.useEffect(() => {
-        if (!allPermissionsGranted && onUnauthorized) {
-            onUnauthorized();
-        }
-    }, [allPermissionsGranted, onUnauthorized]);
-    if (allPermissionsGranted) {
-        return React.createElement(React.Fragment, null, children);
-    }
-    return React.createElement(React.Fragment, null, fallback);
-};
-/**
- * Higher-Order Component for permission checking
- */
-function withCan(action, subject, field) {
-    return function CanHOC(Component) {
-        const WrappedComponent = (props) => {
-            const { fallback, ...componentProps } = props;
-            return React.createElement(Can, { I: action, a: subject, field, fallback }, React.createElement(Component, componentProps));
-        };
-        WrappedComponent.displayName = `withCan(${Component.displayName || Component.name})`;
-        return WrappedComponent;
-    };
-}
-/**
- * Higher-Order Component for permission denial checking
- */
-function withCannot(action, subject, field) {
-    return function CannotHOC(Component) {
-        const WrappedComponent = (props) => {
-            const { fallback, ...componentProps } = props;
-            return React.createElement(Cannot, { I: action, a: subject, field, fallback }, React.createElement(Component, componentProps));
-        };
-        WrappedComponent.displayName = `withCannot(${Component.displayName || Component.name})`;
-        return WrappedComponent;
-    };
-}
-
-/**
- * Fluent API for building permissions
- */
-class PermissionBuilder {
-    constructor() {
-        this.rules = [];
-    }
-    /**
-     * Grant permission
-     */
-    allow(action, subject, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: false
-        });
-        return this;
-    }
-    /**
-     * Deny permission
-     */
-    forbid(action, subject, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: true
-        });
-        return this;
-    }
-    /**
-     * Conditional permission
-     */
-    allowIf(action, subject, conditions, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: false,
-            conditions
-        });
-        return this;
-    }
-    /**
-     * Conditional denial
-     */
-    forbidIf(action, subject, conditions, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: true,
-            conditions
-        });
-        return this;
-    }
-    /**
-     * Grant all actions on a subject
-     */
-    manage(subject) {
-        this.rules.push({
-            action: '*',
-            subject,
-            inverted: false
-        });
-        return this;
-    }
-    /**
-     * Forbid all actions on a subject
-     */
-    forbidAll(subject) {
-        this.rules.push({
-            action: '*',
-            subject,
-            inverted: true
-        });
-        return this;
-    }
-    /**
-     * Role-based permissions
-     */
-    role(roleName, callback) {
-        const roleBuilder = new RoleBuilder(roleName);
-        callback(roleBuilder);
-        this.rules.push(...roleBuilder.getRules());
-        return this;
-    }
-    /**
-     * Build the ability with all rules
-     */
-    build() {
-        return new AbilityCore(this.rules);
-    }
-    /**
-     * Get all rules
-     */
-    getRules() {
-        return [...this.rules];
-    }
-    /**
-     * Clear all rules
-     */
-    clear() {
-        this.rules = [];
-        return this;
-    }
-    /**
-     * Merge rules from another builder
-     */
-    merge(other) {
-        this.rules.push(...other.getRules());
-        return this;
-    }
-}
-/**
- * Role-specific permission builder
- */
-class RoleBuilder {
-    constructor(roleName) {
-        this.roleName = roleName;
-        this.rules = [];
-    }
-    /**
-     * Grant permission for this role
-     */
-    can(action, subject, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: false,
-            conditions: { role: this.roleName }
-        });
-        return this;
-    }
-    /**
-     * Deny permission for this role
-     */
-    cannot(action, subject, field) {
-        this.rules.push({
-            action,
-            subject: subject || '*',
-            fields: field ? [field] : undefined,
-            inverted: true,
-            conditions: { role: this.roleName }
-        });
-        return this;
-    }
-    /**
-     * Manage all actions on subject for this role
-     */
-    manage(subject) {
-        this.rules.push({
-            action: '*',
-            subject,
-            inverted: false,
-            conditions: { role: this.roleName }
-        });
-        return this;
-    }
-    /**
-     * Get all rules for this role
-     */
-    getRules() {
-        return [...this.rules];
-    }
-}
-/**
- * Common permission patterns
- */
-class PermissionPatterns {
-    /**
-     * Admin permissions - can do everything
-     */
-    static admin() {
-        return new PermissionBuilder()
-            .manage('*');
-    }
-    /**
-     * User permissions - basic CRUD on own resources
-     */
-    static user(userId) {
-        return new PermissionBuilder()
-            .allowIf('read', 'User', { id: userId })
-            .allowIf('update', 'User', { id: userId })
-            .allowIf('delete', 'User', { id: userId })
-            .allow('read', 'public');
-    }
-    /**
-     * Guest permissions - read-only public content
-     */
-    static guest() {
-        return new PermissionBuilder()
-            .allow('read', 'public');
-    }
-    /**
-     * Moderator permissions - manage content but not users
-     */
-    static moderator() {
-        return new PermissionBuilder()
-            .manage('Content')
-            .manage('Comment')
-            .allow('read', 'User')
-            .forbid('delete', 'User');
-    }
-    /**
-     * Owner permissions - full control over owned resources
-     */
-    static owner(ownerId) {
-        return new PermissionBuilder()
-            .allowIf('*', '*', { ownerId })
-            .allow('create', '*');
-    }
-}
-/**
- * Helper function to create a new permission builder
- */
-function permissions() {
-    return new PermissionBuilder();
-}
-/**
- * Helper function to create ability from rules array
- */
-function defineAbility(callback) {
-    const builder = new PermissionBuilder();
-    callback(builder);
-    return builder.build();
-}
-/**
- * Helper function to create common role-based abilities
- */
-function defineRoleAbility(role, callback) {
-    const roleBuilder = new RoleBuilder(role);
-    callback(roleBuilder);
-    return new AbilityCore(roleBuilder.getRules());
-}
-
 const ThemeModeContext = React.createContext(null);
 // Default persistence using localStorage (web only)
 const defaultPersistence = {
@@ -10468,7 +9904,6 @@ const OverlayBoundary = React.memo(function OverlayBoundary({ enabled, children
 const I18nBoundary = React.memo(function I18nBoundary({ locale, fallbackLocale, resources, children }) {
     return (jsxRuntime.jsx(I18nProvider, { initial: { locale, fallbackLocale, resources }, children: children }));
 });
-const DEFAULT_PERMISSION_RULES = [{ action: '*', subject: '*' }];
 /**
  * Internal component that uses the enhanced theme mode when config is provided
  */
@@ -10506,30 +9941,20 @@ function PlatformBlocksContent({ children, theme, inherit = true, withCSSVariabl
             document.documentElement.setAttribute('data-platform-blocks-color-scheme', target);
         }
     }, [effectiveColorScheme, osColorScheme]);
-    const mainContent = (jsxRuntime.jsxs(ThemeBoundary, { theme: resolvedTheme, inherit: inherit, withCSSVariables: withCSSVariables, cssVariablesSelector: cssVariablesSelector, withGlobalCSS: withGlobalCSS, children: [children, withSpotlight && jsxRuntime.jsx(SpotlightController, { config: spotlightConfig })] }));
-    return (jsxRuntime.jsx(OverlayBoundary, { enabled: withOverlays, children: mainContent }));
+    const mainContent = (jsxRuntime.jsx(ThemeBoundary, { theme: resolvedTheme, inherit: inherit, withCSSVariables: withCSSVariables, cssVariablesSelector: cssVariablesSelector, withGlobalCSS: withGlobalCSS, children: jsxRuntime.jsxs(OverlayBoundary, { enabled: withOverlays, children: [children, withSpotlight && jsxRuntime.jsx(SpotlightController, { config: spotlightConfig })] }) }));
+    return mainContent;
 }
 /**
  * Main provider component for Platform Blocks library
  * Provides theme context and injects CSS variables
  */
-function PlatformBlocksProvider({ children, theme, inherit = true, withCSSVariables = true, cssVariablesSelector = ':root', colorSchemeMode = 'auto', withOverlays = true, withSpotlight = false, withGlobalCSS = true, themeModeConfig, spotlightConfig, locale = 'en', fallbackLocale = 'en', i18nResources, direction, haptics, permissions }) {
+function PlatformBlocksProvider({ children, theme, inherit = true, withCSSVariables = true, cssVariablesSelector = ':root', colorSchemeMode = 'auto', withOverlays = true, withSpotlight = false, withGlobalCSS = true, themeModeConfig, spotlightConfig, locale = 'en', fallbackLocale = 'en', i18nResources, direction, haptics }) {
     const i18nStore = React.useMemo(() => i18nResources || { en: { translation: {} } }, [i18nResources]);
     const content = (jsxRuntime.jsx(PlatformBlocksContent, { theme: theme, inherit: inherit, withCSSVariables: withCSSVariables, cssVariablesSelector: cssVariablesSelector, colorSchemeMode: colorSchemeMode, withOverlays: withOverlays, withSpotlight: withSpotlight, withGlobalCSS: withGlobalCSS, spotlightConfig: spotlightConfig, themeModeConfig: themeModeConfig, children: children }));
     const themedTree = themeModeConfig ? (jsxRuntime.jsx(ThemeModeProvider, { config: themeModeConfig, children: content })) : (content);
     const directionConfig = direction === false ? null : (direction !== null && direction !== void 0 ? direction : {});
     const hapticsConfig = haptics === false ? null : (haptics !== null && haptics !== void 0 ? haptics : {});
-    const permissionConfig = permissions === false ? null : (() => {
-        const base = { ...(permissions !== null && permissions !== void 0 ? permissions : {}) };
-        if (base.rules === undefined) {
-            base.rules = DEFAULT_PERMISSION_RULES;
-        }
-        return base;
-    })();
     let enhancedTree = themedTree;
-    if (permissionConfig) {
-        enhancedTree = (jsxRuntime.jsx(PermissionProvider, { ...permissionConfig, children: enhancedTree }));
-    }
     if (hapticsConfig) {
         enhancedTree = (jsxRuntime.jsx(HapticsProvider, { ...hapticsConfig, children: enhancedTree }));
     }
@@ -11019,14 +10444,18 @@ function usePopoverPositioning(isOpen, options = {}) {
             // Get popover dimensions
             // Always use measureElement for robustness across platforms (RNW refs may not expose getBoundingClientRect)
             let popoverDimensions = { width: 200, height: 100 }; // sensible defaults for initial calculation
+            let hasMeasuredPopover = false;
             if (popoverRef.current) {
                 const popoverRect = await measureElement(popoverRef);
                 if (popoverRect.width > 0 && popoverRect.height > 0) {
                     popoverDimensions = { width: popoverRect.width, height: popoverRect.height };
+                    hasMeasuredPopover = true;
                 }
             }
             // Calculate optimal position
             const result = calculateOverlayPositionEnhanced(anchorRect, popoverDimensions, positioningOptionsRef.current);
+            // Mark whether this position is based on actual measurements
+            result._hasMeasuredPopover = hasMeasuredPopover;
             setPosition(result);
         }
         catch (error) {
@@ -12076,7 +11505,7 @@ function AppShellBase(props, ref) {
     const breakpoint = useBreakpoint();
     // Determine if mobile based on breakpoint and platform
     const isMobile = reactNative.Platform.OS !== 'web' || breakpoint === 'xs' || breakpoint === 'sm';
-    const headerConfig = layoutVisibility.header && !isMobile ? header : undefined;
+    const headerConfig = layoutVisibility.header ? header : undefined;
     const navbarConfig = layoutVisibility.navbar ? navbar : undefined;
     const asideConfig = layoutVisibility.aside ? aside : undefined;
     const footerConfig = layoutVisibility.footer ? footer : undefined;
@@ -17168,9 +16597,7 @@ const createInputStyles = (theme, isRTL = false) => {
                     ? theme.colors.error[5]
                     : props.focused
                         ? theme.colors.primary[5]
-                        : props.disabled
-                            ? theme.backgrounds.border
-                            : 'transparent',
+                        : theme.backgrounds.border,
                 // Optional focus shadow (web only) without affecting layout
                 ...(props.focused && !props.disabled && typeof window !== 'undefined' && ((_a = theme.states) === null || _a === void 0 ? void 0 : _a.focusRing) && {
                     boxShadow: `0 0 0 2px ${theme.states.focusRing}`,
@@ -17279,6 +16706,7 @@ const TextInputBase = factory((props, ref) => {
     const { value, onChangeText, onEnter, label, description, error, helperText, disabled, required, size = 'md', withAsterisk, placeholder, startSection, endSection, focused: focusedProp, accessibilityLabel, accessibilityHint, testID, textInputProps, style, radius, secureTextEntry, clearable, clearButtonLabel, onClear, inputRef, name, keyboardFocusId, ...rest } = otherProps;
     const renderDisclaimer = useDisclaimer(disclaimerData.disclaimer, disclaimerData.disclaimerProps);
     const [focused, setFocused] = React.useState(false);
+    const [cursorVisible, setCursorVisible] = React.useState(true);
     const theme = useTheme();
     const { isRTL } = useDirection();
     const internalInputRef = React.useRef(null);
@@ -17350,6 +16778,16 @@ const TextInputBase = factory((props, ref) => {
             return '';
         return '•'.repeat(length);
     }, [isSecureEntry, normalizedValue]);
+    // Blinking cursor for secure entry (simple interval toggle)
+    React.useEffect(() => {
+        if (focused && isSecureEntry) {
+            setCursorVisible(true);
+            const interval = setInterval(() => {
+                setCursorVisible(v => !v);
+            }, 530);
+            return () => clearInterval(interval);
+        }
+    }, [focused, isSecureEntry]);
     const textColor = (_a = flattenedInputStyle === null || flattenedInputStyle === void 0 ? void 0 : flattenedInputStyle.color) !== null && _a !== void 0 ? _a : (styleProps.disabled ? theme.text.disabled : theme.text.primary);
     const resolvedInputStyle = React.useMemo(() => {
         const base = [styles.input];
@@ -17451,7 +16889,12 @@ const TextInputBase = factory((props, ref) => {
         }
     }, [keyboardManager, pendingFocusTarget, focusTargetId]);
     const disclaimerNode = renderDisclaimer();
-    return (jsxRuntime.jsxs(reactNative.View, { style: [styles.container, spacingStyles, layoutStyles, style], ...rest, children: [jsxRuntime.jsx(FieldHeader, { label: label, description: description, required: required, withAsterisk: withAsterisk, disabled: disabled, error: !!error, size: size }), jsxRuntime.jsxs(reactNative.View, { style: styles.inputContainer, children: [startSection && (jsxRuntime.jsx(reactNative.View, { style: styles.startSection, children: startSection })), jsxRuntime.jsxs(reactNative.View, { style: { flex: 1, position: 'relative', justifyContent: 'center' }, children: [jsxRuntime.jsx(reactNative.TextInput, { ref: assignInputRef, value: value, onChangeText: onChangeText, onFocus: handleFocus, onBlur: handleBlur, onSubmitEditing: handleSubmitEditing, editable: !disabled, placeholder: placeholder, placeholderTextColor: theme.text.muted, style: resolvedInputStyle, selectionColor: selectionColorProp !== null && selectionColorProp !== void 0 ? selectionColorProp : textColor, testID: testID, secureTextEntry: isSecureEntry, ...inputAccessibilityProps, ...restTextInputProps }), isSecureEntry && maskedValue.length > 0 && (jsxRuntime.jsx(reactNative.Text, { pointerEvents: "none", accessible: false, style: overlayStyle, numberOfLines: 1, ellipsizeMode: "clip", children: maskedValue }))] }), (showClearButton || endSection) && (jsxRuntime.jsxs(reactNative.View, { style: styles.endSection, children: [showClearButton && (jsxRuntime.jsx(ClearButton, { onPress: handleClear, size: size, accessibilityLabel: clearButtonLabelText, hasRightSection: !!endSection })), endSection] }))] }), disclaimerNode, error && (jsxRuntime.jsx(reactNative.Text, { style: styles.error, role: "alert", accessibilityLiveRegion: "polite", children: error })), helperText && !error && (jsxRuntime.jsx(reactNative.Text, { style: styles.helperText, children: helperText }))] }));
+    return (jsxRuntime.jsxs(reactNative.View, { style: [styles.container, spacingStyles, layoutStyles, style], ...rest, children: [jsxRuntime.jsx(FieldHeader, { label: label, description: description, required: required, withAsterisk: withAsterisk, disabled: disabled, error: !!error, size: size }), jsxRuntime.jsxs(reactNative.View, { style: styles.inputContainer, children: [startSection && (jsxRuntime.jsx(reactNative.View, { style: styles.startSection, children: startSection })), jsxRuntime.jsxs(reactNative.View, { style: { flex: 1, position: 'relative', justifyContent: 'center' }, children: [jsxRuntime.jsx(reactNative.TextInput, { ref: assignInputRef, value: value, onChangeText: onChangeText, onFocus: handleFocus, onBlur: handleBlur, onSubmitEditing: handleSubmitEditing, editable: !disabled, placeholder: placeholder, placeholderTextColor: theme.text.muted, style: resolvedInputStyle, selectionColor: selectionColorProp !== null && selectionColorProp !== void 0 ? selectionColorProp : textColor, testID: testID, secureTextEntry: isSecureEntry, ...inputAccessibilityProps, ...restTextInputProps }), isSecureEntry && (jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: [overlayStyle, { flexDirection: 'row', alignItems: 'center' }], children: [jsxRuntime.jsx(reactNative.Text, { accessible: false, style: { color: textColor, fontSize: styles.input.fontSize, fontFamily: theme.fontFamily }, numberOfLines: 1, children: maskedValue }), focused && cursorVisible && (jsxRuntime.jsx(reactNative.View, { style: {
+                                            width: 1,
+                                            height: styles.input.fontSize || 16,
+                                            backgroundColor: textColor,
+                                            marginLeft: 1,
+                                        } }))] }))] }), (showClearButton || endSection) && (jsxRuntime.jsxs(reactNative.View, { style: styles.endSection, children: [showClearButton && (jsxRuntime.jsx(ClearButton, { onPress: handleClear, size: size, accessibilityLabel: clearButtonLabelText, hasRightSection: !!endSection })), endSection] }))] }), disclaimerNode, error && (jsxRuntime.jsx(reactNative.Text, { style: styles.error, role: "alert", accessibilityLiveRegion: "polite", children: error })), helperText && !error && (jsxRuntime.jsx(reactNative.Text, { style: styles.helperText, children: helperText }))] }));
 });
 
 const getInputTypeConfig = (type) => {
@@ -18009,18 +17452,19 @@ const useTextAreaStyles = (props) => {
                     ? theme.colors.error[5]
                     : styleProps.focused
                         ? theme.colors.primary[5]
-                        : styleProps.disabled
-                            ? theme.backgrounds.border
-                            : 'transparent',
+                        : theme.backgrounds.border,
                 borderRadius: DESIGN_TOKENS.radius.lg,
-                borderWidth: DESIGN_TOKENS.radius.xs,
+                borderWidth: 2,
                 paddingHorizontal: DESIGN_TOKENS.spacing.sm,
                 paddingVertical: DESIGN_TOKENS.spacing.xs,
+                // Match Input focus treatment on web
                 ...(styleProps.focused && !styleProps.disabled && reactNative.Platform.OS === 'web' && {
                     boxShadow: `0 0 0 2px ${((_a = theme.states) === null || _a === void 0 ? void 0 : _a.focusRing) || theme.colors.primary[2]}`,
                 }),
+                // Light elevation similar to Input
                 ...(!styleProps.disabled && theme.colorScheme === 'light' && {
                     elevation: 1,
+                    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
                 }),
                 opacity: styleProps.disabled ? DESIGN_TOKENS.opacity.disabled : 1,
             },
@@ -19702,7 +19146,7 @@ const useSwitchStyles = (props) => {
             ...(reactNative.Platform.OS === 'web' && { userSelect: 'none' }),
         },
         labelContainer: {
-            flex: 1,
+            flexShrink: 1,
             justifyContent: 'center',
         },
         labelDisabled: {
@@ -19871,8 +19315,8 @@ const Switch = factory((rawProps, ref) => {
     const LayoutComponent = isVertical ? Column : Row;
     // For vertical layouts (top/bottom), we want tighter spacing and center alignment
     const layoutProps = isVertical
-        ? { gap: 'xs', style: { alignItems: 'center' } }
-        : { gap: 'sm', style: { alignItems: 'center' } };
+        ? { gap: 'xs', align: 'center' }
+        : { gap: 'sm', align: 'center' };
     const disclaimerNode = renderDisclaimer();
     return (jsxRuntime.jsxs(reactNative.View, { style: spacingStyles, children: [jsxRuntime.jsxs(LayoutComponent, { ...layoutProps, children: [labelPosition === 'top' && labelElement, labelPosition === 'left' && labelElement, switchElement, labelPosition === 'right' && labelElement, labelPosition === 'bottom' && labelElement] }), disclaimerNode ? (jsxRuntime.jsx(reactNative.View, { style: { width: '100%' }, children: disclaimerNode })) : null] }));
 });
@@ -21067,105 +20511,116 @@ const useSliderGesture = (min, max, step, restrictToTicks, ticks, disabled) => {
     }, [min, max, step, restrictToTicks, ticks]);
     return { calculateNewValue };
 };
-const SliderTrack = ({ disabled, theme, size, orientation, activeWidth = 0, activeLeft = SLIDER_CONSTANTS.THUMB_SIZE[size] / 2, isRange = false }) => {
+const SliderTrack = ({ disabled, theme, size, orientation, activeWidth = 0, activeLeft, isRange = false, trackColor, activeTrackColor, trackStyle, activeTrackStyle, trackHeight, thumbSize, }) => {
     const orientationProps = getOrientationProps(orientation);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[size];
-    const trackHeight = SLIDER_CONSTANTS.TRACK_HEIGHT[size];
-    const baseTrackStyle = {
+    const resolvedThumbSize = thumbSize !== null && thumbSize !== void 0 ? thumbSize : SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedTrackHeight = trackHeight !== null && trackHeight !== void 0 ? trackHeight : SLIDER_CONSTANTS.TRACK_HEIGHT[size];
+    const resolvedActiveLeft = activeLeft !== null && activeLeft !== void 0 ? activeLeft : (resolvedThumbSize / 2);
+    const inactiveTrackBaseStyle = {
         position: 'absolute',
-        backgroundColor: disabled ? theme.colors.gray[2] : theme.colors.gray[3],
-        borderRadius: trackHeight / 2,
+        backgroundColor: disabled && !trackColor ? theme.colors.gray[2] : (trackColor !== null && trackColor !== void 0 ? trackColor : theme.colors.gray[3]),
+        borderRadius: resolvedTrackHeight / 2,
     };
-    const activeTrackStyle = {
+    const activeTrackBaseStyle = {
         position: 'absolute',
-        backgroundColor: disabled ? theme.colors.gray[4] : theme.colors.primary[5],
-        borderRadius: trackHeight / 2,
+        backgroundColor: disabled && !activeTrackColor ? theme.colors.gray[4] : (activeTrackColor !== null && activeTrackColor !== void 0 ? activeTrackColor : theme.colors.primary[5]),
+        borderRadius: resolvedTrackHeight / 2,
     };
     if (orientationProps.isVertical) {
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactNative.View, { style: {
-                        ...baseTrackStyle,
-                        top: thumbSize / 2,
-                        bottom: thumbSize / 2,
-                        width: trackHeight,
-                        left: (thumbSize - trackHeight) / 2,
-                    } }), activeWidth > 0 && (jsxRuntime.jsx(reactNative.View, { style: {
-                        ...activeTrackStyle,
-                        // For range sliders, use activeLeft as top position; for single sliders, start from bottom
-                        ...(isRange ? {
-                            top: activeLeft,
-                            height: activeWidth,
-                        } : {
-                            bottom: thumbSize / 2,
-                            height: activeWidth,
-                        }),
-                        width: trackHeight,
-                        left: (thumbSize - trackHeight) / 2,
-                    } }))] }));
-    }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactNative.View, { style: {
-                    ...baseTrackStyle,
-                    left: thumbSize / 2,
-                    right: thumbSize / 2,
-                    height: trackHeight,
-                    top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - trackHeight) / 2,
-                } }), activeWidth > 0 && (jsxRuntime.jsx(reactNative.View, { style: {
-                    ...activeTrackStyle,
-                    left: activeLeft,
-                    width: activeWidth,
-                    height: trackHeight,
-                    top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - trackHeight) / 2,
-                } }))] }));
-};
-const SliderTicks = ({ ticks, disabled, theme, size, orientation, keyPrefix = 'tick' }) => {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactNative.View, { style: [
+                        {
+                            ...inactiveTrackBaseStyle,
+                            top: resolvedThumbSize / 2,
+                            bottom: resolvedThumbSize / 2,
+                            width: resolvedTrackHeight,
+                            left: (resolvedThumbSize - resolvedTrackHeight) / 2,
+                        },
+                        trackStyle,
+                    ] }), activeWidth > 0 && (jsxRuntime.jsx(reactNative.View, { style: [
+                        {
+                            ...activeTrackBaseStyle,
+                            ...(isRange ? {
+                                top: activeLeft !== null && activeLeft !== void 0 ? activeLeft : resolvedActiveLeft,
+                                height: activeWidth,
+                            } : {
+                                bottom: resolvedThumbSize / 2,
+                                height: activeWidth,
+                            }),
+                            width: resolvedTrackHeight,
+                            left: (resolvedThumbSize - resolvedTrackHeight) / 2,
+                        },
+                        activeTrackStyle,
+                    ] }))] }));
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactNative.View, { style: [
+                    {
+                        ...inactiveTrackBaseStyle,
+                        left: resolvedThumbSize / 2,
+                        right: resolvedThumbSize / 2,
+                        height: resolvedTrackHeight,
+                        top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - resolvedTrackHeight) / 2,
+                    },
+                    trackStyle,
+                ] }), activeWidth > 0 && (jsxRuntime.jsx(reactNative.View, { style: [
+                    {
+                        ...activeTrackBaseStyle,
+                        left: activeLeft !== null && activeLeft !== void 0 ? activeLeft : resolvedActiveLeft,
+                        width: activeWidth,
+                        height: resolvedTrackHeight,
+                        top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - resolvedTrackHeight) / 2,
+                    },
+                    activeTrackStyle,
+                ] }))] }));
+};
+const SliderTicks = ({ ticks, disabled, theme, size, orientation, keyPrefix = 'tick', trackHeight, thumbSize, activeTickColor, tickColor, }) => {
     const orientationProps = getOrientationProps(orientation);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[size];
-    const trackHeight = SLIDER_CONSTANTS.TRACK_HEIGHT[size];
+    const resolvedThumbSize = thumbSize !== null && thumbSize !== void 0 ? thumbSize : SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedTrackHeight = trackHeight !== null && trackHeight !== void 0 ? trackHeight : SLIDER_CONSTANTS.TRACK_HEIGHT[size];
+    const inactiveColor = disabled && !tickColor ? theme.colors.gray[2] : (tickColor !== null && tickColor !== void 0 ? tickColor : theme.colors.gray[4]);
+    const activeColor = disabled && !activeTickColor ? theme.colors.gray[4] : (activeTickColor !== null && activeTickColor !== void 0 ? activeTickColor : theme.colors.primary[5]);
     if (orientationProps.isVertical) {
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ticks.map((tick, index) => (jsxRuntime.jsx(reactNative.View, { style: {
                         position: 'absolute',
-                        top: thumbSize / 2 + tick.position,
-                        left: (thumbSize - trackHeight) / 2 - 3,
+                        top: resolvedThumbSize / 2 + tick.position,
+                        left: (resolvedThumbSize - resolvedTrackHeight) / 2 - 3,
                         height: 2,
-                        width: trackHeight + 6,
-                        backgroundColor: tick.isActive
-                            ? (disabled ? theme.colors.gray[4] : theme.colors.primary[5])
-                            : (disabled ? theme.colors.gray[2] : theme.colors.gray[4]),
+                        width: resolvedTrackHeight + 6,
+                        backgroundColor: tick.isActive ? activeColor : inactiveColor,
                         borderRadius: 1,
                     } }, `${keyPrefix}-${tick.value}-${index}`))), ticks.map((tick, index) => (tick.label ? (jsxRuntime.jsx(reactNative.View, { style: {
                         position: 'absolute',
-                        top: thumbSize / 2 + tick.position - 10,
-                        left: thumbSize + 8,
+                        top: resolvedThumbSize / 2 + tick.position - 10,
+                        left: resolvedThumbSize + 8,
                         height: 20,
                         justifyContent: 'center',
                     }, children: jsxRuntime.jsx(Text, { size: "xs", children: tick.label }) }, `${keyPrefix}-label-${tick.value}-${index}`)) : null))] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ticks.map((tick, index) => (jsxRuntime.jsx(reactNative.View, { style: {
                     position: 'absolute',
-                    left: thumbSize / 2 + tick.position,
-                    top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - trackHeight) / 2 - 3,
+                    left: resolvedThumbSize / 2 + tick.position,
+                    top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - resolvedTrackHeight) / 2 - 3,
                     width: 2,
-                    height: trackHeight + 6,
-                    backgroundColor: tick.isActive
-                        ? (disabled ? theme.colors.gray[4] : theme.colors.primary[5])
-                        : (disabled ? theme.colors.gray[2] : theme.colors.gray[4]),
+                    height: resolvedTrackHeight + 6,
+                    backgroundColor: tick.isActive ? activeColor : inactiveColor,
                     borderRadius: 1,
                 } }, `${keyPrefix}-${tick.value}-${index}`))), ticks.map((tick, index) => (tick.label ? (jsxRuntime.jsx(reactNative.View, { style: {
                     position: 'absolute',
-                    left: thumbSize / 2 + tick.position - 20,
+                    left: resolvedThumbSize / 2 + tick.position - 20,
                     top: SLIDER_CONSTANTS.CONTAINER_HEIGHT + 8,
                     width: 40,
                     alignItems: 'center',
                 }, children: jsxRuntime.jsx(Text, { size: "xs", style: { textAlign: 'center' }, children: tick.label }) }, `${keyPrefix}-label-${tick.value}-${index}`)) : null))] }));
 };
-const SliderThumb = ({ position, disabled, theme, size, orientation, isDragging, zIndex = 1, panHandlers }) => {
+const SliderThumb = ({ position, disabled, theme, size, orientation, isDragging, zIndex = 1, panHandlers, thumbColor, thumbStyle, thumbSize, }) => {
     const orientationProps = getOrientationProps(orientation);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedThumbSize = thumbSize !== null && thumbSize !== void 0 ? thumbSize : SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedThumbColor = disabled && !thumbColor ? theme.colors.gray[4] : (thumbColor !== null && thumbColor !== void 0 ? thumbColor : theme.colors.primary[5]);
     const baseStyle = {
         position: 'absolute',
-        width: thumbSize,
-        height: thumbSize,
-        backgroundColor: disabled ? theme.colors.gray[4] : theme.colors.primary[5],
-        borderRadius: thumbSize / 2,
+        width: resolvedThumbSize,
+        height: resolvedThumbSize,
+        backgroundColor: resolvedThumbColor,
+        borderRadius: resolvedThumbSize / 2,
         borderWidth: 2,
         borderColor: 'white',
         boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
@@ -21174,36 +20629,43 @@ const SliderThumb = ({ position, disabled, theme, size, orientation, isDragging,
         zIndex,
     };
     if (orientationProps.isVertical) {
-        return (jsxRuntime.jsx(reactNative.View, { style: {
-                ...baseStyle,
-                top: position,
-                left: 0,
-            }, ...panHandlers }));
+        return (jsxRuntime.jsx(reactNative.View, { style: [
+                baseStyle,
+                {
+                    top: position,
+                    left: 0,
+                },
+                thumbStyle,
+            ], ...panHandlers }));
     }
-    return (jsxRuntime.jsx(reactNative.View, { style: {
-            ...baseStyle,
-            left: position,
-            top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - thumbSize) / 2,
-        }, ...panHandlers }));
+    return (jsxRuntime.jsx(reactNative.View, { style: [
+            baseStyle,
+            {
+                left: position,
+                top: (SLIDER_CONSTANTS.CONTAINER_HEIGHT - resolvedThumbSize) / 2,
+            },
+            thumbStyle,
+        ], ...panHandlers }));
 };
 const SliderLabel = ({ label }) => (jsxRuntime.jsx(reactNative.View, { style: { marginBottom: 8 }, children: typeof label === 'string' ? (jsxRuntime.jsx(Text, { size: "sm", weight: "medium", children: label })) : (label) }));
-const SliderValueLabel = ({ value, position, size, orientation, isCard = false }) => {
+const SliderValueLabel = ({ value, position, size, orientation, isCard = false, thumbSize, }) => {
     const orientationProps = getOrientationProps(orientation);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[size];
+    const resolvedThumbSize = thumbSize !== null && thumbSize !== void 0 ? thumbSize : SLIDER_CONSTANTS.THUMB_SIZE[size];
     // round number to 2 decimal places for display
     const displayValue = typeof value === 'number' ? value.toFixed(2) : value;
     if (orientationProps.isVertical) {
+        const verticalLabelOffset = resolvedThumbSize + 16; // keep label clear of the thumb
         return (jsxRuntime.jsx(reactNative.View, { style: {
                 position: 'absolute',
-                top: position + (thumbSize / 2) - 10,
-                right: thumbSize + 8,
+                top: position + (resolvedThumbSize / 2) - 10,
+                right: verticalLabelOffset,
                 height: 20,
                 justifyContent: 'center',
             }, children: isCard ? (jsxRuntime.jsx(Card, { p: "xs", variant: "filled", children: jsxRuntime.jsx(Text, { size: "sm", children: displayValue }) })) : (jsxRuntime.jsx(Text, { size: "sm", children: displayValue })) }));
     }
     return (jsxRuntime.jsx(reactNative.View, { style: {
             position: 'absolute',
-            left: position + (thumbSize / 2) - 50,
+            left: position + (resolvedThumbSize / 2) - 50,
             bottom: SLIDER_CONSTANTS.CONTAINER_HEIGHT - 6, // Moved closer to thumb
             width: 100,
             alignItems: 'center',
@@ -21219,9 +20681,34 @@ const SLIDER_SIZE_SCALE = {
     '2xl': 'lg',
     '3xl': 'lg',
 };
+const resolvePaletteColor = (themeColors, scheme) => {
+    if (!scheme || typeof scheme !== 'string') {
+        return undefined;
+    }
+    const palette = themeColors[scheme];
+    if (Array.isArray(palette)) {
+        return palette;
+    }
+    return undefined;
+};
+const resolveSliderColors = (theme, { colorScheme, trackColor, activeTrackColor, thumbColor, tickColor, activeTickColor, }) => {
+    var _a, _b;
+    const palette = resolvePaletteColor(theme.colors, colorScheme);
+    const schemeColor = (_b = (_a = palette === null || palette === void 0 ? void 0 : palette[5]) !== null && _a !== void 0 ? _a : (typeof colorScheme === 'string' ? colorScheme : undefined)) !== null && _b !== void 0 ? _b : theme.colors.primary[5];
+    const resolvedActiveTrack = activeTrackColor !== null && activeTrackColor !== void 0 ? activeTrackColor : schemeColor;
+    const defaultTrackColor = theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[3];
+    const defaultTickColor = theme.colorScheme === 'dark' ? theme.colors.gray[5] : theme.colors.gray[4];
+    return {
+        trackColor: trackColor !== null && trackColor !== void 0 ? trackColor : defaultTrackColor,
+        activeTrackColor: resolvedActiveTrack,
+        thumbColor: thumbColor !== null && thumbColor !== void 0 ? thumbColor : resolvedActiveTrack,
+        tickColor: tickColor !== null && tickColor !== void 0 ? tickColor : defaultTickColor,
+        activeTickColor: activeTickColor !== null && activeTickColor !== void 0 ? activeTickColor : resolvedActiveTrack,
+    };
+};
 // Optimized Single Slider Component
 const Slider = factory((props, ref) => {
-    const { value, defaultValue = 0, onChange, min = 0, max = 100, step = 1, disabled = false, size = 'md', orientation = 'horizontal', containerSize, fullWidth = true, label, valueLabel, valueLabelAlwaysOn = false, ticks, showTicks = false, restrictToTicks = false, style, ...spacingProps } = props;
+    const { value, defaultValue = 0, onChange, min = 0, max = 100, step = 1, disabled = false, size = 'md', orientation = 'horizontal', containerSize, fullWidth = true, label, valueLabel, valueLabelAlwaysOn = false, ticks, showTicks = false, restrictToTicks = false, trackColor, activeTrackColor, thumbColor, trackSize, thumbSize: thumbSizeProp, colorScheme = 'primary', trackStyle, activeTrackStyle, thumbStyle, tickColor, activeTickColor, style, ...spacingProps } = props;
     const theme = useTheme();
     const [isDragging, setIsDragging] = React.useState(false);
     // Uncontrolled internal value
@@ -21250,14 +20737,31 @@ const Slider = factory((props, ref) => {
                 : 'md'
         : (resolvedSliderSize !== null && resolvedSliderSize !== void 0 ? resolvedSliderSize : 'md');
     const orientationProps = getOrientationProps(orientation, containerSize);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[sliderSize];
+    const thumbSize = thumbSizeProp !== null && thumbSizeProp !== void 0 ? thumbSizeProp : SLIDER_CONSTANTS.THUMB_SIZE[sliderSize];
+    const trackHeight = trackSize !== null && trackSize !== void 0 ? trackSize : SLIDER_CONSTANTS.TRACK_HEIGHT[sliderSize];
     // Memoized processed value
     const clampedValue = useSliderValue(isControlled ? value : internal, min, max, step, restrictToTicks, ticks, false);
     // Memoized value label handling
+    const defaultValueFormatter = React.useCallback((val) => Math.round(val).toString(), []);
+    const resolvedValueLabel = React.useMemo(() => {
+        if (valueLabel === null)
+            return null;
+        if (valueLabel)
+            return valueLabel;
+        return defaultValueFormatter;
+    }, [valueLabel, defaultValueFormatter]);
     const labelConfig = React.useMemo(() => ({
-        shouldShow: valueLabel !== null && (valueLabelAlwaysOn || isDragging || (reactNative.Platform.OS === 'web' && isHovering)),
-        formatter: valueLabel || ((val) => (Number.isInteger(val) ? val.toString() : val.toFixed(2)))
-    }), [valueLabel, valueLabelAlwaysOn, isDragging, isHovering]);
+        shouldShow: !!resolvedValueLabel && (valueLabelAlwaysOn || isDragging || (reactNative.Platform.OS === 'web' && isHovering)),
+        formatter: resolvedValueLabel !== null && resolvedValueLabel !== void 0 ? resolvedValueLabel : defaultValueFormatter,
+    }), [resolvedValueLabel, valueLabelAlwaysOn, isDragging, isHovering, defaultValueFormatter]);
+    const sliderColors = React.useMemo(() => resolveSliderColors(theme, {
+        colorScheme,
+        trackColor,
+        activeTrackColor,
+        thumbColor,
+        tickColor,
+        activeTickColor,
+    }), [theme, colorScheme, trackColor, activeTrackColor, thumbColor, tickColor, activeTickColor]);
     // Memoized position calculations
     const positions = React.useMemo(() => {
         var _a, _b;
@@ -21387,6 +20891,7 @@ const Slider = factory((props, ref) => {
                     height: fullWidth && orientation === 'vertical' ? '100%' : orientationProps.containerHeight,
                     justifyContent: 'center',
                     position: 'relative',
+                    ...(reactNative.Platform.OS === 'web' && orientation === 'vertical' ? { touchAction: 'none' } : null),
                 }, onLayout: (event) => {
                     // When fullWidth is enabled, track the actual container dimensions
                     if (fullWidth) {
@@ -21400,11 +20905,11 @@ const Slider = factory((props, ref) => {
                 }, onStartShouldSetResponder: () => !isDragging, onResponderGrant: handlePress, ...(reactNative.Platform.OS === 'web' && {
                     onMouseEnter: () => setIsHovering(true),
                     onMouseLeave: () => setIsHovering(false),
-                }), ...panResponder.panHandlers, children: [jsxRuntime.jsx(SliderTrack, { disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, activeWidth: positions.activeLength }), jsxRuntime.jsx(SliderTicks, { ticks: allTicks, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation }), jsxRuntime.jsx(SliderThumb, { position: positions.thumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: isDragging }), labelConfig.shouldShow && (jsxRuntime.jsx(SliderValueLabel, { value: labelConfig.formatter(clampedValue), position: positions.thumbPosition, size: sliderSize, orientation: orientation, isCard: true }))] })] }));
+                }), ...panResponder.panHandlers, children: [jsxRuntime.jsx(SliderTrack, { disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, activeWidth: positions.activeLength, trackColor: sliderColors.trackColor, activeTrackColor: sliderColors.activeTrackColor, trackStyle: trackStyle, activeTrackStyle: activeTrackStyle, trackHeight: trackHeight, thumbSize: thumbSize }), jsxRuntime.jsx(SliderTicks, { ticks: allTicks, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, trackHeight: trackHeight, thumbSize: thumbSize, tickColor: sliderColors.tickColor, activeTickColor: sliderColors.activeTickColor }), jsxRuntime.jsx(SliderThumb, { position: positions.thumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: isDragging, thumbColor: sliderColors.thumbColor, thumbStyle: thumbStyle, thumbSize: thumbSize }), labelConfig.shouldShow && (jsxRuntime.jsx(SliderValueLabel, { value: labelConfig.formatter(clampedValue), position: positions.thumbPosition, size: sliderSize, orientation: orientation, isCard: true, thumbSize: thumbSize }))] })] }));
 });
 // Optimized Range Slider Component
 const RangeSlider = factory((props, ref) => {
-    const { value = [0, 100], onChange, min = 0, max = 100, step = 1, disabled = false, size = 'md', orientation = 'horizontal', containerSize, fullWidth = true, label, valueLabel, valueLabelAlwaysOn = false, ticks, showTicks = false, restrictToTicks = false, pushOnOverlap = true, style, ...spacingProps } = props;
+    const { value = [0, 100], onChange, min = 0, max = 100, step = 1, disabled = false, size = 'md', orientation = 'horizontal', containerSize, fullWidth = true, label, valueLabel, valueLabelAlwaysOn = false, ticks, showTicks = false, restrictToTicks = false, pushOnOverlap = true, trackColor, activeTrackColor, thumbColor, trackSize, thumbSize: thumbSizeProp, colorScheme = 'primary', trackStyle, activeTrackStyle, thumbStyle, tickColor, activeTickColor, style, ...spacingProps } = props;
     const theme = useTheme();
     const [dragState, setDragState] = React.useState({ thumb: null });
     const [isHovering, setIsHovering] = React.useState(false);
@@ -21424,8 +20929,17 @@ const RangeSlider = factory((props, ref) => {
                 : 'md'
         : (rangeResolvedSliderSize !== null && rangeResolvedSliderSize !== void 0 ? rangeResolvedSliderSize : 'md');
     const orientationProps = getOrientationProps(orientation, containerSize);
-    const thumbSize = SLIDER_CONSTANTS.THUMB_SIZE[sliderSize];
+    const thumbSize = thumbSizeProp !== null && thumbSizeProp !== void 0 ? thumbSizeProp : SLIDER_CONSTANTS.THUMB_SIZE[sliderSize];
+    const trackHeight = trackSize !== null && trackSize !== void 0 ? trackSize : SLIDER_CONSTANTS.TRACK_HEIGHT[sliderSize];
     React.useRef(null);
+    const sliderColors = React.useMemo(() => resolveSliderColors(theme, {
+        colorScheme,
+        trackColor,
+        activeTrackColor,
+        thumbColor,
+        tickColor,
+        activeTickColor,
+    }), [theme, colorScheme, trackColor, activeTrackColor, thumbColor, tickColor, activeTickColor]);
     // Memoized processed values
     const [minValue, maxValue] = useSliderValue(value, min, max, step, restrictToTicks, ticks, true);
     // Memoized backward compatibility handling
@@ -21661,6 +21175,7 @@ const RangeSlider = factory((props, ref) => {
                     height: fullWidth && orientation === 'vertical' ? '100%' : orientationProps.containerHeight,
                     justifyContent: 'center',
                     position: 'relative',
+                    ...(reactNative.Platform.OS === 'web' && orientation === 'vertical' ? { touchAction: 'none' } : null),
                 }, onLayout: (event) => {
                     // When fullWidth is enabled, track the actual container dimensions
                     if (fullWidth) {
@@ -21674,7 +21189,7 @@ const RangeSlider = factory((props, ref) => {
                 }, onStartShouldSetResponder: () => true, onResponderGrant: handleTrackPress, ...(reactNative.Platform.OS === 'web' && {
                     onMouseEnter: () => setIsHovering(true),
                     onMouseLeave: () => setIsHovering(false),
-                }), collapsable: false, children: [jsxRuntime.jsx(SliderTrack, { disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, activeWidth: positions.activeWidth, activeLeft: positions.activeLeft, isRange: true }), jsxRuntime.jsx(SliderTicks, { ticks: allTicks, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, keyPrefix: "range-tick" }), jsxRuntime.jsx(SliderThumb, { position: positions.minThumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: dragState.thumb === 'min', zIndex: dragState.thumb === 'min' ? 10 : 1, panHandlers: minThumbPanResponder.panHandlers }), jsxRuntime.jsx(SliderThumb, { position: positions.maxThumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: dragState.thumb === 'max', zIndex: dragState.thumb === 'max' ? 10 : 2, panHandlers: maxThumbPanResponder.panHandlers }), labelConfig.shouldShow && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SliderValueLabel, { value: labelConfig.formatter(minValue, 0), position: positions.minThumbPosition, size: sliderSize, orientation: orientation, isCard: true }), jsxRuntime.jsx(SliderValueLabel, { value: labelConfig.formatter(maxValue, 1), position: positions.maxThumbPosition, size: sliderSize, orientation: orientation, isCard: true })] }))] })] }));
+                }), collapsable: false, children: [jsxRuntime.jsx(SliderTrack, { disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, activeWidth: positions.activeWidth, activeLeft: positions.activeLeft, isRange: true, trackColor: sliderColors.trackColor, activeTrackColor: sliderColors.activeTrackColor, trackStyle: trackStyle, activeTrackStyle: activeTrackStyle, trackHeight: trackHeight, thumbSize: thumbSize }), jsxRuntime.jsx(SliderTicks, { ticks: allTicks, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, keyPrefix: "range-tick", trackHeight: trackHeight, thumbSize: thumbSize, tickColor: sliderColors.tickColor, activeTickColor: sliderColors.activeTickColor }), jsxRuntime.jsx(SliderThumb, { position: positions.minThumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: dragState.thumb === 'min', zIndex: dragState.thumb === 'min' ? 10 : 1, panHandlers: minThumbPanResponder.panHandlers, thumbColor: sliderColors.thumbColor, thumbStyle: thumbStyle, thumbSize: thumbSize }), jsxRuntime.jsx(SliderThumb, { position: positions.maxThumbPosition, disabled: disabled, theme: theme, size: sliderSize, orientation: orientation, isDragging: dragState.thumb === 'max', zIndex: dragState.thumb === 'max' ? 10 : 2, panHandlers: maxThumbPanResponder.panHandlers, thumbColor: sliderColors.thumbColor, thumbStyle: thumbStyle, thumbSize: thumbSize }), labelConfig.shouldShow && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SliderValueLabel, { value: labelConfig.formatter(minValue, 0), position: positions.minThumbPosition, size: sliderSize, orientation: orientation, isCard: true, thumbSize: thumbSize }), jsxRuntime.jsx(SliderValueLabel, { value: labelConfig.formatter(maxValue, 1), position: positions.maxThumbPosition, size: sliderSize, orientation: orientation, isCard: true, thumbSize: thumbSize })] }))] })] }));
 });
 
 const clampNumber$1 = (value, min, max) => Math.min(max, Math.max(min, value));
@@ -27415,7 +26930,7 @@ const MiniCalendar = ({ value, onChange, defaultValue, numberOfDays = 7, default
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(date);
     }, [isControlled, maxDate, minDate, onChange]);
-    return (jsxRuntime.jsxs(reactNative.View, { children: [jsxRuntime.jsxs(Flex, { direction: "row", justify: "space-between", align: "center", style: { marginBottom: 16 }, children: [jsxRuntime.jsx(reactNative.Pressable, { onPress: handlePrevious, style: ({ pressed }) => [
+    return (jsxRuntime.jsxs(reactNative.View, { style: { alignSelf: 'flex-start' }, children: [jsxRuntime.jsxs(Flex, { direction: "row", justify: "space-between", align: "center", style: { marginBottom: 16 }, children: [jsxRuntime.jsx(reactNative.Pressable, { onPress: handlePrevious, style: ({ pressed }) => [
                             {
                                 padding: 8,
                                 borderRadius: 6,
@@ -27427,7 +26942,7 @@ const MiniCalendar = ({ value, onChange, defaultValue, numberOfDays = 7, default
                                 borderRadius: 6,
                                 backgroundColor: pressed ? theme.colors.gray[2] : 'transparent',
                             },
-                        ], ...nextControlProps, children: jsxRuntime.jsx(Icon, { name: "chevron-right", size: 16, color: theme.colors.gray[6] }) })] }), jsxRuntime.jsx(reactNative.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: jsxRuntime.jsx(Flex, { direction: "row", gap: 4, children: days.map((date) => {
+                        ], ...nextControlProps, children: jsxRuntime.jsx(Icon, { name: "chevron-right", size: 16, color: theme.colors.gray[6] }) })] }), jsxRuntime.jsx(reactNative.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { flexGrow: 0 }, style: { flexGrow: 0 }, children: jsxRuntime.jsx(Flex, { direction: "row", gap: 4, children: days.map((date) => {
                         const isSelected = selectedDate ? dateUtils$1.isSameDay(date, selectedDate) : false;
                         const isToday = dateUtils$1.isToday(date);
                         const isWeekend = dateUtils$1.isWeekend(date);
@@ -30168,6 +29683,7 @@ function MenuBase(props, ref) {
             const overlayId = openOverlay({
                 content: menuDropdown,
                 anchor: { x: positionResult.x, y: positionResult.y, width: overlaySize.width, height: overlaySize.height },
+                placement: positionResult.placement || position,
                 closeOnClickOutside,
                 closeOnEscape,
                 strategy,
@@ -31568,13 +31084,13 @@ function Indicator({ size = 'sm', color, borderColor, borderWidth = 1, placement
 
 const AVATAR_ALLOWED_SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
 const AVATAR_SIZE_SCALE = {
-    xs: { avatar: 24, badge: 6, text: 'xs' },
-    sm: { avatar: 32, badge: 8, text: 'xs' },
-    md: { avatar: 40, badge: 10, text: 'sm' },
-    lg: { avatar: 48, badge: 12, text: 'md' },
-    xl: { avatar: 64, badge: 16, text: 'lg' },
-    '2xl': { avatar: 80, badge: 20, text: 'xl' },
-    '3xl': { avatar: 96, badge: 24, text: '2xl' },
+    xs: { avatar: 24, indicator: 6, text: 'xs' },
+    sm: { avatar: 32, indicator: 8, text: 'xs' },
+    md: { avatar: 40, indicator: 10, text: 'sm' },
+    lg: { avatar: 48, indicator: 12, text: 'md' },
+    xl: { avatar: 64, indicator: 16, text: 'lg' },
+    '2xl': { avatar: 80, indicator: 20, text: 'xl' },
+    '3xl': { avatar: 96, indicator: 24, text: '2xl' },
 };
 const BASE_AVATAR_METRICS = AVATAR_SIZE_SCALE.md;
 function resolveAvatarMetrics(value) {
@@ -31592,11 +31108,11 @@ function resolveAvatarMetrics(value) {
 }
 function calculateNumericMetrics$1(value) {
     const ratio = value / BASE_AVATAR_METRICS.avatar;
-    const badge = Math.max(4, Math.round(BASE_AVATAR_METRICS.badge * ratio));
+    const indicator = Math.max(4, Math.round(BASE_AVATAR_METRICS.indicator * ratio));
     const text = pickTextSize(value);
     return {
         avatar: value,
-        badge,
+        indicator,
         text,
     };
 }
@@ -31615,9 +31131,9 @@ function pickTextSize(value) {
         return 'sm';
     return 'xs';
 }
-function Avatar({ size = 'md', src, fallback, backgroundColor, textColor = 'white', online, badgeColor, style, accessibilityLabel, label, description, gap = 8, showText = true, }) {
+function Avatar({ size = 'md', src, fallback, backgroundColor, textColor = 'white', online, indicatorColor, style, accessibilityLabel, label, description, gap = 8, showText = true, }) {
     const theme = useTheme();
-    const { avatar: avatarSize, badge: badgeSize, text: textSize } = resolveAvatarMetrics(size);
+    const { avatar: avatarSize, indicator: indicatorSize, text: textSize } = resolveAvatarMetrics(size);
     const avatarStyle = {
         width: avatarSize,
         height: avatarSize,
@@ -31635,7 +31151,7 @@ function Avatar({ size = 'md', src, fallback, backgroundColor, textColor = 'whit
                         width: avatarSize,
                         height: avatarSize,
                         borderRadius: avatarSize / 2,
-                    }, accessibilityLabel: accessibilityLabel })) : (jsxRuntime.jsx(Text, { size: textSize, color: textColor, weight: "semibold", style: { textAlign: 'center' }, children: fallback || '?' })) }), online && (jsxRuntime.jsx(Indicator, { size: badgeSize, color: badgeColor || theme.colors.success[5], borderColor: theme.colors.gray[0], placement: "bottom-right" }))] }));
+                    }, accessibilityLabel: accessibilityLabel })) : (jsxRuntime.jsx(Text, { size: textSize, color: textColor, weight: "semibold", style: { textAlign: 'center' }, children: fallback || '?' })) }), online && (jsxRuntime.jsx(Indicator, { size: indicatorSize, color: indicatorColor || theme.colors.success[5], borderColor: theme.colors.gray[0], placement: "bottom-right" }))] }));
     if (label || description) {
         return (jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [content, showText && (jsxRuntime.jsxs(reactNative.View, { style: { marginLeft: gap, justifyContent: 'center' }, children: [label && (typeof label === 'string' ? (jsxRuntime.jsx(Text, { size: textSize, weight: "semibold", children: label })) : label), description && (typeof description === 'string' ? (jsxRuntime.jsx(Text, { size: textSize, color: theme.colors.gray[6], children: description })) : description)] }))] }));
     }
@@ -32137,7 +31653,7 @@ function usePopoverContext(component) {
 const DEFAULT_ARROW_SIZE = 7;
 const PopoverBase = (props, ref) => {
     var _a;
-    const { children, opened: controlledOpened, defaultOpened = false, onChange, onOpen, onClose, onDismiss, disabled = false, closeOnClickOutside = true, closeOnEscape = true, clickOutsideEvents, // currently not implemented
+    const { children, opened: controlledOpened, defaultOpened = false, onChange, onOpen, onClose, onDismiss, trigger = 'click', disabled = false, closeOnClickOutside = true, closeOnEscape = true, clickOutsideEvents, // currently not implemented
     trapFocus = false, keepMounted = false, returnFocus = false, withinPortal = true, withOverlay = false, overlayProps, width, minWidth, minHeight, maxWidth, maxHeight, radius, shadow, zIndex = 300, position = 'bottom', offset = 8, floatingStrategy = 'fixed', middlewares, preventPositionChangeWhenVisible = false, hideDetached = true, viewport, keyboardAvoidance = true, fallbackPlacements, boundary, withRoles = true, id, withArrow = false, arrowSize = DEFAULT_ARROW_SIZE, arrowRadius = 0, arrowOffset = 5, arrowPosition = 'center', onPositionChange, testID, ...rest } = props;
     const theme = useTheme();
     const { spacingProps } = extractSpacingProps(rest);
@@ -32149,9 +31665,18 @@ const PopoverBase = (props, ref) => {
     const openedRef = React.useRef(opened);
     const closingReasonRef = React.useRef(null);
     const anchorMeasurementsRef = React.useRef(null);
+    const hoverTimeoutRef = React.useRef(null);
     React.useEffect(() => {
         openedRef.current = opened;
     }, [opened]);
+    // Cleanup hover timeout on unmount
+    React.useEffect(() => {
+        return () => {
+            if (hoverTimeoutRef.current) {
+                clearTimeout(hoverTimeoutRef.current);
+            }
+        };
+    }, []);
     const resolvedOffset = typeof offset === 'number' ? offset : (_a = offset === null || offset === void 0 ? void 0 : offset.mainAxis) !== null && _a !== void 0 ? _a : 8;
     const resolvedFlip = preventPositionChangeWhenVisible
         ? false
@@ -32164,7 +31689,7 @@ const PopoverBase = (props, ref) => {
             ? false
             : true;
     const resolvedStrategy = floatingStrategy !== null && floatingStrategy !== void 0 ? floatingStrategy : 'fixed';
-    const { position: positioningResult, anchorRef, popoverRef, showOverlay, hideOverlay, updatePosition } = useDropdownPositioning({
+    const { position: positioningResult, anchorRef, popoverRef, showOverlay, hideOverlay, updatePosition, isPositioning } = useDropdownPositioning({
         isOpen: opened && !disabled && !!dropdownState,
         placement: position,
         offset: resolvedOffset,
@@ -32176,9 +31701,20 @@ const PopoverBase = (props, ref) => {
         fallbackPlacements,
         viewport,
         onClose: () => handleOverlayClose('dismiss'),
-        closeOnClickOutside,
+        closeOnClickOutside: trigger === 'hover' ? false : closeOnClickOutside,
         closeOnEscape,
     });
+    // Track if we've done measurement-based positioning to avoid flicker
+    const hasPositionedRef = React.useRef(false);
+    React.useEffect(() => {
+        // Only mark as positioned when we have a measurement-based position
+        if (opened && positioningResult && positioningResult._hasMeasuredPopover) {
+            hasPositionedRef.current = true;
+        }
+        if (!opened) {
+            hasPositionedRef.current = false;
+        }
+    }, [opened, positioningResult]);
     const popoverStyles = React.useMemo(() => createPopoverStyles(theme)({
         radius,
         shadow,
@@ -32282,6 +31818,28 @@ const PopoverBase = (props, ref) => {
             openPopover();
         }
     }, [closePopover, openPopover]);
+    // Hover-specific handlers with delay to prevent glitching when moving between target and dropdown
+    const handleHoverOpen = React.useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        openPopover();
+    }, [openPopover]);
+    const handleHoverClose = React.useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+        }
+        hoverTimeoutRef.current = setTimeout(() => {
+            closePopover('programmatic');
+            hoverTimeoutRef.current = null;
+        }, 150); // Delay to allow mouse to move to dropdown
+    }, [closePopover]);
+    // Store hover handlers in refs to avoid causing re-renders in useEffect
+    const hoverHandlersRef = React.useRef({ open: handleHoverOpen, close: handleHoverClose });
+    React.useEffect(() => {
+        hoverHandlersRef.current = { open: handleHoverOpen, close: handleHoverClose };
+    }, [handleHoverOpen, handleHoverClose]);
     React.useEffect(() => {
         if (opened) {
             updateAnchorMeasurements();
@@ -32340,14 +31898,26 @@ const PopoverBase = (props, ref) => {
         if (typeof resolvedMaxHeight === 'number')
             sizeStyles.maxHeight = resolvedMaxHeight;
         const dropdownStyle = [popoverStyles.dropdown, dropdownState.style, sizeStyles];
-        const content = (jsxRuntime.jsxs(reactNative.View, { ref: popoverRef, style: [popoverStyles.wrapper, widthOverride ? { width: widthOverride } : null], pointerEvents: dropdownState.trapFocus ? 'auto' : 'box-none', testID: dropdownState.testID, onLayout: handleDropdownLayout, ...dropdownState.containerProps, children: [jsxRuntime.jsx(reactNative.View, { style: dropdownStyle, children: dropdownState.content }), withArrow && (jsxRuntime.jsx(reactNative.View, { style: getArrowStyle(positioningResult.placement, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme) }))] }));
+        // Hover handlers for the dropdown to keep it open when mouse moves from target to dropdown
+        const dropdownHoverHandlers = trigger === 'hover' && reactNative.Platform.OS === 'web'
+            ? {
+                onMouseEnter: () => hoverHandlersRef.current.open(),
+                onMouseLeave: () => hoverHandlersRef.current.close(),
+            }
+            : {};
+        // Hide content until we have measurement-based positioning to prevent visual "snap"
+        const hasMeasuredPosition = (positioningResult === null || positioningResult === void 0 ? void 0 : positioningResult._hasMeasuredPopover) === true;
+        const visibilityStyle = !hasMeasuredPosition && reactNative.Platform.OS === 'web'
+            ? { opacity: 0 }
+            : {};
+        const content = (jsxRuntime.jsxs(reactNative.View, { ref: popoverRef, style: [popoverStyles.wrapper, widthOverride ? { width: widthOverride } : null, visibilityStyle], pointerEvents: trigger === 'hover' ? 'auto' : (dropdownState.trapFocus ? 'auto' : 'box-none'), testID: dropdownState.testID, onLayout: handleDropdownLayout, ...dropdownHoverHandlers, ...dropdownState.containerProps, children: [jsxRuntime.jsx(reactNative.View, { style: dropdownStyle, children: dropdownState.content }), withArrow && (jsxRuntime.jsx(reactNative.View, { style: getArrowStyle(positioningResult.placement, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme) }))] }));
         showOverlay(content, {
             width: widthOverride,
             maxHeight: resolvedMaxHeight,
             zIndex,
         });
         onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(positioningResult.placement);
-    }, [opened, dropdownState, positioningResult, popoverRef, showOverlay, hideOverlay, popoverStyles.dropdown, popoverStyles.wrapper, width, maxHeight, minWidth, minHeight, maxWidth, withArrow, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme, zIndex, onPositionChange, schedulePositionUpdate]);
+    }, [opened, dropdownState, positioningResult, popoverRef, showOverlay, hideOverlay, popoverStyles.dropdown, popoverStyles.wrapper, width, maxHeight, minWidth, minHeight, maxWidth, withArrow, arrowSize, arrowRadius, arrowOffset, arrowPosition, theme, zIndex, onPositionChange, schedulePositionUpdate, trigger, isPositioning]);
     React.useEffect(() => {
         return () => {
             hideOverlay();
@@ -32368,6 +31938,8 @@ const PopoverBase = (props, ref) => {
         open: openPopover,
         close: () => closePopover('programmatic'),
         toggle: togglePopover,
+        hoverOpen: handleHoverOpen,
+        hoverClose: handleHoverClose,
         registerDropdown,
         unregisterDropdown,
         anchorRef,
@@ -32376,7 +31948,8 @@ const PopoverBase = (props, ref) => {
         withRoles,
         disabled,
         returnFocus,
-    }), [opened, openPopover, closePopover, togglePopover, registerDropdown, unregisterDropdown, anchorRef, targetId, dropdownId, withRoles, disabled, returnFocus]);
+        trigger,
+    }), [opened, openPopover, closePopover, togglePopover, handleHoverOpen, handleHoverClose, registerDropdown, unregisterDropdown, anchorRef, targetId, dropdownId, withRoles, disabled, returnFocus, trigger]);
     const setContainerRef = React.useCallback((node) => {
         if (typeof ref === 'function') {
             ref(node);
@@ -32426,16 +31999,44 @@ const PopoverTargetBase = (props, ref) => {
         : { id: context.targetId };
     const composedRef = mergeRefs(children.ref, externalTargetRef);
     const triggerHandlers = {};
-    triggerHandlers.onPress = (...args) => {
-        const tgt = targetProps;
-        if (tgt && typeof tgt.onPress === 'function') {
-            tgt.onPress(...args);
-        }
-        if (typeof childProps.onPress === 'function') {
-            childProps.onPress(...args);
-        }
-        context.toggle();
-    };
+    const wrapperHoverHandlers = {};
+    // Click trigger: toggle on press
+    if (context.trigger === 'click') {
+        triggerHandlers.onPress = (...args) => {
+            const tgt = targetProps;
+            if (tgt && typeof tgt.onPress === 'function') {
+                tgt.onPress(...args);
+            }
+            if (typeof childProps.onPress === 'function') {
+                childProps.onPress(...args);
+            }
+            context.toggle();
+        };
+    }
+    // Hover trigger: open/close on mouse enter/leave (web only)
+    // Applied to the wrapper View for reliable hover detection
+    if (context.trigger === 'hover' && reactNative.Platform.OS === 'web') {
+        wrapperHoverHandlers.onMouseEnter = (...args) => {
+            const tgt = targetProps;
+            if (tgt && typeof tgt.onMouseEnter === 'function') {
+                tgt.onMouseEnter(...args);
+            }
+            if (typeof childProps.onMouseEnter === 'function') {
+                childProps.onMouseEnter(...args);
+            }
+            context.hoverOpen();
+        };
+        wrapperHoverHandlers.onMouseLeave = (...args) => {
+            const tgt = targetProps;
+            if (tgt && typeof tgt.onMouseLeave === 'function') {
+                tgt.onMouseLeave(...args);
+            }
+            if (typeof childProps.onMouseLeave === 'function') {
+                childProps.onMouseLeave(...args);
+            }
+            context.hoverClose();
+        };
+    }
     if (reactNative.Platform.OS === 'web') {
         triggerHandlers.onKeyDown = (event) => {
             const tgt = targetProps;
@@ -32457,7 +32058,14 @@ const PopoverTargetBase = (props, ref) => {
         };
     }
     const dynamicRefProp = { [refProp]: composedRef };
-    delete sanitizedTargetProps.onPress;
+    // Remove handlers that we're overriding from sanitizedTargetProps
+    if (context.trigger === 'click') {
+        delete sanitizedTargetProps.onPress;
+    }
+    if (context.trigger === 'hover') {
+        delete sanitizedTargetProps.onMouseEnter;
+        delete sanitizedTargetProps.onMouseLeave;
+    }
     delete sanitizedTargetProps.onKeyDown;
     const mergedProps = {
         ...sanitizedTargetProps,
@@ -32469,7 +32077,7 @@ const PopoverTargetBase = (props, ref) => {
         mergedProps.disabled = true;
     }
     const anchorWrapperRef = mergeRefs(context.anchorRef, ref);
-    return (jsxRuntime.jsx(reactNative.View, { ref: anchorWrapperRef, collapsable: false, children: React.cloneElement(children, mergedProps) }));
+    return (jsxRuntime.jsx(reactNative.View, { ref: anchorWrapperRef, collapsable: false, ...wrapperHoverHandlers, children: React.cloneElement(children, mergedProps) }));
 };
 const PopoverDropdownBase = (props, _ref) => {
     const { children, trapFocus = false, keepMounted, style, testID, ...rest } = props;
@@ -32513,8 +32121,11 @@ function getArrowStyle(placement, arrowSize, arrowRadius, arrowOffset, arrowPosi
     const [side, alignment] = placement.split('-');
     switch (side) {
         case 'top':
+            // Arrow points down, hide the borders that overlap with content (top-left corner after rotation)
             return {
                 ...base,
+                borderTopWidth: 0,
+                borderLeftWidth: 0,
                 bottom: -arrowSize,
                 left: alignment === 'end'
                     ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
@@ -32524,8 +32135,11 @@ function getArrowStyle(placement, arrowSize, arrowRadius, arrowOffset, arrowPosi
                 marginLeft: alignment || arrowPosition === 'side' ? 0 : -arrowSize,
             };
         case 'bottom':
+            // Arrow points up, hide the borders that overlap with content (bottom-right corner after rotation)
             return {
                 ...base,
+                borderBottomWidth: 0,
+                borderRightWidth: 0,
                 top: -arrowSize,
                 left: alignment === 'end'
                     ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
@@ -32535,8 +32149,11 @@ function getArrowStyle(placement, arrowSize, arrowRadius, arrowOffset, arrowPosi
                 marginLeft: alignment || arrowPosition === 'side' ? 0 : -arrowSize,
             };
         case 'left':
+            // Arrow points right, hide the borders that overlap with content (bottom-left corner after rotation)
             return {
                 ...base,
+                borderBottomWidth: 0,
+                borderLeftWidth: 0,
                 right: -arrowSize,
                 top: alignment === 'end'
                     ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
@@ -32546,8 +32163,11 @@ function getArrowStyle(placement, arrowSize, arrowRadius, arrowOffset, arrowPosi
                 marginTop: alignment || arrowPosition === 'side' ? 0 : -arrowSize,
             };
         case 'right':
+            // Arrow points left, hide the borders that overlap with content (top-right corner after rotation)
             return {
                 ...base,
+                borderTopWidth: 0,
+                borderRightWidth: 0,
                 left: -arrowSize,
                 top: alignment === 'end'
                     ? `calc(100% - ${(arrowPosition === 'side' ? arrowOffset : arrowSize)}px)`
@@ -33468,7 +33088,7 @@ const filterData = (data, filters, columns, searchValue, rowFeatureToggle) => {
     return filteredData;
 };
 // DataTable component
-const DataTable = ({ id, data, columns, loading = false, error = null, emptyMessage = 'No data available', searchable = true, searchPlaceholder = 'Search...', searchValue: controlledSearchValue, onSearchChange, sortBy = [], onSortChange, filters = [], onFilterChange, pagination, onPaginationChange, selectable = false, selectedRows = [], onSelectionChange, getRowId = (_, index) => index, onRowClick, editMode = false, onEditModeChange, onCellEdit, bulkActions = [], variant = 'default', density = 'normal', height, virtual = false, style, hoverHighlight = true, enableColumnResizing = false, rowFeatureToggle, initialHiddenColumns = [], onColumnVisibilityChange, onColumnSettings, showColumnVisibilityManager = true, rowsPerPageOptions = [10, 25, 50, 100], showRowsPerPageControl = true, rowActions, actionsColumnWidth = 100, fullWidth = true, 
+const DataTable = ({ id, data, columns, loading = false, error = null, emptyMessage = 'No data available', searchable = true, searchPlaceholder = 'Search...', searchValue: controlledSearchValue, onSearchChange, sortBy = [], onSortChange, filters = [], onFilterChange, pagination, onPaginationChange, selectable = false, selectedRows = [], onSelectionChange, getRowId = (_, index) => index, onRowClick, editMode = false, onEditModeChange, onCellEdit, bulkActions = [], variant = 'default', striped: stripedProp, density = 'normal', height, virtual = false, style, hoverHighlight = true, enableColumnResizing = false, rowFeatureToggle, initialHiddenColumns = [], onColumnVisibilityChange, onColumnSettings, showColumnVisibilityManager = true, rowsPerPageOptions = [10, 25, 50, 100], showRowsPerPageControl = true, rowActions, actionsColumnWidth = 100, fullWidth = true, 
 // Border styling props
 rowBorderWidth, rowBorderColor, rowBorderStyle = 'solid', columnBorderWidth, columnBorderColor, columnBorderStyle = 'solid', showOuterBorder = false, outerBorderWidth = 1, outerBorderColor, 
 // Expandable rows props
@@ -33476,6 +33096,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
     const { spacingProps, otherProps } = extractSpacingProps(props);
     const theme = useTheme();
     const { isRTL } = useDirection();
+    const isStriped = stripedProp !== null && stripedProp !== void 0 ? stripedProp : variant === 'striped';
     // Local state
     const [internalSearchValue, setInternalSearchValue] = React.useState('');
     const [editingCell, setEditingCell] = React.useState(null);
@@ -33912,7 +33533,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
         const rowElement = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TableTr, { selected: isSelected, onPress: () => onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, rowIndex), style: {
                         backgroundColor: isSelected
                             ? theme.colors.primary[1]
-                            : variant === 'striped' && rowIndex % 2 === 1
+                            : isStriped && rowIndex % 2 === 1
                                 ? theme.colors.gray[0]
                                 : 'transparent',
                         borderBottomWidth: rowBorderWidth || (variant === 'bordered' ? 1 : 0),
@@ -33992,7 +33613,7 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
         borderRadius: showOuterBorder ? 8 : 0
     };
     if (loading) {
-        return (jsxRuntime.jsxs(reactNative.View, { style: [getSpacingStyles(spacingProps), style], ...otherProps, children: [renderHeader(), jsxRuntime.jsxs(Table, { striped: variant === 'striped', withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: [jsxRuntime.jsxs(TableTr, { style: { backgroundColor: theme.colors.gray[0] }, children: [selectable && (jsxRuntime.jsx(TableTh, { w: 50, children: jsxRuntime.jsx(reactNative.View, { style: { width: 20, height: 20, backgroundColor: theme.colors.gray[2], borderRadius: 4 } }) })), expandableRowRender && (jsxRuntime.jsx(TableTh, { w: 50, children: jsxRuntime.jsx(reactNative.View, { style: { width: 20, height: 20, backgroundColor: theme.colors.gray[2], borderRadius: 4 } }) })), visibleColumns.map(column => (jsxRuntime.jsx(TableTh, { w: column.width || columnWidths[column.key], minWidth: column.minWidth, children: jsxRuntime.jsx(reactNative.View, { style: {
+        return (jsxRuntime.jsxs(reactNative.View, { style: [getSpacingStyles(spacingProps), style], ...otherProps, children: [renderHeader(), jsxRuntime.jsxs(Table, { striped: isStriped, withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: [jsxRuntime.jsxs(TableTr, { style: { backgroundColor: theme.colors.gray[0] }, children: [selectable && (jsxRuntime.jsx(TableTh, { w: 50, children: jsxRuntime.jsx(reactNative.View, { style: { width: 20, height: 20, backgroundColor: theme.colors.gray[2], borderRadius: 4 } }) })), expandableRowRender && (jsxRuntime.jsx(TableTh, { w: 50, children: jsxRuntime.jsx(reactNative.View, { style: { width: 20, height: 20, backgroundColor: theme.colors.gray[2], borderRadius: 4 } }) })), visibleColumns.map(column => (jsxRuntime.jsx(TableTh, { w: column.width || columnWidths[column.key], minWidth: column.minWidth, children: jsxRuntime.jsx(reactNative.View, { style: {
                                             height: 20,
                                             backgroundColor: theme.colors.gray[2],
                                             borderRadius: 4,
@@ -34014,9 +33635,9 @@ expandableRowRender, initialExpandedRows = [], expandedRows: controlledExpandedR
                         borderColor: theme.colors.error[2]
                     }, children: [jsxRuntime.jsx(Icon, { name: "error", size: 32, color: theme.colors.error[5], style: { marginBottom: 12 } }), jsxRuntime.jsx(Text, { variant: "h6", color: theme.colors.error[7], style: { marginBottom: 8 }, children: "Error Loading Data" }), jsxRuntime.jsx(Text, { variant: "p", colorVariant: "muted", style: { textAlign: 'center' }, children: error })] })] }));
     }
-    return (jsxRuntime.jsxs(reactNative.View, { style: [getSpacingStyles(spacingProps), style], ...otherProps, children: [renderHeader(), virtual ? (jsxRuntime.jsx(reactNative.View, { style: [{ width: '100%', overflow: 'hidden' }, tableBorderStyle], children: jsxRuntime.jsx(reactNative.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: reactNative.Platform.OS === 'web', contentContainerStyle: minWidthValue ? { minWidth: minWidthValue } : undefined, children: jsxRuntime.jsxs(reactNative.View, { style: { flex: 1 }, children: [jsxRuntime.jsx(Table, { striped: variant === 'striped', withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: headerRow }), processedData.length === 0 ? (jsxRuntime.jsx(Table, { striped: variant === 'striped', withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: emptyStateRow })) : (jsxRuntime.jsx(flashList.FlashList, { data: processedData, keyExtractor: (item, index) => String(getRowId(item, index)), renderItem: renderVirtualRow, ...flashListSizingProps, extraData: flashListExtraData, contentContainerStyle: { flexGrow: 1 }, showsVerticalScrollIndicator: reactNative.Platform.OS === 'web' }))] }) }) })) : (
+    return (jsxRuntime.jsxs(reactNative.View, { style: [getSpacingStyles(spacingProps), style], ...otherProps, children: [renderHeader(), virtual ? (jsxRuntime.jsx(reactNative.View, { style: [{ width: '100%', overflow: 'hidden' }, tableBorderStyle], children: jsxRuntime.jsx(reactNative.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: reactNative.Platform.OS === 'web', contentContainerStyle: minWidthValue ? { minWidth: minWidthValue } : undefined, children: jsxRuntime.jsxs(reactNative.View, { style: { flex: 1 }, children: [jsxRuntime.jsx(Table, { striped: isStriped, withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: headerRow }), processedData.length === 0 ? (jsxRuntime.jsx(Table, { striped: isStriped, withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth: fullWidth, children: emptyStateRow })) : (jsxRuntime.jsx(flashList.FlashList, { data: processedData, keyExtractor: (item, index) => String(getRowId(item, index)), renderItem: renderVirtualRow, ...flashListSizingProps, extraData: flashListExtraData, contentContainerStyle: { flexGrow: 1 }, showsVerticalScrollIndicator: reactNative.Platform.OS === 'web' }))] }) }) })) : (
             // <TableScrollContainer style={tableBorderStyle} minWidth={minWidthValue}>
-            jsxRuntime.jsxs(Table, { striped: variant === 'striped', withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth //</TableScrollContainer>={fullWidth}
+            jsxRuntime.jsxs(Table, { striped: isStriped, withTableBorder: variant === 'bordered', withRowBorders: variant !== 'default', verticalSpacing: density === 'compact' ? 'xs' : density === 'comfortable' ? 'lg' : 'sm', fullWidth //</TableScrollContainer>={fullWidth}
                 : true, children: [headerRow, processedData.length === 0 ? emptyStateRow : nonVirtualRows] })
             // </TableScrollContainer>
             ), pagination && onPaginationChange && (jsxRuntime.jsx(reactNative.View, { style: {
@@ -35681,104 +35302,6 @@ const Ring = factory((props, ref) => {
     return (jsxRuntime.jsxs(reactNative.View, { ref: ref, style: [styles$8.container, spacingStyles, style], testID: testID, accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : `Ring value ${Math.round(percent)} percent`, accessibilityRole: "progressbar", accessibilityValue: { min, max, now: Math.round(clampedValue) }, ...otherProps, children: [jsxRuntime.jsxs(reactNative.View, { style: [styles$8.ringWrapper, { width: size, height: size }, ringStyle], children: [jsxRuntime.jsxs(Svg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [jsxRuntime.jsx(Svg.Circle, { cx: size / 2, cy: size / 2, r: radius, stroke: defaultTrackColor, strokeWidth: thickness, fill: "transparent" }), jsxRuntime.jsx(Svg.Circle, { cx: size / 2, cy: size / 2, r: radius, stroke: resolvedProgressColor, strokeWidth: thickness, strokeLinecap: roundedCaps ? 'round' : 'butt', strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: dashOffset, fill: "transparent", transform: `rotate(-90 ${size / 2} ${size / 2})` })] }), jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: [styles$8.centerContent, { width: size, height: size }, contentStyle], children: centerContent })] }), caption !== undefined && caption !== null ? (React.isValidElement(caption) ? (caption) : (jsxRuntime.jsx(Text, { variant: "span", size: "xs", color: captionTextColor, weight: "600", style: [{ marginTop: 6, letterSpacing: 1 }, captionStyle], children: caption }))) : null] }));
 }, { displayName: 'Ring' });
 
-const NAVIGATIONPROGRESS_DEFAULTS = {
-    size: 3,
-    color: 'primary',
-    zIndex: 9999,
-    overlay: true,
-    stepInterval: 500,
-    radius: 0,
-};
-
-let subscribers = new Set();
-let internalState = { value: 0, active: false };
-let interval = null;
-function broadcast() { subscribers.forEach(cb => cb({ ...internalState })); }
-function schedule(intervalMs) {
-    clearInterval(interval);
-    interval = setInterval(() => {
-        if (!internalState.active)
-            return;
-        const remain = 100 - internalState.value;
-        const inc = Math.max(0.1, remain * 0.03);
-        internalState.value = Math.min(99, internalState.value + inc);
-        broadcast();
-    }, intervalMs);
-}
-const navigationProgress = {
-    start() { if (internalState.active)
-        return; internalState.active = true; if (internalState.value >= 100)
-        internalState.value = 0; broadcast(); schedule(NAVIGATIONPROGRESS_DEFAULTS.stepInterval); },
-    stop() { internalState.active = false; broadcast(); },
-    complete() { internalState.active = true; internalState.value = 100; broadcast(); setTimeout(() => { internalState.active = false; internalState.value = 0; broadcast(); }, 400); },
-    reset() { internalState.value = 0; internalState.active = false; broadcast(); },
-    set(v) { internalState.value = Math.max(0, Math.min(100, v)); broadcast(); },
-    increment(delta = 5) { internalState.value = Math.min(100, internalState.value + delta); broadcast(); },
-    decrement(delta = 5) { internalState.value = Math.max(0, internalState.value - delta); broadcast(); },
-    isActive() { return internalState.active; }
-};
-const NavigationProgress = ({ value, size = NAVIGATIONPROGRESS_DEFAULTS.size, color = NAVIGATIONPROGRESS_DEFAULTS.color, zIndex = NAVIGATIONPROGRESS_DEFAULTS.zIndex, overlay = NAVIGATIONPROGRESS_DEFAULTS.overlay, stepInterval = NAVIGATIONPROGRESS_DEFAULTS.stepInterval, radius = NAVIGATIONPROGRESS_DEFAULTS.radius, active = true, style }) => {
-    const theme = useTheme();
-    const scheme = useColorScheme();
-    const isDark = scheme === 'dark';
-    const progress = Animated.useSharedValue(0);
-    const opacity = Animated.useSharedValue(0);
-    React.useEffect(() => {
-        const sub = (s) => {
-            if (value == null) {
-                progress.value = Animated.withTiming(s.value, { duration: stepInterval });
-                opacity.value = Animated.withTiming(s.active ? 1 : 0, { duration: 150 });
-            }
-        };
-        subscribers.add(sub);
-        broadcast();
-        return () => { subscribers.delete(sub); };
-    }, [value, stepInterval, progress, opacity]);
-    React.useEffect(() => {
-        if (value != null) {
-            progress.value = Animated.withTiming(value, { duration: stepInterval });
-            opacity.value = Animated.withTiming(active ? 1 : 0, { duration: 150 });
-        }
-    }, [value, active, stepInterval]);
-    let resolvedColor = color;
-    if (theme.colors[color]) {
-        const bucket = theme.colors[color];
-        resolvedColor = bucket[5] || bucket[4] || bucket[0];
-    }
-    const barStyle = Animated.useAnimatedStyle(() => ({ width: `${progress.value}%` }));
-    const containerStyle = Animated.useAnimatedStyle(() => ({ opacity: opacity.value }));
-    return (jsxRuntime.jsxs(Animated.View, { style: [
-            {
-                position: overlay ? 'absolute' : 'relative',
-                top: 0,
-                left: 0,
-                right: 0,
-                height: size,
-                backgroundColor: isDark ? theme.colors.gray[3] : theme.colors.gray[2],
-                overflow: 'hidden',
-                zIndex,
-                borderRadius: radius,
-                pointerEvents: 'none'
-            },
-            containerStyle,
-            style
-        ], children: [jsxRuntime.jsx(Animated.View, { style: [{
-                        position: 'absolute',
-                        top: 0,
-                        bottom: 0,
-                        left: 0,
-                        backgroundColor: resolvedColor,
-                        borderRadius: radius,
-                    }, barStyle] }), jsxRuntime.jsx(Animated.View, { style: [{
-                        position: 'absolute',
-                        top: 0,
-                        bottom: 0,
-                        right: 0,
-                        width: 80,
-                        backgroundColor: 'rgba(255,255,255,0.2)'
-                    }, barStyle] })] }));
-};
-
 const DEFAULT_OPACITY = 0.6;
 const HEX_COLOR_REGEX = /^#?[0-9a-f]{3,8}$/i;
 const clampOpacity = (value) => {
@@ -35971,270 +35494,6 @@ const LoadingOverlay = React.forwardRef((props, ref) => {
 });
 LoadingOverlay.displayName = 'LoadingOverlay';
 
-// A lightweight hover-activated floating panel similar to Mantine HoverCard
-function HoverCardBase(props, ref) {
-    const { children, target, position = 'top', offset = 8, openDelay = 100, closeDelay = 150, opened: controlledOpened, shadow = 'md', radius = 'md', withinPortal = true, width, withArrow = false, closeOnEscape = true, onOpen, onClose, disabled = false, style, testID, zIndex = 3000, keepMounted = false, trigger = 'hover', } = props;
-    const [opened, setOpened] = React.useState(false);
-    const openTimeout = React.useRef(null);
-    const closeTimeout = React.useRef(null);
-    const containerRef = React.useRef(null);
-    const targetRef = React.useRef(null);
-    const overlayIdRef = React.useRef(null);
-    const overlayContentRef = React.useRef(null);
-    const isHoveringTargetRef = React.useRef(false);
-    const isHoveringOverlayRef = React.useRef(false);
-    const theme = useTheme();
-    const { openOverlay, closeOverlay, updateOverlay } = useOverlay();
-    const isOpened = controlledOpened !== undefined ? controlledOpened : opened;
-    const clearTimers = () => {
-        if (openTimeout.current) {
-            clearTimeout(openTimeout.current);
-            openTimeout.current = null;
-        }
-        if (closeTimeout.current) {
-            clearTimeout(closeTimeout.current);
-            closeTimeout.current = null;
-        }
-    };
-    const doOpen = React.useCallback(() => {
-        if (disabled)
-            return;
-        setOpened(true);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    }, [disabled, onOpen]);
-    const doClose = React.useCallback(() => {
-        setOpened(false);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [onClose]);
-    const scheduleOpen = React.useCallback(() => {
-        clearTimers();
-        openTimeout.current = setTimeout(doOpen, openDelay);
-    }, [doOpen, openDelay]);
-    const scheduleClose = React.useCallback(() => {
-        clearTimers();
-        closeTimeout.current = setTimeout(() => {
-            // Only close if neither target nor overlay are hovered (web)
-            if (reactNative.Platform.OS === 'web') {
-                if (isHoveringTargetRef.current || isHoveringOverlayRef.current)
-                    return;
-            }
-            doClose();
-        }, closeDelay);
-    }, [doClose, closeDelay]);
-    React.useEffect(() => () => clearTimers(), []);
-    // Escape key (web only)
-    React.useEffect(() => {
-        if (!closeOnEscape || reactNative.Platform.OS !== 'web')
-            return;
-        const handler = (e) => { if (e.key === 'Escape')
-            doClose(); };
-        document.addEventListener('keydown', handler);
-        return () => document.removeEventListener('keydown', handler);
-    }, [closeOnEscape, doClose]);
-    const getInlinePositionStyle = () => {
-        const base = { position: 'absolute' };
-        switch (position) {
-            case 'top': return { ...base, bottom: '100%', left: 0, marginBottom: offset };
-            case 'bottom': return { ...base, top: '100%', left: 0, marginTop: offset };
-            case 'left': return { ...base, right: '100%', top: 0, marginRight: offset };
-            case 'right': return { ...base, left: '100%', top: 0, marginLeft: offset };
-            default: return { ...base, top: '100%', left: 0, marginTop: offset };
-        }
-    };
-    const shadowStyle = (() => {
-        switch (shadow) {
-            case 'sm':
-                return { boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)', elevation: 2 };
-            case 'md':
-                return { boxShadow: '0 2px 4px rgba(0, 0, 0, 0.15)', elevation: 4 };
-            case 'lg':
-                return { boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)', elevation: 8 };
-            default:
-                return {};
-        }
-    })();
-    const renderArrow = (placement) => {
-        if (!withArrow)
-            return null;
-        const base = { position: 'absolute', width: 0, height: 0 };
-        const color = theme.colors.gray[0];
-        const styles = {
-            top: { top: '100%', left: 12, borderLeftWidth: 6, borderRightWidth: 6, borderTopWidth: 6, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderTopColor: color },
-            bottom: { bottom: '100%', left: 12, borderLeftWidth: 6, borderRightWidth: 6, borderBottomWidth: 6, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderBottomColor: color },
-            left: { left: '100%', top: 12, borderTopWidth: 6, borderBottomWidth: 6, borderLeftWidth: 6, borderTopColor: 'transparent', borderBottomColor: 'transparent', borderLeftColor: color },
-            right: { right: '100%', top: 12, borderTopWidth: 6, borderBottomWidth: 6, borderRightWidth: 6, borderTopColor: 'transparent', borderBottomColor: 'transparent', borderRightColor: color },
-        };
-        const key = placement.split('-')[0];
-        return jsxRuntime.jsx(reactNative.View, { style: { ...base, ...(styles[key] || styles.top) } });
-    };
-    const openPortal = React.useCallback(async () => {
-        if (!withinPortal || !isOpened || overlayIdRef.current)
-            return;
-        const rect = await measureElement(targetRef);
-        const estWidth = width || 240;
-        const estHeight = 160; // rough initial height
-        const pos = calculateOverlayPositionEnhanced(rect, { width: estWidth, height: estHeight }, {
-            placement: position,
-            offset,
-            viewport: getViewport(),
-            strategy: 'fixed'
-        });
-        const overlayContent = (jsxRuntime.jsxs(reactNative.View, { ref: overlayContentRef, style: [
-                {
-                    backgroundColor: theme.colors.gray[0],
-                    borderRadius: getRadius$2(radius),
-                    paddingHorizontal: getSpacing('md'),
-                    paddingVertical: getSpacing('sm'),
-                    borderWidth: 1,
-                    borderColor: theme.colors.gray[3],
-                    minWidth: width || 160,
-                    maxWidth: width || 320,
-                },
-                shadowStyle,
-            ], ...(reactNative.Platform.OS === 'web' && trigger === 'hover' ? {
-                onMouseEnter: () => { isHoveringOverlayRef.current = true; clearTimers(); },
-                onMouseLeave: () => { isHoveringOverlayRef.current = false; scheduleClose(); },
-            } : {}), children: [children, renderArrow(pos.placement)] }));
-        const id = openOverlay({
-            content: overlayContent,
-            anchor: { x: pos.x, y: pos.y, width: estWidth, height: estHeight },
-            trigger: trigger,
-            // For hover-triggered overlays, do NOT render a click-outside backdrop – it steals hover
-            // and immediately fires target onMouseLeave. We rely on pointer leave timers instead.
-            closeOnClickOutside: trigger !== 'hover',
-            closeOnEscape: closeOnEscape,
-            strategy: 'fixed',
-            onClose: () => { overlayIdRef.current = null; if (opened)
-                setOpened(false); onClose === null || onClose === void 0 ? void 0 : onClose(); },
-            zIndex
-        });
-        overlayIdRef.current = id;
-    }, [withinPortal, isOpened, overlayIdRef, position, offset, width, trigger, closeOnEscape, theme, radius, shadowStyle, children, opened, onClose, getSpacing, getRadius$2]);
-    const closePortal = React.useCallback(() => {
-        if (overlayIdRef.current) {
-            closeOverlay(overlayIdRef.current);
-            overlayIdRef.current = null;
-        }
-    }, [closeOverlay]);
-    React.useEffect(() => {
-        if (withinPortal) {
-            if (isOpened)
-                openPortal();
-            else
-                closePortal();
-        }
-        return () => { if (!isOpened)
-            closePortal(); };
-    }, [isOpened, withinPortal, openPortal, closePortal]);
-    React.useEffect(() => {
-        if (!withinPortal || reactNative.Platform.OS !== 'web' || !isOpened || !overlayIdRef.current)
-            return;
-        const handler = () => {
-            Promise.all([measureElement(targetRef)]).then(([rect]) => {
-                var _a, _b;
-                const actualWidth = ((_a = overlayContentRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || width || 240;
-                const actualHeight = ((_b = overlayContentRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 160;
-                const pos = calculateOverlayPositionEnhanced(rect, { width: actualWidth, height: actualHeight }, {
-                    placement: position,
-                    offset,
-                    viewport: getViewport(),
-                    strategy: 'fixed'
-                });
-                updateOverlay(overlayIdRef.current, { anchor: { x: pos.x, y: pos.y, width: actualWidth, height: actualHeight } });
-            });
-        };
-        window.addEventListener('resize', handler);
-        window.addEventListener('scroll', handler, true);
-        return () => {
-            window.removeEventListener('resize', handler);
-            window.removeEventListener('scroll', handler, true);
-        };
-    }, [withinPortal, isOpened, position, offset, width, updateOverlay]);
-    // Smart sizing: after content mounts, measure actual size and reposition if changed
-    React.useEffect(() => {
-        if (!withinPortal || !isOpened || !overlayIdRef.current)
-            return;
-        let frame;
-        const attempt = () => {
-            Promise.all([
-                measureElement(targetRef),
-                measureElement({ current: overlayContentRef.current })
-            ]).then(([targetRect, contentRect]) => {
-                if (!targetRect.width || !contentRect.width)
-                    return; // skip invalid
-                const desiredWidth = width || contentRect.width;
-                const desiredHeight = contentRect.height;
-                // Recalculate with actual content size
-                const pos = calculateOverlayPositionEnhanced(targetRect, { width: desiredWidth, height: desiredHeight }, {
-                    placement: position,
-                    offset,
-                    viewport: getViewport(),
-                    strategy: 'fixed'
-                });
-                updateOverlay(overlayIdRef.current, { anchor: { x: pos.x, y: pos.y, width: desiredWidth, height: desiredHeight } });
-            });
-        };
-        // Delay a bit to allow layout
-        frame = setTimeout(attempt, 30);
-        return () => { if (frame)
-            clearTimeout(frame); };
-    }, [withinPortal, isOpened, position, offset, width, updateOverlay]);
-    const targetProps = {};
-    if (trigger === 'hover') {
-        if (reactNative.Platform.OS === 'web') {
-            targetProps.onMouseEnter = () => { isHoveringTargetRef.current = true; scheduleOpen(); };
-            targetProps.onMouseLeave = () => { isHoveringTargetRef.current = false; scheduleClose(); };
-        }
-        else {
-            // fallback: tap to toggle on native
-            targetProps.onPress = () => {
-                if (isOpened) {
-                    doClose();
-                }
-                else {
-                    doOpen();
-                }
-            };
-        }
-    }
-    else if (trigger === 'click') {
-        targetProps.onPress = () => {
-            if (isOpened) {
-                doClose();
-            }
-            else {
-                doOpen();
-            }
-        };
-    }
-    const inlineContent = (isOpened || keepMounted) && !withinPortal ? (jsxRuntime.jsxs(reactNative.View, { style: [
-            getInlinePositionStyle(),
-            {
-                backgroundColor: theme.colors.gray[0],
-                borderRadius: getRadius$2(radius),
-                paddingHorizontal: getSpacing('md'),
-                paddingVertical: getSpacing('sm'),
-                borderWidth: 1,
-                borderColor: theme.colors.gray[3],
-                minWidth: width,
-                zIndex,
-            },
-            shadowStyle,
-        ], pointerEvents: "auto", ...(reactNative.Platform.OS === 'web' && trigger === 'hover' ? {
-            onMouseEnter: () => { isHoveringOverlayRef.current = true; clearTimers(); },
-            onMouseLeave: () => { isHoveringOverlayRef.current = false; scheduleClose(); },
-        } : {}), children: [children, renderArrow(position)] })) : null;
-    return (jsxRuntime.jsxs(reactNative.View, { ref: ref, style: [{ position: 'relative', alignSelf: 'flex-start' }, style], testID: testID, children: [jsxRuntime.jsx(reactNative.Pressable, { ref: (node) => { containerRef.current = node; targetRef.current = node; }, ...targetProps, style: ({ pressed }) => {
-                    var _a;
-                    return [
-                        { opacity: pressed ? 0.85 : 1 },
-                        (_a = target === null || target === void 0 ? void 0 : target.props) === null || _a === void 0 ? void 0 : _a.style,
-                    ];
-                }, children: target }), inlineContent] }));
-}
-const HoverCard = factory(HoverCardBase);
-HoverCard.displayName = 'HoverCard';
-
 const ContextMenu = ({ children, items, closeOnSelect = true, longPressDelay = 350, maxHeight = 280, onOpen, onClose, open: controlledOpen, position: controlledPosition, portalId, style, }) => {
     var _a, _b;
     const [internalOpen, setInternalOpen] = React.useState(false);
@@ -37454,49 +36713,101 @@ const CarouselDot = React.memo(({ index, pageProgress, metrics, totalPages, loop
         : { marginHorizontal: metrics.margin, height: baseDotSize, justifyContent: 'center' };
     return (jsxRuntime.jsx(reactNative.Pressable, { onPress: handlePress, accessibilityRole: "button", accessibilityLabel: `Go to slide ${index + 1}`, style: containerStyle, children: jsxRuntime.jsx(Animated.View, { style: [{ borderRadius: baseDotSize / 2 }, animatedStyle] }) }));
 });
+const getBreakpointName = (width) => {
+    if (width >= 1200)
+        return 'xl';
+    if (width >= 992)
+        return 'lg';
+    if (width >= 768)
+        return 'md';
+    if (width >= 576)
+        return 'sm';
+    return 'xs';
+};
+const getViewportWidth = () => {
+    if (reactNative.Platform.OS === 'web' && typeof window !== 'undefined' && typeof window.innerWidth === 'number') {
+        return window.innerWidth;
+    }
+    const dimensions = reactNative.Dimensions.get('window');
+    return typeof (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) === 'number' ? dimensions.width : 0;
+};
 // Optimized breakpoint hook with debouncing
 const useOptimizedBreakpoint = () => {
-    const [breakpoint, setBreakpoint] = React.useState('sm');
+    const computeState = () => {
+        const width = getViewportWidth();
+        return {
+            width,
+            breakpoint: getBreakpointName(width),
+        };
+    };
+    const [state, setState] = React.useState(computeState);
     React.useEffect(() => {
         let timeoutId;
-        const compute = () => {
-            const w = reactNative.Platform.OS === 'web'
-                ? window.innerWidth
-                : reactNative.Dimensions.get('window').width;
-            let newBreakpoint = 'sm';
-            if (w >= 1200)
-                newBreakpoint = 'xl';
-            else if (w >= 992)
-                newBreakpoint = 'lg';
-            else if (w >= 768)
-                newBreakpoint = 'md';
-            else if (w >= 576)
-                newBreakpoint = 'sm';
-            else
-                newBreakpoint = 'xs';
-            setBreakpoint(prev => prev !== newBreakpoint ? newBreakpoint : prev);
+        const update = () => {
+            const next = computeState();
+            setState(prev => (prev.breakpoint === next.breakpoint && prev.width === next.width) ? prev : next);
         };
-        const debouncedCompute = () => {
+        const debouncedUpdate = () => {
             clearTimeout(timeoutId);
-            timeoutId = setTimeout(compute, 100); // Debounce resize events
+            timeoutId = setTimeout(update, 100); // Debounce resize events
         };
-        compute();
-        if (reactNative.Platform.OS === 'web') {
-            window.addEventListener('resize', debouncedCompute, { passive: true });
+        update();
+        if (reactNative.Platform.OS === 'web' && typeof window !== 'undefined') {
+            window.addEventListener('resize', debouncedUpdate, { passive: true });
             return () => {
-                window.removeEventListener('resize', debouncedCompute);
+                window.removeEventListener('resize', debouncedUpdate);
                 clearTimeout(timeoutId);
             };
         }
-        return () => clearTimeout(timeoutId);
+        const subscription = reactNative.Dimensions.addEventListener('change', debouncedUpdate);
+        return () => {
+            subscription === null || subscription === void 0 ? void 0 : subscription.remove();
+            clearTimeout(timeoutId);
+        };
     }, []);
-    return breakpoint;
+    return state;
+};
+const parseMediaQuery = (query) => {
+    const minMatch = query.match(/min-width:\s*(\d+)px/);
+    const maxMatch = query.match(/max-width:\s*(\d+)px/);
+    return {
+        min: minMatch ? parseInt(minMatch[1], 10) : undefined,
+        max: maxMatch ? parseInt(maxMatch[1], 10) : undefined,
+    };
+};
+const matchQuery = (query, width) => {
+    const { min, max } = parseMediaQuery(query);
+    if (min != null && width < min)
+        return false;
+    if (max != null && width > max)
+        return false;
+    return true;
+};
+const mergeBreakpointProps = (baseProps, breakpointProps, width) => {
+    if (!breakpointProps)
+        return baseProps;
+    const sortedEntries = Object.entries(breakpointProps).sort((a, b) => {
+        var _a, _b;
+        const aMin = (_a = parseMediaQuery(a[0]).min) !== null && _a !== void 0 ? _a : 0;
+        const bMin = (_b = parseMediaQuery(b[0]).min) !== null && _b !== void 0 ? _b : 0;
+        return aMin - bMin;
+    });
+    let resolvedProps = { ...baseProps };
+    sortedEntries.forEach(([query, value]) => {
+        const shouldApply = width != null ? matchQuery(query, width) : (reactNative.Platform.OS === 'web' && typeof window !== 'undefined' ? window.matchMedia(query).matches : false);
+        if (shouldApply) {
+            resolvedProps = { ...resolvedProps, ...value };
+        }
+    });
+    return resolvedProps;
 };
-const Carousel = (props) => {
-    const { children, orientation = 'horizontal', height = 200, w = 300, showDots = true, showArrows = true, loop = true, autoPlay = false, autoPlayInterval = 3000, itemsPerPage = 1, slideSize, slideGap, itemGap = 16, onSlideChange, style, itemStyle, arrowSize = 'md', dotSize = 'md', // currently uniform size; active expands
+const Carousel = (incomingProps) => {
+    const { breakpoint, width: viewportWidth } = useOptimizedBreakpoint();
+    const mergedProps = React.useMemo(() => mergeBreakpointProps(incomingProps, incomingProps.breakpoints, viewportWidth), [incomingProps, viewportWidth]);
+    const { children, orientation = 'horizontal', height = 200, showDots = true, showArrows = true, loop = true, autoPlay = false, autoPlayInterval = 3000, itemsPerPage = 1, slidesToScroll, slideSize, slideGap, itemGap = 16, containScroll = 'trimSnaps', startIndex, align = 'start', dragFree = false, skipSnaps = true, dragThreshold, duration, breakpoints: _breakpoints, onSlideChange, style, itemStyle, arrowSize = 'md', dotSize = 'md', // currently uniform size; active expands
     snapToItem = true, // kept for API parity (engine handles snapping)
     windowSize = 0, // 0 means no virtualization
-    reducedMotion = false, ...rest } = props;
+    reducedMotion = false, ...rest } = mergedProps;
     const { spacingProps, otherProps } = extractSpacingProps(rest);
     const spacingStyles = getSpacingStyles(spacingProps);
     const theme = useTheme();
@@ -37508,10 +36819,9 @@ const Carousel = (props) => {
     // progress holds absolute item progress (fractional, not modulo) supplied by engine
     const progress = Animated.useSharedValue(0);
     const [currentIndex, setCurrentIndex] = React.useState(0);
+    const hasInitializedRef = React.useRef(false);
     const itemsArray = React.useMemo(() => React.Children.toArray(children), [children]);
     const totalItems = itemsArray.length;
-    // Use optimized breakpoint detection with debouncing
-    const breakpoint = useOptimizedBreakpoint();
     const resolvedGap = React.useMemo(() => {
         const raw = resolveResponsive(slideGap, breakpoint);
         if (raw == null)
@@ -37526,7 +36836,7 @@ const Carousel = (props) => {
     }, [slideGap, breakpoint, itemGap]);
     const isVertical = orientation === 'vertical';
     const containerSize = isVertical ? containerHeight : containerWidth;
-    const itemSize = React.useMemo(() => {
+    const desiredItemSize = React.useMemo(() => {
         if (containerSize <= 0)
             return 0;
         const rawSize = resolveResponsive(slideSize, breakpoint);
@@ -37552,28 +36862,166 @@ const Carousel = (props) => {
         }
         return (containerSize - resolvedGap * (itemsPerPage - 1)) / itemsPerPage;
     }, [slideSize, breakpoint, containerSize, itemsPerPage, resolvedGap]);
+    const hasLayout = isVertical ? containerHeight > 0 : containerWidth > 0;
+    const baseItemsPerPage = Math.max(1, itemsPerPage);
+    const slidesToScrollValue = Math.max(1, slidesToScroll !== null && slidesToScroll !== void 0 ? slidesToScroll : baseItemsPerPage);
+    const containMode = containScroll === false
+        ? 'none'
+        : containScroll === 'keepSnaps'
+            ? 'keepSnaps'
+            : 'trimSnaps';
+    const isDragFree = !!dragFree;
+    const allowSkipSnaps = skipSnaps !== null && skipSnaps !== void 0 ? skipSnaps : true;
+    const dragThresholdValue = typeof dragThreshold === 'number'
+        ? Math.max(dragThreshold, 0)
+        : undefined;
+    const visibleSlides = React.useMemo(() => {
+        if (!hasLayout || containerSize <= 0)
+            return baseItemsPerPage;
+        if (desiredItemSize <= 0)
+            return baseItemsPerPage;
+        const maxFit = Math.max(1, Math.floor((containerSize + resolvedGap) / (desiredItemSize + resolvedGap)));
+        if (slideSize == null) {
+            return Math.min(baseItemsPerPage, maxFit);
+        }
+        return maxFit;
+    }, [hasLayout, containerSize, desiredItemSize, resolvedGap, baseItemsPerPage, slideSize]);
+    const cardSize = React.useMemo(() => {
+        if (!hasLayout)
+            return desiredItemSize;
+        if (visibleSlides <= 1) {
+            if (desiredItemSize > 0)
+                return desiredItemSize;
+            return containerSize > 0 ? containerSize : desiredItemSize;
+        }
+        const totalGap = resolvedGap * (visibleSlides - 1);
+        const available = Math.max(containerSize - totalGap, 0);
+        return available / visibleSlides;
+    }, [hasLayout, desiredItemSize, visibleSlides, resolvedGap, containerSize]);
+    const slideExtent = React.useMemo(() => {
+        if (!hasLayout || cardSize <= 0)
+            return undefined;
+        return cardSize + resolvedGap;
+    }, [hasLayout, cardSize, resolvedGap]);
+    const scrollStep = React.useMemo(() => {
+        if (totalItems === 0)
+            return slidesToScrollValue;
+        return Math.min(slidesToScrollValue, Math.max(1, totalItems));
+    }, [slidesToScrollValue, totalItems]);
+    const maxScrollDistancePerSwipe = React.useMemo(() => {
+        if (allowSkipSnaps || slideExtent == null)
+            return undefined;
+        return slideExtent * scrollStep;
+    }, [allowSkipSnaps, slideExtent, scrollStep]);
+    const lastStart = React.useMemo(() => Math.max(totalItems - visibleSlides, 0), [totalItems, visibleSlides]);
+    const pageStartIndices = React.useMemo(() => {
+        if (totalItems === 0)
+            return [];
+        if (loop) {
+            const count = Math.max(1, Math.ceil(totalItems / scrollStep));
+            return Array.from({ length: count }, (_, idx) => (idx * scrollStep) % totalItems);
+        }
+        const starts = [];
+        const seen = new Set();
+        const limit = containMode === 'none' ? Math.max(totalItems - 1, 0) : lastStart;
+        const addStart = (value) => {
+            if (!seen.has(value)) {
+                seen.add(value);
+                starts.push(Math.max(0, value));
+            }
+        };
+        for (let start = 0; start <= limit; start += scrollStep) {
+            const value = containMode === 'trimSnaps'
+                ? Math.min(start, lastStart)
+                : start;
+            addStart(value);
+        }
+        if (containMode !== 'trimSnaps') {
+            addStart(lastStart);
+        }
+        starts.sort((a, b) => a - b);
+        return starts;
+    }, [totalItems, loop, scrollStep, containMode, lastStart]);
+    const pagedItems = React.useMemo(() => {
+        if (!totalItems)
+            return [];
+        return pageStartIndices.map(start => {
+            const group = [];
+            for (let offset = 0; offset < visibleSlides; offset++) {
+                const targetIndex = start + offset;
+                if (loop) {
+                    const normalized = ((targetIndex % totalItems) + totalItems) % totalItems;
+                    group.push(itemsArray[normalized]);
+                }
+                else if (targetIndex < totalItems) {
+                    group.push(itemsArray[targetIndex]);
+                }
+            }
+            return group;
+        });
+    }, [pageStartIndices, visibleSlides, loop, totalItems, itemsArray]);
+    const totalPages = pagedItems.length;
+    const normalizedStartIndex = React.useMemo(() => {
+        if (!totalItems)
+            return 0;
+        const rawIndex = startIndex !== null && startIndex !== void 0 ? startIndex : 0;
+        if (loop) {
+            return ((rawIndex % totalItems) + totalItems) % totalItems;
+        }
+        return Math.max(0, Math.min(rawIndex, Math.max(totalItems - 1, 0)));
+    }, [startIndex, totalItems, loop]);
+    const initialPageStart = React.useMemo(() => {
+        if (!totalItems)
+            return 0;
+        const base = Math.floor(normalizedStartIndex / scrollStep) * scrollStep;
+        if (loop) {
+            return totalItems ? base % totalItems : 0;
+        }
+        if (containMode === 'none') {
+            return Math.min(base, Math.max(totalItems - 1, 0));
+        }
+        if (containMode === 'keepSnaps') {
+            return Math.min(base, Math.max(totalItems - 1, 0));
+        }
+        return Math.min(base, lastStart);
+    }, [normalizedStartIndex, scrollStep, loop, totalItems, containMode, lastStart]);
+    const initialPageIndex = React.useMemo(() => {
+        if (!pageStartIndices.length)
+            return 0;
+        const idx = pageStartIndices.indexOf(initialPageStart);
+        return idx >= 0 ? idx : 0;
+    }, [pageStartIndices, initialPageStart]);
     const handleLayout = React.useCallback((e) => {
         setContainerWidth(e.nativeEvent.layout.width);
         setContainerHeight(e.nativeEvent.layout.height);
     }, []);
-    const goTo = React.useCallback((index) => {
-        if (!carouselRef.current)
-            return;
-        if (totalItems === 0)
+    const scrollToPage = React.useCallback((index, animated = true) => {
+        if (!carouselRef.current || totalPages === 0)
             return;
-        const clamped = ((index % totalItems) + totalItems) % totalItems;
+        const clamped = ((index % totalPages) + totalPages) % totalPages;
         const delta = clamped - currentIndex;
-        if (delta === 0)
+        if (delta === 0) {
+            if (!animated) {
+                progress.value = clamped;
+                setCurrentIndex(clamped);
+            }
             return;
-        // For looping choose shortest path if loop enabled
+        }
         let count = delta;
         if (loop) {
-            const alt = delta > 0 ? delta - totalItems : delta + totalItems;
+            const alt = delta > 0 ? delta - totalPages : delta + totalPages;
             if (Math.abs(alt) < Math.abs(count))
                 count = alt;
         }
-        carouselRef.current.scrollTo({ count, animated: true });
-    }, [carouselRef, totalItems, currentIndex, loop]);
+        carouselRef.current.scrollTo({ count, animated });
+        if (!animated) {
+            progress.value = clamped;
+            setCurrentIndex(clamped);
+        }
+    }, [carouselRef, totalPages, currentIndex, loop, progress]);
+    const goTo = React.useCallback((index) => {
+        scrollToPage(index, true);
+    }, [scrollToPage]);
     const goPrev = React.useCallback(() => {
         if (!carouselRef.current)
             return;
@@ -37584,13 +37032,22 @@ const Carousel = (props) => {
             return;
         carouselRef.current.next();
     }, []);
-    const totalPages = React.useMemo(() => totalItems, [totalItems]);
     // Page progress derived directly from absolute item progress
     const pageProgress = Animated.useDerivedValue(() => {
         return progress.value;
     }, []);
     const arrowMetrics = React.useMemo(() => resolveCarouselArrowMetrics(arrowSize), [arrowSize]);
     const dotMetrics = React.useMemo(() => resolveCarouselDotMetrics(dotSize), [dotSize]);
+    const alignJustify = React.useMemo(() => {
+        switch (align) {
+            case 'center':
+                return 'center';
+            case 'end':
+                return 'flex-end';
+            default:
+                return 'flex-start';
+        }
+    }, [align]);
     // Memoized render functions to prevent unnecessary re-renders
     const renderDots = React.useMemo(() => {
         if (!showDots || totalPages <= 1)
@@ -37606,7 +37063,7 @@ const Carousel = (props) => {
     }, [showDots, totalPages, pageProgress, dotMetrics, loop, theme, goTo, isVertical, isRTL]);
     // Arrows
     const renderArrows = () => {
-        if (!showArrows || totalItems <= 1)
+        if (!showArrows || totalPages <= 1)
             return null;
         const buttonSize = arrowMetrics.buttonSizeToken;
         const iconSize = arrowMetrics.iconSize;
@@ -37643,37 +37100,69 @@ const Carousel = (props) => {
                     }, children: jsxRuntime.jsx(Button, { size: buttonSize, variant: "secondary", icon: jsxRuntime.jsx(Icon, { name: isRTL ? 'chevron-left' : 'chevron-right', size: iconSize }), onPress: goNext, radius: "full" }) })] }));
     };
     // Autoplay: if library autoPlay not sufficient for pause logic, we can just pass through for now.
-    const enableAutoPlay = autoPlay && totalItems > 1;
+    const enableAutoPlay = autoPlay && totalPages > 1;
+    React.useEffect(() => {
+        if (!carouselRef.current || totalPages === 0 || !hasLayout)
+            return;
+        const controlledStart = startIndex != null;
+        if (controlledStart) {
+            scrollToPage(initialPageIndex, false);
+            return;
+        }
+        if (!hasInitializedRef.current) {
+            scrollToPage(initialPageIndex, false);
+            hasInitializedRef.current = true;
+        }
+    }, [scrollToPage, initialPageIndex, startIndex, totalPages, hasLayout]);
     return (jsxRuntime.jsxs(reactNative.View, { ref: containerRef, style: [
             {
+                width: '100%',
                 position: 'relative',
                 ...(isVertical ? { flexDirection: 'row' } : {})
             },
             spacingStyles,
             style
-        ], onLayout: handleLayout, ...otherProps, children: [jsxRuntime.jsx(reactNative.View, { style: { flex: 1 }, children: itemSize > 0 && (jsxRuntime.jsx(ReanimatedCarousel, { ref: carouselRef, width: isVertical ? containerWidth : itemSize, height: isVertical ? itemSize : height, style: isVertical ? { height: containerHeight } : { width: containerWidth }, vertical: isVertical, loop: loop, autoPlay: enableAutoPlay, autoPlayInterval: autoPlayInterval, data: itemsArray, pagingEnabled: snapToItem, windowSize: windowSize > 0 ? windowSize : undefined, 
+        ], onLayout: handleLayout, ...otherProps, children: [jsxRuntime.jsx(reactNative.View, { style: { flex: 1 }, children: hasLayout && pagedItems.length > 0 && cardSize > 0 && (jsxRuntime.jsx(ReanimatedCarousel, { ref: carouselRef, width: isVertical ? containerWidth : containerWidth, height: isVertical ? containerHeight : height, style: isVertical ? { height: containerHeight } : { width: containerWidth }, vertical: isVertical, loop: loop, autoPlay: enableAutoPlay, autoPlayInterval: autoPlayInterval, data: pagedItems, pagingEnabled: isDragFree ? false : snapToItem, snapEnabled: isDragFree ? false : undefined, windowSize: windowSize > 0 ? windowSize : undefined, scrollAnimationDuration: duration, 
                     // Performance optimizations
                     overscrollEnabled: false, enabled: !reducedMotion, withAnimation: reducedMotion ?
                         { type: 'timing', config: { duration: 100 } } :
-                        { type: 'spring', config: { damping: 60, stiffness: 150 } }, onProgressChange: (offset, absolute) => {
+                        { type: 'spring', config: { damping: 60, stiffness: 150 } }, maxScrollDistancePerSwipe: maxScrollDistancePerSwipe, minScrollDistancePerSwipe: dragThresholdValue, onProgressChange: (offset, absolute) => {
                         // absolute may be undefined in some versions; fallback to offset
                         const val = typeof absolute === 'number' ? absolute : offset;
                         progress.value = val;
-                        const ci = ((Math.round(val) % totalItems) + totalItems) % totalItems;
+                        const ci = totalPages > 0
+                            ? ((Math.round(val) % totalPages) + totalPages) % totalPages
+                            : 0;
                         if (ci !== currentIndex) {
                             setCurrentIndex(ci);
                             onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(ci);
                         }
-                    }, renderItem: ({ item, index }) => (jsxRuntime.jsx(reactNative.View, { style: [
-                            {
-                                width: isVertical ? containerWidth : itemSize,
-                                height: isVertical ? itemSize : height,
-                                ...(isVertical
-                                    ? { marginBottom: index < itemsArray.length - 1 ? resolvedGap : 0 }
-                                    : { marginRight: index < itemsArray.length - 1 ? resolvedGap : 0 }),
-                            },
-                            itemStyle,
-                        ], accessibilityLabel: `Carousel item ${index + 1} of ${totalItems}`, children: item })) })) }), renderArrows(), renderDots] }));
+                    }, renderItem: ({ item, index }) => {
+                        const pageItems = Array.isArray(item) ? item : [item];
+                        const pageWidth = isVertical ? containerWidth : containerWidth;
+                        const pageHeight = isVertical ? containerHeight : height;
+                        const justify = containMode === 'trimSnaps' ? 'flex-start' : alignJustify;
+                        return (jsxRuntime.jsx(reactNative.View, { style: [
+                                {
+                                    width: pageWidth,
+                                    height: pageHeight,
+                                    justifyContent: 'center',
+                                },
+                                itemStyle,
+                            ], accessibilityLabel: `Carousel item ${index + 1} of ${totalPages}`, children: jsxRuntime.jsx(reactNative.View, { style: {
+                                    flexDirection: isVertical ? 'column' : 'row',
+                                    alignItems: 'stretch',
+                                    justifyContent: justify,
+                                    flexWrap: 'nowrap',
+                                    flex: 1,
+                                }, children: pageItems.map((child, childIndex) => (jsxRuntime.jsx(reactNative.View, { style: {
+                                        width: isVertical ? '100%' : cardSize,
+                                        height: isVertical ? cardSize : '100%',
+                                        marginRight: !isVertical && childIndex < pageItems.length - 1 ? resolvedGap : 0,
+                                        marginBottom: isVertical && childIndex < pageItems.length - 1 ? resolvedGap : 0,
+                                        flexShrink: 0,
+                                    }, children: child }, childIndex))) }) }));
+                    } })) }), renderArrows(), renderDots] }));
 };
 
 // Types extracted to types.ts
@@ -39594,11 +39083,14 @@ QRCodeSVG.displayName = 'QRCodeSVG';
  */
 function QRCode(props) {
     var _a;
+    const theme = useTheme();
     const { spacingProps, otherProps: propsAfterSpacing } = extractSpacingProps(props);
     const { layoutProps, otherProps } = extractLayoutProps(propsAfterSpacing);
-    const { value, size = 400, backgroundColor = 'transparent', color = '#000000', errorCorrectionLevel = 'M', quietZone = 4, logo, style, testID, accessibilityLabel, onError, onLoadStart, // deprecated noop
+    const { value, size = 400, backgroundColor = 'transparent', color, errorCorrectionLevel = 'M', quietZone = 4, logo, style, testID, accessibilityLabel, onError, onLoadStart, // deprecated noop
     onLoadEnd, // deprecated noop
     ...rest } = otherProps;
+    // Default color to theme's primary text color for dark mode support
+    const resolvedColor = color !== null && color !== void 0 ? color : theme.text.primary;
     const { copy } = useClipboard();
     const toast = useToast();
     const shouldCopyOnPress = !!otherProps.copyOnPress;
@@ -39614,7 +39106,7 @@ function QRCode(props) {
             });
         }
     }, [copy, copyValue, toast, otherProps.copyToastMessage, otherProps.copyToastTitle]);
-    const content = (jsxRuntime.jsxs(reactNative.View, { style: { borderRadius: 8, overflow: 'hidden' }, children: [jsxRuntime.jsx(QRCodeSVG, { value: value, size: size, maxWidth: '100%', backgroundColor: backgroundColor, color: color, errorCorrectionLevel: errorCorrectionLevel, quietZone: quietZone, logo: logo, style: style, testID: testID, accessibilityLabel: accessibilityLabel, onError: onError, ...spacingProps, ...layoutProps, ...rest }), otherProps.showCopyButton && (jsxRuntime.jsx(CopyButton, { value: copyValue, iconOnly: true, size: "sm", style: { position: 'absolute', top: 8, right: 8 }, onCopy: () => { } }))] }));
+    const content = (jsxRuntime.jsxs(reactNative.View, { style: { borderRadius: 8, overflow: 'hidden' }, children: [jsxRuntime.jsx(QRCodeSVG, { value: value, size: size, maxWidth: '100%', backgroundColor: backgroundColor, color: resolvedColor, errorCorrectionLevel: errorCorrectionLevel, quietZone: quietZone, logo: logo, style: style, testID: testID, accessibilityLabel: accessibilityLabel, onError: onError, ...spacingProps, ...layoutProps, ...rest }), otherProps.showCopyButton && (jsxRuntime.jsx(CopyButton, { value: copyValue, iconOnly: true, size: "sm", style: { position: 'absolute', top: 8, right: 8 }, onCopy: () => { } }))] }));
     if (shouldCopyOnPress) {
         return (jsxRuntime.jsx(reactNative.Pressable, { onPress: handleCopy, accessibilityLabel: accessibilityLabel || 'QR code', children: content }));
     }
@@ -41687,7 +41179,6 @@ function withPressAnimation(Component, animationProps) {
  */
 const AnimatedPressable = PressAnimation;
 
-exports.AbilityCore = AbilityCore;
 exports.AccessibilityProvider = AccessibilityProvider;
 exports.Accordion = Accordion;
 exports.AmazonAppstoreBadge = AmazonAppstoreBadge;
@@ -41727,9 +41218,6 @@ exports.Button = Button;
 exports.COMPONENT_SIZES = COMPONENT_SIZES$1;
 exports.COMPONENT_SIZE_ORDER = COMPONENT_SIZE_ORDER;
 exports.Calendar = Calendar;
-exports.Can = Can;
-exports.CanWithConditions = CanWithConditions;
-exports.Cannot = Cannot;
 exports.Card = Card;
 exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
@@ -41790,7 +41278,6 @@ exports.Heading4 = Heading4;
 exports.Heading5 = Heading5;
 exports.Heading6 = Heading6;
 exports.Highlight = Highlight;
-exports.HoverCard = HoverCard;
 exports.HuaweiAppGalleryBadge = HuaweiAppGalleryBadge;
 exports.I18nProvider = I18nProvider;
 exports.Icon = Icon;
@@ -41828,7 +41315,6 @@ exports.MiniCalendar = MiniCalendar;
 exports.Month = Month;
 exports.MonthPicker = MonthPicker;
 exports.MonthPickerInput = MonthPickerInput;
-exports.NavigationProgress = NavigationProgress;
 exports.Notice = Notice;
 exports.NumberInput = NumberInput;
 exports.Overlay = Overlay;
@@ -41836,10 +41322,6 @@ exports.OverlayProvider = OverlayProvider;
 exports.P = P;
 exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
-exports.PermissionBuilder = PermissionBuilder;
-exports.PermissionGate = PermissionGate;
-exports.PermissionPatterns = PermissionPatterns;
-exports.PermissionProvider = PermissionProvider;
 exports.PhoneInput = PhoneInput;
 exports.PinInput = PinInput;
 exports.PlatformBlocksProvider = PlatformBlocksProvider;
@@ -41854,7 +41336,6 @@ exports.Rating = Rating;
 exports.RedditJoinBadge = RedditJoinBadge;
 exports.RichTextEditor = RichTextEditor;
 exports.Ring = Ring;
-exports.RoleBuilder = RoleBuilder;
 exports.Row = Row;
 exports.SIZE_SCALES = SIZE_SCALES;
 exports.Search = Search;
@@ -41912,9 +41393,7 @@ exports.createSound = createSound;
 exports.createSpotlightStore = createSpotlightStore;
 exports.createTheme = createTheme;
 exports.debounce = debounce$1;
-exports.defineAbility = defineAbility;
 exports.defineAppLayout = defineAppLayout;
-exports.defineRoleAbility = defineRoleAbility;
 exports.directSpotlight = directSpotlight;
 exports.extractDisclaimerProps = extractDisclaimerProps;
 exports.factory = factory;
@@ -41935,11 +41414,9 @@ exports.globalHotkeys = globalHotkeys;
 exports.measureAsyncPerformance = measureAsyncPerformance;
 exports.measureElement = measureElement;
 exports.measurePerformance = measurePerformance;
-exports.navigationProgress = navigationProgress;
 exports.onDialogsRequested = onDialogsRequested;
 exports.onSpotlightRequested = onSpotlightRequested;
 exports.onToastsRequested = onToastsRequested;
-exports.permissions = permissions;
 exports.pointInRect = pointInRect;
 exports.polymorphicFactory = polymorphicFactory;
 exports.px = px;
@@ -41950,7 +41427,6 @@ exports.resolveResponsiveValue = resolveResponsiveValue;
 exports.resolveSize = resolveSize;
 exports.spotlight = spotlight;
 exports.throttle = throttle;
-exports.useAbility = useAbility;
 exports.useAccessibility = useAccessibility;
 exports.useAppLayoutContext = useAppLayoutContext;
 exports.useAppShell = useAppShell;
@@ -41980,7 +41456,6 @@ exports.useOptionalFormContext = useOptionalFormContext;
 exports.useOverlay = useOverlay;
 exports.useOverlayApi = useOverlayApi;
 exports.useOverlays = useOverlays;
-exports.usePermissions = usePermissions;
 exports.usePopoverPositioning = usePopoverPositioning;
 exports.useSimpleDialog = useSimpleDialog;
 exports.useSound = useSound;
@@ -41995,8 +41470,6 @@ exports.useToast = useToast;
 exports.useToastApi = useToastApi;
 exports.useToggleColorScheme = useToggleColorScheme;
 exports.useTooltipPositioning = useTooltipPositioning;
-exports.withCan = withCan;
-exports.withCannot = withCannot;
 exports.withDisclaimer = withDisclaimer;
 exports.withPressAnimation = withPressAnimation;
 //# sourceMappingURL=index.js.map