@ionic/react 8.8.4-dev.11775576543.172b7b99 → 8.8.4-dev.11775852701.1bbb2b3e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/css/core.css +1 -1
  2. package/css/core.css.map +1 -1
  3. package/css/display.css +1 -1
  4. package/css/display.css.map +1 -1
  5. package/css/flex-utils.css +1 -1
  6. package/css/flex-utils.css.map +1 -1
  7. package/css/float-elements.css.map +1 -1
  8. package/css/global.bundle.css.map +1 -1
  9. package/css/ionic-swiper.css +1 -1
  10. package/css/ionic-swiper.css.map +1 -1
  11. package/css/ionic.bundle.css +1 -1
  12. package/css/ionic.bundle.css.map +1 -1
  13. package/css/normalize.css.map +1 -1
  14. package/css/padding.css.map +1 -1
  15. package/css/palettes/dark.always.css +1 -1
  16. package/css/palettes/dark.always.css.map +1 -1
  17. package/css/palettes/dark.class.css +1 -1
  18. package/css/palettes/dark.class.css.map +1 -1
  19. package/css/palettes/dark.system.css +1 -1
  20. package/css/palettes/dark.system.css.map +1 -1
  21. package/css/palettes/high-contrast-dark.always.css +1 -1
  22. package/css/palettes/high-contrast-dark.always.css.map +1 -1
  23. package/css/palettes/high-contrast-dark.class.css +1 -1
  24. package/css/palettes/high-contrast-dark.class.css.map +1 -1
  25. package/css/palettes/high-contrast-dark.system.css +1 -1
  26. package/css/palettes/high-contrast-dark.system.css.map +1 -1
  27. package/css/palettes/high-contrast.always.css.map +1 -1
  28. package/css/palettes/high-contrast.class.css.map +1 -1
  29. package/css/palettes/high-contrast.system.css.map +1 -1
  30. package/css/structure.css.map +1 -1
  31. package/css/text-alignment.css.map +1 -1
  32. package/css/text-transformation.css.map +1 -1
  33. package/css/typography.css.map +1 -1
  34. package/css/utils.bundle.css +1 -1
  35. package/css/utils.bundle.css.map +1 -1
  36. package/dist/index.js +871 -253
  37. package/dist/index.js.map +1 -1
  38. package/dist/types/components/IonActionSheet.d.ts +1 -1
  39. package/dist/types/components/IonAlert.d.ts +1 -1
  40. package/dist/types/components/IonIcon.d.ts +1 -1
  41. package/dist/types/components/IonLoading.d.ts +1 -1
  42. package/dist/types/components/IonModal.d.ts +1 -1
  43. package/dist/types/components/IonPage.d.ts +1 -1
  44. package/dist/types/components/IonPickerLegacy.d.ts +1 -1
  45. package/dist/types/components/IonPopover.d.ts +1 -1
  46. package/dist/types/components/IonRouterOutlet.d.ts +2 -2
  47. package/dist/types/components/IonToast.d.ts +1 -1
  48. package/dist/types/components/components.d.ts +326 -0
  49. package/dist/types/components/createInlineOverlayComponent.d.ts +1 -1
  50. package/dist/types/components/createRoutingComponent.d.ts +1 -1
  51. package/dist/types/components/index.d.ts +1 -1
  52. package/dist/types/components/navigation/IonNav.d.ts +2 -1
  53. package/dist/types/components/navigation/IonTabBar.d.ts +1 -1
  54. package/dist/types/components/navigation/IonTabs.d.ts +1 -2
  55. package/dist/types/components/react-component-lib/createComponent.d.ts +1 -1
  56. package/dist/types/components/react-component-lib/utils/index.d.ts +1 -1
  57. package/dist/types/components/routing-proxies.d.ts +7 -7
  58. package/dist/types/components/utils/index.d.ts +2 -11
  59. package/dist/types/lifecycle/IonLifeCycleHOC.d.ts +1 -3
  60. package/dist/types/routing/NavManager.d.ts +1 -0
  61. package/dist/types/routing/OutletPageManager.d.ts +1 -0
  62. package/dist/types/routing/PageManager.d.ts +1 -0
  63. package/dist/types/routing/ViewLifeCycleManager.d.ts +1 -0
  64. package/package.json +8 -8
  65. package/css/ionic/bundle.ionic.css +0 -1
  66. package/css/ionic/bundle.ionic.css.map +0 -1
  67. package/css/ionic/core.ionic.css +0 -1
  68. package/css/ionic/core.ionic.css.map +0 -1
  69. package/css/ionic/global.bundle.ionic.css +0 -1
  70. package/css/ionic/global.bundle.ionic.css.map +0 -1
  71. package/css/ionic/ionic-swiper.ionic.css +0 -1
  72. package/css/ionic/ionic-swiper.ionic.css.map +0 -1
  73. package/css/ionic/link.ionic.css +0 -1
  74. package/css/ionic/link.ionic.css.map +0 -1
  75. package/css/ionic/structure.ionic.css +0 -1
  76. package/css/ionic/structure.ionic.css.map +0 -1
  77. package/css/ionic/typography.ionic.css +0 -1
  78. package/css/ionic/typography.ionic.css.map +0 -1
  79. package/css/ionic/utils.bundle.ionic.css +0 -1
  80. package/css/ionic/utils.bundle.ionic.css.map +0 -1
  81. package/dist/types/components/proxies.d.ts +0 -74
package/dist/index.js CHANGED
@@ -2,80 +2,79 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
2
  import React, { useContext, useRef, useEffect, createElement, useState, useMemo, Fragment as Fragment$1, useCallback } from 'react';
3
3
  import { isPlatform as isPlatform$1, getPlatforms as getPlatforms$1, componentOnReady, createAnimation, actionSheetController, alertController, toastController, modalController, popoverController, pickerController, loadingController, initialize } from '@ionic/core/components';
4
4
  export { IonicSafeString, IonicSlides, createAnimation, createGesture, getIonPageElement, getTimeGivenProgression, iosTransitionAnimation, mdTransitionAnimation, openURL } from '@ionic/core/components';
