@platform-blocks/ui 0.5.0 → 0.6.0

package/lib/esm/index.js

@@ -1164,25 +1164,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: (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 && 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);
     }
@@ -6153,31 +6178,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] = useState(null);
+    const wasLoadingRef = 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
+    useEffect(() => {
+        if (!loading && wasLoadingRef.current) {
+            // Loading just ended, allow width to be recalculated
+            setMeasuredWidth(null);
+        }
+        wasLoadingRef.current = loading;
+    }, [loading]);
+    const handleLayout = 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 : '')
@@ -6216,12 +6239,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;
@@ -6414,7 +6437,7 @@ const Button = (allProps) => {
                         ...(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 && (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 && (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 ? (jsxs(Fragment, { children: [jsx(Loader, { size: size, color: getLoaderColor(), style: !isIconButton ? { marginRight: iconSpacing } : undefined }), !isIconButton && renderButtonContent(displayContent)] })) : isIconButton ? (
                     // Icon-only button
@@ -9732,593 +9755,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 = createContext(null);
-/**
- * Permission Provider Component
- */
-const PermissionProvider = ({ rules = [], user, children, dev = {} }) => {
-    const [ability] = useState(() => createAbility(rules));
-    const [currentUser, setCurrentUser] = useState(user);
-    const updateAbility = useCallback((newRules) => {
-        ability.update(newRules);
-    }, [ability]);
-    const can = 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 = 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 = useCallback((newUser) => {
-        setCurrentUser(newUser);
-    }, []);
-    const contextValue = useMemo(() => ({
-        ability,
-        updateAbility,
-        can,
-        cannot,
-        user: currentUser,
-        setUser
-    }), [ability, updateAbility, can, cannot, currentUser, setUser]);
-    return React__default.createElement(PermissionContext.Provider, { value: contextValue }, children);
-};
-/**
- * Hook to access permission context
- */
-const usePermissions = (options = {}) => {
-    const context = 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__default.createElement(View, { style, testID }, children);
-    }
-    const hasPermission = subject
-        ? ability.can(action, subject, field)
-        : ability.can(action, '*', field);
-    if (hasPermission) {
-        return React__default.createElement(View, { style, testID }, children);
-    }
-    return React__default.createElement(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__default.createElement(View, { style, testID }, children);
-    }
-    const hasPermission = ability.can(action, subject, field);
-    if (hasPermission) {
-        return React__default.createElement(View, { style, testID }, children);
-    }
-    return React__default.createElement(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__default.createElement(View, { style, testID }, fallback);
-    }
-    const hasPermission = subject
-        ? ability.can(action, subject, field)
-        : ability.can(action, '*', field);
-    if (!hasPermission) {
-        return React__default.createElement(View, { style, testID }, children);
-    }
-    return React__default.createElement(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__default.useEffect(() => {
-        if (!allPermissionsGranted && onUnauthorized) {
-            onUnauthorized();
-        }
-    }, [allPermissionsGranted, onUnauthorized]);
-    if (allPermissionsGranted) {
-        return React__default.createElement(React__default.Fragment, null, children);
-    }
-    return React__default.createElement(React__default.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__default.createElement(Can, { I: action, a: subject, field, fallback }, React__default.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__default.createElement(Cannot, { I: action, a: subject, field, fallback }, React__default.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 = createContext(null);
 // Default persistence using localStorage (web only)
 const defaultPersistence = {
@@ -10448,7 +9884,6 @@ const OverlayBoundary = React__default.memo(function OverlayBoundary({ enabled,
 const I18nBoundary = React__default.memo(function I18nBoundary({ locale, fallbackLocale, resources, children }) {
     return (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
  */
@@ -10486,30 +9921,20 @@ function PlatformBlocksContent({ children, theme, inherit = true, withCSSVariabl
             document.documentElement.setAttribute('data-platform-blocks-color-scheme', target);
         }
     }, [effectiveColorScheme, osColorScheme]);
-    const mainContent = (jsxs(ThemeBoundary, { theme: resolvedTheme, inherit: inherit, withCSSVariables: withCSSVariables, cssVariablesSelector: cssVariablesSelector, withGlobalCSS: withGlobalCSS, children: [children, withSpotlight && jsx(SpotlightController, { config: spotlightConfig })] }));
-    return (jsx(OverlayBoundary, { enabled: withOverlays, children: mainContent }));
+    const mainContent = (jsx(ThemeBoundary, { theme: resolvedTheme, inherit: inherit, withCSSVariables: withCSSVariables, cssVariablesSelector: cssVariablesSelector, withGlobalCSS: withGlobalCSS, children: jsxs(OverlayBoundary, { enabled: withOverlays, children: [children, withSpotlight && 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 = useMemo(() => i18nResources || { en: { translation: {} } }, [i18nResources]);
     const content = (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 ? (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 = (jsx(PermissionProvider, { ...permissionConfig, children: enhancedTree }));
-    }
     if (hapticsConfig) {
         enhancedTree = (jsx(HapticsProvider, { ...hapticsConfig, children: enhancedTree }));
     }
@@ -10999,14 +10424,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) {
@@ -17257,6 +16686,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] = useState(false);
+    const [cursorVisible, setCursorVisible] = useState(true);
     const theme = useTheme();
     const { isRTL } = useDirection();
     const internalInputRef = useRef(null);
@@ -17328,6 +16758,16 @@ const TextInputBase = factory((props, ref) => {
             return '';
         return '•'.repeat(length);
     }, [isSecureEntry, normalizedValue]);
+    // Blinking cursor for secure entry (simple interval toggle)
+    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 = useMemo(() => {
         const base = [styles.input];
@@ -17429,7 +16869,12 @@ const TextInputBase = factory((props, ref) => {
         }
     }, [keyboardManager, pendingFocusTarget, focusTargetId]);
     const disclaimerNode = renderDisclaimer();
-    return (jsxs(View, { style: [styles.container, spacingStyles, layoutStyles, style], ...rest, children: [jsx(FieldHeader, { label: label, description: description, required: required, withAsterisk: withAsterisk, disabled: disabled, error: !!error, size: size }), jsxs(View, { style: styles.inputContainer, children: [startSection && (jsx(View, { style: styles.startSection, children: startSection })), jsxs(View, { style: { flex: 1, position: 'relative', justifyContent: 'center' }, children: [jsx(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 && (jsx(Text$1, { pointerEvents: "none", accessible: false, style: overlayStyle, numberOfLines: 1, ellipsizeMode: "clip", children: maskedValue }))] }), (showClearButton || endSection) && (jsxs(View, { style: styles.endSection, children: [showClearButton && (jsx(ClearButton, { onPress: handleClear, size: size, accessibilityLabel: clearButtonLabelText, hasRightSection: !!endSection })), endSection] }))] }), disclaimerNode, error && (jsx(Text$1, { style: styles.error, role: "alert", accessibilityLiveRegion: "polite", children: error })), helperText && !error && (jsx(Text$1, { style: styles.helperText, children: helperText }))] }));
+    return (jsxs(View, { style: [styles.container, spacingStyles, layoutStyles, style], ...rest, children: [jsx(FieldHeader, { label: label, description: description, required: required, withAsterisk: withAsterisk, disabled: disabled, error: !!error, size: size }), jsxs(View, { style: styles.inputContainer, children: [startSection && (jsx(View, { style: styles.startSection, children: startSection })), jsxs(View, { style: { flex: 1, position: 'relative', justifyContent: 'center' }, children: [jsx(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 && (jsxs(View, { pointerEvents: "none", style: [overlayStyle, { flexDirection: 'row', alignItems: 'center' }], children: [jsx(Text$1, { accessible: false, style: { color: textColor, fontSize: styles.input.fontSize, fontFamily: theme.fontFamily }, numberOfLines: 1, children: maskedValue }), focused && cursorVisible && (jsx(View, { style: {
+                                            width: 1,
+                                            height: styles.input.fontSize || 16,
+                                            backgroundColor: textColor,
+                                            marginLeft: 1,
+                                        } }))] }))] }), (showClearButton || endSection) && (jsxs(View, { style: styles.endSection, children: [showClearButton && (jsx(ClearButton, { onPress: handleClear, size: size, accessibilityLabel: clearButtonLabelText, hasRightSection: !!endSection })), endSection] }))] }), disclaimerNode, error && (jsx(Text$1, { style: styles.error, role: "alert", accessibilityLiveRegion: "polite", children: error })), helperText && !error && (jsx(Text$1, { style: styles.helperText, children: helperText }))] }));
 });
 
 const getInputTypeConfig = (type) => {
@@ -17987,18 +17432,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 && 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,
             },
@@ -19680,7 +19126,7 @@ const useSwitchStyles = (props) => {
             ...(Platform.OS === 'web' && { userSelect: 'none' }),
         },
         labelContainer: {
-            flex: 1,
+            flexShrink: 1,
             justifyContent: 'center',
         },
         labelDisabled: {
@@ -19849,8 +19295,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 (jsxs(View, { style: spacingStyles, children: [jsxs(LayoutComponent, { ...layoutProps, children: [labelPosition === 'top' && labelElement, labelPosition === 'left' && labelElement, switchElement, labelPosition === 'right' && labelElement, labelPosition === 'bottom' && labelElement] }), disclaimerNode ? (jsx(View, { style: { width: '100%' }, children: disclaimerNode })) : null] }));
 });
@@ -27464,7 +26910,7 @@ const MiniCalendar = ({ value, onChange, defaultValue, numberOfDays = 7, default
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(date);
     }, [isControlled, maxDate, minDate, onChange]);
-    return (jsxs(View, { children: [jsxs(Flex, { direction: "row", justify: "space-between", align: "center", style: { marginBottom: 16 }, children: [jsx(Pressable, { onPress: handlePrevious, style: ({ pressed }) => [
+    return (jsxs(View, { style: { alignSelf: 'flex-start' }, children: [jsxs(Flex, { direction: "row", justify: "space-between", align: "center", style: { marginBottom: 16 }, children: [jsx(Pressable, { onPress: handlePrevious, style: ({ pressed }) => [
                             {
                                 padding: 8,
                                 borderRadius: 6,
@@ -27476,7 +26922,7 @@ const MiniCalendar = ({ value, onChange, defaultValue, numberOfDays = 7, default
                                 borderRadius: 6,
                                 backgroundColor: pressed ? theme.colors.gray[2] : 'transparent',
                             },
-                        ], ...nextControlProps, children: jsx(Icon, { name: "chevron-right", size: 16, color: theme.colors.gray[6] }) })] }), jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: jsx(Flex, { direction: "row", gap: 4, children: days.map((date) => {
+                        ], ...nextControlProps, children: jsx(Icon, { name: "chevron-right", size: 16, color: theme.colors.gray[6] }) })] }), jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { flexGrow: 0 }, style: { flexGrow: 0 }, children: 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);
@@ -30217,6 +29663,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,
@@ -32186,7 +31633,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);
@@ -32198,9 +31645,18 @@ const PopoverBase = (props, ref) => {
     const openedRef = useRef(opened);
     const closingReasonRef = useRef(null);
     const anchorMeasurementsRef = useRef(null);
+    const hoverTimeoutRef = useRef(null);
     useEffect(() => {
         openedRef.current = opened;
     }, [opened]);
+    // Cleanup hover timeout on unmount
+    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
@@ -32213,7 +31669,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,
@@ -32225,9 +31681,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 = useRef(false);
+    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 = useMemo(() => createPopoverStyles(theme)({
         radius,
         shadow,
@@ -32331,6 +31798,28 @@ const PopoverBase = (props, ref) => {
             openPopover();
         }
     }, [closePopover, openPopover]);
+    // Hover-specific handlers with delay to prevent glitching when moving between target and dropdown
+    const handleHoverOpen = useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        openPopover();
+    }, [openPopover]);
+    const handleHoverClose = 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 = useRef({ open: handleHoverOpen, close: handleHoverClose });
+    useEffect(() => {
+        hoverHandlersRef.current = { open: handleHoverOpen, close: handleHoverClose };
+    }, [handleHoverOpen, handleHoverClose]);
     useEffect(() => {
         if (opened) {
             updateAnchorMeasurements();
@@ -32389,14 +31878,26 @@ const PopoverBase = (props, ref) => {
         if (typeof resolvedMaxHeight === 'number')
             sizeStyles.maxHeight = resolvedMaxHeight;
         const dropdownStyle = [popoverStyles.dropdown, dropdownState.style, sizeStyles];
-        const content = (jsxs(View, { ref: popoverRef, style: [popoverStyles.wrapper, widthOverride ? { width: widthOverride } : null], pointerEvents: dropdownState.trapFocus ? 'auto' : 'box-none', testID: dropdownState.testID, onLayout: handleDropdownLayout, ...dropdownState.containerProps, children: [jsx(View, { style: dropdownStyle, children: dropdownState.content }), withArrow && (jsx(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' && 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 && Platform.OS === 'web'
+            ? { opacity: 0 }
+            : {};
+        const content = (jsxs(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: [jsx(View, { style: dropdownStyle, children: dropdownState.content }), withArrow && (jsx(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]);
     useEffect(() => {
         return () => {
             hideOverlay();
@@ -32417,6 +31918,8 @@ const PopoverBase = (props, ref) => {
         open: openPopover,
         close: () => closePopover('programmatic'),
         toggle: togglePopover,
+        hoverOpen: handleHoverOpen,
+        hoverClose: handleHoverClose,
         registerDropdown,
         unregisterDropdown,
         anchorRef,
@@ -32425,7 +31928,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 = useCallback((node) => {
         if (typeof ref === 'function') {
             ref(node);
@@ -32475,16 +31979,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' && 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 (Platform.OS === 'web') {
         triggerHandlers.onKeyDown = (event) => {
             const tgt = targetProps;
@@ -32506,7 +32038,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,
@@ -32518,7 +32057,7 @@ const PopoverTargetBase = (props, ref) => {
         mergedProps.disabled = true;
     }
     const anchorWrapperRef = mergeRefs(context.anchorRef, ref);
-    return (jsx(View, { ref: anchorWrapperRef, collapsable: false, children: cloneElement(children, mergedProps) }));
+    return (jsx(View, { ref: anchorWrapperRef, collapsable: false, ...wrapperHoverHandlers, children: cloneElement(children, mergedProps) }));
 };
 const PopoverDropdownBase = (props, _ref) => {
     const { children, trapFocus = false, keepMounted, style, testID, ...rest } = props;
@@ -32562,8 +32101,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)`
@@ -32573,8 +32115,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)`
@@ -32584,8 +32129,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)`
@@ -32595,8 +32143,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)`
@@ -35731,104 +35282,6 @@ const Ring = factory((props, ref) => {
     return (jsxs(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: [jsxs(View, { style: [styles$8.ringWrapper, { width: size, height: size }, ringStyle], children: [jsxs(Svg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [jsx(Circle, { cx: size / 2, cy: size / 2, r: radius, stroke: defaultTrackColor, strokeWidth: thickness, fill: "transparent" }), jsx(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})` })] }), jsx(View, { pointerEvents: "none", style: [styles$8.centerContent, { width: size, height: size }, contentStyle], children: centerContent })] }), caption !== undefined && caption !== null ? (React__default.isValidElement(caption) ? (caption) : (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 = useSharedValue(0);
-    const opacity = useSharedValue(0);
-    useEffect(() => {
-        const sub = (s) => {
-            if (value == null) {
-                progress.value = withTiming(s.value, { duration: stepInterval });
-                opacity.value = withTiming(s.active ? 1 : 0, { duration: 150 });
-            }
-        };
-        subscribers.add(sub);
-        broadcast();
-        return () => { subscribers.delete(sub); };
-    }, [value, stepInterval, progress, opacity]);
-    useEffect(() => {
-        if (value != null) {
-            progress.value = withTiming(value, { duration: stepInterval });
-            opacity.value = 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 = useAnimatedStyle(() => ({ width: `${progress.value}%` }));
-    const containerStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
-    return (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: [jsx(Animated.View, { style: [{
-                        position: 'absolute',
-                        top: 0,
-                        bottom: 0,
-                        left: 0,
-                        backgroundColor: resolvedColor,
-                        borderRadius: radius,
-                    }, barStyle] }), 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) => {
@@ -36021,270 +35474,6 @@ const LoadingOverlay = React__default.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] = useState(false);
-    const openTimeout = useRef(null);
-    const closeTimeout = useRef(null);
-    const containerRef = useRef(null);
-    const targetRef = useRef(null);
-    const overlayIdRef = useRef(null);
-    const overlayContentRef = useRef(null);
-    const isHoveringTargetRef = useRef(false);
-    const isHoveringOverlayRef = 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 = useCallback(() => {
-        if (disabled)
-            return;
-        setOpened(true);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    }, [disabled, onOpen]);
-    const doClose = useCallback(() => {
-        setOpened(false);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [onClose]);
-    const scheduleOpen = useCallback(() => {
-        clearTimers();
-        openTimeout.current = setTimeout(doOpen, openDelay);
-    }, [doOpen, openDelay]);
-    const scheduleClose = useCallback(() => {
-        clearTimers();
-        closeTimeout.current = setTimeout(() => {
-            // Only close if neither target nor overlay are hovered (web)
-            if (Platform.OS === 'web') {
-                if (isHoveringTargetRef.current || isHoveringOverlayRef.current)
-                    return;
-            }
-            doClose();
-        }, closeDelay);
-    }, [doClose, closeDelay]);
-    useEffect(() => () => clearTimers(), []);
-    // Escape key (web only)
-    useEffect(() => {
-        if (!closeOnEscape || 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 jsx(View, { style: { ...base, ...(styles[key] || styles.top) } });
-    };
-    const openPortal = 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 = (jsxs(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,
-            ], ...(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 = useCallback(() => {
-        if (overlayIdRef.current) {
-            closeOverlay(overlayIdRef.current);
-            overlayIdRef.current = null;
-        }
-    }, [closeOverlay]);
-    useEffect(() => {
-        if (withinPortal) {
-            if (isOpened)
-                openPortal();
-            else
-                closePortal();
-        }
-        return () => { if (!isOpened)
-            closePortal(); };
-    }, [isOpened, withinPortal, openPortal, closePortal]);
-    useEffect(() => {
-        if (!withinPortal || 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
-    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 (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 ? (jsxs(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", ...(Platform.OS === 'web' && trigger === 'hover' ? {
-            onMouseEnter: () => { isHoveringOverlayRef.current = true; clearTimers(); },
-            onMouseLeave: () => { isHoveringOverlayRef.current = false; scheduleClose(); },
-        } : {}), children: [children, renderArrow(position)] })) : null;
-    return (jsxs(View, { ref: ref, style: [{ position: 'relative', alignSelf: 'flex-start' }, style], testID: testID, children: [jsx(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] = useState(false);
@@ -39874,11 +39063,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;
@@ -39894,7 +39086,7 @@ function QRCode(props) {
             });
         }
     }, [copy, copyValue, toast, otherProps.copyToastMessage, otherProps.copyToastTitle]);
-    const content = (jsxs(View, { style: { borderRadius: 8, overflow: 'hidden' }, children: [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 && (jsx(CopyButton, { value: copyValue, iconOnly: true, size: "sm", style: { position: 'absolute', top: 8, right: 8 }, onCopy: () => { } }))] }));
+    const content = (jsxs(View, { style: { borderRadius: 8, overflow: 'hidden' }, children: [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 && (jsx(CopyButton, { value: copyValue, iconOnly: true, size: "sm", style: { position: 'absolute', top: 8, right: 8 }, onCopy: () => { } }))] }));
     if (shouldCopyOnPress) {
         return (jsx(Pressable, { onPress: handleCopy, accessibilityLabel: accessibilityLabel || 'QR code', children: content }));
     }
@@ -41967,5 +41159,5 @@ function withPressAnimation(Component, animationProps) {
  */
 const AnimatedPressable = PressAnimation;
 
-export { AbilityCore, AccessibilityProvider, Accordion, AmazonAppstoreBadge, AmazonAppstoreButton, AmazonMusicListenBadge, AmazonPrimeVideoBadge, AmazonStoreBadge, AnimatedPressable, AppLayoutProvider, AppLayoutRenderer, AppShell, AppShellAside, AppShellBottomNav, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AppStoreBadge, AppStoreButton, AppStoreDownloadBadge, AppleAppStoreButton, AppleMusicListenBadge, ApplePodcastsListenBadge, AutoComplete, Avatar, AvatarGroup, Badge, Block, Blockquote, Bold, BottomAppBar, BrandButton, BrandIcon, Breadcrumbs, Button, COMPONENT_SIZES$1 as COMPONENT_SIZES, COMPONENT_SIZE_ORDER, Calendar, Can, CanWithConditions, Cannot, Card, Carousel, Checkbox, Chip, ChromeWebStoreBadge, Cite, Code, CodeBlock, Collapse, ColorPicker, ColorSwatch, Column, ComponentWithDisclaimer, ContextMenu, CopyButton, DARK_THEME, DEFAULT_BREAKPOINTS, DEFAULT_COMPONENT_SIZE, DEFAULT_SOUND_IDS, DEFAULT_THEME, DataTable, DatePicker, DatePickerInput, Day, Dialog, DialogProvider, DialogRenderer, DirectionProvider, Disclaimer, DiscordJoinBadge, Divider, EmojiPicker, Emphasis, FDroidButton, FileInput, Flex, FloatingActions, Form, GalaxyStoreDownloadBadge, Gallery, Gauge, GitHubViewBadge, GooglePlayButton, GooglePlayDownloadBadge, Grid, GridItem, H1, H2, H3, H4, H5, H6, HapticsProvider, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlight, HoverCard, HuaweiAppGalleryBadge, I18nProvider, Icon, IconButton, Image, Indicator, Input, Italic, Kbd, KeyCap, KeyboardAwareLayout, KeyboardManagerProvider, Knob, Link, ListGroup, ListGroupBody, ListGroupDivider, ListGroupItem, Loader, LoadingOverlay, Lottie, MacAppStoreButton, Mark, Markdown, Masonry, Menu, MenuDivider, MenuDropdown, MenuItem, MenuItemButton, MenuLabel, MicrosoftStoreButton, MicrosoftStoreDownloadBadge, MiniCalendar, Month, MonthPicker, MonthPickerInput, NavigationProgress, Notice, NumberInput, Overlay, OverlayProvider, P, Pagination, PasswordInput, PermissionBuilder, PermissionGate, PermissionPatterns, PermissionProvider, PhoneInput, PinInput, PlatformBlocksProvider, Popover, PressAnimation, Progress, QRCode, Radio, RadioGroup, RangeSlider, Rating, RedditJoinBadge, RichTextEditor, Ring, RoleBuilder, Row, SIZE_SCALES, Search, SegmentedControl, Select, ShimmerText, Skeleton, Slider, Small, SoundCloudListenBadge, SoundProvider, Space, Spoiler, SpotifyListenBadge, Spotlight, SpotlightProvider, StatusBarManager, StepperWithSubComponents as Stepper, Strong, Sub, Sup, Switch, Table, TableOfContents, Tabs, Text, TextArea, TextInputBase, ThemeModeProvider, TikTokWatchBadge, TimePickerInput as TimePicker, TimePickerInput, TimelineWithItems as Timeline, Title, TitleRegistryProvider, Toast, ToastProvider, ToggleBar, ToggleButton, ToggleGroup, Tooltip, Tree, TwitchWatchBadge, Underline, Video, Waveform, YearPicker, YearPickerInput, YouTubeMusicListenBadge, YouTubeWatchBadge, calculateOverlayPositionEnhanced, clampComponentSize, clearOverlayPositionCache, createSound, createSpotlightStore, createTheme, debounce$1 as debounce, defineAbility, defineAppLayout, defineRoleAbility, directSpotlight, extractDisclaimerProps, factory, getAllSounds, getColor, getFontSize, getHeight, getIconSize$1 as getIconSize, getLineHeight, getRadius$1 as getRadius, getScrollPosition, getShadow$1 as getShadow, getSize, getSoundsByCategory, getSpacing, getViewport, globalHotkeys, measureAsyncPerformance, measureElement, measurePerformance, navigationProgress, onDialogsRequested, onSpotlightRequested, onToastsRequested, permissions, pointInRect, polymorphicFactory, px, rem, resolveComponentSize, resolveResponsiveProp, resolveResponsiveValue, resolveSize, spotlight, throttle, useAbility, useAccessibility, useAppLayoutContext, useAppShell, useAppShellApi, useAppShellLayout, useBreakpoint, useColorScheme, useDialog, useDialogApi, useDialogs, useDirectSpotlightState, useDirection, useDirectionSafe, useDisclaimer, useDropdownPositioning, useEscapeKey, useFormContext, useGlobalHotkeys, useHaptics, useHapticsSettings, useHotkeys, useI18n, useKeyboardManager, useKeyboardManagerOptional, useNavbarHover, useOptionalFormContext, useOverlay, useOverlayApi, useOverlays, usePermissions, usePopoverPositioning, useSimpleDialog, useSound, useSpotlightStore, useSpotlightStoreInstance, useSpotlightToggle, useTheme, useThemeMode, useTitleRegistry, useTitleRegistryOptional, useToast, useToastApi, useToggleColorScheme, useTooltipPositioning, withCan, withCannot, withDisclaimer, withPressAnimation };
+export { AccessibilityProvider, Accordion, AmazonAppstoreBadge, AmazonAppstoreButton, AmazonMusicListenBadge, AmazonPrimeVideoBadge, AmazonStoreBadge, AnimatedPressable, AppLayoutProvider, AppLayoutRenderer, AppShell, AppShellAside, AppShellBottomNav, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AppStoreBadge, AppStoreButton, AppStoreDownloadBadge, AppleAppStoreButton, AppleMusicListenBadge, ApplePodcastsListenBadge, AutoComplete, Avatar, AvatarGroup, Badge, Block, Blockquote, Bold, BottomAppBar, BrandButton, BrandIcon, Breadcrumbs, Button, COMPONENT_SIZES$1 as COMPONENT_SIZES, COMPONENT_SIZE_ORDER, Calendar, Card, Carousel, Checkbox, Chip, ChromeWebStoreBadge, Cite, Code, CodeBlock, Collapse, ColorPicker, ColorSwatch, Column, ComponentWithDisclaimer, ContextMenu, CopyButton, DARK_THEME, DEFAULT_BREAKPOINTS, DEFAULT_COMPONENT_SIZE, DEFAULT_SOUND_IDS, DEFAULT_THEME, DataTable, DatePicker, DatePickerInput, Day, Dialog, DialogProvider, DialogRenderer, DirectionProvider, Disclaimer, DiscordJoinBadge, Divider, EmojiPicker, Emphasis, FDroidButton, FileInput, Flex, FloatingActions, Form, GalaxyStoreDownloadBadge, Gallery, Gauge, GitHubViewBadge, GooglePlayButton, GooglePlayDownloadBadge, Grid, GridItem, H1, H2, H3, H4, H5, H6, HapticsProvider, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlight, HuaweiAppGalleryBadge, I18nProvider, Icon, IconButton, Image, Indicator, Input, Italic, Kbd, KeyCap, KeyboardAwareLayout, KeyboardManagerProvider, Knob, Link, ListGroup, ListGroupBody, ListGroupDivider, ListGroupItem, Loader, LoadingOverlay, Lottie, MacAppStoreButton, Mark, Markdown, Masonry, Menu, MenuDivider, MenuDropdown, MenuItem, MenuItemButton, MenuLabel, MicrosoftStoreButton, MicrosoftStoreDownloadBadge, MiniCalendar, Month, MonthPicker, MonthPickerInput, Notice, NumberInput, Overlay, OverlayProvider, P, Pagination, PasswordInput, PhoneInput, PinInput, PlatformBlocksProvider, Popover, PressAnimation, Progress, QRCode, Radio, RadioGroup, RangeSlider, Rating, RedditJoinBadge, RichTextEditor, Ring, Row, SIZE_SCALES, Search, SegmentedControl, Select, ShimmerText, Skeleton, Slider, Small, SoundCloudListenBadge, SoundProvider, Space, Spoiler, SpotifyListenBadge, Spotlight, SpotlightProvider, StatusBarManager, StepperWithSubComponents as Stepper, Strong, Sub, Sup, Switch, Table, TableOfContents, Tabs, Text, TextArea, TextInputBase, ThemeModeProvider, TikTokWatchBadge, TimePickerInput as TimePicker, TimePickerInput, TimelineWithItems as Timeline, Title, TitleRegistryProvider, Toast, ToastProvider, ToggleBar, ToggleButton, ToggleGroup, Tooltip, Tree, TwitchWatchBadge, Underline, Video, Waveform, YearPicker, YearPickerInput, YouTubeMusicListenBadge, YouTubeWatchBadge, calculateOverlayPositionEnhanced, clampComponentSize, clearOverlayPositionCache, createSound, createSpotlightStore, createTheme, debounce$1 as debounce, defineAppLayout, directSpotlight, extractDisclaimerProps, factory, getAllSounds, getColor, getFontSize, getHeight, getIconSize$1 as getIconSize, getLineHeight, getRadius$1 as getRadius, getScrollPosition, getShadow$1 as getShadow, getSize, getSoundsByCategory, getSpacing, getViewport, globalHotkeys, measureAsyncPerformance, measureElement, measurePerformance, onDialogsRequested, onSpotlightRequested, onToastsRequested, pointInRect, polymorphicFactory, px, rem, resolveComponentSize, resolveResponsiveProp, resolveResponsiveValue, resolveSize, spotlight, throttle, useAccessibility, useAppLayoutContext, useAppShell, useAppShellApi, useAppShellLayout, useBreakpoint, useColorScheme, useDialog, useDialogApi, useDialogs, useDirectSpotlightState, useDirection, useDirectionSafe, useDisclaimer, useDropdownPositioning, useEscapeKey, useFormContext, useGlobalHotkeys, useHaptics, useHapticsSettings, useHotkeys, useI18n, useKeyboardManager, useKeyboardManagerOptional, useNavbarHover, useOptionalFormContext, useOverlay, useOverlayApi, useOverlays, usePopoverPositioning, useSimpleDialog, useSound, useSpotlightStore, useSpotlightStoreInstance, useSpotlightToggle, useTheme, useThemeMode, useTitleRegistry, useTitleRegistryOptional, useToast, useToastApi, useToggleColorScheme, useTooltipPositioning, withDisclaimer, withPressAnimation };
 //# sourceMappingURL=index.js.map