@ionic/react 8.2.8-dev.11725452518.16aa47d3 → 8.2.8-dev.11725551009.1bc973e7

package/dist/index.js

@@ -1,75 +1,76 @@
 import React, { useContext, useRef, useEffect, createElement, useState, useMemo, Fragment, useCallback } from 'react';
 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 { 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 { IonInputPasswordToggle as IonInputPasswordToggle$1, defineCustomElement as defineCustomElement$r } 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$s } from '@ionic/core/components/ion-item-divider.js';
-import { IonItemGroup as IonItemGroup$1, defineCustomElement as defineCustomElement$t } from '@ionic/core/components/ion-item-group.js';
-import { IonItemOptions as IonItemOptions$1, defineCustomElement as defineCustomElement$u } from '@ionic/core/components/ion-item-options.js';
-import { IonItemSliding as IonItemSliding$1, defineCustomElement as defineCustomElement$v } from '@ionic/core/components/ion-item-sliding.js';
-import { IonLabel as IonLabel$1, defineCustomElement as defineCustomElement$w } from '@ionic/core/components/ion-label.js';
-import { IonListHeader as IonListHeader$1, defineCustomElement as defineCustomElement$y } from '@ionic/core/components/ion-list-header.js';
-import { IonList as IonList$1, defineCustomElement as defineCustomElement$x } from '@ionic/core/components/ion-list.js';
-import { IonMenuButton as IonMenuButton$1, defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-menu-button.js';
-import { IonMenuToggle as IonMenuToggle$1, defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-menu-toggle.js';
-import { IonMenu as IonMenu$1, defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-menu.js';
-import { IonNavLink as IonNavLink$1, defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-nav-link.js';
-import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-nav.js';
-import { IonNote as IonNote$1, defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-note.js';
-import { IonPickerColumnOption as IonPickerColumnOption$1, defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-picker-column-option.js';
-import { IonPickerColumn as IonPickerColumn$1, defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-picker-column.js';
-import { IonPicker as IonPicker$1, defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-picker.js';
-import { IonProgressBar as IonProgressBar$1, defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-progress-bar.js';
-import { IonRadioGroup as IonRadioGroup$1, defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-radio-group.js';
-import { IonRadio as IonRadio$1, defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-radio.js';
-import { IonRange as IonRange$1, defineCustomElement as defineCustomElement$K } from '@ionic/core/components/ion-range.js';
-import { IonRefresherContent as IonRefresherContent$1, defineCustomElement as defineCustomElement$M } from '@ionic/core/components/ion-refresher-content.js';
-import { IonRefresher as IonRefresher$1, defineCustomElement as defineCustomElement$L } from '@ionic/core/components/ion-refresher.js';
-import { IonReorderGroup as IonReorderGroup$1, defineCustomElement as defineCustomElement$O } from '@ionic/core/components/ion-reorder-group.js';
-import { IonReorder as IonReorder$1, defineCustomElement as defineCustomElement$N } from '@ionic/core/components/ion-reorder.js';
-import { IonRippleEffect as IonRippleEffect$1, defineCustomElement as defineCustomElement$P } from '@ionic/core/components/ion-ripple-effect.js';
-import { IonRow as IonRow$1, defineCustomElement as defineCustomElement$Q } from '@ionic/core/components/ion-row.js';
-import { IonSearchbar as IonSearchbar$1, defineCustomElement as defineCustomElement$R } from '@ionic/core/components/ion-searchbar.js';
-import { IonSegmentButton as IonSegmentButton$1, defineCustomElement as defineCustomElement$T } from '@ionic/core/components/ion-segment-button.js';
-import { IonSegment as IonSegment$1, defineCustomElement as defineCustomElement$S } from '@ionic/core/components/ion-segment.js';
-import { IonSelectOption as IonSelectOption$1, defineCustomElement as defineCustomElement$V } from '@ionic/core/components/ion-select-option.js';
-import { IonSelect as IonSelect$1, defineCustomElement as defineCustomElement$U } from '@ionic/core/components/ion-select.js';
-import { IonSkeletonText as IonSkeletonText$1, defineCustomElement as defineCustomElement$W } from '@ionic/core/components/ion-skeleton-text.js';
-import { IonSpinner as IonSpinner$1, defineCustomElement as defineCustomElement$X } from '@ionic/core/components/ion-spinner.js';
-import { IonSplitPane as IonSplitPane$1, defineCustomElement as defineCustomElement$Y } from '@ionic/core/components/ion-split-pane.js';
-import { IonTab as IonTab$1, defineCustomElement as defineCustomElement$Z } from '@ionic/core/components/ion-tab.js';
-import { IonText as IonText$1, defineCustomElement as defineCustomElement$_ } from '@ionic/core/components/ion-text.js';
-import { IonTextarea as IonTextarea$1, defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-textarea.js';
-import { IonThumbnail as IonThumbnail$1, defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-thumbnail.js';
-import { IonTitle as IonTitle$1, defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-title.js';
-import { IonToggle as IonToggle$1, defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-toggle.js';
-import { IonToolbar as IonToolbar$1, defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-toolbar.js';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { __rest } from 'tslib';
+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-fab.js';
+import { defineCustomElement as defineCustomElement$j } from '@ionic/core/components/ion-fab-list.js';
+import { defineCustomElement as defineCustomElement$k } from '@ionic/core/components/ion-footer.js';
+import { defineCustomElement as defineCustomElement$l } from '@ionic/core/components/ion-grid.js';
+import { defineCustomElement as defineCustomElement$m } from '@ionic/core/components/ion-header.js';
+import { defineCustomElement as defineCustomElement$n } from '@ionic/core/components/ion-img.js';
+import { defineCustomElement as defineCustomElement$o } from '@ionic/core/components/ion-infinite-scroll.js';
+import { defineCustomElement as defineCustomElement$p } from '@ionic/core/components/ion-infinite-scroll-content.js';
+import { defineCustomElement as defineCustomElement$q } from '@ionic/core/components/ion-input.js';
+import { defineCustomElement as defineCustomElement$r } from '@ionic/core/components/ion-input-password-toggle.js';
+import { defineCustomElement as defineCustomElement$s } from '@ionic/core/components/ion-item-divider.js';
+import { defineCustomElement as defineCustomElement$t } from '@ionic/core/components/ion-item-group.js';
+import { defineCustomElement as defineCustomElement$u } from '@ionic/core/components/ion-item-options.js';
+import { defineCustomElement as defineCustomElement$v } from '@ionic/core/components/ion-item-sliding.js';
+import { defineCustomElement as defineCustomElement$w } from '@ionic/core/components/ion-label.js';
+import { defineCustomElement as defineCustomElement$x } from '@ionic/core/components/ion-list.js';
+import { defineCustomElement as defineCustomElement$y } from '@ionic/core/components/ion-list-header.js';
+import { defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-menu.js';
+import { defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-menu-button.js';
+import { defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-menu-toggle.js';
+import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-nav.js';
+import { defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-nav-link.js';
+import { defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-note.js';
+import { defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-picker.js';
+import { defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-picker-column.js';
+import { defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-picker-column-option.js';
+import { defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-progress-bar.js';
+import { defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-radio.js';
+import { defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-radio-group.js';
+import { defineCustomElement as defineCustomElement$K } from '@ionic/core/components/ion-range.js';
+import { defineCustomElement as defineCustomElement$L } from '@ionic/core/components/ion-refresher.js';
+import { defineCustomElement as defineCustomElement$M } from '@ionic/core/components/ion-refresher-content.js';
+import { defineCustomElement as defineCustomElement$N } from '@ionic/core/components/ion-reorder.js';
+import { defineCustomElement as defineCustomElement$O } from '@ionic/core/components/ion-reorder-group.js';
+import { defineCustomElement as defineCustomElement$P } from '@ionic/core/components/ion-ripple-effect.js';
+import { defineCustomElement as defineCustomElement$Q } from '@ionic/core/components/ion-row.js';
+import { defineCustomElement as defineCustomElement$R } from '@ionic/core/components/ion-searchbar.js';
+import { defineCustomElement as defineCustomElement$S } from '@ionic/core/components/ion-segment.js';
+import { defineCustomElement as defineCustomElement$T } from '@ionic/core/components/ion-segment-button.js';
+import { defineCustomElement as defineCustomElement$U } from '@ionic/core/components/ion-select.js';
+import { defineCustomElement as defineCustomElement$V } from '@ionic/core/components/ion-select-option.js';
+import { defineCustomElement as defineCustomElement$W } from '@ionic/core/components/ion-skeleton-text.js';
+import { defineCustomElement as defineCustomElement$X } from '@ionic/core/components/ion-spinner.js';
+import { defineCustomElement as defineCustomElement$Y } from '@ionic/core/components/ion-split-pane.js';
+import { defineCustomElement as defineCustomElement$Z } from '@ionic/core/components/ion-tab.js';
+import { defineCustomElement as defineCustomElement$_ } from '@ionic/core/components/ion-text.js';
+import { defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-textarea.js';
+import { defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-thumbnail.js';
+import { defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-title.js';
+import { defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-toggle.js';
+import { defineCustomElement as defineCustomElement$13 } 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';
@@ -77,7 +78,6 @@ 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 { __rest } from 'tslib';
 import { defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-alert.js';
 import { defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-loading.js';
 import { defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-toast.js';
@@ -85,12 +85,12 @@ import { defineCustomElement as defineCustomElement$17 } from '@ionic/core/compo
 import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/components/ion-action-sheet.js';
 import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-modal.js';
 import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/components/ion-popover.js';
-import ReactDOM, { createPortal } from 'react-dom';
-import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-app.js';
-import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-back-button.js';
+import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-app.js';
+import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-back-button.js';
 import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-router-outlet.js';
 import { defineCustomElement as defineCustomElement$1b } 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$1f } from '@ionic/core/components/ion-tabs.js';
 import { defineCustomElement as defineCustomElement$1d } from 'ionicons/components/ion-icon.js';
 
 const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
@@ -410,543 +410,6 @@ const NavContext = /*@__PURE__*/ React.createContext({
     },
 });
 
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-const IonAccordion = /*@__PURE__*/ createComponent({
-    tagName: 'ion-accordion',
-    elementClass: IonAccordion$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1
-});
-const IonAccordionGroup = /*@__PURE__*/ createComponent({
-    tagName: 'ion-accordion-group',
-    elementClass: IonAccordionGroup$1,
-    react: React,
-    events: { onIonChange: 'ionChange' },
-    defineCustomElement: defineCustomElement$2
-});
-const IonAvatar = /*@__PURE__*/ createComponent({
-    tagName: 'ion-avatar',
-    elementClass: IonAvatar$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$3
-});
-const IonBackdrop = /*@__PURE__*/ createComponent({
-    tagName: 'ion-backdrop',
-    elementClass: IonBackdrop$1,
-    react: React,
-    events: { onIonBackdropTap: 'ionBackdropTap' },
-    defineCustomElement: defineCustomElement$4
-});
-const IonBadge = /*@__PURE__*/ createComponent({
-    tagName: 'ion-badge',
-    elementClass: IonBadge$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$5
-});
-const IonBreadcrumbs = /*@__PURE__*/ createComponent({
-    tagName: 'ion-breadcrumbs',
-    elementClass: IonBreadcrumbs$1,
-    react: React,
-    events: { onIonCollapsedClick: 'ionCollapsedClick' },
-    defineCustomElement: defineCustomElement$6
-});
-const IonButtons = /*@__PURE__*/ createComponent({
-    tagName: 'ion-buttons',
-    elementClass: IonButtons$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$7
-});
-const IonCardContent = /*@__PURE__*/ createComponent({
-    tagName: 'ion-card-content',
-    elementClass: IonCardContent$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$8
-});
-const IonCardHeader = /*@__PURE__*/ createComponent({
-    tagName: 'ion-card-header',
-    elementClass: IonCardHeader$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$9
-});
-const IonCardSubtitle = /*@__PURE__*/ createComponent({
-    tagName: 'ion-card-subtitle',
-    elementClass: IonCardSubtitle$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$a
-});
-const IonCardTitle = /*@__PURE__*/ createComponent({
-    tagName: 'ion-card-title',
-    elementClass: IonCardTitle$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$b
-});
-const IonCheckbox = /*@__PURE__*/ createComponent({
-    tagName: 'ion-checkbox',
-    elementClass: IonCheckbox$1,
-    react: React,
-    events: {
-        onIonChange: 'ionChange',
-        onIonFocus: 'ionFocus',
-        onIonBlur: 'ionBlur'
-    },
-    defineCustomElement: defineCustomElement$c
-});
-const IonChip = /*@__PURE__*/ createComponent({
-    tagName: 'ion-chip',
-    elementClass: IonChip$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$d
-});
-const IonCol = /*@__PURE__*/ createComponent({
-    tagName: 'ion-col',
-    elementClass: IonCol$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$e
-});
-const IonContent = /*@__PURE__*/ createComponent({
-    tagName: 'ion-content',
-    elementClass: IonContent$1,
-    react: React,
-    events: {
-        onIonScrollStart: 'ionScrollStart',
-        onIonScroll: 'ionScroll',
-        onIonScrollEnd: 'ionScrollEnd'
-    },
-    defineCustomElement: defineCustomElement$f
-});
-const IonDatetime = /*@__PURE__*/ createComponent({
-    tagName: 'ion-datetime',
-    elementClass: IonDatetime$1,
-    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,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$h
-});
-const IonFab = /*@__PURE__*/ createComponent({
-    tagName: 'ion-fab',
-    elementClass: IonFab$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$i
-});
-const IonFabList = /*@__PURE__*/ createComponent({
-    tagName: 'ion-fab-list',
-    elementClass: IonFabList$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$j
-});
-const IonFooter = /*@__PURE__*/ createComponent({
-    tagName: 'ion-footer',
-    elementClass: IonFooter$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$k
-});
-const IonGrid = /*@__PURE__*/ createComponent({
-    tagName: 'ion-grid',
-    elementClass: IonGrid$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$l
-});
-const IonHeader = /*@__PURE__*/ createComponent({
-    tagName: 'ion-header',
-    elementClass: IonHeader$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$m
-});
-const IonImg = /*@__PURE__*/ createComponent({
-    tagName: 'ion-img',
-    elementClass: IonImg$1,
-    react: React,
-    events: {
-        onIonImgWillLoad: 'ionImgWillLoad',
-        onIonImgDidLoad: 'ionImgDidLoad',
-        onIonError: 'ionError'
-    },
-    defineCustomElement: defineCustomElement$n
-});
-const IonInfiniteScroll = /*@__PURE__*/ createComponent({
-    tagName: 'ion-infinite-scroll',
-    elementClass: IonInfiniteScroll$1,
-    react: React,
-    events: { onIonInfinite: 'ionInfinite' },
-    defineCustomElement: defineCustomElement$o
-});
-const IonInfiniteScrollContent = /*@__PURE__*/ createComponent({
-    tagName: 'ion-infinite-scroll-content',
-    elementClass: IonInfiniteScrollContent$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$p
-});
-const IonInput = /*@__PURE__*/ createComponent({
-    tagName: 'ion-input',
-    elementClass: IonInput$1,
-    react: React,
-    events: {
-        onIonInput: 'ionInput',
-        onIonChange: 'ionChange',
-        onIonBlur: 'ionBlur',
-        onIonFocus: 'ionFocus'
-    },
-    defineCustomElement: defineCustomElement$q
-});
-const IonInputPasswordToggle = /*@__PURE__*/ createComponent({
-    tagName: 'ion-input-password-toggle',
-    elementClass: IonInputPasswordToggle$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$r
-});
-const IonItemDivider = /*@__PURE__*/ createComponent({
-    tagName: 'ion-item-divider',
-    elementClass: IonItemDivider$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$s
-});
-const IonItemGroup = /*@__PURE__*/ createComponent({
-    tagName: 'ion-item-group',
-    elementClass: IonItemGroup$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$t
-});
-const IonItemOptions = /*@__PURE__*/ createComponent({
-    tagName: 'ion-item-options',
-    elementClass: IonItemOptions$1,
-    react: React,
-    events: { onIonSwipe: 'ionSwipe' },
-    defineCustomElement: defineCustomElement$u
-});
-const IonItemSliding = /*@__PURE__*/ createComponent({
-    tagName: 'ion-item-sliding',
-    elementClass: IonItemSliding$1,
-    react: React,
-    events: { onIonDrag: 'ionDrag' },
-    defineCustomElement: defineCustomElement$v
-});
-const IonLabel = /*@__PURE__*/ createComponent({
-    tagName: 'ion-label',
-    elementClass: IonLabel$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$w
-});
-const IonList = /*@__PURE__*/ createComponent({
-    tagName: 'ion-list',
-    elementClass: IonList$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$x
-});
-const IonListHeader = /*@__PURE__*/ createComponent({
-    tagName: 'ion-list-header',
-    elementClass: IonListHeader$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$y
-});
-const IonMenu = /*@__PURE__*/ createComponent({
-    tagName: 'ion-menu',
-    elementClass: IonMenu$1,
-    react: React,
-    events: {
-        onIonWillOpen: 'ionWillOpen',
-        onIonWillClose: 'ionWillClose',
-        onIonDidOpen: 'ionDidOpen',
-        onIonDidClose: 'ionDidClose'
-    },
-    defineCustomElement: defineCustomElement$z
-});
-const IonMenuButton = /*@__PURE__*/ createComponent({
-    tagName: 'ion-menu-button',
-    elementClass: IonMenuButton$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$A
-});
-const IonMenuToggle = /*@__PURE__*/ createComponent({
-    tagName: 'ion-menu-toggle',
-    elementClass: IonMenuToggle$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$B
-});
-const IonNavLink = /*@__PURE__*/ createComponent({
-    tagName: 'ion-nav-link',
-    elementClass: IonNavLink$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$C
-});
-const IonNote = /*@__PURE__*/ createComponent({
-    tagName: 'ion-note',
-    elementClass: IonNote$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$D
-});
-const IonPicker = /*@__PURE__*/ createComponent({
-    tagName: 'ion-picker',
-    elementClass: IonPicker$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$E
-});
-const IonPickerColumn = /*@__PURE__*/ createComponent({
-    tagName: 'ion-picker-column',
-    elementClass: IonPickerColumn$1,
-    react: React,
-    events: { onIonChange: 'ionChange' },
-    defineCustomElement: defineCustomElement$F
-});
-const IonPickerColumnOption = /*@__PURE__*/ createComponent({
-    tagName: 'ion-picker-column-option',
-    elementClass: IonPickerColumnOption$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$G
-});
-const IonProgressBar = /*@__PURE__*/ createComponent({
-    tagName: 'ion-progress-bar',
-    elementClass: IonProgressBar$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$H
-});
-const IonRadio = /*@__PURE__*/ createComponent({
-    tagName: 'ion-radio',
-    elementClass: IonRadio$1,
-    react: React,
-    events: {
-        onIonFocus: 'ionFocus',
-        onIonBlur: 'ionBlur'
-    },
-    defineCustomElement: defineCustomElement$I
-});
-const IonRadioGroup = /*@__PURE__*/ createComponent({
-    tagName: 'ion-radio-group',
-    elementClass: IonRadioGroup$1,
-    react: React,
-    events: { onIonChange: 'ionChange' },
-    defineCustomElement: defineCustomElement$J
-});
-const IonRange = /*@__PURE__*/ createComponent({
-    tagName: 'ion-range',
-    elementClass: IonRange$1,
-    react: React,
-    events: {
-        onIonChange: 'ionChange',
-        onIonInput: 'ionInput',
-        onIonFocus: 'ionFocus',
-        onIonBlur: 'ionBlur',
-        onIonKnobMoveStart: 'ionKnobMoveStart',
-        onIonKnobMoveEnd: 'ionKnobMoveEnd'
-    },
-    defineCustomElement: defineCustomElement$K
-});
-const IonRefresher = /*@__PURE__*/ createComponent({
-    tagName: 'ion-refresher',
-    elementClass: IonRefresher$1,
-    react: React,
-    events: {
-        onIonRefresh: 'ionRefresh',
-        onIonPull: 'ionPull',
-        onIonStart: 'ionStart'
-    },
-    defineCustomElement: defineCustomElement$L
-});
-const IonRefresherContent = /*@__PURE__*/ createComponent({
-    tagName: 'ion-refresher-content',
-    elementClass: IonRefresherContent$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$M
-});
-const IonReorder = /*@__PURE__*/ createComponent({
-    tagName: 'ion-reorder',
-    elementClass: IonReorder$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$N
-});
-const IonReorderGroup = /*@__PURE__*/ createComponent({
-    tagName: 'ion-reorder-group',
-    elementClass: IonReorderGroup$1,
-    react: React,
-    events: { onIonItemReorder: 'ionItemReorder' },
-    defineCustomElement: defineCustomElement$O
-});
-const IonRippleEffect = /*@__PURE__*/ createComponent({
-    tagName: 'ion-ripple-effect',
-    elementClass: IonRippleEffect$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$P
-});
-const IonRow = /*@__PURE__*/ createComponent({
-    tagName: 'ion-row',
-    elementClass: IonRow$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$Q
-});
-const IonSearchbar = /*@__PURE__*/ createComponent({
-    tagName: 'ion-searchbar',
-    elementClass: IonSearchbar$1,
-    react: React,
-    events: {
-        onIonInput: 'ionInput',
-        onIonChange: 'ionChange',
-        onIonCancel: 'ionCancel',
-        onIonClear: 'ionClear',
-        onIonBlur: 'ionBlur',
-        onIonFocus: 'ionFocus'
-    },
-    defineCustomElement: defineCustomElement$R
-});
-const IonSegment = /*@__PURE__*/ createComponent({
-    tagName: 'ion-segment',
-    elementClass: IonSegment$1,
-    react: React,
-    events: { onIonChange: 'ionChange' },
-    defineCustomElement: defineCustomElement$S
-});
-const IonSegmentButton = /*@__PURE__*/ createComponent({
-    tagName: 'ion-segment-button',
-    elementClass: IonSegmentButton$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$T
-});
-const IonSelect = /*@__PURE__*/ createComponent({
-    tagName: 'ion-select',
-    elementClass: IonSelect$1,
-    react: React,
-    events: {
-        onIonChange: 'ionChange',
-        onIonCancel: 'ionCancel',
-        onIonDismiss: 'ionDismiss',
-        onIonFocus: 'ionFocus',
-        onIonBlur: 'ionBlur'
-    },
-    defineCustomElement: defineCustomElement$U
-});
-const IonSelectOption = /*@__PURE__*/ createComponent({
-    tagName: 'ion-select-option',
-    elementClass: IonSelectOption$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$V
-});
-const IonSkeletonText = /*@__PURE__*/ createComponent({
-    tagName: 'ion-skeleton-text',
-    elementClass: IonSkeletonText$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$W
-});
-const IonSpinner = /*@__PURE__*/ createComponent({
-    tagName: 'ion-spinner',
-    elementClass: IonSpinner$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$X
-});
-const IonSplitPane = /*@__PURE__*/ createComponent({
-    tagName: 'ion-split-pane',
-    elementClass: IonSplitPane$1,
-    react: React,
-    events: { onIonSplitPaneVisible: 'ionSplitPaneVisible' },
-    defineCustomElement: defineCustomElement$Y
-});
-const IonTab = /*@__PURE__*/ createComponent({
-    tagName: 'ion-tab',
-    elementClass: IonTab$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$Z
-});
-const IonText = /*@__PURE__*/ createComponent({
-    tagName: 'ion-text',
-    elementClass: IonText$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$_
-});
-const IonTextarea = /*@__PURE__*/ createComponent({
-    tagName: 'ion-textarea',
-    elementClass: IonTextarea$1,
-    react: React,
-    events: {
-        onIonChange: 'ionChange',
-        onIonInput: 'ionInput',
-        onIonBlur: 'ionBlur',
-        onIonFocus: 'ionFocus'
-    },
-    defineCustomElement: defineCustomElement$$
-});
-const IonThumbnail = /*@__PURE__*/ createComponent({
-    tagName: 'ion-thumbnail',
-    elementClass: IonThumbnail$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$10
-});
-const IonTitle = /*@__PURE__*/ createComponent({
-    tagName: 'ion-title',
-    elementClass: IonTitle$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$11
-});
-const IonToggle = /*@__PURE__*/ createComponent({
-    tagName: 'ion-toggle',
-    elementClass: IonToggle$1,
-    react: React,
-    events: {
-        onIonChange: 'ionChange',
-        onIonFocus: 'ionFocus',
-        onIonBlur: 'ionBlur'
-    },
-    defineCustomElement: defineCustomElement$12
-});
-const IonToolbar = /*@__PURE__*/ createComponent({
-    tagName: 'ion-toolbar',
-    elementClass: IonToolbar$1,
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$13
-});
-
 const dashToPascalCase = (str) => str
     .toLowerCase()
     .split('-')
@@ -1090,6 +553,139 @@ 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 _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
+            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 = Object.assign(Object.assign({}, 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 IonFab = /*@__PURE__*/ createReactComponent('ion-fab', undefined, undefined, defineCustomElement$i);
+const IonFabList = /*@__PURE__*/ createReactComponent('ion-fab-list', undefined, undefined, defineCustomElement$j);
+const IonFooter = /*@__PURE__*/ createReactComponent('ion-footer', undefined, undefined, defineCustomElement$k);
+const IonGrid = /*@__PURE__*/ createReactComponent('ion-grid', undefined, undefined, defineCustomElement$l);
+const IonHeader = /*@__PURE__*/ createReactComponent('ion-header', undefined, undefined, defineCustomElement$m);
+const IonImg = /*@__PURE__*/ createReactComponent('ion-img', undefined, undefined, defineCustomElement$n);
+const IonInfiniteScroll = /*@__PURE__*/ createReactComponent('ion-infinite-scroll', undefined, undefined, defineCustomElement$o);
+const IonInfiniteScrollContent = /*@__PURE__*/ createReactComponent('ion-infinite-scroll-content', undefined, undefined, defineCustomElement$p);
+const IonInput = /*@__PURE__*/ createReactComponent('ion-input', undefined, undefined, defineCustomElement$q);
+const IonInputPasswordToggle = /*@__PURE__*/ createReactComponent('ion-input-password-toggle', undefined, undefined, defineCustomElement$r);
+const IonItemDivider = /*@__PURE__*/ createReactComponent('ion-item-divider', undefined, undefined, defineCustomElement$s);
+const IonItemGroup = /*@__PURE__*/ createReactComponent('ion-item-group', undefined, undefined, defineCustomElement$t);
+const IonItemOptions = /*@__PURE__*/ createReactComponent('ion-item-options', undefined, undefined, defineCustomElement$u);
+const IonItemSliding = /*@__PURE__*/ createReactComponent('ion-item-sliding', undefined, undefined, defineCustomElement$v);
+const IonLabel = /*@__PURE__*/ createReactComponent('ion-label', undefined, undefined, defineCustomElement$w);
+const IonList = /*@__PURE__*/ createReactComponent('ion-list', undefined, undefined, defineCustomElement$x);
+const IonListHeader = /*@__PURE__*/ createReactComponent('ion-list-header', undefined, undefined, defineCustomElement$y);
+const IonMenu = /*@__PURE__*/ createReactComponent('ion-menu', undefined, undefined, defineCustomElement$z);
+const IonMenuButton = /*@__PURE__*/ createReactComponent('ion-menu-button', undefined, undefined, defineCustomElement$A);
+const IonMenuToggle = /*@__PURE__*/ createReactComponent('ion-menu-toggle', undefined, undefined, defineCustomElement$B);
+const IonNavLink = /*@__PURE__*/ createReactComponent('ion-nav-link', undefined, undefined, defineCustomElement$C);
+const IonNote = /*@__PURE__*/ createReactComponent('ion-note', undefined, undefined, defineCustomElement$D);
+const IonPicker = /*@__PURE__*/ createReactComponent('ion-picker', undefined, undefined, defineCustomElement$E);
+const IonPickerColumn = /*@__PURE__*/ createReactComponent('ion-picker-column', undefined, undefined, defineCustomElement$F);
+const IonPickerColumnOption = /*@__PURE__*/ createReactComponent('ion-picker-column-option', undefined, undefined, defineCustomElement$G);
+const IonProgressBar = /*@__PURE__*/ createReactComponent('ion-progress-bar', undefined, undefined, defineCustomElement$H);
+const IonRadio = /*@__PURE__*/ createReactComponent('ion-radio', undefined, undefined, defineCustomElement$I);
+const IonRadioGroup = /*@__PURE__*/ createReactComponent('ion-radio-group', undefined, undefined, defineCustomElement$J);
+const IonRange = /*@__PURE__*/ createReactComponent('ion-range', undefined, undefined, defineCustomElement$K);
+const IonRefresher = /*@__PURE__*/ createReactComponent('ion-refresher', undefined, undefined, defineCustomElement$L);
+const IonRefresherContent = /*@__PURE__*/ createReactComponent('ion-refresher-content', undefined, undefined, defineCustomElement$M);
+const IonReorder = /*@__PURE__*/ createReactComponent('ion-reorder', undefined, undefined, defineCustomElement$N);
+const IonReorderGroup = /*@__PURE__*/ createReactComponent('ion-reorder-group', undefined, undefined, defineCustomElement$O);
+const IonRippleEffect = /*@__PURE__*/ createReactComponent('ion-ripple-effect', undefined, undefined, defineCustomElement$P);
+const IonRow = /*@__PURE__*/ createReactComponent('ion-row', undefined, undefined, defineCustomElement$Q);
+const IonSearchbar = /*@__PURE__*/ createReactComponent('ion-searchbar', undefined, undefined, defineCustomElement$R);
+const IonSegment = /*@__PURE__*/ createReactComponent('ion-segment', undefined, undefined, defineCustomElement$S);
+const IonSegmentButton = /*@__PURE__*/ createReactComponent('ion-segment-button', undefined, undefined, defineCustomElement$T);
+const IonSelect = /*@__PURE__*/ createReactComponent('ion-select', undefined, undefined, defineCustomElement$U);
+const IonSelectOption = /*@__PURE__*/ createReactComponent('ion-select-option', undefined, undefined, defineCustomElement$V);
+const IonSkeletonText = /*@__PURE__*/ createReactComponent('ion-skeleton-text', undefined, undefined, defineCustomElement$W);
+const IonSpinner = /*@__PURE__*/ createReactComponent('ion-spinner', undefined, undefined, defineCustomElement$X);
+const IonSplitPane = /*@__PURE__*/ createReactComponent('ion-split-pane', undefined, undefined, defineCustomElement$Y);
+const IonTab = /*@__PURE__*/ createReactComponent('ion-tab', undefined, undefined, defineCustomElement$Z);
+const IonText = /*@__PURE__*/ createReactComponent('ion-text', undefined, undefined, defineCustomElement$_);
+const IonTextarea = /*@__PURE__*/ createReactComponent('ion-textarea', undefined, undefined, defineCustomElement$$);
+const IonThumbnail = /*@__PURE__*/ createReactComponent('ion-thumbnail', undefined, undefined, defineCustomElement$10);
+const IonTitle = /*@__PURE__*/ createReactComponent('ion-title', undefined, undefined, defineCustomElement$11);
+const IonToggle = /*@__PURE__*/ createReactComponent('ion-toggle', undefined, undefined, defineCustomElement$12);
+const IonToolbar = /*@__PURE__*/ createReactComponent('ion-toolbar', undefined, undefined, defineCustomElement$13);
+
 const createForwardRef = (ReactComponent, // TODO(FW-2959): type
 displayName) => {
     const forwardRef = (props, ref) => {
@@ -1477,73 +1073,12 @@ const IonOverlayManager = ({ onAddOverlay, onRemoveOverlay }) => {
     })));
 };
 
-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 _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
-            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 = Object.assign(Object.assign({}, 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);
-};
-
 const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1e);
 const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1b);
-const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1f);
+const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1f);
+const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1g);
 const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1c);
-const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1g);
+const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1h);
 // ionicons
 const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1d);
 
@@ -1706,7 +1241,7 @@ const ReactDelegate = (addView, removeView) => {
     };
 };
 
-const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1h);
+const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1i);
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const IonNavInternal = (_a) => {
     var { children, forwardedRef } = _a, restOfProps = __rest(_a, ["children", "forwardedRef"]);
@@ -1961,9 +1496,15 @@ class IonTabBarUnwrapped extends React.PureComponent {
         };
     }
     onTabButtonClick(e, onClickFn) {
+        var _a;
         const tappedTab = this.state.tabs[e.detail.tab];
         const originalHref = tappedTab.originalHref;
-        const currentHref = e.detail.href;
+        /**
+         * If the router outlet is not defined, then the tabs is being used
+         * as a basic tab navigation without the router. In this case, we
+         * don't want to update the href else the URL will change.
+         */
+        const currentHref = ((_a = this.props.routerOutletRef) === null || _a === void 0 ? void 0 : _a.current) ? e.detail.href : '';
         const { activeTab: prevActiveTab } = this.state;
         if (onClickFn) {
             /**
@@ -2077,23 +1618,36 @@ const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
     render() {
         let outlet;
         let tabBar;
+        // Check if IonTabs has any IonTab children
+        let hasTab = false;
         const _a = this.props, { className, onIonTabsDidChange, onIonTabsWillChange } = _a, props = __rest(_a, ["className", "onIonTabsDidChange", "onIonTabsWillChange"]);
         const children = typeof this.props.children === 'function'
             ? this.props.children(this.ionTabContextState)
             : this.props.children;
+        const outletProps = {
+            ref: this.routerOutletRef,
+        };
         React.Children.forEach(children, (child) => {
             // eslint-disable-next-line no-prototype-builtins
             if (child == null || typeof child !== 'object' || !child.hasOwnProperty('type')) {
                 return;
             }
             if (child.type === IonRouterOutlet || child.type.isRouterOutlet) {
-                outlet = React.cloneElement(child);
+                outlet = React.cloneElement(child, outletProps);
             }
             else if (child.type === Fragment && child.props.children[0].type === IonRouterOutlet) {
-                outlet = child.props.children[0];
+                outlet = React.cloneElement(child.props.children[0], outletProps);
+            }
+            else if (child.type === IonTab) {
+                /**
+                 * This indicates that IonTabs will be using a basic tab-based navigation
+                 * without the history stack or URL updates associated with the router.
+                 */
+                hasTab = true;
             }
             let childProps = {
                 ref: this.tabBarRef,
+                routerOutletRef: this.routerOutletRef,
             };
             /**
              * Only pass these props
@@ -2116,17 +1670,56 @@ const IonTabs = /*@__PURE__*/ (() => class extends React.Component {
                 tabBar = React.cloneElement(child.props.children[1], childProps);
             }
         });
-        if (!outlet) {
-            throw new Error('IonTabs must contain an IonRouterOutlet');
+        if (!outlet && !hasTab) {
+            throw new Error('IonTabs must contain an IonRouterOutlet or an IonTab');
+        }
+        if (outlet && hasTab) {
+            throw new Error('IonTabs cannot contain an IonRouterOutlet and an IonTab at the same time');
         }
         if (!tabBar) {
             throw new Error('IonTabs needs a IonTabBar');
         }
+        if (hasTab) {
+            return React.createElement(IonTabsInner, Object.assign({}, this.props));
+        }
+        /**
+         * TODO(ROU-11051)
+         *
+         * There is no error handling for the case where there
+         * is no associated Route for the given IonTabButton.
+         *
+         * More investigation is needed to determine how to
+         * handle this to prevent any overwriting of the
+         * IonTabButton's onClick handler and how the routing
+         * is handled.
+         */
         return (React.createElement(IonTabsContext.Provider, { value: this.ionTabContextState }, this.context.hasIonicRouter() ? (React.createElement(PageManager, Object.assign({ className: className ? `${className}` : '', routeInfo: this.context.routeInfo }, props),
-            React.createElement("ion-tabs", { className: "ion-tabs", style: hostStyles },
-                tabBar.props.slot === 'top' ? tabBar : null,
-                React.createElement("div", { style: tabsInner, className: "tabs-inner" }, outlet),
-                tabBar.props.slot === 'bottom' ? tabBar : null))) : (React.createElement("div", Object.assign({ className: className ? `${className}` : 'ion-tabs' }, props, { style: hostStyles }),
+            React.createElement(IonTabsInner, Object.assign({}, this.props), React.Children.map(children, (child) => {
+                if (React.isValidElement(child)) {
+                    const isTabBar = child.type === IonTabBar ||
+                        child.type.isTabBar ||
+                        (child.type === Fragment &&
+                            (child.props.children[1].type === IonTabBar || child.props.children[1].type.isTabBar));
+                    const isRouterOutlet = child.type === IonRouterOutlet ||
+                        child.type.isRouterOutlet ||
+                        (child.type === Fragment && child.props.children[0].type === IonRouterOutlet);
+                    if (isTabBar) {
+                        /**
+                         * The modified tabBar needs to be returned to include
+                         * the context and the overridden methods.
+                         */
+                        return tabBar;
+                    }
+                    if (isRouterOutlet) {
+                        /**
+                         * The modified outlet needs to be returned to include
+                         * the ref.
+                         */
+                        return outlet;
+                    }
+                }
+                return child;
+            })))) : (React.createElement("div", Object.assign({ className: className ? `${className}` : 'ion-tabs' }, props, { style: hostStyles }),
             tabBar.props.slot === 'top' ? tabBar : null,
             React.createElement("div", { style: tabsInner, className: "tabs-inner" }, outlet),
             tabBar.props.slot === 'bottom' ? tabBar : null))));
@@ -2230,7 +1823,7 @@ class IonRedirect extends React.PureComponent {
 }
 
 const IonRouterContext = React.createContext({
-    routeInfo: undefined, // TODO(FW-2959): type
+    routeInfo: undefined,
     push: () => {
         throw new Error('An Ionic Router is required for IonRouterContext');
     },