5
- import ReactDOM, { createPortal } from 'react-dom';
6
- import { defineCustomElement as defineCustomElement$1 } from '@ionic/core/components/ion-accordion.js';
7
- import { defineCustomElement as defineCustomElement$2 } from '@ionic/core/components/ion-accordion-group.js';
8
- import { defineCustomElement as defineCustomElement$3 } from '@ionic/core/components/ion-avatar.js';
9
- import { defineCustomElement as defineCustomElement$4 } from '@ionic/core/components/ion-backdrop.js';
10
- import { defineCustomElement as defineCustomElement$5 } from '@ionic/core/components/ion-badge.js';
11
- import { defineCustomElement as defineCustomElement$6 } from '@ionic/core/components/ion-breadcrumbs.js';
12
- import { defineCustomElement as defineCustomElement$7 } from '@ionic/core/components/ion-buttons.js';
13
- import { defineCustomElement as defineCustomElement$8 } from '@ionic/core/components/ion-card-content.js';
14
- import { defineCustomElement as defineCustomElement$9 } from '@ionic/core/components/ion-card-header.js';
15
- import { defineCustomElement as defineCustomElement$a } from '@ionic/core/components/ion-card-subtitle.js';
16
- import { defineCustomElement as defineCustomElement$b } from '@ionic/core/components/ion-card-title.js';
17
- import { defineCustomElement as defineCustomElement$c } from '@ionic/core/components/ion-checkbox.js';
18
- import { defineCustomElement as defineCustomElement$d } from '@ionic/core/components/ion-chip.js';
19
- import { defineCustomElement as defineCustomElement$e } from '@ionic/core/components/ion-col.js';
20
- import { defineCustomElement as defineCustomElement$f } from '@ionic/core/components/ion-content.js';
21
- import { defineCustomElement as defineCustomElement$g } from '@ionic/core/components/ion-datetime.js';
22
- import { defineCustomElement as defineCustomElement$h } from '@ionic/core/components/ion-datetime-button.js';
23
- import { defineCustomElement as defineCustomElement$i } from '@ionic/core/components/ion-divider.js';
24
- import { defineCustomElement as defineCustomElement$j } from '@ionic/core/components/ion-fab.js';
25
- import { defineCustomElement as defineCustomElement$k } from '@ionic/core/components/ion-fab-list.js';
26
- import { defineCustomElement as defineCustomElement$l } from '@ionic/core/components/ion-footer.js';
27
- import { defineCustomElement as defineCustomElement$m } from '@ionic/core/components/ion-grid.js';
28
- import { defineCustomElement as defineCustomElement$n } from '@ionic/core/components/ion-header.js';
29
- import { defineCustomElement as defineCustomElement$o } from '@ionic/core/components/ion-img.js';
30
- import { defineCustomElement as defineCustomElement$p } from '@ionic/core/components/ion-infinite-scroll.js';
31
- import { defineCustomElement as defineCustomElement$q } from '@ionic/core/components/ion-infinite-scroll-content.js';
32
- import { defineCustomElement as defineCustomElement$r } from '@ionic/core/components/ion-input.js';
33
- import { defineCustomElement as defineCustomElement$s } from '@ionic/core/components/ion-input-otp.js';
34
- import { defineCustomElement as defineCustomElement$t } from '@ionic/core/components/ion-input-password-toggle.js';
35
- import { defineCustomElement as defineCustomElement$u } from '@ionic/core/components/ion-item-divider.js';
36
- import { defineCustomElement as defineCustomElement$v } from '@ionic/core/components/ion-item-group.js';
37
- import { defineCustomElement as defineCustomElement$w } from '@ionic/core/components/ion-item-options.js';
38
- import { defineCustomElement as defineCustomElement$x } from '@ionic/core/components/ion-item-sliding.js';
39
- import { defineCustomElement as defineCustomElement$y } from '@ionic/core/components/ion-label.js';
40
- import { defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-list.js';
41
- import { defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-list-header.js';
42
- import { defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-menu.js';
43
- import { defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-menu-button.js';
44
- import { defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-menu-toggle.js';
45
- import { defineCustomElement as defineCustomElement$1n } from '@ionic/core/components/ion-nav.js';
46
- import { defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-nav-link.js';
47
- import { defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-note.js';
48
- import { defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-picker.js';
49
- import { defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-picker-column.js';
50
- import { defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-picker-column-option.js';
51
- import { defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-progress-bar.js';
52
- import { defineCustomElement as defineCustomElement$K } from '@ionic/core/components/ion-radio.js';
53
- import { defineCustomElement as defineCustomElement$L } from '@ionic/core/components/ion-radio-group.js';
54
- import { defineCustomElement as defineCustomElement$M } from '@ionic/core/components/ion-range.js';
55
- import { defineCustomElement as defineCustomElement$N } from '@ionic/core/components/ion-refresher.js';
56
- import { defineCustomElement as defineCustomElement$O } from '@ionic/core/components/ion-refresher-content.js';
57
- import { defineCustomElement as defineCustomElement$P } from '@ionic/core/components/ion-reorder.js';
58
- import { defineCustomElement as defineCustomElement$Q } from '@ionic/core/components/ion-reorder-group.js';
59
- import { defineCustomElement as defineCustomElement$R } from '@ionic/core/components/ion-ripple-effect.js';
60
- import { defineCustomElement as defineCustomElement$S } from '@ionic/core/components/ion-row.js';
61
- import { defineCustomElement as defineCustomElement$T } from '@ionic/core/components/ion-searchbar.js';
62
- import { defineCustomElement as defineCustomElement$U } from '@ionic/core/components/ion-segment.js';
63
- import { defineCustomElement as defineCustomElement$V } from '@ionic/core/components/ion-segment-button.js';
64
- import { defineCustomElement as defineCustomElement$W } from '@ionic/core/components/ion-segment-content.js';
65
- import { defineCustomElement as defineCustomElement$X } from '@ionic/core/components/ion-segment-view.js';
66
- import { defineCustomElement as defineCustomElement$Y } from '@ionic/core/components/ion-select.js';
67
- import { defineCustomElement as defineCustomElement$Z } from '@ionic/core/components/ion-select-modal.js';
68
- import { defineCustomElement as defineCustomElement$_ } from '@ionic/core/components/ion-select-option.js';
69
- import { defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-skeleton-text.js';
70
- import { defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-spinner.js';
71
- import { defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-split-pane.js';
72
- import { defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-tab.js';
73
- import { defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-text.js';
74
- import { defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-textarea.js';
75
- import { defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-thumbnail.js';
76
- import { defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-title.js';
77
- import { defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-toggle.js';
78
- import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/components/ion-toolbar.js';
5
+ import { createComponent } from '@stencil/react-output-target/runtime';
6
+ import { IonAccordionGroup as IonAccordionGroup$1, defineCustomElement as defineCustomElement$2 } from '@ionic/core/components/ion-accordion-group.js';
7
+ import { IonAccordion as IonAccordion$1, defineCustomElement as defineCustomElement$1 } from '@ionic/core/components/ion-accordion.js';
8
+ import { IonAvatar as IonAvatar$1, defineCustomElement as defineCustomElement$3 } from '@ionic/core/components/ion-avatar.js';
9
+ import { IonBackdrop as IonBackdrop$1, defineCustomElement as defineCustomElement$4 } from '@ionic/core/components/ion-backdrop.js';
10
+ import { IonBadge as IonBadge$1, defineCustomElement as defineCustomElement$5 } from '@ionic/core/components/ion-badge.js';
11
+ import { IonBreadcrumbs as IonBreadcrumbs$1, defineCustomElement as defineCustomElement$6 } from '@ionic/core/components/ion-breadcrumbs.js';
12
+ import { IonButtons as IonButtons$1, defineCustomElement as defineCustomElement$7 } from '@ionic/core/components/ion-buttons.js';
13
+ import { IonCardContent as IonCardContent$1, defineCustomElement as defineCustomElement$8 } from '@ionic/core/components/ion-card-content.js';
14
+ import { IonCardHeader as IonCardHeader$1, defineCustomElement as defineCustomElement$9 } from '@ionic/core/components/ion-card-header.js';
15
+ import { IonCardSubtitle as IonCardSubtitle$1, defineCustomElement as defineCustomElement$a } from '@ionic/core/components/ion-card-subtitle.js';
16
+ import { IonCardTitle as IonCardTitle$1, defineCustomElement as defineCustomElement$b } from '@ionic/core/components/ion-card-title.js';
17
+ import { IonCheckbox as IonCheckbox$1, defineCustomElement as defineCustomElement$c } from '@ionic/core/components/ion-checkbox.js';
18
+ import { IonChip as IonChip$1, defineCustomElement as defineCustomElement$d } from '@ionic/core/components/ion-chip.js';
19
+ import { IonCol as IonCol$1, defineCustomElement as defineCustomElement$e } from '@ionic/core/components/ion-col.js';
20
+ import { IonContent as IonContent$1, defineCustomElement as defineCustomElement$f } from '@ionic/core/components/ion-content.js';
21
+ import { IonDatetimeButton as IonDatetimeButton$1, defineCustomElement as defineCustomElement$h } from '@ionic/core/components/ion-datetime-button.js';
22
+ import { IonDatetime as IonDatetime$1, defineCustomElement as defineCustomElement$g } from '@ionic/core/components/ion-datetime.js';
23
+ import { IonFabList as IonFabList$1, defineCustomElement as defineCustomElement$j } from '@ionic/core/components/ion-fab-list.js';
24
+ import { IonFab as IonFab$1, defineCustomElement as defineCustomElement$i } from '@ionic/core/components/ion-fab.js';
25
+ import { IonFooter as IonFooter$1, defineCustomElement as defineCustomElement$k } from '@ionic/core/components/ion-footer.js';
26
+ import { IonGrid as IonGrid$1, defineCustomElement as defineCustomElement$l } from '@ionic/core/components/ion-grid.js';
27
+ import { IonHeader as IonHeader$1, defineCustomElement as defineCustomElement$m } from '@ionic/core/components/ion-header.js';
28
+ import { IonImg as IonImg$1, defineCustomElement as defineCustomElement$n } from '@ionic/core/components/ion-img.js';
29
+ import { IonInfiniteScrollContent as IonInfiniteScrollContent$1, defineCustomElement as defineCustomElement$p } from '@ionic/core/components/ion-infinite-scroll-content.js';
30
+ import { IonInfiniteScroll as IonInfiniteScroll$1, defineCustomElement as defineCustomElement$o } from '@ionic/core/components/ion-infinite-scroll.js';
31
+ import { IonInputOtp as IonInputOtp$1, defineCustomElement as defineCustomElement$r } from '@ionic/core/components/ion-input-otp.js';
32
+ import { IonInputPasswordToggle as IonInputPasswordToggle$1, defineCustomElement as defineCustomElement$s } from '@ionic/core/components/ion-input-password-toggle.js';
33
+ import { IonInput as IonInput$1, defineCustomElement as defineCustomElement$q } from '@ionic/core/components/ion-input.js';
34
+ import { IonItemDivider as IonItemDivider$1, defineCustomElement as defineCustomElement$t } from '@ionic/core/components/ion-item-divider.js';
35
+ import { IonItemGroup as IonItemGroup$1, defineCustomElement as defineCustomElement$u } from '@ionic/core/components/ion-item-group.js';
36
+ import { IonItemOptions as IonItemOptions$1, defineCustomElement as defineCustomElement$v } from '@ionic/core/components/ion-item-options.js';
37
+ import { IonItemSliding as IonItemSliding$1, defineCustomElement as defineCustomElement$w } from '@ionic/core/components/ion-item-sliding.js';
38
+ import { IonLabel as IonLabel$1, defineCustomElement as defineCustomElement$x } from '@ionic/core/components/ion-label.js';
39
+ import { IonListHeader as IonListHeader$1, defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-list-header.js';
40
+ import { IonList as IonList$1, defineCustomElement as defineCustomElement$y } from '@ionic/core/components/ion-list.js';
41
+ import { IonMenuButton as IonMenuButton$1, defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-menu-button.js';
42
+ import { IonMenuToggle as IonMenuToggle$1, defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-menu-toggle.js';
43
+ import { IonMenu as IonMenu$1, defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-menu.js';
44
+ import { IonNavLink as IonNavLink$1, defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-nav-link.js';
45
+ import { defineCustomElement as defineCustomElement$1m } from '@ionic/core/components/ion-nav.js';
46
+ import { IonNote as IonNote$1, defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-note.js';
47
+ import { IonPickerColumnOption as IonPickerColumnOption$1, defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-picker-column-option.js';
48
+ import { IonPickerColumn as IonPickerColumn$1, defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-picker-column.js';
49
+ import { IonPicker as IonPicker$1, defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-picker.js';
50
+ import { IonProgressBar as IonProgressBar$1, defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-progress-bar.js';
51
+ import { IonRadioGroup as IonRadioGroup$1, defineCustomElement as defineCustomElement$K } from '@ionic/core/components/ion-radio-group.js';
52
+ import { IonRadio as IonRadio$1, defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-radio.js';
53
+ import { IonRange as IonRange$1, defineCustomElement as defineCustomElement$L } from '@ionic/core/components/ion-range.js';
54
+ import { IonRefresherContent as IonRefresherContent$1, defineCustomElement as defineCustomElement$N } from '@ionic/core/components/ion-refresher-content.js';
55
+ import { IonRefresher as IonRefresher$1, defineCustomElement as defineCustomElement$M } from '@ionic/core/components/ion-refresher.js';
56
+ import { IonReorderGroup as IonReorderGroup$1, defineCustomElement as defineCustomElement$P } from '@ionic/core/components/ion-reorder-group.js';
57
+ import { IonReorder as IonReorder$1, defineCustomElement as defineCustomElement$O } from '@ionic/core/components/ion-reorder.js';
58
+ import { IonRippleEffect as IonRippleEffect$1, defineCustomElement as defineCustomElement$Q } from '@ionic/core/components/ion-ripple-effect.js';
59
+ import { IonRow as IonRow$1, defineCustomElement as defineCustomElement$R } from '@ionic/core/components/ion-row.js';
60
+ import { IonSearchbar as IonSearchbar$1, defineCustomElement as defineCustomElement$S } from '@ionic/core/components/ion-searchbar.js';
61
+ import { IonSegmentButton as IonSegmentButton$1, defineCustomElement as defineCustomElement$U } from '@ionic/core/components/ion-segment-button.js';
62
+ import { IonSegmentContent as IonSegmentContent$1, defineCustomElement as defineCustomElement$V } from '@ionic/core/components/ion-segment-content.js';
63
+ import { IonSegmentView as IonSegmentView$1, defineCustomElement as defineCustomElement$W } from '@ionic/core/components/ion-segment-view.js';
64
+ import { IonSegment as IonSegment$1, defineCustomElement as defineCustomElement$T } from '@ionic/core/components/ion-segment.js';
65
+ import { IonSelectModal as IonSelectModal$1, defineCustomElement as defineCustomElement$Y } from '@ionic/core/components/ion-select-modal.js';
66
+ import { IonSelectOption as IonSelectOption$1, defineCustomElement as defineCustomElement$Z } from '@ionic/core/components/ion-select-option.js';
67
+ import { IonSelect as IonSelect$1, defineCustomElement as defineCustomElement$X } from '@ionic/core/components/ion-select.js';
68
+ import { IonSkeletonText as IonSkeletonText$1, defineCustomElement as defineCustomElement$_ } from '@ionic/core/components/ion-skeleton-text.js';
69
+ import { IonSpinner as IonSpinner$1, defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-spinner.js';
70
+ import { IonSplitPane as IonSplitPane$1, defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-split-pane.js';
71
+ import { IonTab as IonTab$1, defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-tab.js';
72
+ import { IonText as IonText$1, defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-text.js';
73
+ import { IonTextarea as IonTextarea$1, defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-textarea.js';
74
+ import { IonThumbnail as IonThumbnail$1, defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-thumbnail.js';
75
+ import { IonTitle as IonTitle$1, defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-title.js';
76
+ import { IonToggle as IonToggle$1, defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-toggle.js';
77
+ import { IonToolbar as IonToolbar$1, defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-toolbar.js';
79
78
  import { IonBreadcrumb as IonBreadcrumb$1 } from '@ionic/core/components/ion-breadcrumb.js';
80
79
  import { IonButton as IonButton$1 } from '@ionic/core/components/ion-button.js';
81
80
  import { IonCard as IonCard$1 } from '@ionic/core/components/ion-card.js';
@@ -83,20 +82,21 @@ import { IonFabButton as IonFabButton$1 } from '@ionic/core/components/ion-fab-b
83
82
  import { IonItemOption as IonItemOption$1 } from '@ionic/core/components/ion-item-option.js';
84
83
  import { IonItem as IonItem$1 } from '@ionic/core/components/ion-item.js';
85
84
  import { IonRouterLink as IonRouterLink$1 } from '@ionic/core/components/ion-router-link.js';
86
- import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-alert.js';
87
- import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/components/ion-loading.js';
88
- import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-toast.js';
89
- import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-picker-legacy.js';
90
- import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-action-sheet.js';
91
- import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-modal.js';
92
- import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-popover.js';
93
- import { defineCustomElement as defineCustomElement$1l } from '@ionic/core/components/ion-app.js';
94
- import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-back-button.js';
95
- import { defineCustomElement as defineCustomElement$1k } from '@ionic/core/components/ion-router-outlet.js';
96
- import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-tab-bar.js';
97
- import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-tab-button.js';
98
- import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-tabs.js';
99
- import { defineCustomElement as defineCustomElement$1m } from 'ionicons/components/ion-icon.js';
85
+ import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/components/ion-alert.js';
86
+ import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-loading.js';
87
+ import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/components/ion-toast.js';
88
+ import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-picker-legacy.js';
89
+ import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-action-sheet.js';
90
+ import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-modal.js';
91
+ import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-popover.js';
92
+ import ReactDOM, { createPortal } from 'react-dom';
93
+ import { defineCustomElement as defineCustomElement$1k } from '@ionic/core/components/ion-app.js';
94
+ import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-back-button.js';
95
+ import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-router-outlet.js';
96
+ import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-tab-bar.js';
97
+ import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-tab-button.js';
98
+ import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-tabs.js';
99
+ import { defineCustomElement as defineCustomElement$1l } from 'ionicons/components/ion-icon.js';
100
100
 
101
101
  const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
102
102
  onIonViewWillEnter: () => {
@@ -415,6 +415,699 @@ const NavContext = /*@__PURE__*/ React.createContext({
415
415
  },
416
416
  });
417
417
 
418
+ const IonAccordion =
419
+ /*@__PURE__*/ createComponent({
420
+ tagName: 'ion-accordion',
421
+ elementClass: IonAccordion$1,
422
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
423
+ react: React,
424
+ events: {},
425
+ defineCustomElement: defineCustomElement$1,
426
+ });
427
+ const IonAccordionGroup = /*@__PURE__*/ createComponent({
428
+ tagName: 'ion-accordion-group',
429
+ elementClass: IonAccordionGroup$1,
430
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
431
+ react: React,
432
+ events: { onIonChange: 'ionChange' },
433
+ defineCustomElement: defineCustomElement$2,
434
+ });
435
+ const IonAvatar =
436
+ /*@__PURE__*/ createComponent({
437
+ tagName: 'ion-avatar',
438
+ elementClass: IonAvatar$1,
439
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
440
+ react: React,
441
+ events: {},
442
+ defineCustomElement: defineCustomElement$3,
443
+ });
444
+ const IonBackdrop =
445
+ /*@__PURE__*/ createComponent({
446
+ tagName: 'ion-backdrop',
447
+ elementClass: IonBackdrop$1,
448
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
449
+ react: React,
450
+ events: { onIonBackdropTap: 'ionBackdropTap' },
451
+ defineCustomElement: defineCustomElement$4,
452
+ });
453
+ const IonBadge =
454
+ /*@__PURE__*/ createComponent({
455
+ tagName: 'ion-badge',
456
+ elementClass: IonBadge$1,
457
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
458
+ react: React,
459
+ events: {},
460
+ defineCustomElement: defineCustomElement$5,
461
+ });
462
+ const IonBreadcrumbs = /*@__PURE__*/ createComponent({
463
+ tagName: 'ion-breadcrumbs',
464
+ elementClass: IonBreadcrumbs$1,
465
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
466
+ react: React,
467
+ events: { onIonCollapsedClick: 'ionCollapsedClick' },
468
+ defineCustomElement: defineCustomElement$6,
469
+ });
470
+ const IonButtons =
471
+ /*@__PURE__*/ createComponent({
472
+ tagName: 'ion-buttons',
473
+ elementClass: IonButtons$1,
474
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
475
+ react: React,
476
+ events: {},
477
+ defineCustomElement: defineCustomElement$7,
478
+ });
479
+ const IonCardContent = /*@__PURE__*/ createComponent({
480
+ tagName: 'ion-card-content',
481
+ elementClass: IonCardContent$1,
482
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
483
+ react: React,
484
+ events: {},
485
+ defineCustomElement: defineCustomElement$8,
486
+ });
487
+ const IonCardHeader =
488
+ /*@__PURE__*/ createComponent({
489
+ tagName: 'ion-card-header',
490
+ elementClass: IonCardHeader$1,
491
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
492
+ react: React,
493
+ events: {},
494
+ defineCustomElement: defineCustomElement$9,
495
+ });
496
+ const IonCardSubtitle = /*@__PURE__*/ createComponent({
497
+ tagName: 'ion-card-subtitle',
498
+ elementClass: IonCardSubtitle$1,
499
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
500
+ react: React,
501
+ events: {},
502
+ defineCustomElement: defineCustomElement$a,
503
+ });
504
+ const IonCardTitle =
505
+ /*@__PURE__*/ createComponent({
506
+ tagName: 'ion-card-title',
507
+ elementClass: IonCardTitle$1,
508
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
509
+ react: React,
510
+ events: {},
511
+ defineCustomElement: defineCustomElement$b,
512
+ });
513
+ const IonCheckbox =
514
+ /*@__PURE__*/ createComponent({
515
+ tagName: 'ion-checkbox',
516
+ elementClass: IonCheckbox$1,
517
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
518
+ react: React,
519
+ events: {
520
+ onIonChange: 'ionChange',
521
+ onIonFocus: 'ionFocus',
522
+ onIonBlur: 'ionBlur',
523
+ },
524
+ defineCustomElement: defineCustomElement$c,
525
+ });
526
+ const IonChip =
527
+ /*@__PURE__*/ createComponent({
528
+ tagName: 'ion-chip',
529
+ elementClass: IonChip$1,
530
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
531
+ react: React,
532
+ events: {},
533
+ defineCustomElement: defineCustomElement$d,
534
+ });
535
+ const IonCol =
536
+ /*@__PURE__*/ createComponent({
537
+ tagName: 'ion-col',
538
+ elementClass: IonCol$1,
539
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
540
+ react: React,
541
+ events: {},
542
+ defineCustomElement: defineCustomElement$e,
543
+ });
544
+ const IonContent =
545
+ /*@__PURE__*/ createComponent({
546
+ tagName: 'ion-content',
547
+ elementClass: IonContent$1,
548
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
549
+ react: React,
550
+ events: {
551
+ onIonScrollStart: 'ionScrollStart',
552
+ onIonScroll: 'ionScroll',
553
+ onIonScrollEnd: 'ionScrollEnd',
554
+ },
555
+ defineCustomElement: defineCustomElement$f,
556
+ });
557
+ const IonDatetime =
558
+ /*@__PURE__*/ createComponent({
559
+ tagName: 'ion-datetime',
560
+ elementClass: IonDatetime$1,
561
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
562
+ react: React,
563
+ events: {
564
+ onIonCancel: 'ionCancel',
565
+ onIonChange: 'ionChange',
566
+ onIonFocus: 'ionFocus',
567
+ onIonBlur: 'ionBlur',
568
+ },
569
+ defineCustomElement: defineCustomElement$g,
570
+ });
571
+ const IonDatetimeButton = /*@__PURE__*/ createComponent({
572
+ tagName: 'ion-datetime-button',
573
+ elementClass: IonDatetimeButton$1,
574
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
575
+ react: React,
576
+ events: {},
577
+ defineCustomElement: defineCustomElement$h,
578
+ });
579
+ const IonFab =
580
+ /*@__PURE__*/ createComponent({
581
+ tagName: 'ion-fab',
582
+ elementClass: IonFab$1,
583
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
584
+ react: React,
585
+ events: {},
586
+ defineCustomElement: defineCustomElement$i,
587
+ });
588
+ const IonFabList =
589
+ /*@__PURE__*/ createComponent({
590
+ tagName: 'ion-fab-list',
591
+ elementClass: IonFabList$1,
592
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
593
+ react: React,
594
+ events: {},
595
+ defineCustomElement: defineCustomElement$j,
596
+ });
597
+ const IonFooter =
598
+ /*@__PURE__*/ createComponent({
599
+ tagName: 'ion-footer',
600
+ elementClass: IonFooter$1,
601
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
602
+ react: React,
603
+ events: {},
604
+ defineCustomElement: defineCustomElement$k,
605
+ });
606
+ const IonGrid =
607
+ /*@__PURE__*/ createComponent({
608
+ tagName: 'ion-grid',
609
+ elementClass: IonGrid$1,
610
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
611
+ react: React,
612
+ events: {},
613
+ defineCustomElement: defineCustomElement$l,
614
+ });
615
+ const IonHeader =
616
+ /*@__PURE__*/ createComponent({
617
+ tagName: 'ion-header',
618
+ elementClass: IonHeader$1,
619
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
620
+ react: React,
621
+ events: {},
622
+ defineCustomElement: defineCustomElement$m,
623
+ });
624
+ const IonImg =
625
+ /*@__PURE__*/ createComponent({
626
+ tagName: 'ion-img',
627
+ elementClass: IonImg$1,
628
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
629
+ react: React,
630
+ events: {
631
+ onIonImgWillLoad: 'ionImgWillLoad',
632
+ onIonImgDidLoad: 'ionImgDidLoad',
633
+ onIonError: 'ionError',
634
+ },
635
+ defineCustomElement: defineCustomElement$n,
636
+ });
637
+ const IonInfiniteScroll = /*@__PURE__*/ createComponent({
638
+ tagName: 'ion-infinite-scroll',
639
+ elementClass: IonInfiniteScroll$1,
640
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
641
+ react: React,
642
+ events: { onIonInfinite: 'ionInfinite' },
643
+ defineCustomElement: defineCustomElement$o,
644
+ });
645
+ const IonInfiniteScrollContent = /*@__PURE__*/ createComponent({
646
+ tagName: 'ion-infinite-scroll-content',
647
+ elementClass: IonInfiniteScrollContent$1,
648
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
649
+ react: React,
650
+ events: {},
651
+ defineCustomElement: defineCustomElement$p,
652
+ });
653
+ const IonInput =
654
+ /*@__PURE__*/ createComponent({
655
+ tagName: 'ion-input',
656
+ elementClass: IonInput$1,
657
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
658
+ react: React,
659
+ events: {
660
+ onIonInput: 'ionInput',
661
+ onIonChange: 'ionChange',
662
+ onIonBlur: 'ionBlur',
663
+ onIonFocus: 'ionFocus',
664
+ },
665
+ defineCustomElement: defineCustomElement$q,
666
+ });
667
+ const IonInputOtp =
668
+ /*@__PURE__*/ createComponent({
669
+ tagName: 'ion-input-otp',
670
+ elementClass: IonInputOtp$1,
671
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
672
+ react: React,
673
+ events: {
674
+ onIonInput: 'ionInput',
675
+ onIonChange: 'ionChange',
676
+ onIonComplete: 'ionComplete',
677
+ onIonBlur: 'ionBlur',
678
+ onIonFocus: 'ionFocus',
679
+ },
680
+ defineCustomElement: defineCustomElement$r,
681
+ });
682
+ const IonInputPasswordToggle = /*@__PURE__*/ createComponent({
683
+ tagName: 'ion-input-password-toggle',
684
+ elementClass: IonInputPasswordToggle$1,
685
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
686
+ react: React,
687
+ events: {},
688
+ defineCustomElement: defineCustomElement$s,
689
+ });
690
+ const IonItemDivider = /*@__PURE__*/ createComponent({
691
+ tagName: 'ion-item-divider',
692
+ elementClass: IonItemDivider$1,
693
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
694
+ react: React,
695
+ events: {},
696
+ defineCustomElement: defineCustomElement$t,
697
+ });
698
+ const IonItemGroup =
699
+ /*@__PURE__*/ createComponent({
700
+ tagName: 'ion-item-group',
701
+ elementClass: IonItemGroup$1,
702
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
703
+ react: React,
704
+ events: {},
705
+ defineCustomElement: defineCustomElement$u,
706
+ });
707
+ const IonItemOptions = /*@__PURE__*/ createComponent({
708
+ tagName: 'ion-item-options',
709
+ elementClass: IonItemOptions$1,
710
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
711
+ react: React,
712
+ events: { onIonSwipe: 'ionSwipe' },
713
+ defineCustomElement: defineCustomElement$v,
714
+ });
715
+ const IonItemSliding = /*@__PURE__*/ createComponent({
716
+ tagName: 'ion-item-sliding',
717
+ elementClass: IonItemSliding$1,
718
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
719
+ react: React,
720
+ events: { onIonDrag: 'ionDrag' },
721
+ defineCustomElement: defineCustomElement$w,
722
+ });
723
+ const IonLabel =
724
+ /*@__PURE__*/ createComponent({
725
+ tagName: 'ion-label',
726
+ elementClass: IonLabel$1,
727
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
728
+ react: React,
729
+ events: {},
730
+ defineCustomElement: defineCustomElement$x,
731
+ });
732
+ const IonList =
733
+ /*@__PURE__*/ createComponent({
734
+ tagName: 'ion-list',
735
+ elementClass: IonList$1,
736
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
737
+ react: React,
738
+ events: {},
739
+ defineCustomElement: defineCustomElement$y,
740
+ });
741
+ const IonListHeader =
742
+ /*@__PURE__*/ createComponent({
743
+ tagName: 'ion-list-header',
744
+ elementClass: IonListHeader$1,
745
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
746
+ react: React,
747
+ events: {},
748
+ defineCustomElement: defineCustomElement$z,
749
+ });
750
+ const IonMenu =
751
+ /*@__PURE__*/ createComponent({
752
+ tagName: 'ion-menu',
753
+ elementClass: IonMenu$1,
754
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
755
+ react: React,
756
+ events: {
757
+ onIonWillOpen: 'ionWillOpen',
758
+ onIonWillClose: 'ionWillClose',
759
+ onIonDidOpen: 'ionDidOpen',
760
+ onIonDidClose: 'ionDidClose',
761
+ },
762
+ defineCustomElement: defineCustomElement$A,
763
+ });
764
+ const IonMenuButton =
765
+ /*@__PURE__*/ createComponent({
766
+ tagName: 'ion-menu-button',
767
+ elementClass: IonMenuButton$1,
768
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
769
+ react: React,
770
+ events: {},
771
+ defineCustomElement: defineCustomElement$B,
772
+ });
773
+ const IonMenuToggle =
774
+ /*@__PURE__*/ createComponent({
775
+ tagName: 'ion-menu-toggle',
776
+ elementClass: IonMenuToggle$1,
777
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
778
+ react: React,
779
+ events: {},
780
+ defineCustomElement: defineCustomElement$C,
781
+ });
782
+ const IonNavLink =
783
+ /*@__PURE__*/ createComponent({
784
+ tagName: 'ion-nav-link',
785
+ elementClass: IonNavLink$1,
786
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
787
+ react: React,
788
+ events: {},
789
+ defineCustomElement: defineCustomElement$D,
790
+ });
791
+ const IonNote =
792
+ /*@__PURE__*/ createComponent({
793
+ tagName: 'ion-note',
794
+ elementClass: IonNote$1,
795
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
796
+ react: React,
797
+ events: {},
798
+ defineCustomElement: defineCustomElement$E,
799
+ });
800
+ const IonPicker =
801
+ /*@__PURE__*/ createComponent({
802
+ tagName: 'ion-picker',
803
+ elementClass: IonPicker$1,
804
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
805
+ react: React,
806
+ events: {},
807
+ defineCustomElement: defineCustomElement$F,
808
+ });
809
+ const IonPickerColumn = /*@__PURE__*/ createComponent({
810
+ tagName: 'ion-picker-column',
811
+ elementClass: IonPickerColumn$1,
812
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
813
+ react: React,
814
+ events: { onIonChange: 'ionChange' },
815
+ defineCustomElement: defineCustomElement$G,
816
+ });
817
+ const IonPickerColumnOption = /*@__PURE__*/ createComponent({
818
+ tagName: 'ion-picker-column-option',
819
+ elementClass: IonPickerColumnOption$1,
820
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
821
+ react: React,
822
+ events: {},
823
+ defineCustomElement: defineCustomElement$H,
824
+ });
825
+ const IonProgressBar = /*@__PURE__*/ createComponent({
826
+ tagName: 'ion-progress-bar',
827
+ elementClass: IonProgressBar$1,
828
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
829
+ react: React,
830
+ events: {},
831
+ defineCustomElement: defineCustomElement$I,
832
+ });
833
+ const IonRadio =
834
+ /*@__PURE__*/ createComponent({
835
+ tagName: 'ion-radio',
836
+ elementClass: IonRadio$1,
837
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
838
+ react: React,
839
+ events: {
840
+ onIonFocus: 'ionFocus',
841
+ onIonBlur: 'ionBlur',
842
+ },
843
+ defineCustomElement: defineCustomElement$J,
844
+ });
845
+ const IonRadioGroup =
846
+ /*@__PURE__*/ createComponent({
847
+ tagName: 'ion-radio-group',
848
+ elementClass: IonRadioGroup$1,
849
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
850
+ react: React,
851
+ events: { onIonChange: 'ionChange' },
852
+ defineCustomElement: defineCustomElement$K,
853
+ });
854
+ const IonRange =
855
+ /*@__PURE__*/ createComponent({
856
+ tagName: 'ion-range',
857
+ elementClass: IonRange$1,
858
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
859
+ react: React,
860
+ events: {
861
+ onIonChange: 'ionChange',
862
+ onIonInput: 'ionInput',
863
+ onIonFocus: 'ionFocus',
864
+ onIonBlur: 'ionBlur',
865
+ onIonKnobMoveStart: 'ionKnobMoveStart',
866
+ onIonKnobMoveEnd: 'ionKnobMoveEnd',
867
+ },
868
+ defineCustomElement: defineCustomElement$L,
869
+ });
870
+ const IonRefresher =
871
+ /*@__PURE__*/ createComponent({
872
+ tagName: 'ion-refresher',
873
+ elementClass: IonRefresher$1,
874
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
875
+ react: React,
876
+ events: {
877
+ onIonRefresh: 'ionRefresh',
878
+ onIonPull: 'ionPull',
879
+ onIonStart: 'ionStart',
880
+ onIonPullStart: 'ionPullStart',
881
+ onIonPullEnd: 'ionPullEnd',
882
+ },
883
+ defineCustomElement: defineCustomElement$M,
884
+ });
885
+ const IonRefresherContent = /*@__PURE__*/ createComponent({
886
+ tagName: 'ion-refresher-content',
887
+ elementClass: IonRefresherContent$1,
888
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
889
+ react: React,
890
+ events: {},
891
+ defineCustomElement: defineCustomElement$N,
892
+ });
893
+ const IonReorder =
894
+ /*@__PURE__*/ createComponent({
895
+ tagName: 'ion-reorder',
896
+ elementClass: IonReorder$1,
897
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
898
+ react: React,
899
+ events: {},
900
+ defineCustomElement: defineCustomElement$O,
901
+ });
902
+ const IonReorderGroup = /*@__PURE__*/ createComponent({
903
+ tagName: 'ion-reorder-group',
904
+ elementClass: IonReorderGroup$1,
905
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
906
+ react: React,
907
+ events: {
908
+ onIonItemReorder: 'ionItemReorder',
909
+ onIonReorderStart: 'ionReorderStart',
910
+ onIonReorderMove: 'ionReorderMove',
911
+ onIonReorderEnd: 'ionReorderEnd',
912
+ },
913
+ defineCustomElement: defineCustomElement$P,
914
+ });
915
+ const IonRippleEffect = /*@__PURE__*/ createComponent({
916
+ tagName: 'ion-ripple-effect',
917
+ elementClass: IonRippleEffect$1,
918
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
919
+ react: React,
920
+ events: {},
921
+ defineCustomElement: defineCustomElement$Q,
922
+ });
923
+ const IonRow =
924
+ /*@__PURE__*/ createComponent({
925
+ tagName: 'ion-row',
926
+ elementClass: IonRow$1,
927
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
928
+ react: React,
929
+ events: {},
930
+ defineCustomElement: defineCustomElement$R,
931
+ });
932
+ const IonSearchbar =
933
+ /*@__PURE__*/ createComponent({
934
+ tagName: 'ion-searchbar',
935
+ elementClass: IonSearchbar$1,
936
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
937
+ react: React,
938
+ events: {
939
+ onIonInput: 'ionInput',
940
+ onIonChange: 'ionChange',
941
+ onIonCancel: 'ionCancel',
942
+ onIonClear: 'ionClear',
943
+ onIonBlur: 'ionBlur',
944
+ onIonFocus: 'ionFocus',
945
+ },
946
+ defineCustomElement: defineCustomElement$S,
947
+ });
948
+ const IonSegment =
949
+ /*@__PURE__*/ createComponent({
950
+ tagName: 'ion-segment',
951
+ elementClass: IonSegment$1,
952
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
953
+ react: React,
954
+ events: { onIonChange: 'ionChange' },
955
+ defineCustomElement: defineCustomElement$T,
956
+ });
957
+ const IonSegmentButton = /*@__PURE__*/ createComponent({
958
+ tagName: 'ion-segment-button',
959
+ elementClass: IonSegmentButton$1,
960
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
961
+ react: React,
962
+ events: {},
963
+ defineCustomElement: defineCustomElement$U,
964
+ });
965
+ const IonSegmentContent = /*@__PURE__*/ createComponent({
966
+ tagName: 'ion-segment-content',
967
+ elementClass: IonSegmentContent$1,
968
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
969
+ react: React,
970
+ events: {},
971
+ defineCustomElement: defineCustomElement$V,
972
+ });
973
+ const IonSegmentView = /*@__PURE__*/ createComponent({
974
+ tagName: 'ion-segment-view',
975
+ elementClass: IonSegmentView$1,
976
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
977
+ react: React,
978
+ events: { onIonSegmentViewScroll: 'ionSegmentViewScroll' },
979
+ defineCustomElement: defineCustomElement$W,
980
+ });
981
+ const IonSelect =
982
+ /*@__PURE__*/ createComponent({
983
+ tagName: 'ion-select',
984
+ elementClass: IonSelect$1,
985
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
986
+ react: React,
987
+ events: {
988
+ onIonChange: 'ionChange',
989
+ onIonCancel: 'ionCancel',
990
+ onIonDismiss: 'ionDismiss',
991
+ onIonFocus: 'ionFocus',
992
+ onIonBlur: 'ionBlur',
993
+ },
994
+ defineCustomElement: defineCustomElement$X,
995
+ });
996
+ const IonSelectModal = /*@__PURE__*/ createComponent({
997
+ tagName: 'ion-select-modal',
998
+ elementClass: IonSelectModal$1,
999
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1000
+ react: React,
1001
+ events: {},
1002
+ defineCustomElement: defineCustomElement$Y,
1003
+ });
1004
+ const IonSelectOption = /*@__PURE__*/ createComponent({
1005
+ tagName: 'ion-select-option',
1006
+ elementClass: IonSelectOption$1,
1007
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1008
+ react: React,
1009
+ events: {},
1010
+ defineCustomElement: defineCustomElement$Z,
1011
+ });
1012
+ const IonSkeletonText = /*@__PURE__*/ createComponent({
1013
+ tagName: 'ion-skeleton-text',
1014
+ elementClass: IonSkeletonText$1,
1015
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1016
+ react: React,
1017
+ events: {},
1018
+ defineCustomElement: defineCustomElement$_,
1019
+ });
1020
+ const IonSpinner =
1021
+ /*@__PURE__*/ createComponent({
1022
+ tagName: 'ion-spinner',
1023
+ elementClass: IonSpinner$1,
1024
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1025
+ react: React,
1026
+ events: {},
1027
+ defineCustomElement: defineCustomElement$$,
1028
+ });
1029
+ const IonSplitPane =
1030
+ /*@__PURE__*/ createComponent({
1031
+ tagName: 'ion-split-pane',
1032
+ elementClass: IonSplitPane$1,
1033
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1034
+ react: React,
1035
+ events: { onIonSplitPaneVisible: 'ionSplitPaneVisible' },
1036
+ defineCustomElement: defineCustomElement$10,
1037
+ });
1038
+ const IonTab =
1039
+ /*@__PURE__*/ createComponent({
1040
+ tagName: 'ion-tab',
1041
+ elementClass: IonTab$1,
1042
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1043
+ react: React,
1044
+ events: {},
1045
+ defineCustomElement: defineCustomElement$11,
1046
+ });
1047
+ const IonText =
1048
+ /*@__PURE__*/ createComponent({
1049
+ tagName: 'ion-text',
1050
+ elementClass: IonText$1,
1051
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1052
+ react: React,
1053
+ events: {},
1054
+ defineCustomElement: defineCustomElement$12,
1055
+ });
1056
+ const IonTextarea =
1057
+ /*@__PURE__*/ createComponent({
1058
+ tagName: 'ion-textarea',
1059
+ elementClass: IonTextarea$1,
1060
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1061
+ react: React,
1062
+ events: {
1063
+ onIonChange: 'ionChange',
1064
+ onIonInput: 'ionInput',
1065
+ onIonBlur: 'ionBlur',
1066
+ onIonFocus: 'ionFocus',
1067
+ },
1068
+ defineCustomElement: defineCustomElement$13,
1069
+ });
1070
+ const IonThumbnail =
1071
+ /*@__PURE__*/ createComponent({
1072
+ tagName: 'ion-thumbnail',
1073
+ elementClass: IonThumbnail$1,
1074
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1075
+ react: React,
1076
+ events: {},
1077
+ defineCustomElement: defineCustomElement$14,
1078
+ });
1079
+ const IonTitle =
1080
+ /*@__PURE__*/ createComponent({
1081
+ tagName: 'ion-title',
1082
+ elementClass: IonTitle$1,
1083
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1084
+ react: React,
1085
+ events: {},
1086
+ defineCustomElement: defineCustomElement$15,
1087
+ });
1088
+ const IonToggle =
1089
+ /*@__PURE__*/ createComponent({
1090
+ tagName: 'ion-toggle',
1091
+ elementClass: IonToggle$1,
1092
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1093
+ react: React,
1094
+ events: {
1095
+ onIonChange: 'ionChange',
1096
+ onIonFocus: 'ionFocus',
1097
+ onIonBlur: 'ionBlur',
1098
+ },
1099
+ defineCustomElement: defineCustomElement$16,
1100
+ });
1101
+ const IonToolbar =
1102
+ /*@__PURE__*/ createComponent({
1103
+ tagName: 'ion-toolbar',
1104
+ elementClass: IonToolbar$1,
1105
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1106
+ react: React,
1107
+ events: {},
1108
+ defineCustomElement: defineCustomElement$17,
1109
+ });
1110
+
418
1111
  const dashToPascalCase = (str) => str
419
1112
  .toLowerCase()
420
1113
  .split('-')
@@ -558,148 +1251,6 @@ const defineCustomElement = (tagName, customElement) => {
558
1251
  }
559
1252
  };
560
1253
 
561
- const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
562
- if (defineCustomElement !== undefined) {
563
- defineCustomElement();
564
- }
565
- const displayName = dashToPascalCase(tagName);
566
- const ReactComponent = class extends React.Component {
567
- constructor(props) {
568
- super(props);
569
- this.setComponentElRef = (element) => {
570
- this.componentEl = element;
571
- };
572
- }
573
- componentDidMount() {
574
- this.componentDidUpdate(this.props);
575
- }
576
- componentDidUpdate(prevProps) {
577
- attachProps(this.componentEl, this.props, prevProps);
578
- }
579
- render() {
580
- const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
581
- let propsToPass = Object.keys(cProps).reduce((acc, name) => {
582
- const value = cProps[name];
583
- if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
584
- const eventName = name.substring(2).toLowerCase();
585
- if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
586
- acc[name] = value;
587
- }
588
- }
589
- else {
590
- // we should only render strings, booleans, and numbers as attrs in html.
591
- // objects, functions, arrays etc get synced via properties on mount.
592
- const type = typeof value;
593
- if (type === 'string' || type === 'boolean' || type === 'number') {
594
- acc[camelToDashCase(name)] = value;
595
- }
596
- }
597
- return acc;
598
- }, {});
599
- if (manipulatePropsFunction) {
600
- propsToPass = manipulatePropsFunction(this.props, propsToPass);
601
- }
602
- const newProps = {
603
- ...propsToPass,
604
- ref: mergeRefs(forwardedRef, this.setComponentElRef),
605
- style,
606
- };
607
- /**
608
- * We use createElement here instead of
609
- * React.createElement to work around a
610
- * bug in Vite (https://github.com/vitejs/vite/issues/6104).
611
- * React.createElement causes all elements to be rendered
612
- * as <tagname> instead of the actual Web Component.
613
- */
614
- return createElement(tagName, newProps, children);
615
- }
616
- static get displayName() {
617
- return displayName;
618
- }
619
- };
620
- // If context was passed to createReactComponent then conditionally add it to the Component Class
621
- if (ReactComponentContext) {
622
- ReactComponent.contextType = ReactComponentContext;
623
- }
624
- return createForwardRef$1(ReactComponent, displayName);
625
- };
626
-
627
- /* eslint-disable */
628
- /* tslint:disable */
629
- /* auto-generated react proxies */
630
- const IonAccordion = /*@__PURE__*/ createReactComponent('ion-accordion', undefined, undefined, defineCustomElement$1);
631
- const IonAccordionGroup = /*@__PURE__*/ createReactComponent('ion-accordion-group', undefined, undefined, defineCustomElement$2);
632
- const IonAvatar = /*@__PURE__*/ createReactComponent('ion-avatar', undefined, undefined, defineCustomElement$3);
633
- const IonBackdrop = /*@__PURE__*/ createReactComponent('ion-backdrop', undefined, undefined, defineCustomElement$4);
634
- const IonBadge = /*@__PURE__*/ createReactComponent('ion-badge', undefined, undefined, defineCustomElement$5);
635
- const IonBreadcrumbs = /*@__PURE__*/ createReactComponent('ion-breadcrumbs', undefined, undefined, defineCustomElement$6);
636
- const IonButtons = /*@__PURE__*/ createReactComponent('ion-buttons', undefined, undefined, defineCustomElement$7);
637
- const IonCardContent = /*@__PURE__*/ createReactComponent('ion-card-content', undefined, undefined, defineCustomElement$8);
638
- const IonCardHeader = /*@__PURE__*/ createReactComponent('ion-card-header', undefined, undefined, defineCustomElement$9);
639
- const IonCardSubtitle = /*@__PURE__*/ createReactComponent('ion-card-subtitle', undefined, undefined, defineCustomElement$a);
640
- const IonCardTitle = /*@__PURE__*/ createReactComponent('ion-card-title', undefined, undefined, defineCustomElement$b);
641
- const IonCheckbox = /*@__PURE__*/ createReactComponent('ion-checkbox', undefined, undefined, defineCustomElement$c);
642
- const IonChip = /*@__PURE__*/ createReactComponent('ion-chip', undefined, undefined, defineCustomElement$d);
643
- const IonCol = /*@__PURE__*/ createReactComponent('ion-col', undefined, undefined, defineCustomElement$e);
644
- const IonContent = /*@__PURE__*/ createReactComponent('ion-content', undefined, undefined, defineCustomElement$f);
645
- const IonDatetime = /*@__PURE__*/ createReactComponent('ion-datetime', undefined, undefined, defineCustomElement$g);
646
- const IonDatetimeButton = /*@__PURE__*/ createReactComponent('ion-datetime-button', undefined, undefined, defineCustomElement$h);
647
- const IonDivider = /*@__PURE__*/ createReactComponent('ion-divider', undefined, undefined, defineCustomElement$i);
648
- const IonFab = /*@__PURE__*/ createReactComponent('ion-fab', undefined, undefined, defineCustomElement$j);
649
- const IonFabList = /*@__PURE__*/ createReactComponent('ion-fab-list', undefined, undefined, defineCustomElement$k);
650
- const IonFooter = /*@__PURE__*/ createReactComponent('ion-footer', undefined, undefined, defineCustomElement$l);
651
- const IonGrid = /*@__PURE__*/ createReactComponent('ion-grid', undefined, undefined, defineCustomElement$m);
652
- const IonHeader = /*@__PURE__*/ createReactComponent('ion-header', undefined, undefined, defineCustomElement$n);
653
- const IonImg = /*@__PURE__*/ createReactComponent('ion-img', undefined, undefined, defineCustomElement$o);
654
- const IonInfiniteScroll = /*@__PURE__*/ createReactComponent('ion-infinite-scroll', undefined, undefined, defineCustomElement$p);
655
- const IonInfiniteScrollContent = /*@__PURE__*/ createReactComponent('ion-infinite-scroll-content', undefined, undefined, defineCustomElement$q);
656
- const IonInput = /*@__PURE__*/ createReactComponent('ion-input', undefined, undefined, defineCustomElement$r);
657
- const IonInputOtp = /*@__PURE__*/ createReactComponent('ion-input-otp', undefined, undefined, defineCustomElement$s);
658
- const IonInputPasswordToggle = /*@__PURE__*/ createReactComponent('ion-input-password-toggle', undefined, undefined, defineCustomElement$t);
659
- const IonItemDivider = /*@__PURE__*/ createReactComponent('ion-item-divider', undefined, undefined, defineCustomElement$u);
660
- const IonItemGroup = /*@__PURE__*/ createReactComponent('ion-item-group', undefined, undefined, defineCustomElement$v);
661
- const IonItemOptions = /*@__PURE__*/ createReactComponent('ion-item-options', undefined, undefined, defineCustomElement$w);
662
- const IonItemSliding = /*@__PURE__*/ createReactComponent('ion-item-sliding', undefined, undefined, defineCustomElement$x);
663
- const IonLabel = /*@__PURE__*/ createReactComponent('ion-label', undefined, undefined, defineCustomElement$y);
664
- const IonList = /*@__PURE__*/ createReactComponent('ion-list', undefined, undefined, defineCustomElement$z);
665
- const IonListHeader = /*@__PURE__*/ createReactComponent('ion-list-header', undefined, undefined, defineCustomElement$A);
666
- const IonMenu = /*@__PURE__*/ createReactComponent('ion-menu', undefined, undefined, defineCustomElement$B);
667
- const IonMenuButton = /*@__PURE__*/ createReactComponent('ion-menu-button', undefined, undefined, defineCustomElement$C);
668
- const IonMenuToggle = /*@__PURE__*/ createReactComponent('ion-menu-toggle', undefined, undefined, defineCustomElement$D);
669
- const IonNavLink = /*@__PURE__*/ createReactComponent('ion-nav-link', undefined, undefined, defineCustomElement$E);
670
- const IonNote = /*@__PURE__*/ createReactComponent('ion-note', undefined, undefined, defineCustomElement$F);
671
- const IonPicker = /*@__PURE__*/ createReactComponent('ion-picker', undefined, undefined, defineCustomElement$G);
672
- const IonPickerColumn = /*@__PURE__*/ createReactComponent('ion-picker-column', undefined, undefined, defineCustomElement$H);
673
- const IonPickerColumnOption = /*@__PURE__*/ createReactComponent('ion-picker-column-option', undefined, undefined, defineCustomElement$I);
674
- const IonProgressBar = /*@__PURE__*/ createReactComponent('ion-progress-bar', undefined, undefined, defineCustomElement$J);
675
- const IonRadio = /*@__PURE__*/ createReactComponent('ion-radio', undefined, undefined, defineCustomElement$K);
676
- const IonRadioGroup = /*@__PURE__*/ createReactComponent('ion-radio-group', undefined, undefined, defineCustomElement$L);
677
- const IonRange = /*@__PURE__*/ createReactComponent('ion-range', undefined, undefined, defineCustomElement$M);
678
- const IonRefresher = /*@__PURE__*/ createReactComponent('ion-refresher', undefined, undefined, defineCustomElement$N);
679
- const IonRefresherContent = /*@__PURE__*/ createReactComponent('ion-refresher-content', undefined, undefined, defineCustomElement$O);
680
- const IonReorder = /*@__PURE__*/ createReactComponent('ion-reorder', undefined, undefined, defineCustomElement$P);
681
- const IonReorderGroup = /*@__PURE__*/ createReactComponent('ion-reorder-group', undefined, undefined, defineCustomElement$Q);
682
- const IonRippleEffect = /*@__PURE__*/ createReactComponent('ion-ripple-effect', undefined, undefined, defineCustomElement$R);
683
- const IonRow = /*@__PURE__*/ createReactComponent('ion-row', undefined, undefined, defineCustomElement$S);
684
- const IonSearchbar = /*@__PURE__*/ createReactComponent('ion-searchbar', undefined, undefined, defineCustomElement$T);
685
- const IonSegment = /*@__PURE__*/ createReactComponent('ion-segment', undefined, undefined, defineCustomElement$U);
686
- const IonSegmentButton = /*@__PURE__*/ createReactComponent('ion-segment-button', undefined, undefined, defineCustomElement$V);
687
- const IonSegmentContent = /*@__PURE__*/ createReactComponent('ion-segment-content', undefined, undefined, defineCustomElement$W);
688
- const IonSegmentView = /*@__PURE__*/ createReactComponent('ion-segment-view', undefined, undefined, defineCustomElement$X);
689
- const IonSelect = /*@__PURE__*/ createReactComponent('ion-select', undefined, undefined, defineCustomElement$Y);
690
- const IonSelectModal = /*@__PURE__*/ createReactComponent('ion-select-modal', undefined, undefined, defineCustomElement$Z);
691
- const IonSelectOption = /*@__PURE__*/ createReactComponent('ion-select-option', undefined, undefined, defineCustomElement$_);
692
- const IonSkeletonText = /*@__PURE__*/ createReactComponent('ion-skeleton-text', undefined, undefined, defineCustomElement$$);
693
- const IonSpinner = /*@__PURE__*/ createReactComponent('ion-spinner', undefined, undefined, defineCustomElement$10);
694
- const IonSplitPane = /*@__PURE__*/ createReactComponent('ion-split-pane', undefined, undefined, defineCustomElement$11);
695
- const IonTab = /*@__PURE__*/ createReactComponent('ion-tab', undefined, undefined, defineCustomElement$12);
696
- const IonText = /*@__PURE__*/ createReactComponent('ion-text', undefined, undefined, defineCustomElement$13);
697
- const IonTextarea = /*@__PURE__*/ createReactComponent('ion-textarea', undefined, undefined, defineCustomElement$14);
698
- const IonThumbnail = /*@__PURE__*/ createReactComponent('ion-thumbnail', undefined, undefined, defineCustomElement$15);
699
- const IonTitle = /*@__PURE__*/ createReactComponent('ion-title', undefined, undefined, defineCustomElement$16);
700
- const IonToggle = /*@__PURE__*/ createReactComponent('ion-toggle', undefined, undefined, defineCustomElement$17);
701
- const IonToolbar = /*@__PURE__*/ createReactComponent('ion-toolbar', undefined, undefined, defineCustomElement$18);
702
-
703
1254
  const createForwardRef = (ReactComponent, // TODO(FW-2959): type
704
1255
  displayName) => {
705
1256
  const forwardRef = (props, ref) => {
@@ -990,19 +1541,19 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
990
1541
  };
991
1542
  const DELEGATE_HOST = 'ion-delegate-host';
992
1543
 
993
- const IonAlert = /*@__PURE__*/ createInlineOverlayComponent('ion-alert', defineCustomElement$19);
1544
+ const IonAlert = /*@__PURE__*/ createInlineOverlayComponent('ion-alert', defineCustomElement$18);
994
1545
 
995
- const IonLoading = /*@__PURE__*/ createInlineOverlayComponent('ion-loading', defineCustomElement$1a);
1546
+ const IonLoading = /*@__PURE__*/ createInlineOverlayComponent('ion-loading', defineCustomElement$19);
996
1547
 
997
- const IonToast = /*@__PURE__*/ createInlineOverlayComponent('ion-toast', defineCustomElement$1b);
1548
+ const IonToast = /*@__PURE__*/ createInlineOverlayComponent('ion-toast', defineCustomElement$1a);
998
1549
 
999
- const IonPickerLegacy = /*@__PURE__*/ createInlineOverlayComponent('ion-picker-legacy', defineCustomElement$1c);
1550
+ const IonPickerLegacy = /*@__PURE__*/ createInlineOverlayComponent('ion-picker-legacy', defineCustomElement$1b);
1000
1551
 
1001
- const IonActionSheet = /*@__PURE__*/ createInlineOverlayComponent('ion-action-sheet', defineCustomElement$1d);
1552
+ const IonActionSheet = /*@__PURE__*/ createInlineOverlayComponent('ion-action-sheet', defineCustomElement$1c);
1002
1553
 
1003
- const IonModal = /*@__PURE__*/ createInlineOverlayComponent('ion-modal', defineCustomElement$1e, true);
1554
+ const IonModal = /*@__PURE__*/ createInlineOverlayComponent('ion-modal', defineCustomElement$1d, true);
1004
1555
 
1005
- const IonPopover = /*@__PURE__*/ createInlineOverlayComponent('ion-popover', defineCustomElement$1f);
1556
+ const IonPopover = /*@__PURE__*/ createInlineOverlayComponent('ion-popover', defineCustomElement$1e);
1006
1557
 
1007
1558
  const IonContext = React.createContext({
1008
1559
  addOverlay: () => {
@@ -1094,14 +1645,81 @@ const IonOverlayManager = ({ onAddOverlay, onRemoveOverlay }) => {
1094
1645
  }) }));
1095
1646
  };
1096
1647
 
1097
- const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1g);
1098
- const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1h);
1099
- const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1i);
1100
- const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1j);
1101
- const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1k);
1102
- const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1l);
1648
+ const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
1649
+ if (defineCustomElement !== undefined) {
1650
+ defineCustomElement();
1651
+ }
1652
+ const displayName = dashToPascalCase(tagName);
1653
+ const ReactComponent = class extends React.Component {
1654
+ constructor(props) {
1655
+ super(props);
1656
+ this.setComponentElRef = (element) => {
1657
+ this.componentEl = element;
1658
+ };
1659
+ }
1660
+ componentDidMount() {
1661
+ this.componentDidUpdate(this.props);
1662
+ }
1663
+ componentDidUpdate(prevProps) {
1664
+ attachProps(this.componentEl, this.props, prevProps);
1665
+ }
1666
+ render() {
1667
+ const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
1668
+ let propsToPass = Object.keys(cProps).reduce((acc, name) => {
1669
+ const value = cProps[name];
1670
+ if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
1671
+ const eventName = name.substring(2).toLowerCase();
1672
+ if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
1673
+ acc[name] = value;
1674
+ }
1675
+ }
1676
+ else {
1677
+ // we should only render strings, booleans, and numbers as attrs in html.
1678
+ // objects, functions, arrays etc get synced via properties on mount.
1679
+ const type = typeof value;
1680
+ if (type === 'string' || type === 'boolean' || type === 'number') {
1681
+ acc[camelToDashCase(name)] = value;
1682
+ }
1683
+ }
1684
+ return acc;
1685
+ }, {});
1686
+ if (manipulatePropsFunction) {
1687
+ propsToPass = manipulatePropsFunction(this.props, propsToPass);
1688
+ }
1689
+ const newProps = {
1690
+ ...propsToPass,
1691
+ ref: mergeRefs(forwardedRef, this.setComponentElRef),
1692
+ style,
1693
+ children
1694
+ };
1695
+ /**
1696
+ * We use createElement here instead of
1697
+ * React.createElement to work around a
1698
+ * bug in Vite (https://github.com/vitejs/vite/issues/6104).
1699
+ * React.createElement causes all elements to be rendered
1700
+ * as <tagname> instead of the actual Web Component.
1701
+ */
1702
+ return createElement(tagName, newProps, children);
1703
+ }
1704
+ static get displayName() {
1705
+ return displayName;
1706
+ }
1707
+ };
1708
+ // If context was passed to createReactComponent then conditionally add it to the Component Class
1709
+ if (ReactComponentContext) {
1710
+ ReactComponent.contextType = ReactComponentContext;
1711
+ }
1712
+ return createForwardRef$1(ReactComponent, displayName);
1713
+ };
1714
+
1715
+ const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1f);
1716
+ const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1g);
1717
+ const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1h);
1718
+ const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1i);
1719
+ const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1j);
1720
+ const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1k);
1103
1721
  // ionicons
1104
- const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1m);
1722
+ const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1l);
1105
1723
 
1106
1724
  class IonApp extends React.Component {
1107
1725
  constructor(props) {
@@ -1254,7 +1872,7 @@ const ReactDelegate = (addView, removeView) => {
1254
1872
  };
1255
1873
  };
1256
1874
 
1257
- const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1n);
1875
+ const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1m);
1258
1876
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
1259
1877
  const IonNavInternal = ({ children, forwardedRef, ...restOfProps }) => {
1260
1878
  const [views, setViews] = useState([]);
@@ -2026,7 +2644,7 @@ function useController(displayName, controller, defineCustomElement) {
2026
2644
  * @returns Returns the present and dismiss methods in an array
2027
2645
  */
2028
2646
  function useIonActionSheet() {
2029
- const controller = useController('IonActionSheet', actionSheetController, defineCustomElement$1d);
2647
+ const controller = useController('IonActionSheet', actionSheetController, defineCustomElement$1c);
2030
2648
  const present = useCallback((buttonsOrOptions, header) => {
2031
2649
  if (Array.isArray(buttonsOrOptions)) {
2032
2650
  return controller.present({
@@ -2046,7 +2664,7 @@ function useIonActionSheet() {
2046
2664
  * @returns Returns the present and dismiss methods in an array
2047
2665
  */
2048
2666
  function useIonAlert() {
2049
- const controller = useController('IonAlert', alertController, defineCustomElement$19);
2667
+ const controller = useController('IonAlert', alertController, defineCustomElement$18);
2050
2668
  const present = useCallback((messageOrOptions, buttons) => {
2051
2669
  if (typeof messageOrOptions === 'string') {
2052
2670
  return controller.present({
@@ -2066,7 +2684,7 @@ function useIonAlert() {
2066
2684
  * @returns Returns the present and dismiss methods in an array
2067
2685
  */
2068
2686
  function useIonToast() {
2069
- const controller = useController('IonToast', toastController, defineCustomElement$1b);
2687
+ const controller = useController('IonToast', toastController, defineCustomElement$1a);
2070
2688
  const present = useCallback((messageOrOptions, duration) => {
2071
2689
  if (typeof messageOrOptions === 'string') {
2072
2690
  return controller.present({
@@ -2152,7 +2770,7 @@ function useOverlay(displayName, controller, defineCustomElement, component, com
2152
2770
  * @returns Returns the present and dismiss methods in an array
2153
2771
  */
2154
2772
  function useIonModal(component, componentProps) {
2155
- const controller = useOverlay('IonModal', modalController, defineCustomElement$1e, component, componentProps);
2773
+ const controller = useOverlay('IonModal', modalController, defineCustomElement$1d, component, componentProps);
2156
2774
  const present = useCallback((options = {}) => {
2157
2775
  controller.present(options);
2158
2776
  }, [controller.present]);
@@ -2167,7 +2785,7 @@ function useIonModal(component, componentProps) {
2167
2785
  * @returns Returns the present and dismiss methods in an array
2168
2786
  */
2169
2787
  function useIonPopover(component, componentProps) {
2170
- const controller = useOverlay('IonPopover', popoverController, defineCustomElement$1f, component, componentProps);
2788
+ const controller = useOverlay('IonPopover', popoverController, defineCustomElement$1e, component, componentProps);
2171
2789
  const present = useCallback((options = {}) => {
2172
2790
  controller.present(options);
2173
2791
  }, [controller.present]);
@@ -2180,7 +2798,7 @@ function useIonPopover(component, componentProps) {
2180
2798
  * @deprecated Use the inline ion-picker component instead.
2181
2799
  */
2182
2800
  function useIonPicker() {
2183
- const controller = useController('IonPicker', pickerController, defineCustomElement$1c);
2801
+ const controller = useController('IonPicker', pickerController, defineCustomElement$1b);
2184
2802
  const present = useCallback((columnsOrOptions, buttons) => {
2185
2803
  if (Array.isArray(columnsOrOptions)) {
2186
2804
  return controller.present({
@@ -2200,7 +2818,7 @@ function useIonPicker() {
2200
2818
  * @returns Returns the present and dismiss methods in an array
2201
2819
  */
2202
2820
  function useIonLoading() {
2203
- const controller = useController('IonLoading', loadingController, defineCustomElement$1a);
2821
+ const controller = useController('IonLoading', loadingController, defineCustomElement$19);
2204
2822
  const present = useCallback((messageOrOptions = {}, duration, spinner) => {
2205
2823
  if (typeof messageOrOptions === 'string') {
2206
2824
  return controller.present({
@@ -2546,5 +3164,5 @@ class ViewStacks {
2546
3164
  }
2547
3165
  }
2548
3166
 
2549
- 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, 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 };
3167
+ 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, 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 };
2550
3168
  //# sourceMappingURL=index.js.map