@ionic/react 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11788449221.155f9f1e

package/dist/index.js

@@ -1,80 +1,83 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React, { useContext, useRef, useEffect, createElement, useState, useMemo, Fragment as Fragment$1, useCallback } from 'react';
-import { isPlatform as isPlatform$1, getPlatforms as getPlatforms$1, componentOnReady, createAnimation, actionSheetController, alertController, toastController, modalController, popoverController, loadingController, initialize } from '@ionic/core/components';
-export { IonicSafeString, IonicSlides, LogLevel, createAnimation, createGesture, getIonPageElement, getTimeGivenProgression, iosTransitionAnimation, mdTransitionAnimation, openURL } from '@ionic/core/components';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import { IonAccordionGroup as IonAccordionGroup$1, defineCustomElement as defineCustomElement$2 } from '@ionic/core/components/ion-accordion-group.js';
-import { IonAccordion as IonAccordion$1, defineCustomElement as defineCustomElement$1 } from '@ionic/core/components/ion-accordion.js';
-import { IonAvatar as IonAvatar$1, defineCustomElement as defineCustomElement$3 } from '@ionic/core/components/ion-avatar.js';
-import { IonBackdrop as IonBackdrop$1, defineCustomElement as defineCustomElement$4 } from '@ionic/core/components/ion-backdrop.js';
-import { IonBadge as IonBadge$1, defineCustomElement as defineCustomElement$5 } from '@ionic/core/components/ion-badge.js';
-import { IonBreadcrumbs as IonBreadcrumbs$1, defineCustomElement as defineCustomElement$6 } from '@ionic/core/components/ion-breadcrumbs.js';
-import { IonButtons as IonButtons$1, defineCustomElement as defineCustomElement$7 } from '@ionic/core/components/ion-buttons.js';
-import { IonCardContent as IonCardContent$1, defineCustomElement as defineCustomElement$8 } from '@ionic/core/components/ion-card-content.js';
-import { IonCardHeader as IonCardHeader$1, defineCustomElement as defineCustomElement$9 } from '@ionic/core/components/ion-card-header.js';
-import { IonCardSubtitle as IonCardSubtitle$1, defineCustomElement as defineCustomElement$a } from '@ionic/core/components/ion-card-subtitle.js';
-import { IonCardTitle as IonCardTitle$1, defineCustomElement as defineCustomElement$b } from '@ionic/core/components/ion-card-title.js';
-import { IonCheckbox as IonCheckbox$1, defineCustomElement as defineCustomElement$c } from '@ionic/core/components/ion-checkbox.js';
-import { IonChip as IonChip$1, defineCustomElement as defineCustomElement$d } from '@ionic/core/components/ion-chip.js';
-import { IonCol as IonCol$1, defineCustomElement as defineCustomElement$e } from '@ionic/core/components/ion-col.js';
-import { IonContent as IonContent$1, defineCustomElement as defineCustomElement$f } from '@ionic/core/components/ion-content.js';
-import { IonDatetimeButton as IonDatetimeButton$1, defineCustomElement as defineCustomElement$h } from '@ionic/core/components/ion-datetime-button.js';
-import { IonDatetime as IonDatetime$1, defineCustomElement as defineCustomElement$g } from '@ionic/core/components/ion-datetime.js';
-import { IonFabList as IonFabList$1, defineCustomElement as defineCustomElement$j } from '@ionic/core/components/ion-fab-list.js';
-import { IonFab as IonFab$1, defineCustomElement as defineCustomElement$i } from '@ionic/core/components/ion-fab.js';
-import { IonFooter as IonFooter$1, defineCustomElement as defineCustomElement$k } from '@ionic/core/components/ion-footer.js';
-import { IonGrid as IonGrid$1, defineCustomElement as defineCustomElement$l } from '@ionic/core/components/ion-grid.js';
-import { IonHeader as IonHeader$1, defineCustomElement as defineCustomElement$m } from '@ionic/core/components/ion-header.js';
-import { IonImg as IonImg$1, defineCustomElement as defineCustomElement$n } from '@ionic/core/components/ion-img.js';
-import { IonInfiniteScrollContent as IonInfiniteScrollContent$1, defineCustomElement as defineCustomElement$p } from '@ionic/core/components/ion-infinite-scroll-content.js';
-import { IonInfiniteScroll as IonInfiniteScroll$1, defineCustomElement as defineCustomElement$o } from '@ionic/core/components/ion-infinite-scroll.js';
-import { IonInputOtp as IonInputOtp$1, defineCustomElement as defineCustomElement$r } from '@ionic/core/components/ion-input-otp.js';
-import { IonInputPasswordToggle as IonInputPasswordToggle$1, defineCustomElement as defineCustomElement$s } from '@ionic/core/components/ion-input-password-toggle.js';
-import { IonInput as IonInput$1, defineCustomElement as defineCustomElement$q } from '@ionic/core/components/ion-input.js';
-import { IonItemDivider as IonItemDivider$1, defineCustomElement as defineCustomElement$t } from '@ionic/core/components/ion-item-divider.js';
-import { IonItemGroup as IonItemGroup$1, defineCustomElement as defineCustomElement$u } from '@ionic/core/components/ion-item-group.js';
-import { IonItemOptions as IonItemOptions$1, defineCustomElement as defineCustomElement$v } from '@ionic/core/components/ion-item-options.js';
-import { IonItemSliding as IonItemSliding$1, defineCustomElement as defineCustomElement$w } from '@ionic/core/components/ion-item-sliding.js';
-import { IonLabel as IonLabel$1, defineCustomElement as defineCustomElement$x } from '@ionic/core/components/ion-label.js';
-import { IonListHeader as IonListHeader$1, defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-list-header.js';
-import { IonList as IonList$1, defineCustomElement as defineCustomElement$y } from '@ionic/core/components/ion-list.js';
-import { IonMenuButton as IonMenuButton$1, defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-menu-button.js';
-import { IonMenuToggle as IonMenuToggle$1, defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-menu-toggle.js';
-import { IonMenu as IonMenu$1, defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-menu.js';
-import { IonNavLink as IonNavLink$1, defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-nav-link.js';
-import { defineCustomElement as defineCustomElement$1l } from '@ionic/core/components/ion-nav.js';
-import { IonNote as IonNote$1, defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-note.js';
-import { IonPickerColumnOption as IonPickerColumnOption$1, defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-picker-column-option.js';
-import { IonPickerColumn as IonPickerColumn$1, defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-picker-column.js';
-import { IonPicker as IonPicker$1, defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-picker.js';
-import { IonProgressBar as IonProgressBar$1, defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-progress-bar.js';
-import { IonRadioGroup as IonRadioGroup$1, defineCustomElement as defineCustomElement$K } from '@ionic/core/components/ion-radio-group.js';
-import { IonRadio as IonRadio$1, defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-radio.js';
-import { IonRange as IonRange$1, defineCustomElement as defineCustomElement$L } from '@ionic/core/components/ion-range.js';
-import { IonRefresherContent as IonRefresherContent$1, defineCustomElement as defineCustomElement$N } from '@ionic/core/components/ion-refresher-content.js';
-import { IonRefresher as IonRefresher$1, defineCustomElement as defineCustomElement$M } from '@ionic/core/components/ion-refresher.js';
-import { IonReorderGroup as IonReorderGroup$1, defineCustomElement as defineCustomElement$P } from '@ionic/core/components/ion-reorder-group.js';
-import { IonReorder as IonReorder$1, defineCustomElement as defineCustomElement$O } from '@ionic/core/components/ion-reorder.js';
-import { IonRippleEffect as IonRippleEffect$1, defineCustomElement as defineCustomElement$Q } from '@ionic/core/components/ion-ripple-effect.js';
-import { IonRow as IonRow$1, defineCustomElement as defineCustomElement$R } from '@ionic/core/components/ion-row.js';
-import { IonSearchbar as IonSearchbar$1, defineCustomElement as defineCustomElement$S } from '@ionic/core/components/ion-searchbar.js';
-import { IonSegmentButton as IonSegmentButton$1, defineCustomElement as defineCustomElement$U } from '@ionic/core/components/ion-segment-button.js';
-import { IonSegmentContent as IonSegmentContent$1, defineCustomElement as defineCustomElement$V } from '@ionic/core/components/ion-segment-content.js';
-import { IonSegmentView as IonSegmentView$1, defineCustomElement as defineCustomElement$W } from '@ionic/core/components/ion-segment-view.js';
-import { IonSegment as IonSegment$1, defineCustomElement as defineCustomElement$T } from '@ionic/core/components/ion-segment.js';
-import { IonSelectModal as IonSelectModal$1, defineCustomElement as defineCustomElement$Y } from '@ionic/core/components/ion-select-modal.js';
-import { IonSelectOption as IonSelectOption$1, defineCustomElement as defineCustomElement$Z } from '@ionic/core/components/ion-select-option.js';
-import { IonSelect as IonSelect$1, defineCustomElement as defineCustomElement$X } from '@ionic/core/components/ion-select.js';
-import { IonSkeletonText as IonSkeletonText$1, defineCustomElement as defineCustomElement$_ } from '@ionic/core/components/ion-skeleton-text.js';
-import { IonSpinner as IonSpinner$1, defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-spinner.js';
-import { IonSplitPane as IonSplitPane$1, defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-split-pane.js';
-import { IonTab as IonTab$1, defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-tab.js';
-import { IonText as IonText$1, defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-text.js';
-import { IonTextarea as IonTextarea$1, defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-textarea.js';
-import { IonThumbnail as IonThumbnail$1, defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-thumbnail.js';
-import { IonTitle as IonTitle$1, defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-title.js';
-import { IonToggle as IonToggle$1, defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-toggle.js';
-import { IonToolbar as IonToolbar$1, defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-toolbar.js';
+import { isPlatform as isPlatform$1, getPlatforms as getPlatforms$1, componentOnReady, createAnimation, actionSheetController, alertController, toastController, modalController, popoverController, pickerController, loadingController, initialize } from '@ionic/core/components';
+export { IonicSafeString, IonicSlides, createAnimation, createGesture, getIonPageElement, getTimeGivenProgression, iosTransitionAnimation, mdTransitionAnimation, openURL } from '@ionic/core/components';
+import ReactDOM, { createPortal } from 'react-dom';
+import { defineCustomElement as defineCustomElement$1 } from '@ionic/core/components/ion-accordion.js';
+import { defineCustomElement as defineCustomElement$2 } from '@ionic/core/components/ion-accordion-group.js';
+import { defineCustomElement as defineCustomElement$3 } from '@ionic/core/components/ion-avatar.js';
+import { defineCustomElement as defineCustomElement$4 } from '@ionic/core/components/ion-backdrop.js';
+import { defineCustomElement as defineCustomElement$5 } from '@ionic/core/components/ion-badge.js';
+import { defineCustomElement as defineCustomElement$6 } from '@ionic/core/components/ion-breadcrumbs.js';
+import { defineCustomElement as defineCustomElement$7 } from '@ionic/core/components/ion-buttons.js';
+import { defineCustomElement as defineCustomElement$8 } from '@ionic/core/components/ion-card-content.js';
+import { defineCustomElement as defineCustomElement$9 } from '@ionic/core/components/ion-card-header.js';
+import { defineCustomElement as defineCustomElement$a } from '@ionic/core/components/ion-card-subtitle.js';
+import { defineCustomElement as defineCustomElement$b } from '@ionic/core/components/ion-card-title.js';
+import { defineCustomElement as defineCustomElement$c } from '@ionic/core/components/ion-checkbox.js';
+import { defineCustomElement as defineCustomElement$d } from '@ionic/core/components/ion-chip.js';
+import { defineCustomElement as defineCustomElement$e } from '@ionic/core/components/ion-col.js';
+import { defineCustomElement as defineCustomElement$f } from '@ionic/core/components/ion-content.js';
+import { defineCustomElement as defineCustomElement$g } from '@ionic/core/components/ion-datetime.js';
+import { defineCustomElement as defineCustomElement$h } from '@ionic/core/components/ion-datetime-button.js';
+import { defineCustomElement as defineCustomElement$i } from '@ionic/core/components/ion-divider.js';
+import { defineCustomElement as defineCustomElement$j } from '@ionic/core/components/ion-fab.js';
+import { defineCustomElement as defineCustomElement$k } from '@ionic/core/components/ion-fab-list.js';
+import { defineCustomElement as defineCustomElement$l } from '@ionic/core/components/ion-footer.js';
+import { defineCustomElement as defineCustomElement$m } from '@ionic/core/components/ion-gallery.js';
+import { defineCustomElement as defineCustomElement$n } from '@ionic/core/components/ion-gallery-item.js';
+import { defineCustomElement as defineCustomElement$o } from '@ionic/core/components/ion-grid.js';
+import { defineCustomElement as defineCustomElement$p } from '@ionic/core/components/ion-header.js';
+import { defineCustomElement as defineCustomElement$q } from '@ionic/core/components/ion-img.js';
+import { defineCustomElement as defineCustomElement$r } from '@ionic/core/components/ion-infinite-scroll.js';
+import { defineCustomElement as defineCustomElement$s } from '@ionic/core/components/ion-infinite-scroll-content.js';
+import { defineCustomElement as defineCustomElement$t } from '@ionic/core/components/ion-input.js';
+import { defineCustomElement as defineCustomElement$u } from '@ionic/core/components/ion-input-otp.js';
+import { defineCustomElement as defineCustomElement$v } from '@ionic/core/components/ion-input-password-toggle.js';
+import { defineCustomElement as defineCustomElement$w } from '@ionic/core/components/ion-item-divider.js';
+import { defineCustomElement as defineCustomElement$x } from '@ionic/core/components/ion-item-group.js';
+import { defineCustomElement as defineCustomElement$y } from '@ionic/core/components/ion-item-options.js';
+import { defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-item-sliding.js';
+import { defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-label.js';
+import { defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-list.js';
+import { defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-list-header.js';
+import { defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-menu.js';
+import { defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-menu-button.js';
+import { defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-menu-toggle.js';
+import { defineCustomElement as defineCustomElement$1p } from '@ionic/core/components/ion-nav.js';
+import { defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-nav-link.js';
+import { defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-note.js';
+import { defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-picker.js';
+import { defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-picker-column.js';
+import { defineCustomElement as defineCustomElement$K } from '@ionic/core/components/ion-picker-column-option.js';
+import { defineCustomElement as defineCustomElement$L } from '@ionic/core/components/ion-progress-bar.js';
+import { defineCustomElement as defineCustomElement$M } from '@ionic/core/components/ion-radio.js';
+import { defineCustomElement as defineCustomElement$N } from '@ionic/core/components/ion-radio-group.js';
+import { defineCustomElement as defineCustomElement$O } from '@ionic/core/components/ion-range.js';
+import { defineCustomElement as defineCustomElement$P } from '@ionic/core/components/ion-refresher.js';
+import { defineCustomElement as defineCustomElement$Q } from '@ionic/core/components/ion-refresher-content.js';
+import { defineCustomElement as defineCustomElement$R } from '@ionic/core/components/ion-reorder.js';
+import { defineCustomElement as defineCustomElement$S } from '@ionic/core/components/ion-reorder-group.js';
+import { defineCustomElement as defineCustomElement$T } from '@ionic/core/components/ion-ripple-effect.js';
+import { defineCustomElement as defineCustomElement$U } from '@ionic/core/components/ion-row.js';
+import { defineCustomElement as defineCustomElement$V } from '@ionic/core/components/ion-searchbar.js';
+import { defineCustomElement as defineCustomElement$W } from '@ionic/core/components/ion-segment.js';
+import { defineCustomElement as defineCustomElement$X } from '@ionic/core/components/ion-segment-button.js';
+import { defineCustomElement as defineCustomElement$Y } from '@ionic/core/components/ion-segment-content.js';
+import { defineCustomElement as defineCustomElement$Z } from '@ionic/core/components/ion-segment-view.js';
+import { defineCustomElement as defineCustomElement$_ } from '@ionic/core/components/ion-select.js';
+import { defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-select-modal.js';
+import { defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-select-option.js';
+import { defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-skeleton-text.js';
+import { defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-spinner.js';
+import { defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-split-pane.js';
+import { defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-tab.js';
+import { defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-text.js';
+import { defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-textarea.js';
+import { defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-thumbnail.js';
+import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/components/ion-title.js';
+import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-toggle.js';
+import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/components/ion-toolbar.js';
 import { IonBreadcrumb as IonBreadcrumb$1 } from '@ionic/core/components/ion-breadcrumb.js';
 import { IonButton as IonButton$1 } from '@ionic/core/components/ion-button.js';
 import { IonCard as IonCard$1 } from '@ionic/core/components/ion-card.js';
@@ -82,20 +85,20 @@ import { IonFabButton as IonFabButton$1 } from '@ionic/core/components/ion-fab-b
 import { IonItemOption as IonItemOption$1 } from '@ionic/core/components/ion-item-option.js';
 import { IonItem as IonItem$1 } from '@ionic/core/components/ion-item.js';
 import { IonRouterLink as IonRouterLink$1 } from '@ionic/core/components/ion-router-link.js';
-import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/components/ion-alert.js';
-import ReactDOM, { createPortal } from 'react-dom';
-import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-loading.js';
-import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/components/ion-toast.js';
-import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-action-sheet.js';
-import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-modal.js';
-import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-popover.js';
-import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-app.js';
-import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-back-button.js';
-import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-router-outlet.js';
-import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-tab-bar.js';
-import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-tab-button.js';
-import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-tabs.js';
-import { defineCustomElement as defineCustomElement$1k } from 'ionicons/components/ion-icon.js';
+import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-alert.js';
+import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-loading.js';
+import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-toast.js';
+import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-picker-legacy.js';
+import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-action-sheet.js';
+import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-modal.js';
+import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-popover.js';
+import { defineCustomElement as defineCustomElement$1n } from '@ionic/core/components/ion-app.js';
+import { defineCustomElement as defineCustomElement$1l } from '@ionic/core/components/ion-back-button.js';
+import { defineCustomElement as defineCustomElement$1m } from '@ionic/core/components/ion-router-outlet.js';
+import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-tab-bar.js';
+import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-tab-button.js';
+import { defineCustomElement as defineCustomElement$1k } from '@ionic/core/components/ion-tabs.js';
+import { defineCustomElement as defineCustomElement$1o } from 'ionicons/components/ion-icon.js';
 
 const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
     onIonViewWillEnter: () => {
@@ -136,15 +139,16 @@ const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
     },
 });
 const DefaultIonLifeCycleContext = class {
-    ionViewWillEnterCallbacks = [];
-    ionViewDidEnterCallbacks = [];
-    ionViewWillLeaveCallbacks = [];
-    ionViewDidLeaveCallbacks = [];
-    componentCanBeDestroyedCallback;
-    ionViewWillEnterDestructorCallbacks = [];
-    ionViewDidEnterDestructorCallbacks = [];
-    ionViewWillLeaveDestructorCallbacks = [];
-    ionViewDidLeaveDestructorCallbacks = [];
+    constructor() {
+        this.ionViewWillEnterCallbacks = [];
+        this.ionViewDidEnterCallbacks = [];
+        this.ionViewWillLeaveCallbacks = [];
+        this.ionViewDidLeaveCallbacks = [];
+        this.ionViewWillEnterDestructorCallbacks = [];
+        this.ionViewDidEnterDestructorCallbacks = [];
+        this.ionViewWillLeaveDestructorCallbacks = [];
+        this.ionViewDidLeaveDestructorCallbacks = [];
+    }
     onIonViewWillEnter(callback) {
         if (callback.id) {
             const index = this.ionViewWillEnterCallbacks.findIndex((x) => x.id === callback.id);
@@ -293,9 +297,9 @@ const DefaultIonLifeCycleContext = class {
 // TODO(FW-2959): types
 const withIonLifeCycle = (WrappedComponent) => {
     return class IonLifeCycle extends React.Component {
-        componentRef = React.createRef();
         constructor(props) {
             super(props);
+            this.componentRef = React.createRef();
         }
         componentDidMount() {
             const element = this.componentRef.current;
@@ -379,7 +383,9 @@ const useIonViewDidLeave = (callback, deps = []) => {
 };
 
 const NavContext = /*@__PURE__*/ React.createContext({
+    getIonRedirect: () => undefined,
     getIonRoute: () => undefined,
+    getPageManager: () => undefined,
     getStackManager: () => undefined,
     goBack: (route) => {
         if (typeof window !== 'undefined') {
@@ -411,651 +417,6 @@ const NavContext = /*@__PURE__*/ React.createContext({
     },
 });
 
-const IonAccordion = /*@__PURE__*/ createComponent({
-    tagName: 'ion-accordion',
-    elementClass: IonAccordion$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1
-});
-const IonAccordionGroup = /*@__PURE__*/ createComponent({
-    tagName: 'ion-accordion-group',
-    elementClass: IonAccordionGroup$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onIonChange: 'ionChange' },
-    defineCustomElement: defineCustomElement$2
-});
-const IonAvatar = /*@__PURE__*/ createComponent({
-    tagName: 'ion-avatar',
-    elementClass: IonAvatar$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$3
-});
-const IonBackdrop = /*@__PURE__*/ createComponent({
-    tagName: 'ion-backdrop',
-    elementClass: IonBackdrop$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onIonBackdropTap: 'ionBackdropTap' },
-    defineCustomElement: defineCustomElement$4
-});
-const IonBadge = /*@__PURE__*/ createComponent({
-    tagName: 'ion-badge',
-    elementClass: IonBadge$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$5
-});
-const IonBreadcrumbs = /*@__PURE__*/ createComponent({
-    tagName: 'ion-breadcrumbs',
-    elementClass: IonBreadcrumbs$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onIonCollapsedClick: 'ionCollapsedClick' },
-    defineCustomElement: defineCustomElement$6
-});
-const IonButtons = /*@__PURE__*/ createComponent({
-    tagName: 'ion-buttons',
-    elementClass: IonButtons$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$7
-});
-const IonCardContent = /*@__PURE__*/ createComponent({
-    tagName: 'ion-card-content',
-    elementClass: IonCardContent$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$8
-});
-const IonCardHeader = /*@__PURE__*/ createComponent({
-    tagName: 'ion-card-header',
-    elementClass: IonCardHeader$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$9
-});
-const IonCardSubtitle = /*@__PURE__*/ createComponent({
-    tagName: 'ion-card-subtitle',
-    elementClass: IonCardSubtitle$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$a
-});
-const IonCardTitle = /*@__PURE__*/ createComponent({
-    tagName: 'ion-card-title',
-    elementClass: IonCardTitle$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$b
-});
-const IonCheckbox = /*@__PURE__*/ createComponent({
-    tagName: 'ion-checkbox',
-    elementClass: IonCheckbox$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonChange: 'ionChange',
-        onIonFocus: 'ionFocus',
-        onIonBlur: 'ionBlur'
-    },
-    defineCustomElement: defineCustomElement$c
-});
-const IonChip = /*@__PURE__*/ createComponent({
-    tagName: 'ion-chip',
-    elementClass: IonChip$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$d
-});
-const IonCol = /*@__PURE__*/ createComponent({
-    tagName: 'ion-col',
-    elementClass: IonCol$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$e
-});
-const IonContent = /*@__PURE__*/ createComponent({
-    tagName: 'ion-content',
-    elementClass: IonContent$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonScrollStart: 'ionScrollStart',
-        onIonScroll: 'ionScroll',
-        onIonScrollEnd: 'ionScrollEnd'
-    },
-    defineCustomElement: defineCustomElement$f
-});
-const IonDatetime = /*@__PURE__*/ createComponent({
-    tagName: 'ion-datetime',
-    elementClass: IonDatetime$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonCancel: 'ionCancel',
-        onIonChange: 'ionChange',
-        onIonFocus: 'ionFocus',
-        onIonBlur: 'ionBlur'
-    },
-    defineCustomElement: defineCustomElement$g
-});
-const IonDatetimeButton = /*@__PURE__*/ createComponent({
-    tagName: 'ion-datetime-button',
-    elementClass: IonDatetimeButton$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$h
-});
-const IonFab = /*@__PURE__*/ createComponent({
-    tagName: 'ion-fab',
-    elementClass: IonFab$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$i
-});
-const IonFabList = /*@__PURE__*/ createComponent({
-    tagName: 'ion-fab-list',
-    elementClass: IonFabList$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$j
-});
-const IonFooter = /*@__PURE__*/ createComponent({
-    tagName: 'ion-footer',
-    elementClass: IonFooter$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$k
-});
-const IonGrid = /*@__PURE__*/ createComponent({
-    tagName: 'ion-grid',
-    elementClass: IonGrid$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$l
-});
-const IonHeader = /*@__PURE__*/ createComponent({
-    tagName: 'ion-header',
-    elementClass: IonHeader$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$m
-});
-const IonImg = /*@__PURE__*/ createComponent({
-    tagName: 'ion-img',
-    elementClass: IonImg$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonImgWillLoad: 'ionImgWillLoad',
-        onIonImgDidLoad: 'ionImgDidLoad',
-        onIonError: 'ionError'
-    },
-    defineCustomElement: defineCustomElement$n
-});
-const IonInfiniteScroll = /*@__PURE__*/ createComponent({
-    tagName: 'ion-infinite-scroll',
-    elementClass: IonInfiniteScroll$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onIonInfinite: 'ionInfinite' },
-    defineCustomElement: defineCustomElement$o
-});
-const IonInfiniteScrollContent = /*@__PURE__*/ createComponent({
-    tagName: 'ion-infinite-scroll-content',
-    elementClass: IonInfiniteScrollContent$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$p
-});
-const IonInput = /*@__PURE__*/ createComponent({
-    tagName: 'ion-input',
-    elementClass: IonInput$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonInput: 'ionInput',
-        onIonChange: 'ionChange',
-        onIonBlur: 'ionBlur',
-        onIonFocus: 'ionFocus'
-    },
-    defineCustomElement: defineCustomElement$q
-});
-const IonInputOtp = /*@__PURE__*/ createComponent({
-    tagName: 'ion-input-otp',
-    elementClass: IonInputOtp$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonInput: 'ionInput',
-        onIonChange: 'ionChange',
-        onIonComplete: 'ionComplete',
-        onIonBlur: 'ionBlur',
-        onIonFocus: 'ionFocus'
-    },
-    defineCustomElement: defineCustomElement$r
-});
-const IonInputPasswordToggle = /*@__PURE__*/ createComponent({
-    tagName: 'ion-input-password-toggle',
-    elementClass: IonInputPasswordToggle$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$s
-});
-const IonItemDivider = /*@__PURE__*/ createComponent({
-    tagName: 'ion-item-divider',
-    elementClass: IonItemDivider$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$t
-});
-const IonItemGroup = /*@__PURE__*/ createComponent({
-    tagName: 'ion-item-group',
-    elementClass: IonItemGroup$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$u
-});
-const IonItemOptions = /*@__PURE__*/ createComponent({
-    tagName: 'ion-item-options',
-    elementClass: IonItemOptions$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onIonSwipe: 'ionSwipe' },
-    defineCustomElement: defineCustomElement$v
-});
-const IonItemSliding = /*@__PURE__*/ createComponent({
-    tagName: 'ion-item-sliding',
-    elementClass: IonItemSliding$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onIonDrag: 'ionDrag' },
-    defineCustomElement: defineCustomElement$w
-});
-const IonLabel = /*@__PURE__*/ createComponent({
-    tagName: 'ion-label',
-    elementClass: IonLabel$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$x
-});
-const IonList = /*@__PURE__*/ createComponent({
-    tagName: 'ion-list',
-    elementClass: IonList$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$y
-});
-const IonListHeader = /*@__PURE__*/ createComponent({
-    tagName: 'ion-list-header',
-    elementClass: IonListHeader$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$z
-});
-const IonMenu = /*@__PURE__*/ createComponent({
-    tagName: 'ion-menu',
-    elementClass: IonMenu$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonWillOpen: 'ionWillOpen',
-        onIonWillClose: 'ionWillClose',
-        onIonDidOpen: 'ionDidOpen',
-        onIonDidClose: 'ionDidClose'
-    },
-    defineCustomElement: defineCustomElement$A
-});
-const IonMenuButton = /*@__PURE__*/ createComponent({
-    tagName: 'ion-menu-button',
-    elementClass: IonMenuButton$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$B
-});
-const IonMenuToggle = /*@__PURE__*/ createComponent({
-    tagName: 'ion-menu-toggle',
-    elementClass: IonMenuToggle$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$C
-});
-const IonNavLink = /*@__PURE__*/ createComponent({
-    tagName: 'ion-nav-link',
-    elementClass: IonNavLink$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$D
-});
-const IonNote = /*@__PURE__*/ createComponent({
-    tagName: 'ion-note',
-    elementClass: IonNote$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$E
-});
-const IonPicker = /*@__PURE__*/ createComponent({
-    tagName: 'ion-picker',
-    elementClass: IonPicker$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$F
-});
-const IonPickerColumn = /*@__PURE__*/ createComponent({
-    tagName: 'ion-picker-column',
-    elementClass: IonPickerColumn$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onIonChange: 'ionChange' },
-    defineCustomElement: defineCustomElement$G
-});
-const IonPickerColumnOption = /*@__PURE__*/ createComponent({
-    tagName: 'ion-picker-column-option',
-    elementClass: IonPickerColumnOption$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$H
-});
-const IonProgressBar = /*@__PURE__*/ createComponent({
-    tagName: 'ion-progress-bar',
-    elementClass: IonProgressBar$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$I
-});
-const IonRadio = /*@__PURE__*/ createComponent({
-    tagName: 'ion-radio',
-    elementClass: IonRadio$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonFocus: 'ionFocus',
-        onIonBlur: 'ionBlur'
-    },
-    defineCustomElement: defineCustomElement$J
-});
-const IonRadioGroup = /*@__PURE__*/ createComponent({
-    tagName: 'ion-radio-group',
-    elementClass: IonRadioGroup$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onIonChange: 'ionChange' },
-    defineCustomElement: defineCustomElement$K
-});
-const IonRange = /*@__PURE__*/ createComponent({
-    tagName: 'ion-range',
-    elementClass: IonRange$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonChange: 'ionChange',
-        onIonInput: 'ionInput',
-        onIonFocus: 'ionFocus',
-        onIonBlur: 'ionBlur',
-        onIonKnobMoveStart: 'ionKnobMoveStart',
-        onIonKnobMoveEnd: 'ionKnobMoveEnd'
-    },
-    defineCustomElement: defineCustomElement$L
-});
-const IonRefresher = /*@__PURE__*/ createComponent({
-    tagName: 'ion-refresher',
-    elementClass: IonRefresher$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonRefresh: 'ionRefresh',
-        onIonPull: 'ionPull',
-        onIonStart: 'ionStart',
-        onIonPullStart: 'ionPullStart',
-        onIonPullEnd: 'ionPullEnd'
-    },
-    defineCustomElement: defineCustomElement$M
-});
-const IonRefresherContent = /*@__PURE__*/ createComponent({
-    tagName: 'ion-refresher-content',
-    elementClass: IonRefresherContent$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$N
-});
-const IonReorder = /*@__PURE__*/ createComponent({
-    tagName: 'ion-reorder',
-    elementClass: IonReorder$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$O
-});
-const IonReorderGroup = /*@__PURE__*/ createComponent({
-    tagName: 'ion-reorder-group',
-    elementClass: IonReorderGroup$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonItemReorder: 'ionItemReorder',
-        onIonReorderStart: 'ionReorderStart',
-        onIonReorderMove: 'ionReorderMove',
-        onIonReorderEnd: 'ionReorderEnd'
-    },
-    defineCustomElement: defineCustomElement$P
-});
-const IonRippleEffect = /*@__PURE__*/ createComponent({
-    tagName: 'ion-ripple-effect',
-    elementClass: IonRippleEffect$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$Q
-});
-const IonRow = /*@__PURE__*/ createComponent({
-    tagName: 'ion-row',
-    elementClass: IonRow$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$R
-});
-const IonSearchbar = /*@__PURE__*/ createComponent({
-    tagName: 'ion-searchbar',
-    elementClass: IonSearchbar$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonInput: 'ionInput',
-        onIonChange: 'ionChange',
-        onIonCancel: 'ionCancel',
-        onIonClear: 'ionClear',
-        onIonBlur: 'ionBlur',
-        onIonFocus: 'ionFocus'
-    },
-    defineCustomElement: defineCustomElement$S
-});
-const IonSegment = /*@__PURE__*/ createComponent({
-    tagName: 'ion-segment',
-    elementClass: IonSegment$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onIonChange: 'ionChange' },
-    defineCustomElement: defineCustomElement$T
-});
-const IonSegmentButton = /*@__PURE__*/ createComponent({
-    tagName: 'ion-segment-button',
-    elementClass: IonSegmentButton$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$U
-});
-const IonSegmentContent = /*@__PURE__*/ createComponent({
-    tagName: 'ion-segment-content',
-    elementClass: IonSegmentContent$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$V
-});
-const IonSegmentView = /*@__PURE__*/ createComponent({
-    tagName: 'ion-segment-view',
-    elementClass: IonSegmentView$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onIonSegmentViewScroll: 'ionSegmentViewScroll' },
-    defineCustomElement: defineCustomElement$W
-});
-const IonSelect = /*@__PURE__*/ createComponent({
-    tagName: 'ion-select',
-    elementClass: IonSelect$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonChange: 'ionChange',
-        onIonCancel: 'ionCancel',
-        onIonDismiss: 'ionDismiss',
-        onIonFocus: 'ionFocus',
-        onIonBlur: 'ionBlur'
-    },
-    defineCustomElement: defineCustomElement$X
-});
-const IonSelectModal = /*@__PURE__*/ createComponent({
-    tagName: 'ion-select-modal',
-    elementClass: IonSelectModal$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$Y
-});
-const IonSelectOption = /*@__PURE__*/ createComponent({
-    tagName: 'ion-select-option',
-    elementClass: IonSelectOption$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$Z
-});
-const IonSkeletonText = /*@__PURE__*/ createComponent({
-    tagName: 'ion-skeleton-text',
-    elementClass: IonSkeletonText$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$_
-});
-const IonSpinner = /*@__PURE__*/ createComponent({
-    tagName: 'ion-spinner',
-    elementClass: IonSpinner$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$$
-});
-const IonSplitPane = /*@__PURE__*/ createComponent({
-    tagName: 'ion-split-pane',
-    elementClass: IonSplitPane$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onIonSplitPaneVisible: 'ionSplitPaneVisible' },
-    defineCustomElement: defineCustomElement$10
-});
-const IonTab = /*@__PURE__*/ createComponent({
-    tagName: 'ion-tab',
-    elementClass: IonTab$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$11
-});
-const IonText = /*@__PURE__*/ createComponent({
-    tagName: 'ion-text',
-    elementClass: IonText$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$12
-});
-const IonTextarea = /*@__PURE__*/ createComponent({
-    tagName: 'ion-textarea',
-    elementClass: IonTextarea$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonChange: 'ionChange',
-        onIonInput: 'ionInput',
-        onIonBlur: 'ionBlur',
-        onIonFocus: 'ionFocus'
-    },
-    defineCustomElement: defineCustomElement$13
-});
-const IonThumbnail = /*@__PURE__*/ createComponent({
-    tagName: 'ion-thumbnail',
-    elementClass: IonThumbnail$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$14
-});
-const IonTitle = /*@__PURE__*/ createComponent({
-    tagName: 'ion-title',
-    elementClass: IonTitle$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$15
-});
-const IonToggle = /*@__PURE__*/ createComponent({
-    tagName: 'ion-toggle',
-    elementClass: IonToggle$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onIonChange: 'ionChange',
-        onIonFocus: 'ionFocus',
-        onIonBlur: 'ionBlur'
-    },
-    defineCustomElement: defineCustomElement$16
-});
-const IonToolbar = /*@__PURE__*/ createComponent({
-    tagName: 'ion-toolbar',
-    elementClass: IonToolbar$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$17
-});
-
 const dashToPascalCase = (str) => str
     .toLowerCase()
     .split('-')
@@ -1063,34 +424,6 @@ const dashToPascalCase = (str) => str
     .join('');
 const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
 
-// Enumerated attributes where the literal string "false" is meaningful and
-// differs from the attribute being absent, so they must not be stripped like
-// HTML boolean attributes. These are the dash-cased attribute names produced by
-// camelToDashCase (e.g. the `spellCheck` prop renders as `spell-check`), so the
-// entries must match that form. aria-* and data-* are handled by prefix below.
-const NON_BOOLEAN_FALSE_ATTRIBUTES = new Set(['draggable', 'translate', 'spell-check', 'content-editable']);
-/**
- * React serializes a boolean prop set to `false` (e.g. `disabled={false}`) as
- * the string attribute `disabled="false"`. For HTML boolean attributes the mere
- * presence means "true", so assistive tech treats the element as
- * disabled/readonly even though Ionic renders it as interactive. The @lit/react
- * runtime fixes this for the generated components on v9, but the hand-rolled
- * wrappers (createReactComponent, createRoutingComponent, ...) render attributes
- * directly and sync props through attachProps, so we strip the stray attribute
- * here after the property has been assigned.
- *
- * TODO(FW-7629): React 19 added full custom-element support and no longer
- * serializes a `false` boolean prop to a `="false"` attribute, so this stripping
- * can be removed once React 18 support is dropped.
- */
-const isStaleFalseBooleanAttribute = (attribute) => !attribute.startsWith('aria-') && !attribute.startsWith('data-') && !NON_BOOLEAN_FALSE_ATTRIBUTES.has(attribute);
-/**
- * Assigning `undefined` or `null` to a reflected prop like `id` writes the stringified value, so
- * the element ends up with `id="undefined"` or `id="null"`. Only native properties are cleaned up
- * here: a nullish component prop still has to reach the component, and Stencil clears the
- * attribute for props declared `reflect: true`.
- */
-const isNativeElementProperty = (name) => name in HTMLElement.prototype;
 const attachProps = (node, newProps, oldProps = {}) => {
     // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
     if (node instanceof Element) {
@@ -1116,23 +449,10 @@ const attachProps = (node, newProps, oldProps = {}) => {
                 }
             }
             else {
-                const value = newProps[name];
-                node[name] = value;
-                if ((value === undefined || value === null) && isNativeElementProperty(name)) {
-                    // Remove both spellings: the property reflects `accesskey`, and dash-casing writes `access-key`.
-                    node.removeAttribute(name);
-                    node.removeAttribute(camelToDashCase(name));
-                    return;
-                }
-                const propType = typeof value;
+                node[name] = newProps[name];
+                const propType = typeof newProps[name];
                 if (propType === 'string') {
-                    node.setAttribute(camelToDashCase(name), value);
-                }
-                else if (value === false) {
-                    const attribute = camelToDashCase(name);
-                    if (isStaleFalseBooleanAttribute(attribute)) {
-                        node.removeAttribute(attribute);
-                    }
+                    node.setAttribute(camelToDashCase(name), newProps[name]);
                 }
             }
         });
@@ -1244,6 +564,150 @@ const defineCustomElement = (tagName, customElement) => {
     }
 };
 
+const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
+    const displayName = dashToPascalCase(tagName);
+    const ReactComponent = class extends React.Component {
+        constructor(props) {
+            super(props);
+            this.setComponentElRef = (element) => {
+                this.componentEl = element;
+            };
+        }
+        componentDidMount() {
+            this.componentDidUpdate(this.props);
+        }
+        componentDidUpdate(prevProps) {
+            attachProps(this.componentEl, this.props, prevProps);
+        }
+        render() {
+            const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+                const value = cProps[name];
+                if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                    const eventName = name.substring(2).toLowerCase();
+                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
+                        acc[name] = value;
+                    }
+                }
+                else {
+                    // we should only render strings, booleans, and numbers as attrs in html.
+                    // objects, functions, arrays etc get synced via properties on mount.
+                    const type = typeof value;
+                    if (type === 'string' || type === 'boolean' || type === 'number') {
+                        acc[camelToDashCase(name)] = value;
+                    }
+                }
+                return acc;
+            }, {});
+            if (manipulatePropsFunction) {
+                propsToPass = manipulatePropsFunction(this.props, propsToPass);
+            }
+            const newProps = {
+                ...propsToPass,
+                ref: mergeRefs(forwardedRef, this.setComponentElRef),
+                style,
+            };
+            /**
+             * We use createElement here instead of
+             * React.createElement to work around a
+             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
+             * React.createElement causes all elements to be rendered
+             * as <tagname> instead of the actual Web Component.
+             */
+            return createElement(tagName, newProps, children);
+        }
+        static get displayName() {
+            return displayName;
+        }
+    };
+    // If context was passed to createReactComponent then conditionally add it to the Component Class
+    if (ReactComponentContext) {
+        ReactComponent.contextType = ReactComponentContext;
+    }
+    return createForwardRef$1(ReactComponent, displayName);
+};
+
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+const IonAccordion = /*@__PURE__*/ createReactComponent('ion-accordion', undefined, undefined, defineCustomElement$1);
+const IonAccordionGroup = /*@__PURE__*/ createReactComponent('ion-accordion-group', undefined, undefined, defineCustomElement$2);
+const IonAvatar = /*@__PURE__*/ createReactComponent('ion-avatar', undefined, undefined, defineCustomElement$3);
+const IonBackdrop = /*@__PURE__*/ createReactComponent('ion-backdrop', undefined, undefined, defineCustomElement$4);
+const IonBadge = /*@__PURE__*/ createReactComponent('ion-badge', undefined, undefined, defineCustomElement$5);
+const IonBreadcrumbs = /*@__PURE__*/ createReactComponent('ion-breadcrumbs', undefined, undefined, defineCustomElement$6);
+const IonButtons = /*@__PURE__*/ createReactComponent('ion-buttons', undefined, undefined, defineCustomElement$7);
+const IonCardContent = /*@__PURE__*/ createReactComponent('ion-card-content', undefined, undefined, defineCustomElement$8);
+const IonCardHeader = /*@__PURE__*/ createReactComponent('ion-card-header', undefined, undefined, defineCustomElement$9);
+const IonCardSubtitle = /*@__PURE__*/ createReactComponent('ion-card-subtitle', undefined, undefined, defineCustomElement$a);
+const IonCardTitle = /*@__PURE__*/ createReactComponent('ion-card-title', undefined, undefined, defineCustomElement$b);
+const IonCheckbox = /*@__PURE__*/ createReactComponent('ion-checkbox', undefined, undefined, defineCustomElement$c);
+const IonChip = /*@__PURE__*/ createReactComponent('ion-chip', undefined, undefined, defineCustomElement$d);
+const IonCol = /*@__PURE__*/ createReactComponent('ion-col', undefined, undefined, defineCustomElement$e);
+const IonContent = /*@__PURE__*/ createReactComponent('ion-content', undefined, undefined, defineCustomElement$f);
+const IonDatetime = /*@__PURE__*/ createReactComponent('ion-datetime', undefined, undefined, defineCustomElement$g);
+const IonDatetimeButton = /*@__PURE__*/ createReactComponent('ion-datetime-button', undefined, undefined, defineCustomElement$h);
+const IonDivider = /*@__PURE__*/ createReactComponent('ion-divider', undefined, undefined, defineCustomElement$i);
+const IonFab = /*@__PURE__*/ createReactComponent('ion-fab', undefined, undefined, defineCustomElement$j);
+const IonFabList = /*@__PURE__*/ createReactComponent('ion-fab-list', undefined, undefined, defineCustomElement$k);
+const IonFooter = /*@__PURE__*/ createReactComponent('ion-footer', undefined, undefined, defineCustomElement$l);
+const IonGallery = /*@__PURE__*/ createReactComponent('ion-gallery', undefined, undefined, defineCustomElement$m);
+const IonGalleryItem = /*@__PURE__*/ createReactComponent('ion-gallery-item', undefined, undefined, defineCustomElement$n);
+const IonGrid = /*@__PURE__*/ createReactComponent('ion-grid', undefined, undefined, defineCustomElement$o);
+const IonHeader = /*@__PURE__*/ createReactComponent('ion-header', undefined, undefined, defineCustomElement$p);
+const IonImg = /*@__PURE__*/ createReactComponent('ion-img', undefined, undefined, defineCustomElement$q);
+const IonInfiniteScroll = /*@__PURE__*/ createReactComponent('ion-infinite-scroll', undefined, undefined, defineCustomElement$r);
+const IonInfiniteScrollContent = /*@__PURE__*/ createReactComponent('ion-infinite-scroll-content', undefined, undefined, defineCustomElement$s);
+const IonInput = /*@__PURE__*/ createReactComponent('ion-input', undefined, undefined, defineCustomElement$t);
+const IonInputOtp = /*@__PURE__*/ createReactComponent('ion-input-otp', undefined, undefined, defineCustomElement$u);
+const IonInputPasswordToggle = /*@__PURE__*/ createReactComponent('ion-input-password-toggle', undefined, undefined, defineCustomElement$v);
+const IonItemDivider = /*@__PURE__*/ createReactComponent('ion-item-divider', undefined, undefined, defineCustomElement$w);
+const IonItemGroup = /*@__PURE__*/ createReactComponent('ion-item-group', undefined, undefined, defineCustomElement$x);
+const IonItemOptions = /*@__PURE__*/ createReactComponent('ion-item-options', undefined, undefined, defineCustomElement$y);
+const IonItemSliding = /*@__PURE__*/ createReactComponent('ion-item-sliding', undefined, undefined, defineCustomElement$z);
+const IonLabel = /*@__PURE__*/ createReactComponent('ion-label', undefined, undefined, defineCustomElement$A);
+const IonList = /*@__PURE__*/ createReactComponent('ion-list', undefined, undefined, defineCustomElement$B);
+const IonListHeader = /*@__PURE__*/ createReactComponent('ion-list-header', undefined, undefined, defineCustomElement$C);
+const IonMenu = /*@__PURE__*/ createReactComponent('ion-menu', undefined, undefined, defineCustomElement$D);
+const IonMenuButton = /*@__PURE__*/ createReactComponent('ion-menu-button', undefined, undefined, defineCustomElement$E);
+const IonMenuToggle = /*@__PURE__*/ createReactComponent('ion-menu-toggle', undefined, undefined, defineCustomElement$F);
+const IonNavLink = /*@__PURE__*/ createReactComponent('ion-nav-link', undefined, undefined, defineCustomElement$G);
+const IonNote = /*@__PURE__*/ createReactComponent('ion-note', undefined, undefined, defineCustomElement$H);
+const IonPicker = /*@__PURE__*/ createReactComponent('ion-picker', undefined, undefined, defineCustomElement$I);
+const IonPickerColumn = /*@__PURE__*/ createReactComponent('ion-picker-column', undefined, undefined, defineCustomElement$J);
+const IonPickerColumnOption = /*@__PURE__*/ createReactComponent('ion-picker-column-option', undefined, undefined, defineCustomElement$K);
+const IonProgressBar = /*@__PURE__*/ createReactComponent('ion-progress-bar', undefined, undefined, defineCustomElement$L);
+const IonRadio = /*@__PURE__*/ createReactComponent('ion-radio', undefined, undefined, defineCustomElement$M);
+const IonRadioGroup = /*@__PURE__*/ createReactComponent('ion-radio-group', undefined, undefined, defineCustomElement$N);
+const IonRange = /*@__PURE__*/ createReactComponent('ion-range', undefined, undefined, defineCustomElement$O);
+const IonRefresher = /*@__PURE__*/ createReactComponent('ion-refresher', undefined, undefined, defineCustomElement$P);
+const IonRefresherContent = /*@__PURE__*/ createReactComponent('ion-refresher-content', undefined, undefined, defineCustomElement$Q);
+const IonReorder = /*@__PURE__*/ createReactComponent('ion-reorder', undefined, undefined, defineCustomElement$R);
+const IonReorderGroup = /*@__PURE__*/ createReactComponent('ion-reorder-group', undefined, undefined, defineCustomElement$S);
+const IonRippleEffect = /*@__PURE__*/ createReactComponent('ion-ripple-effect', undefined, undefined, defineCustomElement$T);
+const IonRow = /*@__PURE__*/ createReactComponent('ion-row', undefined, undefined, defineCustomElement$U);
+const IonSearchbar = /*@__PURE__*/ createReactComponent('ion-searchbar', undefined, undefined, defineCustomElement$V);
+const IonSegment = /*@__PURE__*/ createReactComponent('ion-segment', undefined, undefined, defineCustomElement$W);
+const IonSegmentButton = /*@__PURE__*/ createReactComponent('ion-segment-button', undefined, undefined, defineCustomElement$X);
+const IonSegmentContent = /*@__PURE__*/ createReactComponent('ion-segment-content', undefined, undefined, defineCustomElement$Y);
+const IonSegmentView = /*@__PURE__*/ createReactComponent('ion-segment-view', undefined, undefined, defineCustomElement$Z);
+const IonSelect = /*@__PURE__*/ createReactComponent('ion-select', undefined, undefined, defineCustomElement$_);
+const IonSelectModal = /*@__PURE__*/ createReactComponent('ion-select-modal', undefined, undefined, defineCustomElement$$);
+const IonSelectOption = /*@__PURE__*/ createReactComponent('ion-select-option', undefined, undefined, defineCustomElement$10);
+const IonSkeletonText = /*@__PURE__*/ createReactComponent('ion-skeleton-text', undefined, undefined, defineCustomElement$11);
+const IonSpinner = /*@__PURE__*/ createReactComponent('ion-spinner', undefined, undefined, defineCustomElement$12);
+const IonSplitPane = /*@__PURE__*/ createReactComponent('ion-split-pane', undefined, undefined, defineCustomElement$13);
+const IonTab = /*@__PURE__*/ createReactComponent('ion-tab', undefined, undefined, defineCustomElement$14);
+const IonText = /*@__PURE__*/ createReactComponent('ion-text', undefined, undefined, defineCustomElement$15);
+const IonTextarea = /*@__PURE__*/ createReactComponent('ion-textarea', undefined, undefined, defineCustomElement$16);
+const IonThumbnail = /*@__PURE__*/ createReactComponent('ion-thumbnail', undefined, undefined, defineCustomElement$17);
+const IonTitle = /*@__PURE__*/ createReactComponent('ion-title', undefined, undefined, defineCustomElement$18);
+const IonToggle = /*@__PURE__*/ createReactComponent('ion-toggle', undefined, undefined, defineCustomElement$19);
+const IonToolbar = /*@__PURE__*/ createReactComponent('ion-toolbar', undefined, undefined, defineCustomElement$1a);
+
 const createForwardRef = (ReactComponent, // TODO(FW-2959): type
 displayName) => {
     const forwardRef = (props, ref) => {
@@ -1262,15 +726,29 @@ const isPlatform = (platform) => {
 const getPlatforms = () => {
     return getPlatforms$1(window);
 };
+const getConfig = () => {
+    if (typeof window !== 'undefined') {
+        const Ionic = window.Ionic;
+        if (Ionic && Ionic.config) {
+            return Ionic.config;
+        }
+    }
+    return null;
+};
 
 const createRoutingComponent = (tagName, customElement) => {
     defineCustomElement(tagName, customElement);
     const displayName = dashToPascalCase(tagName);
     const ReactComponent = class extends React.Component {
-        ref;
-        stableMergedRefs;
         constructor(props) {
             super(props);
+            this.handleClick = (e) => {
+                const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
+                if (routerLink !== undefined) {
+                    e.preventDefault();
+                    this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);
+                }
+            };
             // Create a local ref to to attach props to the wrapped element.
             this.ref = React.createRef();
             // React refs must be stable (not created inline).
@@ -1283,18 +761,6 @@ const createRoutingComponent = (tagName, customElement) => {
             const node = this.ref.current;
             attachProps(node, this.props, prevProps);
         }
-        handleClick = (e) => {
-            const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
-            if (routerLink !== undefined) {
-                // Allow modifier key clicks (ctrl/cmd/shift) to open the link in a new tab/window
-                // without triggering SPA navigation on the current page.
-                if (e.metaKey || e.ctrlKey || e.shiftKey) {
-                    return;
-                }
-                e.preventDefault();
-                this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);
-            }
-        };
         render() {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
@@ -1401,14 +867,44 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
     }
     const displayName = dashToPascalCase(tagName);
     const ReactComponent = class extends React.Component {
-        ref;
-        wrapperRef;
-        markerRef;
-        stableMergedRefs;
-        portalTarget;
-        isUnmounted = false;
         constructor(props) {
             super(props);
+            this.isUnmounted = false;
+            this.handleIonMount = () => {
+                /**
+                 * Mount the inner component when the
+                 * overlay is about to open.
+                 *
+                 * For ion-popover, this is when `ionMount` is emitted.
+                 * For other overlays, this is when `willPresent` is emitted.
+                 */
+                this.setState({ isOpen: true });
+            };
+            this.handleWillPresent = (evt) => {
+                this.setState({ isOpen: true });
+                /**
+                 * Manually call the onWillPresent
+                 * handler if present as setState will
+                 * cause the event handlers to be
+                 * destroyed and re-created.
+                 */
+                this.props.onWillPresent && this.props.onWillPresent(evt);
+            };
+            this.handleDidDismiss = (evt) => {
+                const wrapper = this.wrapperRef.current;
+                const el = this.ref.current;
+                /**
+                 * This component might be unmounted already, if the containing
+                 * element was removed while the overlay was still open. (For
+                 * example, if an item contains an inline overlay with a button
+                 * that removes the item.)
+                 */
+                if (wrapper && el) {
+                    el.append(wrapper);
+                    this.setState({ isOpen: false });
+                }
+                this.props.onDidDismiss && this.props.onDidDismiss(evt);
+            };
             // Create a local ref to to attach props to the wrapped element.
             this.ref = React.createRef();
             // React refs must be stable (not created inline).
@@ -1585,41 +1081,6 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
         static get displayName() {
             return displayName;
         }
-        handleIonMount = () => {
-            /**
-             * Mount the inner component when the
-             * overlay is about to open.
-             *
-             * For ion-popover, this is when `ionMount` is emitted.
-             * For other overlays, this is when `willPresent` is emitted.
-             */
-            this.setState({ isOpen: true });
-        };
-        handleWillPresent = (evt) => {
-            this.setState({ isOpen: true });
-            /**
-             * Manually call the onWillPresent
-             * handler if present as setState will
-             * cause the event handlers to be
-             * destroyed and re-created.
-             */
-            this.props.onWillPresent && this.props.onWillPresent(evt);
-        };
-        handleDidDismiss = (evt) => {
-            const wrapper = this.wrapperRef.current;
-            const el = this.ref.current;
-            /**
-             * This component might be unmounted already, if the containing
-             * element was removed while the overlay was still open. (For
-             * example, if an item contains an inline overlay with a button
-             * that removes the item.)
-             */
-            if (wrapper && el) {
-                el.append(wrapper);
-                this.setState({ isOpen: false });
-            }
-            this.props.onDidDismiss && this.props.onDidDismiss(evt);
-        };
     };
     // Forward the nesting context as a prop to avoid contextType on the class.
     // The render function is passed via `children` (not as a varargs child) so it
@@ -1632,17 +1093,19 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
 };
 const DELEGATE_HOST = 'ion-delegate-host';
 
-const IonAlert = /*@__PURE__*/ createInlineOverlayComponent('ion-alert', defineCustomElement$18);
+const IonAlert = /*@__PURE__*/ createInlineOverlayComponent('ion-alert', defineCustomElement$1b);
+
+const IonLoading = /*@__PURE__*/ createInlineOverlayComponent('ion-loading', defineCustomElement$1c);
 
-const IonLoading = /*@__PURE__*/ createInlineOverlayComponent('ion-loading', defineCustomElement$19);
+const IonToast = /*@__PURE__*/ createInlineOverlayComponent('ion-toast', defineCustomElement$1d);
 
-const IonToast = /*@__PURE__*/ createInlineOverlayComponent('ion-toast', defineCustomElement$1a);
+const IonPickerLegacy = /*@__PURE__*/ createInlineOverlayComponent('ion-picker-legacy', defineCustomElement$1e);
 
-const IonActionSheet = /*@__PURE__*/ createInlineOverlayComponent('ion-action-sheet', defineCustomElement$1b);
+const IonActionSheet = /*@__PURE__*/ createInlineOverlayComponent('ion-action-sheet', defineCustomElement$1f);
 
-const IonModal = /*@__PURE__*/ createInlineOverlayComponent('ion-modal', defineCustomElement$1c, true);
+const IonModal = /*@__PURE__*/ createInlineOverlayComponent('ion-modal', defineCustomElement$1g, true);
 
-const IonPopover = /*@__PURE__*/ createInlineOverlayComponent('ion-popover', defineCustomElement$1d);
+const IonPopover = /*@__PURE__*/ createInlineOverlayComponent('ion-popover', defineCustomElement$1h);
 
 const IonContext = React.createContext({
     addOverlay: () => {
@@ -1734,101 +1197,31 @@ const IonOverlayManager = ({ onAddOverlay, onRemoveOverlay }) => {
         }) }));
 };
 
-const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
-    if (defineCustomElement !== undefined) {
-        defineCustomElement();
-    }
-    const displayName = dashToPascalCase(tagName);
-    const ReactComponent = class extends React.Component {
-        componentEl;
-        setComponentElRef = (element) => {
-            this.componentEl = element;
-        };
-        constructor(props) {
-            super(props);
-        }
-        componentDidMount() {
-            this.componentDidUpdate(this.props);
-        }
-        componentDidUpdate(prevProps) {
-            attachProps(this.componentEl, this.props, prevProps);
-        }
-        render() {
-            const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
-            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
-                const value = cProps[name];
-                if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
-                    const eventName = name.substring(2).toLowerCase();
-                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
-                        acc[name] = value;
-                    }
-                }
-                else {
-                    // we should only render strings, booleans, and numbers as attrs in html.
-                    // objects, functions, arrays etc get synced via properties on mount.
-                    const type = typeof value;
-                    if (type === 'string' || type === 'boolean' || type === 'number') {
-                        acc[camelToDashCase(name)] = value;
-                    }
-                }
-                return acc;
-            }, {});
-            if (manipulatePropsFunction) {
-                propsToPass = manipulatePropsFunction(this.props, propsToPass);
-            }
-            const newProps = {
-                ...propsToPass,
-                ref: mergeRefs(forwardedRef, this.setComponentElRef),
-                style,
-                children
-            };
-            /**
-             * We use createElement here instead of
-             * React.createElement to work around a
-             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
-             * React.createElement causes all elements to be rendered
-             * as <tagname> instead of the actual Web Component.
-             */
-            return createElement(tagName, newProps, children);
-        }
-        static get displayName() {
-            return displayName;
-        }
-    };
-    // If context was passed to createReactComponent then conditionally add it to the Component Class
-    if (ReactComponentContext) {
-        ReactComponent.contextType = ReactComponentContext;
-    }
-    return createForwardRef$1(ReactComponent, displayName);
-};
-
-const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1e);
-const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1f);
-const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1g);
-const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1h);
-const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1i);
-const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1j);
+const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1i);
+const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1j);
+const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1k);
+const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1l);
+const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1m);
+const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1n);
 // ionicons
-const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1k);
+const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1o);
 
 class IonApp extends React.Component {
-    addOverlayCallback;
-    removeOverlayCallback;
     constructor(props) {
         super(props);
+        this.ionContext = {
+            addOverlay: (id, overlay, containerElement) => {
+                if (this.addOverlayCallback) {
+                    this.addOverlayCallback(id, overlay, containerElement);
+                }
+            },
+            removeOverlay: (id) => {
+                if (this.removeOverlayCallback) {
+                    this.removeOverlayCallback(id);
+                }
+            },
+        };
     }
-    ionContext = {
-        addOverlay: (id, overlay, containerElement) => {
-            if (this.addOverlayCallback) {
-                this.addOverlayCallback(id, overlay, containerElement);
-            }
-        },
-        removeOverlay: (id) => {
-            if (this.removeOverlayCallback) {
-                this.removeOverlayCallback(id);
-            }
-        },
-    };
     render() {
         return (jsxs(IonContext.Provider, { value: this.ionContext, children: [jsx(IonAppInner, { ...this.props, children: this.props.children }), jsx(IonOverlayManager, { onAddOverlay: (callback) => {
                         this.addOverlayCallback = callback;
@@ -1836,8 +1229,8 @@ class IonApp extends React.Component {
                         this.removeOverlayCallback = callback;
                     } })] }));
     }
-    static displayName = 'IonApp';
 }
+IonApp.displayName = 'IonApp';
 
 const StackContext = React.createContext({
     registerIonPage: () => undefined,
@@ -1845,32 +1238,11 @@ const StackContext = React.createContext({
 });
 
 class PageManager extends React.PureComponent {
-    ionLifeCycleContext;
-    ionPageElementRef;
-    stableMergedRefs;
     constructor(props) {
         super(props);
         this.ionPageElementRef = React.createRef();
         // React refs must be stable (not created inline).
-        // Wrap merged refs to add ion-page-invisible synchronously when element is created
-        const baseMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
-        // Guard against React 19 strict mode double-mount re-adding ion-page-invisible.
-        // The ref fires again on remount after StackManager may have already removed it.
-        let hasAppliedInvisible = false;
-        this.stableMergedRefs = (node) => {
-            if (node &&
-                !hasAppliedInvisible &&
-                !node.classList.contains('ion-page-invisible') &&
-                !node.classList.contains('ion-page-hidden')) {
-                // Add ion-page-invisible synchronously before first paint (if in an outlet)
-                // This prevents the flash that occurs when componentDidMount runs after paint
-                if (this.context?.isInOutlet?.()) {
-                    node.classList.add('ion-page-invisible');
-                    hasAppliedInvisible = true;
-                }
-            }
-            baseMergedRefs(node);
-        };
+        this.stableMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
         /**
          * This binds the scope of the following methods to the class scope.
          * The `.bind` method returns a new function, so we need to assign it
@@ -1882,38 +1254,11 @@ class PageManager extends React.PureComponent {
         this.ionViewWillLeaveHandler = this.ionViewWillLeaveHandler.bind(this);
         this.ionViewDidLeaveHandler = this.ionViewDidLeaveHandler.bind(this);
     }
-    parseClasses(className) {
-        if (!className)
-            return new Set();
-        return new Set(className.split(/\s+/).filter(Boolean));
-    }
-    /**
-     * Updates classList by diffing old/new className props.
-     * Preserves framework-added classes (can-go-back, ion-page-invisible, etc.).
-     */
-    updateUserClasses(oldClassName, newClassName) {
-        if (!this.ionPageElementRef.current)
-            return;
-        const oldClasses = this.parseClasses(oldClassName);
-        const newClasses = this.parseClasses(newClassName);
-        oldClasses.forEach((cls) => {
-            if (!newClasses.has(cls)) {
-                this.ionPageElementRef.current.classList.remove(cls);
-            }
-        });
-        newClasses.forEach((cls) => {
-            if (!oldClasses.has(cls)) {
-                this.ionPageElementRef.current.classList.add(cls);
-            }
-        });
-    }
     componentDidMount() {
         if (this.ionPageElementRef.current) {
-            // Add user classes via DOM manipulation to preserve framework-added classes.
-            // We only set "ion-page" in JSX; user classes are added here.
-            // Note: ion-page-invisible is added in the ref callback (stableMergedRefs) to prevent flash.
-            // The ref callback runs synchronously when the element is created, before the browser paints.
-            this.updateUserClasses(undefined, this.props.className);
+            if (this.context.isInOutlet()) {
+                this.ionPageElementRef.current.classList.add('ion-page-invisible');
+            }
             this.context.registerIonPage(this.ionPageElementRef.current, this.props.routeInfo);
             this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
             this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler);
@@ -1921,11 +1266,6 @@ class PageManager extends React.PureComponent {
             this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler);
         }
     }
-    componentDidUpdate(prevProps) {
-        if (prevProps.className !== this.props.className) {
-            this.updateUserClasses(prevProps.className, this.props.className);
-        }
-    }
     componentWillUnmount() {
         if (this.ionPageElementRef.current) {
             this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
@@ -1955,11 +1295,9 @@ class PageManager extends React.PureComponent {
     render() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { className, children, routeInfo, forwardedRef, ...props } = this.props;
-        // Only set "ion-page" in JSX. User classes are managed via DOM in componentDidMount/componentDidUpdate
-        // to preserve framework-added classes (can-go-back, ion-page-invisible, etc.) when className prop changes.
         return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
                 this.ionLifeCycleContext = context;
-                return (jsx("div", { className: "ion-page", ref: this.stableMergedRefs, ...props, children: children }));
+                return (jsx("div", { className: className ? `${className} ion-page` : `ion-page`, ref: this.stableMergedRefs, ...props, children: children }));
             } }));
     }
     static get contextType() {
@@ -2019,7 +1357,7 @@ const ReactDelegate = (addView, removeView) => {
     };
 };
 
-const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1l);
+const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1p);
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const IonNavInternal = ({ children, forwardedRef, ...restOfProps }) => {
     const [views, setViews] = useState([]);
@@ -2045,9 +1383,6 @@ const HTMLElementSSR = (typeof HTMLElement !== 'undefined' ? HTMLElement : class
 });
 
 class OutletPageManager extends React.Component {
-    ionLifeCycleContext;
-    ionRouterOutlet;
-    outletIsReady;
     constructor(props) {
         super(props);
         this.outletIsReady = false;
@@ -2070,30 +1405,8 @@ class OutletPageManager extends React.Component {
              */
             if (!this.outletIsReady) {
                 componentOnReady(this.ionRouterOutlet, () => {
-                    /**
-                     * Guard against duplicate callbacks from React strict mode double-mount.
-                     * Both componentDidMount calls pass the outer !outletIsReady check before
-                     * either async callback fires. Without this inner guard, the second callback
-                     * re-adds ion-page-invisible after the first callback's transition removed it,
-                     * and registerIonPage returns early (same element), leaving the page invisible.
-                     */
-                    if (this.outletIsReady)
-                        return;
                     this.outletIsReady = true;
-                    /**
-                     * Add ion-page + ion-page-invisible AFTER Stencil hydration but
-                     * BEFORE registerIonPage. Stencil hydration overwrites className,
-                     * so classes added in a React ref callback get wiped. Adding them
-                     * here -- after hydration -- ensures they persist until the parent
-                     * outlet's forward animation removes ion-page-invisible, preventing
-                     * a flash where the outlet is briefly visible at full opacity.
-                     */
-                    const el = this.ionRouterOutlet;
-                    if (!el.classList.contains('ion-page-invisible') && !el.classList.contains('ion-page-hidden')) {
-                        el.classList.add('ion-page');
-                        el.classList.add('ion-page-invisible');
-                    }
-                    this.context.registerIonPage(el, this.props.routeInfo);
+                    this.context.registerIonPage(this.ionRouterOutlet, this.props.routeInfo);
                 });
             }
             this.ionRouterOutlet.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
@@ -2123,10 +1436,10 @@ class OutletPageManager extends React.Component {
         this.ionLifeCycleContext.ionViewDidLeave();
     }
     render() {
-        const { StackManager, children, routeInfo, id, ...props } = this.props;
+        const { StackManager, children, routeInfo, ...props } = this.props;
         return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
                 this.ionLifeCycleContext = context;
-                return (jsx(StackManager, { id: id, routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { id: id, setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
+                return (jsx(StackManager, { routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
             } }));
     }
     static get contextType() {
@@ -2135,16 +1448,13 @@ class OutletPageManager extends React.Component {
 }
 
 class IonRouterOutletContainer extends React.Component {
-    outletId;
     constructor(props) {
         super(props);
-        this.outletId = props.id ?? `routerOutlet-${generateId('routerOutlet')}`;
     }
     render() {
         const StackManager = this.context.getStackManager();
         const { children, forwardedRef, ...props } = this.props;
-        const outletId = props.id ?? this.outletId;
-        return this.context.hasIonicRouter() ? (props.ionPage ? (jsx(OutletPageManager, { StackManager: StackManager, routeInfo: this.context.routeInfo, ...props, children: children })) : (jsx(StackManager, { routeInfo: this.context.routeInfo, id: outletId, children: jsx(IonRouterOutletInner, { ...props, id: outletId, forwardedRef: forwardedRef, children: children }) }))) : (jsx(IonRouterOutletInner, { ref: forwardedRef, ...this.props, children: this.props.children }));
+        return this.context.hasIonicRouter() ? (props.ionPage ? (jsx(OutletPageManager, { StackManager: StackManager, routeInfo: this.context.routeInfo, ...props, children: children })) : (jsx(StackManager, { routeInfo: this.context.routeInfo, children: jsx(IonRouterOutletInner, { ...props, forwardedRef: forwardedRef, children: children }) }))) : (jsx(IonRouterOutletInner, { ref: forwardedRef, ...this.props, children: this.props.children }));
     }
     static get contextType() {
         return NavContext;
@@ -2168,29 +1478,28 @@ class IonTabs extends React.Component {
     shouldComponentUpdate() {
         return true;
     }
-    /**
-     * `routerOutletRef` allows users to add a `ref` to `IonRouterOutlet`.
-     * Without this, `ref.current` will be `undefined` in the user's app,
-     * breaking their ability to access the `IonRouterOutlet` instance.
-     * Do not remove this ref.
-     */
-    routerOutletRef = React.createRef();
-    selectTabHandler;
-    tabBarRef = React.createRef();
-    ionTabContextState = {
-        activeTab: undefined,
-        selectTab: () => false,
-        hasRouterOutlet: false,
-        /**
-         * Tab bar can be used as a standalone component,
-         * so the props can not be passed directly to the
-         * tab bar component. Instead, props will be
-         * passed through the context.
-         */
-        tabBarProps: { ref: this.tabBarRef },
-    };
     constructor(props) {
         super(props);
+        /**
+         * `routerOutletRef` allows users to add a `ref` to `IonRouterOutlet`.
+         * Without this, `ref.current` will be `undefined` in the user's app,
+         * breaking their ability to access the `IonRouterOutlet` instance.
+         * Do not remove this ref.
+         */
+        this.routerOutletRef = React.createRef();
+        this.tabBarRef = React.createRef();
+        this.ionTabContextState = {
+            activeTab: undefined,
+            selectTab: () => false,
+            hasRouterOutlet: false,
+            /**
+             * Tab bar can be used as a standalone component,
+             * so the props can not be passed directly to the
+             * tab bar component. Instead, props will be
+             * passed through the context.
+             */
+            tabBarProps: { ref: this.tabBarRef },
+        };
     }
     componentDidMount() {
         if (this.tabBarRef.current) {
@@ -2342,14 +1651,14 @@ const matchesTab = (pathname, href) => {
     if (href === undefined) {
         return false;
     }
-    // Strip query string before comparing — href may contain search params (e.g., "/tabs/home?foo=bar")
-    const hrefPathname = href.split('?')[0];
-    const normalizedHref = hrefPathname.endsWith('/') && hrefPathname !== '/' ? hrefPathname.slice(0, -1) : hrefPathname;
+    const normalizedHref = href.endsWith('/') && href !== '/' ? href.slice(0, -1) : href;
     return pathname === normalizedHref || pathname.startsWith(normalizedHref + '/');
 };
 class IonTabBarUnwrapped extends React.PureComponent {
     constructor(props) {
         super(props);
+        // eslint-disable-next-line
+        this.setActiveTabOnContext = (_tab) => { };
         const tabs = {};
         React.Children.forEach(props.children, (child) => {
             if (child != null &&
@@ -2390,8 +1699,6 @@ class IonTabBarUnwrapped extends React.PureComponent {
             this.setActiveTabOnContext(this.state.activeTab);
         }
     }
-    // eslint-disable-next-line
-    setActiveTabOnContext = (_tab) => { };
     selectTab(tab) {
         const tabUrl = this.state.tabs[tab];
         if (tabUrl) {
@@ -2436,7 +1743,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
             const prevHref = state.tabs[prevActiveTab].currentHref;
             const prevRouteOptions = state.tabs[prevActiveTab].currentRouteOptions;
             if (activeTab !== prevActiveTab ||
-                prevHref !== (props.routeInfo?.pathname || '') + (props.routeInfo?.search || '') ||
+                prevHref !== props.routeInfo?.pathname ||
                 prevRouteOptions !== props.routeInfo?.routeOptions) {
                 tabs[activeTab] = {
                     originalHref: tabs[activeTab].originalHref,
@@ -2509,7 +1816,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
         return (child) => {
             if (child != null && child.props && (child.type === IonTabButton || child.type.isTabButton)) {
                 const href = child.props.tab === activeTab
-                    ? (this.props.routeInfo?.pathname || '') + (this.props.routeInfo?.search || '')
+                    ? this.props.routeInfo?.pathname
                     : this.state.tabs[child.props.tab].currentHref;
                 const routeOptions = child.props.tab === activeTab
                     ? this.props.routeInfo?.routeOptions
@@ -2554,24 +1861,27 @@ const IonTabBarContainer = React.memo(({ forwardedRef, ...props }) => {
 const IonTabBar = createForwardRef(IonTabBarContainer, 'IonTabBar');
 
 class IonBackButton extends React.Component {
-    clickButton = (e) => {
-        /**
-         * If ion-back-button is being used inside
-         * of ion-nav then we should not interact with
-         * the router.
-         */
-        if (e.target && e.target.closest('ion-nav') !== null) {
-            return;
-        }
-        const { defaultHref, routerAnimation } = this.props;
-        if (this.context.hasIonicRouter()) {
-            e.stopPropagation();
-            this.context.goBack(defaultHref, routerAnimation);
-        }
-        else if (defaultHref !== undefined) {
-            window.location.href = defaultHref;
-        }
-    };
+    constructor() {
+        super(...arguments);
+        this.clickButton = (e) => {
+            /**
+             * If ion-back-button is being used inside
+             * of ion-nav then we should not interact with
+             * the router.
+             */
+            if (e.target && e.target.closest('ion-nav') !== null) {
+                return;
+            }
+            const { defaultHref, routerAnimation } = this.props;
+            if (this.context.hasIonicRouter()) {
+                e.stopPropagation();
+                this.context.goBack(defaultHref, routerAnimation);
+            }
+            else if (defaultHref !== undefined) {
+                window.location.href = defaultHref;
+            }
+        };
+    }
     render() {
         return jsx(IonBackButtonInner, { onClick: this.clickButton, ...this.props });
     }
@@ -2586,21 +1896,6 @@ class IonBackButton extends React.Component {
     }
 }
 
-/**
- * Ionic's global config, or `null` before core has initialized. Kept here rather
- * than alongside the component helpers so that utils reaching for config don't
- * pull core's runtime bundle in with it.
- */
-const getConfig = () => {
-    if (typeof window !== 'undefined') {
-        const Ionic = window.Ionic;
-        if (Ionic && Ionic.config) {
-            return Ionic.config;
-        }
-    }
-    return null;
-};
-
 class IonIconContainer extends React.PureComponent {
     constructor(props) {
         super(props);
@@ -2646,6 +1941,20 @@ class IonRoute extends React.PureComponent {
     }
 }
 
+class IonRedirect extends React.PureComponent {
+    render() {
+        const IonRedirectInner = this.context.getIonRedirect();
+        if (!this.context.hasIonicRouter() || !IonRedirect) {
+            console.error('You either do not have an Ionic Router package, or your router does not support using <IonRedirect>');
+            return null;
+        }
+        return jsx(IonRedirectInner, { ...this.props });
+    }
+    static get contextType() {
+        return NavContext;
+    }
+}
+
 const IonRouterContext = React.createContext({
     routeInfo: undefined, // TODO(FW-2959): type
     push: () => {
@@ -2654,9 +1963,6 @@ const IonRouterContext = React.createContext({
     back: () => {
         throw new Error('An Ionic Router is required for IonRouterContext');
     },
-    navigateRoot: () => {
-        throw new Error('An Ionic Router is required for IonRouterContext');
-    },
     canGoBack: () => {
         throw new Error('An Ionic Router is required for IonRouterContext');
     },
@@ -2673,17 +1979,15 @@ function useIonRouter() {
         back: context.back,
         push: context.push,
         goBack: context.back,
-        navigateRoot: context.navigateRoot,
         canGoBack: context.canGoBack,
         routeInfo: context.routeInfo,
-    }), [context.back, context.push, context.navigateRoot, context.canGoBack, context.routeInfo]);
+    }), [context.back, context.push, context.canGoBack, context.routeInfo]);
 }
 
 class CreateAnimation extends React.PureComponent {
-    nodes = new Map();
-    animation;
     constructor(props) {
         super(props);
+        this.nodes = new Map();
         this.animation = createAnimation(props.id);
     }
     setupAnimation(props) {
@@ -2831,7 +2135,7 @@ function useController(displayName, controller, defineCustomElement) {
  * @returns Returns the present and dismiss methods in an array
  */
 function useIonActionSheet() {
-    const controller = useController('IonActionSheet', actionSheetController, defineCustomElement$1b);
+    const controller = useController('IonActionSheet', actionSheetController, defineCustomElement$1f);
     const present = useCallback((buttonsOrOptions, header) => {
         if (Array.isArray(buttonsOrOptions)) {
             return controller.present({
@@ -2851,7 +2155,7 @@ function useIonActionSheet() {
  * @returns Returns the present and dismiss methods in an array
  */
 function useIonAlert() {
-    const controller = useController('IonAlert', alertController, defineCustomElement$18);
+    const controller = useController('IonAlert', alertController, defineCustomElement$1b);
     const present = useCallback((messageOrOptions, buttons) => {
         if (typeof messageOrOptions === 'string') {
             return controller.present({
@@ -2871,7 +2175,7 @@ function useIonAlert() {
  * @returns Returns the present and dismiss methods in an array
  */
 function useIonToast() {
-    const controller = useController('IonToast', toastController, defineCustomElement$1a);
+    const controller = useController('IonToast', toastController, defineCustomElement$1d);
     const present = useCallback((messageOrOptions, duration) => {
         if (typeof messageOrOptions === 'string') {
             return controller.present({
@@ -2949,28 +2253,63 @@ function useOverlay(displayName, controller, defineCustomElement, component, com
     };
 }
 
+// TODO(FW-2959): types
+/**
+ * A hook for presenting/dismissing an IonModal component
+ * @param component The component that the modal will show. Can be a React Component, a functional component, or a JSX Element
+ * @param componentProps The props that will be passed to the component, if required
+ * @returns Returns the present and dismiss methods in an array
+ */
 function useIonModal(component, componentProps) {
-    const controller = useOverlay('IonModal', modalController, defineCustomElement$1c, component, componentProps);
+    const controller = useOverlay('IonModal', modalController, defineCustomElement$1g, component, componentProps);
     const present = useCallback((options = {}) => {
         controller.present(options);
     }, [controller.present]);
     return [present, controller.dismiss];
 }
 
+// TODO(FW-2959): types
+/**
+ * A hook for presenting/dismissing an IonPicker component
+ * @param component The component that the popover will show. Can be a React Component, a functional component, or a JSX Element
+ * @param componentProps The props that will be passed to the component, if required
+ * @returns Returns the present and dismiss methods in an array
+ */
 function useIonPopover(component, componentProps) {
-    const controller = useOverlay('IonPopover', popoverController, defineCustomElement$1d, component, componentProps);
+    const controller = useOverlay('IonPopover', popoverController, defineCustomElement$1h, component, componentProps);
     const present = useCallback((options = {}) => {
         controller.present(options);
     }, [controller.present]);
     return [present, controller.dismiss];
 }
 
+/**
+ * A hook for presenting/dismissing an IonPicker component
+ * @returns Returns the present and dismiss methods in an array
+ * @deprecated Use the inline ion-picker component instead.
+ */
+function useIonPicker() {
+    const controller = useController('IonPicker', pickerController, defineCustomElement$1e);
+    const present = useCallback((columnsOrOptions, buttons) => {
+        if (Array.isArray(columnsOrOptions)) {
+            return controller.present({
+                columns: columnsOrOptions,
+                buttons: buttons ?? [{ text: 'Ok' }],
+            });
+        }
+        else {
+            return controller.present(columnsOrOptions);
+        }
+    }, [controller.present]);
+    return [present, controller.dismiss];
+}
+
 /**
  * A hook for presenting/dismissing an IonLoading component
  * @returns Returns the present and dismiss methods in an array
  */
 function useIonLoading() {
-    const controller = useController('IonLoading', loadingController, defineCustomElement$19);
+    const controller = useController('IonLoading', loadingController, defineCustomElement$1c);
     const present = useCallback((messageOrOptions = {}, duration, spinner) => {
         if (typeof messageOrOptions === 'string') {
             return controller.present({
@@ -3012,16 +2351,15 @@ const RouteManagerContext = /*@__PURE__*/ React.createContext({
     findLeavingViewItemByRouteInfo: () => undefined,
     findViewItemByRouteInfo: () => undefined,
     getChildrenToRender: () => undefined,
-    getViewItemsForOutlet: () => [],
     goBack: () => undefined,
     unMountViewItem: () => undefined,
 });
 
 class ViewLifeCycleManager extends React.Component {
-    ionLifeCycleContext = new DefaultIonLifeCycleContext();
-    _isMounted = false;
     constructor(props) {
         super(props);
+        this.ionLifeCycleContext = new DefaultIonLifeCycleContext();
+        this._isMounted = false;
         this.ionLifeCycleContext.onComponentCanBeDestroyed(() => {
             if (!this.props.mount) {
                 if (this._isMounted) {
@@ -3049,8 +2387,10 @@ class ViewLifeCycleManager extends React.Component {
 
 // const RESTRICT_SIZE = 100;
 class LocationHistory {
-    locationHistory = [];
-    tabHistory = {};
+    constructor() {
+        this.locationHistory = [];
+        this.tabHistory = {};
+    }
     add(routeInfo) {
         if (routeInfo.routeAction === 'push' || routeInfo.routeAction == null) {
             this._add(routeInfo);
@@ -3129,14 +2469,7 @@ class LocationHistory {
     _replace(routeInfo) {
         const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
         routeInfos && routeInfos.pop();
-        // Get the current route that's being replaced
-        const currentRoute = this.locationHistory[this.locationHistory.length - 1];
-        // Only pop from global history if we're replacing in the same outlet context.
-        // Don't pop if we're entering a nested outlet (current route has no tab, new route has a tab)
-        const isEnteringNestedOutlet = currentRoute && !currentRoute.tab && !!routeInfo.tab;
-        if (!isEnteringNestedOutlet) {
-            this.locationHistory.pop();
-        }
+        this.locationHistory.pop();
         this._add(routeInfo);
     }
     _clear() {
@@ -3168,20 +2501,6 @@ class LocationHistory {
         }
         return undefined;
     }
-    /**
-     * Returns the most recent RouteInfo in global history (excluding the current
-     * entry) whose pathname matches the given value. Unlike findLastLocation,
-     * this search is tab-agnostic. Used by the multi-step back detection.
-     */
-    findLastLocationByPathname(pathname) {
-        for (let i = this.locationHistory.length - 2; i >= 0; i--) {
-            const ri = this.locationHistory[i];
-            if (ri && ri.pathname === pathname) {
-                return ri;
-            }
-        }
-        return undefined;
-    }
     findLastLocation(routeInfo) {
         const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
         if (routeInfos) {
@@ -3213,42 +2532,30 @@ class LocationHistory {
     canGoBack() {
         return this.locationHistory.length > 1;
     }
-    findTabForPathname(pathname) {
-        for (const tab of Object.keys(this.tabHistory)) {
-            const routeInfos = this.tabHistory[tab];
-            for (let i = routeInfos.length - 1; i >= 0; i--) {
-                if (routeInfos[i].pathname === pathname) {
-                    return tab;
-                }
-            }
-        }
-        return undefined;
-    }
 }
 
 class NavManager extends React.PureComponent {
-    ionRouterContextValue = {
-        push: (pathname, routerDirection, routeAction, routerOptions, animationBuilder) => {
-            this.navigate(pathname, routerDirection, routeAction, animationBuilder, routerOptions);
-        },
-        back: (animationBuilder) => {
-            this.goBack(undefined, animationBuilder);
-        },
-        navigateRoot: (pathname, animationBuilder) => {
-            this.props.onNavigateRoot(pathname, animationBuilder);
-        },
-        canGoBack: () => this.props.locationHistory.canGoBack(),
-        nativeBack: () => this.props.onNativeBack(),
-        routeInfo: this.props.routeInfo,
-    };
     constructor(props) {
         super(props);
+        this.ionRouterContextValue = {
+            push: (pathname, routerDirection, routeAction, routerOptions, animationBuilder) => {
+                this.navigate(pathname, routerDirection, routeAction, animationBuilder, routerOptions);
+            },
+            back: (animationBuilder) => {
+                this.goBack(undefined, animationBuilder);
+            },
+            canGoBack: () => this.props.locationHistory.canGoBack(),
+            nativeBack: () => this.props.onNativeBack(),
+            routeInfo: this.props.routeInfo,
+        };
         this.state = {
             goBack: this.goBack.bind(this),
             hasIonicRouter: () => true,
             navigate: this.navigate.bind(this),
+            getIonRedirect: this.getIonRedirect.bind(this),
             getIonRoute: this.getIonRoute.bind(this),
             getStackManager: this.getStackManager.bind(this),
+            getPageManager: this.getPageManager.bind(this),
             routeInfo: this.props.routeInfo,
             setCurrentTab: this.props.onSetCurrentTab,
             changeTab: this.props.onChangeTab,
@@ -3281,6 +2588,12 @@ class NavManager extends React.PureComponent {
     navigate(path, direction = 'forward', action = 'push', animationBuilder, options, tab) {
         this.props.onNavigate(path, action, direction, animationBuilder, options, tab);
     }
+    getPageManager() {
+        return PageManager;
+    }
+    getIonRedirect() {
+        return this.props.ionRedirect;
+    }
     getIonRoute() {
         return this.props.ionRoute;
     }
@@ -3293,8 +2606,8 @@ class NavManager extends React.PureComponent {
 }
 
 class ViewStacks {
-    viewStacks = {};
     constructor() {
+        this.viewStacks = {};
         this.add = this.add.bind(this);
         this.clear = this.clear.bind(this);
         this.getViewItemsForOutlet = this.getViewItemsForOutlet.bind(this);
@@ -3310,7 +2623,10 @@ class ViewStacks {
         }
     }
     clear(outletId) {
-        delete this.viewStacks[outletId];
+        // Give some time for the leaving views to transition before removing
+        return setTimeout(() => {
+            delete this.viewStacks[outletId];
+        }, 500);
     }
     getViewItemsForOutlet(outletId) {
         return this.viewStacks[outletId] || [];
@@ -3339,43 +2655,5 @@ class ViewStacks {
     }
 }
 
-/**
- * Spelled out instead of imported as a value so this util doesn't pull core's
- * runtime into unit tests. The template type still breaks the build on a rename.
- */
-const DEBUG = 'DEBUG';
-/** Whether the app opted into debug logging with `logLevel: 'DEBUG'`. */
-const isDebugEnabled = () => {
-    return String(getConfig()?.get('logLevel') ?? '').toUpperCase() === DEBUG;
-};
-/**
- * Logger namespaced to a package, e.g. `react-router`. The payload is a function
- * so nothing it collects runs while logging is off.
- *
- * @internal
- */
-const createDebugLogger = (namespace) => {
-    return (event, getData) => {
-        if (!isDebugEnabled()) {
-            return;
-        }
-        const prefix = `[Ionic Debug]: [${namespace}] - ${event}`;
-        const data = getData?.();
-        if (data === undefined) {
-            console.log(prefix);
-            return;
-        }
-        let serialized;
-        try {
-            serialized = JSON.stringify(data);
-        }
-        catch {
-            // A circular reference in the payload must not break navigation.
-            serialized = '[unserializable payload]';
-        }
-        console.log(prefix, serialized);
-    };
-};
-
-export { CreateAnimation, DefaultIonLifeCycleContext, IonAccordion, IonAccordionGroup, IonActionSheet, IonAlert, IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonDatetimeButton, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonInputOtp, IonInputPasswordToggle, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonLifeCycleContext, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNavLink, IonNote, IonPage, IonPicker, IonPickerColumn, IonPickerColumnOption, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRoute, IonRouterContext, IonRouterLink, IonRouterOutlet, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonSelect, IonSelectModal, IonSelectOption, IonSkeletonText, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabButton, IonTabs, IonTabsContext, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, LocationHistory, NavContext, NavManager, RouteManagerContext, StackContext, ViewLifeCycleManager, ViewStacks, createDebugLogger, generateId, getConfig, getPlatforms, isPlatform, setupIonicReact, useIonActionSheet, useIonAlert, useIonLoading, useIonModal, useIonPopover, useIonRouter, useIonToast, useIonViewDidEnter, useIonViewDidLeave, useIonViewWillEnter, useIonViewWillLeave, withIonLifeCycle };
+export { CreateAnimation, DefaultIonLifeCycleContext, IonAccordion, IonAccordionGroup, IonActionSheet, IonAlert, IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonDatetimeButton, IonDivider, IonFab, IonFabButton, IonFabList, IonFooter, IonGallery, IonGalleryItem, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonInputOtp, IonInputPasswordToggle, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonLifeCycleContext, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNavLink, IonNote, IonPage, IonPicker, IonPickerColumn, IonPickerColumnOption, IonPickerLegacy, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRedirect, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRoute, IonRouterContext, IonRouterLink, IonRouterOutlet, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonSelect, IonSelectModal, IonSelectOption, IonSkeletonText, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabButton, IonTabs, IonTabsContext, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, LocationHistory, NavContext, NavManager, RouteManagerContext, StackContext, ViewLifeCycleManager, ViewStacks, generateId, getConfig, getPlatforms, isPlatform, setupIonicReact, useIonActionSheet, useIonAlert, useIonLoading, useIonModal, useIonPicker, useIonPopover, useIonRouter, useIonToast, useIonViewDidEnter, useIonViewDidLeave, useIonViewWillEnter, useIonViewWillLeave, withIonLifeCycle };
 //# sourceMappingURL=index.js.map